@geminilight/mindos 0.3.0 → 0.5.0

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,8 +1,18 @@
 import { redirect } from 'next/navigation';
 import { readSettings } from '@/lib/settings';
-import { getRecentlyModified } from '@/lib/fs';
+import { getRecentlyModified, getFileContent } from '@/lib/fs';
+import { getAllRenderers } from '@/lib/renderers/registry';
+import '@/lib/renderers/index'; // registers all renderers
 import HomeContent from '@/components/HomeContent';
 
+export const dynamic = 'force-dynamic';
+
+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');
@@ -13,5 +23,12 @@ export default function HomePage() {
   } 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

@@ -2,6 +2,8 @@ import { redirect } from 'next/navigation';
 import { readSettings } from '@/lib/settings';
 import SetupWizard from '@/components/SetupWizard';
 
+export const dynamic = 'force-dynamic';
+
 export default function SetupPage() {
   const settings = readSettings();
   if (!settings.setupPending) redirect('/');

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>

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>