@geminilight/mindos 0.6.8 → 0.6.13

package/app/components/settings/PluginsTab.tsx

@@ -30,7 +30,7 @@ export function PluginsTab({ pluginStates, setPluginStates, t }: PluginsTabProps
                       <div className="flex items-center gap-2 flex-wrap">
                         <span className="text-sm font-medium text-foreground">{renderer.name}</span>
                         {isCore && (
-                          <span className="text-2xs px-1.5 py-0.5 rounded bg-[var(--amber-subtle)] text-[var(--amber)] font-mono">
+                          <span className="text-2xs px-1.5 py-0.5 rounded bg-[var(--amber-subtle)] text-[var(--amber-text)] font-mono">
                             core
                           </span>
                         )}

package/app/components/settings/Primitives.tsx

@@ -1,5 +1,8 @@
 'use client';
 
+import React, { useState, useRef, useEffect, useCallback, useMemo, useId } from 'react';
+import { ChevronDown, Check } from 'lucide-react';
+
 export function SectionLabel({ children }: { children: React.ReactNode }) {
   return <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">{children}</p>;
 }
@@ -23,19 +26,128 @@ export function Input({ className = '', ...props }: React.InputHTMLAttributes<HT
   );
 }
 
-export function Select({ className = '', ...props }: React.SelectHTMLAttributes<HTMLSelectElement>) {
+interface SelectOption { value: string; label: string }
+
+export function Select({ value, onChange, children, className = '', disabled }: {
+  value?: string;
+  onChange?: (e: { target: { value: string } }) => void;
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+}) {
+  const uid = useId();
+  const [open, setOpen] = useState(false);
+  const [focusIdx, setFocusIdx] = useState(-1);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const options = useMemo<SelectOption[]>(() =>
+    React.Children.toArray(children)
+      .filter((c): c is React.ReactElement => React.isValidElement(c) && (c as React.ReactElement).type === 'option')
+      .map(c => ({
+        value: String((c as React.ReactElement<{ value?: string; children?: React.ReactNode }>).props.value ?? ''),
+        label: String((c as React.ReactElement<{ value?: string; children?: React.ReactNode }>).props.children ?? (c as React.ReactElement<{ value?: string }>).props.value ?? ''),
+      })),
+    [children],
+  );
+
+  const selectedIdx = options.findIndex(o => o.value === value);
+  const selectedLabel = options[selectedIdx]?.label ?? '';
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  useEffect(() => {
+    if (open && listRef.current && focusIdx >= 0) {
+      const el = listRef.current.children[focusIdx] as HTMLElement | undefined;
+      el?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [open, focusIdx]);
+
+  const select = useCallback((idx: number) => {
+    if (idx >= 0 && idx < options.length) {
+      onChange?.({ target: { value: options[idx].value } });
+      setOpen(false);
+    }
+  }, [options, onChange]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (!open) {
+      if (['Enter', ' ', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
+        e.preventDefault();
+        setOpen(true);
+        setFocusIdx(selectedIdx >= 0 ? selectedIdx : 0);
+      }
+      return;
+    }
+    switch (e.key) {
+      case 'ArrowDown': e.preventDefault(); setFocusIdx(i => Math.min(i + 1, options.length - 1)); break;
+      case 'ArrowUp':   e.preventDefault(); setFocusIdx(i => Math.max(i - 1, 0)); break;
+      case 'Enter': case ' ': e.preventDefault(); select(focusIdx); break;
+      case 'Escape': e.preventDefault(); setOpen(false); break;
+      case 'Tab': setOpen(false); break;
+    }
+  }, [open, options.length, selectedIdx, focusIdx, select]);
+
   return (
-    <select
-      {...props}
-      className={`w-full px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 ${className}`}
-    />
+    <div ref={containerRef} className={`relative ${className}`}>
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => { setOpen(o => !o); setFocusIdx(selectedIdx >= 0 ? selectedIdx : 0); }}
+        onKeyDown={handleKeyDown}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className="w-full px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground text-left flex items-center justify-between gap-2 outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        <span className={`truncate ${selectedLabel ? '' : 'text-muted-foreground'}`}>{selectedLabel || '—'}</span>
+        <ChevronDown size={14} className={`shrink-0 text-muted-foreground transition-transform duration-150 ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && (
+        <div
+          ref={listRef}
+          role="listbox"
+          aria-activedescendant={focusIdx >= 0 ? `${uid}-opt-${focusIdx}` : undefined}
+          className="absolute z-20 w-full mt-1 py-1 border border-border rounded-lg bg-card shadow-lg max-h-60 overflow-auto animate-in fade-in-0 zoom-in-95 duration-100"
+        >
+          {options.map((opt, idx) => {
+            const isSelected = opt.value === value;
+            const isFocused = idx === focusIdx;
+            return (
+              <button
+                key={opt.value}
+                id={`${uid}-opt-${idx}`}
+                role="option"
+                aria-selected={isSelected}
+                type="button"
+                onMouseDown={e => { e.preventDefault(); select(idx); }}
+                onMouseEnter={() => setFocusIdx(idx)}
+                className={`w-full px-3 py-1.5 text-sm text-left flex items-center gap-2 transition-colors ${
+                  isFocused ? 'bg-accent text-accent-foreground' : 'text-foreground'
+                }`}
+              >
+                <Check size={14} className={`shrink-0 ${isSelected ? 'text-[var(--amber)]' : 'invisible'}`} />
+                <span className="truncate">{opt.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
   );
 }
 
 export function EnvBadge({ overridden }: { overridden: boolean }) {
   if (!overridden) return null;
   return (
-    <span className="text-2xs px-1.5 py-0.5 rounded bg-[var(--amber-subtle)] text-[var(--amber)] font-mono ml-1.5">env</span>
+    <span className="text-2xs px-1.5 py-0.5 rounded bg-[var(--amber-subtle)] text-[var(--amber-text)] font-mono ml-1.5">env</span>
   );
 }
 

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, Download, X } from 'lucide-react';
+import { Settings, Loader2, AlertCircle, CheckCircle2, RotateCcw, Sparkles, Palette, Database, RefreshCw, Plug, Download, X, Trash2 } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 import { apiFetch } from '@/lib/api';
 import type { AiSettings, AgentSettings, SettingsData, Tab } from './types';
@@ -11,6 +11,7 @@ import { KnowledgeTab } from './KnowledgeTab';
 import { SyncTab } from './SyncTab';
 import { McpTab } from './McpTab';
 import { UpdateTab } from './UpdateTab';
+import { UninstallTab } from './UninstallTab';
 
 interface SettingsContentProps {
   visible: boolean;
@@ -156,6 +157,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
     { id: 'appearance', label: t.settings.tabs.appearance, icon: <Palette size={iconSize} /> },
     { id: 'sync', label: t.settings.tabs.sync ?? 'Sync', icon: <RefreshCw size={iconSize} /> },
     { id: 'update', label: t.settings.tabs.update ?? 'Update', icon: <Download size={iconSize} />, badge: hasUpdate },
+    { id: 'uninstall', label: t.settings.tabs.uninstall ?? 'Uninstall', icon: <Trash2 size={iconSize} /> },
   ];
 
   const activeTabLabel = TABS.find(t2 => t2.id === tab)?.label ?? '';
@@ -169,7 +171,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' && tab !== 'update' ? (
+      ) : !data && tab !== 'appearance' && tab !== 'mcp' && tab !== 'sync' && tab !== 'update' && tab !== 'uninstall' ? (
         <div className="flex justify-center py-8">
           <Loader2 size={isPanel ? 16 : 18} className="animate-spin text-muted-foreground" />
         </div>
@@ -181,6 +183,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
           {tab === 'sync' && <SyncTab t={t} />}
           {tab === 'mcp' && <McpTab t={t} />}
           {tab === 'update' && <UpdateTab />}
+          {tab === 'uninstall' && <UninstallTab />}
         </>
       )}
     </div>

package/app/components/settings/UninstallTab.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import { useState } from 'react';
+import { Trash2, AlertTriangle, CheckCircle2, Loader2, ShieldCheck } from 'lucide-react';
+import { apiFetch } from '@/lib/api';
+import { useLocale } from '@/lib/LocaleContext';
+
+type Phase = 'idle' | 'confirming' | 'running' | 'success' | 'error';
+
+interface DesktopBridge {
+  uninstallApp?: () => Promise<{ ok: boolean; error?: string }>;
+}
+
+function getDesktopBridge(): DesktopBridge | null {
+  if (typeof window === 'undefined') return null;
+  const w = window as unknown as { mindos?: DesktopBridge };
+  return w.mindos?.uninstallApp ? (w.mindos as DesktopBridge) : null;
+}
+
+export function UninstallTab() {
+  const { t } = useLocale();
+  const u = t.settings.uninstall;
+  const isDesktop = !!getDesktopBridge();
+
+  const [phase, setPhase] = useState<Phase>('idle');
+  const [errorMsg, setErrorMsg] = useState('');
+
+  // Checkboxes — "stop services" is always on (not toggleable)
+  // CLI mode: stop + config + npm uninstall (npm always runs as part of CLI uninstall)
+  // Desktop mode: stop + config + move app to Trash
+  const [removeConfig, setRemoveConfig] = useState(true);
+  const [removeApp, setRemoveApp] = useState(true); // Desktop only
+
+  const handleUninstall = async () => {
+    setPhase('running');
+    setErrorMsg('');
+    try {
+      // Step 1: Server-side cleanup (stop services, daemon, config, npm)
+      await apiFetch('/api/uninstall', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ removeConfig }),
+      });
+
+      // Step 2: Desktop self-deletion (if selected)
+      if (isDesktop && removeApp) {
+        const bridge = getDesktopBridge();
+        if (bridge?.uninstallApp) {
+          const result = await bridge.uninstallApp();
+          if (!result.ok) throw new Error(result.error || 'Failed to remove app');
+          // Desktop will quit after this — show success briefly
+          setPhase('success');
+          return;
+        }
+      }
+
+      setPhase('success');
+    } catch (err) {
+      setErrorMsg(err instanceof Error ? err.message : String(err));
+      setPhase('error');
+    }
+  };
+
+  const Checkbox = ({ checked, onChange, label, desc, disabled }: {
+    checked: boolean; onChange: (v: boolean) => void; label: string; desc: string; disabled?: boolean;
+  }) => (
+    <label className={`flex items-start gap-2.5 p-2.5 rounded bg-muted/30 cursor-pointer select-none ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-muted/50'}`}>
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={e => !disabled && onChange(e.target.checked)}
+        disabled={disabled}
+        className="mt-0.5 accent-[var(--amber)] focus-visible:ring-1 focus-visible:ring-ring"
+      />
+      <div>
+        <p className="text-xs font-medium text-foreground">{label}</p>
+        <p className="text-[11px] text-muted-foreground">{desc}</p>
+      </div>
+    </label>
+  );
+
+  return (
+    <div className="space-y-5">
+      {/* Header */}
+      <div>
+        <h3 className="text-sm font-medium text-foreground flex items-center gap-2">
+          <Trash2 size={14} className="text-muted-foreground" />
+          {u.title}
+        </h3>
+        <p className="text-xs text-muted-foreground mt-1">
+          {isDesktop ? u.descDesktop : u.descCli}
+        </p>
+      </div>
+
+      {/* Knowledge base safety note */}
+      <div className="flex gap-2.5 p-3 rounded-md bg-muted/50 border border-border">
+        <ShieldCheck size={14} className="text-success shrink-0 mt-0.5" />
+        <p className="text-xs text-muted-foreground leading-relaxed">{u.kbSafe}</p>
+      </div>
+
+      {/* Checklist */}
+      {phase === 'idle' || phase === 'confirming' ? (
+        <div className="space-y-2">
+          <Checkbox checked disabled label={u.stopServices} desc={u.stopServicesDesc} onChange={() => {}} />
+          <Checkbox checked={removeConfig} onChange={setRemoveConfig} label={u.removeConfig} desc={u.removeConfigDesc} />
+          {!isDesktop && (
+            <Checkbox checked disabled label={u.removeNpm} desc={u.removeNpmDesc} onChange={() => {}} />
+          )}
+          {isDesktop && (
+            <Checkbox checked={removeApp} onChange={setRemoveApp} label={u.removeApp} desc={u.removeAppDesc} />
+          )}
+        </div>
+      ) : null}
+
+      {/* Action area */}
+      {phase === 'idle' && (
+        <button
+          onClick={() => setPhase('confirming')}
+          className="px-3 py-1.5 text-xs font-medium rounded-md bg-error/10 text-error border border-error/20 hover:bg-error/20 transition-colors focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-40 disabled:cursor-not-allowed"
+        >
+          <Trash2 size={12} className="inline mr-1.5 -mt-px" />
+          {u.confirmButton}
+        </button>
+      )}
+
+      {phase === 'confirming' && (
+        <div className="p-3 rounded-md border border-error/30 bg-error/5 space-y-2.5">
+          <p className="text-xs font-medium text-error">{u.confirmTitle}</p>
+          <div className="flex gap-2">
+            <button
+              onClick={handleUninstall}
+              className="px-3 py-1.5 text-xs font-medium rounded-md bg-error text-white hover:bg-error/90 transition-colors focus-visible:ring-1 focus-visible:ring-ring"
+            >
+              {u.confirmButton}
+            </button>
+            <button
+              onClick={() => setPhase('idle')}
+              className="px-3 py-1.5 text-xs font-medium rounded-md bg-muted text-foreground hover:bg-muted/80 transition-colors focus-visible:ring-1 focus-visible:ring-ring"
+            >
+              {u.cancelButton}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {phase === 'running' && (
+        <div className="flex items-center gap-2 py-2">
+          <Loader2 size={14} className="animate-spin text-muted-foreground" />
+          <span className="text-xs text-muted-foreground">{u.running}</span>
+        </div>
+      )}
+
+      {phase === 'success' && (
+        <div className="flex items-center gap-2 py-2">
+          <CheckCircle2 size={14} className="text-success" />
+          <span className="text-xs text-success font-medium">
+            {isDesktop && removeApp ? u.successDesktop : u.success}
+          </span>
+        </div>
+      )}
+
+      {phase === 'error' && (
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <AlertTriangle size={14} className="text-error" />
+            <span className="text-xs text-error font-medium">{u.error}</span>
+          </div>
+          {errorMsg && <p className="text-[11px] text-muted-foreground font-mono">{errorMsg}</p>}
+          <button
+            onClick={() => setPhase('idle')}
+            className="px-3 py-1.5 text-xs font-medium rounded-md bg-muted text-foreground hover:bg-muted/80 transition-colors focus-visible:ring-1 focus-visible:ring-ring"
+          >
+            {u.cancelButton}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/app/components/settings/UpdateTab.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { Download, RefreshCw, CheckCircle2, AlertCircle, Loader2, ExternalLink, Circle, Monitor } from 'lucide-react';
-import { apiFetch } from '@/lib/api';
+import { apiFetch, ApiError } from '@/lib/api';
 import { useLocale } from '@/lib/LocaleContext';
 
 interface MindosDesktopBridge {
@@ -144,7 +144,7 @@ function DesktopUpdateTab() {
         )}
 
         {state === 'idle' && available && (
-          <div className="flex items-center gap-2 text-xs text-[var(--amber)]">
+          <div className="flex items-center gap-2 text-xs text-[var(--amber-text)]">
             <Download size={13} />
             {version ? `Update available: v${version}` : 'Update available'}
           </div>
@@ -262,6 +262,12 @@ function BrowserUpdateTab() {
         localStorage.removeItem('mindos_update_latest');
         localStorage.removeItem('mindos_update_dismissed');
         window.dispatchEvent(new Event('mindos:update-dismissed'));
+      } else {
+        const dismissed = localStorage.getItem('mindos_update_dismissed');
+        localStorage.setItem('mindos_update_latest', data.latest);
+        window.dispatchEvent(new Event(
+          data.latest === dismissed ? 'mindos:update-dismissed' : 'mindos:update-available',
+        ));
       }
       setState('idle');
     } catch {
@@ -387,7 +393,13 @@ function BrowserUpdateTab() {
 
     try {
       await apiFetch('/api/update', { method: 'POST' });
-    } catch {
+    } catch (err) {
+      if (err instanceof ApiError) {
+        localStorage.removeItem(UPDATE_STATE_KEY);
+        setUpdateError(err.message || 'Update failed');
+        setState('error');
+        return;
+      }
       // Expected — server may die during update
     }
 
@@ -429,7 +441,7 @@ function BrowserUpdateTab() {
         )}
 
         {state === 'idle' && info?.hasUpdate && (
-          <div className="flex items-center gap-2 text-xs text-[var(--amber)]">
+          <div className="flex items-center gap-2 text-xs text-[var(--amber-text)]">
             <Download size={13} />
             {u?.available ? u.available(info.current, info.latest) : `Update available: v${info.current} → v${info.latest}`}
           </div>
@@ -474,7 +486,7 @@ function BrowserUpdateTab() {
 
         {state === 'timeout' && (
           <div className="space-y-2">
-            <div className="flex items-center gap-2 text-xs text-[var(--amber)]">
+            <div className="flex items-center gap-2 text-xs text-[var(--amber-text)]">
               <AlertCircle size={13} />
               {u?.timeout ?? 'Update may still be in progress.'}
             </div>

package/app/components/settings/types.ts

@@ -20,6 +20,7 @@ export interface AgentSettings {
   enableThinking?: boolean;
   thinkingBudget?: number;
   contextStrategy?: 'auto' | 'off';
+  reconnectRetries?: number;
 }
 
 export interface SettingsData {
@@ -33,7 +34,7 @@ export interface SettingsData {
   envValues?: Record<string, string>;
 }
 
-export type Tab = 'ai' | 'appearance' | 'knowledge' | 'mcp' | 'sync' | 'update';
+export type Tab = 'ai' | 'appearance' | 'knowledge' | 'mcp' | 'sync' | 'update' | 'uninstall';
 
 export const CONTENT_WIDTHS = [
   { value: '680px', label: 'Narrow (680px)' },

package/app/components/setup/StepDots.tsx

@@ -16,7 +16,7 @@ export default function StepDots({ step, setStep, stepTitles, disabled }: StepDo
           <button onClick={() => setStep(i)}
             aria-current={i === step ? 'step' : undefined}
             aria-label={title}
-            className="flex items-center gap-1.5 p-1 -m-1 disabled:cursor-not-allowed disabled:opacity-60"
+            className="flex flex-col items-center gap-1 p-1 -m-1 disabled:cursor-not-allowed disabled:opacity-60"
             disabled={disabled || i >= step}>
             <div
               className="w-6 h-6 rounded-full text-xs font-medium flex items-center justify-center transition-colors"
@@ -27,7 +27,7 @@ export default function StepDots({ step, setStep, stepTitles, disabled }: StepDo
               }}>
               {i + 1}
             </div>
-            <span className="text-xs hidden sm:inline"
+            <span className="text-[10px] leading-tight hidden sm:inline max-w-[4rem] text-center truncate"
               style={{ color: i === step ? 'var(--foreground)' : 'var(--muted-foreground)', opacity: i <= step ? 1 : 0.5 }}>
               {title}
             </span>

package/app/components/ui/dialog.tsx

@@ -31,7 +31,7 @@ function DialogOverlay({
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 overlay-backdrop duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}