fix(webui): complete temporary chat mode

webui/src/components/thread/ThreadHeader.tsx

@@ -1,8 +1,14 @@
-import { Menu, Moon, Sun } from "lucide-react";
-import type { ReactNode } from "react";
+import { Menu, MessageCircleDashed, Moon, Sun } from "lucide-react";
+import { type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 interface ThreadHeaderProps {
@@ -16,6 +22,9 @@ interface ThreadHeaderProps {
   minimal?: boolean;
   promptNavigatorAction?: ReactNode;
   sessionInfoAction?: ReactNode;
+  temporaryChatEnabled?: boolean;
+  temporaryChatDisabled?: boolean;
+  onTemporaryChatEnabledChange?: (enabled: boolean) => void;
 }
 
 export function ThreadHeader({
@@ -29,13 +38,17 @@ export function ThreadHeader({
   minimal = false,
   promptNavigatorAction,
   sessionInfoAction,
+  temporaryChatEnabled = false,
+  temporaryChatDisabled = false,
+  onTemporaryChatEnabledChange,
 }: ThreadHeaderProps) {
   const { t } = useTranslation();
 
   return (
     <div
+      data-testid="thread-header"
       className={cn(
-        "relative z-10 flex items-center justify-between gap-3 px-3 py-2",
+        "relative z-30 flex items-center justify-between gap-3 px-3 py-2",
         minimal && "h-11",
         !minimal && hostChromeTitleInset && "lg:pl-[128px]",
       )}
@@ -63,6 +76,45 @@ export function ThreadHeader({
       <div className="ml-auto flex shrink-0 items-center gap-1">
         {sessionInfoAction}
         {promptNavigatorAction}
+        {onTemporaryChatEnabledChange ? (
+          <TooltipProvider delayDuration={700} skipDelayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  disabled={temporaryChatDisabled}
+                  aria-label={t("temporaryChat.title")}
+                  aria-pressed={temporaryChatEnabled}
+                  onClick={() => onTemporaryChatEnabledChange(!temporaryChatEnabled)}
+                  className={cn(
+                    "host-no-drag h-8 w-8 shrink-0 rounded-full bg-transparent text-muted-foreground shadow-none transition-none hover:text-foreground",
+                    temporaryChatEnabled ? "hover:bg-transparent" : "hover:bg-accent/45",
+                  )}
+                >
+                  <MessageCircleDashed
+                    data-testid="temporary-chat-icon"
+                    className={cn(
+                      "h-4 w-4 motion-safe:transition-colors",
+                      temporaryChatEnabled
+                        ? "text-[var(--temporary-control-active)] motion-safe:duration-150"
+                        : "text-current motion-safe:duration-75",
+                    )}
+                    aria-hidden
+                  />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent
+                side="bottom"
+                align="end"
+                className="max-w-72 rounded-xl border border-border/70 bg-popover px-3 py-2 text-[12px]/[1.4] text-popover-foreground shadow-[0_8px_24px_rgba(15,23,42,0.13)] dark:border-white/10"
+              >
+                {t("temporaryChat.description")}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        ) : null}
         {!hideThemeButton ? (
           <ThemeButton
             theme={theme}