@geminilight/mindos 0.6.52 → 0.6.54

package/app/components/HomeContent.tsx

@@ -7,6 +7,7 @@ import { useLocale } from '@/lib/stores/locale-store';
 import { encodePath, relativeTime, extractEmoji, stripEmoji } from '@/lib/utils';
 import { usePinnedFiles } from '@/lib/hooks/usePinnedFiles';
 import OnboardingView from './OnboardingView';
+import Logo from './Logo';
 import GuideCard from './GuideCard';
 import SystemPulse from './SystemPulse';
 import { InboxSection } from './home/InboxSection';
@@ -78,13 +79,15 @@ interface SectionTitleProps {
 
 function SectionTitle({ icon, children, count, action }: SectionTitleProps) {
   return (
-    <div className="flex items-center gap-2 mb-4">
-      <span className="text-[var(--amber)]">{icon}</span>
-      <h2 className="text-sm font-semibold font-display text-foreground">
+    <div className="flex items-center gap-2.5 mb-5">
+      <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)]">
+        {icon}
+      </div>
+      <h2 className="text-[13px] font-semibold text-foreground tracking-wide">
         {children}
       </h2>
       {count != null && count > 0 && (
-        <span className="text-xs tabular-nums text-muted-foreground font-display">{count}</span>
+        <span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[10px] font-semibold rounded-full bg-muted text-muted-foreground tabular-nums">{count}</span>
       )}
       {action ? <div className="ml-auto">{action}</div> : null}
     </div>
@@ -103,7 +106,7 @@ function ToggleButton({ expanded, onToggle, showLabel, hideLabel, className = ''
     <button
       onClick={onToggle}
       aria-expanded={expanded}
-      className={`flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer font-display ${className}`}
+      className={`flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer ${className}`}
     >
       <ChevronDown size={12} className={`transition-transform duration-200 ${expanded ? 'rotate-180' : ''}`} />
       <span>{expanded ? hideLabel : showLabel}</span>
@@ -133,7 +136,7 @@ function FileRow({ filePath, mtime, formatTime, subPath }: {
         <span className="text-sm truncate block text-foreground" suppressHydrationWarning>{name}</span>
         {subPath && <span className="text-xs truncate block text-muted-foreground opacity-50" suppressHydrationWarning>{subPath}</span>}
       </div>
-      <span className="text-xs shrink-0 tabular-nums font-display text-muted-foreground opacity-40" suppressHydrationWarning>
+      <span className="text-xs shrink-0 tabular-nums text-muted-foreground/40" suppressHydrationWarning>
         {formatTime(mtime)}
       </span>
     </Link>
@@ -180,25 +183,25 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
       <ExampleCleanupBanner />
 
       {/* ══════════ Hero ══════════ */}
-      <div className="mb-10">
+      <div className="mb-14">
         {/* Brand mark */}
-        <div className="flex items-center gap-3 mb-2">
-          <div className="w-1 h-7 rounded-full bg-gradient-to-b from-[var(--amber)] to-[var(--amber)]/20" />
-          <h1 className="text-2xl font-semibold tracking-tight font-display text-foreground">
-            MindOS
+        <div className="flex items-center gap-5 mb-1">
+          <Logo id="home-hero" className="w-14 h-7 opacity-90" />
+          <h1 className="text-[2rem] font-brand leading-none">
+            <span className="text-foreground">Mind</span><span className="text-[var(--amber)]">OS</span>
           </h1>
         </div>
-        <p className="text-sm leading-relaxed text-muted-foreground pl-4 max-w-lg mb-6">
+        <p className="text-sm text-muted-foreground/50 mt-3 max-w-md leading-relaxed">
           {t.app.tagline}
         </p>
 
         {/* Command bar — the single most important action */}
-        <div className="w-full max-w-xl flex flex-col sm:flex-row items-stretch sm:items-center gap-2 pl-4">
+        <div className="w-full max-w-xl flex flex-col sm:flex-row items-stretch sm:items-center gap-2 mt-8">
           <button
             onClick={triggerAsk}
             title="⌘/"
             data-walkthrough="ask-button"
-            className="flex-1 flex items-center gap-3 px-4 py-3 rounded-xl border border-border/60 shadow-sm bg-card transition-all duration-150 hover:border-[var(--amber)]/50 hover:shadow-md group"
+            className="flex-1 flex items-center gap-3 px-4 py-3.5 rounded-xl border border-border/50 shadow-sm bg-card/80 backdrop-blur-sm transition-all duration-200 hover:border-[var(--amber)]/40 hover:shadow-md hover:-translate-y-0.5 group"
           >
             <Sparkles size={16} className="shrink-0 text-[var(--amber)] group-hover:scale-110 transition-transform duration-150" />
             <div className="flex-1 min-h-[1.5rem] flex items-center">
@@ -216,7 +219,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
           <button
             onClick={triggerSearch}
             title="⌘K"
-            className="flex items-center gap-2 px-3.5 py-3 rounded-xl border border-border/60 text-sm text-muted-foreground transition-all duration-150 shrink-0 hover:bg-muted hover:shadow-sm"
+            className="flex items-center gap-2 px-3.5 py-3.5 rounded-xl border border-border/50 text-sm text-muted-foreground transition-all duration-200 shrink-0 hover:bg-muted/60 hover:shadow-sm hover:-translate-y-0.5"
           >
             <Search size={14} />
             <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono bg-muted">
@@ -226,10 +229,10 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
         </div>
 
         {/* Quick actions — only 2: New + Continue */}
-        <div className="flex items-center gap-3 mt-4 pl-4">
+        <div className="flex items-center gap-3 mt-5">
           <Link
             href="/view/Untitled.md"
-            className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-all duration-150 hover:shadow-sm bg-[var(--amber)] text-[var(--amber-foreground)]"
+            className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 hover:shadow-md hover:-translate-y-0.5 bg-[var(--amber)] text-[var(--amber-foreground)]"
           >
             <FilePlus size={14} />
             <span>{t.home.newNote}</span>
@@ -257,12 +260,15 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
         <RecentActivityFeed />
       </div>
 
+      {/* ── Visual divider ── */}
+      <div className="border-t border-border/30 mb-10" />
+
       {/* ══════════ Inbox ══════════ */}
       <InboxSection />
 
       {/* ══════════ Spaces ══════════ */}
       {(spaceList.length > 0 || true) && (
-        <section className="mb-10">
+        <section className="mb-12">
           <SectionTitle
             icon={<Brain size={14} />}
             count={spaceList.length > 0 ? spaceList.length : undefined}
@@ -272,7 +278,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
           </SectionTitle>
           {spaceList.length > 0 ? (
             <>
-              <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+              <div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5">
                 {(showAllSpaces ? spaceList : spaceList.slice(0, SPACES_PER_ROW)).map(s => {
                   const emoji = extractEmoji(s.name);
                   const label = stripEmoji(s.name);
@@ -281,10 +287,10 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
                     <Link
                       key={s.name}
                       href={`/view/${encodePath(s.path)}`}
-                      className={`flex items-start gap-3 px-3.5 py-3 rounded-xl border transition-all duration-150 ${
+                      className={`flex items-start gap-3 px-4 py-3.5 rounded-xl border transition-all duration-200 ${
                         isEmpty
                           ? 'border-dashed border-border/50 opacity-50 hover:opacity-70'
-                          : 'border-border hover:border-[var(--amber)]/30 hover:shadow-sm'
+                          : 'border-border/60 hover:border-[var(--amber)]/30 hover:shadow-md hover:-translate-y-0.5 bg-card/40'
                       }`}
                     >
                       {emoji ? (
@@ -326,16 +332,19 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
       {/* ══════════ Pinned Files ══════════ */}
       <PinnedFilesSection formatTime={formatTime} />
 
+      {/* ── Visual divider ── */}
+      <div className="border-t border-border/30 mb-10" />
+
       {/* ══════════ Recently Edited ══════════ */}
       {recent.length > 0 && (
-        <section className="mb-10">
+        <section className="mb-12">
           <SectionTitle
             icon={<Clock size={14} />}
             count={recent.length}
             action={
               <Link
                 href="/changes"
-                className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80 font-display"
+                className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80"
               >
                 <History size={12} />
                 <span>{t.home.changeHistory}</span>
@@ -357,7 +366,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
                       className="flex items-center gap-2 px-1 py-1.5 rounded-lg group transition-colors hover:bg-muted/50"
                     >
                       <Folder size={14} className="shrink-0 text-[var(--amber)]" />
-                      <span className="text-xs font-semibold font-display text-foreground group-hover:text-[var(--amber)] transition-colors" suppressHydrationWarning>
+                      <span className="text-xs font-semibold text-foreground group-hover:text-[var(--amber)] transition-colors" suppressHydrationWarning>
                         {group.space}
                       </span>
                       <span className="text-xs text-muted-foreground/50 tabular-nums" suppressHydrationWarning>
@@ -369,7 +378,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
                         </span>
                       )}
                     </Link>
-                    <div className="flex flex-col gap-0.5 ml-2 border-l border-border/40 pl-3">
+                    <div className="flex flex-col gap-0.5 ml-2 border-l-2 border-border/20 pl-3">
                       {visibleFiles.map(({ path: filePath, mtime }) => (
                         <FileRow
                           key={filePath}
@@ -388,11 +397,11 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
                 <div>
                   <div className="flex items-center gap-2 px-1 py-1.5">
                     <FileText size={14} className="shrink-0 text-muted-foreground/50" />
-                    <span className="text-xs font-semibold font-display text-muted-foreground/60">
+                    <span className="text-xs font-semibold text-muted-foreground/60">
                       {t.home.other}
                     </span>
                   </div>
-                  <div className="flex flex-col gap-0.5 ml-2 border-l border-border/40 pl-3">
+                  <div className="flex flex-col gap-0.5 ml-2 border-l-2 border-border/20 pl-3">
                     {rootFiles.map(({ path: filePath, mtime }) => (
                       <FileRow key={filePath} filePath={filePath} mtime={mtime} formatTime={formatTime} />
                     ))}
@@ -412,7 +421,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
             </div>
           ) : (
             <div className="relative pl-4">
-              <div className="absolute left-0 top-1 bottom-1 w-px bg-border/40" />
+              <div className="absolute left-0 top-1 bottom-1 w-0.5 rounded-full bg-gradient-to-b from-[var(--amber)]/20 via-border/30 to-transparent" />
               <div className="flex flex-col gap-0.5">
                 {(showAll ? recent : recent.slice(0, 5)).map(({ path: filePath, mtime }, idx) => {
                   const isCSV = filePath.endsWith('.csv');
@@ -422,10 +431,10 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
                     <div key={filePath} className="relative group">
                       <div
                         aria-hidden="true"
-                        className={`absolute -left-4 top-1/2 -translate-y-1/2 rounded-full transition-all duration-150 group-hover:scale-150 ${
+                        className={`absolute -left-[5px] top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 group-hover:scale-125 ${
                           idx === 0
-                            ? 'w-2 h-2 bg-[var(--amber)] ring-2 ring-[var(--amber)]/20'
-                            : 'w-1.5 h-1.5 bg-muted-foreground/20'
+                            ? 'w-2.5 h-2.5 bg-[var(--amber)] ring-[3px] ring-[var(--amber)]/15 shadow-sm shadow-[var(--amber)]/20'
+                            : 'w-1.5 h-1.5 bg-muted-foreground/25 group-hover:bg-[var(--amber)]/50'
                         }`}
                       />
                       <Link
@@ -440,7 +449,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
                           <span className="text-sm truncate block text-foreground" suppressHydrationWarning>{name}</span>
                           {dir && <span className="text-xs truncate block text-muted-foreground/40" suppressHydrationWarning>{dir}</span>}
                         </div>
-                        <span className="text-xs shrink-0 tabular-nums font-display text-muted-foreground/40" suppressHydrationWarning>
+                        <span className="text-xs shrink-0 tabular-nums text-muted-foreground/40" suppressHydrationWarning>
                           {formatTime(mtime)}
                         </span>
                       </Link>
@@ -463,8 +472,8 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
       )}
 
       {/* Footer */}
-      <div className="py-6 border-t border-border/20 flex items-center gap-1.5 text-xs font-display text-muted-foreground/30">
-        <Sparkles size={10} className="text-[var(--amber)]/40" />
+      <div className="mt-6 py-8 border-t border-border/20 flex items-center justify-center gap-2 text-[11px] text-muted-foreground/25">
+        <Logo id="home-footer" className="w-5 h-2.5 opacity-30" />
         <span>{t.app.footer}</span>
       </div>
     </div>
@@ -482,12 +491,14 @@ function PinnedFilesSection({ formatTime }: { formatTime: (t: number) => string
         <SectionTitle icon={<Star size={14} />}>
           {t.pinnedFiles.title}
         </SectionTitle>
-        <div className="py-6 px-4 rounded-lg border border-dashed border-border/50 text-center">
-          <Star size={20} className="mx-auto mb-2 text-muted-foreground/40" />
-          <p className="text-sm font-medium text-muted-foreground mb-1">
+        <div className="py-8 px-6 rounded-xl border border-border/40 bg-card/30 text-center">
+          <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-[var(--amber-subtle)] mb-3">
+            <Star size={18} className="text-[var(--amber)]/60" />
+          </div>
+          <p className="text-sm font-medium text-muted-foreground/70 mb-1">
             {t.pinnedFiles.empty ?? 'No pinned files'}
           </p>
-          <p className="text-xs text-muted-foreground/60">
+          <p className="text-xs text-muted-foreground/40 max-w-xs mx-auto leading-relaxed">
             {t.pinnedFiles.emptyHint ?? 'Click the star icon on any file to pin it here'}
           </p>
         </div>
@@ -541,7 +552,7 @@ function CreateSpaceButton({ t }: { t: ReturnType<typeof useLocale>['t'] }) {
   return (
     <button
       onClick={() => window.dispatchEvent(new Event('mindos:create-space'))}
-      className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer font-display"
+      className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer"
     >
       <Plus size={12} />
       <span>{t.home.newSpace}</span>

package/app/components/ImportModal.tsx

@@ -114,8 +114,7 @@ export default function ImportModal({ open, onClose, defaultSpace, initialFiles,
       const prompt = attachments.length === 1
         ? (t.fileImport.digestPromptSingle as (name: string, space?: string) => string)(attachments[0].name, space)
         : (t.fileImport.digestPromptMulti as (n: number, space?: string) => string)(attachments.length, space);
-      // Start AI organize and immediately close modal — toast takes over
-      aiOrganize.start(attachments, prompt);
+      aiOrganize.start(attachments, prompt, 'import-modal');
       onClose();
       im.reset();
     }

package/app/components/KeyboardShortcuts.tsx

@@ -54,7 +54,7 @@ export default function KeyboardShortcuts() {
       >
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-3.5 border-b border-border">
-          <span className="text-sm font-medium font-display text-foreground">{s.title}</span>
+          <span className="text-sm font-medium text-foreground">{s.title}</span>
           <button
             onClick={() => setOpen(false)}
             className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"

package/app/components/MarkdownEditor.tsx

@@ -35,7 +35,7 @@ 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 font-display ${
+            className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded text-xs font-medium transition-colors ${
               viewMode === m.id
                 ? 'bg-card text-foreground shadow-sm'
                 : 'text-muted-foreground hover:text-foreground'

package/app/components/OnboardingView.tsx

@@ -64,7 +64,7 @@ export default function OnboardingView() {
       <div className="text-center mb-10">
         <div className="inline-flex items-center gap-2 mb-4">
           <Sparkles size={18} className="text-[var(--amber)]" />
-          <h1 className="text-2xl font-semibold tracking-tight font-display text-foreground">
+          <h1 className="text-2xl font-brand text-foreground">
             MindOS
           </h1>
         </div>
@@ -131,7 +131,7 @@ export default function OnboardingView() {
       </div>
 
       {/* Import hint */}
-      <p className="text-center text-xs leading-relaxed max-w-sm mx-auto font-display text-muted-foreground opacity-60">
+      <p className="text-center text-xs leading-relaxed max-w-sm mx-auto text-muted-foreground/60">
         {ob.importHint}
       </p>
       <p className="text-center mt-2">

package/app/components/OrganizeToast.tsx

@@ -119,10 +119,12 @@ export default function OrganizeToast({
           undone: c.undone,
         })),
         status: 'completed',
+        source: aiOrganize.source,
+        durationMs: aiOrganize.durationMs,
       });
       onHistoryUpdate?.();
     }
-  }, [isDone, aiOrganize.changes, aiOrganize.sourceFileNames, onHistoryUpdate]);
+  }, [isDone, aiOrganize.changes, aiOrganize.sourceFileNames, aiOrganize.source, aiOrganize.durationMs, onHistoryUpdate]);
 
   // Auto-dismiss timer (3 min after done, reset on user interaction)
   const resetTimer = useCallback(() => {

package/app/components/Panel.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
-import { ChevronsDownUp, ChevronsUpDown, Plus, Import, FileText, Layers, MoreHorizontal, Eye, EyeOff, Trash2 } from 'lucide-react';
+import { ChevronsDownUp, ChevronsUpDown, Plus, Import, FileText, Layers, MoreHorizontal, Eye, EyeOff, Trash2, Inbox } from 'lucide-react';
 import type { PanelId } from './ActivityBar';
 import type { FileNode } from '@/lib/types';
 import FileTree, { setShowHiddenFiles, useShowHiddenFiles } from './FileTree';
@@ -128,14 +128,25 @@ export default function Panel({
     };
   }, [morePopover]);
 
-  // Fetch trash count on mount and when files change
+  const [inboxCount, setInboxCount] = useState(0);
+
   useEffect(() => {
-    const fetchCount = () => {
+    const fetchTrash = () => {
       listTrashAction().then(items => setTrashCount(items.length)).catch(() => {});
     };
-    fetchCount();
-    window.addEventListener('mindos:files-changed', fetchCount);
-    return () => window.removeEventListener('mindos:files-changed', fetchCount);
+    const fetchInbox = () => {
+      fetch('/api/inbox').then(r => r.json()).then(d => {
+        if (Array.isArray(d.files)) setInboxCount(d.files.length);
+      }).catch(() => {});
+    };
+    fetchTrash();
+    fetchInbox();
+    window.addEventListener('mindos:files-changed', fetchTrash);
+    window.addEventListener('mindos:inbox-updated', fetchInbox);
+    return () => {
+      window.removeEventListener('mindos:files-changed', fetchTrash);
+      window.removeEventListener('mindos:inbox-updated', fetchInbox);
+    };
   }, []);
 
   // Double-click hint: show only until user has used it once.
@@ -280,6 +291,16 @@ export default function Panel({
                     {showHidden && <span className="text-[var(--amber)] text-xs">✓</span>}
                   </button>
                   <div className="my-1 border-t border-border/50" />
+                  <button
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-foreground hover:bg-muted transition-colors text-left"
+                    onClick={() => { setMorePopover(false); router.push('/view/Inbox/'); }}
+                  >
+                    <Inbox size={14} className="shrink-0 text-[var(--amber)]" />
+                    <span className="flex-1">{t.sidebar.capture}</span>
+                    {inboxCount > 0 && (
+                      <span className="text-xs font-medium text-[var(--amber)] tabular-nums">{inboxCount}</span>
+                    )}
+                  </button>
                   <button
                     className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-foreground hover:bg-muted transition-colors text-left"
                     onClick={() => { setMorePopover(false); router.push('/trash'); }}

package/app/components/Sidebar.tsx

@@ -94,7 +94,7 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
       <div className="flex items-center justify-between px-4 py-4 border-b border-border shrink-0">
         <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
           <Logo id="desktop" />
-          <span className="font-semibold text-foreground text-sm tracking-wide font-display">MindOS</span>
+          <span className="text-foreground text-sm font-brand">MindOS</span>
         </Link>
         {/* Mobile close */}
         <button onClick={() => setMobileOpen(false)} className="md:hidden p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors">

package/app/components/SidebarLayout.tsx

@@ -184,12 +184,14 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
   }, [handleOpenImport]);
 
   // ── Inbox: batch AI organize from InboxSection ──
+  const organizedFileNamesRef = useRef<string[]>([]);
   useEffect(() => {
     const handler = (e: Event) => {
       const files = (e as CustomEvent).detail?.files as Array<{ name: string; path: string }> | undefined;
       if (!files || files.length === 0 || aiOrganize.phase === 'organizing') return;
 
       const prompt = t.inbox.organizePrompt(files.map(f => f.name));
+      organizedFileNamesRef.current = files.map(f => f.name);
 
       (async () => {
         const attachments: Array<{ name: string; content: string }> = [];
@@ -203,7 +205,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
           } catch { /* skip unreadable files */ }
         }
         if (attachments.length > 0) {
-          aiOrganize.start(attachments, prompt);
+          aiOrganize.start(attachments, prompt, 'inbox-organize');
         } else {
           toast.error(t.inbox.organizeFailed, 4000);
           window.dispatchEvent(new Event('mindos:organize-done'));
@@ -214,12 +216,28 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     return () => window.removeEventListener('mindos:inbox-organize', handler);
   }, [aiOrganize, t]);
 
-  // Notify InboxSection when organize finishes
+  // Notify InboxSection when organize finishes + clean up source inbox files
   useEffect(() => {
-    if (aiOrganize.phase === 'done' || aiOrganize.phase === 'error') {
+    if (aiOrganize.phase === 'done') {
+      const hasSuccessfulChanges = aiOrganize.changes.some(c => c.ok);
+      const names = organizedFileNamesRef.current;
+      if (hasSuccessfulChanges && names.length > 0) {
+        fetch('/api/inbox', {
+          method: 'DELETE',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ names }),
+        })
+          .then(() => {
+            window.dispatchEvent(new Event('mindos:inbox-updated'));
+          })
+          .catch(() => { /* best-effort cleanup */ });
+        organizedFileNamesRef.current = [];
+      }
+      window.dispatchEvent(new Event('mindos:organize-done'));
+    } else if (aiOrganize.phase === 'error') {
       window.dispatchEvent(new Event('mindos:organize-done'));
     }
-  }, [aiOrganize.phase]);
+  }, [aiOrganize.phase, aiOrganize.changes]);
 
   // Listen for cross-component "open panel" events (e.g. GuideCard → Agents)
   useEffect(() => {
@@ -381,7 +399,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
       {/* Skip link */}
       <a
         href="#main-content"
-        className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[60] focus:px-4 focus:py-2 focus:rounded-lg focus:text-sm focus:font-medium focus:font-display bg-[var(--amber)] text-[var(--amber-foreground)]"
+        className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[60] focus:px-4 focus:py-2 focus:rounded-lg focus:text-sm focus:font-medium bg-[var(--amber)] text-[var(--amber-foreground)]"
       >
         Skip to main content
       </a>
@@ -406,6 +424,11 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
           lp.setActivePanel(wasActive ? null : 'discover');
           if (!wasActive) router.push('/explore');
         }}
+        onSpacesClick={() => {
+          const wasActive = lp.activePanel === 'files';
+          lp.setActivePanel(wasActive ? null : 'files');
+          if (!wasActive) router.push('/wiki');
+        }}
         syncStatus={syncStatus}
         expanded={lp.railExpanded}
         onExpandedChange={handleExpandedChange}
@@ -509,7 +532,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         </button>
         <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
           <Logo id="mobile" />
-          <span className="font-semibold text-foreground text-sm tracking-wide">MindOS</span>
+          <span className="text-foreground text-sm font-brand">MindOS</span>
         </Link>
         <div className="flex items-center gap-0.5">
           <button onClick={openSyncSettings} className="p-3 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent flex items-center justify-center" aria-label="Sync status">
@@ -529,7 +552,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         <div className="flex items-center justify-between px-4 py-4 border-b border-border shrink-0">
           <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
             <Logo id="drawer" />
-            <span className="font-semibold text-foreground text-sm tracking-wide font-display">MindOS</span>
+            <span className="text-foreground text-sm font-brand">MindOS</span>
           </Link>
           <button onClick={() => setMobileOpen(false)} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors">
             <X size={16} />

package/app/components/SystemPulse.tsx

@@ -78,14 +78,14 @@ export default function SystemPulse() {
     return (
       <section className="mb-10">
         {/* Use same title style as other sections */}
-        <div className="flex items-center gap-2 mb-4">
-          <span className="text-[var(--amber)]"><Bot size={13} /></span>
-          <h2 className="text-sm font-semibold font-display text-foreground">{pulse.title}</h2>
+        <div className="flex items-center gap-2.5 mb-5">
+          <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)]"><Bot size={13} /></div>
+          <h2 className="text-[13px] font-semibold text-foreground tracking-wide">{pulse.title}</h2>
         </div>
-        <div className="rounded-xl border border-dashed border-border/60 p-4">
+        <div className="rounded-xl border border-border/40 bg-card/30 p-5">
           <div className="flex items-center gap-4">
-            <div className="w-9 h-9 rounded-lg bg-[var(--amber)]/8 flex items-center justify-center shrink-0">
-              <Bot size={16} className="text-[var(--amber)]" />
+            <div className="w-10 h-10 rounded-full bg-[var(--amber-subtle)] flex items-center justify-center shrink-0">
+              <Bot size={18} className="text-[var(--amber)]" />
             </div>
             <div className="flex-1 min-w-0">
               <p className="text-sm font-medium text-foreground">{pulse.connectTitle}</p>
@@ -114,10 +114,10 @@ export default function SystemPulse() {
           onClick={toggleCollapsed}
           className="w-full flex items-center gap-2 group cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
         >
-          <span className="text-[var(--amber)]"><Bot size={13} /></span>
-          <h2 className="text-sm font-semibold font-display text-foreground">{pulse.title}</h2>
+          <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)]"><Bot size={13} /></div>
+          <h2 className="text-[13px] font-semibold text-foreground tracking-wide">{pulse.title}</h2>
           {totalConnected > 0 && (
-            <span className="text-xs tabular-nums text-muted-foreground font-display">{totalConnected}</span>
+            <span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[10px] font-semibold rounded-full bg-muted text-muted-foreground tabular-nums">{totalConnected}</span>
           )}
           {/* Inline status */}
           <div className="flex items-center gap-2 ml-1">
@@ -144,11 +144,11 @@ export default function SystemPulse() {
   return (
     <section className="mb-10">
       {/* Section title — same pattern as Spaces / Recently Edited */}
-      <div className="flex items-center gap-2 mb-4">
-        <span className="text-[var(--amber)]"><Bot size={13} /></span>
-        <h2 className="text-sm font-semibold font-display text-foreground">{pulse.title}</h2>
-        {totalConnected > 0 && (
-          <span className="text-xs tabular-nums text-muted-foreground font-display">{totalConnected}</span>
+      <div className="flex items-center gap-2.5 mb-5">
+        <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)]"><Bot size={13} /></div>
+          <h2 className="text-[13px] font-semibold text-foreground tracking-wide">{pulse.title}</h2>
+          {totalConnected > 0 && (
+            <span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[10px] font-semibold rounded-full bg-muted text-muted-foreground tabular-nums">{totalConnected}</span>
         )}
         {mcpRunning && (
           <span className="inline-flex items-center gap-1 text-xs text-muted-foreground/50 ml-1">
@@ -159,7 +159,7 @@ export default function SystemPulse() {
         <div className="flex items-center gap-2 ml-auto">
           <Link
             href="/agents"
-            className="text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-opacity font-display"
+            className="text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-opacity"
           >
             {pulse.manage}
           </Link>
@@ -181,7 +181,7 @@ export default function SystemPulse() {
             <Link
               key={agent.key}
               href={`/agents/${encodeURIComponent(agent.key)}`}
-              className="flex items-center gap-3 px-3.5 py-3 rounded-xl border border-border hover:border-[var(--amber)]/30 hover:shadow-sm transition-all duration-150 hover:bg-muted/30 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="flex items-center gap-3 px-3.5 py-3 rounded-xl border border-border hover:border-[var(--amber)]/30 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 hover:bg-muted/30 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             >
               {/* Avatar */}
               <div className="relative w-8 h-8 rounded-lg bg-[var(--amber)]/8 text-[var(--amber-text)] ring-1 ring-[var(--amber)]/15 flex items-center justify-center text-xs font-semibold font-display shrink-0">

package/app/components/TrashPageClient.tsx

@@ -96,7 +96,7 @@ export default function TrashPageClient({ initialItems }: { initialItems: TrashM
         <div className="content-width xl:mr-[220px] rounded-xl border border-border bg-card px-4 py-3 md:px-5 md:py-4">
           <div className="flex flex-wrap items-start justify-between gap-3">
             <div className="min-w-0">
-              <div className="flex items-center gap-2 text-sm font-medium text-foreground font-display">
+              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
                 <Trash2 size={15} />
                 {t.trash.title}
               </div>
@@ -126,10 +126,12 @@ export default function TrashPageClient({ initialItems }: { initialItems: TrashM
       <div className="px-4 md:px-6 py-4 md:py-6">
         <div className="content-width xl:mr-[220px]">
           {items.length === 0 ? (
-            <div className="rounded-xl border border-dashed border-border bg-card p-12 text-center">
-              <Trash2 size={32} className="mx-auto text-muted-foreground/30 mb-3" />
-              <p className="text-sm text-muted-foreground font-display">{t.trash.empty}</p>
-              <p className="text-xs text-muted-foreground/60 mt-1">{t.trash.emptySubtext}</p>
+            <div className="rounded-xl border border-border/40 bg-card/30 p-12 text-center">
+              <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-muted/60 mb-4">
+                <Trash2 size={22} className="text-muted-foreground/40" />
+              </div>
+              <p className="text-sm font-medium text-muted-foreground/70">{t.trash.empty}</p>
+              <p className="text-xs text-muted-foreground/40 mt-1 max-w-xs mx-auto leading-relaxed">{t.trash.emptySubtext}</p>
             </div>
           ) : (
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
@@ -227,7 +229,7 @@ export default function TrashPageClient({ initialItems }: { initialItems: TrashM
           <div className="bg-card border border-border rounded-xl shadow-xl max-w-sm w-full mx-4 p-5">
             <div className="flex items-center gap-2 mb-3">
               <AlertTriangle size={16} className="text-[var(--amber)]" />
-              <h3 className="text-sm font-semibold font-display">{t.trash.restoreConflict}</h3>
+              <h3 className="text-sm font-semibold">{t.trash.restoreConflict}</h3>
             </div>
             <p className="text-xs text-muted-foreground mb-4">
               &quot;{conflictItem.fileName}&quot; — {conflictItem.originalPath}

package/app/components/UpdateOverlay.tsx

@@ -92,7 +92,7 @@ export default function UpdateOverlay() {
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
-        fontFamily: 'system-ui, -apple-system, sans-serif',
+        fontFamily: "'IBM Plex Sans', system-ui, sans-serif",
       }}
     >
       {done ? (