@geminilight/mindos 0.5.36 → 0.5.38

package/app/app/globals.css

@@ -75,7 +75,7 @@ body {
   --ring: var(--amber);
   --radius: 0.5rem;
   --amber: #c8873a;
-  --amber-dim: rgba(200, 135, 58, 0.12);
+  --amber-dim: rgba(200, 135, 58, 0.18);
   --amber-subtle: rgba(200, 135, 30, 0.08);
   --amber-foreground: #131210;
   --success: #7aad80;
@@ -110,7 +110,7 @@ body {
   --input: rgba(232, 228, 220, 0.1);
   --ring: var(--amber);
   --amber: #d4954a;
-  --amber-dim: rgba(212, 149, 74, 0.12);
+  --amber-dim: rgba(212, 149, 74, 0.20);
   --amber-subtle: rgba(212, 149, 74, 0.10);
   --amber-foreground: #131210;
   --success: #7aad80;
@@ -300,6 +300,9 @@ body {
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
 }
+.dark .modal-backdrop {
+  background: rgba(0, 0, 0, 0.65);
+}
 
 /* Micro type scale: text-2xs = 10px (between nothing and text-xs 12px) */
 @layer utilities {

package/app/components/RightAskPanel.tsx

@@ -1,6 +1,8 @@
 'use client';
 
+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;
@@ -47,16 +49,29 @@ export default function RightAskPanel({
       role="complementary"
       aria-label="MindOS Agent panel"
     >
-      <AskContent
-        visible={open}
-        variant="panel"
-        currentFile={open ? currentFile : undefined}
-        initialMessage={initialMessage}
-        onFirstMessage={onFirstMessage}
-        onClose={onClose}
-        askMode={askMode}
-        onModeSwitch={onModeSwitch}
-      />
+      <ErrorBoundary fallback={
+        <div className="flex flex-col items-center justify-center h-full gap-3 px-6 text-center">
+          <AlertCircle size={20} className="text-muted-foreground" />
+          <p className="text-sm text-muted-foreground">AI panel encountered an error.</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="text-xs px-3 py-1.5 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+          >
+            Reload page
+          </button>
+        </div>
+      }>
+        <AskContent
+          visible={open}
+          variant="panel"
+          currentFile={open ? currentFile : undefined}
+          initialMessage={initialMessage}
+          onFirstMessage={onFirstMessage}
+          onClose={onClose}
+          askMode={askMode}
+          onModeSwitch={onModeSwitch}
+        />
+      </ErrorBoundary>
 
       {/* Drag resize handle — LEFT edge */}
       <div

package/app/components/SidebarLayout.tsx

@@ -4,14 +4,14 @@ import { useState, useEffect, useCallback } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import Link from 'next/link';
 import { Search, Settings, Menu, X } from 'lucide-react';
-import ActivityBar, { type PanelId, RAIL_WIDTH_COLLAPSED, RAIL_WIDTH_EXPANDED } from './ActivityBar';
-import Panel, { PANEL_WIDTH, MIN_PANEL_WIDTH, MAX_PANEL_WIDTH_ABS, MAX_PANEL_WIDTH_RATIO } from './Panel';
+import ActivityBar, { type PanelId } from './ActivityBar';
+import Panel from './Panel';
 import FileTree from './FileTree';
 import Logo from './Logo';
 import SearchPanel from './panels/SearchPanel';
 import PluginsPanel from './panels/PluginsPanel';
 import AgentsPanel from './panels/AgentsPanel';
-import RightAskPanel, { RIGHT_ASK_DEFAULT_WIDTH, RIGHT_ASK_MIN_WIDTH, RIGHT_ASK_MAX_WIDTH } from './RightAskPanel';
+import RightAskPanel from './RightAskPanel';
 import AskFab from './AskFab';
 import SyncPopover from './panels/SyncPopover';
 import SearchModal from './SearchModal';
@@ -19,11 +19,12 @@ import AskModal from './AskModal';
 import SettingsModal from './SettingsModal';
 import KeyboardShortcuts from './KeyboardShortcuts';
 import { MobileSyncDot, useSyncStatus } from './SyncStatusBar';
-import { useAskModal } from '@/hooks/useAskModal';
 import { FileNode } from '@/lib/types';
 import { useLocale } from '@/lib/LocaleContext';
 import { WalkthroughProvider } from './walkthrough';
 import McpProvider from '@/hooks/useMcpData';
+import { useLeftPanel } from '@/hooks/useLeftPanel';
+import { useAskPanel } from '@/hooks/useAskPanel';
 import type { Tab } from './settings/types';
 
 interface SidebarLayoutProps {
@@ -32,130 +33,22 @@ interface SidebarLayoutProps {
 }
 
 export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps) {
-  const [activePanel, setActivePanel] = useState<PanelId | null>('files');
-  const [mobileOpen, setMobileOpen] = useState(false);
+  // ── Left panel state (extracted hook) ──
+  const lp = useLeftPanel();
+
+  // ── Right Ask AI panel state (extracted hook) ──
+  const ap = useAskPanel();
 
-  // Settings modal state — settings is a modal overlay, not a panel
+  // ── Settings modal ──
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settingsTab, setSettingsTab] = useState<Tab | undefined>(undefined);
 
-  // Rail expanded state — persisted to localStorage
-  const [railExpanded, setRailExpanded] = useState(false);
-  useEffect(() => {
-    try {
-      if (localStorage.getItem('rail-expanded') === 'true') setRailExpanded(true);
-    } catch {}
-  }, []);
-
-  // Panel width state — shared across all left panels
-  const [panelWidth, setPanelWidth] = useState<number | null>(null);
-  const [panelMaximized, setPanelMaximized] = useState(false);
-
-  // Load persisted panel width when activePanel changes
-  useEffect(() => {
-    if (!activePanel) return;
-    try {
-      const stored = localStorage.getItem('left-panel-width');
-      if (stored) {
-        const w = parseInt(stored, 10);
-        if (w >= MIN_PANEL_WIDTH && w <= MAX_PANEL_WIDTH_ABS) {
-          setPanelWidth(w);
-          return;
-        }
-      }
-    } catch {}
-    setPanelWidth(280);
-  }, [activePanel]);
-
-  // Exit maximize when switching panels
-  useEffect(() => { setPanelMaximized(false); }, [activePanel]);
-
-  const handlePanelWidthChange = useCallback((w: number) => {
-    setPanelWidth(w);
-  }, []);
-
-  const handlePanelWidthCommit = useCallback((w: number) => {
-    try { localStorage.setItem('left-panel-width', String(w)); } catch {}
-  }, []);
-
-  const handlePanelMaximize = useCallback(() => {
-    setPanelMaximized(v => !v);
-  }, []);
-
-  // ── Right-side Ask AI panel state (independent of left panel) ──
-  const [askPanelOpen, setAskPanelOpen] = useState(false);
-  const [askPanelWidth, setAskPanelWidth] = useState(RIGHT_ASK_DEFAULT_WIDTH);
-  const [askMode, setAskMode] = useState<'panel' | 'popup'>('panel');
-  // Desktop popup (distinct from mobileAskOpen)
-  const [desktopAskPopupOpen, setDesktopAskPopupOpen] = useState(false);
-
-  useEffect(() => {
-    try {
-      const stored = localStorage.getItem('right-ask-panel-width');
-      if (stored) {
-        const w = parseInt(stored, 10);
-        if (w >= RIGHT_ASK_MIN_WIDTH && w <= RIGHT_ASK_MAX_WIDTH) setAskPanelWidth(w);
-      }
-      const mode = localStorage.getItem('ask-mode');
-      if (mode === 'popup') setAskMode('popup');
-    } catch {}
-
-    // Listen for Settings → AskDisplayMode changes
-    const onStorage = (e: StorageEvent) => {
-      if (e.key === 'ask-mode' && (e.newValue === 'panel' || e.newValue === 'popup')) {
-        setAskMode(e.newValue);
-      }
-    };
-    window.addEventListener('storage', onStorage);
-    return () => window.removeEventListener('storage', onStorage);
-  }, []);
-
-  const handleAskWidthChange = useCallback((w: number) => { setAskPanelWidth(w); }, []);
-  const handleAskWidthCommit = useCallback((w: number) => {
-    try { localStorage.setItem('right-ask-panel-width', String(w)); } catch {}
-  }, []);
-
-  const toggleAskPanel = useCallback(() => {
-    if (askMode === 'popup') {
-      setDesktopAskPopupOpen(v => {
-        if (!v) { setAskInitialMessage(''); setAskOpenSource('user'); }
-        return !v;
-      });
-    } else {
-      setAskPanelOpen(v => {
-        if (!v) { setAskInitialMessage(''); setAskOpenSource('user'); }
-        return !v;
-      });
-    }
-  }, [askMode]);
-
-  const closeAskPanel = useCallback(() => { setAskPanelOpen(false); }, []);
-  const closeDesktopAskPopup = useCallback(() => { setDesktopAskPopupOpen(false); }, []);
-
-  // Switch between panel ↔ popup mode
-  const handleAskModeSwitch = useCallback(() => {
-    setAskMode(prev => {
-      const next = prev === 'panel' ? 'popup' : 'panel';
-      try {
-        localStorage.setItem('ask-mode', next);
-        window.dispatchEvent(new StorageEvent('storage', { key: 'ask-mode', newValue: next }));
-      } catch {}
-      if (next === 'popup') {
-        setAskPanelOpen(false);
-        setDesktopAskPopupOpen(true);
-      } else {
-        setDesktopAskPopupOpen(false);
-        setAskPanelOpen(true);
-      }
-      return next;
-    });
-  }, []);
-
-  // Sync popover state
+  // ── Sync popover ──
   const [syncPopoverOpen, setSyncPopoverOpen] = useState(false);
   const [syncAnchorRect, setSyncAnchorRect] = useState<DOMRect | null>(null);
 
-  // Mobile modals — kept for <768px
+  // ── Mobile state ──
+  const [mobileOpen, setMobileOpen] = useState(false);
   const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
   const [mobileAskOpen, setMobileAskOpen] = useState(false);
 
@@ -163,24 +56,14 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
   const router = useRouter();
   const pathname = usePathname();
   const { status: syncStatus, fetchStatus: syncStatusRefresh } = useSyncStatus();
-  const askModal = useAskModal();
 
   const currentFile = pathname.startsWith('/view/')
     ? pathname.slice('/view/'.length).split('/').map(decodeURIComponent).join('/')
     : undefined;
 
-  // AskPanel initial message from GuideCard bridge
-  const [askInitialMessage, setAskInitialMessage] = useState('');
-  const [askOpenSource, setAskOpenSource] = useState<'user' | 'guide' | 'guide-next'>('user');
+  // ── Event listeners ──
 
-  // Persist rail expanded state
-  const handleExpandedChange = useCallback((expanded: boolean) => {
-    setRailExpanded(expanded);
-    setSyncPopoverOpen(false);
-    try { localStorage.setItem('rail-expanded', String(expanded)); } catch {}
-  }, []);
-
-  // Listen for cross-component "open settings" events (e.g. from UpdateBanner)
+  // Listen for cross-component "open settings" events
   useEffect(() => {
     const handler = (e: Event) => {
       const tab = (e as CustomEvent).detail?.tab;
@@ -191,33 +74,19 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     return () => window.removeEventListener('mindos:open-settings', handler);
   }, []);
 
-  // Bridge useAskModal store → right Ask panel or popup
-  useEffect(() => {
-    if (askModal.open) {
-      setAskInitialMessage(askModal.initialMessage);
-      setAskOpenSource(askModal.source);
-      if (askMode === 'popup') {
-        setDesktopAskPopupOpen(true);
-      } else {
-        setAskPanelOpen(true);
-      }
-      askModal.close();
-    }
-  }, [askModal.open, askModal.initialMessage, askModal.source, askModal.close, askMode]);
-
   // GuideCard first message handler
   const handleFirstMessage = useCallback(() => {
     const notifyGuide = () => window.dispatchEvent(new Event('guide-state-updated'));
-    if (askOpenSource === 'guide') {
+    if (ap.askOpenSource === 'guide') {
       fetch('/api/setup', {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ guideState: { askedAI: true } }),
       }).then(notifyGuide).catch((err) => console.warn('Guide state update failed:', err));
-    } else if (askOpenSource === 'guide-next') {
+    } else if (ap.askOpenSource === 'guide-next') {
       notifyGuide();
     }
-  }, [askOpenSource]);
+  }, [ap.askOpenSource]);
 
   // Close mobile drawer on route change
   useEffect(() => { setMobileOpen(false); }, [pathname]);
@@ -240,16 +109,15 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
   // Unified keyboard shortcuts
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
-      // ESC exits panel maximize or closes right Ask panel/popup
       if (e.key === 'Escape') {
-        if (panelMaximized) { setPanelMaximized(false); return; }
-        if (askPanelOpen) { setAskPanelOpen(false); return; }
-        if (desktopAskPopupOpen) { setDesktopAskPopupOpen(false); return; }
+        if (lp.panelMaximized) { lp.handlePanelMaximize(); return; }
+        if (ap.askPanelOpen) { ap.closeAskPanel(); return; }
+        if (ap.desktopAskPopupOpen) { ap.closeDesktopAskPopup(); return; }
       }
       if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
         e.preventDefault();
         if (window.innerWidth >= 768) {
-          setActivePanel(p => p === 'search' ? null : 'search');
+          lp.setActivePanel((p: PanelId | null) => p === 'search' ? null : 'search');
         } else {
           setMobileSearchOpen(v => !v);
         }
@@ -257,7 +125,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
       if ((e.metaKey || e.ctrlKey) && e.key === '/') {
         e.preventDefault();
         if (window.innerWidth >= 768) {
-          toggleAskPanel();
+          ap.toggleAskPanel();
         } else {
           setMobileAskOpen(v => !v);
         }
@@ -269,8 +137,9 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     };
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
-  }, [panelMaximized, askPanelOpen, desktopAskPopupOpen, toggleAskPanel]);
+  }, [lp.panelMaximized, ap.askPanelOpen, ap.desktopAskPopupOpen, ap.toggleAskPanel, lp]);
 
+  // ── Settings helpers ──
   const openSyncSettings = useCallback(() => {
     setSettingsTab('sync');
     setSyncPopoverOpen(false);
@@ -282,26 +151,20 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     setSettingsTab(undefined);
   }, []);
 
-  const openSettingsTab = useCallback((tab: Tab) => {
-    setSettingsTab(tab);
-    setSettingsOpen(true);
-  }, []);
-
   const closeSettings = useCallback(() => {
     setSettingsOpen(false);
     setSettingsTab(undefined);
   }, []);
 
-  const closeSyncPopover = useCallback(() => setSyncPopoverOpen(false), []);
-
   const handleSyncClick = useCallback((rect: DOMRect) => {
     setSyncAnchorRect(rect);
     setSyncPopoverOpen(prev => !prev);
   }, []);
 
-  const railWidth = railExpanded ? RAIL_WIDTH_EXPANDED : RAIL_WIDTH_COLLAPSED;
-  const panelOpen = activePanel !== null;
-  const effectivePanelWidth = panelWidth ?? (activePanel ? PANEL_WIDTH[activePanel] : 280);
+  const handleExpandedChange = useCallback((expanded: boolean) => {
+    lp.handleExpandedChange(expanded);
+    setSyncPopoverOpen(false);
+  }, [lp]);
 
   return (
     <WalkthroughProvider>
@@ -318,93 +181,78 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
 
       {/* ── Desktop: Activity Bar + Panel ── */}
       <ActivityBar
-        activePanel={activePanel}
-        onPanelChange={setActivePanel}
+        activePanel={lp.activePanel}
+        onPanelChange={lp.setActivePanel}
         syncStatus={syncStatus}
-        expanded={railExpanded}
+        expanded={lp.railExpanded}
         onExpandedChange={handleExpandedChange}
         onSettingsClick={handleSettingsClick}
         onSyncClick={handleSyncClick}
       />
 
       <Panel
-        activePanel={activePanel}
+        activePanel={lp.activePanel}
         fileTree={fileTree}
         onNavigate={() => {}}
         onOpenSyncSettings={openSyncSettings}
-        railWidth={railWidth}
-        panelWidth={panelWidth ?? undefined}
-        onWidthChange={handlePanelWidthChange}
-        onWidthCommit={handlePanelWidthCommit}
-        maximized={panelMaximized}
-        onMaximize={handlePanelMaximize}
+        railWidth={lp.railWidth}
+        panelWidth={lp.panelWidth ?? undefined}
+        onWidthChange={lp.handlePanelWidthChange}
+        onWidthCommit={lp.handlePanelWidthCommit}
+        maximized={lp.panelMaximized}
+        onMaximize={lp.handlePanelMaximize}
       >
-        {/* All panels always mounted — hidden/flex toggled to preserve state */}
-        <div className={`flex flex-col h-full ${activePanel === 'search' ? '' : 'hidden'}`}>
-          <SearchPanel active={activePanel === 'search'} maximized={panelMaximized} onMaximize={handlePanelMaximize} />
+        <div className={`flex flex-col h-full ${lp.activePanel === 'search' ? '' : 'hidden'}`}>
+          <SearchPanel active={lp.activePanel === 'search'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
         </div>
-        <div className={`flex flex-col h-full ${activePanel === 'plugins' ? '' : 'hidden'}`}>
-          <PluginsPanel active={activePanel === 'plugins'} maximized={panelMaximized} onMaximize={handlePanelMaximize} />
+        <div className={`flex flex-col h-full ${lp.activePanel === 'plugins' ? '' : 'hidden'}`}>
+          <PluginsPanel active={lp.activePanel === 'plugins'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
         </div>
-        <div className={`flex flex-col h-full ${activePanel === 'agents' ? '' : 'hidden'}`}>
-          <AgentsPanel
-            active={activePanel === 'agents'}
-            maximized={panelMaximized}
-            onMaximize={handlePanelMaximize}
-          />
+        <div className={`flex flex-col h-full ${lp.activePanel === 'agents' ? '' : 'hidden'}`}>
+          <AgentsPanel active={lp.activePanel === 'agents'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
         </div>
       </Panel>
 
-      {/* ── Right-side Ask AI Panel (desktop, panel mode) ── */}
+      {/* ── Right-side Ask AI Panel ── */}
       <RightAskPanel
-        open={askPanelOpen}
-        onClose={closeAskPanel}
+        open={ap.askPanelOpen}
+        onClose={ap.closeAskPanel}
         currentFile={currentFile}
-        initialMessage={askInitialMessage}
+        initialMessage={ap.askInitialMessage}
         onFirstMessage={handleFirstMessage}
-        width={askPanelWidth}
-        onWidthChange={handleAskWidthChange}
-        onWidthCommit={handleAskWidthCommit}
-        askMode={askMode}
-        onModeSwitch={handleAskModeSwitch}
+        width={ap.askPanelWidth}
+        onWidthChange={ap.handleAskWidthChange}
+        onWidthCommit={ap.handleAskWidthCommit}
+        askMode={ap.askMode}
+        onModeSwitch={ap.handleAskModeSwitch}
       />
 
-      {/* ── Desktop Ask AI Popup (popup mode) ── */}
       <AskModal
-        open={desktopAskPopupOpen}
-        onClose={closeDesktopAskPopup}
+        open={ap.desktopAskPopupOpen}
+        onClose={ap.closeDesktopAskPopup}
         currentFile={currentFile}
-        initialMessage={askInitialMessage}
+        initialMessage={ap.askInitialMessage}
         onFirstMessage={handleFirstMessage}
-        askMode={askMode}
-        onModeSwitch={handleAskModeSwitch}
+        askMode={ap.askMode}
+        onModeSwitch={ap.handleAskModeSwitch}
       />
 
-      {/* ── Ask AI FAB (desktop only — toggles right panel or popup) ── */}
-      <AskFab onToggle={toggleAskPanel} askPanelOpen={askPanelOpen || desktopAskPopupOpen} />
-
-      {/* ── Keyboard Shortcuts (⌘?) ── */}
+      <AskFab onToggle={ap.toggleAskPanel} askPanelOpen={ap.askPanelOpen || ap.desktopAskPopupOpen} />
       <KeyboardShortcuts />
 
-      {/* ── Settings Modal (desktop overlay — does not affect panel) ── */}
-      <SettingsModal
-        open={settingsOpen}
-        onClose={closeSettings}
-        initialTab={settingsTab}
-      />
+      <SettingsModal open={settingsOpen} onClose={closeSettings} initialTab={settingsTab} />
 
-      {/* ── Sync Popover ── */}
       <SyncPopover
         open={syncPopoverOpen}
-        onClose={closeSyncPopover}
+        onClose={() => setSyncPopoverOpen(false)}
         anchorRect={syncAnchorRect}
-        railWidth={railWidth}
+        railWidth={lp.railWidth}
         onOpenSyncSettings={openSyncSettings}
         syncStatus={syncStatus}
         onSyncStatusRefresh={syncStatusRefresh}
       />
 
-      {/* ── Mobile: Header Bar ── */}
+      {/* ── Mobile ── */}
       <header className="md:hidden fixed top-0 left-0 right-0 z-30 bg-card border-b border-border flex items-center justify-between px-3 py-2" style={{ paddingTop: 'env(safe-area-inset-top, 0px)' }}>
         <button onClick={() => setMobileOpen(true)} className="p-3 -ml-1 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label="Open menu">
           <Menu size={20} />
@@ -414,11 +262,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
           <span className="font-semibold text-foreground text-sm tracking-wide">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"
-          >
+          <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">
             <MobileSyncDot status={syncStatus} />
           </button>
           <button onClick={() => setMobileSearchOpen(true)} className="p-3 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label={t.sidebar.searchTitle}>
@@ -430,7 +274,6 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         </div>
       </header>
 
-      {/* ── Mobile: Drawer overlay ── */}
       {mobileOpen && <div className="md:hidden fixed inset-0 z-40 bg-black/60 backdrop-blur-sm" onClick={() => setMobileOpen(false)} />}
       <aside className={`md:hidden fixed top-0 left-0 h-screen w-[85vw] max-w-[320px] z-50 bg-card border-r border-border flex flex-col transition-transform duration-300 ease-in-out ${mobileOpen ? 'translate-x-0' : '-translate-x-full'}`}>
         <div className="flex items-center justify-between px-4 py-4 border-b border-border shrink-0">
@@ -447,26 +290,18 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         </div>
       </aside>
 
-      {/* ── Mobile: Modals (preserved for <768px) ── */}
       <SearchModal open={mobileSearchOpen} onClose={() => setMobileSearchOpen(false)} />
       <AskModal open={mobileAskOpen} onClose={() => setMobileAskOpen(false)} currentFile={currentFile} />
 
-      {/* ── Main Content ── */}
-      <main
-        id="main-content"
-        className="min-h-screen transition-all duration-200 pt-[52px] md:pt-0"
-      >
-        <div className="min-h-screen bg-background">
-          {children}
-        </div>
+      <main id="main-content" className="min-h-screen transition-all duration-200 pt-[52px] md:pt-0">
+        <div className="min-h-screen bg-background">{children}</div>
       </main>
 
-      {/* Desktop padding via <style> — avoids hydration mismatch from window checks */}
       <style>{`
         @media (min-width: 768px) {
-          :root { --right-panel-width: ${askPanelOpen ? askPanelWidth : 0}px; }
+          :root { --right-panel-width: ${ap.askPanelOpen ? ap.askPanelWidth : 0}px; }
           #main-content {
-            padding-left: ${panelOpen && panelMaximized ? '100vw' : `${panelOpen ? railWidth + effectivePanelWidth : railWidth}px`} !important;
+            padding-left: ${lp.panelOpen && lp.panelMaximized ? '100vw' : `${lp.panelOpen ? lp.railWidth + lp.effectivePanelWidth : lp.railWidth}px`} !important;
             padding-right: var(--right-panel-width) !important;
             padding-top: 0 !important;
           }

package/app/components/panels/PluginsPanel.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import { getAllRenderers, isRendererEnabled, setRendererEnabled, loadDisabledState } from '@/lib/renderers/registry';
 import { Toggle } from '../settings/Primitives';
@@ -27,25 +27,25 @@ export default function PluginsPanel({ active, maximized, onMaximize }: PluginsP
     setMounted(true);
   }, []);
 
-  // Check which entry files exist (once on mount + when active)
+  // Check which entry files exist — fetch once on mount, cache result
+  const fetchedRef = useRef(false);
   useEffect(() => {
-    if (!mounted || !active) return;
+    if (!mounted || fetchedRef.current) return;
+    fetchedRef.current = true;
     const entryPaths = getAllRenderers()
       .map(r => r.entryPath)
       .filter((p): p is string => !!p);
     if (entryPaths.length === 0) return;
 
-    // Check each file via HEAD-like GET — lightweight
-    Promise.all(
-      entryPaths.map(path =>
-        fetch(`/api/file?path=${encodeURIComponent(path)}`, { method: 'GET' })
-          .then(r => r.ok ? path : null)
-          .catch(() => null)
-      )
-    ).then(results => {
-      setExistingFiles(new Set(results.filter((p): p is string => p !== null)));
-    });
-  }, [mounted, active]);
+    // Single request: fetch all file paths and check which entry paths exist
+    fetch('/api/files')
+      .then(r => r.ok ? r.json() : [])
+      .then((allPaths: string[]) => {
+        const pathSet = new Set(allPaths);
+        setExistingFiles(new Set(entryPaths.filter(p => pathSet.has(p))));
+      })
+      .catch(() => {});
+  }, [mounted]);
 
   const renderers = mounted ? getAllRenderers() : [];
   const enabledCount = mounted ? renderers.filter(r => isRendererEnabled(r.id)).length : 0;
@@ -86,7 +86,9 @@ export default function PluginsPanel({ active, maximized, onMaximize }: PluginsP
                 ${!enabled ? 'opacity-50' : ''}
               `}
               onClick={canOpen ? () => handleOpen(r.entryPath!) : undefined}
+              onKeyDown={canOpen ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleOpen(r.entryPath!); } } : undefined}
               role={canOpen ? 'link' : undefined}
+              tabIndex={canOpen ? 0 : undefined}
             >
               {/* Top row: status dot + icon + name + toggle */}
               <div className="flex items-center justify-between gap-2">