@geminilight/mindos 0.5.51 → 0.5.54

package/README.md

@@ -40,7 +40,7 @@ MindOS is where you think, and where your AI agents act — a local-first knowle
 >
 > **✨ Try it now:** After installation, give these a try:
 > ```
-> Read my MindOS knowledge base, see what's inside, then help me write my self-introduction into Profile.
+> Here's my resume, read it and organize my info into MindOS.
 > ```
 > ```
 > Help me distill the experience from this conversation into MindOS as a reusable SOP.
@@ -51,19 +51,19 @@ MindOS is where you think, and where your AI agents act — a local-first knowle
 
 ## 🧠 Human-AI Shared Mind
 
-> No more fragmented memory, no more black-box behavior, no more lost experience.
+> You shape AI through thinking, AI empowers you through execution. Human and AI, growing together in one shared brain.
 
 **1. Global Sync — Breaking Memory Silos**
 
-Each Agent keeps its own memory — switching tools means manually hauling context. **MindOS lets all Agents share one knowledge base via MCP and Skills — record once, reuse everywhere.**
+Switch tools or start a new chat and you're re-transporting context, scattering knowledge. **With a built-in MCP server (20+ tools), MindOS connects all Agents to your core knowledge base with zero config. Record profile and project memory once to empower all AI tools.**
 
-**2. Transparent & Controllable — No More Black Boxes**
+**2. Transparent & Controllable — No Black Boxes**
 
-What did your Agent remember? Is it even correct? You have no way to know. **MindOS saves every read/write as local plain text — humans can audit, correct, and delete in the GUI.**
+Agent memory locked in black boxes makes reasoning unauditable, erasing trust as hallucinations compound. **MindOS saves every retrieval, reflection & action as local plain text. You hold absolute mind-correction rights with a full GUI to recalibrate Agents anytime.**
 
-**3. Symbiotic Evolution — Experience Flows Back as Instructions**
+**3. Symbiotic Evolution — Experience Flows Back As Instructions**
 
-All that experience from your conversations — gone the moment you close the window. **MindOS auto-distills conversation experience into Skills/SOPs. Notes are instructions. The knowledge base gets better with use.**
+You express preferences but the next chat starts from zero, leaving your thinking useless for AI. **MindOS auto-distills every thought into your knowledge base. Clarify your standards through interaction and sharpen your cognition with each iteration—AI will never repeat the same mistake.**
 
 > **Foundation:** Local-first by default — all data stays in local plain text for privacy, ownership, and speed.
 

package/README_zh.md

@@ -40,7 +40,7 @@ MindOS 是你思考的地方，也是 AI Agent 行动的起点——一个你和
 >
 > **✨ 立即体验：** 安装完成后，不妨试试：
 > ```
-> 读一下我的 MindOS 知识库，看看里面有什么，然后帮我把自我介绍写进 Profile。
+> 这是我的简历，读一下，把我的信息整理到 MindOS 里。
 > ```
 > ```
 > 帮我把这次对话的经验沉淀到 MindOS，形成一个可复用的工作流。
@@ -51,19 +51,19 @@ MindOS 是你思考的地方，也是 AI Agent 行动的起点——一个你和
 
 ## 🧠 人机共享心智
 
-> 记忆不再割裂，行为不再黑箱，经验不再断流。
+> 你在思考中塑造 AI，AI 在执行中反哺你。人和 AI，在同一个大脑里共同成长。
 
 **1. 全局同步 — 打破记忆割裂**
 
-多个 Agent 各记各的，切换工具靠人工搬运上下文。**MindOS 通过 MCP 和 Skill 让所有 Agent 共享同一份知识库——一处记录，全局复用。**
+切换工具带来上下文割裂，个人深度背景散落各处，导致知识无法复用。**MindOS 内置 MCP Server (支持 20+ 工具)，所有 Agent 零配置直连核心知识库。项目记忆与 SOP 仅需一处记录，全局赋能所有 AI 工具。**
 
 **2. 透明可控 — 消除记忆黑箱**
 
-Agent 记了什么、记对没有，用户无从知晓。**MindOS 将每次读写沉淀为本地纯文本，人类可在 GUI 中审查、修正、删除。**
+Agent 记忆锁在黑箱中，推理无法审查，错误极难纠正且幻觉持续累积。**MindOS 将每次检索与执行沉淀为本地纯文本，提供完整的审查干预界面，人类拥有绝对的心智纠偏权，随时校准 Agent 行为。**
 
 **3. 共生演进 — 经验回流为指令**
 
-对话里攒下的经验，关掉窗口就散了。**MindOS 自动将对话经验沉淀为 Skill/SOP，笔记即指令，知识库越用越好。**
+反复表达偏好但新对话又从零开始，思考未变成 AI 的能力与自身的方法论。**MindOS 将每次思考自动沉淀为知识库。在交互中厘清想法与标准，下次应对更默契拒绝重复犯错，认知随每次沉淀变得锐利。**
 
 > **底层原则：** 默认本地优先，全部数据以本地纯文本保存，兼顾隐私、主权与性能。
 

package/app/app/layout.tsx

@@ -8,6 +8,7 @@ import { LocaleProvider } from '@/lib/LocaleContext';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import RegisterSW from './register-sw';
 import UpdateBanner from '@/components/UpdateBanner';
+import UpdateOverlay from '@/components/UpdateOverlay';
 import { cookies } from 'next/headers';
 import type { Locale } from '@/lib/i18n';
 
@@ -108,6 +109,7 @@ export default async function RootLayout({
             </ErrorBoundary>
           </TooltipProvider>
           <RegisterSW />
+          <UpdateOverlay />
         </LocaleProvider>
       </body>
     </html>

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, Blocks, Bot, Compass, HelpCircle, ChevronLeft, ChevronRight } from 'lucide-react';
+import { FolderTree, Search, Settings, RefreshCw, Blocks, 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' | 'plugins' | 'agents' | 'discover';
+export type PanelId = 'files' | 'search' | 'echo' | 'plugins' | 'agents' | 'discover';
 
 export const RAIL_WIDTH_COLLAPSED = 48;
 export const RAIL_WIDTH_EXPANDED = 180;
@@ -157,6 +157,7 @@ export default function ActivityBar({
         {/* ── Middle: Core panel toggles ── */}
         <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={<Radio size={18} />} label={t.sidebar.echo} active={activePanel === 'echo'} expanded={expanded} onClick={() => toggle('echo')} />
           <RailButton icon={<Search size={18} />} label={t.sidebar.searchTitle} shortcut="⌘K" active={activePanel === 'search'} expanded={expanded} onClick={() => toggle('search')} walkthroughId="search-button" />
           <RailButton icon={<Blocks size={18} />} label={t.sidebar.plugins} active={activePanel === 'plugins'} expanded={expanded} onClick={() => toggle('plugins')} />
           <RailButton icon={<Bot size={18} />} label={t.sidebar.agents} active={activePanel === 'agents'} expanded={expanded} onClick={() => toggle('agents')} />

package/app/components/Panel.tsx

@@ -26,6 +26,7 @@ function getMaxDepth(nodes: FileNode[], current = 0): number {
 const DEFAULT_PANEL_WIDTH: Record<PanelId, number> = {
   files: 280,
   search: 280,
+  echo: 280,
   plugins: 280,
   agents: 280,
   discover: 280,

package/app/components/RightAgentDetailPanel.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useMemo, useEffect } from 'react';
+import { useMcpData } from '@/hooks/useMcpData';
+import { useLocale } from '@/lib/LocaleContext';
+import { useResizeDrag } from '@/hooks/useResizeDrag';
+import AgentsPanelAgentDetail from '@/components/panels/AgentsPanelAgentDetail';
+import { resolveAgentDetailStatus } from '@/components/panels/agents-panel-resolve-status';
+
+const DEFAULT_WIDTH = 400;
+const MIN_WIDTH = 300;
+const MAX_WIDTH_ABS = 640;
+const MAX_WIDTH_RATIO = 0.42;
+
+interface RightAgentDetailPanelProps {
+  open: boolean;
+  agentKey: string | null;
+  onClose: () => void;
+  /** Right offset in px when Ask panel is open (stack panels side-by-side). */
+  rightOffset: number;
+  width: number;
+  onWidthChange: (w: number) => void;
+  onWidthCommit: (w: number) => void;
+}
+
+export default function RightAgentDetailPanel({
+  open,
+  agentKey,
+  onClose,
+  rightOffset,
+  width,
+  onWidthChange,
+  onWidthCommit,
+}: RightAgentDetailPanelProps) {
+  const mcp = useMcpData();
+  const { t } = useLocale();
+  const p = t.panels.agents;
+
+  const connected = mcp.agents.filter(a => a.present && a.installed);
+  const detected = mcp.agents.filter(a => a.present && !a.installed);
+  const notFound = mcp.agents.filter(a => !a.present);
+
+  const resolved = useMemo(() => {
+    if (!agentKey) return null;
+    const agent = mcp.agents.find(a => a.key === agentKey);
+    if (!agent) return null;
+    const status = resolveAgentDetailStatus(agentKey, connected, detected, notFound);
+    if (!status) return null;
+    return { agent, status };
+  }, [agentKey, mcp.agents, connected, detected, notFound]);
+
+  useEffect(() => {
+    if (agentKey && !resolved) {
+      const id = requestAnimationFrame(() => onClose());
+      return () => cancelAnimationFrame(id);
+    }
+  }, [agentKey, resolved, onClose]);
+
+  const handleMouseDown = useResizeDrag({
+    width,
+    minWidth: MIN_WIDTH,
+    maxWidth: MAX_WIDTH_ABS,
+    maxWidthRatio: MAX_WIDTH_RATIO,
+    direction: 'left',
+    onResize: onWidthChange,
+    onResizeEnd: onWidthCommit,
+  });
+
+  const detailCopy = {
+    connected: p.connected,
+    installing: p.installing,
+    install: p.install,
+    copyConfig: p.copyConfig,
+    copied: p.copied,
+    transportLocal: p.transportLocal,
+    transportRemote: p.transportRemote,
+    configPath: p.configPath,
+    notFoundDetail: p.notFoundDetail,
+    backToList: p.backToList,
+    closeDetail: p.closeAgentDetail,
+    agentDetailTransport: p.agentDetailTransport,
+    agentDetailSnippet: p.agentDetailSnippet,
+  };
+
+  return (
+    <aside
+      className={`
+        hidden md:flex fixed top-0 h-screen z-[31] flex-col bg-card border-l border-border shadow-sm
+        transition-transform duration-200 ease-out
+        ${open ? 'translate-x-0' : 'translate-x-full pointer-events-none'}
+      `}
+      style={{ width: `${width}px`, right: `${rightOffset}px` }}
+      role="complementary"
+      aria-label={p.agentDetailPanelAria}
+      aria-hidden={!open || !resolved}
+    >
+      {resolved && (
+        <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
+          <AgentsPanelAgentDetail
+            agent={resolved.agent}
+            agentStatus={resolved.status}
+            mcpStatus={mcp.status}
+            onBack={onClose}
+            onInstallAgent={mcp.installAgent}
+            copy={detailCopy}
+            headerVariant="dock"
+          />
+        </div>
+      )}
+
+      <div
+        className="absolute top-0 -left-[3px] w-[6px] h-full cursor-col-resize z-40 group hidden md:block"
+        onMouseDown={handleMouseDown}
+      >
+        <div className="absolute left-[2px] top-0 w-[2px] h-full opacity-0 group-hover:opacity-100 bg-[var(--amber)]/50 transition-opacity" />
+      </div>
+    </aside>
+  );
+}
+
+export { DEFAULT_WIDTH as RIGHT_AGENT_DETAIL_DEFAULT_WIDTH, MIN_WIDTH as RIGHT_AGENT_DETAIL_MIN_WIDTH, MAX_WIDTH_ABS as RIGHT_AGENT_DETAIL_MAX_WIDTH };

package/app/components/SidebarLayout.tsx

@@ -12,7 +12,13 @@ import SearchPanel from './panels/SearchPanel';
 import PluginsPanel from './panels/PluginsPanel';
 import AgentsPanel from './panels/AgentsPanel';
 import DiscoverPanel from './panels/DiscoverPanel';
+import EchoPanel from './panels/EchoPanel';
 import RightAskPanel from './RightAskPanel';
+import RightAgentDetailPanel, {
+  RIGHT_AGENT_DETAIL_DEFAULT_WIDTH,
+  RIGHT_AGENT_DETAIL_MIN_WIDTH,
+  RIGHT_AGENT_DETAIL_MAX_WIDTH,
+} from './RightAgentDetailPanel';
 import AskFab from './AskFab';
 import SyncPopover from './panels/SyncPopover';
 import SearchModal from './SearchModal';
@@ -48,6 +54,20 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
   const [syncPopoverOpen, setSyncPopoverOpen] = useState(false);
   const [syncAnchorRect, setSyncAnchorRect] = useState<DOMRect | null>(null);
 
+  // ── Agent MCP detail (right dock, does not replace left Agents list) ──
+  const [agentDetailKey, setAgentDetailKey] = useState<string | null>(null);
+  const [agentDetailWidth, setAgentDetailWidth] = useState(() => {
+    if (typeof window === 'undefined') return RIGHT_AGENT_DETAIL_DEFAULT_WIDTH;
+    try {
+      const stored = localStorage.getItem('right-agent-detail-panel-width');
+      if (stored) {
+        const w = parseInt(stored, 10);
+        if (w >= RIGHT_AGENT_DETAIL_MIN_WIDTH && w <= RIGHT_AGENT_DETAIL_MAX_WIDTH) return w;
+      }
+    } catch { /* ignore */ }
+    return RIGHT_AGENT_DETAIL_DEFAULT_WIDTH;
+  });
+
   // ── Mobile state ──
   const [mobileOpen, setMobileOpen] = useState(false);
   const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
@@ -90,7 +110,21 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
   }, [ap.askOpenSource]);
 
   // Close mobile drawer on route change
-  useEffect(() => { setMobileOpen(false); }, [pathname]);
+  useEffect(() => {
+    const id = requestAnimationFrame(() => setMobileOpen(false));
+    return () => cancelAnimationFrame(id);
+  }, [pathname]);
+
+  const handleAgentDetailWidthCommit = useCallback((w: number) => {
+    setAgentDetailWidth(w);
+    try {
+      localStorage.setItem('right-agent-detail-panel-width', String(w));
+    } catch { /* ignore */ }
+  }, []);
+
+  const closeAgentDetailPanel = useCallback(() => setAgentDetailKey(null), []);
+
+  const agentDockOpen = agentDetailKey !== null && lp.activePanel === 'agents';
 
   // Refresh file tree periodically
   useEffect(() => {
@@ -112,6 +146,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     const handler = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         if (lp.panelMaximized) { lp.handlePanelMaximize(); return; }
+        if (agentDockOpen) { setAgentDetailKey(null); return; }
         if (ap.askPanelOpen) { ap.closeAskPanel(); return; }
         if (ap.desktopAskPopupOpen) { ap.closeDesktopAskPopup(); return; }
       }
@@ -138,7 +173,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     };
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
-  }, [lp.panelMaximized, ap.askPanelOpen, ap.desktopAskPopupOpen, ap.toggleAskPanel, lp]);
+  }, [agentDockOpen, lp, ap]);
 
   // ── Settings helpers ──
   const openSyncSettings = useCallback(() => {
@@ -208,6 +243,9 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         maximized={lp.panelMaximized}
         onMaximize={lp.handlePanelMaximize}
       >
+        <div className={`flex flex-col h-full ${lp.activePanel === 'echo' ? '' : 'hidden'}`}>
+          <EchoPanel active={lp.activePanel === 'echo'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
+        </div>
         <div className={`flex flex-col h-full ${lp.activePanel === 'search' ? '' : 'hidden'}`}>
           <SearchPanel active={lp.activePanel === 'search'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
         </div>
@@ -215,7 +253,13 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
           <PluginsPanel active={lp.activePanel === 'plugins'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
         </div>
         <div className={`flex flex-col h-full ${lp.activePanel === 'agents' ? '' : 'hidden'}`}>
-          <AgentsPanel active={lp.activePanel === 'agents'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
+          <AgentsPanel
+            active={lp.activePanel === 'agents'}
+            maximized={lp.panelMaximized}
+            onMaximize={lp.handlePanelMaximize}
+            selectedAgentKey={agentDockOpen ? agentDetailKey : null}
+            onOpenAgentDetail={setAgentDetailKey}
+          />
         </div>
         <div className={`flex flex-col h-full ${lp.activePanel === 'discover' ? '' : 'hidden'}`}>
           <DiscoverPanel active={lp.activePanel === 'discover'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
@@ -236,6 +280,16 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         onModeSwitch={ap.handleAskModeSwitch}
       />
 
+      <RightAgentDetailPanel
+        open={agentDockOpen}
+        agentKey={agentDetailKey}
+        onClose={closeAgentDetailPanel}
+        rightOffset={ap.askPanelOpen ? ap.askPanelWidth : 0}
+        width={agentDetailWidth}
+        onWidthChange={setAgentDetailWidth}
+        onWidthCommit={handleAgentDetailWidthCommit}
+      />
+
       <AskModal
         open={ap.desktopAskPopupOpen}
         onClose={ap.closeDesktopAskPopup}
@@ -308,10 +362,13 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
 
       <style>{`
         @media (min-width: 768px) {
-          :root { --right-panel-width: ${ap.askPanelOpen ? ap.askPanelWidth : 0}px; }
+          :root {
+            --right-panel-width: ${ap.askPanelOpen ? ap.askPanelWidth : 0}px;
+            --right-agent-detail-width: ${agentDockOpen ? agentDetailWidth : 0}px;
+          }
           #main-content {
             padding-left: ${lp.panelOpen && lp.panelMaximized ? '100vw' : `${lp.panelOpen ? lp.railWidth + lp.effectivePanelWidth : lp.railWidth}px`} !important;
-            padding-right: var(--right-panel-width) !important;
+            padding-right: calc(var(--right-panel-width) + var(--right-agent-detail-width)) !important;
             padding-top: 0 !important;
           }
         }

package/app/components/UpdateOverlay.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Loader2, CheckCircle2 } from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+
+const UPDATE_STATE_KEY = 'mindos_update_in_progress';
+const POLL_INTERVAL = 3_000;
+
+/**
+ * Global overlay shown when MindOS update kills the server.
+ * Mounted in root layout — persists across page navigations and Settings close.
+ * Reads localStorage flag set by UpdateTab. Auto-reloads when server comes back.
+ */
+export default function UpdateOverlay() {
+  const [visible, setVisible] = useState(false);
+  const [done, setDone] = useState(false);
+  const pollRef = useRef<ReturnType<typeof setInterval>>(undefined);
+  const { locale } = useLocale();
+  const zh = locale === 'zh';
+
+  const startPolling = useCallback(() => {
+    pollRef.current = setInterval(async () => {
+      try {
+        const res = await fetch('/api/health', { signal: AbortSignal.timeout(3000) });
+        if (res.ok) {
+          clearInterval(pollRef.current);
+          pollRef.current = undefined;
+          // Server is back — check if version changed
+          try {
+            const saved = localStorage.getItem(UPDATE_STATE_KEY);
+            if (saved) {
+              const { originalVer } = JSON.parse(saved);
+              const data = await fetch('/api/update-check').then(r => r.json());
+              if (data.current && data.current !== originalVer) {
+                setDone(true);
+                localStorage.removeItem(UPDATE_STATE_KEY);
+                localStorage.removeItem('mindos_update_latest');
+                localStorage.removeItem('mindos_update_dismissed');
+                setTimeout(() => window.location.reload(), 1500);
+                return;
+              }
+            }
+          } catch { /* check failed, still reload */ }
+          // Server is back but version unchanged (or no saved state) — just reload
+          localStorage.removeItem(UPDATE_STATE_KEY);
+          window.location.reload();
+        }
+      } catch {
+        // Still down
+      }
+    }, POLL_INTERVAL);
+  }, []);
+
+  // Check on mount and listen for update-started event from UpdateTab
+  useEffect(() => {
+    const check = () => {
+      const saved = localStorage.getItem(UPDATE_STATE_KEY);
+      if (saved) {
+        setVisible(true);
+        if (!pollRef.current) startPolling();
+      }
+    };
+
+    // Check immediately (handles page reload during update)
+    check();
+
+    // Listen for same-tab update start (localStorage 'storage' event only fires cross-tab)
+    const handler = () => check();
+    window.addEventListener('mindos:update-started', handler);
+    window.addEventListener('storage', handler); // cross-tab fallback
+
+    return () => {
+      clearInterval(pollRef.current);
+      pollRef.current = undefined;
+      window.removeEventListener('mindos:update-started', handler);
+      window.removeEventListener('storage', handler);
+    };
+  }, [startPolling]);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 99999,
+        background: 'rgba(0,0,0,0.7)',
+        backdropFilter: 'blur(8px)',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+      }}
+    >
+      {done ? (
+        <>
+          <CheckCircle2 size={32} style={{ color: '#7aad80', marginBottom: 12 }} />
+          <div style={{ color: '#e8e4dc', fontSize: 18, fontWeight: 600 }}>
+            {zh ? '更新成功！' : 'Update Complete!'}
+          </div>
+          <div style={{ color: '#8a8275', 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 }}>
+            {zh ? 'MindOS 正在更新...' : 'MindOS is Updating...'}
+          </div>
+          <div style={{ color: '#8a8275', 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.'}
+          </div>
+        </>
+      )}
+      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
+    </div>
+  );
+}

package/app/components/help/HelpContent.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, useEffect } from 'react';
 import { BookOpen, Rocket, Brain, Keyboard, HelpCircle, Bot, ChevronDown, Copy, Check } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 
@@ -39,7 +39,7 @@ function Section({ icon, title, defaultOpen = false, children }: {
 function StepCard({ step, title, desc }: { step: number; title: string; desc: string }) {
   return (
     <div className="flex gap-4 items-start">
-      <div className="shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold font-mono" style={{ background: 'var(--amber-dim)', color: 'var(--amber)' }}>
+      <div className="shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold font-mono bg-[var(--amber-dim)] text-[var(--amber)]">
         {step}
       </div>
       <div className="min-w-0">
@@ -59,12 +59,12 @@ function PromptBlock({ text, copyLabel }: { text: string; copyLabel: string }) {
     navigator.clipboard.writeText(clean).then(() => {
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
-    });
+    }).catch(() => {});
   }, [text]);
 
   return (
     <div className="group/prompt mt-2 flex items-start gap-2 bg-background border border-border rounded-md px-3 py-2">
-      <p className="flex-1 text-xs font-mono leading-relaxed" style={{ color: 'var(--amber)' }}>{text}</p>
+      <p className="flex-1 text-xs font-mono leading-relaxed text-[var(--amber)]">{text}</p>
       <button
         onClick={handleCopy}
         className="shrink-0 p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors opacity-0 group-hover/prompt:opacity-100 focus-visible:opacity-100"
@@ -122,8 +122,11 @@ export default function HelpContent() {
   const { t } = useLocale();
   const h = t.help;
 
-  const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent);
-  const mod = isMac ? '⌘' : 'Ctrl';
+  const [mod, setMod] = useState('⌘');
+  useEffect(() => {
+    const isMac = /Mac|iPhone|iPad/.test(navigator.userAgent);
+    setMod(isMac ? '⌘' : 'Ctrl');
+  }, []);
 
   const shortcuts = useMemo(() => [
     { keys: `${mod} K`, label: h.shortcuts.search },
@@ -141,7 +144,7 @@ export default function HelpContent() {
       {/* ── Header ── */}
       <div className="mb-8">
         <div className="flex items-center gap-2 mb-1">
-          <div className="w-1 h-6 rounded-full" style={{ background: 'var(--amber)' }} />
+          <div className="w-1 h-6 rounded-full bg-[var(--amber)]" />
           <h1 className="text-2xl font-bold font-display text-foreground">{h.title}</h1>
         </div>
         <p className="text-muted-foreground text-sm ml-3 mt-1">{h.subtitle}</p>