@geminilight/mindos 0.5.28 → 0.5.29

package/app/components/explore/use-cases.ts

@@ -0,0 +1,30 @@
+export type UseCaseCategory = 'getting-started' | 'cross-agent' | 'knowledge-evolution' | 'advanced';
+
+export interface UseCase {
+  id: string;
+  icon: string;
+  category: UseCaseCategory;
+}
+
+/**
+ * C1-C9 use case definitions.
+ * All display text (title, description, prompt) comes from i18n — this file is structure only.
+ */
+export const useCases: UseCase[] = [
+  { id: 'c1', icon: '👤', category: 'getting-started' },
+  { id: 'c2', icon: '📥', category: 'getting-started' },
+  { id: 'c3', icon: '🔄', category: 'cross-agent' },
+  { id: 'c4', icon: '🔁', category: 'knowledge-evolution' },
+  { id: 'c5', icon: '💡', category: 'cross-agent' },
+  { id: 'c6', icon: '🚀', category: 'cross-agent' },
+  { id: 'c7', icon: '🔍', category: 'knowledge-evolution' },
+  { id: 'c8', icon: '🤝', category: 'knowledge-evolution' },
+  { id: 'c9', icon: '🛡️', category: 'advanced' },
+];
+
+export const categories: UseCaseCategory[] = [
+  'getting-started',
+  'cross-agent',
+  'knowledge-evolution',
+  'advanced',
+];

package/app/components/panels/AgentsPanel.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { Loader2, RefreshCw, ChevronDown, ChevronRight, ExternalLink } from 'lucide-react';
+import { Loader2, RefreshCw, ChevronDown, ChevronRight, CheckCircle2, AlertCircle } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
+import { useLocale } from '@/lib/LocaleContext';
 import type { McpStatus, AgentInfo } from '../settings/types';
 import PanelHeader from './PanelHeader';
 
@@ -10,11 +11,11 @@ interface AgentsPanelProps {
   active: boolean;
   maximized?: boolean;
   onMaximize?: () => void;
-  /** Opens Settings Modal on a specific tab */
-  onOpenSettings?: (tab: 'mcp') => void;
 }
 
-export default function AgentsPanel({ active, maximized, onMaximize, onOpenSettings }: AgentsPanelProps) {
+export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPanelProps) {
+  const { t } = useLocale();
+  const p = t.panels.agents;
   const [agents, setAgents] = useState<AgentInfo[]>([]);
   const [mcpStatus, setMcpStatus] = useState<McpStatus | null>(null);
   const [loading, setLoading] = useState(true);
@@ -40,49 +41,34 @@ export default function AgentsPanel({ active, maximized, onMaximize, onOpenSetti
     setRefreshing(false);
   }, []);
 
-  // Fetch when panel becomes active + 30s auto-refresh
   const prevActive = useRef(false);
   useEffect(() => {
-    if (active && !prevActive.current) {
-      fetchAll();
-    }
+    if (active && !prevActive.current) fetchAll();
     prevActive.current = active;
   }, [active, fetchAll]);
 
   useEffect(() => {
-    if (!active) {
-      clearInterval(intervalRef.current);
-      return;
-    }
+    if (!active) { clearInterval(intervalRef.current); return; }
     intervalRef.current = setInterval(() => fetchAll(true), 30_000);
     return () => clearInterval(intervalRef.current);
   }, [active, fetchAll]);
 
-  const handleRefresh = () => {
-    setRefreshing(true);
-    fetchAll();
-  };
+  const handleRefresh = () => { setRefreshing(true); fetchAll(); };
 
-  // Group agents
   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);
-  const connectedCount = connected.length;
 
   return (
     <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
-      <PanelHeader title="Agents" maximized={maximized} onMaximize={onMaximize}>
+      <PanelHeader title={p.title} maximized={maximized} onMaximize={onMaximize}>
         <div className="flex items-center gap-1.5">
           {!loading && (
-            <span className="text-2xs text-muted-foreground">{connectedCount} connected</span>
+            <span className="text-2xs text-muted-foreground">{connected.length} {p.connected}</span>
           )}
-          <button
-            onClick={handleRefresh}
-            disabled={refreshing}
+          <button onClick={handleRefresh} disabled={refreshing}
             className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground disabled:opacity-50 transition-colors"
-            aria-label="Refresh"
-            title="Refresh agent status"
-          >
+            aria-label={p.refresh} title={p.refresh}>
             <RefreshCw size={12} className={refreshing ? 'animate-spin' : ''} />
           </button>
         </div>
@@ -90,24 +76,19 @@ export default function AgentsPanel({ active, maximized, onMaximize, onOpenSetti
 
       <div className="flex-1 overflow-y-auto min-h-0">
         {loading ? (
-          <div className="flex justify-center py-8">
-            <Loader2 size={16} className="animate-spin text-muted-foreground" />
-          </div>
+          <div className="flex justify-center py-8"><Loader2 size={16} className="animate-spin text-muted-foreground" /></div>
         ) : error && agents.length === 0 ? (
           <div className="flex flex-col items-center gap-2 py-8 text-center px-4">
-            <p className="text-xs text-destructive">Failed to load agents</p>
-            <button
-              onClick={handleRefresh}
-              className="flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-            >
-              <RefreshCw size={11} /> Retry
+            <p className="text-xs text-destructive">{p.failedToLoad}</p>
+            <button onClick={handleRefresh}
+              className="flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+              <RefreshCw size={11} /> {p.retry}
             </button>
           </div>
         ) : (
           <div className="px-3 py-3 space-y-4">
-            {/* MCP Server Status — compact */}
             <div className="rounded-lg border border-border bg-card/50 px-3 py-2.5 flex items-center justify-between">
-              <span className="text-xs font-medium text-foreground">MCP Server</span>
+              <span className="text-xs font-medium text-foreground">{p.mcpServer}</span>
               {mcpStatus?.running ? (
                 <span className="flex items-center gap-1.5 text-[11px]">
                   <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 inline-block" />
@@ -116,115 +97,125 @@ export default function AgentsPanel({ active, maximized, onMaximize, onOpenSetti
               ) : (
                 <span className="flex items-center gap-1.5 text-[11px]">
                   <span className="w-1.5 h-1.5 rounded-full bg-zinc-400 inline-block" />
-                  <span className="text-muted-foreground">Stopped</span>
+                  <span className="text-muted-foreground">{p.stopped}</span>
                 </span>
               )}
             </div>
 
-            {/* Connected */}
             {connected.length > 0 && (
               <section>
-                <h3 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2">
-                  Connected ({connected.length})
-                </h3>
+                <h3 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2">{p.sectionConnected} ({connected.length})</h3>
                 <div className="space-y-1.5">
-                  {connected.map(agent => (
-                    <AgentCard key={agent.key} agent={agent} status="connected" />
-                  ))}
+                  {connected.map(agent => (<AgentCard key={agent.key} agent={agent} status="connected" t={p} />))}
                 </div>
               </section>
             )}
 
-            {/* Detected but not configured */}
             {detected.length > 0 && (
               <section>
-                <h3 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2">
-                  Detected ({detected.length})
-                </h3>
+                <h3 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2">{p.sectionDetected} ({detected.length})</h3>
                 <div className="space-y-1.5">
                   {detected.map(agent => (
-                    <AgentCard
-                      key={agent.key}
-                      agent={agent}
-                      status="detected"
-                      onConnect={() => onOpenSettings?.('mcp')}
-                    />
+                    <AgentCard key={agent.key} agent={agent} status="detected" onInstalled={() => fetchAll()} t={p} />
                   ))}
                 </div>
               </section>
             )}
 
-            {/* Not Detected — collapsible */}
             {notFound.length > 0 && (
               <section>
-                <button
-                  onClick={() => setShowNotDetected(!showNotDetected)}
-                  className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2 hover:text-foreground transition-colors"
-                >
+                <button onClick={() => setShowNotDetected(!showNotDetected)}
+                  className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2 hover:text-foreground transition-colors">
                   {showNotDetected ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-                  Not Detected ({notFound.length})
+                  {p.sectionNotDetected} ({notFound.length})
                 </button>
                 {showNotDetected && (
                   <div className="space-y-1.5">
-                    {notFound.map(agent => (
-                      <AgentCard key={agent.key} agent={agent} status="notFound" />
-                    ))}
+                    {notFound.map(agent => (<AgentCard key={agent.key} agent={agent} status="notFound" t={p} />))}
                   </div>
                 )}
               </section>
             )}
 
-            {/* Empty state */}
             {agents.length === 0 && (
-              <p className="text-xs text-muted-foreground text-center py-4">
-                No agents detected.
-              </p>
+              <p className="text-xs text-muted-foreground text-center py-4">{p.noAgents}</p>
             )}
           </div>
         )}
       </div>
 
-      {/* Footer */}
       <div className="px-3 py-2 border-t border-border shrink-0">
-        <p className="text-2xs text-muted-foreground/60">Auto-refresh every 30s</p>
+        <p className="text-2xs text-muted-foreground/60">{p.autoRefresh}</p>
       </div>
     </div>
   );
 }
 
-/* ── Agent Card (panel-compact variant) ── */
+/* ── Agent Card ── */
 
-function AgentCard({
-  agent,
-  status,
-  onConnect,
-}: {
+function AgentCard({ agent, status, onInstalled, t }: {
   agent: AgentInfo;
   status: 'connected' | 'detected' | 'notFound';
-  onConnect?: () => void;
+  onInstalled?: () => void;
+  t: Record<string, any>;
 }) {
-  const dot =
-    status === 'connected' ? 'bg-emerald-500' :
-    status === 'detected' ? 'bg-amber-500' :
-    'bg-zinc-400';
+  const [expanded, setExpanded] = useState(false);
+  const [installing, setInstalling] = useState(false);
+  const [result, setResult] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  const dot = status === 'connected' ? 'bg-emerald-500' : status === 'detected' ? 'bg-amber-500' : 'bg-zinc-400';
+
+  const handleInstall = async () => {
+    setInstalling(true); setResult(null);
+    try {
+      const res = await apiFetch<{ results: Array<{ key: string; ok: boolean; error?: string }> }>('/api/mcp/install', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ agents: [{ key: agent.key, scope: agent.hasProjectScope ? 'project' : 'global', transport: agent.preferredTransport }], transport: 'auto' }),
+      });
+      const r = res.results?.[0];
+      if (r?.ok) { setResult({ type: 'success', text: `${agent.name} ${t.connected}` }); setTimeout(() => onInstalled?.(), 1500); }
+      else { setResult({ type: 'error', text: r?.error ?? 'Install failed' }); }
+    } catch { setResult({ type: 'error', text: 'Network error' }); }
+    setInstalling(false);
+  };
 
   return (
-    <div className="rounded-lg border border-border/60 bg-card/30 px-3 py-2 flex items-center justify-between gap-2">
-      <div className="flex items-center gap-2 min-w-0">
-        <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dot}`} />
-        <span className="text-xs font-medium text-foreground truncate">{agent.name}</span>
-        {status === 'connected' && agent.transport && (
-          <span className="text-2xs px-1 py-0.5 rounded bg-muted text-muted-foreground shrink-0">{agent.transport}</span>
+    <div className="rounded-lg border border-border/60 bg-card/30 overflow-hidden">
+      <div className="px-3 py-2 flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dot}`} />
+          <span className="text-xs font-medium text-foreground truncate">{agent.name}</span>
+          {status === 'connected' && agent.transport && (
+            <span className="text-2xs px-1 py-0.5 rounded bg-muted text-muted-foreground shrink-0">{agent.transport}</span>
+          )}
+        </div>
+        {status === 'detected' && (
+          <button onClick={() => setExpanded(v => !v)}
+            className="flex items-center gap-1 px-2 py-0.5 text-2xs rounded-md bg-amber-500/10 text-amber-600 dark:text-amber-400 hover:bg-amber-500/20 transition-colors shrink-0">
+            {t.connect}
+            {expanded ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
+          </button>
         )}
       </div>
-      {status === 'detected' && onConnect && (
-        <button
-          onClick={onConnect}
-          className="flex items-center gap-1 px-2 py-0.5 text-2xs rounded-md bg-amber-500/10 text-amber-600 dark:text-amber-400 hover:bg-amber-500/20 transition-colors shrink-0"
-        >
-          Connect
-          <ExternalLink size={10} />
-        </button>
+      {status === 'detected' && expanded && (
+        <div className="px-3 pb-2.5 pt-1 border-t border-border/40 space-y-2">
+          <div className="flex items-center justify-between text-2xs text-muted-foreground">
+            <span>Transport: <span className="font-medium text-foreground">{agent.preferredTransport}</span></span>
+            <span>Scope: <span className="font-medium text-foreground">{agent.hasProjectScope ? 'project' : 'global'}</span></span>
+          </div>
+          <button onClick={handleInstall} disabled={installing}
+            className="w-full flex items-center justify-center gap-1.5 px-2.5 py-1.5 text-2xs rounded-md font-medium text-white disabled:opacity-50 transition-colors"
+            style={{ background: 'var(--amber)' }}>
+            {installing ? <Loader2 size={11} className="animate-spin" /> : null}
+            {installing ? t.installing : t.install(agent.name)}
+          </button>
+          {result && (
+            <div className={`flex items-center gap-1.5 text-2xs ${result.type === 'success' ? 'text-emerald-600 dark:text-emerald-400' : 'text-destructive'}`}>
+              {result.type === 'success' ? <CheckCircle2 size={11} /> : <AlertCircle size={11} />}
+              {result.text}
+            </div>
+          )}
+        </div>
       )}
     </div>
   );

package/app/components/panels/PluginsPanel.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { getAllRenderers, isRendererEnabled, setRendererEnabled, loadDisabledState } from '@/lib/renderers/registry';
 import { Toggle } from '../settings/Primitives';
 import PanelHeader from './PanelHeader';
+import { useLocale } from '@/lib/LocaleContext';
 
 interface PluginsPanelProps {
   active: boolean;
@@ -16,6 +17,8 @@ export default function PluginsPanel({ active, maximized, onMaximize }: PluginsP
   const [mounted, setMounted] = useState(false);
   const [, forceUpdate] = useState(0);
   const router = useRouter();
+  const { t } = useLocale();
+  const p = t.panels.plugins;
 
   // Defer renderer reads to client only — avoids hydration mismatch
   useEffect(() => {
@@ -35,14 +38,14 @@ export default function PluginsPanel({ active, maximized, onMaximize }: PluginsP
   return (
     <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
       {/* Header */}
-      <PanelHeader title="Plugins" maximized={maximized} onMaximize={onMaximize}>
-        <span className="text-2xs text-muted-foreground">{enabledCount}/{renderers.length} active</span>
+      <PanelHeader title={p.title} maximized={maximized} onMaximize={onMaximize}>
+        <span className="text-2xs text-muted-foreground">{enabledCount}/{renderers.length} {p.active}</span>
       </PanelHeader>
 
       {/* Plugin list */}
       <div className="flex-1 overflow-y-auto min-h-0">
         {mounted && renderers.length === 0 && (
-          <p className="px-4 py-8 text-sm text-muted-foreground text-center">No plugins registered</p>
+          <p className="px-4 py-8 text-sm text-muted-foreground text-center">{p.noPlugins}</p>
         )}
         {renderers.map(r => {
           const enabled = isRendererEnabled(r.id);
@@ -57,7 +60,7 @@ export default function PluginsPanel({ active, maximized, onMaximize }: PluginsP
                   <span className="text-base shrink-0">{r.icon}</span>
                   <span className="text-sm font-medium text-foreground truncate">{r.name}</span>
                   {r.core && (
-                    <span className="text-2xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground shrink-0">Core</span>
+                    <span className="text-2xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground shrink-0">{p.core}</span>
                   )}
                 </div>
                 <Toggle
@@ -65,7 +68,7 @@ export default function PluginsPanel({ active, maximized, onMaximize }: PluginsP
                   onChange={(v) => handleToggle(r.id, v)}
                   size="sm"
                   disabled={r.core}
-                  title={r.core ? 'Core plugin — cannot be disabled' : undefined}
+                  title={r.core ? p.coreDisabled : undefined}
                 />
               </div>
 
@@ -98,7 +101,7 @@ export default function PluginsPanel({ active, maximized, onMaximize }: PluginsP
       {/* Footer info */}
       <div className="px-4 py-2 border-t border-border shrink-0">
         <p className="text-2xs text-muted-foreground">
-          Plugins customize how files render. Core plugins cannot be disabled.
+          {p.footer}
         </p>
       </div>
     </div>

package/app/components/settings/AiTab.tsx

@@ -4,6 +4,7 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import { AlertCircle, Loader2 } from 'lucide-react';
 import type { AiSettings, AgentSettings, ProviderConfig, SettingsData, AiTabProps } from './types';
 import { Field, Select, Input, EnvBadge, ApiKeyInput, Toggle, SectionLabel } from './Primitives';
+import { useLocale } from '@/lib/LocaleContext';
 
 type TestState = 'idle' | 'testing' | 'ok' | 'error';
 type ErrorCode = 'auth_error' | 'model_not_found' | 'rate_limited' | 'network_error' | 'unknown';
@@ -287,6 +288,7 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
 /* ── Ask AI Display Mode (localStorage-based, no server roundtrip) ── */
 
 function AskDisplayMode() {
+  const { t } = useLocale();
   const [mode, setMode] = useState<'panel' | 'popup'>('panel');
 
   useEffect(() => {
@@ -308,10 +310,10 @@ function AskDisplayMode() {
     <div className="pt-3 border-t border-border">
       <SectionLabel>MindOS Agent</SectionLabel>
       <div className="space-y-4">
-        <Field label="Display Mode" hint="Side panel stays docked on the right. Popup opens a floating dialog.">
+        <Field label={t.settings.askDisplayMode?.label ?? 'Display Mode'} hint={t.settings.askDisplayMode?.hint ?? 'Side panel stays docked on the right. Popup opens a floating dialog.'}>
           <Select value={mode} onChange={e => handleChange(e.target.value)}>
-            <option value="panel">Side Panel</option>
-            <option value="popup">Popup</option>
+            <option value="panel">{t.settings.askDisplayMode?.panel ?? 'Side Panel'}</option>
+            <option value="popup">{t.settings.askDisplayMode?.popup ?? 'Popup'}</option>
           </Select>
         </Field>
       </div>

package/app/components/settings/SettingsContent.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState, useCallback, useRef } from 'react';
-import { Settings, Loader2, AlertCircle, CheckCircle2, RotateCcw, Sparkles, Palette, Database, RefreshCw, Plug, X } from 'lucide-react';
+import { Settings, Loader2, AlertCircle, CheckCircle2, RotateCcw, Sparkles, Palette, Database, RefreshCw, Plug, Download, X } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 import { apiFetch } from '@/lib/api';
 import type { AiSettings, AgentSettings, SettingsData, Tab } from './types';
@@ -10,6 +10,7 @@ import { AppearanceTab } from './AppearanceTab';
 import { KnowledgeTab } from './KnowledgeTab';
 import { SyncTab } from './SyncTab';
 import { McpTab } from './McpTab';
+import { UpdateTab } from './UpdateTab';
 
 interface SettingsContentProps {
   visible: boolean;
@@ -136,6 +137,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
     { id: 'knowledge', label: t.settings.tabs.knowledge, icon: <Settings size={iconSize} /> },
     { id: 'sync', label: t.settings.tabs.sync ?? 'Sync', icon: <RefreshCw size={iconSize} /> },
     { id: 'appearance', label: t.settings.tabs.appearance, icon: <Palette size={iconSize} /> },
+    { id: 'update', label: t.settings.tabs.update ?? 'Update', icon: <Download size={iconSize} /> },
   ];
 
   const activeTabLabel = TABS.find(t2 => t2.id === tab)?.label ?? '';
@@ -149,7 +151,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
           <p className={`${isPanel ? 'text-xs' : 'text-sm'} text-destructive font-medium`}>Failed to load settings</p>
           {!isPanel && <p className="text-xs text-muted-foreground">Check that the server is running and AUTH_TOKEN is configured correctly.</p>}
         </div>
-      ) : !data && tab !== 'appearance' && tab !== 'mcp' && tab !== 'sync' ? (
+      ) : !data && tab !== 'appearance' && tab !== 'mcp' && tab !== 'sync' && tab !== 'update' ? (
         <div className="flex justify-center py-8">
           <Loader2 size={isPanel ? 16 : 18} className="animate-spin text-muted-foreground" />
         </div>
@@ -160,6 +162,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
           {tab === 'knowledge' && data && <KnowledgeTab data={data} setData={setData} t={t} />}
           {tab === 'sync' && <SyncTab t={t} />}
           {tab === 'mcp' && <McpTab t={t} />}
+          {tab === 'update' && <UpdateTab />}
         </>
       )}
     </div>

package/app/components/settings/UpdateTab.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Download, RefreshCw, CheckCircle2, AlertCircle, Loader2, ExternalLink } from 'lucide-react';
+import { apiFetch } from '@/lib/api';
+import { useLocale } from '@/lib/LocaleContext';
+
+interface UpdateInfo {
+  current: string;
+  latest: string;
+  hasUpdate: boolean;
+}
+
+type UpdateState = 'idle' | 'checking' | 'updating' | 'updated' | 'error' | 'timeout';
+
+const CHANGELOG_URL = 'https://github.com/GeminiLight/MindOS/releases';
+const POLL_INTERVAL = 5_000;
+const POLL_TIMEOUT = 4 * 60 * 1000; // 4 minutes
+
+export function UpdateTab() {
+  const { t } = useLocale();
+  const u = t.settings.update;
+  const [info, setInfo] = useState<UpdateInfo | null>(null);
+  const [state, setState] = useState<UpdateState>('idle');
+  const [errorMsg, setErrorMsg] = useState('');
+  const pollRef = useRef<ReturnType<typeof setInterval>>(undefined);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const originalVersion = useRef<string>('');
+
+  const checkUpdate = useCallback(async () => {
+    setState('checking');
+    setErrorMsg('');
+    try {
+      const data = await apiFetch<UpdateInfo>('/api/update-check');
+      setInfo(data);
+      if (!originalVersion.current) originalVersion.current = data.current;
+      setState('idle');
+    } catch {
+      setState('error');
+      setErrorMsg(u?.error ?? 'Failed to check for updates.');
+    }
+  }, [u]);
+
+  useEffect(() => { checkUpdate(); }, [checkUpdate]);
+
+  useEffect(() => {
+    return () => {
+      clearInterval(pollRef.current);
+      clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  const handleUpdate = useCallback(async () => {
+    setState('updating');
+    setErrorMsg('');
+
+    try {
+      await apiFetch('/api/update', { method: 'POST' });
+    } catch {
+      // Expected — server may die during update
+    }
+
+    pollRef.current = setInterval(async () => {
+      try {
+        const data = await apiFetch<UpdateInfo>('/api/update-check');
+        if (data.current !== originalVersion.current) {
+          clearInterval(pollRef.current);
+          clearTimeout(timeoutRef.current);
+          setInfo(data);
+          setState('updated');
+          setTimeout(() => window.location.reload(), 2000);
+        }
+      } catch {
+        // Server still restarting
+      }
+    }, POLL_INTERVAL);
+
+    timeoutRef.current = setTimeout(() => {
+      clearInterval(pollRef.current);
+      setState('timeout');
+    }, POLL_TIMEOUT);
+  }, []);
+
+  return (
+    <div className="space-y-5">
+      {/* Version Card */}
+      <div className="rounded-xl border border-border bg-card p-4 space-y-3">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium text-foreground">MindOS</span>
+          {info && (
+            <span className="text-xs font-mono text-muted-foreground">v{info.current}</span>
+          )}
+        </div>
+
+        {state === 'checking' && (
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <Loader2 size={13} className="animate-spin" />
+            {u?.checking ?? 'Checking for updates...'}
+          </div>
+        )}
+
+        {state === 'idle' && info && !info.hasUpdate && (
+          <div className="flex items-center gap-2 text-xs text-emerald-600 dark:text-emerald-400">
+            <CheckCircle2 size={13} />
+            {u?.upToDate ?? "You're up to date"}
+          </div>
+        )}
+
+        {state === 'idle' && info?.hasUpdate && (
+          <div className="flex items-center gap-2 text-xs" style={{ color: 'var(--amber)' }}>
+            <Download size={13} />
+            {u?.available ? u.available(info.current, info.latest) : `Update available: v${info.current} → v${info.latest}`}
+          </div>
+        )}
+
+        {state === 'updating' && (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-xs" style={{ color: 'var(--amber)' }}>
+              <Loader2 size={13} className="animate-spin" />
+              {u?.updating ?? 'Updating MindOS... The server will restart shortly.'}
+            </div>
+            <p className="text-2xs text-muted-foreground">
+              {u?.updatingHint ?? 'This may take 1–3 minutes. Do not close this page.'}
+            </p>
+          </div>
+        )}
+
+        {state === 'updated' && (
+          <div className="flex items-center gap-2 text-xs text-emerald-600 dark:text-emerald-400">
+            <CheckCircle2 size={13} />
+            {u?.updated ?? 'Updated successfully! Reloading...'}
+          </div>
+        )}
+
+        {state === 'timeout' && (
+          <div className="space-y-1">
+            <div className="flex items-center gap-2 text-xs text-amber-600 dark:text-amber-400">
+              <AlertCircle size={13} />
+              {u?.timeout ?? 'Update may still be in progress.'}
+            </div>
+            <p className="text-2xs text-muted-foreground">
+              {u?.timeoutHint ?? 'Check your terminal:'} <code className="font-mono bg-muted px-1 py-0.5 rounded">mindos logs</code>
+            </p>
+          </div>
+        )}
+
+        {state === 'error' && (
+          <div className="flex items-center gap-2 text-xs text-destructive">
+            <AlertCircle size={13} />
+            {errorMsg}
+          </div>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={checkUpdate}
+          disabled={state === 'checking' || state === 'updating'}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+        >
+          <RefreshCw size={12} className={state === 'checking' ? 'animate-spin' : ''} />
+          {u?.checkButton ?? 'Check for Updates'}
+        </button>
+
+        {info?.hasUpdate && state !== 'updating' && state !== 'updated' && (
+          <button
+            onClick={handleUpdate}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg font-medium text-white transition-colors"
+            style={{ background: 'var(--amber)' }}
+          >
+            <Download size={12} />
+            {u?.updateButton ? u.updateButton(info.latest) : `Update to v${info.latest}`}
+          </button>
+        )}
+      </div>
+
+      {/* Info */}
+      <div className="border-t border-border pt-4 space-y-2">
+        <a
+          href={CHANGELOG_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ExternalLink size={12} />
+          {u?.releaseNotes ?? 'View release notes'}
+        </a>
+        <p className="text-2xs text-muted-foreground/60">
+          {u?.hint ?? 'Updates are installed via npm. Equivalent to running'} <code className="font-mono bg-muted px-1 py-0.5 rounded">mindos update</code> {u?.inTerminal ?? 'in your terminal.'}
+        </p>
+      </div>
+    </div>
+  );
+}