From 9daf42036d1610298f95eb680e3f6f8d74cb135c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Thu, 6 Aug 2026 23:28:59 +0000
Subject: [PATCH] fix the dark-mode palette, the task tray, and the dead attach
 menu items
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--duck-dark inverts to near-white in dark mode, so every place the chat used
it as a text or border colour was drawing light-on-light: the composer's own
text, the question prompts, the launcher textarea, the session detail bar, the
"send a message to start" placeholder. all of it moves to the semantic tokens,
along with the raw red-500s, which had no dark story at all.

the background task tray had seven labels below the 12px floor, including the
live log itself, and hardcoded green-600/red-600/amber-500 where the shared
tones exist. its detail panel was capped at a flat max-h-64 while the composer
it docks in is shrink-0 and the transcript above is flex-1 — so in a short
panel an open task could leave almost no conversation visible. capped against
the viewport too.

a failed background task drew the same CircleSlash as a stopped one: the two
outcomes you most need to tell apart were one glyph.

the attach menu offered four things and did two — "Text File" and "PDF" had no
onSelect at all. text files now inline into the composer as a fenced block
with the filename, size-capped and rejected if they turn out to be binary. PDF
is removed rather than faked: nothing in the platform extracts PDF text.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../apps/Chat/ChatLauncher/ChatLauncher.tsx   |  9 ++-
 .../src/apps/Chat/components/AttachButton.tsx | 65 ++++++++++++++++--
 .../apps/Chat/components/AttachmentList.tsx   | 10 +--
 .../Chat/components/BackgroundTaskTray.tsx    | 66 ++++++++++++-------
 .../src/apps/Chat/components/CopyButton.tsx   |  2 +-
 .../src/apps/Chat/components/InputArea.tsx    | 16 +++--
 .../apps/Chat/components/MessageBubble.tsx    |  8 +--
 .../src/apps/Chat/components/MessageList.tsx  |  2 +-
 .../apps/Chat/components/QuestionActivity.tsx | 14 ++--
 .../apps/Chat/components/WebpageDialog.tsx    |  2 +-
 .../src/apps/ChatHistory/ChatDetailPanel.tsx  | 12 ++--
 .../src/apps/ChatHistory/DirPickerModal.tsx   | 23 +++++--
 .../src/apps/ChatHistory/PwdSelector.tsx      | 10 +--
 13 files changed, 161 insertions(+), 78 deletions(-)

diff --git a/src/workspaces/officerdev/src/apps/Chat/ChatLauncher/ChatLauncher.tsx b/src/workspaces/officerdev/src/apps/Chat/ChatLauncher/ChatLauncher.tsx
index 53c74bbe..23885579 100644
--- a/src/workspaces/officerdev/src/apps/Chat/ChatLauncher/ChatLauncher.tsx
+++ b/src/workspaces/officerdev/src/apps/Chat/ChatLauncher/ChatLauncher.tsx
@@ -72,7 +72,12 @@ export function ChatLauncher({
       <AttachmentList attachments={attachments} onRemove={removeAttachment} />
 
       <div className="flex items-end gap-2">
-        <AttachButton size="md" onAttachImage={attachImage} onAttachWebpage={() => setUrlDialogOpen(true)} />
+        <AttachButton
+          size="md"
+          onAttachImage={attachImage}
+          onAttachWebpage={() => setUrlDialogOpen(true)}
+          onAttachText={(text) => setInput((prev) => (prev.trim() ? `${prev.replace(/\s+$/, '')}\n\n${text}` : text))}
+        />
         <textarea
           ref={textareaRef}
           value={input}
@@ -92,7 +97,7 @@ export function ChatLauncher({
           }}
           placeholder={placeholder}
           rows={1}
-          className="flex-1 resize-none bg-transparent px-2 py-2 text-duck-dark placeholder:text-duck-dark/30 focus:outline-none text-lg"
+          className="flex-1 resize-none bg-transparent px-2 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none text-lg"
         />
         <Button
           onClick={handleSubmit}
diff --git a/src/workspaces/officerdev/src/apps/Chat/components/AttachButton.tsx b/src/workspaces/officerdev/src/apps/Chat/components/AttachButton.tsx
index fd017017..dfb4f171 100644
--- a/src/workspaces/officerdev/src/apps/Chat/components/AttachButton.tsx
+++ b/src/workspaces/officerdev/src/apps/Chat/components/AttachButton.tsx
@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import { Paperclip, Image, Link, FileText } from 'lucide-react';
+import { toast } from '@/components/ui/sonner';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,21 +11,61 @@ import {
 type AttachButtonProps = {
   onAttachImage: (file: File) => void;
   onAttachWebpage: () => void;
+  /** Text files are inlined into the composer rather than sent as an attachment — see below. */
+  onAttachText: (text: string) => void;
   size?: 'sm' | 'md';
 };
 
-export function AttachButton({ onAttachImage, onAttachWebpage, size = 'sm' }: AttachButtonProps) {
+// Big enough for a config file or a stack trace, small enough that inlining it does not blow up the turn.
+const MAX_TEXT_BYTES = 256 * 1024;
+
+const TEXT_ACCEPT =
+  '.txt,.md,.markdown,.json,.jsonl,.csv,.tsv,.log,.yaml,.yml,.toml,.ini,.env,.xml,.html,.css,.scss,' +
+  '.js,.jsx,.ts,.tsx,.py,.rb,.go,.rs,.java,.c,.h,.cpp,.sh,.bash,.zsh,.sql,.diff,.patch,text/*';
+
+const NUL = String.fromCharCode(0);
+
+export function AttachButton({ onAttachImage, onAttachWebpage, onAttachText, size = 'sm' }: AttachButtonProps) {
   const imageInputRef = useRef<HTMLInputElement>(null);
+  const textInputRef = useRef<HTMLInputElement>(null);
 
   const sizeClasses = size === 'md' ? 'h-10 w-10' : 'h-7 w-7 md:h-9 md:w-9';
 
+  /**
+   * Inlined into the composer as a fenced block rather than carried as an attachment. The attachment
+   * wire format only knows `image` and `webpage`, and a text file has no representation an agent reads
+   * better than the text itself — fencing it keeps the filename attached to the content, which is the
+   * only thing that would otherwise be lost.
+   */
+  const handleTextFile = async (file: File) => {
+    if (file.size > MAX_TEXT_BYTES) {
+      toast.error(`${file.name} is ${Math.round(file.size / 1024)} KB — too large to inline (limit 256 KB).`);
+      return;
+    }
+    try {
+      const text = await file.text();
+      // A NUL byte means this is not text, whatever the extension claimed.
+      if (text.includes(NUL)) {
+        toast.error(`${file.name} looks binary, not text.`);
+        return;
+      }
+      // A longer fence when the file contains one of its own, or the block closes early and the rest of
+      // the file renders as prose.
+      const fence = text.includes('```') ? '````' : '```';
+      onAttachText(`${fence} ${file.name}\n${text.replace(/\s+$/, '')}\n${fence}`);
+    } catch (err) {
+      toast.error(`Could not read ${file.name}: ${err instanceof Error ? err.message : 'unknown error'}`);
+    }
+  };
+
   return (
     <>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <button
             type="button"
-            className={`shrink-0 ${sizeClasses} flex items-center justify-center rounded-lg text-duck-dark/40 hover:text-duck-dark/70 hover:bg-duck-dark/5 transition-colors cursor-pointer`}
+            aria-label="Attach"
+            className={`shrink-0 ${sizeClasses} flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer`}
           >
             <Paperclip className="h-4 w-4" />
           </button>
@@ -34,14 +75,13 @@ export function AttachButton({ onAttachImage, onAttachWebpage, size = 'sm' }: At
             <Image className="mr-2 h-4 w-4" />
             Image
           </DropdownMenuItem>
-          <DropdownMenuItem className="cursor-pointer">
+          {/* "PDF" used to sit beside this one. Both were inert — no onSelect at all — so the menu offered
+              four things and did two. There is no PDF text extraction anywhere in the platform, client or
+              server, so that entry could not be made honest without building one first. */}
+          <DropdownMenuItem className="cursor-pointer" onSelect={() => textInputRef.current?.click()}>
             <FileText className="mr-2 h-4 w-4" />
             Text File
           </DropdownMenuItem>
-          <DropdownMenuItem className="cursor-pointer">
-            <FileText className="mr-2 h-4 w-4" />
-            PDF
-          </DropdownMenuItem>
           <DropdownMenuItem className="cursor-pointer" onSelect={onAttachWebpage}>
             <Link className="mr-2 h-4 w-4" />
             Webpage URL
@@ -59,6 +99,17 @@ export function AttachButton({ onAttachImage, onAttachWebpage, size = 'sm' }: At
           ev.target.value = '';
         }}
       />
+      <input
+        ref={textInputRef}
+        type="file"
+        accept={TEXT_ACCEPT}
+        className="hidden"
+        onChange={(ev) => {
+          const file = ev.target.files?.[0];
+          if (file) handleTextFile(file);
+          ev.target.value = '';
+        }}
+      />
     </>
   );
 }
diff --git a/src/workspaces/officerdev/src/apps/Chat/components/AttachmentList.tsx b/src/workspaces/officerdev/src/apps/Chat/components/AttachmentList.tsx
index 48c5d5d0..debd3946 100644
--- a/src/workspaces/officerdev/src/apps/Chat/components/AttachmentList.tsx
+++ b/src/workspaces/officerdev/src/apps/Chat/components/AttachmentList.tsx
@@ -25,14 +25,8 @@ export function AttachmentList({ attachments, onRemove }: AttachmentListProps) {
           ) : (
             <Link className="h-3 w-3 shrink-0" />
           )}
-          <span className="truncate">
-            {a.type === 'image' ? a.filename : a.loading ? 'Loading...' : a.title}
-          </span>
-          <button
-            type="button"
-            onClick={() => onRemove(i)}
-            className="shrink-0 hover:text-duck-dark cursor-pointer"
-          >
+          <span className="truncate">{a.type === 'image' ? a.filename : a.loading ? 'Loading...' : a.title}</span>
+          <button type="button" onClick={() => onRemove(i)} className="shrink-0 hover:text-foreground cursor-pointer">
             <X className="h-3 w-3" />
           </button>
         </span>
diff --git a/src/workspaces/officerdev/src/apps/Chat/components/BackgroundTaskTray.tsx b/src/workspaces/officerdev/src/apps/Chat/components/BackgroundTaskTray.tsx
index 8b0ba263..e08aafb7 100644
--- a/src/workspaces/officerdev/src/apps/Chat/components/BackgroundTaskTray.tsx
+++ b/src/workspaces/officerdev/src/apps/Chat/components/BackgroundTaskTray.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Check, ChevronDown, CircleSlash, Loader2, X } from 'lucide-react';
+import type { Tone } from '@/components/Data';
+import { toneText } from '@/components/Data';
 import type { ChatMessage } from '../types';
 import { useBackgroundTasks, useTaskDetail, type BackgroundTask } from '../useBackgroundTasks';
 import { SubagentTrace } from './ToolActivity';
@@ -8,6 +10,14 @@ type BackgroundTaskTrayProps = {
   messages: ChatMessage[];
 };
 
+/** Same vocabulary as the transcript's own task rows — a completed task must not be green here and grey there. */
+function statusTone(status: BackgroundTask['status']): Tone {
+  if (status === 'completed') return 'success';
+  if (status === 'failed') return 'danger';
+  if (status === 'stopped') return 'neutral';
+  return 'warning';
+}
+
 /**
  * The background tasks of this conversation, docked above the input.
  *
@@ -27,11 +37,11 @@ export const BackgroundTaskTray = ({ messages }: BackgroundTaskTrayProps) => {
   if (tasks.length === 0) return null;
 
   return (
-    <div className="mb-2 rounded-lg border border-duck-dark/10 bg-duck-dark/[0.03]">
+    <div className="mb-2 rounded-lg border border-border bg-muted/40">
       {open && <TaskPanel task={open} onClose={() => setOpenId(null)} />}
 
       <div className="flex items-center gap-2 px-2 py-2">
-        <span className="shrink-0 text-[10px] uppercase tracking-wider text-duck-dark/40">
+        <span className="shrink-0 text-xs uppercase tracking-wider text-muted-foreground">
           {running.length > 0 ? `${running.length} running` : 'Background'}
         </span>
         {/* pb-1.5 keeps the scrollbar clear of the chips; the matching -mb-1.5 hides that pad from layout,
@@ -51,7 +61,8 @@ export const BackgroundTaskTray = ({ messages }: BackgroundTaskTrayProps) => {
             type="button"
             onClick={dismissFinished}
             title="Clear finished"
-            className="shrink-0 rounded p-1 text-duck-dark/30 transition-colors hover:bg-duck-dark/5 hover:text-duck-dark/60 cursor-pointer"
+            aria-label="Clear finished tasks"
+            className="shrink-0 cursor-pointer rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
           >
             <X className="h-3.5 w-3.5" />
           </button>
@@ -71,31 +82,29 @@ type TaskChipProps = {
 
 const TaskChip = ({ task, active, onClick }: TaskChipProps) => {
   const { status } = task;
-  const tone =
-    status === 'completed'
-      ? 'text-green-600'
-      : status === 'failed'
-        ? 'text-red-600'
-        : status === 'stopped'
-          ? 'text-duck-dark/40'
-          : 'text-amber-500';
+  const tone = toneText[statusTone(status)];
 
   return (
     <button
       type="button"
       onClick={onClick}
-      className={`flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs transition-colors cursor-pointer ${
+      aria-expanded={active}
+      className={`flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs transition-colors ${
         active
-          ? 'border-duck-teal/40 bg-duck-teal/10 text-duck-dark/80'
-          : 'border-duck-dark/10 bg-background/60 text-duck-dark/60 hover:border-duck-dark/20 hover:text-duck-dark/80'
+          ? 'border-duck-teal/40 bg-duck-teal/10 text-foreground'
+          : 'border-border bg-background/60 text-muted-foreground hover:border-foreground/20 hover:text-foreground'
       }`}
     >
       {status === 'completed' ? (
         <Check className={`h-3 w-3 ${tone}`} />
+      ) : status === 'failed' ? (
+        // Was a CircleSlash, the same icon as "stopped" — the two outcomes you most need to tell apart
+        // were the one glyph.
+        <X className={`h-3 w-3 ${tone}`} />
       ) : status ? (
         <CircleSlash className={`h-3 w-3 ${tone}`} />
       ) : (
-        <span className="h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-amber-400" />
+        <span className="h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-warning" />
       )}
       <span className="max-w-[14rem] truncate">{task.description || 'Background task'}</span>
     </button>
@@ -123,19 +132,21 @@ const TaskPanel = ({ task, onClose }: TaskPanelProps) => {
   }, [data]);
 
   return (
-    <div className="border-b border-duck-dark/10">
+    <div className="border-b border-border">
       <div className="flex items-center gap-2 px-2 py-1.5">
         <div className="min-w-0 flex-1">
-          <div className="truncate text-xs text-duck-dark/70">{task.description || 'Background task'}</div>
-          <div className="truncate text-[10px] text-duck-dark/40">
+          <div className="truncate text-xs text-foreground/80">{task.description || 'Background task'}</div>
+          <div className="truncate text-xs text-muted-foreground">
             {task.taskType ?? 'task'} · {task.status ? (task.summary ?? task.status) : 'running…'}
           </div>
         </div>
-        {running && <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-amber-500" />}
+        {running && <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-warning" />}
         <button
           type="button"
           onClick={onClose}
-          className="shrink-0 rounded p-1 text-duck-dark/30 transition-colors hover:bg-duck-dark/5 hover:text-duck-dark/60 cursor-pointer"
+          title="Collapse"
+          aria-label="Collapse task detail"
+          className="shrink-0 cursor-pointer rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
         >
           <ChevronDown className="h-3.5 w-3.5" />
         </button>
@@ -147,7 +158,10 @@ const TaskPanel = ({ task, onClose }: TaskPanelProps) => {
           const el = ev.currentTarget;
           pinnedRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
         }}
-        className="max-h-64 overflow-y-auto border-t border-duck-dark/10 px-2 py-1.5"
+        // The composer is `shrink-0` and the transcript above it is `flex-1 min-h-0`, so every pixel this
+        // panel takes comes out of the transcript — a flat max-h-64 could leave almost no conversation
+        // visible in a short panel. Capped against the viewport as well as in absolute terms.
+        className="max-h-[min(16rem,25vh)] overflow-y-auto border-t border-border px-2 py-1.5"
       >
         <TaskBody detail={data} isLoading={isLoading} />
       </div>
@@ -167,8 +181,10 @@ const TaskBody = ({ detail, isLoading }: TaskBodyProps) => {
   if (detail.kind === 'log') {
     return (
       <>
-        {detail.truncated && <div className="mb-1 text-[10px] text-duck-dark/40">… earlier output trimmed</div>}
-        <pre className="whitespace-pre-wrap break-all rounded bg-gray-900 p-2 font-mono text-[11px] text-green-400">
+        {detail.truncated && <div className="mb-1 text-xs text-muted-foreground">… earlier output trimmed</div>}
+        {/* The terminal look is deliberate and stays; break-words rather than break-all, which split
+            words mid-character and made paths unreadable. */}
+        <pre className="whitespace-pre-wrap break-words rounded bg-gray-900 p-2 font-mono text-xs text-green-400">
           {detail.text || '(no output yet)'}
         </pre>
       </>
@@ -179,4 +195,6 @@ const TaskBody = ({ detail, isLoading }: TaskBodyProps) => {
   return <SubagentTrace messages={detail.messages} />;
 };
 
-const Placeholder = ({ text }: { text: string }) => <div className="px-1 py-2 text-xs text-duck-dark/40">{text}</div>;
+const Placeholder = ({ text }: { text: string }) => (
+  <div className="px-1 py-2 text-xs text-muted-foreground">{text}</div>
+);
diff --git a/src/workspaces/officerdev/src/apps/Chat/components/CopyButton.tsx b/src/workspaces/officerdev/src/apps/Chat/components/CopyButton.tsx
index 46e3f863..2029b174 100644
--- a/src/workspaces/officerdev/src/apps/Chat/components/CopyButton.tsx
+++ b/src/workspaces/officerdev/src/apps/Chat/components/CopyButton.tsx
@@ -19,7 +19,7 @@ export const CopyButton = ({ text, className = '' }: CopyButtonProps) => {
     <button
       type="button"
       onClick={handleCopy}
-      className={`p-1 rounded text-duck-dark dark:text-white opacity-0 group-hover:opacity-60 hover:!opacity-100 transition-opacity cursor-pointer ${className}`}
+      className={`p-1 rounded text-foreground opacity-0 group-hover:opacity-60 hover:!opacity-100 transition-opacity cursor-pointer ${className}`}
       title="Copy"
     >
       {copied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
diff --git a/src/workspaces/officerdev/src/apps/Chat/components/InputArea.tsx b/src/workspaces/officerdev/src/apps/Chat/components/InputArea.tsx
index a3e490f0..05bd5112 100644
--- a/src/workspaces/officerdev/src/apps/Chat/components/InputArea.tsx
+++ b/src/workspaces/officerdev/src/apps/Chat/components/InputArea.tsx
@@ -43,7 +43,7 @@ export const InputArea = ({ manager }: InputAreaProps) => {
   const [urlDialogOpen, setUrlDialogOpen] = useState(false);
 
   return (
-    <div className="shrink-0 border-t border-duck-dark/10 bg-background/60 p-2 md:p-3">
+    <div className="shrink-0 border-t border-border bg-background/60 p-2 md:p-3">
       {commandFeedback && (
         <div className="mb-2 px-3 py-1.5 text-xs text-duck-teal bg-duck-teal/10 rounded-md">{commandFeedback}</div>
       )}
@@ -53,7 +53,11 @@ export const InputArea = ({ manager }: InputAreaProps) => {
       <AttachmentList attachments={attachments} onRemove={removeAttachment} />
 
       <div className="flex items-end gap-1 md:gap-2">
-        <AttachButton onAttachImage={attachImage} onAttachWebpage={() => setUrlDialogOpen(true)} />
+        <AttachButton
+          onAttachImage={attachImage}
+          onAttachWebpage={() => setUrlDialogOpen(true)}
+          onAttachText={appendToInput}
+        />
         <MicButton recording={recording} transcribing={transcribing} onToggle={toggleRecording} />
 
         <textarea
@@ -75,7 +79,7 @@ export const InputArea = ({ manager }: InputAreaProps) => {
           }}
           placeholder="Type a message..."
           rows={1}
-          className="min-w-0 flex-1 resize-none rounded-lg border border-duck-dark/20 bg-background/80 px-2 py-1.5 md:px-3 md:py-2 text-base md:text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-2 focus:ring-duck-teal/30 focus:border-duck-teal/50"
+          className="min-w-0 flex-1 resize-none rounded-lg border border-input bg-background/80 px-2 py-1.5 md:px-3 md:py-2 text-base md:text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-duck-teal/30 focus:border-duck-teal/50"
         />
         {isGenerating ? (
           <Button
@@ -128,14 +132,14 @@ const MicButton = ({ recording, transcribing, onToggle }: MicButtonProps) => (
     type="button"
     disabled={transcribing}
     onClick={onToggle}
-    className="relative shrink-0 h-7 w-7 md:h-9 md:w-9 flex items-center justify-center rounded-lg text-duck-dark/40 hover:text-duck-dark/70 hover:bg-duck-dark/5 transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
+    className="relative shrink-0 h-7 w-7 md:h-9 md:w-9 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
   >
     {transcribing ? (
       <Loader2 className="h-4 w-4 animate-spin" />
     ) : recording ? (
       <>
-        <span className="absolute inset-0 rounded-lg animate-ping bg-red-400/30" />
-        <Square className="h-3.5 w-3.5 text-red-500" />
+        <span className="absolute inset-0 rounded-lg animate-ping bg-destructive/30" />
+        <Square className="h-3.5 w-3.5 text-destructive" />
       </>
     ) : (
       <Mic className="h-4 w-4" />
diff --git a/src/workspaces/officerdev/src/apps/Chat/components/MessageBubble.tsx b/src/workspaces/officerdev/src/apps/Chat/components/MessageBubble.tsx
index 90df7636..8e4a22f3 100644
--- a/src/workspaces/officerdev/src/apps/Chat/components/MessageBubble.tsx
+++ b/src/workspaces/officerdev/src/apps/Chat/components/MessageBubble.tsx
@@ -51,11 +51,11 @@ const FRONTMATTER_RE = /^<frontmatter>([\s\S]*?)<\/frontmatter>\s*/;
 
 const CollapsibleBlock = ({ label, content }: { label: string; content: string }) => (
   <div className="flex justify-center">
-    <details className="max-w-[85%] rounded-2xl bg-duck-dark/5 border border-duck-dark/10 px-4 py-2 text-sm">
-      <summary className="text-xs text-duck-dark/50 hover:text-duck-dark/70 cursor-pointer select-none">
+    <details className="max-w-[85%] rounded-2xl bg-muted border border-border px-4 py-2 text-sm">
+      <summary className="text-xs text-muted-foreground hover:text-foreground cursor-pointer select-none">
         {label}
       </summary>
-      <div className="mt-1.5 text-xs text-duck-dark/60 whitespace-pre-wrap border-l-2 border-duck-dark/15 pl-2 max-h-48 overflow-y-auto">
+      <div className="mt-1.5 text-xs text-muted-foreground whitespace-pre-wrap border-l-2 border-border pl-2 max-h-48 overflow-y-auto">
         {content}
       </div>
     </details>
@@ -103,7 +103,7 @@ const ReadAloudButton = ({ id, text }: { id: string; text: string }) => {
     <button
       type="button"
       onClick={handleClick}
-      className="p-1 rounded text-duck-dark dark:text-white opacity-60 hover:opacity-100 transition-opacity cursor-pointer"
+      className="p-1 rounded text-foreground opacity-60 hover:opacity-100 transition-opacity cursor-pointer"
     >
       {state === 'loading' && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
       {state === 'playing' && <Square className="h-3.5 w-3.5" />}
diff --git a/src/workspaces/officerdev/src/apps/Chat/components/MessageList.tsx b/src/workspaces/officerdev/src/apps/Chat/components/MessageList.tsx
index 6818ce43..224dd592 100644
--- a/src/workspaces/officerdev/src/apps/Chat/components/MessageList.tsx
+++ b/src/workspaces/officerdev/src/apps/Chat/components/MessageList.tsx
@@ -64,7 +64,7 @@ export const MessageList = ({ manager }: MessageListProps) => {
       )}
       <div ref={scrollViewportRef} className="h-full overflow-y-auto">
         {messages.length === 0 && !isGenerating && (
-          <div className="flex items-center justify-center h-full min-h-[200px] text-duck-dark/30 text-sm">
+          <div className="flex items-center justify-center h-full min-h-[200px] text-muted-foreground text-sm">
             Send a message to start
           </div>
         )}
diff --git a/src/workspaces/officerdev/src/apps/Chat/components/QuestionActivity.tsx b/src/workspaces/officerdev/src/apps/Chat/components/QuestionActivity.tsx
index 0e80ded0..082ba08c 100644
--- a/src/workspaces/officerdev/src/apps/Chat/components/QuestionActivity.tsx
+++ b/src/workspaces/officerdev/src/apps/Chat/components/QuestionActivity.tsx
@@ -79,7 +79,7 @@ export const QuestionActivity = ({ message, onAnswer }: QuestionActivityProps) =
           </div>
 
           <div className="px-4 py-3 space-y-3">
-            <p className="text-sm text-duck-dark font-medium">{q.question}</p>
+            <p className="text-sm text-foreground font-medium">{q.question}</p>
 
             <div className="space-y-1.5">
               {q.options.map((opt) => {
@@ -94,17 +94,19 @@ export const QuestionActivity = ({ message, onAnswer }: QuestionActivityProps) =
                     disabled={isDisabled}
                     className={`w-full text-left px-3 py-2 rounded-lg border text-sm transition-colors ${
                       isSelected
-                        ? 'border-duck-teal bg-duck-teal/10 text-duck-dark'
+                        ? 'border-duck-teal bg-duck-teal/10 text-foreground'
                         : isDisabled
-                          ? 'border-duck-dark/10 bg-duck-dark/5 text-duck-dark/40 cursor-not-allowed'
-                          : 'border-duck-dark/15 hover:border-duck-teal/40 hover:bg-duck-teal/5 text-duck-dark cursor-pointer'
+                          ? 'border-border bg-muted text-muted-foreground cursor-not-allowed'
+                          : 'border-border hover:border-duck-teal/40 hover:bg-duck-teal/5 text-foreground cursor-pointer'
                     }`}
                   >
                     <div className="flex items-center gap-2">
                       {isSelected && <Check className="h-3.5 w-3.5 text-duck-teal shrink-0" />}
                       <div>
                         <span className="font-medium">{opt.label}</span>
-                        {opt.description && <span className="text-duck-dark/50 ml-1.5">&mdash; {opt.description}</span>}
+                        {opt.description && (
+                          <span className="text-muted-foreground ml-1.5">&mdash; {opt.description}</span>
+                        )}
                       </div>
                     </div>
                   </button>
@@ -126,7 +128,7 @@ export const QuestionActivity = ({ message, onAnswer }: QuestionActivityProps) =
                     }
                   }}
                   placeholder="Other..."
-                  className="flex-1 px-3 py-1.5 rounded-lg border border-duck-dark/15 text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:border-duck-teal/40"
+                  className="flex-1 px-3 py-1.5 rounded-lg border border-border text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-duck-teal/40"
                 />
                 <button
                   onClick={handleSubmitOther}
diff --git a/src/workspaces/officerdev/src/apps/Chat/components/WebpageDialog.tsx b/src/workspaces/officerdev/src/apps/Chat/components/WebpageDialog.tsx
index 807e62ba..ce2bbfc7 100644
--- a/src/workspaces/officerdev/src/apps/Chat/components/WebpageDialog.tsx
+++ b/src/workspaces/officerdev/src/apps/Chat/components/WebpageDialog.tsx
@@ -38,7 +38,7 @@ export function WebpageDialog({ open, onOpenChange, onSubmit }: WebpageDialogPro
               }
             }}
             placeholder="https://example.com"
-            className="flex-1 rounded-lg border border-duck-dark/20 bg-background px-3 py-2 text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-2 focus:ring-duck-teal/30 focus:border-duck-teal/50"
+            className="flex-1 rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-duck-teal/30 focus:border-duck-teal/50"
             autoFocus
           />
           <Button
diff --git a/src/workspaces/officerdev/src/apps/ChatHistory/ChatDetailPanel.tsx b/src/workspaces/officerdev/src/apps/ChatHistory/ChatDetailPanel.tsx
index 5cb30cb3..4a369d56 100644
--- a/src/workspaces/officerdev/src/apps/ChatHistory/ChatDetailPanel.tsx
+++ b/src/workspaces/officerdev/src/apps/ChatHistory/ChatDetailPanel.tsx
@@ -37,13 +37,13 @@ type DetailBarProps = {
 
 function DetailBar({ sessionTitle, isConnected, isGenerating, onDisconnect }: DetailBarProps) {
   return (
-    <div className="shrink-0 flex items-center px-4 py-2 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60">
-      <div className="flex-1 min-w-0 text-center text-sm font-medium text-duck-dark/70 dark:text-foreground/70 truncate px-3">
+    <div className="shrink-0 flex items-center px-4 py-2 border-b border-border bg-background/60">
+      <div className="flex-1 min-w-0 text-center text-sm font-medium text-foreground/80 truncate px-3">
         {sessionTitle ?? 'New chat'}
       </div>
-      <div className="flex items-center gap-2 text-xs text-duck-dark/50 dark:text-foreground/50">
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
         {!isConnected ? (
-          <span className="inline-block h-2 w-2 rounded-full bg-red-500" />
+          <span className="inline-block h-2 w-2 rounded-full bg-destructive" />
         ) : isGenerating ? (
           <span className="inline-block h-2 w-2 rounded-full bg-duck-orange animate-pulse" />
         ) : (
@@ -55,7 +55,7 @@ function DetailBar({ sessionTitle, isConnected, isGenerating, onDisconnect }: De
             type="button"
             onClick={onDisconnect}
             title="End session — kills any running turn and releases it so it can be resumed elsewhere"
-            className="ml-1 p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 hover:text-red-500 transition-colors cursor-pointer"
+            className="ml-1 p-1 rounded hover:bg-muted hover:text-destructive transition-colors cursor-pointer"
           >
             <Unplug className="h-3.5 w-3.5" />
           </button>
@@ -138,7 +138,7 @@ export const ChatDetailPanel = () => {
 
   if (!selected) {
     return (
-      <div className="h-full flex items-center justify-center text-duck-dark/30 dark:text-foreground/30 text-sm">
+      <div className="h-full flex items-center justify-center text-muted-foreground text-sm">
         Select a session to view
       </div>
     );
diff --git a/src/workspaces/officerdev/src/apps/ChatHistory/DirPickerModal.tsx b/src/workspaces/officerdev/src/apps/ChatHistory/DirPickerModal.tsx
index c8afd6af..bf60bd70 100644
--- a/src/workspaces/officerdev/src/apps/ChatHistory/DirPickerModal.tsx
+++ b/src/workspaces/officerdev/src/apps/ChatHistory/DirPickerModal.tsx
@@ -46,12 +46,12 @@ export const DirPickerModal = ({ open, onClose, onSelect }: DirPickerModalProps)
   return (
     <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
       <DialogContent className="flex h-[70vh] max-w-2xl flex-col gap-0 p-0">
-        <DialogHeader className="border-b border-duck-dark/10 dark:border-foreground/10 px-4 py-3">
+        <DialogHeader className="border-b border-border px-4 py-3">
           <DialogTitle className="text-sm">Choose a working directory</DialogTitle>
         </DialogHeader>
 
         {/* Breadcrumb */}
-        <div className="flex flex-wrap items-center gap-1 border-b border-duck-dark/10 dark:border-foreground/10 px-4 py-2 text-xs text-duck-dark/60 dark:text-foreground/60">
+        <div className="flex flex-wrap items-center gap-1 border-b border-border px-4 py-2 text-xs text-muted-foreground">
           <button onClick={() => goto(-1)} className="hover:text-duck-teal cursor-pointer">
             ~
           </button>
@@ -88,7 +88,7 @@ export const DirPickerModal = ({ open, onClose, onSelect }: DirPickerModalProps)
         </div>
 
         {/* Footer */}
-        <div className="flex flex-col gap-2 border-t border-duck-dark/10 dark:border-foreground/10 px-4 py-3">
+        <div className="flex flex-col gap-2 border-t border-border px-4 py-3">
           {creating ? (
             <div className="flex items-center gap-1">
               <input
@@ -100,14 +100,20 @@ export const DirPickerModal = ({ open, onClose, onSelect }: DirPickerModalProps)
                   if (ev.key === 'Escape') setCreating(false);
                 }}
                 placeholder="New folder name"
-                className="min-w-0 flex-1 rounded border border-duck-dark/15 dark:border-foreground/15 bg-transparent px-2 py-1 text-xs outline-none"
+                className="min-w-0 flex-1 rounded border border-border bg-transparent px-2 py-1 text-xs outline-none"
               />
-              <button onClick={createFolder} className="rounded px-2 py-1 text-xs text-duck-teal hover:bg-duck-teal/10 cursor-pointer">
+              <button
+                onClick={createFolder}
+                className="rounded px-2 py-1 text-xs text-duck-teal hover:bg-duck-teal/10 cursor-pointer"
+              >
                 Create
               </button>
             </div>
           ) : (
-            <button onClick={() => setCreating(true)} className="flex items-center gap-1.5 self-start text-xs opacity-60 hover:opacity-100 cursor-pointer">
+            <button
+              onClick={() => setCreating(true)}
+              className="flex items-center gap-1.5 self-start text-xs opacity-60 hover:opacity-100 cursor-pointer"
+            >
               <FolderPlus className="h-3.5 w-3.5" /> New folder
             </button>
           )}
@@ -115,7 +121,10 @@ export const DirPickerModal = ({ open, onClose, onSelect }: DirPickerModalProps)
             <span className="min-w-0 flex-1 truncate text-xs opacity-60" title={absCurrent}>
               {absCurrent}
             </span>
-            <button onClick={onClose} className="rounded-md px-3 py-1.5 text-sm opacity-60 hover:opacity-100 cursor-pointer">
+            <button
+              onClick={onClose}
+              className="rounded-md px-3 py-1.5 text-sm opacity-60 hover:opacity-100 cursor-pointer"
+            >
               Cancel
             </button>
             <button
diff --git a/src/workspaces/officerdev/src/apps/ChatHistory/PwdSelector.tsx b/src/workspaces/officerdev/src/apps/ChatHistory/PwdSelector.tsx
index 135a6e2a..4748faa0 100644
--- a/src/workspaces/officerdev/src/apps/ChatHistory/PwdSelector.tsx
+++ b/src/workspaces/officerdev/src/apps/ChatHistory/PwdSelector.tsx
@@ -36,7 +36,7 @@ export const PwdSelector = ({ value, onChange }: PwdSelectorProps) => {
       <button
         onClick={() => setOpen((o) => !o)}
         title={isDefaultActive ? (defaultCwd ?? 'Default') : value!}
-        className="flex items-center gap-1.5 max-w-[13rem] rounded-md border border-duck-dark/10 dark:border-foreground/10 px-2 py-1 text-xs text-duck-dark/70 dark:text-foreground/70 hover:bg-duck-dark/5 dark:hover:bg-foreground/5 cursor-pointer transition-colors"
+        className="flex items-center gap-1.5 max-w-[13rem] rounded-md border border-border px-2 py-1 text-xs text-foreground/80 hover:bg-muted cursor-pointer transition-colors"
       >
         <FolderOpen className="h-3.5 w-3.5 shrink-0 text-duck-teal/70" />
         <span className="truncate">{label}</span>
@@ -46,7 +46,7 @@ export const PwdSelector = ({ value, onChange }: PwdSelectorProps) => {
       {open && (
         <>
           <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
-          <div className="absolute left-0 z-20 mt-1 w-80 rounded-md border border-duck-dark/10 dark:border-foreground/10 bg-background shadow-lg">
+          <div className="absolute left-0 z-20 mt-1 w-80 rounded-md border border-border bg-background shadow-lg">
             <div className="max-h-72 overflow-y-auto py-1">
               {pwds.map((p) => {
                 const selected = p.isDefault ? isDefaultActive : value === p.cwd;
@@ -55,7 +55,7 @@ export const PwdSelector = ({ value, onChange }: PwdSelectorProps) => {
                     key={p.cwd}
                     onClick={() => pick(p.isDefault ? null : p.cwd)}
                     title={p.cwd}
-                    className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs cursor-pointer hover:bg-duck-dark/5 dark:hover:bg-foreground/5 ${selected ? 'text-duck-teal' : 'text-duck-dark/70 dark:text-foreground/70'}`}
+                    className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs cursor-pointer hover:bg-muted ${selected ? 'text-duck-teal' : 'text-foreground/80'}`}
                   >
                     <Check className={`h-3.5 w-3.5 shrink-0 ${selected ? 'opacity-100' : 'opacity-0'}`} />
                     <span className="min-w-0 flex-1 truncate">
@@ -71,11 +71,11 @@ export const PwdSelector = ({ value, onChange }: PwdSelectorProps) => {
                 setOpen(false);
                 setBrowse(true);
               }}
-              className="flex w-full items-center gap-2 border-t border-duck-dark/10 dark:border-foreground/10 px-3 py-2 text-left text-xs text-duck-dark/70 dark:text-foreground/70 hover:bg-duck-dark/5 dark:hover:bg-foreground/5 cursor-pointer"
+              className="flex w-full items-center gap-2 border-t border-border px-3 py-2 text-left text-xs text-foreground/80 hover:bg-muted cursor-pointer"
             >
               <FolderSearch className="h-3.5 w-3.5 shrink-0 text-duck-teal/70" /> Browse…
             </button>
-            <div className="flex items-center gap-1 border-t border-duck-dark/10 dark:border-foreground/10 p-2">
+            <div className="flex items-center gap-1 border-t border-border p-2">
               <input
                 value={custom}
                 onChange={(ev) => setCustom(ev.target.value)}