@geminilight/mindos 0.1.0

package/app/components/MarkdownEditor.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { Columns2, PanelLeft, Eye, Pencil } from 'lucide-react';
+import EditorWrapper from './EditorWrapper';
+import MarkdownView from './MarkdownView';
+
+// WysiwygEditor uses browser APIs — load client-side only
+const WysiwygEditor = dynamic(() => import('./WysiwygEditor'), { ssr: false });
+
+export type MdViewMode = 'wysiwyg' | 'split' | 'source' | 'preview';
+
+interface MarkdownEditorProps {
+  value: string;
+  onChange: (v: string) => void;
+  viewMode: MdViewMode;
+  onViewModeChange: (m: MdViewMode) => void;
+}
+
+const MODES: { id: MdViewMode; icon: React.ReactNode; label: string }[] = [
+  { id: 'wysiwyg',  icon: <Pencil size={12} />,   label: 'WYSIWYG' },
+  { id: 'split',    icon: <Columns2 size={12} />,  label: 'Split' },
+  { id: 'source',   icon: <PanelLeft size={12} />, label: 'Source' },
+  { id: 'preview',  icon: <Eye size={12} />,       label: 'Preview' },
+];
+
+const EDITOR_HEIGHT = 'calc(100vh - 160px)';
+
+export default function MarkdownEditor({ value, onChange, viewMode, onViewModeChange }: MarkdownEditorProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Mode toolbar */}
+      <div className="flex items-center gap-1 p-1 bg-muted rounded-lg self-start">
+        {MODES.map(m => (
+          <button
+            key={m.id}
+            onClick={() => onViewModeChange(m.id)}
+            className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded text-xs font-medium transition-colors ${
+              viewMode === m.id
+                ? 'bg-card text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+            style={{ fontFamily: "'IBM Plex Mono', monospace" }}
+          >
+            {m.icon}
+            {m.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Panes */}
+      <div
+        className="rounded-xl overflow-hidden border border-border flex"
+        style={{ height: EDITOR_HEIGHT }}
+      >
+        {/* WYSIWYG */}
+        {viewMode === 'wysiwyg' && (
+          <div className="w-full h-full overflow-hidden">
+            <WysiwygEditor value={value} onChange={onChange} />
+          </div>
+        )}
+
+        {/* Split: source left + preview right */}
+        {viewMode === 'split' && (
+          <>
+            <div className="w-1/2 h-full overflow-auto border-r border-border">
+              <EditorWrapper value={value} onChange={onChange} language="markdown" />
+            </div>
+            <div className="w-1/2 h-full overflow-auto bg-background">
+              <div className="px-6 py-5">
+                <MarkdownView content={value} />
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* Source only */}
+        {viewMode === 'source' && (
+          <div className="w-full h-full overflow-auto">
+            <EditorWrapper value={value} onChange={onChange} language="markdown" />
+          </div>
+        )}
+
+        {/* Preview only */}
+        {viewMode === 'preview' && (
+          <div className="w-full h-full overflow-auto bg-background">
+            <div className="px-6 py-5">
+              <MarkdownView content={value} />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/app/components/MarkdownView.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeRaw from 'rehype-raw';
+import rehypeSlug from 'rehype-slug';
+import { useState, useCallback } from 'react';
+import { Copy, Check } from 'lucide-react';
+import type { Components } from 'react-markdown';
+
+interface MarkdownViewProps {
+  content: string;
+}
+
+function CopyButton({ code }: { code: string }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }, [code]);
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="
+        absolute top-2.5 right-2.5
+        p-1.5 rounded-md
+        bg-zinc-700 hover:bg-zinc-600
+        text-zinc-400 hover:text-zinc-200
+        transition-colors duration-100
+        opacity-0 group-hover:opacity-100
+      "
+      title="Copy code"
+    >
+      {copied ? <Check size={13} /> : <Copy size={13} />}
+    </button>
+  );
+}
+
+// Heading components with suppressHydrationWarning to prevent
+// rehype-slug + emoji hydration mismatches between server and client
+function makeHeading(Tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') {
+  const HeadingComponent = ({ children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <Tag {...props} suppressHydrationWarning>{children}</Tag>
+  );
+  HeadingComponent.displayName = Tag;
+  return HeadingComponent;
+}
+
+const components: Components = {
+  h1: makeHeading('h1'),
+  h2: makeHeading('h2'),
+  h3: makeHeading('h3'),
+  h4: makeHeading('h4'),
+  h5: makeHeading('h5'),
+  h6: makeHeading('h6'),
+  code({ children, ...props }) {
+    return <code {...props} suppressHydrationWarning>{children}</code>;
+  },
+  pre({ children, ...props }) {
+    // Extract code string from children
+    let codeString = '';
+    if (children && typeof children === 'object' && 'props' in children) {
+      const codeEl = children as React.ReactElement<{ children?: React.ReactNode }>;
+      codeString = extractText(codeEl.props?.children);
+    }
+    return (
+      <div className="relative group">
+        <pre {...props} suppressHydrationWarning>{children}</pre>
+        <CopyButton code={codeString} />
+      </div>
+    );
+  },
+  a({ href, children, ...props }) {
+    const isExternal = href?.startsWith('http');
+    return (
+      <a
+        href={href}
+        target={isExternal ? '_blank' : undefined}
+        rel={isExternal ? 'noopener noreferrer' : undefined}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  },
+  img({ src, alt, ...props }) {
+    if (!src) return null;
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img src={src} alt={alt ?? ''} {...props} />;
+  },
+};
+
+function extractText(node: React.ReactNode): string {
+  if (typeof node === 'string') return node;
+  if (Array.isArray(node)) return node.map(extractText).join('');
+  if (node && typeof node === 'object' && 'props' in node) {
+    return extractText((node as React.ReactElement<{ children?: React.ReactNode }>).props?.children);
+  }
+  return '';
+}
+
+export default function MarkdownView({ content }: MarkdownViewProps) {
+  return (
+    <div className="prose max-w-none">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeSlug, rehypeHighlight, rehypeRaw]}
+        components={components}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/app/components/SearchModal.tsx

@@ -0,0 +1,193 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { Search, X, FileText, Table } from 'lucide-react';
+import { SearchResult } from '@/lib/types';
+import { encodePath } from '@/lib/utils';
+import { apiFetch } from '@/lib/api';
+import { useLocale } from '@/lib/LocaleContext';
+
+interface SearchModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+/** Highlight matched text fragments in a snippet based on the query */
+function highlightSnippet(snippet: string, query: string): React.ReactNode {
+  if (!query.trim()) return snippet;
+  // Split query into words and escape for regex
+  const words = query.trim().split(/\s+/).filter(Boolean);
+  const escaped = words.map(w => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+  const pattern = new RegExp(`(${escaped.join('|')})`, 'gi');
+  const parts = snippet.split(pattern);
+  return parts.map((part, i) =>
+    pattern.test(part) ? <mark key={i} className="bg-yellow-300/40 text-foreground rounded-sm px-0.5">{part}</mark> : part
+  );
+}
+
+export default function SearchModal({ open, onClose }: SearchModalProps) {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const router = useRouter();
+  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const { t } = useLocale();
+
+  // Focus input when modal opens
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+      setQuery('');
+      setResults([]);
+      setSelectedIndex(0);
+    }
+  }, [open]);
+
+  // Debounced search
+  const doSearch = useCallback((q: string) => {
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    if (!q.trim()) {
+      setResults([]);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    debounceTimer.current = setTimeout(async () => {
+      try {
+        const data = await apiFetch<SearchResult[]>(`/api/search?q=${encodeURIComponent(q)}`);
+        setResults(Array.isArray(data) ? data : []);
+        setSelectedIndex(0);
+      } catch {
+        setResults([]);
+      } finally {
+        setLoading(false);
+      }
+    }, 300);
+  }, []);
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    setQuery(val);
+    doSearch(val);
+  }, [doSearch]);
+
+  const navigate = useCallback((result: SearchResult) => {
+    router.push(`/view/${encodePath(result.path)}`);
+    onClose();
+  }, [router, onClose]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedIndex(i => Math.min(i + 1, results.length - 1));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex(i => Math.max(i - 1, 0));
+      } else if (e.key === 'Enter') {
+        if (results[selectedIndex]) navigate(results[selectedIndex]);
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [open, onClose, results, selectedIndex, navigate]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-end md:items-start justify-center md:pt-[15vh] modal-backdrop"
+      onClick={(e) => e.target === e.currentTarget && onClose()}
+    >
+      <div role="dialog" aria-modal="true" aria-label="Search" className="w-full md:max-w-xl md:mx-4 bg-card border-t md:border border-border rounded-t-2xl md:rounded-xl shadow-2xl overflow-hidden max-h-[85vh] md:max-h-none flex flex-col">
+        {/* Mobile drag indicator */}
+        <div className="flex justify-center pt-2 pb-0 md:hidden">
+          <div className="w-8 h-1 rounded-full bg-muted-foreground/20" />
+        </div>
+        {/* Search input */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-border">
+          <Search size={16} className="text-muted-foreground shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={handleChange}
+            placeholder={t.search.placeholder}
+            className="flex-1 bg-transparent text-foreground placeholder:text-muted-foreground text-sm outline-none"
+          />
+          {loading && (
+            <div className="w-4 h-4 border-2 border-muted-foreground/40 border-t-foreground rounded-full animate-spin shrink-0" />
+          )}
+          {!loading && query && (
+            <button onClick={() => { setQuery(''); setResults([]); inputRef.current?.focus(); }}>
+              <X size={14} className="text-muted-foreground hover:text-foreground" />
+            </button>
+          )}
+          <kbd className="hidden md:inline text-xs text-muted-foreground border border-border rounded px-1.5 py-0.5 font-mono">ESC</kbd>
+        </div>
+
+        {/* Results */}
+        <div className="max-h-[50vh] md:max-h-80 overflow-y-auto flex-1">
+          {results.length === 0 && query && !loading && (
+            <div className="px-4 py-8 text-center text-sm text-muted-foreground">{t.search.noResults}</div>
+          )}
+          {results.length === 0 && !query && (
+            <div className="px-4 py-8 text-center text-sm text-muted-foreground/60">{t.search.prompt}</div>
+          )}
+          {results.map((result, i) => {
+            const ext = result.path.endsWith('.csv') ? '.csv' : '.md';
+            const parts = result.path.split('/');
+            const fileName = parts[parts.length - 1];
+            const dirPath = parts.slice(0, -1).join('/');
+            return (
+              <button
+                key={result.path}
+                onClick={() => navigate(result)}
+                onMouseEnter={() => setSelectedIndex(i)}
+                className={`
+                  w-full px-4 py-3 flex items-start gap-3 text-left transition-colors duration-75
+                  ${i === selectedIndex ? 'bg-muted' : 'hover:bg-muted/50'}
+                  ${i < results.length - 1 ? 'border-b border-border' : ''}
+                `}
+              >
+                {ext === '.csv'
+                  ? <Table size={14} className="text-emerald-400 shrink-0 mt-0.5" />
+                  : <FileText size={14} className="text-muted-foreground shrink-0 mt-0.5" />
+                }
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-baseline gap-2 flex-wrap">
+                    <span className="text-sm text-foreground font-medium truncate">{fileName}</span>
+                    {dirPath && (
+                      <span className="text-xs text-muted-foreground truncate">{dirPath}</span>
+                    )}
+                  </div>
+                  {result.snippet && (
+                    <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2 leading-relaxed">
+                      {highlightSnippet(result.snippet, query)}
+                    </p>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Footer — desktop only */}
+        {results.length > 0 && (
+          <div className="hidden md:flex px-4 py-2 border-t border-border items-center gap-3 text-xs text-muted-foreground/60">
+            <span><kbd className="font-mono">↑↓</kbd> {t.search.navigate}</span>
+            <span><kbd className="font-mono">↵</kbd> {t.search.open}</span>
+            <span><kbd className="font-mono">ESC</kbd> {t.search.close}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/app/components/SettingsModal.tsx

@@ -0,0 +1,237 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { X, Settings, Save, Loader2, AlertCircle, CheckCircle2, RotateCcw } from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+import { getAllRenderers, loadDisabledState, isRendererEnabled } from '@/lib/renderers/registry';
+import { apiFetch } from '@/lib/api';
+import '@/lib/renderers/index';
+import type { AiSettings, SettingsData, Tab } from './settings/types';
+import { FONTS } from './settings/types';
+import { AiTab } from './settings/AiTab';
+import { AppearanceTab } from './settings/AppearanceTab';
+import { KnowledgeTab } from './settings/KnowledgeTab';
+import { PluginsTab } from './settings/PluginsTab';
+import { ShortcutsTab } from './settings/ShortcutsTab';
+
+interface SettingsModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function SettingsModal({ open, onClose }: SettingsModalProps) {
+  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();
+
+  // Appearance state (localStorage-based)
+  const [font, setFont] = useState('lora');
+  const [contentWidth, setContentWidth] = useState('780px');
+  const [dark, setDark] = useState(true);
+  // Plugin enabled state
+  const [pluginStates, setPluginStates] = useState<Record<string, boolean>>({});
+
+  useEffect(() => {
+    if (!open) return;
+    apiFetch<SettingsData>('/api/settings').then(setData).catch(() => setStatus('load-error'));
+    setFont(localStorage.getItem('prose-font') ?? 'lora');
+    setContentWidth(localStorage.getItem('content-width') ?? '780px');
+    const stored = localStorage.getItem('theme');
+    setDark(stored ? stored === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches);
+    loadDisabledState();
+    const initial: Record<string, boolean> = {};
+    for (const r of getAllRenderers()) initial[r.id] = isRendererEnabled(r.id);
+    setPluginStates(initial);
+    setStatus('idle');
+  }, [open]);
+
+  // Apply font immediately
+  useEffect(() => {
+    const fontMap: Record<string, string> = {
+      'lora': "'Lora', Georgia, serif",
+      'ibm-plex-sans': "'IBM Plex Sans', sans-serif",
+      'geist': 'var(--font-geist-sans), sans-serif',
+      'ibm-plex-mono': "'IBM Plex Mono', monospace",
+    };
+    document.documentElement.style.setProperty('--prose-font-override', fontMap[font] ?? '');
+    localStorage.setItem('prose-font', font);
+  }, [font]);
+
+  // Apply content width immediately
+  useEffect(() => {
+    document.documentElement.style.setProperty('--content-width-override', contentWidth);
+    localStorage.setItem('content-width', contentWidth);
+  }, [contentWidth]);
+
+  // Esc to close
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [open, onClose]);
+
+  const handleSave = useCallback(async () => {
+    if (!data) return;
+    setSaving(true);
+    try {
+      await apiFetch('/api/settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ai: data.ai, mindRoot: data.mindRoot, webPassword: data.webPassword, authToken: data.authToken }),
+      });
+      setStatus('saved');
+      setTimeout(() => setStatus('idle'), 2500);
+    } catch {
+      setStatus('error');
+      setTimeout(() => setStatus('idle'), 2500);
+    } finally {
+      setSaving(false);
+    }
+  }, [data]);
+
+  const updateAi = useCallback((patch: Partial<AiSettings>) => {
+    setData(d => d ? { ...d, ai: { ...d.ai, ...patch } } : d);
+  }, []);
+
+  const restoreFromEnv = useCallback(async () => {
+    if (!data) return;
+    const defaults: AiSettings = {
+      provider: 'anthropic',
+      providers: {
+        anthropic: { apiKey: '', model: '' },
+        openai:    { apiKey: '', model: '', baseUrl: '' },
+      },
+    };
+    setData(d => d ? { ...d, ai: defaults } : d);
+    setSaving(true);
+    try {
+      await apiFetch('/api/settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ai: defaults, mindRoot: data.mindRoot }),
+      });
+      setStatus('saved');
+    } catch {
+      setStatus('error');
+    } finally {
+      setSaving(false);
+    }
+    apiFetch<SettingsData>('/api/settings').then(setData).catch(() => setStatus('error'));
+    setTimeout(() => setStatus('idle'), 2500);
+  }, [data]);
+
+  if (!open) return null;
+
+  const env = data?.envOverrides ?? {};
+
+  const TABS: { id: Tab; label: string }[] = [
+    { id: 'ai', label: t.settings.tabs.ai },
+    { id: 'appearance', label: t.settings.tabs.appearance },
+    { id: 'knowledge', label: t.settings.tabs.knowledge },
+    { id: 'plugins', label: t.settings.tabs.plugins },
+    { id: 'shortcuts', label: t.settings.tabs.shortcuts },
+  ];
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-end md:items-start justify-center md:pt-[10vh] modal-backdrop"
+      onClick={(e) => e.target === e.currentTarget && onClose()}
+    >
+      <div role="dialog" aria-modal="true" aria-label="Settings" className="w-full md:max-w-xl md:mx-4 bg-card border-t md:border border-border rounded-t-2xl md:rounded-xl shadow-2xl flex flex-col h-[88vh] md:h-auto md:max-h-[78vh]">
+        {/* Mobile drag indicator */}
+        <div className="flex justify-center pt-2 pb-0 md:hidden">
+          <div className="w-8 h-1 rounded-full bg-muted-foreground/20" />
+        </div>
+
+        {/* Header */}
+        <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={15} className="text-muted-foreground" />
+            <span style={{ fontFamily: "'IBM Plex Mono', monospace" }}>{t.settings.title}</span>
+          </div>
+          <button onClick={onClose} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors">
+            <X size={15} />
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex border-b border-border px-4 shrink-0 overflow-x-auto scrollbar-none">
+          {TABS.map(t => (
+            <button
+              key={t.id}
+              onClick={() => setTab(t.id)}
+              className={`px-3 py-2.5 text-xs font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
+                tab === t.id
+                  ? 'border-amber-500 text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto min-h-0 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={20} className="text-destructive" />
+              <p className="text-sm text-destructive font-medium">Failed to load settings</p>
+              <p className="text-xs text-muted-foreground">Check that the server is running and AUTH_TOKEN is configured correctly.</p>
+            </div>
+          ) : !data && tab !== 'shortcuts' && tab !== 'appearance' ? (
+            <div className="flex justify-center py-8">
+              <Loader2 size={18} className="animate-spin text-muted-foreground" />
+            </div>
+          ) : (
+            <>
+              {tab === 'ai' && data?.ai && <AiTab data={data} updateAi={updateAi} t={t} />}
+              {tab === 'appearance' && <AppearanceTab font={font} setFont={setFont} 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 === 'plugins' && <PluginsTab pluginStates={pluginStates} setPluginStates={setPluginStates} t={t} />}
+              {tab === 'shortcuts' && <ShortcutsTab t={t} />}
+            </>
+          )}
+        </div>
+
+        {/* Footer */}
+        {(tab === 'ai' || tab === 'knowledge') && (
+          <div className="px-5 py-3 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 px-4 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={13} />
+                  {t.settings.ai.restoreFromEnv}
+                </button>
+              )}
+              <div className="flex items-center gap-1.5 text-xs">
+                {status === 'saved' && (
+                  <><CheckCircle2 size={13} className="text-green-500" /><span className="text-green-500">{t.settings.saved}</span></>
+                )}
+                {status === 'error' && (
+                  <><AlertCircle size={13} className="text-destructive" /><span className="text-destructive">{t.settings.saveFailed}</span></>
+                )}
+              </div>
+            </div>
+            <button
+              onClick={handleSave}
+              disabled={saving || !data}
+              className="flex items-center gap-1.5 px-4 py-1.5 text-sm rounded-lg disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
+              style={{ background: 'var(--amber)', color: '#131210' }}
+            >
+              {saving ? <Loader2 size={13} className="animate-spin" /> : <Save size={13} />}
+              {t.settings.save}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}