cue-console 0.1.15 → 0.1.17

package/bin/cue-console.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
-const { spawn } = require("node:child_process");
-const fs = require("node:fs");
-const path = require("node:path");
+let spawn;
+let fs;
+let path;
 
 function printHelp() {
   process.stdout.write(
@@ -44,6 +44,13 @@ function parseArgs(argv) {
 }
 
 async function main() {
+  if (!spawn || !fs || !path) {
+    const childProcess = await import("node:child_process");
+    spawn = childProcess.spawn;
+    fs = await import("node:fs");
+    path = await import("node:path");
+  }
+
   const { command, port, host, passthrough } = parseArgs(process.argv.slice(2));
 
   if (!command) {
@@ -57,12 +64,11 @@ async function main() {
     process.exit(1);
   }
 
-  let nextBin;
-  try {
-    nextBin = require.resolve("next/dist/bin/next");
-  } catch (e) {
+  const pkgRoot = path.resolve(__dirname, "..");
+  const nextBin = path.join(pkgRoot, "node_modules", "next", "dist", "bin", "next");
+  if (!fs.existsSync(nextBin)) {
     process.stderr.write(
-      "Unable to resolve Next.js CLI. Please install dependencies first (e.g. pnpm install).\n"
+      "Unable to resolve Next.js CLI. Please install dependencies first (e.g. npm install).\n"
     );
     process.exit(1);
   }
@@ -71,8 +77,6 @@ async function main() {
   if (port) env.PORT = String(port);
   if (host) env.HOSTNAME = String(host);
 
-  const pkgRoot = path.resolve(__dirname, "..");
-
   const spawnNext = (subcmd) =>
     new Promise((resolve, reject) => {
       const child = spawn(process.execPath, [nextBin, subcmd, ...passthrough], {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cue-console",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Cue Hub console launcher (Next.js UI)",
   "license": "Apache-2.0",
   "keywords": ["mcp", "cue", "console", "nextjs"],

package/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "@fontsource-variable/source-sans-3";
 import "./globals.css";
+import { Providers } from "./providers";
 
 export const metadata: Metadata = {
   title: "cue-console",
@@ -18,7 +19,7 @@ export default function RootLayout({
         className="antialiased"
         suppressHydrationWarning
       >
-        {children}
+        <Providers>{children}</Providers>
       </body>
     </html>
   );

package/src/app/page.tsx

@@ -12,7 +12,16 @@ export default function Home() {
   const [selectedType, setSelectedType] = useState<"agent" | "group" | null>(null);
   const [selectedName, setSelectedName] = useState<string>("");
   const [showCreateGroup, setShowCreateGroup] = useState(false);
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    try {
+      const raw = window.localStorage.getItem("cuehub.sidebarCollapsed");
+      if (raw === "1") return true;
+      if (raw === "0") return false;
+      return false;
+    } catch {
+      return false;
+    }
+  });
 
   useEffect(() => {
     let stopped = false;
@@ -105,16 +114,6 @@ export default function Home() {
     };
   }, []);
 
-  useEffect(() => {
-    try {
-      const raw = window.localStorage.getItem("cuehub.sidebarCollapsed");
-      if (raw === "1") setSidebarCollapsed(true);
-      if (raw === "0") setSidebarCollapsed(false);
-    } catch {
-      // ignore
-    }
-  }, []);
-
   useEffect(() => {
     try {
       window.localStorage.setItem("cuehub.sidebarCollapsed", sidebarCollapsed ? "1" : "0");

package/src/app/providers.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { ConfigProvider } from "@/contexts/config-context";
+
+export function Providers({ children }: { children: ReactNode }) {
+  return <ConfigProvider>{children}</ConfigProvider>;
+}

package/src/components/chat/message-bubble.tsx

@@ -1,10 +1,11 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { cn, getAgentEmoji, formatFullTime, getWaitingDuration } from "@/lib/utils";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
 import { PayloadCard } from "@/components/payload-card";
 import type { CueRequest } from "@/lib/actions";
+import { Copy, Check } from "lucide-react";
 
 interface MessageBubbleProps {
   request: CueRequest;
@@ -44,6 +45,17 @@ export function MessageBubble({
   onCancel,
 }: MessageBubbleProps) {
   const isPending = request.status === "PENDING";
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(request.prompt || "");
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
 
   const isPause = useMemo(() => {
     if (!request.payload) return false;
@@ -133,6 +145,17 @@ export function MessageBubble({
         </div>
         <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
           <span className="shrink-0">{formatFullTime(request.created_at || "")}</span>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-auto p-1 text-xs"
+            onClick={handleCopy}
+            disabled={disabled}
+            title={copied ? "已复制" : "复制"}
+          >
+            {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+            <span className="ml-1">{copied ? "已复制" : "复制"}</span>
+          </Button>
           {isPending && (
             <>
               <Badge variant="outline" className="text-xs shrink-0">

package/src/components/chat/timeline-list.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import { memo, useMemo, type ReactNode } from "react";
+import { memo } from "react";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { cn, formatFullTime, getAgentEmoji, getWaitingDuration } from "@/lib/utils";
-import { MarkdownRenderer } from "@/components/markdown-renderer";
-import { PayloadCard } from "@/components/payload-card";
-import type { AgentTimelineItem, CueRequest, CueResponse } from "@/lib/actions";
+import { cn } from "@/lib/utils";
+import type { AgentTimelineItem } from "@/lib/actions";
+import { MessageBubble } from "@/components/chat/message-bubble";
+import { UserResponseBubble } from "@/components/chat/user-response-bubble";
 
 function parseDbTime(dateStr: string) {
   return new Date((dateStr || "").replace(" ", "T"));
@@ -152,319 +151,3 @@ export const TimelineList = memo(function TimelineList({
     </>
   );
 });
-
-const MessageBubble = memo(function MessageBubble({
-  request,
-  showAgent,
-  agentNameMap,
-  avatarUrlMap,
-  isHistory,
-  showName,
-  showAvatar,
-  compact,
-  disabled,
-  currentInput,
-  isGroup,
-  onPasteChoice,
-  onSubmitConfirm,
-  onMentionAgent,
-  onReply,
-  onCancel,
-}: {
-  request: CueRequest;
-  showAgent?: boolean;
-  agentNameMap?: Record<string, string>;
-  avatarUrlMap?: Record<string, string>;
-  isHistory?: boolean;
-  showName?: boolean;
-  showAvatar?: boolean;
-  compact?: boolean;
-  disabled?: boolean;
-  currentInput?: string;
-  isGroup?: boolean;
-  onPasteChoice?: (text: string, mode?: "replace" | "append" | "upsert") => void;
-  onSubmitConfirm?: (
-    requestId: string,
-    text: string,
-    cancelled: boolean
-  ) => void | Promise<void>;
-  onMentionAgent?: (agentId: string) => void;
-  onReply?: () => void;
-  onCancel?: () => void;
-}) {
-  const isPending = request.status === "PENDING";
-
-  const isPause = useMemo(() => {
-    if (!request.payload) return false;
-    try {
-      const obj = JSON.parse(request.payload) as Record<string, unknown>;
-      return obj?.type === "confirm" && obj?.variant === "pause";
-    } catch {
-      return false;
-    }
-  }, [request.payload]);
-
-  const selectedLines = useMemo(() => {
-    const text = (currentInput || "").trim();
-    if (!text) return new Set<string>();
-    return new Set(
-      text
-        .split(/\r?\n/)
-        .map((s) => s.trim())
-        .filter(Boolean)
-    );
-  }, [currentInput]);
-
-  const rawId = request.agent_id || "";
-  const displayName = (agentNameMap && rawId ? agentNameMap[rawId] || rawId : rawId) || "";
-  const cardMaxWidth = (showAvatar ?? true) ? "calc(100% - 3rem)" : "100%";
-  const avatarUrl = rawId && avatarUrlMap ? avatarUrlMap[`agent:${rawId}`] : "";
-
-  return (
-    <div
-      className={cn(
-        "flex max-w-full min-w-0 items-start gap-3",
-        compact && "gap-2",
-        isHistory && "opacity-60"
-      )}
-    >
-      {(showAvatar ?? true) ? (
-        <span
-          className={cn(
-            "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-lg",
-            isGroup && request.agent_id && onMentionAgent && "cursor-pointer"
-          )}
-          title={
-            isGroup && request.agent_id && onMentionAgent
-              ? "Double-click avatar to @mention"
-              : undefined
-          }
-          onDoubleClick={() => {
-            if (!isGroup) return;
-            const agentId = request.agent_id;
-            if (!agentId) return;
-            onMentionAgent?.(agentId);
-          }}
-        >
-          {avatarUrl ? (
-            <img src={avatarUrl} alt="" className="h-full w-full rounded-full" />
-          ) : (
-            getAgentEmoji(request.agent_id || "")
-          )}
-        </span>
-      ) : (
-        <span className="h-9 w-9 shrink-0" />
-      )}
-      <div className="flex-1 min-w-0 overflow-hidden">
-        {(showName ?? true) && (showAgent || displayName) && (
-          <p className="mb-1 text-xs text-muted-foreground truncate">{displayName}</p>
-        )}
-        <div
-          className={cn(
-            "rounded-3xl p-3 sm:p-4 max-w-full flex-1 basis-0 min-w-0 overflow-hidden",
-            "glass-surface-soft glass-noise",
-            isPending ? "ring-1 ring-ring/25" : "ring-1 ring-white/25"
-          )}
-          style={{ clipPath: "inset(0 round 1rem)", maxWidth: cardMaxWidth }}
-        >
-          <div className="text-sm wrap-anywhere overflow-hidden min-w-0">
-            <MarkdownRenderer>{request.prompt || ""}</MarkdownRenderer>
-          </div>
-          <PayloadCard
-            raw={request.payload}
-            disabled={disabled}
-            onPasteChoice={onPasteChoice}
-            onSubmitConfirm={(text, cancelled) =>
-              isPending ? onSubmitConfirm?.(request.request_id, text, cancelled) : undefined
-            }
-            selectedLines={selectedLines}
-          />
-        </div>
-        <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-          <span className="shrink-0">{formatFullTime(request.created_at || "")}</span>
-          {isPending && (
-            <>
-              <Badge variant="outline" className="text-xs shrink-0">
-                Waiting {getWaitingDuration(request.created_at || "")}
-              </Badge>
-              {!isPause && (
-                <>
-                  <Badge variant="default" className="text-xs shrink-0">
-                    Pending
-                  </Badge>
-                  {onReply && (
-                    <Button
-                      variant="link"
-                      size="sm"
-                      className="h-auto p-0 text-xs"
-                      onClick={onReply}
-                      disabled={disabled}
-                    >
-                      Reply
-                    </Button>
-                  )}
-                  {onCancel && (
-                    <Button
-                      variant="link"
-                      size="sm"
-                      className="h-auto p-0 text-xs text-destructive"
-                      onClick={onCancel}
-                      disabled={disabled}
-                    >
-                      End
-                    </Button>
-                  )}
-                </>
-              )}
-            </>
-          )}
-          {request.status === "COMPLETED" && (
-            <Badge variant="secondary" className="text-xs shrink-0">
-              Replied
-            </Badge>
-          )}
-          {request.status === "CANCELLED" && (
-            <Badge variant="destructive" className="text-xs shrink-0">
-              Ended
-            </Badge>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-});
-
-const UserResponseBubble = memo(function UserResponseBubble({
-  response,
-  showAvatar = true,
-  compact = false,
-  onPreview,
-}: {
-  response: CueResponse;
-  showAvatar?: boolean;
-  compact?: boolean;
-  onPreview?: (img: { mime_type: string; base64_data: string }) => void;
-}) {
-  const parsed = JSON.parse(response.response_json || "{}") as {
-    text?: string;
-    mentions?: { userId: string; start: number; length: number; display: string }[];
-  };
-
-  const files = Array.isArray((response as any).files) ? ((response as any).files as any[]) : [];
-  const imageFiles = files.filter((f) => {
-    const mime = String(f?.mime_type || "");
-    return mime.startsWith("image/") && typeof f?.inline_base64 === "string" && f.inline_base64.length > 0;
-  });
-  const otherFiles = files.filter((f) => {
-    const mime = String(f?.mime_type || "");
-    return !mime.startsWith("image/");
-  });
-
-  const renderTextWithMentions = (text: string, mentions?: { start: number; length: number }[]) => {
-    if (!mentions || mentions.length === 0) return text;
-    const safe = [...mentions]
-      .filter((m) => m.start >= 0 && m.length > 0 && m.start + m.length <= text.length)
-      .sort((a, b) => a.start - b.start);
-
-    const nodes: ReactNode[] = [];
-    let cursor = 0;
-    for (const m of safe) {
-      if (m.start < cursor) continue;
-      if (m.start > cursor) {
-        nodes.push(text.slice(cursor, m.start));
-      }
-      const seg = text.slice(m.start, m.start + m.length);
-      nodes.push(
-        <span key={`m-${m.start}`} className="text-emerald-900/90 dark:text-emerald-950 font-semibold">
-          {seg}
-        </span>
-      );
-      cursor = m.start + m.length;
-    }
-    if (cursor < text.length) nodes.push(text.slice(cursor));
-    return nodes;
-  };
-
-  if (response.cancelled) {
-    return (
-      <div className="flex justify-end gap-3 max-w-full min-w-0">
-        <div
-          className="rounded-3xl p-3 sm:p-4 max-w-full flex-1 basis-0 min-w-0 sm:max-w-215 sm:flex-none sm:w-fit overflow-hidden glass-surface-soft glass-noise ring-1 ring-white/25"
-          style={{
-            clipPath: "inset(0 round 1rem)",
-            maxWidth: showAvatar ? "calc(100% - 3rem)" : "100%",
-          }}
-        >
-          <p className="text-sm text-muted-foreground italic">Conversation ended</p>
-          <p className="text-xs text-muted-foreground mt-1">{formatFullTime(response.created_at)}</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn("flex justify-end gap-3 max-w-full min-w-0", compact && "gap-2")}>
-      <div
-        className="rounded-3xl p-3 sm:p-4 max-w-full flex-1 basis-0 min-w-0 sm:max-w-215 sm:flex-none sm:w-fit overflow-hidden glass-surface-soft glass-noise ring-1 ring-white/25"
-        style={{
-          clipPath: "inset(0 round 1rem)",
-          maxWidth: showAvatar ? "calc(100% - 3rem)" : "100%",
-        }}
-      >
-        {parsed.text && (
-          <div className="text-sm wrap-anywhere overflow-hidden min-w-0">
-            {parsed.mentions && parsed.mentions.length > 0 ? (
-              <p className="whitespace-pre-wrap">{renderTextWithMentions(parsed.text, parsed.mentions)}</p>
-            ) : (
-              <MarkdownRenderer>{parsed.text}</MarkdownRenderer>
-            )}
-          </div>
-        )}
-        {imageFiles.length > 0 && (
-          <div className="flex flex-wrap gap-2 mt-2 max-w-full">
-            {imageFiles.map((f, i) => {
-              const mime = String(f?.mime_type || "image/png");
-              const b64 = String(f?.inline_base64 || "");
-              const img = { mime_type: mime, base64_data: b64 };
-              return (
-                <img
-                  key={i}
-                  src={`data:${img.mime_type};base64,${img.base64_data}`}
-                  alt=""
-                  className="max-h-32 max-w-full h-auto rounded cursor-pointer"
-                  onClick={() => onPreview?.(img)}
-                />
-              );
-            })}
-          </div>
-        )}
-
-        {otherFiles.length > 0 && (
-          <div className="mt-2 flex flex-col gap-1 max-w-full">
-            {otherFiles.map((f, i) => {
-              const fileRef = String(f?.file || "");
-              const name = fileRef.split("/").filter(Boolean).pop() || fileRef || "file";
-              return (
-                <div
-                  key={i}
-                  className="px-2 py-1 rounded-lg bg-white/40 dark:bg-black/20 ring-1 ring-border/40 text-xs text-foreground/80 truncate"
-                  title={fileRef}
-                >
-                  {name}
-                </div>
-              );
-            })}
-          </div>
-        )}
-        <p className="text-xs opacity-70 mt-1 text-right">{formatFullTime(response.created_at)}</p>
-      </div>
-      {showAvatar ? (
-        <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-lg">
-          👤
-        </span>
-      ) : (
-        <span className="h-9 w-9 shrink-0" />
-      )}
-    </div>
-  );
-});

package/src/components/chat/user-response-bubble.tsx

@@ -1,7 +1,8 @@
-import type { ReactNode } from "react";
+import { useMemo, type ReactNode } from "react";
 import { cn, formatFullTime } from "@/lib/utils";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
 import type { CueResponse } from "@/lib/actions";
+import { useConfig } from "@/contexts/config-context";
 
 interface UserResponseBubbleProps {
   response: CueResponse;
@@ -16,18 +17,56 @@ export function UserResponseBubble({
   compact = false,
   onPreview,
 }: UserResponseBubbleProps) {
+  const { config } = useConfig();
   const parsed = JSON.parse(response.response_json || "{}") as {
     text?: string;
     mentions?: { userId: string; start: number; length: number; display: string }[];
   };
 
-  const files = Array.isArray((response as any).files) ? ((response as any).files as any[]) : [];
+  const analysisOnlyInstruction = config.chat_mode_append_text;
+  const { analysisOnlyApplied, displayText } = useMemo(() => {
+    const text = parsed.text;
+    if (typeof text !== "string") return { analysisOnlyApplied: false, displayText: text };
+
+    const raw = text;
+    const lines = raw.split(/\r?\n/);
+    let lastNonEmpty = -1;
+    for (let i = lines.length - 1; i >= 0; i--) {
+      if (lines[i]?.trim().length) {
+        lastNonEmpty = i;
+        break;
+      }
+    }
+    if (lastNonEmpty === -1) return { analysisOnlyApplied: false, displayText: raw };
+
+    const tail = (lines[lastNonEmpty] ?? "").trim();
+    if (tail !== analysisOnlyInstruction) {
+      return { analysisOnlyApplied: false, displayText: raw };
+    }
+
+    let cut = lastNonEmpty;
+    if (cut > 0 && (lines[cut - 1] ?? "").trim().length === 0) {
+      cut -= 1;
+    }
+    const stripped = lines.slice(0, cut).join("\n").replace(/\s+$/, "");
+    if (stripped.trim().length === 0) {
+      return { analysisOnlyApplied: false, displayText: raw };
+    }
+
+    return { analysisOnlyApplied: true, displayText: stripped };
+  }, [parsed.text, analysisOnlyInstruction]);
+
+  const filesRaw = (response as unknown as { files?: unknown }).files;
+  const files = Array.isArray(filesRaw) ? filesRaw : [];
   const imageFiles = files.filter((f) => {
-    const mime = String(f?.mime_type || "");
-    return mime.startsWith("image/") && typeof f?.inline_base64 === "string" && f.inline_base64.length > 0;
+    const obj = f && typeof f === "object" ? (f as Record<string, unknown>) : null;
+    const mime = String(obj?.mime_type || "");
+    const b64 = obj?.inline_base64;
+    return mime.startsWith("image/") && typeof b64 === "string" && b64.length > 0;
   });
   const otherFiles = files.filter((f) => {
-    const mime = String(f?.mime_type || "");
+    const obj = f && typeof f === "object" ? (f as Record<string, unknown>) : null;
+    const mime = String(obj?.mime_type || "");
     return !mime.startsWith("image/");
   });
 
@@ -85,22 +124,23 @@ export function UserResponseBubble({
           maxWidth: showAvatar ? "calc(100% - 3rem)" : "100%",
         }}
       >
-        {parsed.text && (
+        {displayText && (
           <div className="text-sm wrap-anywhere overflow-hidden min-w-0">
             {parsed.mentions && parsed.mentions.length > 0 ? (
               <p className="whitespace-pre-wrap">
-                {renderTextWithMentions(parsed.text, parsed.mentions)}
+                {renderTextWithMentions(displayText, parsed.mentions)}
               </p>
             ) : (
-              <MarkdownRenderer>{parsed.text}</MarkdownRenderer>
+              <MarkdownRenderer>{displayText}</MarkdownRenderer>
             )}
           </div>
         )}
         {imageFiles.length > 0 && (
           <div className="flex flex-wrap gap-2 mt-2 max-w-full">
             {imageFiles.map((f, i) => {
-              const mime = String(f?.mime_type || "image/png");
-              const b64 = String(f?.inline_base64 || "");
+              const obj = f && typeof f === "object" ? (f as Record<string, unknown>) : null;
+              const mime = String(obj?.mime_type || "image/png");
+              const b64 = String(obj?.inline_base64 || "");
               const img = { mime_type: mime, base64_data: b64 };
               return (
                 <img
@@ -118,7 +158,8 @@ export function UserResponseBubble({
         {otherFiles.length > 0 && (
           <div className="mt-2 flex flex-col gap-1 max-w-full">
             {otherFiles.map((f, i) => {
-              const fileRef = String(f?.file || "");
+              const obj = f && typeof f === "object" ? (f as Record<string, unknown>) : null;
+              const fileRef = String(obj?.file || "");
               const name = fileRef.split("/").filter(Boolean).pop() || fileRef || "file";
               return (
                 <div
@@ -132,7 +173,17 @@ export function UserResponseBubble({
             })}
           </div>
         )}
-        <p className="text-xs opacity-70 mt-1 text-right">{formatFullTime(response.created_at)}</p>
+        <div className="mt-1 flex items-center justify-end gap-2 text-xs opacity-70">
+          {analysisOnlyApplied && (
+            <span
+              className="rounded-full bg-white/40 dark:bg-black/20 px-2 py-0.5 ring-1 ring-border/40"
+              title="Chat 模式：只做分析，不做改动（该规则会发送给模型，但不会显示在消息正文里）"
+            >
+              Chat
+            </span>
+          )}
+          <span>{formatFullTime(response.created_at)}</span>
+        </div>
       </div>
       {showAvatar ? (
         <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-lg">

package/src/components/chat-composer.tsx

@@ -64,6 +64,8 @@ export function ChatComposer({
   canSend,
   hasPendingRequests,
   input,
+  conversationMode,
+  setConversationMode,
   setInput,
   images,
   setImages,
@@ -104,6 +106,8 @@ export function ChatComposer({
   canSend: boolean;
   hasPendingRequests: boolean;
   input: string;
+  conversationMode: "chat" | "agent";
+  setConversationMode: (mode: "chat" | "agent") => void;
   setInput: Dispatch<SetStateAction<string>>;
   images: { mime_type: string; base64_data: string; file_name?: string }[];
   setImages: Dispatch<SetStateAction<{ mime_type: string; base64_data: string; file_name?: string }[]>>;
@@ -571,6 +575,27 @@ export function ChatComposer({
                 <Plus className="h-4.5 w-4.5" />
               </Button>
 
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className={cn(
+                  "h-8 rounded-xl px-2",
+                  conversationMode === "chat"
+                    ? "bg-white/35 text-foreground ring-1 ring-white/25"
+                    : "text-muted-foreground hover:text-foreground",
+                  "hover:bg-white/40"
+                )}
+                onClick={() => {
+                  if (busy) return;
+                  setConversationMode(conversationMode === "chat" ? "agent" : "chat");
+                }}
+                disabled={busy}
+                title={conversationMode === "chat" ? "Chat mode" : "Agent mode"}
+              >
+                {conversationMode === "chat" ? "Chat" : "Agent"}
+              </Button>
+
               <Button
                 type="button"
                 variant="ghost"