@mndrk/agx 2.0.22 → 2.0.24

package/cloud-runtime/standalone/components/chat-ui/ChatContainer.tsx

@@ -27,13 +27,14 @@ import type { Participant, GroupMessage, MessageSearchResponse, MessageSearchRes
 import type { TaskDraftMessage } from "@/types/tasks";
 import { buildTasks } from "@/services/agxService";
 import { useProjectsWithAgents, useProjects } from "@/hooks/useProjects";
-import { Search, ChevronLeft, SquareTerminal } from "lucide-react";
+import { Search, ChevronLeft, SquareTerminal, PanelLeftOpen, Moon, Sun } from "lucide-react";
 import { LogPanel } from "./LogPanel";
 import { StatusIndicator } from "./StatusIndicator";
 
 const LEGACY_THREAD_ID = "global";
 const SUMMARY_MARKER = "<!-- thread-summary -->";
 const TASK_DRAFT_MARKER = "<!-- task-draft -->";
+const THEME_STORAGE_KEY = "agx-theme";
 
 function stripThoughts(text: string): string {
   return text.replace(/(?:^|\n)Thinking\.\.\.[\s\S]*?\.\.\.done thinking\.?\s*/g, "\n").trim();
@@ -105,6 +106,42 @@ function getTimeAgo(ts: number) {
   return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" }).format(ts);
 }
 
+function getOrderedParticipantIds(
+  participants: Participant[],
+  projects: ReturnType<typeof useProjectsWithAgents>["projects"],
+  activeThreadId: string | null
+): string[] {
+  const participantIdSet = new Set(participants.map((participant) => participant.id));
+  const threadProject = activeThreadId
+    ? projects.find((project) => project.thread_ids?.includes(activeThreadId))
+    : projects[0];
+  const routingOrderIds = threadProject
+    ? threadProject.agents.map((agent) => agent.agent_id).filter((id) => participantIdSet.has(id))
+    : [];
+
+  if (routingOrderIds.length === 0) {
+    return participants.map((participant) => participant.id);
+  }
+
+  const routedIdSet = new Set(routingOrderIds);
+  const fallbackIds = participants
+    .map((participant) => participant.id)
+    .filter((id) => !routedIdSet.has(id));
+  return [...routingOrderIds, ...fallbackIds];
+}
+
+function reconcileActiveParticipantIds(
+  orderedParticipantIds: string[],
+  storedIds: string[] | null
+): string[] {
+  if (storedIds === null) {
+    return orderedParticipantIds;
+  }
+
+  const enabledIds = new Set(storedIds);
+  return orderedParticipantIds.filter((id) => enabledIds.has(id));
+}
+
 function toMarkdown(
   messages: GroupMessage[],
   participants: Participant[],
@@ -196,12 +233,25 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
   const [participantsLoaded, setParticipantsLoaded] = useState(false);
   const [activeParticipantIds, setActiveParticipantIds] = useState<string[]>([]);
   const [copied, setCopied] = useState(false);
+  const [theme, setTheme] = useState<"light" | "dark">(() => {
+    if (typeof window === "undefined") return "light";
+    const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+    if (stored === "dark" || stored === "light") return stored;
+    return document.documentElement.classList.contains("dark") ? "dark" : "light";
+  });
   const [workspaceSidebarVisible, setWorkspaceSidebarVisible] = useState(false);
 
   // Sync sidebar visibility from localStorage after hydration to avoid SSR mismatch
   useEffect(() => {
     setWorkspaceSidebarVisible(loadWorkspaceSidebarVisible());
   }, []);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const isDark = theme === "dark";
+    document.documentElement.classList.toggle("dark", isDark);
+    document.documentElement.style.colorScheme = theme;
+    window.localStorage.setItem(THEME_STORAGE_KEY, theme);
+  }, [theme]);
   const [logsOpen, setLogsOpen] = useState(false);
   const [autoModeThreads, setAutoModeThreads] = useState<Set<string>>(new Set());
   const [pendingAutoMode, setPendingAutoMode] = useState(false);
@@ -488,34 +538,21 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
     if (!participantsLoaded) {
       return;
     }
-
-    const participantIdSet = new Set(participants.map((p) => p.id));
-
-    // Use routing order from the thread's project if available, else fall back to participants order
-    const threadProject = activeThreadId
-      ? projects.find((p) => p.thread_ids?.includes(activeThreadId))
-      : projects[0];
-    const routingOrderIds = threadProject
-      ? threadProject.agents.map((a) => a.agent_id).filter((id) => participantIdSet.has(id))
-      : [];
-    // Append any participants not in the project (fallback)
-    const defaultIds = routingOrderIds.length > 0
-      ? [...routingOrderIds, ...participants.filter((p) => !routingOrderIds.includes(p.id)).map((p) => p.id)]
-      : participants.map((p) => p.id);
+    const orderedParticipantIds = getOrderedParticipantIds(participants, projects, activeThreadId);
 
     if (!activeThreadId) {
-      setActiveParticipantIds(defaultIds);
+      setActiveParticipantIds(orderedParticipantIds);
       return;
     }
 
     const storedIds = loadStoredActiveParticipantIds(activeThreadId);
     if (storedIds === null) {
-      setActiveParticipantIds(defaultIds);
+      setActiveParticipantIds(orderedParticipantIds);
       return;
     }
 
-    const reconciled = storedIds.filter((id) => participantIdSet.has(id));
-    if (reconciled.length !== storedIds.length) {
+    const reconciled = reconcileActiveParticipantIds(orderedParticipantIds, storedIds);
+    if (reconciled.length !== storedIds.length || reconciled.some((id, index) => storedIds[index] !== id)) {
       persistStoredActiveParticipantIds(activeThreadId, reconciled);
     }
     setActiveParticipantIds(reconciled);
@@ -667,9 +704,13 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
   }, [activeThreadId, messages, updateThreadMessages]);
 
   const handleThreadReply = useCallback(
-    (rootMessageId: string, content: string, maxRounds: number = 10) => {
+    (rootMessageId: string, content: string, maxRounds: number = 10, pinnedParticipantId?: string) => {
       if (!activeThreadId) return;
       if (activeParticipants.length === 0) return;
+      const selectedActiveIds = activeParticipants.map((participant) => participant.id);
+      const orderedActiveIds = pinnedParticipantId && selectedActiveIds.includes(pinnedParticipantId)
+        ? [pinnedParticipantId, ...selectedActiveIds.filter((participantId) => participantId !== pinnedParticipantId)]
+        : selectedActiveIds;
       void sendMessage(
         content,
         maxRounds,
@@ -677,7 +718,7 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
         rootMessageId,
         undefined,
         undefined,
-        activeParticipants.map((participant) => participant.id),
+        orderedActiveIds,
         projectSlug
       );
     },
@@ -882,7 +923,13 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
   }, [activeThreadId, handleSummarize, messages, openThreadId]);
 
   const handleSend = useCallback(
-    async (prompt: string, maxRounds: number, attachmentIds?: string[], attachmentMetas?: import("@/lib/types").Attachment[]) => {
+    async (
+      prompt: string,
+      maxRounds: number,
+      attachmentIds?: string[],
+      attachmentMetas?: import("@/lib/types").Attachment[],
+      pinnedParticipantId?: string
+    ) => {
       const searchMatch = prompt.match(/^\/search(?:\s+([\s\S]+))?$/i);
       if (searchMatch) {
         handleSearchCommand(searchMatch[1]);
@@ -920,6 +967,9 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
         window.alert("Enable at least one agent in this project.");
         return;
       }
+      const orderedActiveIds = pinnedParticipantId && selectedActiveIds.includes(pinnedParticipantId)
+        ? [pinnedParticipantId, ...selectedActiveIds.filter((participantId) => participantId !== pinnedParticipantId)]
+        : selectedActiveIds;
 
       if (openThreadId) {
         await sendMessage(
@@ -929,7 +979,7 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
           openThreadId,
           attachmentIds,
           attachmentMetas,
-          selectedActiveIds,
+          orderedActiveIds,
           projectSlug
         );
         return;
@@ -944,7 +994,7 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
         null,
         attachmentIds,
         attachmentMetas,
-        selectedActiveIds,
+        orderedActiveIds,
         projectSlug
       );
 
@@ -1106,7 +1156,9 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
   const renderReplyComposer = useCallback(
     (rootMessageId: string) => (
       <Composer
-        onSend={(message, maxRounds) => handleThreadReply(rootMessageId, message, maxRounds)}
+        onSend={(message, maxRounds, _attachmentIds, _attachments, pinnedParticipantId) =>
+          handleThreadReply(rootMessageId, message, maxRounds, pinnedParticipantId)
+        }
         onStop={() => handleStopThread(rootMessageId)}
         loading={Object.values(streaming).some((s) => s.rootMessageId === rootMessageId)}
         participants={activeParticipants}
@@ -1186,7 +1238,8 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
   const handleToggleParticipantActive = useCallback(
     (participantId: string, active: boolean) => {
       setActiveParticipantIds((prev) => {
-        const availableIds = new Set(participants.map((participant) => participant.id));
+        const orderedParticipantIds = getOrderedParticipantIds(participants, projects, activeThreadId);
+        const availableIds = new Set(orderedParticipantIds);
         if (!availableIds.has(participantId)) {
           return prev;
         }
@@ -1198,9 +1251,7 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
           nextSet.delete(participantId);
         }
 
-        const next = participants
-          .map((participant) => participant.id)
-          .filter((id) => nextSet.has(id));
+        const next = orderedParticipantIds.filter((id) => nextSet.has(id));
 
         if (activeThreadId) {
           persistStoredActiveParticipantIds(activeThreadId, next);
@@ -1209,7 +1260,7 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
         return next;
       });
     },
-    [activeThreadId, participants]
+    [activeThreadId, participants, projects]
   );
 
   const handleSelectProject = useCallback(
@@ -1227,46 +1278,100 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
     [projects, activeThreadId]
   );
 
-  const searchInputBar = (
-    <div className="border-b border-slate-200/60 bg-white px-6 py-2.5">
-      <div className="max-w-2xl mx-auto relative group/search">
-        <Search
-          className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400 group-focus-within/search:text-indigo-500 transition-colors"
-          strokeWidth={2}
-        />
-        <input
-          ref={searchInputRef}
-          type="text"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Escape") clearSearch();
-          }}
-          placeholder="Search messages…"
-          className="h-9 w-full rounded-lg border border-slate-200 bg-slate-50/80 pl-9 pr-16 text-sm font-medium outline-none placeholder:text-slate-400 transition-all focus:bg-white focus:border-indigo-300 focus:ring-2 focus:ring-indigo-500/10 hover:border-slate-300"
-        />
-        {normalizedSearchQuery ? (
-          <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
-            <span className="text-[11px] font-bold text-slate-400">
-              {searchLoading ? "…" : searchTotal}
-            </span>
+  const toggleTheme = useCallback(() => {
+    setTheme((current) => (current === "dark" ? "light" : "dark"));
+  }, []);
+
+  const renderThemeToggleButton = () => (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label={theme === "dark" ? "Switch to light theme" : "Switch to dark theme"}
+      title={theme === "dark" ? "Switch to light theme" : "Switch to dark theme"}
+      className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] text-[var(--app-shell-muted)] transition-all hover:border-[var(--app-shell-border-strong)] hover:bg-[var(--app-shell-subtle)] hover:text-[var(--foreground)]"
+    >
+      {theme === "dark" ? <Sun className="h-4 w-4" strokeWidth={1.75} /> : <Moon className="h-4 w-4" strokeWidth={1.75} />}
+    </button>
+  );
+
+  const mainToolbar = (
+    <div className="border-b border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] px-4 py-2.5 backdrop-blur-xl md:px-6">
+      <div className="mx-auto flex max-w-5xl items-center gap-3">
+        <div className="flex min-w-0 items-center flex-shrink-0">
+          {!workspaceSidebarVisible && (
             <button
               type="button"
-              onClick={clearSearch}
-              className="text-[10px] font-bold text-slate-400 hover:text-slate-600 transition-colors"
+              onClick={toggleWorkspaceSidebar}
+              className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] text-[var(--app-shell-muted)] transition hover:border-[var(--app-shell-border-strong)] hover:text-[var(--foreground)]"
+              title="Show sidebar"
+              aria-label="Show sidebar"
             >
-              ✕
+              <PanelLeftOpen className="h-4 w-4" strokeWidth={1.75} />
             </button>
+          )}
+        </div>
+        <div className="flex flex-1 justify-center min-w-0">
+          <div className="flex w-full max-w-2xl items-center gap-2">
+            <div className="relative group/search min-w-0 flex-1">
+              <Search
+                className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--app-shell-soft-text)] transition-colors group-focus-within/search:text-[var(--primary)]"
+                strokeWidth={2}
+              />
+              <input
+                ref={searchInputRef}
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Escape") clearSearch();
+                }}
+                placeholder="Search messages…"
+                className="h-9 w-full rounded-xl border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] pl-9 pr-16 text-sm font-medium text-[var(--foreground)] outline-none placeholder:text-[var(--app-shell-soft-text)] transition-all hover:border-[var(--app-shell-border-strong)] focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--ring)]"
+              />
+              {normalizedSearchQuery ? (
+                <div className="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-2">
+                  <span className="text-[11px] font-bold text-[var(--muted-foreground)]">
+                    {searchLoading ? "…" : searchTotal}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={clearSearch}
+                    className="text-[10px] font-bold text-[var(--app-shell-soft-text)] transition-colors hover:text-[var(--app-shell-muted)]"
+                  >
+                    ✕
+                  </button>
+                </div>
+              ) : (
+                <kbd className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rounded-md border border-[var(--app-shell-border)] bg-[var(--app-shell-subtle)] px-1.5 py-0.5 font-sans text-[10px] font-bold text-[var(--app-shell-soft-text)]">⌘K</kbd>
+              )}
+            </div>
+            <div className="flex items-center gap-2 flex-shrink-0">
+              {renderThemeToggleButton()}
+              <StatusIndicator />
+              {openThreadId && (
+                <button
+                  type="button"
+                  onClick={() => setLogsOpen(!logsOpen)}
+                  aria-label={logsOpen ? "Hide logs" : `Show logs${logs.length > 0 ? ` (${logs.length})` : ""}`}
+                  aria-pressed={logsOpen}
+                  title={logsOpen ? "Hide logs" : `Show logs${logs.length > 0 ? ` (${logs.length})` : ""}`}
+                  className={`inline-flex h-9 w-9 items-center justify-center rounded-xl border transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ring)] ${logsOpen
+                    ? "border-[var(--app-shell-border-strong)] bg-[var(--app-shell-subtle)] text-[var(--foreground)]"
+                    : "border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] text-[var(--app-shell-muted)] hover:bg-[var(--app-shell-subtle)] hover:text-[var(--foreground)]"
+                    }`}
+                >
+                  <SquareTerminal className="h-4 w-4" strokeWidth={1.75} />
+                </button>
+              )}
+            </div>
           </div>
-        ) : (
-          <kbd className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 px-1.5 py-0.5 text-[10px] font-sans font-bold text-slate-400 bg-slate-100 border border-slate-200 rounded-md">⌘K</kbd>
-        )}
+        </div>
       </div>
     </div>
   );
 
   return (
-    <div className="flex h-screen bg-white text-zinc-900">
+    <div className="flex h-screen bg-[var(--app-shell-bg)] text-[var(--foreground)]">
       <WorkspaceSidebar
         threads={threads}
         participants={participants}
@@ -1295,73 +1400,65 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
         onSelectProject={handleSelectProject}
       />
       <div className="flex flex-col flex-1 min-w-0 relative">
-        {/* Top-right controls */}
-        <div className="absolute top-4 right-4 z-30 flex items-center gap-2">
-          <StatusIndicator />
-          {openThreadId && (
-            <button
-              type="button"
-              onClick={() => setLogsOpen(!logsOpen)}
-              aria-label={logsOpen ? "Hide logs" : `Show logs${logs.length > 0 ? ` (${logs.length})` : ""}`}
-              aria-pressed={logsOpen}
-              title={logsOpen ? "Hide logs" : `Show logs${logs.length > 0 ? ` (${logs.length})` : ""}`}
-              className={`inline-flex h-8 w-8 items-center justify-center rounded-md border transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400 ${logsOpen
-                ? "border-slate-300 bg-slate-50 text-slate-800"
-                : "border-slate-200 bg-white text-slate-500 hover:bg-slate-50 hover:text-slate-800"
-                }`}
-            >
-              <SquareTerminal className="h-4 w-4" strokeWidth={1.75} />
-            </button>
-          )}
-        </div>
-
-
-
-        {openThreadId && (
-          <header className="border-b border-slate-200 px-6 py-4 flex items-center h-16 pr-14">
-            <div className="flex items-center gap-3 min-w-0">
-              <button
-                onClick={() => setOpenThreadId(null)}
-                className="p-1.5 text-slate-400 hover:text-indigo-600 hover:bg-zinc-100 rounded-lg transition-all active:scale-95 flex-shrink-0"
-                title="Back to main feed"
-              >
-                <ChevronLeft size={22} strokeWidth={2.5} />
-              </button>
-              <div className="flex flex-col min-w-0">
-                <div className="flex items-center gap-3">
-                  <h2 className="text-[15px] font-bold text-slate-900 tracking-tight leading-tight truncate max-w-[240px]">
-                    {activeThreadTitle}
-                  </h2>
-                  <div className="flex -space-x-1.5 ml-1 flex-shrink-0">
-                    {activeThreadParticipants.map((p) => (
-                      <img
-                        key={p.id}
-                        src={`https://api.dicebear.com/9.x/bottts-neutral/svg?seed=${p.id}&backgroundColor=${p.color ? p.color.replace('#', '') : 'e2e8f0'}`}
-                        alt={p.name}
-                        className="w-5 h-5 rounded-full border-2 border-white shadow-sm ring-1 ring-slate-200 object-cover"
-                        title={p.name}
-                      />
-                    ))}
-                  </div>
-                </div>
-                <div className="text-[11px] text-slate-500 font-medium flex items-center gap-1.5">
-                  <span className="opacity-80">{activeThreadParticipants.length} agents</span>
-                  <span className="w-0.5 h-0.5 rounded-full bg-slate-300" />
-                  <span className="opacity-80">Updated {getTimeAgo(lastThreadUpdate)}</span>
-                </div>
-              </div>
-            </div>
-          </header>
-        )}
         {
           isRestoringActiveThread ? (
-            <div className="flex-1 flex items-center justify-center px-4 text-sm text-zinc-500">
+            <div className="flex-1 flex items-center justify-center px-4 text-sm text-[var(--muted-foreground)]">
               Loading your last project…
             </div>
           ) : (
-            <div className="flex flex-1 min-h-0 bg-slate-50 relative">
+            <div className="flex flex-1 min-h-0 bg-transparent relative">
               <div className="flex flex-col flex-1 min-w-0">
-                {!openThreadId && searchInputBar}
+                {openThreadId ? (
+                  <div className="border-b border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] px-4 py-2.5 backdrop-blur-xl md:px-6">
+                    <div className="mx-auto flex max-w-5xl items-center gap-3 min-w-0">
+                      <button
+                        onClick={() => setOpenThreadId(null)}
+                        className="p-1.5 text-[var(--app-shell-muted)] hover:text-indigo-500 hover:bg-[var(--app-shell-subtle)] rounded-xl transition-all active:scale-95 flex-shrink-0"
+                        title="Back to main feed"
+                      >
+                        <ChevronLeft size={20} strokeWidth={2.25} />
+                      </button>
+                      <div className="flex-1 flex flex-col min-w-0">
+                        <h2 className="text-[15px] font-semibold text-[var(--foreground)] tracking-tight leading-tight truncate min-w-0">
+                          {activeThreadTitle}
+                        </h2>
+                        <div className="flex items-center gap-1.5 text-[11px] font-medium text-[var(--app-shell-muted)]">
+                          <span className="opacity-80">{activeThreadParticipants.length} agents</span>
+                          <span className="h-0.5 w-0.5 rounded-full bg-[var(--app-shell-soft-text)]" />
+                          <span className="opacity-80">Updated {getTimeAgo(lastThreadUpdate)}</span>
+                        </div>
+                      </div>
+                      <div className="flex -space-x-1.5 flex-shrink-0">
+                        {activeThreadParticipants.map((p) => (
+                          <img
+                            key={p.id}
+                            src={`https://api.dicebear.com/9.x/bottts-neutral/svg?seed=${p.id}&backgroundColor=${p.color ? p.color.replace('#', '') : 'e2e8f0'}`}
+                            alt={p.name}
+                            className="h-7 w-7 rounded-full border-2 border-[var(--app-shell-elevated)] object-cover shadow-sm ring-1 ring-[var(--app-shell-border)]"
+                            title={p.name}
+                          />
+                        ))}
+                      </div>
+                      <div className="ml-auto flex items-center gap-2">
+                        {renderThemeToggleButton()}
+                        <StatusIndicator />
+                        <button
+                          type="button"
+                          onClick={() => setLogsOpen(!logsOpen)}
+                          aria-label={logsOpen ? "Hide logs" : `Show logs${logs.length > 0 ? ` (${logs.length})` : ""}`}
+                          aria-pressed={logsOpen}
+                          title={logsOpen ? "Hide logs" : `Show logs${logs.length > 0 ? ` (${logs.length})` : ""}`}
+                          className={`inline-flex h-9 w-9 items-center justify-center rounded-xl border transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ring)] ${logsOpen
+                            ? "border-[var(--app-shell-border-strong)] bg-[var(--app-shell-subtle)] text-[var(--foreground)]"
+                            : "border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] text-[var(--app-shell-muted)] hover:bg-[var(--app-shell-subtle)] hover:text-[var(--foreground)]"
+                            }`}
+                        >
+                          <SquareTerminal className="h-4 w-4" strokeWidth={1.75} />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ) : mainToolbar}
 
                 {searchActive ? (
                   <SearchResults

package/cloud-runtime/standalone/components/chat-ui/ChatPreview.tsx

@@ -48,9 +48,9 @@ export function ChatPreview() {
               className="flex gap-3 animate-in fade-in slide-in-from-bottom-2 duration-300"
               style={{ animationDelay: `${i * 50}ms` }}
             >
-              <div className="w-8 h-8 rounded-full overflow-hidden border border-slate-100 shadow-sm shrink-0 mt-0.5 flex items-center justify-center bg-slate-100">
+              <div className="w-8 h-8 rounded-full overflow-hidden border border-[var(--border)] shadow-sm shrink-0 mt-0.5 flex items-center justify-center bg-[var(--muted)]">
                 {isUser ? (
-                  <User className="w-4 h-4 text-slate-400" />
+                  <User className="w-4 h-4 text-[var(--muted-foreground)]" />
                 ) : p ? (
                   <Link href={`/agents/${p.id}`} className="w-full h-full hover:ring-2 hover:ring-blue-300 rounded-full transition-shadow">
                     <img
@@ -80,12 +80,12 @@ export function ChatPreview() {
                     </span>
                   )}
                   {!isUser && p?.model && (
-                    <span className="text-[10px] text-slate-400 font-medium">
+                    <span className="text-[10px] text-[var(--muted-foreground)] font-medium">
                       {p.model}
                     </span>
                   )}
                 </div>
-                <div className="text-[14px] text-slate-700 leading-relaxed mt-0.5">
+                <div className="text-[14px] text-[var(--foreground)] leading-relaxed mt-0.5">
                   <Markdown content={msg.content} isUser={isUser} />
                 </div>
               </div>

package/cloud-runtime/standalone/components/chat-ui/CommandPopover.tsx

@@ -35,7 +35,7 @@ export function CommandPopover({
         role="listbox"
         id={listboxId}
         aria-label="Command suggestions"
-        className="max-h-56 overflow-y-auto rounded-xl border border-zinc-200 bg-white shadow-lg"
+        className="max-h-56 overflow-y-auto rounded-xl border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] shadow-lg"
       >
         {commands.map((command, index) => {
           const isActive = index === activeIndex;
@@ -50,7 +50,7 @@ export function CommandPopover({
                 optionRefs.current[index] = el;
               }}
               className={`w-full px-3 py-2 text-left text-sm transition-colors ${
-                isActive ? "bg-blue-50 text-zinc-900" : "text-zinc-700 hover:bg-zinc-50"
+                isActive ? "bg-[var(--primary-muted)] text-[var(--foreground)]" : "text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)]"
               }`}
               onMouseDown={(e) => e.preventDefault()}
               onClick={() => onSelect(command)}
@@ -58,9 +58,9 @@ export function CommandPopover({
               <span className="inline-flex items-center gap-2">
                 <span className="font-medium font-mono">{command.name}</span>
                 {command.aliases && command.aliases.length > 0 && (
-                  <span className="text-xs text-zinc-300 font-mono">({command.aliases.join(", ")})</span>
+                  <span className="text-xs text-[var(--app-shell-soft-text)] font-mono">({command.aliases.join(", ")})</span>
                 )}
-                <span className="text-xs text-zinc-400">{command.description}</span>
+                <span className="text-xs text-[var(--muted-foreground)]">{command.description}</span>
               </span>
             </button>
           );