@mndrk/agx 2.0.23 → 2.0.25

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

@@ -46,7 +46,13 @@ const THREAD_MENTION_LISTBOX_ID = "composer-thread-mention-listbox";
 const THREAD_MENTION_OPTION_ID_PREFIX = "composer-thread-mention-option";
 
 interface Props {
-  onSend: (message: string, maxRounds: number, attachmentIds?: string[], attachments?: Attachment[]) => void;
+  onSend: (
+    message: string,
+    maxRounds: number,
+    attachmentIds?: string[],
+    attachments?: Attachment[],
+    pinnedParticipantId?: string
+  ) => void;
   onStop: () => void;
   loading: boolean;
   /** Whether autonomous mode is currently active */
@@ -112,6 +118,7 @@ export function Composer({
   onAutoModeChange,
 }: Props) {
   const [maxRounds, setMaxRounds] = useState(10);
+  const [pinnedParticipantId, setPinnedParticipantId] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const isComposingRef = useRef(false);
 
@@ -128,6 +135,12 @@ export function Composer({
   const attachments = useAttachments();
   const fileAttachments = useComposerAttachments();
 
+  useEffect(() => {
+    if (pinnedParticipantId && !participants.some((participant) => participant.id === pinnedParticipantId)) {
+      setPinnedParticipantId(null);
+    }
+  }, [participants, pinnedParticipantId]);
+
   // ─── Tiptap editor ─────────────────────────────────────────────────────────
 
   const editor = useEditor({
@@ -469,9 +482,10 @@ export function Composer({
 
     const ids = attachments.attachmentIds.length > 0 ? attachments.attachmentIds : undefined;
     const metas = ids ? attachments.getAttachmentMetas() : undefined;
-    onSend(messageText, maxRounds, ids, metas);
+    onSend(messageText, maxRounds, ids, metas, pinnedParticipantId ?? undefined);
 
     editor.commands.clearContent();
+    setPinnedParticipantId(null);
     setThreadRefs([]);
     attachments.clear();
     fileAttachments.clearFilePaths();
@@ -495,20 +509,22 @@ export function Composer({
 
   // Compute whether editor has content for disabled state
   const editorIsEmpty = !editor || editor.isEmpty;
+  const turnsMeterWidth = `${Math.max(12, Math.min(100, Math.round((maxRounds / 50) * 100)))}%`;
+  const pinnedParticipant = participants.find((participant) => participant.id === pinnedParticipantId) ?? null;
 
   return (
     <div className="pb-6">
       <div className="max-w-3xl mx-auto">
         <ComposerDropZone onDrop={attachments.stageFiles}>
-          <div className={`bg-white rounded-2xl border border-slate-200 shadow-xl shadow-slate-200/50 transition-all duration-300`}>
+          <div className={`bg-[var(--app-shell-elevated)] rounded-2xl border border-[var(--app-shell-border)] shadow-[0_8px_30px_rgb(0,0,0,0.12)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.5)] transition-all duration-300`}>
           {/* Ship Mode header */}
           {onAutoModeChange && (
-            <div className={`relative overflow-hidden border-b transition-all duration-500 ${autoMode ? "border-orange-200/50" : "border-slate-100"}`}>
+            <div className={`relative overflow-hidden border-b transition-all duration-500 ${autoMode ? "border-orange-200/50 dark:border-orange-500/30" : "border-[var(--app-shell-border)]"}`}>
               {/* Animated gradient background when active */}
               <div
                 className={`absolute inset-0 transition-opacity duration-700 ${autoMode ? "opacity-100" : "opacity-0"}`}
                 style={{
-                  background: "linear-gradient(120deg, #fff7ed 0%, #ffedd5 25%, #fed7aa 50%, #ffedd5 75%, #fff7ed 100%)",
+                  background: "linear-gradient(120deg, var(--warning-muted) 0%, transparent 50%, var(--warning-muted) 100%)",
                   backgroundSize: "200% 100%",
                   animation: autoMode ? "shipBgSweep 4s ease-in-out infinite" : "none",
                 }}
@@ -524,7 +540,8 @@ export function Composer({
                         top: `${12 + i * 10}%`,
                         right: "-10%",
                         width: `${20 + (i % 3) * 15}%`,
-                        background: `linear-gradient(to left, transparent, rgba(251, 146, 60, ${0.15 + (i % 3) * 0.1}))`,
+                        background: `linear-gradient(to left, transparent, var(--warning))`,
+                        opacity: 0.3 + (i % 3) * 0.1,
                         animation: `shipSpeedLine ${0.8 + (i % 4) * 0.3}s ${i * 0.1}s ease-in-out infinite`,
                       }}
                     />
@@ -535,31 +552,31 @@ export function Composer({
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
                     <div
-                      className={`p-1 rounded-md transition-all duration-300 ${autoMode ? "bg-indigo-500 text-white shadow-md shadow-indigo-500/30" : "bg-slate-100 text-slate-400"}`}
+                      className={`p-1 rounded-md transition-all duration-300 ${autoMode ? "bg-[var(--warning)] text-[var(--warning-muted)] shadow-md" : "bg-[var(--app-shell-subtle)] text-[var(--app-shell-muted)]"}`}
                       style={autoMode ? { animation: "shipPulse 2s ease-in-out infinite" } : {}}
                     >
                       <Rocket size={14} />
                     </div>
-                    <span className={`text-sm font-semibold transition-colors duration-300 ${autoMode ? "text-indigo-900" : "text-slate-800"}`}>Ship Mode</span>
-                    <span className={`text-xs transition-colors duration-300 ${autoMode ? "text-indigo-600/60" : "text-slate-400"}`}>|</span>
-                    <span className={`text-xs font-medium transition-colors duration-300 ${autoMode ? "text-indigo-700/70" : "text-slate-500"}`}>
+                    <span className={`text-sm font-semibold transition-colors duration-300 ${autoMode ? "text-[var(--warning)]" : "text-[var(--foreground)]"}`}>Ship Mode</span>
+                    <span className={`text-xs transition-colors duration-300 ${autoMode ? "text-[var(--warning)] opacity-60" : "text-[var(--app-shell-muted)] opacity-60"}`}>|</span>
+                    <span className={`text-xs font-medium transition-colors duration-300 ${autoMode ? "text-[var(--warning)] opacity-80" : "text-[var(--app-shell-muted)]"}`}>
                       {autoMode
-                        ? "Agents work continuously until this thread ships"
-                        : "Agents work continuously until this thread ships"}
+                        ? "Continuous execution is active for this thread"
+                        : "Continuous execution stays off until you enable it"}
                     </span>
                   </div>
                   <button
                     type="button"
                     onClick={() => onAutoModeChange(!autoMode)}
-                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 ${autoMode ? "bg-orange-500" : "bg-slate-200"}`}
+                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--warning)] focus:ring-offset-2 focus:ring-offset-[var(--background)] ${autoMode ? "bg-[var(--warning)]" : "bg-[var(--app-shell-border-strong)]"}`}
                   >
-                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${autoMode ? "translate-x-6" : "translate-x-1"}`} />
+                    <span className={`inline-block h-4 w-4 transform rounded-full bg-[var(--app-shell-elevated)] shadow-sm transition-transform duration-200 ${autoMode ? "translate-x-6" : "translate-x-1"}`} />
                   </button>
                 </div>
               </div>
             </div>
           )}
-          <div className="p-1.5 focus-within:ring-4 focus-within:ring-slate-900/5 transition-all">
+          <div className="p-1.5 focus-within:ring-4 focus-within:ring-[var(--app-shell-border-strong)] transition-all">
 
             {attachments.staged.length > 0 && (
               <div className="mx-2 mt-2 mb-1">
@@ -575,7 +592,7 @@ export function Composer({
               <button
                 type="button"
                 onClick={handleAttachClick}
-                className="p-2.5 text-slate-400 hover:bg-slate-50 hover:text-slate-600 rounded-xl transition-all shrink-0"
+                className="p-2.5 text-[var(--app-shell-muted)] hover:bg-[var(--app-shell-subtle)] hover:text-[var(--foreground)] rounded-xl transition-all shrink-0"
                 aria-label="Attach file"
                 title="Attach file"
               >
@@ -643,7 +660,7 @@ export function Composer({
                 <button
                   type="button"
                   onClick={onStop}
-                  className="h-10 px-4 bg-red-50 text-red-600 border border-red-200 rounded-xl font-bold text-sm hover:bg-red-100 shadow-sm flex items-center gap-2 transition-all shrink-0"
+                  className="h-10 px-4 bg-[var(--destructive-muted)] text-[var(--destructive)] border border-[var(--status-failed-border)] rounded-xl font-bold text-sm hover:opacity-90 shadow-sm flex items-center gap-2 transition-all shrink-0"
                 >
                   Stop
                 </button>
@@ -652,7 +669,7 @@ export function Composer({
                   type="button"
                   onClick={handleSubmit}
                   disabled={(editorIsEmpty && !attachments.hasUploaded && !fileAttachments.hasFilePaths) || uploadsInProgress}
-                  className="h-10 px-4 bg-slate-900 text-white rounded-xl font-bold text-sm hover:bg-slate-800 disabled:opacity-50 disabled:hover:bg-slate-900 disabled:cursor-not-allowed shadow-md flex items-center gap-2 transition-all shrink-0"
+                  className="h-10 px-4 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-xl font-bold text-sm hover:bg-[var(--primary-hover)] disabled:opacity-50 disabled:cursor-not-allowed shadow-md flex items-center gap-2 transition-all shrink-0"
                 >
                   Send
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
@@ -661,22 +678,22 @@ export function Composer({
             </div>
 
             {/* Meta Footer */}
-            <div className="px-4 pb-2.5 pt-1 flex items-center justify-between border-t border-slate-100 mt-1">
+            <div className="px-4 pb-2.5 pt-1 flex items-center justify-between border-t border-[var(--app-shell-border)] mt-1">
               <div className="flex items-center gap-4">
                 {/* Turn Limit — progress bar + selector */}
                 <div className="flex items-center gap-2">
-                  <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Turns</span>
+                  <span className="text-[10px] font-bold text-[var(--app-shell-muted)] uppercase tracking-wider">Turns</span>
                   <div className="flex items-center gap-1.5">
-                    <div className="h-1.5 w-14 bg-slate-100 rounded-full overflow-hidden">
+                  <div className="h-1.5 w-14 bg-[var(--app-shell-border)] rounded-full overflow-hidden">
                       <div
-                        className="h-full rounded-full transition-all duration-500 bg-indigo-500"
-                        style={{ width: "0%" }}
+                        className="h-full rounded-full transition-all duration-500 bg-[var(--primary)]"
+                        style={{ width: turnsMeterWidth }}
                       />
                     </div>
                     <select
                       value={maxRounds}
                       onChange={(e) => setMaxRounds(Number(e.target.value))}
-                      className="bg-transparent border-none outline-none text-xs font-semibold text-slate-600 cursor-pointer appearance-none hover:text-indigo-600 transition-colors"
+                      className="bg-transparent border-none outline-none text-xs font-semibold text-[var(--app-shell-muted)] cursor-pointer appearance-none hover:text-[var(--primary)] transition-colors"
                     >
                       {[1, 3, 5, 10, 20, 50].map((n) => (
                         <option key={n} value={n}>{n}</option>
@@ -685,17 +702,31 @@ export function Composer({
                   </div>
                 </div>
 
-                <div className="w-px h-4 bg-slate-100" />
+                <div className="w-px h-4 bg-[var(--app-shell-border)]" />
 
                 {/* Agent Status — overlapping avatars with activity dots */}
                 <div className="flex items-center -space-x-1.5">
                   {participants.length === 0 ? (
-                    <span className="text-[10px] font-medium text-slate-400">No agents</span>
+                    <span className="text-[10px] font-medium text-[var(--app-shell-muted)]">No agents</span>
                   ) : (
                     participants.map(p => (
                       <div
                         key={p.id}
-                        className="relative w-6 h-6 rounded-full bg-slate-100 border-2 border-white shadow-sm flex items-center justify-center overflow-visible shrink-0 hover:-translate-y-0.5 transition-transform cursor-pointer"
+                        role="button"
+                        tabIndex={0}
+                        aria-pressed={pinnedParticipantId === p.id}
+                        onClick={() => setPinnedParticipantId((current) => current === p.id ? null : p.id)}
+                        onKeyDown={(event) => {
+                          if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            setPinnedParticipantId((current) => current === p.id ? null : p.id);
+                          }
+                        }}
+                        className={`relative w-6 h-6 rounded-full bg-[var(--app-shell-subtle)] border-2 border-[var(--app-shell-elevated)] shadow-sm flex items-center justify-center overflow-visible shrink-0 transition-all cursor-pointer ${
+                          pinnedParticipantId === p.id
+                            ? "-translate-y-0.5 ring-2 ring-[var(--ring)] ring-offset-1 ring-offset-[var(--background)]"
+                            : "hover:-translate-y-0.5"
+                        }`}
                         title={p.name}
                       >
                         <img
@@ -704,7 +735,7 @@ export function Composer({
                           className="w-full h-full rounded-full object-cover"
                         />
                         {loading && (
-                          <span className="absolute -bottom-0.5 -right-0.5 w-2 h-2 bg-emerald-400 border border-white rounded-full" />
+                          <span className="absolute -bottom-0.5 -right-0.5 w-2 h-2 bg-emerald-400 border border-[var(--app-shell-elevated)] rounded-full" />
                         )}
                       </div>
                     ))
@@ -713,7 +744,12 @@ export function Composer({
               </div>
 
               {/* Status indicator */}
-              <div className="flex items-center gap-1.5 text-slate-400">
+              <div className="flex items-center gap-2 text-[var(--app-shell-muted)]">
+                {pinnedParticipant && (
+                  <span className="text-[10px] font-medium text-[var(--app-shell-muted)]">
+                    Pinned: <span className="text-[var(--foreground)]">{pinnedParticipant.name}</span>
+                  </span>
+                )}
                 <span className="text-[10px] font-medium uppercase tracking-tight">
                   {loading ? "Working" : "Ready"}
                 </span>

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

@@ -67,7 +67,7 @@ export function FileMentionPopover({
         id={listboxId}
         aria-label="File suggestions"
         aria-activedescendant={activeOptionId}
-        className="max-h-64 overflow-y-auto rounded-xl border border-zinc-200 bg-white shadow-lg"
+        className="max-h-64 overflow-y-auto rounded-xl border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] shadow-lg"
       >
         {/* Error state */}
         {error && !isLoading && (
@@ -80,7 +80,7 @@ export function FileMentionPopover({
         {/* Loading state — no stale results yet */}
         {!error && isLoading && suggestions.length === 0 && (
           <div
-            className="flex items-center gap-2 px-3 py-3 text-sm text-zinc-400"
+            className="flex items-center gap-2 px-3 py-3 text-sm text-[var(--muted-foreground)]"
             aria-live="polite"
             aria-label="Searching for files"
           >
@@ -91,14 +91,14 @@ export function FileMentionPopover({
 
         {/* Empty state (done loading, no results) */}
         {!error && !isLoading && suggestions.length === 0 && (
-          <div className="px-3 py-3 text-sm text-zinc-400" aria-live="polite">
+          <div className="px-3 py-3 text-sm text-[var(--muted-foreground)]" aria-live="polite">
             No results
           </div>
         )}
 
         {/* Stale-results loading indicator */}
         {!error && isLoading && suggestions.length > 0 && (
-          <div className="flex items-center gap-1.5 px-3 py-1 text-xs text-zinc-400 border-b border-zinc-100">
+          <div className="flex items-center gap-1.5 px-3 py-1 text-xs text-[var(--muted-foreground)] border-b border-[var(--border)]">
             <Loader2 className="h-3 w-3 animate-spin" aria-hidden />
             <span aria-live="polite" aria-label="Updating results">Updating…</span>
           </div>

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

@@ -48,11 +48,11 @@ export function FileMentionPopoverItem({
   return (
     <div
       className={`flex items-center gap-2 px-3 py-2 text-sm transition-colors ${
-        isActive ? "bg-blue-50" : "hover:bg-zinc-50"
+        isActive ? "bg-[var(--primary-muted)]" : "hover:bg-[var(--app-shell-subtle)]"
       }`}
     >
       {/* File/folder icon */}
-      <span className="shrink-0 text-zinc-400" aria-hidden>
+      <span className="shrink-0 text-[var(--muted-foreground)]" aria-hidden>
         {isFolder ? (
           isActive ? (
             <FolderOpen className="h-4 w-4 text-amber-500" />
@@ -79,7 +79,7 @@ export function FileMentionPopoverItem({
         <span className="flex items-baseline gap-2">
           <span
             className={`block truncate font-mono text-xs ${
-              isActive ? "text-zinc-900" : "text-zinc-700"
+              isActive ? "text-[var(--foreground)]" : "text-[var(--foreground)]"
             }`}
           >
             {displayPath}
@@ -87,19 +87,19 @@ export function FileMentionPopoverItem({
 
           {/* Recency badge */}
           {recency && (
-            <span className="shrink-0 text-xs text-zinc-400">{recency}</span>
+            <span className="shrink-0 text-xs text-[var(--muted-foreground)]">{recency}</span>
           )}
         </span>
 
         {/* Folder manifest sub-line */}
         {isFolder && suggestion.manifest && (
-          <span className="block text-xs text-zinc-400">
+          <span className="block text-xs text-[var(--muted-foreground)]">
             {suggestion.manifest.childCount} items ·{" "}
             {suggestion.manifest.sizeSummary}
             {isContentsMode ? (
-              <span className="ml-1 font-medium text-blue-500">full tree</span>
+              <span className="ml-1 font-medium text-[var(--primary)]">full tree</span>
             ) : (
-              <span className="ml-1 text-zinc-400">manifest</span>
+              <span className="ml-1 text-[var(--muted-foreground)]">manifest</span>
             )}
           </span>
         )}
@@ -109,7 +109,7 @@ export function FileMentionPopoverItem({
       {isFolder && !isContentsMode && (
         <button
           type="button"
-          className="shrink-0 rounded px-1.5 py-0.5 text-xs text-zinc-400 hover:bg-zinc-100 hover:text-zinc-700 transition-colors"
+          className="shrink-0 rounded px-1.5 py-0.5 text-xs text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)] transition-colors"
           title="Attach full directory contents instead of manifest"
           aria-label={`Attach full contents of ${displayPath}`}
           onMouseDown={(e) => e.preventDefault()}
@@ -120,7 +120,7 @@ export function FileMentionPopoverItem({
         </button>
       )}
       {isFolder && isContentsMode && (
-        <span className="shrink-0 rounded bg-blue-50 px-1.5 py-0.5 text-xs font-medium text-blue-600">
+        <span className="shrink-0 rounded bg-[var(--primary-muted)] px-1.5 py-0.5 text-xs font-medium text-[var(--primary)]">
           full tree
         </span>
       )}

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

@@ -59,7 +59,7 @@ export function LogPanel({ logs, participants, onClear, open, onToggle }: Props)
       </div>
       <div className="flex flex-col bg-zinc-950 h-full" style={{ width }}>
         <div className="flex items-center gap-2 px-3 py-1.5 border-b border-zinc-800 shrink-0">
-          <span className="text-[11px] text-zinc-400 font-mono">Logs</span>
+          <span className="text-[11px] text-[var(--muted-foreground)] font-mono">Logs</span>
           <select
             value={filter || ""}
             onChange={(e) => setFilter(e.target.value || null)}
@@ -73,13 +73,13 @@ export function LogPanel({ logs, participants, onClear, open, onToggle }: Props)
           <div className="ml-auto flex items-center gap-2">
             <button
               onClick={onClear}
-              className="text-[11px] text-zinc-500 hover:text-zinc-300"
+              className="text-[11px] text-[var(--muted-foreground)] hover:text-zinc-300"
             >
               Clear
             </button>
             <button
               onClick={onToggle}
-              className="text-[11px] text-zinc-500 hover:text-zinc-300"
+              className="text-[11px] text-[var(--muted-foreground)] hover:text-zinc-300"
             >
               ✕
             </button>
@@ -92,11 +92,11 @@ export function LogPanel({ logs, participants, onClear, open, onToggle }: Props)
             const isErr = entry.stream === "stderr";
             return (
               <div key={i} className="flex gap-2 whitespace-pre-wrap break-all">
-                <span className="text-zinc-600 shrink-0 select-none">
+                <span className="text-[var(--muted-foreground)] shrink-0 select-none">
                   {new Date(entry.timestamp).toLocaleTimeString([], { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" })}
                 </span>
                 <span className="shrink-0" style={{ color }}>{name}</span>
-                <span className={isErr ? "text-red-400" : "text-zinc-400"}>
+                <span className={isErr ? "text-red-400" : "text-[var(--muted-foreground)]"}>
                   {entry.line}
                 </span>
               </div>

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

@@ -46,11 +46,11 @@ const components: Components = {
   },
   pre: ({ children }) => <>{children}</>,
   blockquote: ({ children }) => (
-    <blockquote className="border-l-[3px] border-zinc-300 pl-3 my-3 text-zinc-600">
+    <blockquote className="border-l-[3px] border-[var(--border)] pl-3 my-3 text-[var(--muted-foreground)]">
       {children}
     </blockquote>
   ),
-  hr: () => <hr className="my-4 border-zinc-200" />,
+  hr: () => <hr className="my-4 border-[var(--border)]" />,
   a: ({ children, href }) => (
     <a href={href} className="text-blue-600 underline underline-offset-2" target="_blank" rel="noopener noreferrer">
       {children}
@@ -61,12 +61,12 @@ const components: Components = {
       <table className="min-w-full text-sm border-collapse">{children}</table>
     </div>
   ),
-  thead: ({ children }) => <thead className="bg-zinc-100">{children}</thead>,
+  thead: ({ children }) => <thead className="bg-[var(--muted)]">{children}</thead>,
   th: ({ children }) => (
-    <th className="border border-zinc-200 px-3 py-1.5 text-left text-xs font-semibold text-zinc-600">{children}</th>
+    <th className="border border-[var(--border)] px-3 py-1.5 text-left text-xs font-semibold text-[var(--muted-foreground)]">{children}</th>
   ),
   td: ({ children }) => (
-    <td className="border border-zinc-200 px-3 py-1.5">{children}</td>
+    <td className="border border-[var(--border)] px-3 py-1.5">{children}</td>
   ),
 };
 
@@ -83,13 +83,13 @@ const userComponents: Components = {
     const isBlock = className?.includes("language-");
     if (isBlock) {
       return (
-        <pre className="bg-white/[0.12] rounded-lg p-3 my-3 overflow-x-auto border border-white/[0.08]">
+        <pre className="bg-[var(--card-bg)]/[0.12] rounded-lg p-3 my-3 overflow-x-auto border border-white/[0.08]">
           <code className="text-[13px] leading-relaxed font-mono">{children}</code>
         </pre>
       );
     }
     return (
-      <code className="bg-white/[0.15] rounded-md px-1.5 py-0.5 text-[13px] font-mono">
+      <code className="bg-[var(--card-bg)]/[0.15] rounded-md px-1.5 py-0.5 text-[13px] font-mono">
         {children}
       </code>
     );
@@ -110,7 +110,7 @@ const userComponents: Components = {
       <table className="min-w-full text-sm border-collapse">{children}</table>
     </div>
   ),
-  thead: ({ children }) => <thead className="bg-white/[0.08]">{children}</thead>,
+  thead: ({ children }) => <thead className="bg-[var(--card-bg)]/[0.08]">{children}</thead>,
   th: ({ children }) => (
     <th className="border border-white/20 px-3 py-1.5 text-left text-xs font-semibold">{children}</th>
   ),
@@ -170,12 +170,12 @@ export function Markdown({ content, isUser }: Props) {
           return (
             <details
               key={i}
-              className="my-2 rounded-lg bg-zinc-500/[0.06] border border-zinc-200/60"
+              className="my-2 rounded-lg bg-[var(--muted)] border border-[var(--border)]/60"
             >
-              <summary className="cursor-pointer select-none px-3 py-1.5 text-[11px] font-medium text-zinc-400 hover:text-zinc-500 transition-colors">
+              <summary className="cursor-pointer select-none px-3 py-1.5 text-[11px] font-medium text-[var(--muted-foreground)] hover:text-[var(--muted-foreground)] transition-colors">
                 Thought process
               </summary>
-              <div className="px-3 pb-2.5 text-[12px] leading-relaxed text-zinc-400">
+              <div className="px-3 pb-2.5 text-[12px] leading-relaxed text-[var(--muted-foreground)]">
                 <ReactMarkdown remarkPlugins={[remarkGfm]} components={comps}>{seg.content}</ReactMarkdown>
               </div>
             </details>

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

@@ -46,7 +46,7 @@ export function MentionPopover({
         role="listbox"
         id={listboxId}
         aria-label="Mention 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"
       >
         {suggestions.map((suggestion, index) => {
           const isActive = index === activeIndex;
@@ -63,7 +63,7 @@ export function MentionPopover({
           if (group && !renderedGroups.has(group)) {
             renderedGroups.add(group);
             groupHeader = (
-              <div className="px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider text-zinc-400 bg-zinc-50 border-t border-zinc-100 first:border-t-0">
+              <div className="px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider text-[var(--muted-foreground)] bg-[var(--app-shell-subtle)] border-t border-[var(--border)] first:border-t-0">
                 {group}
               </div>
             );
@@ -82,7 +82,7 @@ export function MentionPopover({
                     optionRefs.current[index] = element;
                   }}
                   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();
@@ -90,9 +90,9 @@ export function MentionPopover({
                   onClick={() => onSelect(suggestion)}
                 >
                   <span className="inline-flex items-center gap-2">
-                    <Users className="h-3.5 w-3.5 text-zinc-500" aria-hidden />
+                    <Users className="h-3.5 w-3.5 text-[var(--muted-foreground)]" aria-hidden />
                     <span className="font-medium">{suggestion.project.name}</span>
-                    <span className="text-xs text-zinc-400">
+                    <span className="text-xs text-[var(--muted-foreground)]">
                       {suggestion.project.agents.length} agent{suggestion.project.agents.length !== 1 ? "s" : ""}
                     </span>
                   </span>
@@ -114,7 +114,7 @@ export function MentionPopover({
                     optionRefs.current[index] = element;
                   }}
                   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();
@@ -122,9 +122,9 @@ export function MentionPopover({
                   onClick={() => onSelect(suggestion)}
                 >
                   <span className="inline-flex items-center gap-2">
-                    <FolderKanban className="h-3.5 w-3.5 text-zinc-500" aria-hidden />
+                    <FolderKanban className="h-3.5 w-3.5 text-[var(--muted-foreground)]" aria-hidden />
                     <span className="font-medium">{suggestion.project.name}</span>
-                    <span className="text-xs text-zinc-400">{suggestion.project.slug}</span>
+                    <span className="text-xs text-[var(--muted-foreground)]">{suggestion.project.slug}</span>
                   </span>
                 </button>
               </div>
@@ -144,7 +144,7 @@ export function MentionPopover({
                   optionRefs.current[index] = element;
                 }}
                 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)]"
                 }${group ? " pl-6" : ""}`}
                 onMouseDown={(e) => {
                   e.preventDefault();
@@ -159,9 +159,9 @@ export function MentionPopover({
                   />
                   <span className="font-medium">{participant.name}</span>
                   {participant.id === "all" ? (
-                    <span className="text-xs text-zinc-400">All participants</span>
+                    <span className="text-xs text-[var(--muted-foreground)]">All participants</span>
                   ) : participant.model && (
-                    <span className="text-xs text-zinc-400">{participant.model}</span>
+                    <span className="text-xs text-[var(--muted-foreground)]">{participant.model}</span>
                   )}
                 </span>
               </button>

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

@@ -34,7 +34,7 @@ export function MessageAttachments({ attachments, compact = false }: Props) {
               href={att.url}
               target="_blank"
               rel="noopener noreferrer"
-              className="block rounded-lg overflow-hidden border border-slate-200 hover:border-slate-300 transition-colors"
+              className="block rounded-lg overflow-hidden border border-[var(--border)] hover:border-[var(--border)] transition-colors"
             >
               <img
                 src={att.url}
@@ -55,14 +55,14 @@ export function MessageAttachments({ attachments, compact = false }: Props) {
               key={att.id}
               href={att.url}
               download={att.filename}
-              className={`inline-flex items-center gap-1.5 rounded-md border border-slate-200 bg-slate-50 text-slate-600 hover:bg-slate-100 hover:border-slate-300 transition-colors ${
+              className={`inline-flex items-center gap-1.5 rounded-md border border-[var(--border)] bg-[var(--app-shell-subtle)] text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:border-[var(--border)] transition-colors ${
                 compact ? "px-2 py-0.5 text-[11px]" : "px-2.5 py-1 text-xs"
               }`}
             >
-              <FileText className={`text-slate-400 shrink-0 ${compact ? "w-3 h-3" : "w-3.5 h-3.5"}`} />
+              <FileText className={`text-[var(--muted-foreground)] shrink-0 ${compact ? "w-3 h-3" : "w-3.5 h-3.5"}`} />
               <span className={`truncate ${compact ? "max-w-[100px]" : "max-w-[150px]"}`}>{att.filename}</span>
-              <span className="text-slate-400 shrink-0">{formatSize(att.size)}</span>
-              <Download className={`text-slate-400 shrink-0 ${compact ? "w-2.5 h-2.5" : "w-3 h-3"}`} />
+              <span className="text-[var(--muted-foreground)] shrink-0">{formatSize(att.size)}</span>
+              <Download className={`text-[var(--muted-foreground)] shrink-0 ${compact ? "w-2.5 h-2.5" : "w-3 h-3"}`} />
             </a>
           ))}
         </div>

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

@@ -58,11 +58,11 @@ export function MessageBubble({
     >
       {!(isUser && hideUserAvatarAndName) && (
         participantId && !isUser ? (
-          <Link href={`/agents/${participantId}`} className={`w-9 h-9 rounded-full flex items-center justify-center shrink-0 bg-slate-100 overflow-hidden hover:ring-2 hover:ring-blue-300 transition-shadow`}>
+          <Link href={`/agents/${participantId}`} className={`w-9 h-9 rounded-full flex items-center justify-center shrink-0 bg-[var(--muted)] overflow-hidden hover:ring-2 hover:ring-blue-300 transition-shadow`}>
             <img src={agentAvatarUrl(participantId, 36, participantColor)} alt="" className="w-full h-full object-cover" />
           </Link>
         ) : (
-          <div className={`w-9 h-9 rounded-full flex items-center justify-center shrink-0 ${isUser ? 'bg-slate-200 text-slate-600' : 'bg-slate-100 overflow-hidden'}`}>
+          <div className={`w-9 h-9 rounded-full flex items-center justify-center shrink-0 ${isUser ? 'bg-[var(--muted)] text-[var(--muted-foreground)]' : 'bg-[var(--muted)] overflow-hidden'}`}>
             <User className="w-5 h-5" />
           </div>
         )
@@ -85,13 +85,13 @@ export function MessageBubble({
               </span>
             )
           )}
-          <span className="text-xs text-slate-400 font-medium">
+          <span className="text-xs text-[var(--muted-foreground)] font-medium">
             {formatTimestamp(message.timestamp)}
           </span>
         </div>
 
         <div
-          className={`text-[15px] text-slate-800 leading-relaxed ${isUser ? "cursor-pointer hover:bg-slate-50/50 transition-colors rounded p-1 -mx-1" : ""}`}
+          className={`text-[15px] text-[var(--foreground)] leading-relaxed ${isUser ? "cursor-pointer hover:bg-[var(--app-shell-subtle)]/50 transition-colors rounded p-1 -mx-1" : ""}`}
           onClick={() => {
             if (isUser && onOpenThread) {
               onOpenThread(message.id);
@@ -112,7 +112,7 @@ export function MessageBubble({
               <button
                 type="button"
                 onClick={() => onReply(message.id)}
-                className="flex items-center gap-1.5 px-2.5 py-1 text-slate-500 hover:text-slate-800 rounded-full hover:bg-slate-50 transition-colors text-xs font-semibold"
+                className="flex items-center gap-1.5 px-2.5 py-1 text-[var(--muted-foreground)] hover:text-[var(--foreground)] rounded-full hover:bg-[var(--app-shell-subtle)] transition-colors text-xs font-semibold"
               >
                 <MessageSquare className="w-3 h-3" />
                 Reply
@@ -123,7 +123,7 @@ export function MessageBubble({
                 type="button"
                 onClick={() => onSummarize(message.id)}
                 disabled={summarizing}
-                className="flex items-center gap-1.5 px-2.5 py-1 text-slate-500 hover:text-slate-800 rounded-full hover:bg-slate-50 transition-colors text-xs font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
+                className="flex items-center gap-1.5 px-2.5 py-1 text-[var(--muted-foreground)] hover:text-[var(--foreground)] rounded-full hover:bg-[var(--app-shell-subtle)] transition-colors text-xs font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {summarizing ? <Loader2 className="w-3 h-3 animate-spin" /> : <FileText className="w-3 h-3" />}
                 {summarizing ? "Summarizing…" : "Summarize"}