@geminilight/mindos 0.5.28 → 0.5.30

package/app/components/panels/PluginsPanel.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 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;
@@ -15,7 +16,10 @@ interface PluginsPanelProps {
 export default function PluginsPanel({ active, maximized, onMaximize }: PluginsPanelProps) {
   const [mounted, setMounted] = useState(false);
   const [, forceUpdate] = useState(0);
+  const [existingFiles, setExistingFiles] = useState<Set<string>>(new Set());
   const router = useRouter();
+  const { t } = useLocale();
+  const p = t.panels.plugins;
 
   // Defer renderer reads to client only — avoids hydration mismatch
   useEffect(() => {
@@ -23,71 +27,127 @@ export default function PluginsPanel({ active, maximized, onMaximize }: PluginsP
     setMounted(true);
   }, []);
 
+  // Check which entry files exist (once on mount + when active)
+  useEffect(() => {
+    if (!mounted || !active) return;
+    const entryPaths = getAllRenderers()
+      .map(r => r.entryPath)
+      .filter((p): p is string => !!p);
+    if (entryPaths.length === 0) return;
+
+    // Check each file via HEAD-like GET — lightweight
+    Promise.all(
+      entryPaths.map(path =>
+        fetch(`/api/file?path=${encodeURIComponent(path)}`, { method: 'GET' })
+          .then(r => r.ok ? path : null)
+          .catch(() => null)
+      )
+    ).then(results => {
+      setExistingFiles(new Set(results.filter((p): p is string => p !== null)));
+    });
+  }, [mounted, active]);
+
   const renderers = mounted ? getAllRenderers() : [];
   const enabledCount = mounted ? renderers.filter(r => isRendererEnabled(r.id)).length : 0;
 
-  const handleToggle = (id: string, enabled: boolean) => {
+  const handleToggle = useCallback((id: string, enabled: boolean) => {
     setRendererEnabled(id, enabled);
     forceUpdate(n => n + 1);
     window.dispatchEvent(new Event('renderer-state-changed'));
-  };
+  }, []);
+
+  const handleOpen = useCallback((entryPath: string) => {
+    router.push(`/view/${entryPath.split('/').map(encodeURIComponent).join('/')}`);
+  }, [router]);
 
   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);
+          const fileExists = r.entryPath ? existingFiles.has(r.entryPath) : false;
+          const canOpen = enabled && r.entryPath && fileExists;
+
           return (
             <div
               key={r.id}
-              className="px-4 py-3 border-b border-border/50 hover:bg-muted/30 transition-colors"
+              className={`
+                px-4 py-3 border-b border-border/50 transition-colors
+                ${canOpen ? 'cursor-pointer hover:bg-muted/40' : 'hover:bg-muted/20'}
+                ${!enabled ? 'opacity-50' : ''}
+              `}
+              onClick={canOpen ? () => handleOpen(r.entryPath!) : undefined}
+              role={canOpen ? 'link' : undefined}
             >
-              {/* Top row: icon + name + toggle */}
+              {/* Top row: status dot + icon + name + toggle */}
               <div className="flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2.5 min-w-0">
-                  <span className="text-base shrink-0">{r.icon}</span>
+                  {/* Status dot */}
+                  <span
+                    className="w-1.5 h-1.5 rounded-full shrink-0"
+                    style={{
+                      background: !enabled
+                        ? 'var(--muted-foreground)'
+                        : canOpen
+                          ? 'var(--success)'
+                          : 'var(--border)',
+                    }}
+                    title={
+                      !enabled
+                        ? p.disabled ?? 'Disabled'
+                        : canOpen
+                          ? p.ready ?? 'Ready'
+                          : p.noFile ?? 'File not found'
+                    }
+                  />
+                  <span className="text-base shrink-0" suppressHydrationWarning>{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
-                  checked={enabled}
-                  onChange={(v) => handleToggle(r.id, v)}
-                  size="sm"
-                  disabled={r.core}
-                  title={r.core ? 'Core plugin — cannot be disabled' : undefined}
-                />
+                {/* Toggle — stop propagation to prevent row click */}
+                <div onClick={e => e.stopPropagation()}>
+                  <Toggle
+                    checked={enabled}
+                    onChange={(v) => handleToggle(r.id, v)}
+                    size="sm"
+                    disabled={r.core}
+                    title={r.core ? p.coreDisabled : undefined}
+                  />
+                </div>
               </div>
 
               {/* Description */}
-              <p className="mt-1 text-xs text-muted-foreground leading-relaxed pl-[30px]">
+              <p className="mt-1 text-xs text-muted-foreground leading-relaxed pl-[34px]">
                 {r.description}
               </p>
 
-              {/* Tags + entry path */}
-              <div className="mt-1.5 flex items-center gap-1.5 pl-[30px] flex-wrap">
+              {/* Tags + status hint */}
+              <div className="mt-1.5 flex items-center gap-1.5 pl-[34px] flex-wrap">
                 {r.tags.slice(0, 3).map(tag => (
                   <span key={tag} className="text-2xs px-1.5 py-0.5 rounded-full bg-muted/60 text-muted-foreground">
                     {tag}
                   </span>
                 ))}
-                {r.entryPath && enabled && (
-                  <button
-                    onClick={() => router.push(`/view/${r.entryPath!.split('/').map(encodeURIComponent).join('/')}`)}
-                    className="text-2xs px-1.5 py-0.5 rounded-full text-[var(--amber)] hover:bg-[var(--amber-dim)] transition-colors focus-visible:ring-2 focus-visible:ring-ring"
-                  >
+                {r.entryPath && enabled && !fileExists && (
+                  <span className="text-2xs" style={{ color: 'var(--amber)' }}>
+                    {(p.createFile ?? 'Create {file}').replace('{file}', r.entryPath)}
+                  </span>
+                )}
+                {canOpen && (
+                  <span className="text-2xs" style={{ color: 'var(--amber)' }}>
                     → {r.entryPath}
-                  </button>
+                  </span>
                 )}
               </div>
             </div>
@@ -98,7 +158,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/McpSkillsSection.tsx

@@ -6,6 +6,7 @@ import {
   Trash2, Plus, X, Search, Pencil,
 } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
+import { useMcpDataOptional } from '@/hooks/useMcpData';
 import { Toggle } from './Primitives';
 import dynamic from 'next/dynamic';
 import type { SkillInfo, McpSkillsSectionProps } from './types';
@@ -83,6 +84,7 @@ const SKILL_TEMPLATES: Record<string, (name: string) => string> = {
 
 export default function SkillsSection({ t }: McpSkillsSectionProps) {
   const m = t.settings?.mcp;
+  const mcp = useMcpDataOptional();
   const [skills, setSkills] = useState<SkillInfo[]>([]);
   const [loading, setLoading] = useState(true);
   const [expanded, setExpanded] = useState<string | null>(null);
@@ -131,6 +133,13 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
   const builtinSkills = useMemo(() => filtered.filter(s => s.source === 'builtin'), [filtered]);
 
   const handleToggle = async (name: string, enabled: boolean) => {
+    // Delegate to McpProvider when available — single API call, no event storm
+    if (mcp) {
+      await mcp.toggleSkill(name, enabled);
+      setSkills(prev => prev.map(s => s.name === name ? { ...s, enabled } : s));
+      return;
+    }
+    // Fallback: direct API call (no McpProvider context)
     try {
       await apiFetch('/api/skills', {
         method: 'POST',
@@ -160,6 +169,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
       if (expanded === name) setExpanded(null);
       setLoadErrors(prev => { const next = { ...prev }; delete next[name]; return next; });
       fetchSkills();
+      window.dispatchEvent(new Event('mindos:skills-changed'));
     } catch (err) {
       const msg = err instanceof Error ? err.message : 'Failed to delete skill';
       console.error('handleDelete error:', msg);
@@ -212,6 +222,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
       setFullContent(prev => ({ ...prev, [name]: editContent }));
       setEditing(null);
       fetchSkills(); // refresh description from updated frontmatter
+      window.dispatchEvent(new Event('mindos:skills-changed'));
     } catch (err: unknown) {
       setEditError(err instanceof Error ? err.message : 'Failed to save skill');
     } finally {
@@ -247,6 +258,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
       setNewName('');
       setNewContent('');
       fetchSkills();
+      window.dispatchEvent(new Event('mindos:skills-changed'));
     } catch (err: unknown) {
       setCreateError(err instanceof Error ? err.message : 'Failed to create skill');
     } finally {

package/app/components/settings/McpTab.tsx

@@ -1,8 +1,6 @@
-import { useState, useEffect, useCallback } from 'react';
 import { Loader2 } from 'lucide-react';
-import { apiFetch } from '@/lib/api';
-import type { McpStatus, AgentInfo, McpTabProps } from './types';
-import ServerStatus from './McpServerStatus';
+import { useMcpDataOptional } from '@/hooks/useMcpData';
+import type { McpTabProps } from './types';
 import AgentInstall from './McpAgentInstall';
 import SkillsSection from './McpSkillsSection';
 
@@ -12,25 +10,10 @@ export type { McpStatus, AgentInfo, SkillInfo, McpTabProps } from './types';
 /* ── Main McpTab ───────────────────────────────────────────────── */
 
 export function McpTab({ t }: McpTabProps) {
-  const [mcpStatus, setMcpStatus] = useState<McpStatus | null>(null);
-  const [agents, setAgents] = useState<AgentInfo[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  const fetchAll = useCallback(async () => {
-    try {
-      const [statusData, agentsData] = await Promise.all([
-        apiFetch<McpStatus>('/api/mcp/status'),
-        apiFetch<{ agents: AgentInfo[] }>('/api/mcp/agents'),
-      ]);
-      setMcpStatus(statusData);
-      setAgents(agentsData.agents);
-    } catch { /* ignore */ }
-    setLoading(false);
-  }, []);
-
-  useEffect(() => { fetchAll(); }, [fetchAll]);
+  const mcp = useMcpDataOptional();
+  const m = t.settings?.mcp;
 
-  if (loading) {
+  if (!mcp || mcp.loading) {
     return (
       <div className="flex justify-center py-8">
         <Loader2 size={18} className="animate-spin text-muted-foreground" />
@@ -38,23 +21,38 @@ export function McpTab({ t }: McpTabProps) {
     );
   }
 
-  const m = t.settings?.mcp;
-
   return (
     <div className="space-y-6">
-      {/* MCP Server Status */}
-      <ServerStatus status={mcpStatus} agents={agents} t={t} />
-
-      {/* Skills */}
+      {/* Server status summary (minimal — full status is in sidebar AgentsPanel) */}
+      {mcp.status && (
+        <div className="rounded-xl border p-4 space-y-2" style={{ borderColor: 'var(--border)', background: 'var(--card)' }}>
+          <div className="flex items-center gap-2.5 text-xs">
+            <span className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${mcp.status.running ? 'bg-success' : 'bg-muted-foreground'}`} />
+            <span className="text-foreground font-medium">
+              {mcp.status.running ? (m?.running ?? 'Running') : (m?.stopped ?? 'Stopped')}
+            </span>
+            {mcp.status.running && (
+              <>
+                <span className="text-muted-foreground">·</span>
+                <span className="font-mono text-muted-foreground">{mcp.status.endpoint}</span>
+                <span className="text-muted-foreground">·</span>
+                <span className="text-muted-foreground">{mcp.status.toolCount} tools</span>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Skills (full CRUD — search, edit, delete, create, language switch) */}
       <div>
         <h3 className="text-sm font-medium text-foreground mb-3">{m?.skillsTitle ?? 'Skills'}</h3>
         <SkillsSection t={t} />
       </div>
 
-      {/* Agent Configuration */}
+      {/* Batch Agent Install */}
       <div>
         <h3 className="text-sm font-medium text-foreground mb-3">{m?.agentsTitle ?? 'Agent Configuration'}</h3>
-        <AgentInstall agents={agents} t={t} onRefresh={fetchAll} />
+        <AgentInstall agents={mcp.agents} t={t} onRefresh={mcp.refresh} />
       </div>
     </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>
+  );
+}

package/app/components/settings/types.ts

@@ -33,7 +33,7 @@ export interface SettingsData {
   envValues?: Record<string, string>;
 }
 
-export type Tab = 'ai' | 'appearance' | 'knowledge' | 'mcp' | 'sync';
+export type Tab = 'ai' | 'appearance' | 'knowledge' | 'mcp' | 'sync' | 'update';
 
 export const CONTENT_WIDTHS = [
   { value: '680px', label: 'Narrow (680px)' },