@geminilight/mindos 0.2.1 → 0.4.0

package/app/app/api/update-check/route.ts

@@ -0,0 +1,52 @@
+export const dynamic = 'force-dynamic';
+import { NextResponse } from 'next/server';
+import { gt } from 'semver';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+
+// Read version from package.json (not process.env.npm_package_version — unavailable in daemon mode)
+let current = '0.0.0';
+try {
+  const pkgPath = resolve(process.cwd(), '..', 'package.json');
+  const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+  current = pkg.version;
+} catch {}
+
+// npm registry sources: prefer China mirror, fallback to official
+const REGISTRIES = [
+  'https://registry.npmmirror.com/@geminilight/mindos/latest',
+  'https://registry.npmjs.org/@geminilight/mindos/latest',
+];
+
+export async function GET() {
+  let latest = current;
+
+  for (const url of REGISTRIES) {
+    try {
+      const res = await fetch(url, {
+        signal: AbortSignal.timeout(3000),
+        next: { revalidate: 300 }, // 5-minute ISR cache
+      });
+      if (res.ok) {
+        const data = await res.json();
+        latest = data.version;
+        break;
+      }
+    } catch {
+      continue;
+    }
+  }
+
+  let hasUpdate = false;
+  try {
+    hasUpdate = gt(latest, current);
+  } catch {
+    // Invalid version string from registry — treat as no update
+  }
+
+  return NextResponse.json({
+    current,
+    latest,
+    hasUpdate,
+  });
+}

package/app/app/globals.css

@@ -119,6 +119,9 @@ body {
   body { @apply bg-background text-foreground; }
 }
 
+/* Utility: IBM Plex Mono display heading font */
+.font-display { font-family: 'IBM Plex Mono', var(--font-ibm-plex-mono), monospace; }
+
 /* Content width — controlled by Settings > Appearance */
 :root { --content-width: 780px; }
 .content-width { max-width: var(--content-width-override, var(--content-width)); margin-left: auto; margin-right: auto; }
@@ -287,6 +290,15 @@ body {
   button, a { -webkit-tap-highlight-color: transparent; }
 }
 
+/* Global focus-visible ring for interactive elements */
+button:focus-visible,
+a:focus-visible,
+[role="button"]:focus-visible {
+  outline: 2px solid var(--amber);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
 /* ─── Tiptap WYSIWYG editor ─────────────────────────────────────────── */
 .wysiwyg-wrapper {
   height: 100%;

package/app/app/layout.tsx

@@ -7,6 +7,7 @@ import { TooltipProvider } from '@/components/ui/tooltip';
 import { LocaleProvider } from '@/lib/LocaleContext';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import RegisterSW from './register-sw';
+import UpdateBanner from '@/components/UpdateBanner';
 
 const geistSans = Geist({
   variable: '--font-geist-sans',
@@ -20,13 +21,13 @@ const geistMono = Geist_Mono({
 
 const ibmPlexMono = IBM_Plex_Mono({
   variable: '--font-ibm-plex-mono',
-  weight: ['400', '500', '600'],
+  weight: ['400', '600'],
   subsets: ['latin'],
 });
 
 const ibmPlexSans = IBM_Plex_Sans({
   variable: '--font-ibm-plex-sans',
-  weight: ['300', '400', '500', '600'],
+  weight: ['400', '500', '600'],
   subsets: ['latin'],
 });
 
@@ -91,6 +92,7 @@ export default function RootLayout({
         suppressHydrationWarning
       >
         <LocaleProvider>
+          <UpdateBanner />
           <TooltipProvider delay={300}>
             <ErrorBoundary>
               <ShellLayout fileTree={fileTree}>

package/app/app/login/page.tsx

@@ -3,14 +3,18 @@
 import { useState, Suspense } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Loader2, Lock } from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
 
 function LoginForm() {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { t } = useLocale();
   const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
 
+  const loginT = t.login;
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     setLoading(true);
@@ -29,11 +33,11 @@ function LoginForm() {
           : '/';
         router.replace(safe);
       } else {
-        setError('Incorrect password. Please try again.');
+        setError(loginT?.incorrectPassword ?? 'Incorrect password. Please try again.');
         setPassword('');
       }
     } catch {
-      setError('Connection error. Please try again.');
+      setError(loginT?.connectionError ?? 'Connection error. Please try again.');
     } finally {
       setLoading(false);
     }
@@ -61,26 +65,28 @@ function LoginForm() {
               <path d="M35,17.5 Q35,20 37.5,20 Q35,20 35,22.5 Q35,20 32.5,20 Q35,20 35,17.5 Z" fill="#FEF3C7"/>
             </g>
           </svg>
-          <h1
-            className="text-xl font-semibold text-foreground tracking-tight"
-            style={{ fontFamily: "'IBM Plex Mono', monospace" }}
-          >
+          <h1 className="text-xl font-semibold text-foreground tracking-tight font-display">
             MindOS
           </h1>
-          <p className="text-sm text-muted-foreground">Enter your password to continue</p>
+          <p className="text-xs text-muted-foreground/70 italic">
+            {loginT?.tagline ?? 'You think here, Agents act there.'}
+          </p>
+          <p className="text-sm text-muted-foreground">
+            {loginT?.subtitle ?? 'Enter your password to continue'}
+          </p>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-1.5">
             <label className="text-sm font-medium text-foreground" htmlFor="password">
-              Password
+              {loginT?.passwordLabel ?? 'Password'}
             </label>
             <input
               id="password"
               type="password"
               value={password}
               onChange={e => setPassword(e.target.value)}
-              placeholder="Enter password"
+              placeholder={loginT?.passwordPlaceholder ?? 'Enter password'}
               autoFocus
               autoComplete="current-password"
               required
@@ -89,21 +95,22 @@ function LoginForm() {
           </div>
 
           {error && (
-            <p className="text-xs text-destructive">{error}</p>
+            <p className="text-xs text-destructive" role="alert" aria-live="polite">{error}</p>
           )}
 
           <button
             type="submit"
             disabled={loading || !password}
-            className="w-full flex items-center justify-center gap-2 py-2 px-4 rounded-lg text-sm font-medium transition-opacity disabled:opacity-50 disabled:cursor-not-allowed mt-2"
-            style={{ background: 'var(--amber)', color: '#131210' }}
+            className="w-full flex items-center justify-center gap-2 py-2 px-4 rounded-lg text-sm font-medium transition-opacity disabled:opacity-50 disabled:cursor-not-allowed mt-2 bg-[var(--amber)] text-[#131210]"
           >
             {loading ? (
               <Loader2 size={14} className="animate-spin" />
             ) : (
               <Lock size={14} />
             )}
-            {loading ? 'Signing in…' : 'Sign in'}
+            {loading
+              ? (loginT?.signingIn ?? 'Signing in…')
+              : (loginT?.signIn ?? 'Sign in')}
           </button>
         </form>
       </div>

package/app/app/page.tsx

@@ -1,12 +1,32 @@
-import { getRecentlyModified } from '@/lib/fs';
+import { redirect } from 'next/navigation';
+import { readSettings } from '@/lib/settings';
+import { getRecentlyModified, getFileContent } from '@/lib/fs';
+import { getAllRenderers } from '@/lib/renderers/registry';
+import '@/lib/renderers/index'; // registers all renderers
 import HomeContent from '@/components/HomeContent';
 
+function getExistingFiles(paths: string[]): string[] {
+  return paths.filter(p => {
+    try { getFileContent(p); return true; } catch { return false; }
+  });
+}
+
 export default function HomePage() {
+  const settings = readSettings();
+  if (settings.setupPending) redirect('/setup');
+
   let recent: { path: string; mtime: number }[] = [];
   try {
     recent = getRecentlyModified(15);
   } catch (err) {
     console.error('[HomePage] Failed to load recent files:', err);
   }
-  return <HomeContent recent={recent} />;
+
+  // Derive plugin entry paths from registry — no hardcoded list needed
+  const entryPaths = getAllRenderers()
+    .map(r => r.entryPath)
+    .filter((p): p is string => !!p);
+  const existingFiles = getExistingFiles(entryPaths);
+
+  return <HomeContent recent={recent} existingFiles={existingFiles} />;
 }

package/app/app/setup/page.tsx

@@ -0,0 +1,9 @@
+import { redirect } from 'next/navigation';
+import { readSettings } from '@/lib/settings';
+import SetupWizard from '@/components/SetupWizard';
+
+export default function SetupPage() {
+  const settings = readSettings();
+  if (!settings.setupPending) redirect('/');
+  return <SetupWizard />;
+}

package/app/app/view/[...path]/ViewPageClient.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { useState, useTransition, useCallback, useEffect, useSyncExternalStore } from 'react';
+import { useState, useTransition, useCallback, useEffect, useRef, useSyncExternalStore, useMemo, Suspense } from 'react';
 import { useRouter } from 'next/navigation';
-import { Edit3, Save, X, Loader2, LayoutTemplate } from 'lucide-react';
+import { Edit3, Save, X, Loader2, LayoutTemplate, ArrowLeft } from 'lucide-react';
+import { lazy } from 'react';
 import MarkdownView from '@/components/MarkdownView';
 import JsonView from '@/components/JsonView';
 import CsvView from '@/components/CsvView';
@@ -10,6 +11,7 @@ import Backlinks from '@/components/Backlinks';
 import Breadcrumb from '@/components/Breadcrumb';
 import MarkdownEditor, { MdViewMode } from '@/components/MarkdownEditor';
 import TableOfContents from '@/components/TableOfContents';
+import FindInPage from '@/components/FindInPage';
 import { resolveRenderer } from '@/lib/renderers/registry';
 import { encodePath } from '@/lib/utils';
 import '@/lib/renderers/index'; // registers all renderers
@@ -67,6 +69,8 @@ export default function ViewPageClient({
   const [saveError, setSaveError] = useState<string | null>(null);
   const [saveSuccess, setSaveSuccess] = useState(false);
   const [mdViewMode, setMdViewMode] = useState<MdViewMode>('wysiwyg');
+  const [findOpen, setFindOpen] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
 
   const inferredName = filePath.split('/').pop() || 'Untitled.md';
   const [showSaveAs, setShowSaveAs] = useState(isDraft);
@@ -86,6 +90,14 @@ export default function ViewPageClient({
   const isCsv = extension === 'csv';
   const showRenderer = !editing && !effectiveUseRaw && !!renderer;
 
+  // Lazily resolve the renderer component for code-splitting
+  const LazyComponent = useMemo(() => {
+    if (!renderer) return null;
+    if (renderer.component) return renderer.component;
+    if (renderer.load) return lazy(renderer.load);
+    return null;
+  }, [renderer]);
+
   const handleEdit = useCallback(() => {
     setEditContent(savedContent);
     setEditing(true);
@@ -172,6 +184,10 @@ export default function ViewPageClient({
         e.preventDefault();
         if (editing) handleSave();
       }
+      if ((e.metaKey || e.ctrlKey) && e.key === 'f' && !editing) {
+        e.preventDefault();
+        setFindOpen(true);
+      }
       if (e.key === 'e' && !editing && document.activeElement?.tagName === 'BODY') {
         handleEdit();
       }
@@ -186,13 +202,20 @@ export default function ViewPageClient({
       {/* Top bar */}
       <div className="sticky top-[52px] md:top-0 z-20 border-b border-border px-4 md:px-6 py-2.5" style={{ background: 'var(--background)' }}>
         <div className="content-width xl:mr-[220px] flex items-center justify-between gap-2">
-          <div className="min-w-0 flex-1">
+          <div className="min-w-0 flex-1 flex items-center gap-1.5">
+            <button
+              onClick={() => router.back()}
+              className="md:hidden p-1 -ml-1 rounded text-muted-foreground hover:text-foreground transition-colors shrink-0"
+              aria-label="Go back"
+            >
+              <ArrowLeft size={16} />
+            </button>
             <Breadcrumb filePath={filePath} />
           </div>
 
           <div className="flex items-center gap-1.5 md:gap-2 shrink-0">
             {saveSuccess && (
-              <span className="text-xs flex items-center gap-1.5" style={{ color: '#7aad80', fontFamily: "'IBM Plex Mono', monospace" }}>
+              <span className="text-xs flex items-center gap-1.5 font-display" style={{ color: '#7aad80' }}>
                 <span className="w-1.5 h-1.5 rounded-full" style={{ background: '#7aad80' }} />
                 <span className="hidden sm:inline">saved</span>
               </span>
@@ -205,11 +228,10 @@ export default function ViewPageClient({
             {renderer && !editing && !isDraft && (
               <button
                 onClick={handleToggleRaw}
-                className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+                className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors font-display"
                 style={{
                   background: effectiveUseRaw ? 'var(--muted)' : `${'var(--amber)'}22`,
                   color: effectiveUseRaw ? 'var(--muted-foreground)' : 'var(--amber)',
-                  fontFamily: "'IBM Plex Mono', monospace",
                 }}
                 title={effectiveUseRaw ? `Switch to ${renderer.name}` : 'View raw'}
               >
@@ -221,8 +243,8 @@ export default function ViewPageClient({
             {!editing && !showRenderer && !isDraft && (
               <button
                 onClick={handleEdit}
-                className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-                style={{ background: 'var(--muted)', color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono', monospace" }}
+                className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors font-display"
+                style={{ background: 'var(--muted)', color: 'var(--muted-foreground)' }}
                 onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--foreground)'; e.currentTarget.style.background = 'var(--accent)'; }}
                 onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--muted-foreground)'; e.currentTarget.style.background = 'var(--muted)'; }}
               >
@@ -235,8 +257,8 @@ export default function ViewPageClient({
                 <button
                   onClick={handleCancel}
                   disabled={isPending}
-                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors disabled:opacity-50"
-                  style={{ background: 'var(--muted)', color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono', monospace" }}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors disabled:opacity-50 font-display"
+                  style={{ background: 'var(--muted)', color: 'var(--muted-foreground)' }}
                   onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--accent)'; }}
                   onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--muted)'; }}
                 >
@@ -246,8 +268,8 @@ export default function ViewPageClient({
                 <button
                   onClick={isDraft && showSaveAs ? handleConfirmDraftSave : handleSave}
                   disabled={isPending}
-                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium disabled:opacity-50"
-                  style={{ background: 'var(--amber)', color: '#131210', fontFamily: "'IBM Plex Mono', monospace" }}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium disabled:opacity-50 font-display"
+                  style={{ background: 'var(--amber)', color: '#131210' }}
                 >
                   {isPending ? <Loader2 size={13} className="animate-spin" /> : <Save size={13} />}
                   <span className="hidden sm:inline">Save</span>
@@ -309,18 +331,22 @@ export default function ViewPageClient({
               />
             )}
           </div>
-        ) : showRenderer ? (
-          <div className="content-width xl:mr-[220px]">
-            <renderer.component
-              filePath={filePath}
-              content={savedContent}
-              extension={extension}
-              saveAction={handleRendererSave}
-            />
+        ) : showRenderer && LazyComponent ? (
+          <div ref={contentRef} className="content-width xl:mr-[220px]">
+            {findOpen && <FindInPage containerRef={contentRef} onClose={() => setFindOpen(false)} />}
+            <Suspense fallback={<div className="flex items-center justify-center py-12"><Loader2 size={20} className="animate-spin text-muted-foreground" /></div>}>
+              <LazyComponent
+                filePath={filePath}
+                content={savedContent}
+                extension={extension}
+                saveAction={handleRendererSave}
+              />
+            </Suspense>
             <Backlinks filePath={filePath} />
           </div>
         ) : (
-          <div className="content-width xl:mr-[220px]">
+          <div ref={contentRef} className="content-width xl:mr-[220px]">
+            {findOpen && <FindInPage containerRef={contentRef} onClose={() => setFindOpen(false)} />}
             {extension === 'csv' ? (
               <CsvView
                 content={savedContent}

package/app/app/view/[...path]/loading.tsx

@@ -6,7 +6,7 @@ export default function Loading() {
           className="w-6 h-6 border-2 rounded-full animate-spin"
           style={{ borderColor: 'var(--border)', borderTopColor: 'var(--amber)' }}
         />
-        <span className="text-xs text-muted-foreground" style={{ fontFamily: "'IBM Plex Mono', monospace" }}>
+        <span className="text-xs text-muted-foreground font-display">
           Loading...
         </span>
       </div>

package/app/app/view/[...path]/not-found.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { usePathname, useRouter } from 'next/navigation';
+import { FilePlus, Home, ArrowLeft } from 'lucide-react';
+import { useState } from 'react';
+import { useLocale } from '@/lib/LocaleContext';
+import { encodePath } from '@/lib/utils';
+
+export default function ViewNotFound() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { t } = useLocale();
+  const [creating, setCreating] = useState(false);
+
+  // Extract the attempted file path from /view/...
+  const filePath = pathname.startsWith('/view/')
+    ? decodeURIComponent(pathname.slice('/view/'.length))
+    : '';
+
+  const parentDir = filePath.includes('/')
+    ? filePath.split('/').slice(0, -1).join('/')
+    : '';
+
+  const isMd = filePath.endsWith('.md') || !filePath.includes('.');
+  const displayPath = filePath || 'unknown';
+
+  const notFoundT = t.notFound;
+
+  const handleCreate = async () => {
+    setCreating(true);
+    try {
+      const target = isMd && !filePath.includes('.') ? `${filePath}.md` : filePath;
+      const res = await fetch('/api/files', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: target, content: '' }),
+      });
+      if (res.ok) {
+        router.replace(`/view/${encodePath(target)}`);
+        router.refresh();
+      }
+    } catch {
+      // silent — user can retry
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  return (
+    <div className="content-width px-4 md:px-6 py-16 md:py-24 flex flex-col items-center text-center">
+      <div className="w-12 h-12 rounded-xl bg-muted flex items-center justify-center mb-6">
+        <FilePlus size={24} className="text-muted-foreground" />
+      </div>
+
+      <h1 className="text-lg font-semibold text-foreground mb-2 font-display">
+        {notFoundT?.title ?? 'File not found'}
+      </h1>
+
+      <p className="text-sm text-muted-foreground mb-1">
+        <code className="px-1.5 py-0.5 rounded bg-muted font-mono text-xs">{displayPath}</code>
+      </p>
+      <p className="text-sm text-muted-foreground mb-8">
+        {notFoundT?.description ?? 'This file does not exist in your knowledge base.'}
+      </p>
+
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        {isMd && (
+          <button
+            onClick={handleCreate}
+            disabled={creating}
+            className="flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg transition-colors disabled:opacity-50"
+            style={{ background: 'var(--amber)', color: '#131210' }}
+          >
+            <FilePlus size={14} />
+            {creating
+              ? (notFoundT?.creating ?? 'Creating...')
+              : (notFoundT?.createButton ?? 'Create this file')}
+          </button>
+        )}
+
+        {parentDir && (
+          <button
+            onClick={() => router.push(`/view/${encodePath(parentDir)}`)}
+            className="flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+          >
+            <ArrowLeft size={14} />
+            {notFoundT?.goToParent ?? 'Go to parent folder'}
+          </button>
+        )}
+
+        <button
+          onClick={() => router.push('/')}
+          className="flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+        >
+          <Home size={14} />
+          {notFoundT?.goHome ?? 'Home'}
+        </button>
+      </div>
+    </div>
+  );
+}

package/app/components/AskFab.tsx

@@ -31,9 +31,9 @@ export default function AskFab() {
           active:scale-95
           cursor-pointer
           overflow-hidden
+          font-display
         "
         style={{
-          fontFamily: "'IBM Plex Mono', monospace",
           background: 'linear-gradient(135deg, #b07c2e 0%, #c8873a 50%, #d4943f 100%)',
           marginBottom: 'env(safe-area-inset-bottom, 0px)',
         }}

package/app/components/AskModal.tsx

@@ -244,7 +244,7 @@ export default function AskModal({ open, onClose, currentFile }: AskModalProps)
           <div className="absolute top-2 left-1/2 -translate-x-1/2 w-8 h-1 rounded-full bg-muted-foreground/20 md:hidden" />
           <div className="flex items-center gap-2 text-sm font-medium text-foreground">
             <Sparkles size={15} style={{ color: 'var(--amber)' }} />
-            <span style={{ fontFamily: "'IBM Plex Mono', monospace" }}>{t.ask.title}</span>
+            <span className="font-display">{t.ask.title}</span>
             {currentFile && (
               <span className="text-xs text-muted-foreground font-normal truncate max-w-[200px]">
                 — {currentFile.split('/').pop()}

package/app/components/Backlinks.tsx

@@ -31,7 +31,7 @@ export default function Backlinks({ filePath }: { filePath: string }) {
     <div className="mt-12 pt-8 border-t border-border">
       <div className="flex items-center gap-2 mb-6 text-muted-foreground">
         <LinkIcon size={16} className="text-amber-500/70" />
-        <h3 className="text-sm font-semibold tracking-wider uppercase" style={{ fontFamily: "'IBM Plex Mono', monospace" }}>
+        <h3 className="text-sm font-semibold tracking-wider uppercase font-display">
           {t.common?.relatedFiles || 'Related Files'}
         </h3>
         <span className="text-xs bg-muted px-1.5 py-0.5 rounded-full font-mono">

package/app/components/Breadcrumb.tsx

@@ -1,12 +1,19 @@
 'use client';
 
 import Link from 'next/link';
-import { ChevronRight, Home } from 'lucide-react';
+import { ChevronRight, Home, FileText, Table, Folder } from 'lucide-react';
+
+function FileTypeIcon({ name }: { name: string }) {
+  const ext = name.includes('.') ? name.slice(name.lastIndexOf('.')).toLowerCase() : '';
+  if (ext === '.csv') return <Table size={13} className="text-emerald-400 shrink-0" />;
+  if (ext) return <FileText size={13} className="text-zinc-400 shrink-0" />;
+  return <Folder size={13} className="text-yellow-400 shrink-0" />;
+}
 
 export default function Breadcrumb({ filePath }: { filePath: string }) {
   const parts = filePath.split('/');
   return (
-    <nav className="flex items-center gap-1 text-xs text-muted-foreground flex-wrap" style={{ fontFamily: "'IBM Plex Mono', monospace" }}>
+    <nav className="flex items-center gap-1 text-xs text-muted-foreground flex-wrap font-display">
       <Link href="/" className="hover:text-foreground transition-colors">
         <Home size={14} />
       </Link>
@@ -17,7 +24,10 @@ export default function Breadcrumb({ filePath }: { filePath: string }) {
           <span key={i} className="flex items-center gap-1">
             <ChevronRight size={12} className="text-muted-foreground/50" />
             {isLast ? (
-              <span className="text-foreground font-medium" suppressHydrationWarning>{part}</span>
+              <span className="flex items-center gap-1.5 text-foreground font-medium" suppressHydrationWarning>
+                <FileTypeIcon name={part} />
+                {part}
+              </span>
             ) : (
               <Link href={href} className="hover:text-foreground transition-colors truncate max-w-[200px]" suppressHydrationWarning>
                 {part}

package/app/components/CsvView.tsx

@@ -218,7 +218,6 @@ export default function CsvView({ content: initialContent, appendAction, saveAct
                   style={{
                     color: 'var(--foreground)',
                     borderBottom: '1px solid var(--border)',
-                    fontFamily: "'IBM Plex Sans', sans-serif",
                     fontSize: '0.75rem',
                     letterSpacing: '0.04em',
                     textTransform: 'uppercase',
@@ -296,15 +295,15 @@ export default function CsvView({ content: initialContent, appendAction, saveAct
         className="px-4 py-2 flex items-center justify-between"
         style={{ background: 'var(--muted)', borderTop: '1px solid var(--border)' }}
       >
-        <span className="text-xs" style={{ color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono', monospace" }}>
+        <span className="text-xs font-display" style={{ color: 'var(--muted-foreground)' }}>
           {rows.length} rows · {headers.length} cols
         </span>
 
         {canEdit && !showAdd && (
           <button
             onClick={() => setShowAdd(true)}
-            className="flex items-center gap-1 text-xs px-2.5 py-1 rounded-md transition-colors"
-            style={{ color: 'var(--amber)', background: 'var(--amber-dim)', fontFamily: "'IBM Plex Mono', monospace" }}
+            className="flex items-center gap-1 text-xs px-2.5 py-1 rounded-md transition-colors font-display"
+            style={{ color: 'var(--amber)', background: 'var(--amber-dim)' }}
           >
             <Plus size={12} />
             Add row
@@ -313,8 +312,8 @@ export default function CsvView({ content: initialContent, appendAction, saveAct
         {showAdd && (
           <button
             onClick={() => setShowAdd(false)}
-            className="text-xs px-2.5 py-1 rounded-md transition-colors"
-            style={{ color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono', monospace" }}
+            className="text-xs px-2.5 py-1 rounded-md transition-colors font-display"
+            style={{ color: 'var(--muted-foreground)' }}
           >
             Cancel
           </button>