@geminilight/mindos 0.2.1 → 0.4.0

package/app/components/DirView.tsx

@@ -2,9 +2,9 @@
 
 import { useState, useSyncExternalStore, useMemo } from 'react';
 import Link from 'next/link';
-import { FileText, Table, Folder, FolderOpen, LayoutGrid, List } from 'lucide-react';
+import { FileText, Table, Folder, FolderOpen, LayoutGrid, List, FilePlus } from 'lucide-react';
 import Breadcrumb from '@/components/Breadcrumb';
-import { encodePath } from '@/lib/utils';
+import { encodePath, relativeTime } from '@/lib/utils';
 import { FileNode } from '@/lib/types';
 import { useLocale } from '@/lib/LocaleContext';
 
@@ -57,6 +57,7 @@ function useDirViewPref() {
 export default function DirView({ dirPath, entries }: DirViewProps) {
   const [view, setView] = useDirViewPref();
   const { t } = useLocale();
+  const formatTime = (mtime: number) => relativeTime(mtime, t.home.relativeTime);
   const fileCounts = useMemo(() => {
     const map = new Map<string, number>();
     for (const e of entries) map.set(e.path, countFiles(e));
@@ -71,22 +72,31 @@ export default function DirView({ dirPath, entries }: DirViewProps) {
           <div className="min-w-0 flex-1">
             <Breadcrumb filePath={dirPath} />
           </div>
-          {/* View toggle */}
-          <div className="flex items-center gap-1 p-1 bg-muted rounded-lg shrink-0">
-            <button
-              onClick={() => setView('grid')}
-              className={`p-1.5 rounded transition-colors ${view === 'grid' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
-              title={t.dirView.gridView}
+          {/* New file + View toggle */}
+          <div className="flex items-center gap-2 shrink-0">
+            <Link
+              href={`/view/${encodePath(dirPath ? `${dirPath}/Untitled.md` : 'Untitled.md')}`}
+              className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-lg transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
             >
-              <LayoutGrid size={14} />
-            </button>
-            <button
-              onClick={() => setView('list')}
-              className={`p-1.5 rounded transition-colors ${view === 'list' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
-              title={t.dirView.listView}
-            >
-              <List size={14} />
-            </button>
+              <FilePlus size={13} />
+              <span className="hidden sm:inline">{t.dirView.newFile}</span>
+            </Link>
+            <div className="flex items-center gap-1 p-1 bg-muted rounded-lg">
+              <button
+                onClick={() => setView('grid')}
+                className={`p-1.5 rounded transition-colors ${view === 'grid' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
+                title={t.dirView.gridView}
+              >
+                <LayoutGrid size={14} />
+              </button>
+              <button
+                onClick={() => setView('list')}
+                className={`p-1.5 rounded transition-colors ${view === 'list' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
+                title={t.dirView.listView}
+              >
+                <List size={14} />
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -102,15 +112,26 @@ export default function DirView({ dirPath, entries }: DirViewProps) {
                 <Link
                   key={entry.path}
                   href={`/view/${encodePath(entry.path)}`}
-                  className="flex flex-col items-center gap-2 p-4 rounded-xl border border-border bg-card hover:bg-accent hover:border-border/80 transition-all duration-100 text-center"
+                  className={
+                    entry.type === 'directory'
+                      ? 'flex flex-col items-center gap-1.5 p-3 rounded-xl border border-border bg-card hover:bg-accent hover:border-border/80 transition-all duration-100 text-center'
+                      : 'flex flex-col items-center gap-2 p-4 rounded-xl border border-border bg-card hover:bg-accent hover:border-border/80 transition-all duration-100 text-center'
+                  }
                 >
-                  <FileIconLarge node={entry} />
+                  {entry.type === 'directory'
+                    ? <FolderOpen size={22} className="text-yellow-400" />
+                    : <FileIconLarge node={entry} />}
                   <span className="text-xs text-foreground leading-snug line-clamp-2 w-full" suppressHydrationWarning>
                     {entry.name}
                   </span>
                   {entry.type === 'directory' && (
                     <span className="text-[10px] text-muted-foreground">{t.dirView.fileCount(fileCounts.get(entry.path) ?? 0)}</span>
                   )}
+                  {entry.type === 'file' && entry.mtime && (
+                    <span className="text-[10px] text-muted-foreground font-display" suppressHydrationWarning>
+                      {formatTime(entry.mtime)}
+                    </span>
+                  )}
                 </Link>
               ))}
             </div>
@@ -129,8 +150,8 @@ export default function DirView({ dirPath, entries }: DirViewProps) {
                   {entry.type === 'directory' ? (
                     <span className="text-xs text-muted-foreground shrink-0">{t.dirView.fileCount(fileCounts.get(entry.path) ?? 0)}</span>
                   ) : entry.mtime ? (
-                    <span className="text-xs text-muted-foreground shrink-0 tabular-nums" style={{ fontFamily: "'IBM Plex Mono', monospace" }} suppressHydrationWarning>
-                      {new Date(entry.mtime).toLocaleDateString()}
+                    <span className="text-xs text-muted-foreground shrink-0 tabular-nums font-display" suppressHydrationWarning>
+                      {formatTime(entry.mtime)}
                     </span>
                   ) : null}
                 </Link>

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>