@geminilight/mindos 0.6.17 → 0.6.19

package/app/components/OrganizeToast.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import {
   Check, X, Loader2, Sparkles, AlertCircle, Undo2,
   ChevronDown, FilePlus, FileEdit, ExternalLink,
+  Maximize2, Minimize2, FileIcon,
 } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 import type { useAiOrganize } from '@/hooks/useAiOrganize';
@@ -84,6 +85,7 @@ export default function OrganizeToast({
   const { elapsed, displayHint } = useOrganizeTimer(isOrganizing, aiOrganize.stageHint);
 
   const [expanded, setExpanded] = useState(false);
+  const [maximized, setMaximized] = useState(false);
   const [undoing, setUndoing] = useState(false);
   const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const historyIdRef = useRef<string | null>(null);
@@ -197,7 +199,211 @@ export default function OrganizeToast({
 
   if (!isActive) return null;
 
-  // Expanded panel (file list with per-file undo)
+  // ── Shared file-change row renderer ──
+  function renderChangeRow(c: typeof aiOrganize.changes[number], idx: number) {
+    const wasUndone = c.undone;
+    const undoable = aiOrganize.canUndo(c.path);
+    const fileName = c.path.split('/').pop() ?? c.path;
+    return (
+      <div
+        key={`${c.path}-${idx}`}
+        className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors ${wasUndone ? 'bg-muted/30 opacity-50' : 'bg-muted/50'}`}
+      >
+        {wasUndone ? (
+          <Undo2 size={14} className="text-muted-foreground shrink-0" />
+        ) : c.action === 'create' ? (
+          <FilePlus size={14} className="text-success shrink-0" />
+        ) : (
+          <FileEdit size={14} className="text-[var(--amber)] shrink-0" />
+        )}
+        <span className={`truncate flex-1 ${wasUndone ? 'line-through text-muted-foreground' : 'text-foreground'}`}>
+          {fileName}
+        </span>
+        {wasUndone ? (
+          <span className="text-xs text-muted-foreground shrink-0">{fi.organizeUndone as string}</span>
+        ) : (
+          <span className={`text-xs shrink-0 ${c.ok ? 'text-muted-foreground' : 'text-error'}`}>
+            {!c.ok ? fi.organizeFailed as string
+              : c.action === 'create' ? fi.organizeCreated as string
+              : fi.organizeUpdated as string}
+          </span>
+        )}
+        {undoable && (
+          <button
+            type="button"
+            onClick={() => handleUndoOne(c.path)}
+            disabled={undoing}
+            className="text-2xs text-muted-foreground/60 hover:text-foreground transition-colors shrink-0 px-1 disabled:opacity-40"
+            title={fi.organizeUndoOne as string}
+          >
+            <Undo2 size={12} />
+          </button>
+        )}
+        {c.ok && !c.undone && (
+          <button
+            type="button"
+            onClick={() => handleViewFile(c.path)}
+            className="text-2xs text-muted-foreground/60 hover:text-[var(--amber)] transition-colors shrink-0 px-1"
+            title={fi.organizeViewFile as string}
+          >
+            <ExternalLink size={12} />
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  // ── Shared footer actions ──
+  function renderActions() {
+    return (
+      <div className="flex items-center justify-end gap-3 px-4 py-3 border-t border-border">
+        {isDone && aiOrganize.hasAnyUndoable && (
+          <button
+            onClick={handleUndoAll}
+            disabled={undoing}
+            className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1.5 disabled:opacity-50"
+          >
+            {undoing ? <Loader2 size={12} className="animate-spin" /> : <Undo2 size={12} />}
+            {fi.organizeUndoAll as string}
+          </button>
+        )}
+        <button
+          onClick={handleDismiss}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-[var(--amber)] text-[var(--amber-foreground)] hover:opacity-90 transition-all"
+        >
+          <Check size={12} />
+          {fi.organizeDone as string}
+        </button>
+      </div>
+    );
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  //  Maximized Modal — full detail view with source files, summary, changes
+  // ═══════════════════════════════════════════════════════════════════════════
+  if (maximized) {
+    return (
+      <div
+        className="fixed inset-0 z-50 overlay-backdrop flex items-center justify-center p-4"
+        onClick={(e) => { if (e.target === e.currentTarget) setMaximized(false); }}
+      >
+        <div
+          className="w-full max-w-xl max-h-[80vh] flex flex-col bg-card rounded-xl shadow-xl border border-border animate-in fade-in-0 zoom-in-95 duration-200"
+          onClick={handleUserAction}
+          role="dialog"
+          aria-modal="true"
+          aria-label={fi.organizeDetailTitle as string}
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between px-5 pt-5 pb-3 shrink-0">
+            <div className="flex items-center gap-2">
+              {isOrganizing ? (
+                <div className="relative shrink-0">
+                  <Sparkles size={16} className="text-[var(--amber)]" />
+                  <Loader2 size={10} className="absolute -bottom-0.5 -right-0.5 text-[var(--amber)] animate-spin" />
+                </div>
+              ) : isDone ? (
+                <Check size={16} className="text-success" />
+              ) : (
+                <AlertCircle size={16} className="text-error" />
+              )}
+              <h2 className="text-base font-semibold text-foreground">
+                {fi.organizeDetailTitle as string}
+              </h2>
+              {isOrganizing && (
+                <span className="text-xs text-muted-foreground/60 tabular-nums">
+                  {(fi.organizeElapsed as (s: number) => string)(elapsed)}
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={() => setMaximized(false)}
+                className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                title={fi.organizeMinimizeModal as string}
+              >
+                <Minimize2 size={14} />
+              </button>
+              <button
+                type="button"
+                onClick={handleDismiss}
+                className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <X size={14} />
+              </button>
+            </div>
+          </div>
+
+          {/* Scrollable body */}
+          <div className="flex-1 min-h-0 overflow-y-auto px-5 pb-2 space-y-4">
+            {/* Live progress during organizing */}
+            {isOrganizing && (
+              <div className="flex items-center gap-2 px-3 py-2.5 rounded-lg bg-[var(--amber-subtle)] border border-[var(--amber-dim)]">
+                <Loader2 size={14} className="text-[var(--amber)] animate-spin shrink-0" />
+                <span className="text-xs text-foreground">{stageText(t, displayHint)}</span>
+              </div>
+            )}
+
+            {/* Source files */}
+            {aiOrganize.sourceFileNames.length > 0 && (
+              <div>
+                <h3 className="text-xs font-medium text-muted-foreground mb-1.5">
+                  {fi.organizeSourceFiles as string}
+                </h3>
+                <div className="flex flex-wrap gap-1.5">
+                  {aiOrganize.sourceFileNames.map((name, i) => (
+                    <span key={i} className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-muted/60 text-xs text-foreground">
+                      <FileIcon size={11} className="text-muted-foreground shrink-0" />
+                      {name}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* AI Summary */}
+            {(aiOrganize.summary || isOrganizing) && (
+              <div>
+                <h3 className="text-xs font-medium text-muted-foreground mb-1.5">
+                  {fi.organizeSummaryLabel as string}
+                </h3>
+                <div className="px-3 py-2.5 rounded-lg bg-muted/30 border border-border text-sm text-foreground leading-relaxed whitespace-pre-wrap">
+                  {aiOrganize.summary || (fi.organizeNoSummary as string)}
+                </div>
+              </div>
+            )}
+
+            {/* File changes */}
+            {aiOrganize.changes.length > 0 && (
+              <div>
+                <h3 className="text-xs font-medium text-muted-foreground mb-1.5">
+                  {(fi.organizeChangesLabel as (n: number) => string)(aiOrganize.changes.length)}
+                </h3>
+                <div className="space-y-0.5">
+                  {aiOrganize.changes.map((c, idx) => renderChangeRow(c, idx))}
+                </div>
+              </div>
+            )}
+
+            {/* Error detail */}
+            {isError && (
+              <div className="px-3 py-2.5 rounded-lg bg-error/5 border border-error/20 text-xs text-error">
+                {aiOrganize.error}
+              </div>
+            )}
+          </div>
+
+          {/* Footer actions */}
+          {(isDone || isError) && renderActions()}
+        </div>
+      </div>
+    );
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  //  Expanded panel (file list with per-file undo) — bottom toast size
+  // ═══════════════════════════════════════════════════════════════════════════
   if (expanded && (isDone || isError)) {
     return (
       <div
@@ -212,71 +418,29 @@ export default function OrganizeToast({
               {isDone ? fi.organizeReviewTitle as string : fi.organizeErrorTitle as string}
             </span>
           </div>
-          <button
-            type="button"
-            onClick={() => setExpanded(false)}
-            className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
-          >
-            <ChevronDown size={14} />
-          </button>
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              onClick={() => { setExpanded(false); setMaximized(true); }}
+              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              title={fi.organizeDetailTitle as string}
+            >
+              <Maximize2 size={13} />
+            </button>
+            <button
+              type="button"
+              onClick={() => setExpanded(false)}
+              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <ChevronDown size={14} />
+            </button>
+          </div>
         </div>
 
         {/* File list */}
         {isDone && (
           <div className="max-h-[240px] overflow-y-auto p-2 space-y-0.5">
-            {aiOrganize.changes.map((c, idx) => {
-              const wasUndone = c.undone;
-              const undoable = aiOrganize.canUndo(c.path);
-              const fileName = c.path.split('/').pop() ?? c.path;
-
-              return (
-                <div
-                  key={`${c.path}-${idx}`}
-                  className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors ${wasUndone ? 'bg-muted/30 opacity-50' : 'bg-muted/50'}`}
-                >
-                  {wasUndone ? (
-                    <Undo2 size={14} className="text-muted-foreground shrink-0" />
-                  ) : c.action === 'create' ? (
-                    <FilePlus size={14} className="text-success shrink-0" />
-                  ) : (
-                    <FileEdit size={14} className="text-[var(--amber)] shrink-0" />
-                  )}
-                  <span className={`truncate flex-1 ${wasUndone ? 'line-through text-muted-foreground' : 'text-foreground'}`}>
-                    {fileName}
-                  </span>
-                  {wasUndone ? (
-                    <span className="text-xs text-muted-foreground shrink-0">{fi.organizeUndone as string}</span>
-                  ) : (
-                    <span className={`text-xs shrink-0 ${c.ok ? 'text-muted-foreground' : 'text-error'}`}>
-                      {!c.ok ? fi.organizeFailed as string
-                        : c.action === 'create' ? fi.organizeCreated as string
-                        : fi.organizeUpdated as string}
-                    </span>
-                  )}
-                  {undoable && (
-                    <button
-                      type="button"
-                      onClick={() => handleUndoOne(c.path)}
-                      disabled={undoing}
-                      className="text-2xs text-muted-foreground/60 hover:text-foreground transition-colors shrink-0 px-1 disabled:opacity-40"
-                      title={fi.organizeUndoOne as string}
-                    >
-                      <Undo2 size={12} />
-                    </button>
-                  )}
-                  {c.ok && !c.undone && (
-                    <button
-                      type="button"
-                      onClick={() => handleViewFile(c.path)}
-                      className="text-2xs text-muted-foreground/60 hover:text-[var(--amber)] transition-colors shrink-0 px-1"
-                      title={fi.organizeViewFile as string}
-                    >
-                      <ExternalLink size={12} />
-                    </button>
-                  )}
-                </div>
-              );
-            })}
+            {aiOrganize.changes.map((c, idx) => renderChangeRow(c, idx))}
           </div>
         )}
 
@@ -286,31 +450,14 @@ export default function OrganizeToast({
           </div>
         )}
 
-        {/* Actions */}
-        <div className="flex items-center justify-end gap-3 px-4 py-3 border-t border-border">
-          {isDone && aiOrganize.hasAnyUndoable && (
-            <button
-              onClick={handleUndoAll}
-              disabled={undoing}
-              className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1.5 disabled:opacity-50"
-            >
-              {undoing ? <Loader2 size={12} className="animate-spin" /> : <Undo2 size={12} />}
-              {fi.organizeUndoAll as string}
-            </button>
-          )}
-          <button
-            onClick={handleDismiss}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-[var(--amber)] text-[var(--amber-foreground)] hover:opacity-90 transition-all"
-          >
-            <Check size={12} />
-            {fi.organizeDone as string}
-          </button>
-        </div>
+        {renderActions()}
       </div>
     );
   }
 
-  // Compact toast bar
+  // ═══════════════════════════════════════════════════════════════════════════
+  //  Compact toast bar
+  // ═══════════════════════════════════════════════════════════════════════════
   return (
     <div
       className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3 bg-card border border-border rounded-xl shadow-lg px-4 py-3 max-w-md animate-in fade-in-0 slide-in-from-bottom-2 duration-200"
@@ -372,6 +519,14 @@ export default function OrganizeToast({
           <span className="text-xs text-muted-foreground/60 tabular-nums shrink-0">
             {(fi.organizeElapsed as (s: number) => string)(elapsed)}
           </span>
+          <button
+            type="button"
+            onClick={() => { setMaximized(true); handleUserAction(); }}
+            className="text-muted-foreground/50 hover:text-muted-foreground transition-colors shrink-0"
+            title={fi.organizeDetailTitle as string}
+          >
+            <Maximize2 size={13} />
+          </button>
           <button
             type="button"
             onClick={handleDismiss}

package/app/components/Panel.tsx

@@ -30,7 +30,6 @@ const DEFAULT_PANEL_WIDTH: Record<PanelId, number> = {
   echo: 280,
   agents: 280,
   discover: 280,
-  history: 280,
 };
 
 const MIN_PANEL_WIDTH = 240;
@@ -108,11 +107,12 @@ export default function Panel({
     };
   }, [newPopover]);
 
-  // Double-click hint: show only until user has used it once
-  const [dblHintSeen, setDblHintSeen] = useState(() => {
-    if (typeof window === 'undefined') return false;
-    return localStorage.getItem('mindos-tree-dblclick-hint') === '1';
-  });
+  // Double-click hint: show only until user has used it once.
+  // Initialize false to match SSR; hydrate from localStorage in useEffect.
+  const [dblHintSeen, setDblHintSeen] = useState(false);
+  useEffect(() => {
+    try { if (localStorage.getItem('mindos-tree-dblclick-hint') === '1') setDblHintSeen(true); } catch { /* ignore */ }
+  }, []);
   const markDblHintSeen = useCallback(() => {
     if (!dblHintSeen) {
       setDblHintSeen(true);

package/app/components/SidebarLayout.tsx

@@ -345,12 +345,22 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
       <ActivityBar
         activePanel={railActivePanel}
         onPanelChange={lp.setActivePanel}
+        onEchoClick={() => {
+          const wasActive = lp.activePanel === 'echo';
+          lp.setActivePanel(wasActive ? null : 'echo');
+          if (!wasActive) router.push('/echo/about-you');
+        }}
         onAgentsClick={() => {
           const wasActive = lp.activePanel === 'agents';
           lp.setActivePanel(wasActive ? null : 'agents');
           if (!wasActive) router.push('/agents');
           setAgentDetailKey(null);
         }}
+        onDiscoverClick={() => {
+          const wasActive = lp.activePanel === 'discover';
+          lp.setActivePanel(wasActive ? null : 'discover');
+          if (!wasActive) router.push('/explore');
+        }}
         syncStatus={syncStatus}
         expanded={lp.railExpanded}
         onExpandedChange={handleExpandedChange}

package/app/components/UpdateOverlay.tsx

@@ -97,21 +97,21 @@ export default function UpdateOverlay() {
     >
       {done ? (
         <>
-          <CheckCircle2 size={32} style={{ color: '#7aad80', marginBottom: 12 }} />
-          <div style={{ color: '#e8e4dc', fontSize: 18, fontWeight: 600 }}>
+          <CheckCircle2 size={32} style={{ color: 'var(--success)', marginBottom: 12 }} />
+          <div style={{ color: 'var(--foreground)', fontSize: 18, fontWeight: 600 }}>
             {zh ? '更新成功！' : 'Update Complete!'}
           </div>
-          <div style={{ color: '#8a8275', fontSize: 13, marginTop: 6 }}>
+          <div style={{ color: 'var(--muted-foreground)', fontSize: 13, marginTop: 6 }}>
             {zh ? '正在刷新页面...' : 'Reloading...'}
           </div>
         </>
       ) : (
         <>
-          <Loader2 size={32} style={{ color: '#d4954a', marginBottom: 12, animation: 'spin 1s linear infinite' }} />
-          <div style={{ color: '#e8e4dc', fontSize: 18, fontWeight: 600 }}>
+          <Loader2 size={32} style={{ color: 'var(--amber)', marginBottom: 12, animation: 'spin 1s linear infinite' }} />
+          <div style={{ color: 'var(--foreground)', fontSize: 18, fontWeight: 600 }}>
             {zh ? 'MindOS 正在更新...' : 'MindOS is Updating...'}
           </div>
-          <div style={{ color: '#8a8275', fontSize: 13, marginTop: 6, textAlign: 'center', maxWidth: 300, lineHeight: 1.5 }}>
+          <div style={{ color: 'var(--muted-foreground)', fontSize: 13, marginTop: 6, textAlign: 'center', maxWidth: 300, lineHeight: 1.5 }}>
             {zh
               ? '服务正在重启，请勿关闭此页面。完成后将自动刷新。'
               : 'The server is restarting. Please do not close this page. It will auto-reload when ready.'}

package/app/components/agents/AgentDetailContent.tsx

@@ -243,9 +243,9 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
             <h1 className="text-lg font-semibold tracking-tight font-display text-foreground truncate">{agent.name}</h1>
             <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 mt-0.5 text-2xs text-muted-foreground/60">
               <span className={`font-medium px-1.5 py-px rounded-full ${
-                status === 'connected' ? 'bg-success/10 text-success'
+                status === 'connected' ? 'bg-muted text-muted-foreground'
                   : status === 'detected' ? 'bg-[var(--amber-subtle)] text-[var(--amber-text)]'
-                    : 'bg-muted text-muted-foreground'
+                    : 'bg-error/10 text-error'
               }`}>{status}</span>
               <span className="font-mono">{agent.transport ?? agent.preferredTransport}</span>
               <span className="text-muted-foreground/25" aria-hidden="true">·</span>

package/app/components/agents/AgentsMcpSection.tsx

@@ -296,7 +296,7 @@ function ByAgentView({
             const mcpServers = agent.configuredMcpServers ?? [];
             const nativeSkillCount = (agent.installedSkillNames ?? []).length;
             return (
-              <div key={agent.key} className={`rounded-xl border bg-card group hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)] transition-all duration-150 ${status === 'connected' ? 'border-l-2 border-l-[var(--success)] border-border' : status === 'detected' ? 'border-l-2 border-l-[var(--amber)] border-border' : 'border-border'}`}>
+              <div key={agent.key} className={`rounded-xl border bg-card group hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)] transition-all duration-150 ${status === 'detected' ? 'border-l-2 border-l-[var(--amber)] border-border' : status === 'notFound' ? 'border-l-2 border-l-error border-border' : 'border-border'}`}>
                 {/* Card header with avatar */}
                 <div className="flex items-center gap-3 p-3">
                   <AgentAvatar name={agent.name} status={status} />
@@ -306,7 +306,7 @@ function ByAgentView({
                         {agent.name}
                       </Link>
                       <span className="text-2xs text-muted-foreground font-mono shrink-0">{agent.transport ?? agent.preferredTransport}</span>
-                      <span className={`text-2xs px-1.5 py-0.5 rounded shrink-0 ${status === 'connected' ? 'bg-success/10 text-success' : status === 'detected' ? 'bg-[var(--amber-dim)] text-[var(--amber-text)]' : 'bg-muted text-muted-foreground'}`}>
+                      <span className={`text-2xs px-1.5 py-0.5 rounded shrink-0 ${status === 'connected' ? 'bg-muted text-muted-foreground' : status === 'detected' ? 'bg-[var(--amber-dim)] text-[var(--amber-text)]' : 'bg-error/10 text-error'}`}>
                         {copy.status[status]}
                       </span>
                     </div>

package/app/components/agents/AgentsOverviewSection.tsx

@@ -269,15 +269,15 @@ function StatCell({
         : 'text-muted-foreground';
   const iconColor =
     tone === 'ok'
-      ? 'text-emerald-500/70'
+      ? 'text-[var(--success)]/70'
       : tone === 'warn'
-        ? 'text-amber-500/70'
+        ? 'text-[var(--amber)]/70'
         : 'text-muted-foreground/40';
   const hoverBg =
     tone === 'ok'
-      ? 'hover:bg-emerald-500/[0.04]'
+      ? 'hover:bg-muted/20'
       : tone === 'warn'
-        ? 'hover:bg-amber-500/[0.04]'
+        ? 'hover:bg-[var(--amber)]/[0.04]'
         : 'hover:bg-muted/20';
 
   return (
@@ -335,8 +335,8 @@ function QuickNavCard({
           <span
             className={`text-2xs px-2 py-0.5 rounded-full font-medium select-none ${
               statTone === 'ok'
-                ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-                : 'bg-amber-500/10 text-amber-600 dark:text-amber-400'
+                ? 'bg-muted text-muted-foreground'
+                : 'bg-[var(--amber-dim)] text-[var(--amber-text)]'
             }`}
           >
             {stat}
@@ -373,10 +373,10 @@ function AgentCard({
     status === 'connected' ? copy.connected : status === 'detected' ? copy.detected : copy.notFound;
   const statusColor =
     status === 'connected'
-      ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+      ? 'bg-muted text-muted-foreground'
       : status === 'detected'
-        ? 'bg-amber-500/10 text-amber-600 dark:text-amber-400'
-        : 'bg-zinc-500/10 text-zinc-500';
+        ? 'bg-[var(--amber-dim)] text-[var(--amber-text)]'
+        : 'bg-error/10 text-error';
 
   return (
     <Link
@@ -410,10 +410,10 @@ function AgentCard({
         <span className="flex-1 min-w-[4px]" />
         {hasRuntime && (
           <span
-            className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400"
+            className="flex items-center gap-1 text-[var(--success)]"
             title={copy.runtimeActive}
           >
-            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" aria-hidden="true" />
+            <span className="w-1.5 h-1.5 rounded-full bg-[var(--success)] animate-pulse" aria-hidden="true" />
             <span className="text-2xs font-medium">{copy.runtimeActive}</span>
           </span>
         )}

package/app/components/agents/AgentsPrimitives.tsx

@@ -27,7 +27,7 @@ export function StatusDot({ tone, label, count }: { tone: 'ok' | 'warn' | 'neutr
   const countCls = tone === 'ok' ? 'text-foreground' : tone === 'warn' ? 'text-[var(--amber)]' : 'text-muted-foreground';
   return (
     <span className="inline-flex items-center gap-1.5 text-muted-foreground">
-      <span className={`w-2 h-2 rounded-full ${dotCls} ${tone === 'ok' ? 'ring-2 ring-[var(--success)]/20' : ''}`} aria-hidden="true" />
+      <span className={`w-2 h-2 rounded-full ${dotCls}`} aria-hidden="true" />
       <span className="text-xs">{label}</span>
       <span className={`tabular-nums font-medium ${countCls}`}>{count}</span>
     </span>
@@ -131,20 +131,20 @@ export function EmptyState({ message, icon, className }: { message: string; icon
 
 /* ────────── Agent Avatar ────────── */
 
-/** Soft pastel palette: [bg, border, text] — watercolor aesthetic */
+/** Dual-mode palette: soft pastels in light, muted tones in dark — [bg, border, text] */
 const AVATAR_PALETTES: [string, string, string][] = [
-  ['bg-rose-100/70',     'border-rose-300/50',    'text-rose-600/80'],
-  ['bg-violet-100/70',   'border-violet-300/50',  'text-violet-600/80'],
-  ['bg-emerald-100/70',  'border-emerald-300/50', 'text-emerald-600/80'],
-  ['bg-sky-100/70',      'border-sky-300/50',     'text-sky-600/80'],
-  ['bg-amber-100/70',    'border-amber-300/50',   'text-amber-700/80'],
-  ['bg-teal-100/70',     'border-teal-300/50',    'text-teal-600/80'],
-  ['bg-pink-100/70',     'border-pink-300/50',    'text-pink-600/80'],
-  ['bg-indigo-100/70',   'border-indigo-300/50',  'text-indigo-600/80'],
-  ['bg-lime-100/70',     'border-lime-300/50',    'text-lime-700/80'],
-  ['bg-fuchsia-100/70',  'border-fuchsia-300/50', 'text-fuchsia-600/80'],
-  ['bg-cyan-100/70',     'border-cyan-300/50',    'text-cyan-600/80'],
-  ['bg-orange-100/70',   'border-orange-300/50',  'text-orange-600/80'],
+  ['bg-rose-100/70 dark:bg-rose-900/30',       'border-rose-300/50 dark:border-rose-700/40',      'text-rose-600/80 dark:text-rose-400/80'],
+  ['bg-violet-100/70 dark:bg-violet-900/30',   'border-violet-300/50 dark:border-violet-700/40',  'text-violet-600/80 dark:text-violet-400/80'],
+  ['bg-emerald-100/70 dark:bg-emerald-900/30', 'border-emerald-300/50 dark:border-emerald-700/40','text-emerald-600/80 dark:text-emerald-400/80'],
+  ['bg-sky-100/70 dark:bg-sky-900/30',         'border-sky-300/50 dark:border-sky-700/40',        'text-sky-600/80 dark:text-sky-400/80'],
+  ['bg-amber-100/70 dark:bg-amber-900/30',     'border-amber-300/50 dark:border-amber-700/40',    'text-amber-700/80 dark:text-amber-400/80'],
+  ['bg-teal-100/70 dark:bg-teal-900/30',       'border-teal-300/50 dark:border-teal-700/40',      'text-teal-600/80 dark:text-teal-400/80'],
+  ['bg-pink-100/70 dark:bg-pink-900/30',       'border-pink-300/50 dark:border-pink-700/40',      'text-pink-600/80 dark:text-pink-400/80'],
+  ['bg-indigo-100/70 dark:bg-indigo-900/30',   'border-indigo-300/50 dark:border-indigo-700/40',  'text-indigo-600/80 dark:text-indigo-400/80'],
+  ['bg-lime-100/70 dark:bg-lime-900/30',       'border-lime-300/50 dark:border-lime-700/40',      'text-lime-700/80 dark:text-lime-400/80'],
+  ['bg-fuchsia-100/70 dark:bg-fuchsia-900/30', 'border-fuchsia-300/50 dark:border-fuchsia-700/40','text-fuchsia-600/80 dark:text-fuchsia-400/80'],
+  ['bg-cyan-100/70 dark:bg-cyan-900/30',       'border-cyan-300/50 dark:border-cyan-700/40',      'text-cyan-600/80 dark:text-cyan-400/80'],
+  ['bg-orange-100/70 dark:bg-orange-900/30',   'border-orange-300/50 dark:border-orange-700/40',  'text-orange-600/80 dark:text-orange-400/80'],
 ];
 
 function hashName(str: string): number {

package/app/components/agents/AgentsSkillsSection.tsx

@@ -696,7 +696,7 @@ function AgentCard({
             </Link>
             {skillMode && (
               <span className={`text-2xs px-1.5 py-0.5 rounded shrink-0 ${
-                skillMode === 'universal' ? 'bg-success/10 text-success'
+                skillMode === 'universal' ? 'bg-muted text-muted-foreground'
                   : skillMode === 'additional' ? 'bg-[var(--amber-dim)] text-[var(--amber-text)]'
                     : 'bg-muted text-muted-foreground'
               }`}>

package/app/components/agents/SkillDetailPopover.tsx

@@ -422,7 +422,7 @@ function MetaCard({
   tone?: 'ok' | 'muted' | 'default';
 }) {
   const valueColor =
-    tone === 'ok' ? 'text-emerald-600 dark:text-emerald-400'
+    tone === 'ok' ? 'text-[var(--success)]'
       : tone === 'muted' ? 'text-muted-foreground'
         : 'text-foreground';
   return (

package/app/components/ask/MessageList.tsx

@@ -18,7 +18,7 @@ function UserMessageContent({ content, skillName }: { content: string; skillName
   const rest = prefixMatch ? content.slice(prefixMatch[0].length) : content;
   return (
     <>
-      <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[11px] font-medium bg-[var(--amber-foreground)]/15 text-[var(--amber-foreground)]/90 mr-1 align-middle">
+      <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[11px] font-medium bg-[var(--amber)]/15 text-[var(--amber)] mr-1 align-middle">
         <Zap size={10} className="shrink-0" />
         {resolved}
       </span>

package/app/components/panels/EchoPanel.tsx

@@ -19,12 +19,12 @@ export default function EchoPanel({ active, maximized, onMaximize }: EchoPanelPr
   const e = t.panels.echo;
   const pathname = usePathname() ?? '';
 
-  const rowBySegment: Record<EchoSegment, { icon: ReactNode; title: string; subtitle: string }> = {
-    'about-you': { icon: <UserRound size={14} />, title: e.aboutYouTitle, subtitle: e.aboutYouDesc },
-    continued: { icon: <Bookmark size={14} />, title: e.continuedTitle, subtitle: e.continuedDesc },
-    daily: { icon: <Sun size={14} />, title: e.dailyEchoTitle, subtitle: e.dailyDesc },
-    'past-you': { icon: <History size={14} />, title: e.pastYouTitle, subtitle: e.pastYouDesc },
-    growth: { icon: <Brain size={14} />, title: e.intentGrowthTitle, subtitle: e.growthDesc },
+  const rowBySegment: Record<EchoSegment, { icon: ReactNode; title: string }> = {
+    'about-you': { icon: <UserRound size={14} />, title: e.aboutYouTitle },
+    continued: { icon: <Bookmark size={14} />, title: e.continuedTitle },
+    daily: { icon: <Sun size={14} />, title: e.dailyEchoTitle },
+    'past-you': { icon: <History size={14} />, title: e.pastYouTitle },
+    growth: { icon: <Brain size={14} />, title: e.intentGrowthTitle },
   };
 
   return (
@@ -37,7 +37,7 @@ export default function EchoPanel({ active, maximized, onMaximize }: EchoPanelPr
             const href = ECHO_SEGMENT_HREF[segment];
             const isActive = pathname === href || pathname.startsWith(`${href}/`);
             return (
-              <PanelNavRow key={segment} href={href} icon={row.icon} title={row.title} subtitle={row.subtitle} active={isActive} />
+              <PanelNavRow key={segment} href={href} icon={row.icon} title={row.title} active={isActive} />
             );
           })}
         </div>