@geminilight/mindos 0.6.53 → 0.6.54

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 ? (

package/app/components/WikiHomeContent.tsx

@@ -0,0 +1,273 @@
+'use client';
+
+import { useState, useEffect, useMemo } from 'react';
+import Link from 'next/link';
+import { Brain, ChevronDown, FolderOpen, Plus, Sparkles, Search, FilePlus, ArrowRight } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import { encodePath, relativeTime, extractEmoji, stripEmoji } from '@/lib/utils';
+import { InboxSection } from '@/components/home/InboxSection';
+import type { SpaceInfo } from '@/app/page';
+
+interface RecentFile {
+  path: string;
+  mtime: number;
+}
+
+interface WikiHomeContentProps {
+  spaces: SpaceInfo[];
+  recent: RecentFile[];
+}
+
+function triggerSearch() {
+  window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, bubbles: true }));
+}
+
+function triggerAsk() {
+  window.dispatchEvent(new KeyboardEvent('keydown', { key: '/', metaKey: true, bubbles: true }));
+}
+
+/**
+ * Calculate the max mtime for a space from recent files
+ */
+function getSpaceLatestMtime(spaceName: string, recentFiles: RecentFile[]): number {
+  let maxMtime = 0;
+  for (const file of recentFiles) {
+    if (file.path.startsWith(`${spaceName}/`)) {
+      maxMtime = Math.max(maxMtime, file.mtime);
+    }
+  }
+  return maxMtime;
+}
+
+const SPACES_COLLAPSED = 9;
+
+export default function WikiHomeContent({ spaces, recent }: WikiHomeContentProps) {
+  const { t } = useLocale();
+  const [sortBy, setSortBy] = useState<'recent' | 'name' | 'fileCount'>('recent');
+  const [showAllSpaces, setShowAllSpaces] = useState(false);
+  const [suggestionIdx, setSuggestionIdx] = useState(0);
+
+  const suggestions = t.ask?.suggestions ?? [
+    'Summarize this document',
+    'List all action items',
+    'What are the key points?',
+    'Find related notes',
+  ];
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSuggestionIdx(i => (i + 1) % suggestions.length);
+    }, 4000);
+    return () => clearInterval(interval);
+  }, [suggestions.length]);
+
+  // Sort spaces
+  const sortedSpaces = useMemo(() => {
+    const sorted = [...spaces];
+    if (sortBy === 'recent') {
+      sorted.sort((a, b) => {
+        const aMtime = getSpaceLatestMtime(a.name, recent);
+        const bMtime = getSpaceLatestMtime(b.name, recent);
+        return bMtime - aMtime;
+      });
+    } else if (sortBy === 'name') {
+      sorted.sort((a, b) => a.name.localeCompare(b.name));
+    } else if (sortBy === 'fileCount') {
+      sorted.sort((a, b) => b.fileCount - a.fileCount);
+    }
+    return sorted;
+  }, [spaces, recent, sortBy]);
+
+  const visibleSpaces = showAllSpaces ? sortedSpaces : sortedSpaces.slice(0, SPACES_COLLAPSED);
+  const formatTime = (mtime: number) => relativeTime(mtime, t.home.relativeTime);
+  const lastFile = recent[0];
+
+  return (
+    <div className="content-width px-4 md:px-6 py-10 md:py-14">
+
+      {/* ══════════ Hero ══════════ */}
+      <div className="mb-10">
+        <div className="flex items-center gap-3 mb-6">
+          <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 text-foreground">
+            {t.sidebar.files}
+          </h1>
+        </div>
+
+        {/* Command bar */}
+        <div className="w-full max-w-xl flex flex-col sm:flex-row items-stretch sm:items-center gap-2 pl-4">
+          <button
+            onClick={triggerAsk}
+            title="⌘/"
+            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">
+              <span
+                key={suggestionIdx}
+                className="text-sm text-left text-muted-foreground animate-in fade-in duration-300"
+              >
+                {suggestions[suggestionIdx]}
+              </span>
+            </div>
+            <kbd className="hidden sm:inline-flex items-center gap-0.5 px-2 py-0.5 rounded text-xs font-mono font-medium bg-[var(--amber-dim)] text-[var(--amber-text)]">
+              ⌘/
+            </kbd>
+          </button>
+          <button
+            onClick={triggerSearch}
+            title="⌘K"
+            className="flex items-center gap-2 px-3.5 py-3 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">
+              ⌘K
+            </kbd>
+          </button>
+        </div>
+
+        {/* Quick actions */}
+        <div className="flex items-center gap-3 mt-4 pl-4">
+          <Link
+            href="/view/Untitled.md"
+            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>
+          </Link>
+          {lastFile && (
+            <Link
+              href={`/view/${encodePath(lastFile.path)}`}
+              className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+            >
+              <ArrowRight size={14} className="text-[var(--amber)]/60" />
+              <span>{t.home.continueEditing}</span>
+              <span className="text-xs opacity-40 truncate max-w-32" suppressHydrationWarning>
+                {lastFile.path.split('/').pop()}
+              </span>
+            </Link>
+          )}
+        </div>
+      </div>
+
+      {/* ══════════ Spaces Grid ══════════ */}
+      <section className="mb-10">
+        <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)]">
+            <Brain size={14} />
+          </div>
+          <h2 className="text-[13px] font-semibold text-foreground tracking-wide">
+            {t.home.spaces}
+          </h2>
+          {spaces.length > 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">
+              {spaces.length}
+            </span>
+          )}
+          <div className="ml-auto flex items-center gap-3">
+            {spaces.length > 0 && (
+              <select
+                value={sortBy}
+                onChange={(e) => setSortBy(e.target.value as typeof sortBy)}
+                className="text-xs font-medium text-muted-foreground hover:text-foreground cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring rounded px-2 py-1 transition-colors bg-transparent"
+              >
+                <option value="recent">{t.home.sortRecent ?? 'Recent'}</option>
+                <option value="name">{t.home.sortName ?? 'A-Z'}</option>
+                <option value="fileCount">{t.home.sortCount ?? 'File Count'}</option>
+              </select>
+            )}
+            <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"
+            >
+              <Plus size={12} />
+              <span>{t.home.newSpace}</span>
+            </button>
+          </div>
+        </div>
+
+        {spaces.length === 0 ? (
+          <div className="rounded-xl border border-border/40 bg-card/30 px-6 py-12 text-center">
+            <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-[var(--amber-subtle)] mb-4">
+              <Brain size={22} className="text-[var(--amber)]/60" />
+            </div>
+            <p className="text-sm font-medium text-muted-foreground/70 mb-1">
+              {t.home.noSpacesYet ?? 'No spaces yet'}
+            </p>
+            <p className="text-xs text-muted-foreground/60 mb-4">
+              Create your first space to organize your knowledge
+            </p>
+            <button
+              onClick={() => window.dispatchEvent(new Event('mindos:create-space'))}
+              className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors bg-[var(--amber)] text-[var(--amber-foreground)] hover:opacity-80"
+            >
+              <Plus size={14} />
+              Create Space
+            </button>
+          </div>
+        ) : (
+          <>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
+              {visibleSpaces.map((space) => {
+                const emoji = extractEmoji(space.name);
+                const label = stripEmoji(space.name);
+                const latestMtime = getSpaceLatestMtime(space.name, recent);
+                const isEmpty = space.fileCount === 0;
+
+                return (
+                  <Link
+                    key={space.name}
+                    href={`/view/${encodePath(space.path)}`}
+                    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/60 hover:border-[var(--amber)]/30 hover:shadow-md hover:-translate-y-0.5 bg-card/40'
+                    }`}
+                  >
+                    {emoji ? (
+                      <span className="text-lg leading-none shrink-0 mt-0.5" suppressHydrationWarning>{emoji}</span>
+                    ) : (
+                      <FolderOpen size={16} className="shrink-0 text-[var(--amber)] mt-0.5" />
+                    )}
+                    <div className="min-w-0 flex-1">
+                      <span className="text-sm font-medium truncate block text-foreground">{label}</span>
+                      {space.description && (
+                        <span className="text-xs text-muted-foreground line-clamp-1 mt-0.5" suppressHydrationWarning>
+                          {space.description}
+                        </span>
+                      )}
+                      <span className="text-xs text-muted-foreground/50 mt-0.5 block tabular-nums">
+                        {t.home.nFiles(space.fileCount)}
+                        {latestMtime > 0 && ` · ${formatTime(latestMtime)}`}
+                      </span>
+                    </div>
+                  </Link>
+                );
+              })}
+            </div>
+
+            {sortedSpaces.length > SPACES_COLLAPSED && (
+              <button
+                onClick={() => setShowAllSpaces(!showAllSpaces)}
+                aria-expanded={showAllSpaces}
+                className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer font-display mt-3"
+              >
+                <ChevronDown size={12} className={`transition-transform duration-200 ${showAllSpaces ? 'rotate-180' : ''}`} />
+                <span>{showAllSpaces ? t.home.showLess : t.home.showMore}</span>
+              </button>
+            )}
+          </>
+        )}
+      </section>
+
+      {/* ══════════ Inbox ══════════ */}
+      <InboxSection />
+
+      {/* 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" />
+        <span>{t.app.footer}</span>
+      </div>
+    </div>
+  );
+}

package/app/components/agents/AgentDetailContent.tsx

@@ -251,7 +251,7 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
         <div className="flex items-center gap-3.5 px-5 py-4">
           <AgentAvatar name={agent.name} status={status} size="md" />
           <div className="min-w-0 flex-1">
-            <h1 className="text-lg font-semibold tracking-tight font-display text-foreground truncate">{agent.name}</h1>
+            <h1 className="text-lg font-semibold tracking-tight text-foreground truncate">{agent.name}</h1>
             <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 mt-0.5 text-2xs text-muted-foreground/60">
               <span className={`font-medium px-1.5 py-px rounded-full ${
                 status === 'connected' ? 'bg-muted text-muted-foreground'
@@ -902,7 +902,7 @@ function KnowledgeInteractionSection() {
           <BookOpen size={12} className="text-muted-foreground/50" />
           {d?.knowledgeInteraction ?? 'Knowledge Interaction'}
         </h2>
-        <div className="rounded-lg border border-dashed border-border/50 bg-muted/10 px-4 py-6 text-center">
+        <div className="rounded-lg border border-border/40 bg-card/30 px-4 py-6 text-center">
           <BookOpen size={20} className="text-muted-foreground/30 mx-auto mb-2" />
           <p className="text-2xs text-muted-foreground/50">{d?.knowledgeNoData ?? 'No interactions yet. Agents will show activity here once they start working with your knowledge base.'}</p>
         </div>
@@ -920,7 +920,7 @@ function KnowledgeInteractionSection() {
         </h2>
         <Link
           href={`/view/${encodePath('.mindos/agent-audit-log.json')}`}
-          className="text-2xs font-medium text-[var(--amber)] hover:opacity-80 transition-opacity font-display"
+          className="text-2xs font-medium text-[var(--amber)] hover:opacity-80 transition-opacity"
         >
           {d?.viewFullLog ?? 'View log'} →
         </Link>
@@ -961,7 +961,7 @@ function KnowledgeInteractionSection() {
       {/* Timeline */}
       <div className="border-t border-border/40">
         <div className="px-4 py-2 flex items-center justify-between">
-          <p className="text-2xs text-muted-foreground/40 uppercase tracking-wider font-display">{d?.recentOps ?? 'Recent operations'}</p>
+          <p className="text-2xs text-muted-foreground/40 uppercase tracking-wider">{d?.recentOps ?? 'Recent operations'}</p>
         </div>
         {visible.map((ev, i) => {
           const kind = classifyTool(ev.tool);
@@ -1039,7 +1039,7 @@ function ActivitySection({ agent }: { agent: AgentInfo }) {
           <StatCard label={d.activityLast7d} value={agent.runtimeUsageSignal ? 'Active' : '—'} />
         </div>
       ) : (
-        <div className="rounded-lg border border-dashed border-border/50 bg-muted/10 px-4 py-6 text-center">
+        <div className="rounded-lg border border-border/40 bg-card/30 px-4 py-6 text-center">
           <Activity size={20} className="text-muted-foreground/30 mx-auto mb-2" />
           <p className="text-2xs text-muted-foreground/50">{d.activityNoData}</p>
         </div>

package/app/components/agents/AgentsContentPage.tsx

@@ -62,16 +62,18 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
   }, [a, tab]);
 
   const buckets = useMemo(() => bucketAgents(mcp.agents), [mcp.agents]);
+  const mcpEnabled = mcp.status?.connectionMode?.mcp ?? false;
   const riskQueue = useMemo(
     () =>
       buildRiskQueue({
         mcpRunning: !!mcp.status?.running,
+        mcpEnabled,
         detectedCount: buckets.detected.length,
         notFoundCount: buckets.notFound.length,
         allSkillsDisabled: mcp.skills.length > 0 && mcp.skills.every((s) => !s.enabled),
         copy: a.overview,
       }),
-    [mcp.skills, mcp.status?.running, buckets.detected.length, buckets.notFound.length, a.overview],
+    [mcp.skills, mcp.status?.running, mcpEnabled, buckets.detected.length, buckets.notFound.length, a.overview],
   );
   const enabledSkillCount = useMemo(
     () => mcp.skills.filter((skill) => skill.enabled).length,
@@ -89,7 +91,7 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
   return (
     <div className="content-width px-4 md:px-6 py-8 md:py-10">
       <header className="mb-6">
-        <h1 className="text-2xl font-semibold tracking-tight font-display text-foreground">{pageHeader.title}</h1>
+        <h1 className="text-2xl font-semibold tracking-tight text-foreground">{pageHeader.title}</h1>
         <p className="mt-1 text-sm text-muted-foreground">{pageHeader.subtitle}</p>
       </header>
 
@@ -104,6 +106,7 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
           mcpRunning={!!mcp.status?.running}
           mcpPort={mcp.status?.port ?? null}
           mcpToolCount={mcp.status?.toolCount ?? 0}
+          mcpEnabled={mcpEnabled}
           enabledSkillCount={enabledSkillCount}
           allAgents={mcp.agents}
           pulseCopy={a.workspacePulse}
@@ -111,10 +114,18 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
         />
       )}
 
-      {tab === 'mcp' && (
+      {tab === 'mcp' && mcpEnabled && (
         <AgentsMcpSection copy={{ ...a.mcp, status: a.status }} mcp={mcp} buckets={buckets} copyState={null} onCopySnippet={copySnippet} />
       )}
 
+      {/* MCP tab accessed but mode disabled — show hint */}
+      {tab === 'mcp' && !mcpEnabled && !mcp.loading && (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <p className="text-sm text-muted-foreground">{a.mcp?.mcpDisabledMessage ?? 'MCP mode is not enabled.'}</p>
+          <p className="text-xs text-muted-foreground/60 mt-1">{a.mcp?.mcpDisabledHint ?? 'Enable it in Settings → Connections to use MCP agents.'}</p>
+        </div>
+      )}
+
       {tab === 'skills' && (
         <AgentsSkillsSection copy={a.skills} mcp={mcp} buckets={buckets} />
       )}