@geminilight/mindos 0.5.51 → 0.5.52

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/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>

package/app/components/settings/McpSkillsSection.tsx

@@ -3,10 +3,11 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import {
   Loader2, ChevronDown, ChevronRight,
-  Plus, X, Search,
+  Plus, X, Search, Copy, Check,
 } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
 import { useMcpDataOptional } from '@/hooks/useMcpData';
+import { copyToClipboard } from '@/lib/clipboard';
 import type { SkillInfo, McpSkillsSectionProps } from './types';
 import SkillRow from './McpSkillRow';
 import SkillCreateForm from './McpSkillCreateForm';
@@ -24,7 +25,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
   const [createError, setCreateError] = useState('');
 
   const [search, setSearch] = useState('');
-  const [builtinCollapsed, setBuiltinCollapsed] = useState(true);
+  const [builtinCollapsed, setBuiltinCollapsed] = useState(false);
   const [editing, setEditing] = useState<string | null>(null);
   const [editContent, setEditContent] = useState('');
   const [editError, setEditError] = useState('');
@@ -354,6 +355,91 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
           {m?.addSkill ?? '+ Add Skill'}
         </button>
       )}
+
+      {/* CLI install hint with agent selector */}
+      <SkillCliHint
+        agents={mcp?.agents ?? []}
+        skillName={(() => {
+          const mindosEnabled = skills.find(s => s.name === 'mindos')?.enabled ?? true;
+          return mindosEnabled ? 'mindos' : 'mindos-zh';
+        })()}
+        m={m}
+      />
+    </div>
+  );
+}
+
+/* ── Skill CLI Install Hint ── */
+
+function SkillCliHint({ agents, skillName, m }: {
+  agents: { key: string; name: string; present?: boolean; installed?: boolean }[];
+  skillName: string;
+  m: Record<string, any> | undefined;
+}) {
+  const [selectedAgent, setSelectedAgent] = useState('claude-code');
+  const [copied, setCopied] = useState(false);
+
+  const cmd = `npx skills add GeminiLight/MindOS --skill ${skillName} -a ${selectedAgent} -g -y`;
+  const skillPath = `~/.agents/skills/${skillName}/SKILL.md`;
+
+  const handleCopy = async () => {
+    const ok = await copyToClipboard(cmd);
+    if (ok) { setCopied(true); setTimeout(() => setCopied(false), 2000); }
+  };
+
+  // Group agents: connected first, then detected, then not found
+  const connected = agents.filter(a => a.present && a.installed);
+  const detected = agents.filter(a => a.present && !a.installed);
+  const notFound = agents.filter(a => !a.present);
+
+  return (
+    <div className="border-t border-border pt-3 mt-3 space-y-2.5">
+      <p className="text-2xs font-medium text-muted-foreground">
+        {m?.cliInstallHint ?? 'Install via CLI:'}
+      </p>
+
+      {/* Agent selector */}
+      <div className="relative">
+        <select
+          value={selectedAgent}
+          onChange={(e) => setSelectedAgent(e.target.value)}
+          className="w-full appearance-none px-2.5 py-1.5 pr-7 text-2xs rounded-md border border-border bg-background text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        >
+          {connected.length > 0 && (
+            <optgroup label={m?.connectedGroup ?? 'Connected'}>
+              {connected.map(a => <option key={a.key} value={a.key}>✓ {a.name}</option>)}
+            </optgroup>
+          )}
+          {detected.length > 0 && (
+            <optgroup label={m?.detectedGroup ?? 'Detected'}>
+              {detected.map(a => <option key={a.key} value={a.key}>○ {a.name}</option>)}
+            </optgroup>
+          )}
+          {notFound.length > 0 && (
+            <optgroup label={m?.notFoundGroup ?? 'Not Installed'}>
+              {notFound.map(a => <option key={a.key} value={a.key}>· {a.name}</option>)}
+            </optgroup>
+          )}
+        </select>
+        <ChevronDown size={12} className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" />
+      </div>
+
+      {/* Command */}
+      <div className="flex items-center gap-1.5">
+        <code className="flex-1 text-[10px] font-mono bg-muted/50 border border-border rounded-lg px-2.5 py-2 text-muted-foreground select-all overflow-x-auto whitespace-nowrap">
+          {cmd}
+        </code>
+        <button onClick={handleCopy}
+          className="p-1.5 rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0">
+          {copied ? <Check size={11} /> : <Copy size={11} />}
+        </button>
+      </div>
+
+      {/* Path hint */}
+      <p className="text-2xs text-muted-foreground">
+        {m?.skillPathHint ?? 'Skill files installed at:'}{' '}
+        <code className="font-mono text-[10px] bg-muted px-1 py-0.5 rounded">{skillPath}</code>
+      </p>
     </div>
   );
 }

package/app/components/settings/McpTab.tsx

@@ -219,6 +219,32 @@ function AgentConfigViewer({ connectedAgents, detectedAgents, notFoundAgents, cu
 
       {currentAgent && (
         <>
+          {/* Agent status badge */}
+          <div className="flex items-center gap-2">
+            {currentAgent.present && currentAgent.installed ? (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-2xs font-medium bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
+                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 inline-block" />
+                {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" style={{ background: 'var(--amber-subtle, rgba(200,135,58,0.1))', color: 'var(--amber)' }}>
+                <span className="w-1.5 h-1.5 rounded-full inline-block" style={{ background: 'var(--amber)' }} />
+                {m?.tagDetected ?? 'Detected — not configured'}
+              </span>
+            ) : (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-2xs font-medium bg-muted text-muted-foreground">
+                <span className="w-1.5 h-1.5 rounded-full bg-zinc-400 inline-block" />
+                {m?.tagNotInstalled ?? 'Not installed'}
+              </span>
+            )}
+            {currentAgent.transport && (
+              <span className="px-1.5 py-0.5 rounded text-2xs bg-muted text-muted-foreground">{currentAgent.transport}</span>
+            )}
+            {currentAgent.scope && (
+              <span className="px-1.5 py-0.5 rounded text-2xs bg-muted text-muted-foreground">{currentAgent.scope}</span>
+            )}
+          </div>
+
           {/* Transport toggle */}
           <div className="flex items-center rounded-lg border border-border overflow-hidden w-fit">
             <button

package/app/components/settings/UpdateTab.tsx

@@ -29,6 +29,7 @@ type UpdateState = 'idle' | 'checking' | 'updating' | 'updated' | 'error' | 'tim
 const CHANGELOG_URL = 'https://github.com/GeminiLight/MindOS/releases';
 const POLL_INTERVAL = 3_000;
 const POLL_TIMEOUT = 5 * 60 * 1000; // 5 minutes
+const UPDATE_STATE_KEY = 'mindos_update_in_progress';
 
 const STAGE_LABELS: Record<string, { en: string; zh: string }> = {
   downloading: { en: 'Downloading update', zh: '下载更新' },
@@ -77,8 +78,6 @@ export function UpdateTab() {
     }
   }, [u]);
 
-  useEffect(() => { checkUpdate(); }, [checkUpdate]);
-
   const cleanup = useCallback(() => {
     clearInterval(pollRef.current);
     clearTimeout(timeoutRef.current);
@@ -91,33 +90,14 @@ export function UpdateTab() {
     setState('updated');
     localStorage.removeItem('mindos_update_latest');
     localStorage.removeItem('mindos_update_dismissed');
+    localStorage.removeItem(UPDATE_STATE_KEY);
     window.dispatchEvent(new Event('mindos:update-dismissed'));
     setTimeout(() => window.location.reload(), 2000);
   }, [cleanup]);
 
-  useEffect(() => cleanup, [cleanup]);
-
-  const handleUpdate = useCallback(async () => {
-    setState('updating');
-    setErrorMsg('');
-    setUpdateError(null);
-    setServerDown(false);
-    setStages([
-      { id: 'downloading', status: 'pending' },
-      { id: 'skills',      status: 'pending' },
-      { id: 'rebuilding',  status: 'pending' },
-      { id: 'restarting',  status: 'pending' },
-    ]);
-
-    try {
-      await apiFetch('/api/update', { method: 'POST' });
-    } catch {
-      // Expected — server may die during update
-    }
-
-    // Poll update-status for stage progress
+  /** Start polling for update progress */
+  const startPolling = useCallback(() => {
     pollRef.current = setInterval(async () => {
-      // Try status endpoint first (may fail when server is restarting)
       try {
         const status = await apiFetch<UpdateStatus>('/api/update-status', { timeout: 5000 });
         setServerDown(false);
@@ -128,13 +108,13 @@ export function UpdateTab() {
 
         if (status.stage === 'failed') {
           cleanup();
+          localStorage.removeItem(UPDATE_STATE_KEY);
           setUpdateError(status.error || 'Update failed');
           setState('error');
           return;
         }
 
         if (status.stage === 'done') {
-          // Verify version actually changed
           try {
             const data = await apiFetch<UpdateInfo>('/api/update-check');
             if (data.current !== originalVersion.current) {
@@ -144,11 +124,11 @@ export function UpdateTab() {
           } catch { /* new server may not be fully ready */ }
         }
       } catch {
-        // Server restarting — also try update-check as fallback
+        // Server restarting — try update-check as fallback
         setServerDown(true);
         try {
           const data = await apiFetch<UpdateInfo>('/api/update-check', { timeout: 5000 });
-          if (data.current !== originalVersion.current) {
+          if (data.current && data.current !== originalVersion.current) {
             setStages(prev => prev.map(s => ({ ...s, status: 'done' as const })));
             completeUpdate(data);
           }
@@ -160,10 +140,68 @@ export function UpdateTab() {
 
     timeoutRef.current = setTimeout(() => {
       cleanup();
+      localStorage.removeItem(UPDATE_STATE_KEY);
       setState('timeout');
     }, POLL_TIMEOUT);
   }, [cleanup, completeUpdate]);
 
+  // On mount: check if an update was in progress (survives page reload / white screen)
+  useEffect(() => {
+    const savedState = localStorage.getItem(UPDATE_STATE_KEY);
+    if (savedState) {
+      try {
+        const { originalVer } = JSON.parse(savedState);
+        originalVersion.current = originalVer;
+        setState('updating');
+        setServerDown(true);
+        setStages([
+          { id: 'downloading', status: 'done' },
+          { id: 'skills',      status: 'done' },
+          { id: 'rebuilding',  status: 'done' },
+          { id: 'restarting',  status: 'running' },
+        ]);
+        startPolling();
+      } catch {
+        localStorage.removeItem(UPDATE_STATE_KEY);
+        checkUpdate();
+      }
+    } else {
+      checkUpdate();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => cleanup, [cleanup]);
+
+  const handleUpdate = useCallback(async () => {
+    setState('updating');
+    setErrorMsg('');
+    setUpdateError(null);
+    setServerDown(false);
+    setStages([
+      { id: 'downloading', status: 'pending' },
+      { id: 'skills',      status: 'pending' },
+      { id: 'rebuilding',  status: 'pending' },
+      { id: 'restarting',  status: 'pending' },
+    ]);
+
+    // Persist update state to localStorage — survives process restart / page reload
+    localStorage.setItem(UPDATE_STATE_KEY, JSON.stringify({
+      originalVer: originalVersion.current || info?.current,
+      startedAt: Date.now(),
+    }));
+    // Notify UpdateOverlay (same-tab, storage event doesn't fire for same-tab writes)
+    window.dispatchEvent(new Event('mindos:update-started'));
+
+    try {
+      await apiFetch('/api/update', { method: 'POST' });
+    } catch {
+      // Expected — server may die during update
+    }
+
+    startPolling();
+  }, [startPolling, info]);
+
   const handleRetry = useCallback(() => {
     setUpdateError(null);
     handleUpdate();

package/app/lib/i18n-en.ts

@@ -352,6 +352,8 @@ export const en = {
       skillBuiltin: 'Built-in',
       skillUser: 'Custom',
       addSkill: '+ Add Skill',
+      cliInstallHint: 'Install via CLI:',
+      skillPathHint: 'Skill files installed at:',
       deleteSkill: 'Delete',
       editSkill: 'Edit',
       saveSkill: 'Save',

package/app/lib/i18n-zh.ts

@@ -377,6 +377,8 @@ export const zh = {
       skillBuiltin: '内置',
       skillUser: '自定义',
       addSkill: '+ 添加 Skill',
+      cliInstallHint: '通过命令行安装：',
+      skillPathHint: 'Skill 文件安装路径：',
       deleteSkill: '删除',
       editSkill: '编辑',
       saveSkill: '保存',

package/app/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/package.json

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