@geminilight/mindos 0.6.39 → 0.6.41

package/_standalone/components/RightAskPanel.tsx

@@ -1,14 +1,17 @@
 'use client';
 
+import { useCallback, useRef } from 'react';
 import { AlertCircle } from 'lucide-react';
 import AskContent from '@/components/ask/AskContent';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import { useResizeDrag } from '@/hooks/useResizeDrag';
 
-const DEFAULT_WIDTH = 380;
-const MIN_WIDTH = 300;
-const MAX_WIDTH_ABS = 700;
-const MAX_WIDTH_RATIO = 0.45;
+const DEFAULT_WIDTH = 420;
+const MIN_WIDTH = 400;
+const MAX_WIDTH_ABS = 4000;
+const ENTER_SNAP_THRESHOLD = 80;
+const EXIT_SNAP_THRESHOLD = 16;
+const MIN_CONTENT_WIDTH = 360;
 
 import type { AcpAgentSelection } from '@/hooks/useAskModal';
 
@@ -35,26 +38,91 @@ export default function RightAskPanel({
   width, onWidthChange, onWidthCommit, askMode, onModeSwitch,
   maximized = false, onMaximize, sidebarOffset = 0,
 }: RightAskPanelProps) {
-  const handleMouseDown = useResizeDrag({
-    width,
+  const snapFiredRef = useRef(false);
+  const justExitedMaxRef = useRef(false);
+
+  const maxAvailable = typeof window !== 'undefined'
+    ? window.innerWidth - sidebarOffset
+    : 1200;
+
+  const handleResize = useCallback((w: number) => {
+    if (snapFiredRef.current) return;
+    const clamped = Math.min(w, maxAvailable);
+
+    // Exit maximized: user drags right even a little (16px) → exit immediately
+    if (maximized && clamped < maxAvailable - EXIT_SNAP_THRESHOLD && onMaximize) {
+      justExitedMaxRef.current = true;
+      onMaximize();
+      const maxPanelForContent = typeof window !== 'undefined'
+        ? window.innerWidth - sidebarOffset - MIN_CONTENT_WIDTH
+        : clamped;
+      onWidthChange(Math.min(clamped, maxPanelForContent));
+      return;
+    }
+
+    // Snap to fullscreen: panel near max edge OR content squeezed below minimum.
+    // Suppress content-based snap while justExitedMaxRef is true (user recently
+    // exited fullscreen and panel is still wide); only re-enable once the panel
+    // has been shrunk enough that content is comfortable (reset in handleMouseDown).
+    const contentRemaining = typeof window !== 'undefined'
+      ? window.innerWidth - sidebarOffset - clamped
+      : Infinity;
+    const shouldSnap = clamped >= maxAvailable - ENTER_SNAP_THRESHOLD
+      || (!justExitedMaxRef.current && contentRemaining < MIN_CONTENT_WIDTH);
+    if (!maximized && shouldSnap && onMaximize) {
+      snapFiredRef.current = true;
+      onMaximize();
+      return;
+    }
+    if (!maximized) {
+      onWidthChange(clamped);
+    }
+  }, [maxAvailable, sidebarOffset, onMaximize, maximized, onWidthChange]);
+
+  const handleResizeEnd = useCallback((w: number) => {
+    if (snapFiredRef.current) return;
+    onWidthCommit(w);
+  }, [onWidthCommit]);
+
+  const rawMouseDown = useResizeDrag({
+    width: maximized ? maxAvailable : width,
     minWidth: MIN_WIDTH,
-    maxWidth: MAX_WIDTH_ABS,
-    maxWidthRatio: MAX_WIDTH_RATIO,
+    maxWidth: maxAvailable,
+    maxWidthRatio: 1,
     direction: 'left',
-    onResize: onWidthChange,
-    onResizeEnd: onWidthCommit,
+    onResize: handleResize,
+    onResizeEnd: handleResizeEnd,
   });
 
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    snapFiredRef.current = false;
+    // Only re-enable content-based snap once the panel has been shrunk enough
+    // that content is comfortably above minimum. This prevents the bounce:
+    // exit fullscreen → new drag → immediately re-snap because panel still wide.
+    if (justExitedMaxRef.current) {
+      const currentContent = typeof window !== 'undefined'
+        ? window.innerWidth - sidebarOffset - width
+        : Infinity;
+      if (currentContent >= MIN_CONTENT_WIDTH) {
+        justExitedMaxRef.current = false;
+      }
+    }
+    rawMouseDown(e);
+  }, [rawMouseDown, sidebarOffset, width]);
+
+  const effectiveWidth = maximized
+    ? `calc(100vw - ${sidebarOffset}px)`
+    : `${width}px`;
+
   return (
     <aside
       className={`
         hidden md:flex fixed top-0 right-0 h-screen z-40
         flex-col bg-card border-l border-border
-        transition-all duration-200 ease-out
+        transition-[width,transform] duration-200 ease-out
         ${open ? 'translate-x-0' : 'translate-x-full pointer-events-none'}
-        ${maximized ? 'border-l-0' : ''}
       `}
-      style={maximized ? { left: `${sidebarOffset}px` } : { width: `${width}px` }}
+      style={{ width: effectiveWidth, minWidth: `${MIN_WIDTH}px` }}
       role="complementary"
       aria-label="MindOS Agent panel"
     >
@@ -87,15 +155,13 @@ export default function RightAskPanel({
         </div>
       </ErrorBoundary>
 
-      {/* Drag resize handle — LEFT edge (hidden when maximized) */}
-      {!maximized && (
-        <div
-          className="absolute top-0 -left-[3px] w-[6px] h-full cursor-col-resize z-40 group hidden md:block"
-          onMouseDown={handleMouseDown}
-        >
-          <div className="absolute left-[2px] top-0 w-[2px] h-full opacity-0 group-hover:opacity-100 bg-[var(--amber)]/60 transition-opacity" />
-        </div>
-      )}
+      {/* Drag resize handle — LEFT edge, always visible for bidirectional snap */}
+      <div
+        className="absolute top-0 -left-[3px] w-[6px] h-full cursor-col-resize z-40 group hidden md:block"
+        onMouseDown={handleMouseDown}
+      >
+        <div className="absolute left-[2px] top-0 w-[2px] h-full opacity-0 group-hover:opacity-100 bg-[var(--amber)]/60 transition-opacity" />
+      </div>
     </aside>
   );
 }

package/_standalone/components/SearchModal.tsx

@@ -6,7 +6,7 @@ import { Search, X, FileText, Table, Settings, RotateCcw, Moon, Sun, Bot, Compas
 import { SearchResult } from '@/lib/types';
 import { encodePath } from '@/lib/utils';
 import { apiFetch } from '@/lib/api';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 import { toast } from '@/lib/toast';
 
 interface SearchModalProps {

package/_standalone/components/Sidebar.tsx

@@ -11,7 +11,7 @@ import SettingsModal from './SettingsModal';
 import SyncStatusBar, { SyncDot, MobileSyncDot, useSyncStatus } from './SyncStatusBar';
 import { FileNode } from '@/lib/types';
 import type { Tab } from './settings/types';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 
 interface SidebarProps {
   fileTree: FileNode[];
@@ -102,13 +102,13 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
         </button>
         {/* Desktop action buttons — trimmed to 4 */}
         <div className="hidden md:flex items-center gap-1">
-          <button onClick={() => setSearchOpen(true)} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.sidebar.searchTitle} aria-label={t.sidebar.searchTitle}>
+          <button onClick={() => setSearchOpen(true)} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.sidebar.searchTitle} aria-hidden="true" tabIndex={-1}>
             <Search size={15} />
           </button>
-          <button onClick={() => setSettingsOpen(true)} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.sidebar.settingsTitle} aria-label={t.sidebar.settingsTitle}>
+          <button onClick={() => setSettingsOpen(true)} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.sidebar.settingsTitle} aria-hidden="true" tabIndex={-1}>
             <Settings size={15} />
           </button>
-          <button onClick={onCollapse} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.sidebar.collapseTitle} aria-label={t.sidebar.collapseTitle}>
+          <button onClick={onCollapse} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.sidebar.collapseTitle} aria-hidden="true" tabIndex={-1}>
             <PanelLeftClose size={15} />
           </button>
         </div>

package/_standalone/components/SidebarLayout.tsx

@@ -33,16 +33,18 @@ import OrganizeToast from './OrganizeToast';
 import CreateSpaceModal from './CreateSpaceModal';
 import { MobileSyncDot, useSyncStatus } from './SyncStatusBar';
 import { FileNode } from '@/lib/types';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 import dynamic from 'next/dynamic';
 
 const ImportModal = dynamic(() => import('./ImportModal'), { ssr: false });
-import { WalkthroughProvider } from './walkthrough';
-import McpProvider from '@/hooks/useMcpData';
+import McpStoreInit from '@/lib/stores/McpStoreInit';
+import WalkthroughInit from '@/lib/stores/WalkthroughInit';
 import '@/lib/renderers/index'; // client-side renderer registration source of truth
 import { useLeftPanel } from '@/hooks/useLeftPanel';
 import { useAskPanel } from '@/hooks/useAskPanel';
 import { useAiOrganize } from '@/hooks/useAiOrganize';
+import { toast } from '@/lib/toast';
+import { quickDropToInbox } from '@/lib/inbox-upload';
 import type { Tab } from './settings/types';
 
 function collectDirPaths(nodes: FileNode[], prefix = ''): string[] {
@@ -181,6 +183,44 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     return () => window.removeEventListener('mindos:open-import', handler);
   }, [handleOpenImport]);
 
+  // ── Inbox: batch AI organize from InboxSection ──
+  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));
+
+      (async () => {
+        const attachments: Array<{ name: string; content: string }> = [];
+        for (const f of files) {
+          try {
+            const res = await fetch(`/api/file?path=${encodeURIComponent(f.path)}`);
+            if (res.ok) {
+              const data = await res.json();
+              attachments.push({ name: f.name, content: data.content ?? '' });
+            }
+          } catch { /* skip unreadable files */ }
+        }
+        if (attachments.length > 0) {
+          aiOrganize.start(attachments, prompt);
+        } else {
+          toast.error(t.inbox.organizeFailed, 4000);
+          window.dispatchEvent(new Event('mindos:organize-done'));
+        }
+      })();
+    };
+    window.addEventListener('mindos:inbox-organize', handler);
+    return () => window.removeEventListener('mindos:inbox-organize', handler);
+  }, [aiOrganize, t]);
+
+  // Notify InboxSection when organize finishes
+  useEffect(() => {
+    if (aiOrganize.phase === 'done' || aiOrganize.phase === 'error') {
+      window.dispatchEvent(new Event('mindos:organize-done'));
+    }
+  }, [aiOrganize.phase]);
+
   // Listen for cross-component "open panel" events (e.g. GuideCard → Agents)
   useEffect(() => {
     const handler = (e: Event) => {
@@ -335,9 +375,9 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
   }, [lp]);
 
   return (
-    <WalkthroughProvider>
-    <McpProvider>
     <>
+      <McpStoreInit />
+      <WalkthroughInit />
       {/* Skip link */}
       <a
         href="#main-content"
@@ -524,14 +564,12 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
           e.preventDefault();
           dragCounterRef.current = 0;
           setDragOverlay(false);
-          if (e.dataTransfer.files.length > 0) {
-            setImportInitialFiles(Array.from(e.dataTransfer.files));
-            setImportDefaultSpace(undefined);
-            setImportModalOpen(true);
+          if (e.dataTransfer.files.length > 0 && !importModalOpen) {
+            quickDropToInbox(Array.from(e.dataTransfer.files), t);
           }
         }}
       >
-        <div className="min-h-screen bg-background">
+        <div className="min-h-screen bg-background" style={{ overflowX: 'clip' }}>
           <ChangesBanner />
           {children}
         </div>
@@ -539,13 +577,13 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         <SpaceInitToast />
         <CreateSpaceModal t={t} dirPaths={dirPaths} />
 
-        {/* Global drag overlay */}
+        {/* Global drag overlay — Quick Drop to Inbox */}
         {dragOverlay && !importModalOpen && (
           <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm transition-opacity duration-200">
             <div className="border-2 border-dashed border-[var(--amber)]/50 rounded-xl p-12 flex flex-col items-center gap-3">
               <FolderInput size={48} className="text-[var(--amber)]/60" />
-              <p className="text-sm text-foreground font-medium">{t.fileImport.dropOverlay}</p>
-              <p className="text-xs text-muted-foreground">{t.fileImport.dropOverlayFormats}</p>
+              <p className="text-sm text-foreground font-medium">{t.inbox.dropOverlay}</p>
+              <p className="text-xs text-muted-foreground">{t.inbox.dropOverlayFormats}</p>
             </div>
           </div>
         )}
@@ -577,13 +615,11 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
           }
           #main-content {
             padding-left: ${lp.panelOpen && lp.panelMaximized ? '100vw' : `${lp.panelOpen ? lp.railWidth + lp.effectivePanelWidth : lp.railWidth}px`} !important;
-            padding-right: calc(var(--right-panel-width) + var(--right-agent-detail-width)) !important;
+            padding-right: calc(var(--right-panel-width) + var(--right-agent-detail-width) + var(--toc-extra-right, 0px)) !important;
             padding-top: 0;
           }
         }
       `}</style>
     </>
-    </McpProvider>
-    </WalkthroughProvider>
   );
 }

package/_standalone/components/SpaceInitToast.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback, useTransition } from 'react';
 import { Sparkles, Check, Undo2, X } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 import { encodePath } from '@/lib/utils';
 import { revertSpaceInitAction } from '@/lib/actions';
 

package/_standalone/components/SyncStatusBar.tsx

@@ -3,8 +3,8 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { RefreshCw, CheckCircle2, XCircle } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
-import { useLocale } from '@/lib/LocaleContext';
-import type { SyncStatus } from './settings/SyncTab';
+import { useLocale } from '@/lib/stores/locale-store';
+import type { SyncStatus } from './settings/types';
 import { timeAgo } from './settings/SyncTab';
 
 export type StatusLevel = 'synced' | 'unpushed' | 'conflicts' | 'error' | 'off' | 'syncing';

package/_standalone/components/SystemPulse.tsx

@@ -3,8 +3,8 @@
 import { useState, useEffect, useMemo } from 'react';
 import Link from 'next/link';
 import { Bot, ChevronDown, ArrowRight } from 'lucide-react';
-import { useMcpDataOptional } from '@/hooks/useMcpData';
-import { useLocale } from '@/lib/LocaleContext';
+import { useMcpDataOptional } from '@/lib/stores/mcp-store';
+import { useLocale } from '@/lib/stores/locale-store';
 import type { AgentInfo } from '@/components/settings/types';
 
 /* ── Constants ── */
@@ -66,7 +66,12 @@ export default function SystemPulse() {
     localStorage.setItem(COLLAPSE_KEY, next ? '1' : '0');
   };
 
-  if (!mcp || mcp.loading) return null;
+  if (!mcp || mcp.loading) return (
+    <section className="mb-8 animate-pulse">
+      <div className="h-4 w-32 bg-muted rounded mb-3" />
+      <div className="h-16 bg-muted/50 rounded-xl" />
+    </section>
+  );
 
   // ── State 0: No agents detected ──
   if (agents.every(a => !a.present)) {
@@ -173,9 +178,10 @@ export default function SystemPulse() {
         {visibleAgents.map(agent => {
           const age = activityAge(agent.runtimeLastActivityAt);
           return (
-            <div
+            <Link
               key={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"
+              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"
             >
               {/* 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">
@@ -190,7 +196,7 @@ export default function SystemPulse() {
                   {age ? ` · ${age}` : ''}
                 </span>
               </div>
-            </div>
+            </Link>
           );
         })}
       </div>

package/_standalone/components/TableOfContents.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { ChevronRight } from 'lucide-react';
 import GithubSlugger from 'github-slugger';
+import { useLocale } from '@/lib/stores/locale-store';
+import { cn } from '@/lib/utils';
 
 interface Heading {
   id: string;
@@ -16,7 +18,6 @@ function parseHeadings(content: string): Heading[] {
   const headings: Heading[] = [];
   let inCodeBlock = false;
   for (const line of lines) {
-    // Toggle code fence state (``` or ~~~, with optional language tag)
     if (/^(`{3,}|~{3,})/.test(line)) {
       inCodeBlock = !inCodeBlock;
       continue;
@@ -42,10 +43,41 @@ interface TableOfContentsProps {
 }
 
 export default function TableOfContents({ content }: TableOfContentsProps) {
-  const headings = parseHeadings(content);
+  const { t } = useLocale();
+  const { headings, minLevel } = useMemo(() => {
+    const h = parseHeadings(content);
+    return { headings: h, minLevel: h.length > 0 ? Math.min(...h.map(x => x.level)) : 1 };
+  }, [content]);
   const [activeId, setActiveId] = useState<string>('');
   const [collapsed, setCollapsed] = useState(false);
+
+  // Broadcast TOC width to content area via CSS variables
+  useEffect(() => {
+    const root = document.documentElement.style;
+    root.setProperty('--toc-width', collapsed ? '0px' : `${NAV_W}px`);
+    if (collapsed) {
+      root.removeProperty('--toc-margin');
+    } else {
+      root.setProperty('--toc-margin', `${NAV_W + 8}px`);
+    }
+    return () => { root.removeProperty('--toc-width'); root.removeProperty('--toc-margin'); };
+  }, [collapsed]);
   const observerRef = useRef<IntersectionObserver | null>(null);
+  const navRef = useRef<HTMLElement | null>(null);
+  const linkRefs = useRef<Map<string, HTMLAnchorElement>>(new Map());
+
+  const scrollActiveIntoView = useCallback((id: string) => {
+    const link = linkRefs.current.get(id);
+    const nav = navRef.current;
+    if (!link || !nav || !link.isConnected) return;
+    const navRect = nav.getBoundingClientRect();
+    const linkRect = link.getBoundingClientRect();
+    const isAbove = linkRect.top < navRect.top + 40;
+    const isBelow = linkRect.bottom > navRect.bottom - 40;
+    if (isAbove || isBelow) {
+      link.scrollIntoView({ block: 'center', behavior: 'auto' });
+    }
+  }, []);
 
   useEffect(() => {
     if (headings.length === 0) return;
@@ -58,7 +90,11 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
       observerRef.current = new IntersectionObserver(
         (entries) => {
           for (const entry of entries) {
-            if (entry.isIntersecting) { setActiveId(entry.target.id); break; }
+            if (entry.isIntersecting) {
+              setActiveId(entry.target.id);
+              scrollActiveIntoView(entry.target.id);
+              break;
+            }
           }
         },
         { rootMargin: `-${SCROLL_OFFSET}px 0% -70% 0%`, threshold: 0 }
@@ -66,13 +102,12 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
       elements.forEach(el => observerRef.current?.observe(el));
     }, 150);
     return () => { clearTimeout(timer); observerRef.current?.disconnect(); };
+  // headings is derived from content via useMemo; scrollActiveIntoView is stable (no deps)
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [content]);
+  }, [headings]);
 
   if (headings.length < 2) return null;
 
-  const minLevel = Math.min(...headings.map(h => h.level));
-
   const handleClick = (e: React.MouseEvent, id: string) => {
     e.preventDefault();
     const el = document.getElementById(id);
@@ -83,29 +118,17 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
   };
 
   return (
-    <aside
-      className="hidden xl:block fixed z-10"
-      style={{
-        top: TOPBAR_H,
-        height: `calc(100vh - ${TOPBAR_H}px)`,
-        // Always reserve full width so content margin doesn't jump
-        width: NAV_W,
-        // Shift right when Ask AI panel is open (CSS var injected by SidebarLayout)
-        right: 'var(--right-panel-width, 0px)',
-        // Slide the entire panel off the right edge when collapsed
-        transform: collapsed ? `translateX(${NAV_W}px)` : 'translateX(0)',
-        transition: 'transform 200ms ease-in-out, right 200ms ease-out',
-      }}
-    >
-      {/* Collapse / expand button — tab attached to left edge of the panel */}
+    <>
+      {/* Collapse / expand toggle — separate from aside so it stays visible */}
       <button
         onClick={() => setCollapsed(v => !v)}
-        className="absolute top-6 flex items-center justify-center w-5 h-8 rounded-l-md border border-r-0 border-border hover:bg-muted transition-colors"
+        className="hidden xl:flex fixed z-10 top-[50px] flex items-center justify-center w-5 h-8 rounded-l-md border border-r-0 border-border hover:bg-muted transition-colors"
         style={{
-          left: -20,           // sticks out to the left of the panel
+          right: `calc(var(--right-panel-width, 0px) + ${collapsed ? 0 : NAV_W}px)`,
           background: 'var(--background)',
+          transition: 'right 200ms ease-in-out',
         }}
-        title={collapsed ? 'Expand TOC' : 'Collapse TOC'}
+        title={collapsed ? t.view.tocExpand : t.view.tocCollapse}
       >
         <ChevronRight
           size={11}
@@ -114,16 +137,28 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
         />
       </button>
 
-      {/* Nav list */}
+      {/* TOC panel */}
+      <aside
+        className="hidden xl:flex flex-col fixed z-10 overflow-hidden"
+        style={{
+          top: TOPBAR_H,
+          height: `calc(100vh - ${TOPBAR_H}px)`,
+          width: NAV_W,
+          right: 'var(--right-panel-width, 0px)',
+          transform: collapsed ? `translateX(${NAV_W}px)` : 'translateX(0)',
+          transition: 'transform 200ms ease-in-out, right 200ms ease-out',
+        }}
+      >
       <nav
-        className="flex flex-col gap-0.5 overflow-y-auto py-5 pl-2 pr-3 h-full border-l border-border"
+        ref={navRef}
+        aria-label={t.view.tocTitle}
+        className="flex flex-col gap-0.5 overflow-y-auto min-h-0 flex-1 py-5 pl-2 pr-3 border-l border-border"
         style={{ background: 'var(--background)' }}
       >
         <p
-          className="text-2xs font-semibold uppercase tracking-wider px-2 mb-1"
-          style={{ color: 'var(--muted-foreground)', opacity: 0.5 }}
+          className="text-2xs font-semibold uppercase tracking-wider px-2 mb-1 text-muted-foreground/50 shrink-0"
         >
-          On this page
+          {t.view.tocTitle}
         </p>
         {headings.map((heading, i) => {
           const indent = (heading.level - minLevel) * 14;
@@ -132,29 +167,41 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
           return (
             <a
               key={`${heading.id}-${i}`}
+              ref={el => {
+                if (el) linkRefs.current.set(heading.id, el);
+                else linkRefs.current.delete(heading.id);
+              }}
               href={`#${heading.id}`}
               onClick={(e) => handleClick(e, heading.id)}
-              className="block text-xs py-1 rounded transition-colors duration-100 leading-snug"
-              suppressHydrationWarning
+              className={cn(
+                'block text-xs py-1 rounded transition-colors duration-100 leading-snug shrink-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+                isActive && 'font-medium',
+              )}
               style={{
                 paddingLeft: `${8 + indent}px`,
                 paddingRight: '8px',
-                borderLeft: isNested ? '1px solid var(--border)' : 'none',
-                marginLeft: isNested ? '8px' : '0',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
+                borderLeft: '2px solid',
+                borderLeftColor: isActive
+                  ? 'var(--amber)'
+                  : isNested
+                    ? 'var(--border)'
+                    : 'transparent',
+                marginLeft: isNested ? '7px' : '0',
                 ...(isActive
                   ? { color: 'var(--amber)', background: 'var(--amber-dim)' }
                   : { color: 'var(--muted-foreground)' }
-                )
+                ),
               }}
+              title={heading.text}
             >
-              {heading.text}
+              <span className="line-clamp-2" suppressHydrationWarning>
+                {heading.text}
+              </span>
             </a>
           );
         })}
       </nav>
     </aside>
+    </>
   );
 }