@geminilight/mindos 0.3.0 → 0.5.0

package/app/components/FindInPage.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { X, ChevronUp, ChevronDown } from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+
+interface FindInPageProps {
+  containerRef: React.RefObject<HTMLElement | null>;
+  onClose: () => void;
+}
+
+const MARK_CLASS = 'findip-highlight';
+const MARK_ACTIVE_CLASS = 'findip-active';
+
+export default function FindInPage({ containerRef, onClose }: FindInPageProps) {
+  const { t } = useLocale();
+  const [query, setQuery] = useState('');
+  const [current, setCurrent] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const marksRef = useRef<HTMLElement[]>([]);
+
+  // Focus input on mount
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  // Clear highlights helper
+  const clearHighlights = useCallback(() => {
+    for (const el of marksRef.current) {
+      const parent = el.parentNode;
+      if (parent) {
+        parent.replaceChild(document.createTextNode(el.textContent || ''), el);
+        parent.normalize();
+      }
+    }
+    marksRef.current = [];
+  }, []);
+
+  // Search and highlight
+  useEffect(() => {
+    clearHighlights();
+    setCurrent(0);
+
+    const container = containerRef.current;
+    if (!container || !query.trim()) return;
+
+    const needle = query.toLowerCase();
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, {
+      acceptNode(node) {
+        // Skip text nodes inside the find bar itself
+        if (node.parentElement?.closest('[data-find-in-page]')) return NodeFilter.FILTER_REJECT;
+        return NodeFilter.FILTER_ACCEPT;
+      },
+    });
+    const textNodes: Text[] = [];
+    while (walker.nextNode()) {
+      textNodes.push(walker.currentNode as Text);
+    }
+
+    const newMarks: HTMLElement[] = [];
+    for (const node of textNodes) {
+      const text = node.textContent || '';
+      const lower = text.toLowerCase();
+      let startIdx = 0;
+      const positions: number[] = [];
+
+      while (true) {
+        const idx = lower.indexOf(needle, startIdx);
+        if (idx === -1) break;
+        positions.push(idx);
+        startIdx = idx + needle.length;
+      }
+
+      if (positions.length === 0) continue;
+
+      // Split text node into fragments with <mark> wrappers
+      const parent = node.parentNode;
+      if (!parent) continue;
+
+      const frag = document.createDocumentFragment();
+      let lastEnd = 0;
+
+      for (const pos of positions) {
+        if (pos > lastEnd) {
+          frag.appendChild(document.createTextNode(text.slice(lastEnd, pos)));
+        }
+        const mark = document.createElement('mark');
+        mark.className = MARK_CLASS;
+        mark.textContent = text.slice(pos, pos + needle.length);
+        frag.appendChild(mark);
+        newMarks.push(mark);
+        lastEnd = pos + needle.length;
+      }
+
+      if (lastEnd < text.length) {
+        frag.appendChild(document.createTextNode(text.slice(lastEnd)));
+      }
+
+      parent.replaceChild(frag, node);
+    }
+
+    marksRef.current = newMarks;
+    setCurrent(newMarks.length > 0 ? 1 : 0);
+
+    // Highlight first match
+    if (newMarks.length > 0) {
+      newMarks[0].classList.add(MARK_ACTIVE_CLASS);
+      newMarks[0].scrollIntoView({ block: 'center', behavior: 'smooth' });
+    }
+
+    return () => {
+      // cleanup on query change is handled by next effect run
+    };
+  }, [query, containerRef, clearHighlights]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      clearHighlights();
+    };
+  }, [clearHighlights]);
+
+  const totalMarks = marksRef.current.length;
+
+  const goTo = useCallback((index: number) => {
+    const marks = marksRef.current;
+    if (marks.length === 0) return;
+    // Remove active from previous
+    for (const m of marks) m.classList.remove(MARK_ACTIVE_CLASS);
+    // Wrap around
+    const wrapped = ((index - 1) % marks.length + marks.length) % marks.length;
+    marks[wrapped].classList.add(MARK_ACTIVE_CLASS);
+    marks[wrapped].scrollIntoView({ block: 'center', behavior: 'smooth' });
+    setCurrent(wrapped + 1);
+  }, []);
+
+  const goNext = useCallback(() => goTo(current + 1), [current, goTo]);
+  const goPrev = useCallback(() => goTo(current - 1), [current, goTo]);
+
+  // Keyboard handling
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onClose();
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (e.shiftKey) goPrev();
+      else goNext();
+    }
+  }, [onClose, goNext, goPrev]);
+
+  return (
+    <>
+      <style>{`
+        mark.${MARK_CLASS} {
+          background: rgba(250, 204, 21, 0.3);
+          color: inherit;
+          border-radius: 2px;
+          padding: 0;
+        }
+        mark.${MARK_ACTIVE_CLASS} {
+          background: rgba(250, 204, 21, 0.7);
+          outline: 2px solid rgba(250, 204, 21, 0.5);
+        }
+      `}</style>
+      <div className="sticky top-[96px] md:top-[44px] z-30 flex justify-end px-4 md:px-6 pointer-events-none" data-find-in-page>
+        <div className="pointer-events-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border bg-card shadow-lg">
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={t.findInPage.placeholder}
+            className="w-[180px] sm:w-[220px] px-2 py-1 text-sm bg-transparent text-foreground placeholder:text-muted-foreground outline-none"
+          />
+          <span className="text-xs text-muted-foreground tabular-nums shrink-0 min-w-[48px] text-center font-display">
+            {query.trim()
+              ? totalMarks > 0
+                ? t.findInPage.matchCount(current, totalMarks)
+                : t.findInPage.noResults
+              : ''}
+          </span>
+          <button
+            onClick={goPrev}
+            disabled={totalMarks === 0}
+            className="p-1 rounded text-muted-foreground hover:text-foreground disabled:opacity-30 transition-colors"
+            aria-label="Previous match"
+          >
+            <ChevronUp size={14} />
+          </button>
+          <button
+            onClick={goNext}
+            disabled={totalMarks === 0}
+            className="p-1 rounded text-muted-foreground hover:text-foreground disabled:opacity-30 transition-colors"
+            aria-label="Next match"
+          >
+            <ChevronDown size={14} />
+          </button>
+          <button
+            onClick={onClose}
+            className="p-1 rounded text-muted-foreground hover:text-foreground transition-colors"
+            aria-label="Close find"
+          >
+            <X size={14} />
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

package/app/components/HomeContent.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import Link from 'next/link';
-import { FileText, Table, Clock, Sparkles, Puzzle, ArrowRight, FilePlus, Search, ChevronDown, Terminal } from 'lucide-react';
-import { useState } from 'react';
+import { FileText, Table, Clock, Sparkles, Puzzle, ArrowRight, FilePlus, Search, ChevronDown } from 'lucide-react';
+import { useState, useEffect, useRef } from 'react';
 import { useLocale } from '@/lib/LocaleContext';
 import { encodePath, relativeTime } from '@/lib/utils';
 import { getAllRenderers } from '@/lib/renderers/registry';
@@ -14,37 +14,45 @@ interface RecentFile {
   mtime: number;
 }
 
-// Maps a renderer id to a canonical entry file path
-const RENDERER_ENTRY: Record<string, string> = {
-  todo: 'TODO.md',
-  csv: 'Resources/Products.csv',
-  graph: 'README.md',
-  timeline: 'CHANGELOG.md',
-  backlinks: 'BACKLINKS.md',
-  summary: 'DAILY.md',
-  'agent-inspector': '.agent-log.json',
-  workflow: 'Workflow.md',
-  'diff-viewer': 'Agent-Diff.md',
-  'config-panel': 'CONFIG.json',
-};
-
-function deriveEntryPath(id: string): string | null {
-  return RENDERER_ENTRY[id] ?? null;
-}
-
 function triggerSearch() {
-  // Dispatch ⌘K to open the Sidebar's SearchModal
   window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, bubbles: true }));
 }
 
 function triggerAsk() {
-  // Dispatch ⌘/ to open the Sidebar's AskModal
   window.dispatchEvent(new KeyboardEvent('keydown', { key: '/', metaKey: true, bubbles: true }));
 }
 
-export default function HomeContent({ recent }: { recent: RecentFile[] }) {
+export default function HomeContent({ recent, existingFiles }: { recent: RecentFile[]; existingFiles?: string[] }) {
   const { t } = useLocale();
   const [showAll, setShowAll] = useState(false);
+  const [suggestionIdx, setSuggestionIdx] = useState(0);
+  const [hintId, setHintId] = useState<string | null>(null);
+  const hintTimer = useRef<ReturnType<typeof setTimeout>>(null);
+
+  const suggestions = t.ask?.suggestions ?? [
+    'Summarize this document',
+    'List all action items and TODOs',
+    'What are the key points?',
+    'Find related notes on this topic',
+  ];
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSuggestionIdx(i => (i + 1) % suggestions.length);
+    }, 3500);
+    return () => clearInterval(interval);
+  }, [suggestions.length]);
+
+  // Cleanup hint timer on unmount
+  useEffect(() => () => { if (hintTimer.current) clearTimeout(hintTimer.current); }, []);
+
+  function showHint(id: string) {
+    if (hintTimer.current) clearTimeout(hintTimer.current);
+    setHintId(id);
+    hintTimer.current = setTimeout(() => setHintId(null), 3000);
+  }
+
+  const existingSet = new Set(existingFiles ?? []);
 
   // Empty knowledge base → show onboarding
   if (recent.length === 0) {
@@ -63,7 +71,7 @@ export default function HomeContent({ recent }: { recent: RecentFile[] }) {
       <div className="mb-10">
         <div className="flex items-center gap-2 mb-3">
           <div className="w-1 h-5 rounded-full" style={{ background: 'var(--amber)' }} />
-          <h1 className="text-2xl font-semibold tracking-tight" style={{ fontFamily: "'IBM Plex Mono', monospace", color: 'var(--foreground)' }}>
+          <h1 className="text-2xl font-semibold tracking-tight font-display" style={{ color: 'var(--foreground)' }}>
             MindOS
           </h1>
         </div>
@@ -86,8 +94,8 @@ export default function HomeContent({ recent }: { recent: RecentFile[] }) {
             style={{ background: 'var(--card)', borderColor: 'var(--border)' }}
           >
             <Sparkles size={15} style={{ color: 'var(--amber)' }} className="shrink-0" />
-            <span className="text-sm flex-1 text-left" style={{ color: 'var(--foreground)', fontFamily: "'IBM Plex Sans', sans-serif" }}>
-              {t.home.shortcuts.askAI}
+            <span className="text-sm flex-1 text-left" style={{ color: 'var(--foreground)' }}>
+              {suggestions[suggestionIdx]}
             </span>
             <kbd
               className="hidden sm:inline-flex items-center gap-0.5 px-2 py-0.5 rounded text-[11px] font-mono font-medium"
@@ -102,7 +110,7 @@ export default function HomeContent({ recent }: { recent: RecentFile[] }) {
             onClick={triggerSearch}
             title="⌘K"
             className="flex items-center gap-2 px-3 py-3 rounded-xl border text-sm transition-colors shrink-0 hover:bg-muted"
-            style={{ borderColor: 'var(--border)', color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Sans', sans-serif" }}
+            style={{ borderColor: 'var(--border)', color: 'var(--muted-foreground)' }}
           >
             <Search size={14} />
             <span className="hidden sm:inline">{t.home.shortcuts.searchFiles}</span>
@@ -121,7 +129,6 @@ export default function HomeContent({ recent }: { recent: RecentFile[] }) {
               style={{
                 background: 'var(--amber-dim)',
                 color: 'var(--amber)',
-                fontFamily: "'IBM Plex Sans', sans-serif",
               }}
             >
               <ArrowRight size={14} />
@@ -137,7 +144,6 @@ export default function HomeContent({ recent }: { recent: RecentFile[] }) {
             style={{
               background: 'var(--muted)',
               color: 'var(--muted-foreground)',
-              fontFamily: "'IBM Plex Sans', sans-serif",
             }}
           >
             <FilePlus size={14} />
@@ -147,35 +153,81 @@ export default function HomeContent({ recent }: { recent: RecentFile[] }) {
 
       </div>
 
-      {/* Plugins — compact 3-column grid */}
+      {/* Plugins */}
       {renderers.length > 0 && (
         <section className="mb-12">
           <div className="flex items-center gap-2 mb-4">
             <Puzzle size={13} style={{ color: 'var(--amber)' }} />
-            <h2 className="text-xs font-semibold uppercase tracking-[0.08em]" style={{ color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono', monospace" }}>
+            <h2 className="text-xs font-semibold uppercase tracking-[0.08em] font-display" style={{ color: 'var(--muted-foreground)' }}>
               {t.home.plugins}
             </h2>
-            <span className="text-xs" style={{ color: 'var(--muted-foreground)', opacity: 0.5 }}>
+            <span className="text-xs" style={{ color: 'var(--muted-foreground)', opacity: 0.65 }}>
               {renderers.length}
             </span>
           </div>
 
-          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5 items-start">
             {renderers.map((r) => {
-              const entryPath = deriveEntryPath(r.id);
+              const entryPath = r.entryPath ?? null;
+              const available = !entryPath || existingSet.has(entryPath);
+
+              if (!available) {
+                return (
+                  <button
+                    key={r.id}
+                    onClick={() => showHint(r.id)}
+                    className="group flex flex-col gap-1.5 px-3.5 py-3 rounded-lg border transition-all opacity-60 cursor-pointer hover:opacity-80 text-left"
+                    style={{ borderColor: 'var(--border)' }}
+                  >
+                    <div className="flex items-center gap-2.5">
+                      <span className="text-base leading-none shrink-0" suppressHydrationWarning>{r.icon}</span>
+                      <span className="text-xs font-semibold truncate font-display" style={{ color: 'var(--foreground)' }}>
+                        {r.name}
+                      </span>
+                    </div>
+                    <p className="text-[11px] leading-relaxed line-clamp-2" style={{ color: 'var(--muted-foreground)' }}>
+                      {r.description}
+                    </p>
+                    {hintId === r.id ? (
+                      <p className="text-[10px] animate-in" style={{ color: 'var(--amber)' }} role="status">
+                        {(t.home.createToActivate ?? 'Create {file} to activate').replace('{file}', entryPath ?? '')}
+                      </p>
+                    ) : (
+                      <div className="flex flex-wrap gap-1">
+                        {r.tags.slice(0, 3).map(tag => (
+                          <span key={tag} className="text-[10px] px-1.5 py-0.5 rounded-full" style={{ background: 'var(--muted)', color: 'var(--muted-foreground)' }}>
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </button>
+                );
+              }
+
               return (
                 <Link
                   key={r.id}
                   href={entryPath ? `/view/${encodePath(entryPath)}` : '#'}
-                  className="group flex items-center gap-2.5 px-3 py-2.5 rounded-lg border transition-all hover:border-amber-500/30 hover:bg-muted/50"
+                  className="group flex flex-col gap-1.5 px-3.5 py-3 rounded-lg border transition-all hover:border-amber-500/30 hover:bg-muted/50"
                   style={{ borderColor: 'var(--border)' }}
                 >
-                  <span className="text-base leading-none shrink-0" suppressHydrationWarning>{r.icon}</span>
-                  <div className="flex-1 min-w-0">
-                    <span className="text-xs font-semibold truncate block" style={{ color: 'var(--foreground)', fontFamily: "'IBM Plex Sans', sans-serif" }}>
+                  <div className="flex items-center gap-2.5">
+                    <span className="text-base leading-none shrink-0" suppressHydrationWarning>{r.icon}</span>
+                    <span className="text-xs font-semibold truncate font-display" style={{ color: 'var(--foreground)' }}>
                       {r.name}
                     </span>
                   </div>
+                  <p className="text-[11px] leading-relaxed line-clamp-2" style={{ color: 'var(--muted-foreground)' }}>
+                    {r.description}
+                  </p>
+                  <div className="flex flex-wrap gap-1">
+                    {r.tags.slice(0, 3).map(tag => (
+                      <span key={tag} className="text-[10px] px-1.5 py-0.5 rounded-full" style={{ background: 'var(--muted)', color: 'var(--muted-foreground)' }}>
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
                 </Link>
               );
             })}
@@ -193,7 +245,7 @@ export default function HomeContent({ recent }: { recent: RecentFile[] }) {
         <section className="mb-12">
           <div className="flex items-center gap-2 mb-5">
             <Clock size={13} style={{ color: 'var(--amber)' }} />
-            <h2 className="text-xs font-semibold uppercase tracking-[0.08em]" style={{ color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono', monospace" }}>
+            <h2 className="text-xs font-semibold uppercase tracking-[0.08em] font-display" style={{ color: 'var(--muted-foreground)' }}>
               {t.home.recentlyModified}
             </h2>
           </div>
@@ -211,7 +263,7 @@ export default function HomeContent({ recent }: { recent: RecentFile[] }) {
                   <div key={filePath} className="relative group">
                     {/* Timeline dot */}
                     <div
-                      className="absolute -left-4 top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full transition-all duration-150 group-hover:scale-150"
+                      className={`absolute -left-4 top-1/2 -translate-y-1/2 rounded-full transition-all duration-150 group-hover:scale-150 ${idx === 0 ? 'w-2 h-2' : 'w-1.5 h-1.5'}`}
                       style={{
                         background: idx === 0 ? 'var(--amber)' : 'var(--border)',
                         outline: idx === 0 ? '2px solid var(--amber-dim)' : 'none',
@@ -229,7 +281,7 @@ export default function HomeContent({ recent }: { recent: RecentFile[] }) {
                         <span className="text-sm font-medium truncate block" style={{ color: 'var(--foreground)' }} suppressHydrationWarning>{name}</span>
                         {dir && <span className="text-xs truncate block" style={{ color: 'var(--muted-foreground)', opacity: 0.6 }} suppressHydrationWarning>{dir}</span>}
                       </div>
-                      <span className="text-xs shrink-0 tabular-nums" style={{ color: 'var(--muted-foreground)', opacity: 0.5, fontFamily: "'IBM Plex Mono', monospace" }} suppressHydrationWarning>
+                      <span className="text-xs shrink-0 tabular-nums font-display" style={{ color: 'var(--muted-foreground)', opacity: 0.5 }} suppressHydrationWarning>
                         {formatTime(mtime)}
                       </span>
                     </Link>
@@ -242,8 +294,9 @@ export default function HomeContent({ recent }: { recent: RecentFile[] }) {
             {hasMore && (
               <button
                 onClick={() => setShowAll(v => !v)}
-                className="flex items-center gap-1.5 mt-2 ml-3 text-xs font-medium transition-colors hover:opacity-80 cursor-pointer"
-                style={{ color: 'var(--amber)', fontFamily: "'IBM Plex Mono', monospace" }}
+                aria-expanded={showAll}
+                style={{ color: 'var(--amber)' }}
+                className="flex items-center gap-1.5 mt-2 ml-3 text-xs font-medium transition-colors hover:opacity-80 cursor-pointer font-display"
               >
                 <ChevronDown
                   size={12}
@@ -259,7 +312,7 @@ export default function HomeContent({ recent }: { recent: RecentFile[] }) {
       })()}
 
       {/* Footer */}
-      <div className="mt-16 flex items-center gap-1.5 text-xs" style={{ color: 'var(--muted-foreground)', opacity: 0.4, fontFamily: "'IBM Plex Mono', monospace" }}>
+      <div className="mt-16 flex items-center gap-1.5 text-xs font-display" style={{ color: 'var(--muted-foreground)', opacity: 0.6 }}>
         <Sparkles size={10} style={{ color: 'var(--amber)' }} />
         <span>{t.app.footer}</span>
       </div>

package/app/components/JsonView.tsx

@@ -17,8 +17,7 @@ export default function JsonView({ content }: JsonViewProps) {
 
   return (
     <pre
-      className="rounded-xl border border-border bg-card px-4 py-3 overflow-x-auto text-sm leading-relaxed"
-      style={{ fontFamily: "'IBM Plex Mono', monospace" }}
+      className="rounded-xl border border-border bg-card px-4 py-3 overflow-x-auto text-sm leading-relaxed font-display"
       suppressHydrationWarning
     >
       <code>{pretty}</code>

package/app/components/MarkdownEditor.tsx

@@ -35,12 +35,11 @@ export default function MarkdownEditor({ value, onChange, viewMode, onViewModeCh
           <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 ${
+            className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded text-xs font-medium transition-colors font-display ${
               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}

package/app/components/OnboardingView.tsx

@@ -62,8 +62,8 @@ export default function OnboardingView() {
         <div className="inline-flex items-center gap-2 mb-4">
           <Sparkles size={18} style={{ color: 'var(--amber)' }} />
           <h1
-            className="text-2xl font-semibold tracking-tight"
-            style={{ fontFamily: "'IBM Plex Mono', monospace", color: 'var(--foreground)' }}
+            className="text-2xl font-semibold tracking-tight font-display"
+            style={{ color: 'var(--foreground)' }}
           >
             MindOS
           </h1>
@@ -94,7 +94,7 @@ export default function OnboardingView() {
                 <span style={{ color: 'var(--amber)' }}>{tpl.icon}</span>
                 <span
                   className="text-sm font-semibold"
-                  style={{ color: 'var(--foreground)', fontFamily: "'IBM Plex Sans', sans-serif" }}
+                  style={{ color: 'var(--foreground)' }}
                 >
                   {ob.templates[tpl.id].title}
                 </span>
@@ -110,10 +110,9 @@ export default function OnboardingView() {
 
               {/* Directory preview */}
               <div
-                className="w-full rounded-lg px-3 py-2 text-[11px] leading-relaxed"
+                className="w-full rounded-lg px-3 py-2 text-[11px] leading-relaxed font-display"
                 style={{
                   background: 'var(--muted)',
-                  fontFamily: "'IBM Plex Mono', monospace",
                   color: 'var(--muted-foreground)',
                   opacity: 0.8,
                 }}
@@ -129,8 +128,8 @@ export default function OnboardingView() {
 
       {/* Import hint */}
       <p
-        className="text-center text-xs leading-relaxed max-w-sm mx-auto"
-        style={{ color: 'var(--muted-foreground)', opacity: 0.6, fontFamily: "'IBM Plex Mono', monospace" }}
+        className="text-center text-xs leading-relaxed max-w-sm mx-auto font-display"
+        style={{ color: 'var(--muted-foreground)', opacity: 0.6 }}
       >
         {ob.importHint}
       </p>

package/app/components/SettingsModal.tsx

@@ -14,6 +14,7 @@ import { KnowledgeTab } from './settings/KnowledgeTab';
 import { PluginsTab } from './settings/PluginsTab';
 import { ShortcutsTab } from './settings/ShortcutsTab';
 import { SyncTab } from './settings/SyncTab';
+import { McpTab } from './settings/McpTab';
 
 interface SettingsModalProps {
   open: boolean;
@@ -139,6 +140,7 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
     { id: 'appearance', label: t.settings.tabs.appearance },
     { id: 'knowledge', label: t.settings.tabs.knowledge },
     { id: 'sync', label: t.settings.tabs.sync ?? 'Sync' },
+    { id: 'mcp', label: t.settings.tabs.mcp ?? 'MCP' },
     { id: 'plugins', label: t.settings.tabs.plugins },
     { id: 'shortcuts', label: t.settings.tabs.shortcuts },
   ];
@@ -158,7 +160,7 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
         <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>
+            <span className="font-display">{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} />
@@ -190,7 +192,7 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
               <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' ? (
+          ) : !data && tab !== 'shortcuts' && tab !== 'appearance' && tab !== 'mcp' && tab !== 'sync' ? (
             <div className="flex justify-center py-8">
               <Loader2 size={18} className="animate-spin text-muted-foreground" />
             </div>
@@ -202,6 +204,7 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
               {tab === 'plugins' && <PluginsTab pluginStates={pluginStates} setPluginStates={setPluginStates} t={t} />}
               {tab === 'shortcuts' && <ShortcutsTab t={t} />}
               {tab === 'sync' && <SyncTab t={t} />}
+              {tab === 'mcp' && <McpTab t={t} />}
             </>
           )}
         </div>