@geminilight/mindos 0.6.73 → 0.6.74

package/_standalone/components/settings/SettingsContent.tsx

@@ -1,437 +0,0 @@
-'use client';
-
-import { useEffect, useState, useCallback, useRef } from 'react';
-import { Settings, Loader2, AlertCircle, CheckCircle2, RotateCcw, Sparkles, Palette, Database, RefreshCw, Plug, Download, X, Trash2, HelpCircle } from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import { useLocale } from '@/lib/stores/locale-store';
-import { apiFetch } from '@/lib/api';
-import type { AiSettings, AgentSettings, SettingsData, Tab } from './types';
-import { AiTab } from './AiTab';
-import { AppearanceTab } from './AppearanceTab';
-import { KnowledgeTab } from './KnowledgeTab';
-import { SyncTab } from './SyncTab';
-import { McpTab } from './McpTab';
-import { UpdateTab } from './UpdateTab';
-import { UninstallTab } from './UninstallTab';
-
-interface SettingsContentProps {
-  visible: boolean;
-  initialTab?: Tab;
-  variant: 'modal' | 'panel';
-  onClose?: () => void;
-}
-
-export default function SettingsContent({ visible, initialTab, variant, onClose }: SettingsContentProps) {
-  const [tab, setTab] = useState<Tab>('ai');
-  const [data, setData] = useState<SettingsData | null>(null);
-  const [saving, setSaving] = useState(false);
-  const [status, setStatus] = useState<'idle' | 'saved' | 'error' | 'load-error'>('idle');
-  const { t, locale, setLocale } = useLocale();
-  const router = useRouter();
-  const saveTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
-  const dataLoaded = useRef(false);
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  const [font, setFont] = useState('lora');
-  const [fontSize, setFontSize] = useState('15px');
-  const [contentWidth, setContentWidth] = useState('780px');
-  const [dark, setDark] = useState(true);
-
-  // Update available badge on Update tab
-  const [hasUpdate, setHasUpdate] = useState(() => {
-    if (typeof window === 'undefined') return false;
-    const dismissed = localStorage.getItem('mindos_update_dismissed');
-    const latest = localStorage.getItem('mindos_update_latest');
-    return !!latest && latest !== dismissed;
-  });
-  useEffect(() => {
-    const onAvail = () => setHasUpdate(true);
-    const onDismiss = () => setHasUpdate(false);
-    window.addEventListener('mindos:update-available', onAvail);
-    window.addEventListener('mindos:update-dismissed', onDismiss);
-    return () => {
-      window.removeEventListener('mindos:update-available', onAvail);
-      window.removeEventListener('mindos:update-dismissed', onDismiss);
-    };
-  }, []);
-
-  const isPanel = variant === 'panel';
-
-  // Init data when becoming visible
-  const prevVisibleRef = useRef(false);
-  useEffect(() => {
-    const justOpened = isPanel
-      ? (visible && !prevVisibleRef.current)
-      : visible;
-
-    if (justOpened) {
-      apiFetch<SettingsData>('/api/settings').then(d => { setData(d); dataLoaded.current = true; }).catch(() => setStatus('load-error'));
-      setFont(localStorage.getItem('prose-font') === 'geist' ? 'inter' : localStorage.getItem('prose-font') ?? 'ibm-plex-sans');
-      setFontSize(localStorage.getItem('prose-font-size') ?? '15px');
-      setContentWidth(localStorage.getItem('content-width') ?? '780px');
-      const stored = localStorage.getItem('theme');
-      setDark(stored ? stored === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches);
-      setStatus('idle');
-    }
-    if (!visible) { dataLoaded.current = false; }
-    prevVisibleRef.current = visible;
-  }, [visible, isPanel]);
-
-  useEffect(() => {
-    if (visible && initialTab) switchTab(initialTab);
-  }, [visible, initialTab]);
-
-  const switchTab = useCallback((id: Tab) => {
-    setTab(id);
-    contentRef.current?.scrollTo?.(0, 0);
-  }, []);
-
-  useEffect(() => {
-    const fontMap: Record<string, string> = {
-      'lora': "'Lora', Georgia, serif",
-      'ibm-plex-sans': "'IBM Plex Sans', sans-serif",
-      'inter': 'var(--font-inter), sans-serif',
-      'ibm-plex-mono': "'IBM Plex Mono', monospace",
-    };
-    document.documentElement.style.setProperty('--prose-font-override', fontMap[font] ?? '');
-    localStorage.setItem('prose-font', font);
-  }, [font]);
-
-  useEffect(() => {
-    document.documentElement.style.setProperty('--prose-font-size-override', fontSize);
-    localStorage.setItem('prose-font-size', fontSize);
-  }, [fontSize]);
-
-  useEffect(() => {
-    document.documentElement.style.setProperty('--content-width-override', contentWidth);
-    localStorage.setItem('content-width', contentWidth);
-  }, [contentWidth]);
-
-  // Esc to close — modal only
-  useEffect(() => {
-    if (variant !== 'modal' || !visible || !onClose) return;
-    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [variant, visible, onClose]);
-
-  const doSave = useCallback(async (d: SettingsData) => {
-    setSaving(true);
-    try {
-      await apiFetch('/api/settings', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ai: d.ai, agent: d.agent, mindRoot: d.mindRoot, webPassword: d.webPassword, authToken: d.authToken }),
-      });
-      setStatus('saved');
-      window.dispatchEvent(new Event('mindos:settings-changed'));
-      setTimeout(() => setStatus('idle'), 2500);
-    } catch {
-      setStatus('error');
-      setTimeout(() => setStatus('idle'), 2500);
-    } finally {
-      setSaving(false);
-    }
-  }, []);
-
-  // Track unsaved data so we can flush on close/unmount
-  const pendingData = useRef<SettingsData | null>(null);
-
-  useEffect(() => {
-    if (!data || !dataLoaded.current) return;
-    pendingData.current = data;
-    clearTimeout(saveTimer.current);
-    saveTimer.current = setTimeout(() => {
-      pendingData.current = null;
-      doSave(data);
-    }, 800);
-    return () => clearTimeout(saveTimer.current);
-  }, [data, doSave]);
-
-  // Flush unsaved changes when panel hides (panel variant)
-  useEffect(() => {
-    if (!visible && pendingData.current) {
-      const d = pendingData.current;
-      pendingData.current = null;
-      clearTimeout(saveTimer.current);
-      doSave(d);
-    }
-  }, [visible, doSave]);
-
-  // Flush unsaved changes on unmount (modal variant: SettingsModal returns null when !open)
-  useEffect(() => {
-    return () => {
-      if (pendingData.current) {
-        clearTimeout(saveTimer.current);
-        const d = pendingData.current;
-        pendingData.current = null;
-        apiFetch('/api/settings', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ ai: d.ai, agent: d.agent, mindRoot: d.mindRoot, webPassword: d.webPassword, authToken: d.authToken }),
-        }).catch(() => {});
-      }
-    };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const updateAi = useCallback((patch: Partial<AiSettings>) => {
-    setData(d => d ? { ...d, ai: { ...d.ai, ...patch } } : d);
-  }, []);
-
-  const updateAgent = useCallback((patch: Partial<AgentSettings>) => {
-    setData(d => d ? { ...d, agent: { ...(d.agent ?? {}), ...patch } } : d);
-  }, []);
-
-  const restoreFromEnv = useCallback(async () => {
-    if (!data) return;
-    const defaults: AiSettings = {
-      activeProvider: '',
-      providers: [],
-    };
-    setData(d => d ? { ...d, ai: defaults } : d);
-    const DEBOUNCE_DELAY = 800;
-    const SAVE_OPERATION_TIME = 500;
-    setTimeout(() => {
-      apiFetch<SettingsData>('/api/settings').then(d => { setData(d); }).catch(() => setStatus('error'));
-    }, DEBOUNCE_DELAY + SAVE_OPERATION_TIME);
-  }, [data]);
-
-  const env = data?.envOverrides ?? {};
-  const iconSize = isPanel ? 12 : 13;
-
-  const TABS: { id: Tab; label: string; icon: React.ReactNode; badge?: boolean }[] = [
-    { id: 'ai', label: t.settings.tabs.ai, icon: <Sparkles size={iconSize} /> },
-    { id: 'mcp', label: t.settings.tabs.mcp ?? 'Connections', icon: <Plug size={iconSize} /> },
-    { id: 'knowledge', label: t.settings.tabs.knowledge, icon: <Settings size={iconSize} /> },
-    { 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 ?? '';
-
-  /* ── Shared content & footer ── */
-  const renderContent = () => (
-    <div ref={contentRef} className={`flex-1 overflow-y-auto min-h-0 ${isPanel ? 'px-4 py-4 space-y-4' : 'px-5 py-5 space-y-5'}`}>
-      {status === 'load-error' && (tab === 'ai' || tab === 'knowledge') ? (
-        <div className="flex flex-col items-center gap-2 py-8 text-center">
-          <AlertCircle size={isPanel ? 18 : 20} className="text-destructive" />
-          <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' && tab !== 'uninstall' ? (
-        <div className="flex justify-center py-8">
-          <Loader2 size={isPanel ? 16 : 18} className="animate-spin text-muted-foreground" />
-        </div>
-      ) : (
-        <>
-          {tab === 'ai' && data?.ai && <AiTab data={data} updateAi={updateAi} updateAgent={updateAgent} t={t} />}
-          {tab === 'appearance' && <AppearanceTab font={font} setFont={setFont} fontSize={fontSize} setFontSize={setFontSize} contentWidth={contentWidth} setContentWidth={setContentWidth} dark={dark} setDark={setDark} locale={locale} setLocale={setLocale} t={t} />}
-          {tab === 'knowledge' && data && <KnowledgeTab data={data} setData={setData} t={t} />}
-          {tab === 'sync' && <SyncTab t={t} visible={visible} />}
-          {tab === 'mcp' && <McpTab t={t} />}
-          {tab === 'update' && <UpdateTab />}
-          {tab === 'uninstall' && <UninstallTab />}
-        </>
-      )}
-    </div>
-  );
-
-  const renderFooter = () => (
-    (tab === 'ai' || tab === 'knowledge') ? (
-      <div className={`${isPanel ? 'px-4 py-2' : 'px-5 py-2.5'} border-t border-border shrink-0 flex items-center justify-between`}>
-        <div className="flex items-center gap-3">
-          {tab === 'ai' && Object.values(env).some(Boolean) && (
-            <button
-              onClick={restoreFromEnv}
-              disabled={saving || !data}
-              className={`flex items-center gap-1.5 ${isPanel ? 'px-2.5 py-1 text-xs rounded-md' : 'px-3 py-1.5 text-sm rounded-lg'} border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors`}
-            >
-              <RotateCcw size={isPanel ? 12 : 13} />
-              {t.settings.ai.restoreFromEnv}
-            </button>
-          )}
-          {tab === 'knowledge' && (
-            <a
-              href="/setup?force=1"
-              className={`flex items-center gap-1.5 ${isPanel ? 'px-2.5 py-1 text-xs rounded-md' : 'px-3 py-1.5 text-sm rounded-lg'} border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors`}
-            >
-              <RotateCcw size={isPanel ? 12 : 13} />
-              {t.settings.reconfigure}
-            </a>
-          )}
-        </div>
-        {!isPanel && (
-          <div className="flex items-center gap-1.5 text-xs" role="status" aria-live="polite">
-            {saving && <><Loader2 size={12} className="animate-spin text-muted-foreground" /><span className="text-muted-foreground">{t.settings.save}...</span></>}
-            {status === 'saved' && <><CheckCircle2 size={12} className="text-success" /><span className="text-success">{t.settings.saved}</span></>}
-            {status === 'error' && <><AlertCircle size={12} className="text-destructive" /><span className="text-destructive">{t.settings.saveFailed}</span></>}
-          </div>
-        )}
-      </div>
-    ) : null
-  );
-
-  /* ── Panel variant: unchanged (horizontal tabs) ── */
-  if (isPanel) {
-    return (
-      <>
-        <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
-          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-            <Settings size={14} className="text-muted-foreground" />
-            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Settings</span>
-          </div>
-          <div className="flex items-center gap-1.5">
-            <div className="flex items-center gap-1.5 text-[10px]" role="status" aria-live="polite">
-              {saving && <Loader2 size={10} className="animate-spin text-muted-foreground" />}
-              {status === 'saved' && <CheckCircle2 size={10} className="text-success" />}
-              {status === 'error' && <AlertCircle size={10} className="text-destructive" />}
-            </div>
-          </div>
-        </div>
-        <div className="flex border-b border-border px-3 shrink-0 overflow-x-auto scrollbar-none gap-0">
-          {TABS.map(tabItem => (
-            <button
-              key={tabItem.id}
-              onClick={() => switchTab(tabItem.id)}
-              className={`flex items-center gap-1 px-2 py-2 text-xs font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
-                tab === tabItem.id
-                  ? 'border-[var(--amber)] text-foreground'
-                  : 'border-transparent text-muted-foreground hover:text-foreground'
-              }`}
-            >
-              {tabItem.icon}
-              {tabItem.label}
-              {tabItem.badge && <span className="w-1.5 h-1.5 rounded-full bg-error shrink-0" />}
-            </button>
-          ))}
-        </div>
-        {renderContent()}
-        {renderFooter()}
-      </>
-    );
-  }
-
-  /* ── Modal variant ── */
-  return (
-    <>
-      {/* Mobile: original vertical layout */}
-      <div className="flex flex-col h-full md:hidden">
-        {/* Mobile header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
-          <div className="flex justify-center pt-2 pb-0 absolute top-0 left-1/2 -translate-x-1/2">
-            <div className="w-8 h-1 rounded-full bg-muted-foreground/20" />
-          </div>
-          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-            <Settings size={15} className="text-muted-foreground" />
-            <span>{t.settings.title}</span>
-          </div>
-          <div className="flex items-center gap-1.5">
-            <div className="flex items-center gap-1.5 text-[10px]" role="status" aria-live="polite">
-              {saving && <Loader2 size={12} className="animate-spin text-muted-foreground" />}
-              {status === 'saved' && <><CheckCircle2 size={12} className="text-success" /><span className="text-success">{t.settings.saved}</span></>}
-              {status === 'error' && <><AlertCircle size={12} className="text-destructive" /><span className="text-destructive">{t.settings.saveFailed}</span></>}
-            </div>
-            {onClose && (
-              <button onClick={onClose} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors">
-                <X size={15} />
-              </button>
-            )}
-          </div>
-        </div>
-        {/* Mobile horizontal tabs */}
-        <div className="flex border-b border-border px-4 shrink-0 overflow-x-auto scrollbar-none gap-0">
-          {TABS.map(tabItem => (
-            <button
-              key={tabItem.id}
-              onClick={() => switchTab(tabItem.id)}
-              className={`flex items-center gap-1.5 px-3 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
-                tab === tabItem.id
-                  ? 'border-[var(--amber)] text-foreground'
-                  : 'border-transparent text-muted-foreground hover:text-foreground'
-              }`}
-            >
-              {tabItem.icon}
-              {tabItem.label}
-              {tabItem.badge && <span className="w-1.5 h-1.5 rounded-full bg-error shrink-0" />}
-            </button>
-          ))}
-          <button
-            onClick={() => { onClose?.(); router.push('/help'); }}
-            className="flex items-center gap-1.5 px-3 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px whitespace-nowrap border-transparent text-muted-foreground hover:text-foreground"
-          >
-            <HelpCircle size={iconSize} />
-            {t.sidebar.help}
-          </button>
-        </div>
-        {renderContent()}
-        {renderFooter()}
-      </div>
-
-      {/* Desktop: left-right layout */}
-      <div className="hidden md:flex flex-row h-full min-h-0">
-        {/* Left sidebar — vertical tabs */}
-        <div className="w-[180px] shrink-0 border-r border-border flex flex-col">
-          <div className="flex items-center gap-2 px-4 py-3 border-b border-border">
-            <Settings size={15} className="text-muted-foreground" />
-            <span className="text-sm font-medium text-foreground">{t.settings.title}</span>
-          </div>
-          <nav className="flex-1 overflow-y-auto py-1.5">
-            {TABS.map(tabItem => (
-              <button
-                key={tabItem.id}
-                onClick={() => switchTab(tabItem.id)}
-                className={`flex items-center gap-2 w-full px-4 py-2 text-sm font-medium transition-colors relative ${
-                  tab === tabItem.id
-                    ? 'text-foreground bg-muted'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
-                }`}
-              >
-                {tab === tabItem.id && (
-                  <div className="absolute left-0 top-1 bottom-1 w-[3px] rounded-r-full bg-[var(--amber)]" />
-                )}
-                {tabItem.icon}
-                {tabItem.label}
-                {tabItem.badge && <span className="ml-auto w-1.5 h-1.5 rounded-full bg-error shrink-0" />}
-              </button>
-            ))}
-          </nav>
-          {/* Help link at bottom of sidebar */}
-          <div className="shrink-0 border-t border-border px-4 py-2">
-            <button
-              onClick={() => { onClose?.(); router.push('/help'); }}
-              className="flex items-center gap-2 w-full px-0 py-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
-            >
-              <HelpCircle size={13} />
-              {t.sidebar.help}
-            </button>
-          </div>
-        </div>
-
-        {/* Right content area */}
-        <div className="flex-1 flex flex-col min-w-0 min-h-0">
-          {/* Right header: tab title + status + close */}
-          <div className="flex items-center justify-between px-5 py-3 border-b border-border shrink-0">
-            <span className="text-sm font-medium text-foreground">{activeTabLabel}</span>
-            <div className="flex items-center gap-1.5">
-              <div className="flex items-center gap-1.5 text-[10px]" role="status" aria-live="polite">
-                {saving && <Loader2 size={12} className="animate-spin text-muted-foreground" />}
-                {status === 'saved' && <><CheckCircle2 size={12} className="text-success" /><span className="text-success">{t.settings.saved}</span></>}
-                {status === 'error' && <><AlertCircle size={12} className="text-destructive" /><span className="text-destructive">{t.settings.saveFailed}</span></>}
-              </div>
-              {onClose && (
-                <button onClick={onClose} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors">
-                  <X size={15} />
-                </button>
-              )}
-            </div>
-          </div>
-          {renderContent()}
-          {renderFooter()}
-        </div>
-      </div>
-    </>
-  );
-}

package/_standalone/components/settings/ShortcutsTab.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-import type { ShortcutsTabProps } from './types';
-
-export function ShortcutsTab({ t }: ShortcutsTabProps) {
-  return (
-    <div className="space-y-1">
-      {t.shortcuts.map((s: { readonly description: string; readonly keys: readonly string[] }, i: number) => (
-        <div key={i} className="flex items-center justify-between py-2.5 border-b border-border last:border-0">
-          <span className="text-sm text-foreground">{s.description}</span>
-          <div className="flex items-center gap-1">
-            {s.keys.map((k: string, j: number) => (
-              <kbd key={j} className="px-2 py-0.5 text-xs font-mono bg-muted border border-border rounded text-foreground">{k}</kbd>
-            ))}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}