@geminilight/mindos 0.6.7 → 0.6.12

package/app/components/ask/MessageList.tsx

@@ -1,14 +1,35 @@
 'use client';
 
 import { useRef, useEffect } from 'react';
-import { Sparkles, Loader2, AlertCircle, Wrench } from 'lucide-react';
+import { Sparkles, Loader2, AlertCircle, Wrench, WifiOff, Zap } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import type { Message } from '@/lib/types';
+import { stripThinkingTags } from '@/hooks/useAiOrganize';
 import ToolCallBlock from './ToolCallBlock';
 import ThinkingBlock from './ThinkingBlock';
 
+const SKILL_PREFIX_RE = /^Use the skill ([^:]+):\s*/;
+
+function UserMessageContent({ content, skillName }: { content: string; skillName?: string }) {
+  const resolved = skillName ?? content.match(SKILL_PREFIX_RE)?.[1];
+  if (!resolved) return <>{content}</>;
+  const prefixMatch = content.match(SKILL_PREFIX_RE);
+  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">
+        <Zap size={10} className="shrink-0" />
+        {resolved}
+      </span>
+      {rest}
+    </>
+  );
+}
+
 function AssistantMessage({ content, isStreaming }: { content: string; isStreaming: boolean }) {
+  const cleaned = stripThinkingTags(content);
+  if (!cleaned && !isStreaming) return null;
   return (
     <div className="prose prose-sm prose-panel dark:prose-invert max-w-none text-foreground
       prose-p:my-1 prose-p:leading-relaxed
@@ -22,7 +43,7 @@ function AssistantMessage({ content, isStreaming }: { content: string; isStreami
       prose-strong:text-foreground prose-strong:font-semibold
       prose-table:text-xs prose-th:py-1 prose-td:py-1
     ">
-      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{cleaned}</ReactMarkdown>
       {isStreaming && (
         <span className="inline-block w-1.5 h-3.5 bg-amber-400 ml-0.5 align-middle animate-pulse rounded-sm" />
       )}
@@ -88,7 +109,7 @@ function StepCounter({ parts }: { parts: Message['parts'] }) {
 interface MessageListProps {
   messages: Message[];
   isLoading: boolean;
-  loadingPhase: 'connecting' | 'thinking' | 'streaming';
+  loadingPhase: 'connecting' | 'thinking' | 'streaming' | 'reconnecting';
   emptyPrompt: string;
   suggestions: readonly string[];
   onSuggestionClick: (text: string) => void;
@@ -96,6 +117,7 @@ interface MessageListProps {
     connecting: string;
     thinking: string;
     generating: string;
+    reconnecting?: string;
   };
 }
 
@@ -146,7 +168,7 @@ export default function MessageList({
             <div
               className="max-w-[85%] px-3 py-2 rounded-xl rounded-br-sm text-sm leading-relaxed whitespace-pre-wrap bg-[var(--amber)] text-[var(--amber-foreground)]"
             >
-              {m.content}
+              <UserMessageContent content={m.content} skillName={m.skillName} />
             </div>
           ) : m.content.startsWith('__error__') ? (
             <div className="max-w-[85%] px-3 py-2.5 rounded-xl rounded-bl-sm border border-error/20 bg-error/8 text-sm">
@@ -157,7 +179,7 @@ export default function MessageList({
             </div>
           ) : (
             <div className="max-w-[85%] px-3 py-2 rounded-xl rounded-bl-sm bg-muted text-foreground text-sm">
-              {(m.parts && m.parts.length > 0) || m.content ? (
+              {(m.parts && m.parts.length > 0) || stripThinkingTags(m.content) ? (
                 <>
                   <AssistantMessageWithParts message={m} isStreaming={isLoading && i === messages.length - 1} />
                   {isLoading && i === messages.length - 1 && (
@@ -166,13 +188,19 @@ export default function MessageList({
                 </>
               ) : isLoading && i === messages.length - 1 ? (
                 <div className="flex items-center gap-2 py-1">
-                  <Loader2 size={14} className="animate-spin text-[var(--amber)]" />
+                  {loadingPhase === 'reconnecting' ? (
+                    <WifiOff size={14} className="text-[var(--amber)] animate-pulse" />
+                  ) : (
+                    <Loader2 size={14} className="animate-spin text-[var(--amber)]" />
+                  )}
                   <span className="text-xs text-muted-foreground animate-pulse">
-                    {loadingPhase === 'connecting'
-                      ? labels.connecting
-                      : loadingPhase === 'thinking'
-                        ? labels.thinking
-                        : labels.generating}
+                    {loadingPhase === 'reconnecting'
+                      ? (labels.reconnecting ?? 'Reconnecting...')
+                      : loadingPhase === 'connecting'
+                        ? labels.connecting
+                        : loadingPhase === 'thinking'
+                          ? labels.thinking
+                          : labels.generating}
                   </span>
                 </div>
               ) : null}

package/app/components/ask/SlashCommandPopover.tsx

@@ -3,14 +3,16 @@
 import { useEffect, useRef } from 'react';
 import { Zap } from 'lucide-react';
 import type { SlashItem } from '@/hooks/useSlashCommand';
+import HighlightMatch from './HighlightMatch';
 
 interface SlashCommandPopoverProps {
   results: SlashItem[];
   selectedIndex: number;
+  query?: string;
   onSelect: (item: SlashItem) => void;
 }
 
-export default function SlashCommandPopover({ results, selectedIndex, onSelect }: SlashCommandPopoverProps) {
+export default function SlashCommandPopover({ results, selectedIndex, query, onSelect }: SlashCommandPopoverProps) {
   const listRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -45,7 +47,7 @@ export default function SlashCommandPopover({ results, selectedIndex, onSelect }
             }`}
           >
             <Zap size={13} className="text-[var(--amber)] shrink-0" />
-            <span className="text-sm font-medium shrink-0">/{item.name}</span>
+            <span className="text-sm font-medium shrink-0">/<HighlightMatch text={item.name} query={query} /></span>
             {item.description && (
               <span className="text-2xs text-muted-foreground/50 truncate min-w-0 flex-1">{item.description}</span>
             )}

package/app/components/changes/ChangesBanner.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { usePathname } from 'next/navigation';
 import { History, X } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
@@ -14,6 +14,8 @@ interface ChangeSummaryPayload {
 export default function ChangesBanner() {
   const [unreadCount, setUnreadCount] = useState(0);
   const [dismissedAtCount, setDismissedAtCount] = useState<number | null>(null);
+  const [autoDismissed, setAutoDismissed] = useState(false);
+  const prevUnreadRef = useRef(0);
   const [isRendered, setIsRendered] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
   const pathname = usePathname();
@@ -37,12 +39,28 @@ export default function ChangesBanner() {
     };
   }, []);
 
+  // Re-show banner when new changes arrive after auto-dismiss
+  useEffect(() => {
+    if (unreadCount > prevUnreadRef.current && autoDismissed) {
+      setAutoDismissed(false);
+    }
+    prevUnreadRef.current = unreadCount;
+  }, [unreadCount, autoDismissed]);
+
   const shouldShow = useMemo(() => {
     if (unreadCount <= 0) return false;
     if (pathname?.startsWith('/changes')) return false;
     if (dismissedAtCount !== null && unreadCount <= dismissedAtCount) return false;
+    if (autoDismissed) return false;
     return true;
-  }, [dismissedAtCount, pathname, unreadCount]);
+  }, [dismissedAtCount, pathname, unreadCount, autoDismissed]);
+
+  // Auto-dismiss after 10 seconds
+  useEffect(() => {
+    if (!shouldShow) return;
+    const timer = setTimeout(() => setAutoDismissed(true), 10_000);
+    return () => clearTimeout(timer);
+  }, [shouldShow]);
 
   useEffect(() => {
     const durationMs = 160;

package/app/components/changes/ChangesContentPage.tsx

@@ -7,6 +7,14 @@ import { apiFetch } from '@/lib/api';
 import { useLocale } from '@/lib/LocaleContext';
 import { collapseDiffContext, buildLineDiff } from './line-diff';
 
+/** Semantic color for operation type badges */
+function opColorClass(op: string): string {
+  if (op.startsWith('create') || op === 'import_file') return 'text-success';
+  if (op.startsWith('delete')) return 'text-error';
+  if (op.startsWith('rename') || op.startsWith('move')) return 'text-muted-foreground';
+  return ''; // update_lines, update_section — default foreground
+}
+
 interface ChangeEvent {
   id: string;
   ts: string;
@@ -225,7 +233,7 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
                         >
                           {event.path}
                         </span>
-                        <span>{event.op}</span>
+                        <span className={opColorClass(event.op)}>{event.op}</span>
                         <span>·</span>
                         <span>{sourceLabel(event.source)}</span>
                         <span>·</span>
@@ -234,7 +242,7 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
                     </div>
                     <Link
                       href={`/view/${event.path.split('/').map(encodeURIComponent).join('/')}`}
-                      className="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium bg-[var(--amber-dim)] text-[var(--amber)] focus-visible:ring-2 focus-visible:ring-ring hover:opacity-90"
+                      className="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium bg-[var(--amber-dim)] text-[var(--amber-text)] focus-visible:ring-2 focus-visible:ring-ring hover:opacity-90"
                       onClick={(e) => e.stopPropagation()}
                     >
                       {t.changes.open}

package/app/components/echo/EchoHero.tsx

@@ -27,7 +27,7 @@ export function EchoHero({
         aria-hidden
       />
       <div className="relative pl-4 sm:pl-5">
-        <p className="mb-4 font-sans text-2xs font-semibold uppercase tracking-[0.2em] text-[var(--amber)]">
+        <p className="mb-4 font-sans text-2xs font-semibold uppercase tracking-[0.2em] text-[var(--amber-text)]">
           {heroKicker}
         </p>
         <h1 id={titleId} className="font-display text-2xl font-semibold tracking-tight text-foreground md:text-3xl">

package/app/components/echo/EchoInsightCollapsible.tsx

@@ -138,7 +138,7 @@ export function EchoInsightCollapsible({
           open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
         )}
       >
-        <div className="overflow-hidden">
+        <div className="overflow-hidden" {...(!open && { inert: true } as React.HTMLAttributes<HTMLDivElement>)}>
           <div className="border-t border-border/60 px-5 pb-5 pt-4">
             <p className="font-sans text-sm leading-relaxed text-muted-foreground">{hint}</p>
             <div className="mt-4 flex flex-wrap items-center gap-2">

package/app/components/echo/EchoPageSections.tsx

@@ -43,7 +43,7 @@ export function EchoFactSnapshot({
             <p className="mt-2 font-sans font-medium text-foreground">{emptyTitle}</p>
           </div>
         </div>
-        <span className="font-sans text-2xs font-medium uppercase tracking-wide text-[var(--amber)] sm:mt-0.5 sm:shrink-0 rounded-md bg-[var(--amber-dim)] px-2 py-1">
+        <span className="font-sans text-2xs font-medium uppercase tracking-wide text-[var(--amber-text)] sm:mt-0.5 sm:shrink-0 rounded-md bg-[var(--amber-dim)] px-2 py-1">
           {snapshotBadge}
         </span>
       </div>

package/app/components/explore/UseCaseCard.tsx

@@ -30,7 +30,7 @@ export default function UseCaseCard({ icon, title, description, prompt, tryItLab
       </div>
       <button
         onClick={() => openAskModal(prompt, 'user')}
-        className="self-start inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-150 hover:opacity-80 cursor-pointer bg-[var(--amber-dim)] text-[var(--amber)]"
+        className="self-start inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-150 hover:opacity-80 cursor-pointer bg-[var(--amber-dim)] text-[var(--amber-text)]"
       >
         {tryItLabel} →
       </button>

package/app/components/panels/DiscoverPanel.tsx

@@ -35,7 +35,7 @@ function UseCaseRow({
       <span className="text-xs text-foreground truncate flex-1">{title}</span>
       <button
         onClick={() => openAskModal(prompt, 'user')}
-        className="opacity-0 group-hover:opacity-100 text-2xs px-2 py-0.5 rounded text-[var(--amber)] bg-[var(--amber-dim)] hover:opacity-80 transition-all duration-150 shrink-0"
+        className="opacity-0 group-hover:opacity-100 text-2xs px-2 py-0.5 rounded text-[var(--amber-text)] bg-[var(--amber-dim)] hover:opacity-80 transition-all duration-150 shrink-0"
       >
         {tryLabel}
       </button>
@@ -154,31 +154,35 @@ export default function DiscoverPanel({ active, maximized, onMaximize }: Discove
             </span>
             <span className="text-2xs text-muted-foreground tabular-nums">{enabledCount}/{renderers.length}</span>
           </button>
-          {showPlugins && renderers.map(r => {
-            const enabled = isRendererEnabled(r.id);
-            const fileExists = r.entryPath ? existingFiles.has(r.entryPath) : false;
-            const canOpen = enabled && r.entryPath && fileExists;
-            return (
-              <div
-                key={r.id}
-                className={`flex items-center gap-2 px-4 py-1.5 mx-1 rounded-sm transition-colors ${canOpen ? 'cursor-pointer hover:bg-muted/50' : ''} ${!enabled ? 'opacity-50' : ''}`}
-                onClick={canOpen ? () => handleOpenPlugin(r.entryPath!) : undefined}
-                role={canOpen ? 'link' : undefined}
-                tabIndex={canOpen ? 0 : undefined}
-                onKeyDown={canOpen ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleOpenPlugin(r.entryPath!); } } : undefined}
-              >
-                <span className="text-sm shrink-0" suppressHydrationWarning>{r.icon}</span>
-                <span className="text-xs text-foreground truncate flex-1">{r.name}</span>
-                {r.core ? (
-                  <span className="text-2xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground shrink-0">{p.core}</span>
-                ) : (
-                  <div onClick={e => e.stopPropagation()}>
-                    <Toggle checked={enabled} onChange={v => handleToggle(r.id, v)} size="sm" />
+          <div className={`grid transition-[grid-template-rows] duration-200 ease-out ${showPlugins ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'}`}>
+            <div className="overflow-hidden" {...(!showPlugins && { inert: true } as React.HTMLAttributes<HTMLDivElement>)}>
+              {renderers.map(r => {
+                const enabled = isRendererEnabled(r.id);
+                const fileExists = r.entryPath ? existingFiles.has(r.entryPath) : false;
+                const canOpen = enabled && r.entryPath && fileExists;
+                return (
+                  <div
+                    key={r.id}
+                    className={`flex items-center gap-2 px-4 py-1.5 mx-1 rounded-sm transition-colors ${canOpen ? 'cursor-pointer hover:bg-muted/50' : ''} ${!enabled ? 'opacity-50' : ''}`}
+                    onClick={canOpen ? () => handleOpenPlugin(r.entryPath!) : undefined}
+                    role={canOpen ? 'link' : undefined}
+                    tabIndex={canOpen ? 0 : undefined}
+                    onKeyDown={canOpen ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleOpenPlugin(r.entryPath!); } } : undefined}
+                  >
+                    <span className="text-sm shrink-0" suppressHydrationWarning>{r.icon}</span>
+                    <span className="text-xs text-foreground truncate flex-1">{r.name}</span>
+                    {r.core ? (
+                      <span className="text-2xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground shrink-0">{p.core}</span>
+                    ) : (
+                      <div onClick={e => e.stopPropagation()}>
+                        <Toggle checked={enabled} onChange={v => handleToggle(r.id, v)} size="sm" />
+                      </div>
+                    )}
                   </div>
-                )}
-              </div>
-            );
-          })}
+                );
+              })}
+            </div>
+          </div>
         </div>
 
         <div className="mx-4 border-t border-border" />

package/app/components/panels/ImportHistoryPanel.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  ChevronDown, FilePlus, FileEdit, ExternalLink, Trash2, FileInput,
+} from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+import { encodePath } from '@/lib/utils';
+import PanelHeader from './PanelHeader';
+import {
+  loadHistory, clearHistory,
+  type OrganizeHistoryEntry,
+} from '@/lib/organize-history';
+
+interface ImportHistoryPanelProps {
+  active: boolean;
+  maximized?: boolean;
+  onMaximize?: () => void;
+  /** Incremented externally to trigger a refresh */
+  refreshToken?: number;
+}
+
+function formatTime(ts: number): string {
+  return new Date(ts).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+}
+
+function groupByDate(entries: OrganizeHistoryEntry[]): Map<string, OrganizeHistoryEntry[]> {
+  const groups = new Map<string, OrganizeHistoryEntry[]>();
+  const today = new Date();
+  const todayStr = today.toDateString();
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  const yesterdayStr = yesterday.toDateString();
+
+  for (const entry of entries) {
+    const d = new Date(entry.timestamp).toDateString();
+    let label: string;
+    if (d === todayStr) label = 'Today';
+    else if (d === yesterdayStr) label = 'Yesterday';
+    else label = new Date(entry.timestamp).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+
+    const list = groups.get(label) ?? [];
+    list.push(entry);
+    groups.set(label, list);
+  }
+  return groups;
+}
+
+export default function ImportHistoryPanel({ active, maximized, onMaximize, refreshToken }: ImportHistoryPanelProps) {
+  const { t } = useLocale();
+  const router = useRouter();
+  const [entries, setEntries] = useState<OrganizeHistoryEntry[]>([]);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const hi = (t as unknown as Record<string, Record<string, unknown>>).importHistory ?? {};
+
+  const refresh = useCallback(() => {
+    setEntries(loadHistory());
+  }, []);
+
+  useEffect(() => {
+    if (active) refresh();
+  }, [active, refresh, refreshToken]);
+
+  useEffect(() => {
+    const handler = () => refresh();
+    window.addEventListener('mindos:organize-history-update', handler);
+    return () => window.removeEventListener('mindos:organize-history-update', handler);
+  }, [refresh]);
+
+  const handleClearAll = useCallback(() => {
+    clearHistory();
+    setEntries([]);
+  }, []);
+
+  const handleViewFile = useCallback((path: string) => {
+    router.push(`/view/${encodePath(path)}`);
+  }, [router]);
+
+  const groups = groupByDate(entries);
+
+  return (
+    <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
+      <PanelHeader
+        title={hi.title as string ?? 'Import History'}
+        maximized={maximized}
+        onMaximize={onMaximize}
+      >
+        {entries.length > 0 && (
+          <button
+            onClick={handleClearAll}
+            className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+            title={hi.clearAll as string ?? 'Clear history'}
+          >
+            <Trash2 size={13} />
+          </button>
+        )}
+      </PanelHeader>
+
+      <div className="flex-1 overflow-y-auto min-h-0 px-2 py-2">
+        {entries.length === 0 ? (
+          <div className="flex flex-col items-center justify-center gap-2 py-12 text-center">
+            <FileInput size={28} className="text-muted-foreground/30" />
+            <p className="text-xs text-muted-foreground">
+              {hi.emptyTitle as string ?? 'No import history yet'}
+            </p>
+            <p className="text-2xs text-muted-foreground/60 max-w-[200px]">
+              {hi.emptyDesc as string ?? 'AI organize results will appear here'}
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {Array.from(groups.entries()).map(([label, items]) => (
+              <div key={label}>
+                <p className="text-2xs font-medium text-muted-foreground/60 uppercase tracking-wider px-2 mb-1.5">{label}</p>
+                <div className="space-y-1">
+                  {items.map(entry => {
+                    const isExpanded = expandedId === entry.id;
+                    const createdCount = entry.files.filter(f => f.action === 'create' && f.ok && !f.undone).length;
+                    const updatedCount = entry.files.filter(f => f.action === 'update' && f.ok && !f.undone).length;
+                    const undoneCount = entry.files.filter(f => f.undone).length;
+                    const sourceLabel = entry.sourceFiles.length === 1
+                      ? entry.sourceFiles[0]
+                      : `${entry.sourceFiles.length} files`;
+
+                    return (
+                      <div key={entry.id} className="rounded-lg border border-border/50 overflow-hidden">
+                        <button
+                          type="button"
+                          onClick={() => setExpandedId(isExpanded ? null : entry.id)}
+                          className="w-full flex items-center gap-2 px-3 py-2.5 text-left hover:bg-muted/30 transition-colors"
+                        >
+                          <FileInput size={14} className="text-[var(--amber)] shrink-0" />
+                          <div className="flex-1 min-w-0">
+                            <p className="text-xs text-foreground truncate">{sourceLabel}</p>
+                            <p className="text-2xs text-muted-foreground/60">
+                              {formatTime(entry.timestamp)}
+                              {createdCount > 0 && ` · ${createdCount} created`}
+                              {updatedCount > 0 && ` · ${updatedCount} updated`}
+                              {undoneCount > 0 && ` · ${undoneCount} undone`}
+                            </p>
+                          </div>
+                          <ChevronDown
+                            size={12}
+                            className={`text-muted-foreground/40 shrink-0 transition-transform duration-150 ${isExpanded ? 'rotate-180' : ''}`}
+                          />
+                        </button>
+
+                        {isExpanded && (
+                          <div className="border-t border-border/30 px-2 py-1.5 space-y-0.5">
+                            {entry.files.map((f, idx) => {
+                              const fileName = f.path.split('/').pop() ?? f.path;
+                              return (
+                                <div
+                                  key={`${f.path}-${idx}`}
+                                  className={`flex items-center gap-2 px-2 py-1.5 rounded text-xs ${f.undone ? 'opacity-40' : ''}`}
+                                >
+                                  {f.action === 'create' ? (
+                                    <FilePlus size={12} className="text-success shrink-0" />
+                                  ) : (
+                                    <FileEdit size={12} className="text-[var(--amber)] shrink-0" />
+                                  )}
+                                  <span className={`truncate flex-1 ${f.undone ? 'line-through text-muted-foreground' : 'text-foreground'}`}>
+                                    {fileName}
+                                  </span>
+                                  {f.undone && (
+                                    <span className="text-2xs text-muted-foreground shrink-0">undone</span>
+                                  )}
+                                  {f.ok && !f.undone && (
+                                    <button
+                                      type="button"
+                                      onClick={(e) => { e.stopPropagation(); handleViewFile(f.path); }}
+                                      className="text-muted-foreground/40 hover:text-[var(--amber)] transition-colors shrink-0"
+                                      title="View file"
+                                    >
+                                      <ExternalLink size={11} />
+                                    </button>
+                                  )}
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/app/components/panels/PluginsPanel.tsx

@@ -142,12 +142,12 @@ export default function PluginsPanel({ active, maximized, onMaximize }: PluginsP
                   </span>
                 ))}
                 {r.entryPath && enabled && !fileExists && (
-                  <span className="text-2xs text-[var(--amber)]">
+                  <span className="text-2xs text-[var(--amber-text)]">
                     {(p.createFile ?? 'Create {file}').replace('{file}', r.entryPath)}
                   </span>
                 )}
                 {canOpen && (
-                  <span className="text-2xs text-[var(--amber)]">
+                  <span className="text-2xs text-[var(--amber-text)]">
                     → {r.entryPath}
                   </span>
                 )}

package/app/components/settings/AiTab.tsx

@@ -48,6 +48,12 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
   // Cleanup ok timer
   useEffect(() => () => { if (okTimerRef.current) clearTimeout(okTimerRef.current); }, []);
 
+  // Sync reconnectRetries to localStorage so AskContent can read it without fetching settings
+  useEffect(() => {
+    const v = data.agent?.reconnectRetries ?? 3;
+    try { localStorage.setItem('mindos-reconnect-retries', String(v)); } catch {}
+  }, [data.agent?.reconnectRetries]);
+
   const handleTestKey = useCallback(async (providerName: 'anthropic' | 'openai') => {
     const prov = data.ai.providers?.[providerName] ?? {} as ProviderConfig;
     setTestResult(prev => ({ ...prev, [providerName]: { state: 'testing' } }));
@@ -249,6 +255,24 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
             </Select>
           </Field>
 
+          <Field label={t.settings.agent.reconnectRetries} hint={t.settings.agent.reconnectRetriesHint}>
+            <Select
+              value={String(data.agent?.reconnectRetries ?? 3)}
+              onChange={e => {
+                const v = Number(e.target.value);
+                updateAgent({ reconnectRetries: v });
+                try { localStorage.setItem('mindos-reconnect-retries', String(v)); } catch {}
+              }}
+            >
+              <option value="0">Off</option>
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <option value="3">3</option>
+              <option value="5">5</option>
+              <option value="10">10</option>
+            </Select>
+          </Field>
+
           {provider === 'anthropic' && (
             <>
               <div className="flex items-center justify-between">

package/app/components/settings/KnowledgeTab.tsx

@@ -269,7 +269,7 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
             )}
           </div>
           {revealedToken && (
-            <p className="text-xs text-[var(--amber)]">
+            <p className="text-xs text-[var(--amber-text)]">
               New token generated. Copy it now — it won&apos;t be shown in full again.
             </p>
           )}

package/app/components/settings/McpSkillCreateForm.tsx

@@ -129,7 +129,7 @@ export default function SkillCreateForm({ onSave, onCancel, saving, error, m }:
               onClick={() => handleTemplateChange(tmpl)}
               className={`px-2.5 py-1 text-xs transition-colors ${i > 0 ? 'border-l border-border' : ''} ${
                 selectedTemplate === tmpl
-                  ? 'bg-[var(--amber-subtle)] text-[var(--amber)] font-medium'
+                  ? 'bg-[var(--amber-subtle)] text-[var(--amber-text)] font-medium'
                   : 'text-muted-foreground hover:bg-muted'
               }`}
             >

package/app/components/settings/McpSkillRow.tsx

@@ -51,7 +51,7 @@ export default function SkillRow({
         {expanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
         <span className="text-xs font-medium flex-1">{skill.name}</span>
         <span className={`text-2xs px-1.5 py-0.5 rounded ${
-          skill.source === 'builtin' ? 'bg-muted text-muted-foreground' : 'bg-[var(--amber-subtle)] text-[var(--amber)]'
+          skill.source === 'builtin' ? 'bg-muted text-muted-foreground' : 'bg-[var(--amber-subtle)] text-[var(--amber-text)]'
         }`}>
           {skill.source === 'builtin' ? (m?.skillBuiltin ?? 'Built-in') : (m?.skillUser ?? 'Custom')}
         </span>

package/app/components/settings/McpSkillsSection.tsx

@@ -239,7 +239,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
                 onClick={() => handleLangSwitch('en')}
                 disabled={switchingLang}
                 className={`px-2.5 py-1 text-xs transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
-                  currentLang === 'en' ? 'bg-[var(--amber-subtle)] text-[var(--amber)] font-medium' : 'text-muted-foreground hover:bg-muted'
+                  currentLang === 'en' ? 'bg-[var(--amber-subtle)] text-[var(--amber-text)] font-medium' : 'text-muted-foreground hover:bg-muted'
                 }`}
               >
                 {m?.skillLangEn ?? 'English'}
@@ -248,7 +248,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
                 onClick={() => handleLangSwitch('zh')}
                 disabled={switchingLang}
                 className={`px-2.5 py-1 text-xs transition-colors disabled:opacity-50 disabled:cursor-not-allowed border-l border-border ${
-                  currentLang === 'zh' ? 'bg-[var(--amber-subtle)] text-[var(--amber)] font-medium' : 'text-muted-foreground hover:bg-muted'
+                  currentLang === 'zh' ? 'bg-[var(--amber-subtle)] text-[var(--amber-text)] font-medium' : 'text-muted-foreground hover:bg-muted'
                 }`}
               >
                 {m?.skillLangZh ?? '中文'}

package/app/components/settings/McpTab.tsx

@@ -226,7 +226,7 @@ function AgentConfigViewer({ connectedAgents, detectedAgents, notFoundAgents, cu
                 {m?.tagConnected ?? 'Connected'}
               </span>
             ) : currentAgent.present && !currentAgent.installed ? (
-              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-2xs font-medium bg-[var(--amber-subtle)] text-[var(--amber)]">
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-2xs font-medium bg-[var(--amber-subtle)] text-[var(--amber-text)]">
                 <span className="w-1.5 h-1.5 rounded-full bg-[var(--amber)] inline-block" />
                 {m?.tagDetected ?? 'Detected — not configured'}
               </span>
@@ -266,7 +266,7 @@ function AgentConfigViewer({ connectedAgents, detectedAgents, notFoundAgents, cu
 
           {/* Auth warning */}
           {transport === 'http' && mcpStatus && !mcpStatus.authConfigured && (
-            <p className="flex items-center gap-1.5 text-xs text-[var(--amber)]">
+            <p className="flex items-center gap-1.5 text-xs text-[var(--amber-text)]">
               <AlertCircle size={12} />
               {m?.noAuthWarning ?? 'Auth not configured. Run `mindos token` to set up.'}
             </p>