@geminilight/mindos 0.6.16 → 0.6.18

package/app/app/globals.css

@@ -26,6 +26,7 @@
   --color-input: var(--input);
   --color-border: var(--border);
   --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
   --color-success: var(--success);
   --color-error: var(--error);
   --color-amber-foreground: var(--amber-foreground);
@@ -69,7 +70,8 @@ body {
   --muted-foreground: #685f52;
   --accent: #d9d3c6;
   --accent-foreground: #1c1a17;
-  --destructive: oklch(0.58 0.22 27);
+  --destructive: oklch(0.56 0.14 24);
+  --destructive-foreground: #ffffff;
   --border: rgba(28, 26, 23, 0.1);
   --input: rgba(28, 26, 23, 0.12);
   --ring: var(--amber);
@@ -106,7 +108,8 @@ body {
   --muted-foreground: #8a8275;
   --accent: #2e2b22;
   --accent-foreground: #e8e4dc;
-  --destructive: oklch(0.704 0.191 22.216);
+  --destructive: oklch(0.56 0.14 22);
+  --destructive-foreground: #ffffff;
   --border: rgba(232, 228, 220, 0.08);
   --input: rgba(232, 228, 220, 0.1);
   --ring: var(--amber);

package/app/components/ActivityBar.tsx

@@ -2,13 +2,13 @@
 
 import { useRef, useCallback, useState, useEffect } from 'react';
 import Link from 'next/link';
-import { FolderTree, Search, Settings, RefreshCw, Bot, Compass, HelpCircle, ChevronLeft, ChevronRight, Radio, History } from 'lucide-react';
+import { FolderTree, Search, Settings, RefreshCw, Bot, Compass, HelpCircle, ChevronLeft, ChevronRight, Radio } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 import { DOT_COLORS, getStatusLevel } from './SyncStatusBar';
 import type { SyncStatus } from './settings/SyncTab';
 import Logo from './Logo';
 
-export type PanelId = 'files' | 'search' | 'echo' | 'agents' | 'discover' | 'history';
+export type PanelId = 'files' | 'search' | 'echo' | 'agents' | 'discover';
 
 export const RAIL_WIDTH_COLLAPSED = 48;
 export const RAIL_WIDTH_EXPANDED = 180;
@@ -16,7 +16,9 @@ export const RAIL_WIDTH_EXPANDED = 180;
 interface ActivityBarProps {
   activePanel: PanelId | null;
   onPanelChange: (id: PanelId | null) => void;
+  onEchoClick?: () => void;
   onAgentsClick?: () => void;
+  onDiscoverClick?: () => void;
   syncStatus: SyncStatus | null;
   expanded: boolean;
   onExpandedChange: (expanded: boolean) => void;
@@ -77,7 +79,9 @@ function RailButton({ icon, label, shortcut, active = false, expanded, onClick,
 export default function ActivityBar({
   activePanel,
   onPanelChange,
+  onEchoClick,
   onAgentsClick,
+  onDiscoverClick,
   syncStatus,
   expanded,
   onExpandedChange,
@@ -188,7 +192,7 @@ export default function ActivityBar({
         <div className={`flex flex-col ${expanded ? 'px-1.5' : 'items-center'} gap-1 py-2`}>
           <RailButton icon={<FolderTree size={18} />} label={t.sidebar.files} active={activePanel === 'files'} expanded={expanded} onClick={() => toggle('files')} walkthroughId="files-panel" />
           <RailButton icon={<Search size={18} />} label={t.sidebar.searchTitle} shortcut="⌘K" active={activePanel === 'search'} expanded={expanded} onClick={() => toggle('search')} />
-          <RailButton icon={<Radio size={18} />} label={t.sidebar.echo} active={activePanel === 'echo'} expanded={expanded} onClick={() => toggle('echo')} walkthroughId="echo-panel" />
+          <RailButton icon={<Radio size={18} />} label={t.sidebar.echo} active={activePanel === 'echo'} expanded={expanded} onClick={() => onEchoClick ? debounced(onEchoClick) : toggle('echo')} walkthroughId="echo-panel" />
           <RailButton
             icon={<Bot size={18} />}
             label={t.sidebar.agents}
@@ -197,8 +201,7 @@ export default function ActivityBar({
             onClick={() => onAgentsClick ? debounced(onAgentsClick) : toggle('agents')}
             walkthroughId="agents-panel"
           />
-          <RailButton icon={<Compass size={18} />} label={t.sidebar.discover} active={activePanel === 'discover'} expanded={expanded} onClick={() => toggle('discover')} />
-          <RailButton icon={<History size={18} />} label={t.sidebar.history} active={activePanel === 'history'} expanded={expanded} onClick={() => toggle('history')} />
+          <RailButton icon={<Compass size={18} />} label={t.sidebar.discover} active={activePanel === 'discover'} expanded={expanded} onClick={() => onDiscoverClick ? debounced(onDiscoverClick) : toggle('discover')} />
         </div>
 
         {/* ── Spacer ── */}

package/app/components/CustomSelect.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
 import { ChevronDown, Check } from 'lucide-react';
 
 export interface SelectOption {
@@ -50,7 +51,7 @@ export default function CustomSelect({
 }: CustomSelectProps) {
   const [open, setOpen] = useState(false);
   const [highlightIdx, setHighlightIdx] = useState(-1);
-  const [flipUp, setFlipUp] = useState(false);
+  const [panelPos, setPanelPos] = useState<{ top: number; left: number; width: number; flipUp: boolean } | null>(null);
   const btnRef = useRef<HTMLButtonElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
 
@@ -122,20 +123,33 @@ export default function CustomSelect({
     if (el) el.scrollIntoView({ block: 'nearest' });
   }, [open, highlightIdx]);
 
-  // Initialize highlight + flip direction when opening
+  const calcPosition = useCallback(() => {
+    if (!btnRef.current) return;
+    const rect = btnRef.current.getBoundingClientRect();
+    const maxH = size === 'sm' ? 200 : 260;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    setPanelPos({
+      top: spaceBelow < maxH + 8 && spaceAbove > spaceBelow ? rect.top : rect.bottom,
+      left: rect.left,
+      width: rect.width,
+      flipUp: spaceBelow < maxH + 8 && spaceAbove > spaceBelow,
+    });
+  }, [size]);
+
+  // Initialize highlight + position when opening; reposition on scroll/resize
   useEffect(() => {
-    if (open) {
-      const idx = allOptions.findIndex(o => o.value === value);
-      setHighlightIdx(idx >= 0 ? idx : 0);
-      if (btnRef.current) {
-        const rect = btnRef.current.getBoundingClientRect();
-        const maxH = size === 'sm' ? 200 : 260;
-        const spaceBelow = window.innerHeight - rect.bottom;
-        const spaceAbove = rect.top;
-        setFlipUp(spaceBelow < maxH + 8 && spaceAbove > spaceBelow);
-      }
-    }
-  }, [open, allOptions, value, size]);
+    if (!open) { setPanelPos(null); return; }
+    const idx = allOptions.findIndex(o => o.value === value);
+    setHighlightIdx(idx >= 0 ? idx : 0);
+    calcPosition();
+    window.addEventListener('scroll', calcPosition, true);
+    window.addEventListener('resize', calcPosition);
+    return () => {
+      window.removeEventListener('scroll', calcPosition, true);
+      window.removeEventListener('resize', calcPosition);
+    };
+  }, [open, allOptions, value, calcPosition]);
 
   const isSm = size === 'sm';
 
@@ -147,9 +161,9 @@ export default function CustomSelect({
     ? 'absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none'
     : 'absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none';
 
-  const listCls = isSm
-    ? `absolute z-50 min-w-full max-h-[200px] overflow-y-auto rounded-md border border-border bg-card shadow-lg py-0.5 ${flipUp ? 'bottom-full mb-1' : 'top-full mt-1'}`
-    : `absolute z-50 min-w-full max-h-[260px] overflow-y-auto rounded-lg border border-border bg-card shadow-lg py-1 ${flipUp ? 'bottom-full mb-1' : 'top-full mt-1'}`;
+  const listBaseCls = isSm
+    ? 'fixed z-[9999] overflow-y-auto rounded-md border border-border bg-card shadow-lg py-0.5'
+    : 'fixed z-[9999] overflow-y-auto rounded-lg border border-border bg-card shadow-lg py-1';
 
   const itemBaseCls = isSm
     ? 'w-full flex items-center gap-1.5 px-2 py-1 text-2xs text-left transition-colors cursor-pointer'
@@ -184,6 +198,38 @@ export default function CustomSelect({
     );
   }
 
+  const listPortal = open && panelPos && createPortal(
+    <div
+      ref={listRef}
+      className={listBaseCls}
+      role="listbox"
+      style={{
+        left: panelPos.left,
+        minWidth: panelPos.width,
+        maxHeight: isSm ? 200 : 260,
+        ...(panelPos.flipUp
+          ? { bottom: window.innerHeight - panelPos.top + 4 }
+          : { top: panelPos.top + 4 }),
+      }}
+    >
+      {options.map((item, idx) => {
+        if (isGroup(item)) {
+          return (
+            <div key={item.label}>
+              {idx > 0 && <div className="my-0.5 border-t border-border/50" />}
+              <div className={`py-1 text-2xs font-medium text-muted-foreground uppercase tracking-wider ${isSm ? 'px-2' : 'px-3'}`}>
+                {item.label}
+              </div>
+              {item.options.map(renderOption)}
+            </div>
+          );
+        }
+        return renderOption(item);
+      })}
+    </div>,
+    document.body,
+  );
+
   return (
     <div className="relative">
       <button
@@ -204,25 +250,7 @@ export default function CustomSelect({
           className={`${chevronCls} transition-transform duration-150 ${open ? 'rotate-180' : ''}`}
         />
       </button>
-
-      {open && (
-        <div ref={listRef} className={listCls} role="listbox">
-          {options.map((item, idx) => {
-            if (isGroup(item)) {
-              return (
-                <div key={item.label}>
-                  {idx > 0 && <div className="my-0.5 border-t border-border/50" />}
-                  <div className={`py-1 text-2xs font-medium text-muted-foreground uppercase tracking-wider ${isSm ? 'px-2' : 'px-3'}`}>
-                    {item.label}
-                  </div>
-                  {item.options.map(renderOption)}
-                </div>
-              );
-            }
-            return renderOption(item);
-          })}
-        </div>
-      )}
+      {listPortal}
     </div>
   );
 }

package/app/components/DirPicker.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { Folder, ChevronDown, ChevronRight, Check } from 'lucide-react';
 import { stripEmoji } from '@/lib/utils';
 
@@ -18,27 +19,44 @@ interface DirPickerProps {
 const PANEL_MAX_H = 200;
 
 /**
- * Hierarchical directory picker — always renders as a single-line trigger button.
- * When expanded, the tree browser floats as an overlay (absolute) so it never
- * pushes sibling content down.
+ * Hierarchical directory picker — trigger button stays in layout flow;
+ * the expanded panel renders via portal with position:fixed so it escapes
+ * any ancestor overflow:hidden / overflow:auto containers.
  */
 export default function DirPicker({ dirPaths, value, onChange, rootLabel = 'Root' }: DirPickerProps) {
   const [expanded, setExpanded] = useState(false);
   const [browsing, setBrowsing] = useState(value);
-  const [flipUp, setFlipUp] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
+  const [panelPos, setPanelPos] = useState<{ top: number; left: number; width: number; flipUp: boolean } | null>(null);
   const btnRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => { setBrowsing(value); }, [value]);
 
-  // Decide flip direction when opening
-  useEffect(() => {
-    if (!expanded || !btnRef.current) return;
+  const calcPosition = useCallback(() => {
+    if (!btnRef.current) return;
     const rect = btnRef.current.getBoundingClientRect();
     const spaceBelow = window.innerHeight - rect.bottom;
     const spaceAbove = rect.top;
-    setFlipUp(spaceBelow < PANEL_MAX_H + 8 && spaceAbove > spaceBelow);
-  }, [expanded]);
+    const flip = spaceBelow < PANEL_MAX_H + 8 && spaceAbove > spaceBelow;
+    setPanelPos({
+      top: flip ? rect.top : rect.bottom,
+      left: rect.left,
+      width: rect.width,
+      flipUp: flip,
+    });
+  }, []);
+
+  // Recalculate position on open, scroll, and resize
+  useEffect(() => {
+    if (!expanded) { setPanelPos(null); return; }
+    calcPosition();
+    window.addEventListener('scroll', calcPosition, true);
+    window.addEventListener('resize', calcPosition);
+    return () => {
+      window.removeEventListener('scroll', calcPosition, true);
+      window.removeEventListener('resize', calcPosition);
+    };
+  }, [expanded, calcPosition]);
 
   const collapse = useCallback(() => setExpanded(false), []);
 
@@ -48,9 +66,12 @@ export default function DirPicker({ dirPaths, value, onChange, rootLabel = 'Root
       if (e.key === 'Escape') { e.preventDefault(); collapse(); }
     };
     const handleClick = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        collapse();
-      }
+      const target = e.target as Node;
+      if (
+        btnRef.current?.contains(target) ||
+        panelRef.current?.contains(target)
+      ) return;
+      collapse();
     };
     document.addEventListener('keydown', handleKey);
     document.addEventListener('mousedown', handleClick);
@@ -87,9 +108,82 @@ export default function DirPicker({ dirPaths, value, onChange, rootLabel = 'Root
     ? value.split('/').map(s => stripEmoji(s)).join(' / ')
     : '/ ' + rootLabel;
 
+  const panel = expanded && panelPos && createPortal(
+    <div
+      ref={panelRef}
+      className="fixed z-[9999] rounded-lg border border-[var(--amber)] bg-card shadow-lg overflow-hidden flex flex-col"
+      style={{
+        left: panelPos.left,
+        width: panelPos.width,
+        maxHeight: PANEL_MAX_H,
+        ...(panelPos.flipUp
+          ? { bottom: window.innerHeight - panelPos.top + 4 }
+          : { top: panelPos.top + 4 }),
+      }}
+    >
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-0.5 px-3 py-1.5 bg-muted/30 border-b border-border overflow-x-auto text-xs shrink-0">
+        <button
+          type="button"
+          onClick={() => navigateTo(-1)}
+          className={`shrink-0 px-1.5 py-0.5 rounded transition-colors ${
+            browsing === '' ? 'text-[var(--amber)] font-medium' : 'text-muted-foreground hover:text-foreground'
+          }`}
+        >
+          / {rootLabel}
+        </button>
+        {segments.map((seg, i) => (
+          <span key={i} className="flex items-center gap-0.5 shrink-0">
+            <ChevronRight size={10} className="text-muted-foreground/50" />
+            <button
+              type="button"
+              onClick={() => navigateTo(i)}
+              className={`px-1.5 py-0.5 rounded transition-colors truncate max-w-[100px] ${
+                i === segments.length - 1 ? 'text-[var(--amber)] font-medium' : 'text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              {seg}
+            </button>
+          </span>
+        ))}
+      </div>
+      {/* Child directories */}
+      {children.length > 0 ? (
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          {children.map(childPath => {
+            const childName = childPath.split('/').pop() || childPath;
+            const hasChildren = dirPaths.some(p => p.startsWith(childPath + '/'));
+            return (
+              <button
+                key={childPath}
+                type="button"
+                onClick={() => drillInto(childPath)}
+                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-foreground hover:bg-muted/60 transition-colors"
+              >
+                <Folder size={12} className="shrink-0 text-[var(--amber)]" />
+                <span className="flex-1 text-left truncate">{childName}</span>
+                {hasChildren && <ChevronRight size={11} className="shrink-0 text-muted-foreground/40" />}
+              </button>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="px-3 py-2 text-xs text-muted-foreground/50 text-center">—</div>
+      )}
+      {/* Confirm & collapse */}
+      <button
+        type="button"
+        onClick={collapse}
+        className="w-full py-1.5 flex items-center justify-center gap-1 text-xs font-medium text-[var(--amber)] border-t border-border hover:bg-muted/30 transition-colors shrink-0"
+      >
+        <Check size={12} />
+      </button>
+    </div>,
+    document.body,
+  );
+
   return (
-    <div ref={containerRef} className="relative">
-      {/* Trigger — always in document flow */}
+    <>
       <button
         ref={btnRef}
         type="button"
@@ -107,71 +201,7 @@ export default function DirPicker({ dirPaths, value, onChange, rootLabel = 'Root
           className={`shrink-0 text-muted-foreground transition-transform duration-150 ${expanded ? 'rotate-180' : ''}`}
         />
       </button>
-
-      {/* Floating panel — absolute, never pushes content */}
-      {expanded && (
-        <div className={`absolute z-50 left-0 right-0 rounded-lg border border-[var(--amber)] bg-card shadow-lg overflow-hidden max-h-[200px] flex flex-col ${
-          flipUp ? 'bottom-full mb-1' : 'top-full mt-1'
-        }`}>
-          {/* Breadcrumb */}
-          <div className="flex items-center gap-0.5 px-3 py-1.5 bg-muted/30 border-b border-border overflow-x-auto text-xs shrink-0">
-            <button
-              type="button"
-              onClick={() => navigateTo(-1)}
-              className={`shrink-0 px-1.5 py-0.5 rounded transition-colors ${
-                browsing === '' ? 'text-[var(--amber)] font-medium' : 'text-muted-foreground hover:text-foreground'
-              }`}
-            >
-              / {rootLabel}
-            </button>
-            {segments.map((seg, i) => (
-              <span key={i} className="flex items-center gap-0.5 shrink-0">
-                <ChevronRight size={10} className="text-muted-foreground/50" />
-                <button
-                  type="button"
-                  onClick={() => navigateTo(i)}
-                  className={`px-1.5 py-0.5 rounded transition-colors truncate max-w-[100px] ${
-                    i === segments.length - 1 ? 'text-[var(--amber)] font-medium' : 'text-muted-foreground hover:text-foreground'
-                  }`}
-                >
-                  {seg}
-                </button>
-              </span>
-            ))}
-          </div>
-          {/* Child directories */}
-          {children.length > 0 ? (
-            <div className="flex-1 min-h-0 overflow-y-auto">
-              {children.map(childPath => {
-                const childName = childPath.split('/').pop() || childPath;
-                const hasChildren = dirPaths.some(p => p.startsWith(childPath + '/'));
-                return (
-                  <button
-                    key={childPath}
-                    type="button"
-                    onClick={() => drillInto(childPath)}
-                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-foreground hover:bg-muted/60 transition-colors"
-                  >
-                    <Folder size={12} className="shrink-0 text-[var(--amber)]" />
-                    <span className="flex-1 text-left truncate">{childName}</span>
-                    {hasChildren && <ChevronRight size={11} className="shrink-0 text-muted-foreground/40" />}
-                  </button>
-                );
-              })}
-            </div>
-          ) : (
-            <div className="px-3 py-2 text-xs text-muted-foreground/50 text-center">—</div>
-          )}
-          {/* Confirm & collapse */}
-          <button
-            type="button"
-            onClick={collapse}
-            className="w-full py-1.5 flex items-center justify-center gap-1 text-xs font-medium text-[var(--amber)] border-t border-border hover:bg-muted/30 transition-colors shrink-0"
-          >
-            <Check size={12} />
-          </button>
-        </div>
-      )}
-    </div>
+      {panel}
+    </>
   );
 }

package/app/components/ImportModal.tsx

@@ -73,11 +73,18 @@ export default function ImportModal({ open, onClose, defaultSpace, initialFiles,
   useEffect(() => {
     if (!open) return;
     const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') { e.stopPropagation(); handleClose(); }
+      if (e.key !== 'Escape') return;
+      if (showDiscard) {
+        e.stopPropagation();
+        setShowDiscard(false);
+        return;
+      }
+      e.stopPropagation();
+      handleClose();
     };
     window.addEventListener('keydown', handler, true);
     return () => window.removeEventListener('keydown', handler, true);
-  }, [open, handleClose]);
+  }, [open, handleClose, showDiscard]);
 
   const checkConflicts = useCallback(async (fileNames: string[], space: string) => {
     try {
@@ -197,15 +204,6 @@ export default function ImportModal({ open, onClose, defaultSpace, initialFiles,
 
   return (
     <>
-      <ConfirmDialog
-        open={showDiscard}
-        title={t.fileImport.discardTitle}
-        message={t.fileImport.discardMessage(im.files.length)}
-        confirmLabel={t.fileImport.discardConfirm}
-        cancelLabel={t.fileImport.discardCancel}
-        onConfirm={doClose}
-        onCancel={() => setShowDiscard(false)}
-      />
       <div
         ref={overlayRef}
         className={`fixed inset-0 z-50 modal-backdrop flex items-center justify-center p-4 transition-opacity duration-200 ${closing ? 'opacity-0' : 'opacity-100'}`}
@@ -507,6 +505,15 @@ export default function ImportModal({ open, onClose, defaultSpace, initialFiles,
           </div>
         </div>
       </div>
+      <ConfirmDialog
+        open={showDiscard}
+        title={t.fileImport.discardTitle}
+        message={t.fileImport.discardMessage(im.files.length)}
+        confirmLabel={t.fileImport.discardConfirm}
+        cancelLabel={t.fileImport.discardCancel}
+        onConfirm={doClose}
+        onCancel={() => setShowDiscard(false)}
+      />
     </>
   );
 }

package/app/components/JsonView.tsx

@@ -16,11 +16,8 @@ export default function JsonView({ content }: JsonViewProps) {
   }, [content]);
 
   return (
-    <pre
-      className="rounded-xl border border-border bg-card px-4 py-3 overflow-x-auto text-sm leading-relaxed font-display"
-      suppressHydrationWarning
-    >
-      <code>{pretty}</code>
+    <pre className="rounded-xl border border-border bg-card px-4 py-3 overflow-x-auto text-sm leading-relaxed font-display">
+      <code suppressHydrationWarning>{pretty}</code>
     </pre>
   );
 }

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;

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>

package/app/components/renderers/summary/SummaryRenderer.tsx

@@ -207,7 +207,7 @@ Be specific. Reference actual content from the files. Keep the total response un
 
       {/* error */}
       {error && (
-        <div className="font-display" style={{ padding: '10px 14px', borderRadius: 8, background: 'rgba(200,60,60,0.1)', border: '1px solid rgba(200,60,60,0.3)', color: '#c83c3c', fontSize: 12, marginBottom: '1rem' }}>
+        <div className="font-display" style={{ padding: '10px 14px', borderRadius: 8, background: 'color-mix(in srgb, var(--error) 10%, transparent)', border: '1px solid color-mix(in srgb, var(--error) 30%, transparent)', color: 'var(--error)', fontSize: 12, marginBottom: '1rem' }}>
           {error}
         </div>
       )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geminilight/mindos",
-  "version": "0.6.16",
+  "version": "0.6.18",
   "description": "MindOS — Human-Agent Collaborative Mind System. Local-first knowledge base that syncs your mind to all AI Agents via MCP.",
   "keywords": [
     "mindos",