@creativeintelligence/abbie 0.1.0

package/dist/web/components/sidebar/sidebar-nav.js

@@ -0,0 +1,505 @@
+'use client';
+import { createContext, memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { Menu } from '@base-ui-components/react/menu';
+import { Reorder, useDragControls } from 'motion/react';
+import { CubeTransparentIcon, Squares2X2Icon, Bars3BottomLeftIcon, ClipboardIcon, EllipsisHorizontalIcon, Bars2Icon, FolderOpenIcon, CodeBracketIcon, ChevronRightIcon, CheckIcon, EyeIcon, } from '@heroicons/react/24/outline';
+import { cn } from '@/lib/utils';
+import { stateAtom, tmuxWindowsAtom, selectedProjectAtom, selectedProjectViewAtom, selectedSessionIdAtom, viewModeAtom, projectsAtom, } from '@/atoms/state';
+import { DEFAULT_PROJECT_SIDEBAR_ITEMS, expandedProjectsAtom, projectSidebarItemsAtom, setProjectExpandedAtom, setProjectSidebarItemEnabledAtom, } from '@/atoms/sidebar';
+import { api } from '@/lib/api';
+import { toastError, toastSuccess } from '@/components/toast';
+import { formatTmuxWindowName } from '@/lib/paths';
+import { NavGroup } from './nav-group';
+import { NavItem } from './nav-item';
+const HoverContext = createContext(null);
+function HoverProvider({ children }) {
+    const [lastHoveredId, setLastHoveredId] = useState(null);
+    const setLastHovered = useCallback((id) => {
+        setLastHoveredId(id);
+    }, []);
+    return (<HoverContext.Provider value={{ lastHoveredId, setLastHovered }}>
+      {children}
+    </HoverContext.Provider>);
+}
+// Base styles for menu items (without hover state)
+const menuItemBaseClass = cn('relative flex w-full items-center gap-2.5 px-2 py-2 text-sm', 'outline-none cursor-pointer select-none', 'text-foreground-secondary');
+const menuCheckboxBaseClass = cn('relative flex w-full items-center justify-between gap-2.5 px-2 py-2 text-sm', 'outline-none cursor-pointer select-none', 'text-foreground-secondary');
+// Sticky hover tile styles (applied when item is hovered or last hovered)
+// inset-x-0.5 (2px) aligns better with px-2.5 content padding
+const stickyHoverTileClass = cn('before:absolute before:inset-x-px before:inset-y-0', 'before:z-[-1] before:rounded-lg', 'before:bg-background-tertiary');
+function StickyMenuItem({ children, onClick, className }) {
+    const itemId = useId();
+    const hoverContext = useContext(HoverContext);
+    const isLastHovered = hoverContext?.lastHoveredId === itemId;
+    return (<Menu.Item onClick={onClick} onPointerEnter={() => hoverContext?.setLastHovered(itemId)} className={cn(menuItemBaseClass, 'z-0', isLastHovered && ['text-foreground', stickyHoverTileClass], 
+        // Also show on data-[highlighted] for keyboard navigation
+        'data-[highlighted]:text-foreground', 'data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-px data-[highlighted]:before:inset-y-0', 'data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-lg', 'data-[highlighted]:before:bg-background-tertiary', className)}>
+      {children}
+    </Menu.Item>);
+}
+function StickySubmenuTrigger({ children, className }) {
+    const itemId = useId();
+    const hoverContext = useContext(HoverContext);
+    const isLastHovered = hoverContext?.lastHoveredId === itemId;
+    return (<Menu.SubmenuTrigger onPointerEnter={() => hoverContext?.setLastHovered(itemId)} className={cn(menuItemBaseClass, 'z-0 justify-between', isLastHovered && ['text-foreground', stickyHoverTileClass], 'data-[highlighted]:text-foreground', 'data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-px data-[highlighted]:before:inset-y-0', 'data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-lg', 'data-[highlighted]:before:bg-background-tertiary', className)}>
+      {children}
+    </Menu.SubmenuTrigger>);
+}
+function StickyCheckboxItem({ children, checked, onCheckedChange, closeOnClick = false, className, }) {
+    const itemId = useId();
+    const hoverContext = useContext(HoverContext);
+    const isLastHovered = hoverContext?.lastHoveredId === itemId;
+    return (<Menu.CheckboxItem checked={checked} closeOnClick={closeOnClick} onCheckedChange={onCheckedChange} onPointerEnter={() => hoverContext?.setLastHovered(itemId)} className={cn(menuCheckboxBaseClass, 'z-0', isLastHovered && ['text-foreground', stickyHoverTileClass], 'data-[highlighted]:text-foreground', 'data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-px data-[highlighted]:before:inset-y-0', 'data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-lg', 'data-[highlighted]:before:bg-background-tertiary', className)}>
+      {children}
+    </Menu.CheckboxItem>);
+}
+// ----------------------------------------------------------------------------
+/**
+ * Main navigation - project list (tmux windows) with expandable sections.
+ */
+export function SidebarNav({ className, onScrolledChange, }) {
+    const [, setState] = useAtom(stateAtom);
+    const windows = useAtomValue(tmuxWindowsAtom);
+    const projects = useAtomValue(projectsAtom);
+    const expandedProjects = useAtomValue(expandedProjectsAtom);
+    const projectItems = useAtomValue(projectSidebarItemsAtom);
+    const setProjectExpanded = useSetAtom(setProjectExpandedAtom);
+    const setProjectSidebarItemEnabled = useSetAtom(setProjectSidebarItemEnabledAtom);
+    const [selectedProject, setSelectedProject] = useAtom(selectedProjectAtom);
+    const [selectedProjectView, setSelectedProjectView] = useAtom(selectedProjectViewAtom);
+    const setSelectedSessionId = useSetAtom(selectedSessionIdAtom);
+    const setViewMode = useSetAtom(viewModeAtom);
+    const [openProjectMenu, setOpenProjectMenu] = useState(null);
+    const [draggingProjectKey, setDraggingProjectKey] = useState(null);
+    const draggingProjectKeyRef = useRef(null);
+    const [dragDirection, setDragDirection] = useState(null);
+    const windowsRef = useRef(windows);
+    const frozenWindowsRef = useRef(null);
+    const [orderedProjectKeys, setOrderedProjectKeys] = useState([]);
+    const orderAtDragStartRef = useRef([]);
+    const orderedProjectKeysRef = useRef([]);
+    const lastTmuxOrderKeysRef = useRef([]);
+    const [reorderSaving, setReorderSaving] = useState(false);
+    const getProjectEmoji = useCallback((name) => {
+        return projects.projects[name]?.emoji ?? projects.defaultEmoji;
+    }, [projects]);
+    const getWindowKey = useCallback((window) => {
+        // In normal operation, this is `window.id` (stable like "@47").
+        // If the API server is out of date and doesn't provide ids, fall back to the index.
+        return window.id || (Number.isFinite(window.index) ? String(window.index) : window.name);
+    }, []);
+    useEffect(() => {
+        windowsRef.current = windows;
+    }, [windows]);
+    const windowsForRender = draggingProjectKey != null ? (frozenWindowsRef.current ?? windows) : windows;
+    const windowsByKey = useMemo(() => {
+        const map = new Map();
+        for (const w of windowsForRender) {
+            map.set(getWindowKey(w), w);
+        }
+        return map;
+    }, [windowsForRender, getWindowKey]);
+    const tmuxOrderKeys = useMemo(() => windowsForRender.map(getWindowKey), [windowsForRender, getWindowKey]);
+    const draggingExpanded = useMemo(() => {
+        if (!draggingProjectKey)
+            return false;
+        const window = windowsByKey.get(draggingProjectKey);
+        if (!window)
+            return false;
+        return expandedProjects[window.name] ?? false;
+    }, [draggingProjectKey, expandedProjects, windowsByKey]);
+    const setDragDirectionSafe = useCallback((next) => {
+        setDragDirection((prev) => (prev === next ? prev : next));
+    }, []);
+    const softLayoutActive = draggingExpanded || dragDirection === 'up';
+    const handleReorder = useCallback((nextKeys) => {
+        const prev = orderedProjectKeysRef.current;
+        const isSame = prev.length === nextKeys.length && prev.every((value, i) => value === nextKeys[i]);
+        if (isSame)
+            return;
+        setOrderedProjectKeys(nextKeys);
+        orderedProjectKeysRef.current = nextKeys;
+    }, []);
+    useEffect(() => {
+        draggingProjectKeyRef.current = draggingProjectKey;
+    }, [draggingProjectKey]);
+    // Keep UI order in sync with tmux order:
+    // - If user hasn't reordered locally, follow tmux exactly.
+    // - If user has reordered locally, preserve local order but reconcile added/removed windows.
+    useEffect(() => {
+        if (reorderSaving)
+            return;
+        if (draggingProjectKeyRef.current)
+            return;
+        setOrderedProjectKeys((prev) => {
+            if (prev.length === 0) {
+                orderedProjectKeysRef.current = tmuxOrderKeys;
+                lastTmuxOrderKeysRef.current = tmuxOrderKeys;
+                return tmuxOrderKeys;
+            }
+            const lastTmux = lastTmuxOrderKeysRef.current;
+            const prevWasTmux = prev.length === lastTmux.length && prev.every((v, i) => v === lastTmux[i]);
+            const next = prevWasTmux
+                ? tmuxOrderKeys
+                : [
+                    ...prev.filter((k) => tmuxOrderKeys.includes(k)),
+                    ...tmuxOrderKeys.filter((k) => !prev.includes(k)),
+                ];
+            lastTmuxOrderKeysRef.current = tmuxOrderKeys;
+            orderedProjectKeysRef.current = next;
+            if (prev.length === next.length && prev.every((v, i) => v === next[i]))
+                return prev;
+            return next;
+        });
+    }, [tmuxOrderKeys]);
+    const selectProjectView = useCallback((windowKey, windowName, view) => {
+        setSelectedProject(windowKey);
+        setSelectedProjectView(view);
+        setSelectedSessionId(null);
+        setViewMode('windows');
+        setProjectExpanded({ project: windowName, expanded: true });
+    }, [setSelectedProject, setSelectedProjectView, setSelectedSessionId, setViewMode, setProjectExpanded]);
+    useEffect(() => {
+        if (!selectedProject)
+            return;
+        const window = windows.find((w) => getWindowKey(w) === selectedProject);
+        if (!window)
+            return;
+        setProjectExpanded({ project: window.name, expanded: true });
+    }, [selectedProject, setProjectExpanded, windows, getWindowKey]);
+    const commitReorder = useCallback(async () => {
+        const start = orderAtDragStartRef.current;
+        const end = orderedProjectKeysRef.current;
+        if (start.length === end.length && start.every((v, i) => v === end[i]))
+            return;
+        if (reorderSaving)
+            return;
+        const orderIds = [];
+        for (const key of end) {
+            const w = windowsByKey.get(key);
+            if (!w?.id) {
+                toastError('Reorder requires tmux window ids. Restart `agents web --dev`.');
+                return;
+            }
+            orderIds.push(w.id);
+        }
+        setReorderSaving(true);
+        try {
+            await api.reorderTmuxWindowsOrder(orderIds);
+            // Confirm order applied (tmux should be synchronous, but we'll retry briefly).
+            let refreshed = await api.getState();
+            for (let attempt = 0; attempt < 2; attempt++) {
+                const refreshedIds = (refreshed.tmux.windows ?? []).map((w) => w.id);
+                const matches = refreshedIds.length === orderIds.length &&
+                    refreshedIds.every((id, i) => id === orderIds[i]);
+                if (matches)
+                    break;
+                await new Promise((r) => setTimeout(r, 150));
+                refreshed = await api.getState();
+            }
+            const refreshedIds = (refreshed.tmux.windows ?? []).map((w) => w.id);
+            const matches = refreshedIds.length === orderIds.length &&
+                refreshedIds.every((id, i) => id === orderIds[i]);
+            if (!matches)
+                throw new Error('tmux reorder did not apply');
+            setState(refreshed);
+        }
+        catch {
+            toastError('Failed to reorder');
+            // Revert back to current tmux order.
+            setOrderedProjectKeys(tmuxOrderKeys);
+            orderedProjectKeysRef.current = tmuxOrderKeys;
+            lastTmuxOrderKeysRef.current = tmuxOrderKeys;
+            api.getState().then(setState).catch(() => { });
+        }
+        finally {
+            setReorderSaving(false);
+        }
+    }, [setState, windowsByKey, getWindowKey, tmuxOrderKeys, reorderSaving]);
+    const beginDrag = useCallback((windowKey) => {
+        orderAtDragStartRef.current = [...orderedProjectKeysRef.current];
+        frozenWindowsRef.current = windowsRef.current;
+        setDragDirection(null);
+        setDraggingProjectKey(windowKey);
+    }, []);
+    const endDrag = useCallback(() => {
+        frozenWindowsRef.current = null;
+        setDraggingProjectKey(null);
+        setDragDirection(null);
+        commitReorder();
+    }, [commitReorder]);
+    const scrolledRef = useRef(false);
+    const handleScroll = useCallback((event) => {
+        if (!onScrolledChange)
+            return;
+        const scrolled = event.currentTarget.scrollTop > 4;
+        if (scrolled === scrolledRef.current)
+            return;
+        scrolledRef.current = scrolled;
+        onScrolledChange(scrolled);
+    }, [onScrolledChange]);
+    if (windows.length === 0) {
+        return (<div className={cn('flex-1 space-y-0.5 overflow-y-auto p-2', className)}>
+        <p className="px-2 py-8 text-center text-xs text-foreground-tertiary">
+          No tmux windows.
+        </p>
+      </div>);
+    }
+    return (<Reorder.Group axis="y" as="div" values={orderedProjectKeys} onReorder={handleReorder} layoutScroll onScroll={handleScroll} className={cn('flex-1 space-y-0.5 overflow-y-auto p-2', className)}>
+      {orderedProjectKeys.map((windowKey) => {
+            const window = windowsByKey.get(windowKey);
+            if (!window)
+                return null;
+            const expanded = expandedProjects[window.name] ?? false;
+            const menuOpen = openProjectMenu === windowKey;
+            const label = formatTmuxWindowName(window.name);
+            const disabled = draggingProjectKey != null && draggingProjectKey !== windowKey;
+            const projectVisibility = projectItems[window.name];
+            const terminalVisible = projectVisibility?.terminal ?? DEFAULT_PROJECT_SIDEBAR_ITEMS.terminal;
+            const filesVisible = projectVisibility?.files ?? DEFAULT_PROJECT_SIDEBAR_ITEMS.files;
+            const planningVisible = projectVisibility?.planning ?? DEFAULT_PROJECT_SIDEBAR_ITEMS.planning;
+            return (<ProjectRow key={windowKey} tmuxWindow={window} windowKey={windowKey} label={label} expanded={expanded} terminalVisible={terminalVisible} filesVisible={filesVisible} planningVisible={planningVisible} menuOpen={menuOpen} dragging={draggingProjectKey === windowKey} softLayout={softLayoutActive && draggingProjectKey !== windowKey} disabled={disabled} selected={selectedProject === windowKey} selectedView={selectedProjectView} getProjectEmoji={getProjectEmoji} onSelectView={selectProjectView} onExpandedChange={setProjectExpanded} onOpenMenuChange={setOpenProjectMenu} onDragStart={beginDrag} onDragEnd={endDrag} onDragDirectionChange={setDragDirectionSafe} setSidebarItemEnabled={setProjectSidebarItemEnabled}/>);
+        })}
+    </Reorder.Group>);
+}
+const ProjectRow = memo(function ProjectRow({ tmuxWindow, windowKey, label, expanded, terminalVisible, filesVisible, planningVisible, menuOpen, dragging, softLayout, disabled, selected, selectedView, getProjectEmoji, onSelectView, onExpandedChange, onOpenMenuChange, onDragStart, onDragEnd, onDragDirectionChange, setSidebarItemEnabled, }) {
+    const dragControls = useDragControls();
+    const dragStartRef = useRef(null);
+    const didDragRef = useRef(false);
+    const lastDragDirectionRef = useRef(null);
+    const reorderDuration = softLayout ? (expanded ? 0.18 : 0.22) : 0.12;
+    const handleTriggerPointerDown = useCallback((event) => {
+        if (event.button !== 0)
+            return;
+        didDragRef.current = false;
+        dragStartRef.current = {
+            pointerId: event.pointerId,
+            x: event.clientX,
+            y: event.clientY,
+        };
+        try {
+            event.currentTarget.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // no-op
+        }
+    }, []);
+    const handleTriggerPointerMove = useCallback((event) => {
+        const start = dragStartRef.current;
+        if (!start)
+            return;
+        if (start.pointerId !== event.pointerId)
+            return;
+        if (didDragRef.current)
+            return;
+        const dx = event.clientX - start.x;
+        const dy = event.clientY - start.y;
+        if (dx * dx + dy * dy < 16)
+            return; // 4px threshold
+        didDragRef.current = true;
+        dragControls.start(event);
+    }, [dragControls]);
+    const handleTriggerPointerUp = useCallback((event) => {
+        const start = dragStartRef.current;
+        if (!start)
+            return;
+        if (start.pointerId !== event.pointerId)
+            return;
+        dragStartRef.current = null;
+        try {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        catch {
+            // no-op
+        }
+    }, []);
+    const handleTriggerPointerCancel = useCallback(() => {
+        dragStartRef.current = null;
+    }, []);
+    const handleTriggerClickCapture = useCallback((event) => {
+        if (!didDragRef.current)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        didDragRef.current = false;
+    }, []);
+    const projectMenu = (<Menu.Root open={menuOpen} onOpenChange={(open) => onOpenMenuChange(open ? windowKey : null)}>
+      <Menu.Trigger aria-label="Project actions" className={cn('flex h-7 w-7 items-center justify-center', 'cursor-pointer rounded-md outline-none', 'transition-opacity duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', dragging
+            ? 'pointer-events-none opacity-0'
+            : menuOpen
+                ? 'text-foreground'
+                : 'text-foreground-quaternary hover:text-foreground-secondary')} onClick={(e) => e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}>
+        <EllipsisHorizontalIcon className="h-4 w-4"/>
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner sideOffset={8} align="end">
+          <Menu.Popup className={cn('z-50 min-w-[200px] rounded-xl p-1', 'bg-card border border-border shadow-xl', 'outline-none', 'origin-[var(--transform-origin)]', 'transition-[transform,opacity] duration-150', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', 'data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0', 'data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0')}>
+            <HoverProvider>
+              {/* Primary actions */}
+              <Menu.Group>
+                <StickyMenuItem onClick={() => onSelectView(windowKey, tmuxWindow.name, 'terminal')}>
+                  <CubeTransparentIcon className="h-4 w-4 stroke-[1.75]"/>
+                  Open terminal
+                </StickyMenuItem>
+
+                <StickyMenuItem onClick={() => onSelectView(windowKey, tmuxWindow.name, 'files')}>
+                  <Squares2X2Icon className="h-4 w-4 stroke-[1.75]"/>
+                  Open files
+                </StickyMenuItem>
+
+                <StickyMenuItem onClick={() => onSelectView(windowKey, tmuxWindow.name, 'planning')}>
+                  <Bars3BottomLeftIcon className="h-4 w-4 stroke-[1.75]"/>
+                  Open planning
+                </StickyMenuItem>
+              </Menu.Group>
+
+              <Menu.Separator className="my-1 h-px bg-border/50"/>
+
+              {/* External actions */}
+              <Menu.Group>
+                <StickyMenuItem onClick={async () => {
+            try {
+                const { panes } = await api.getTmuxPanes(tmuxWindow.id || windowKey);
+                const path = panes.find((p) => p.active)?.currentPath ?? panes[0]?.currentPath;
+                if (!path)
+                    return;
+                // Open in Finder using the native API
+                globalThis.window.open(`file://${path}`, '_blank');
+            }
+            catch {
+                toastError('Failed to open in Finder');
+            }
+        }}>
+                  <FolderOpenIcon className="h-4 w-4 stroke-[1.75]"/>
+                  Open in Finder
+                </StickyMenuItem>
+
+                <StickyMenuItem onClick={async () => {
+            try {
+                const { panes } = await api.getTmuxPanes(tmuxWindow.id || windowKey);
+                const path = panes.find((p) => p.active)?.currentPath ?? panes[0]?.currentPath;
+                if (!path)
+                    return;
+                // Uses VSCode's URL scheme
+                globalThis.window.open(`vscode://file/${path}`, '_blank');
+            }
+            catch {
+                toastError('Failed to open in VS Code');
+            }
+        }}>
+                  <CodeBracketIcon className="h-4 w-4 stroke-[1.75]"/>
+                  Open in VS Code
+                </StickyMenuItem>
+
+                <StickyMenuItem onClick={async () => {
+            try {
+                const { panes } = await api.getTmuxPanes(tmuxWindow.id || windowKey);
+                const path = panes.find((p) => p.active)?.currentPath ?? panes[0]?.currentPath;
+                if (!path)
+                    return;
+                await navigator.clipboard.writeText(path);
+                toastSuccess('Copied path');
+            }
+            catch {
+                toastError('Failed to copy path');
+            }
+        }}>
+                  <ClipboardIcon className="h-4 w-4 stroke-[1.75]"/>
+                  Copy path
+                </StickyMenuItem>
+              </Menu.Group>
+
+              <Menu.Separator className="my-1 h-px bg-border/50"/>
+
+              {/* View options submenu */}
+              <Menu.SubmenuRoot>
+                <StickySubmenuTrigger>
+                  <span className="flex items-center gap-2.5">
+                    <EyeIcon className="h-4 w-4 stroke-[1.75]"/>
+                    Sidebar views
+                  </span>
+                  <ChevronRightIcon className="h-3.5 w-3.5 text-foreground-quaternary"/>
+                </StickySubmenuTrigger>
+                <Menu.Portal>
+                  <Menu.Positioner sideOffset={2} alignOffset={-4}>
+                    <Menu.Popup className={cn('z-50 min-w-[200px] rounded-xl p-1', 'bg-card border border-border shadow-xl', 'outline-none', 'origin-[var(--transform-origin)]', 'transition-[transform,opacity] duration-150', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', 'data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0', 'data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0')}>
+                      <HoverProvider>
+                        <StickyCheckboxItem checked={filesVisible} onCheckedChange={(checked) => setSidebarItemEnabled({ project: tmuxWindow.name, item: 'files', enabled: checked })}>
+                          <span className="flex items-center gap-2.5">
+                            <Squares2X2Icon className="h-4 w-4 stroke-[1.75]"/>
+                            Files
+                          </span>
+                          <Menu.CheckboxItemIndicator className="text-foreground-secondary">
+                            <CheckIcon className="h-3.5 w-3.5 stroke-[2]"/>
+                          </Menu.CheckboxItemIndicator>
+                        </StickyCheckboxItem>
+
+                        <StickyCheckboxItem checked={terminalVisible} onCheckedChange={(checked) => setSidebarItemEnabled({ project: tmuxWindow.name, item: 'terminal', enabled: checked })}>
+                          <span className="flex items-center gap-2.5">
+                            <CubeTransparentIcon className="h-4 w-4 stroke-[1.75]"/>
+                            Terminal
+                          </span>
+                          <Menu.CheckboxItemIndicator className="text-foreground-secondary">
+                            <CheckIcon className="h-3.5 w-3.5 stroke-[2]"/>
+                          </Menu.CheckboxItemIndicator>
+                        </StickyCheckboxItem>
+
+                        <StickyCheckboxItem checked={planningVisible} onCheckedChange={(checked) => setSidebarItemEnabled({ project: tmuxWindow.name, item: 'planning', enabled: checked })}>
+                          <span className="flex items-center gap-2.5">
+                            <Bars3BottomLeftIcon className="h-4 w-4 stroke-[1.75]"/>
+                            Planning
+                          </span>
+                          <Menu.CheckboxItemIndicator className="text-foreground-secondary">
+                            <CheckIcon className="h-3.5 w-3.5 stroke-[2]"/>
+                          </Menu.CheckboxItemIndicator>
+                        </StickyCheckboxItem>
+                      </HoverProvider>
+                    </Menu.Popup>
+                  </Menu.Positioner>
+                </Menu.Portal>
+              </Menu.SubmenuRoot>
+            </HoverProvider>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>);
+    return (<Reorder.Item as="div" value={windowKey} drag="y" dragControls={dragControls} dragListener={false} layout="position" onDragStart={() => {
+            lastDragDirectionRef.current = null;
+            onOpenMenuChange(null);
+            onDragStart(windowKey);
+        }} onDragEnd={() => {
+            lastDragDirectionRef.current = null;
+            onDragEnd();
+        }} onDrag={(_event, info) => {
+            if (!dragging)
+                return;
+            if (Math.abs(info.offset.y) < 2)
+                return;
+            const direction = info.offset.y < 0 ? 'up' : 'down';
+            if (direction === lastDragDirectionRef.current)
+                return;
+            lastDragDirectionRef.current = direction;
+            onDragDirectionChange(direction);
+        }} whileDrag={{ scale: 1.005 }} dragMomentum={false} dragElastic={0.02} transition={{ duration: reorderDuration, ease: [0.32, 0.72, 0, 1] }} className={cn('relative rounded-[10px] will-change-transform', disabled && 'pointer-events-none')}>
+      <NavGroup label={label} dragging={dragging} leading={<span aria-label="Reorder project" className={cn('flex w-4 shrink-0 items-center justify-center', 'cursor-move', 'text-foreground-quaternary', 'transition-opacity duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', dragging ? 'opacity-0' : menuOpen ? 'opacity-100' : 'opacity-60 group-hover:opacity-100')}>
+            <Bars2Icon className="h-3.5 w-3.5"/>
+          </span>} icon={getProjectEmoji(tmuxWindow.name)} expanded={expanded} onExpandedChange={(next) => onExpandedChange({ project: tmuxWindow.name, expanded: next })} triggerProps={{
+            onPointerDown: handleTriggerPointerDown,
+            onPointerMove: handleTriggerPointerMove,
+            onPointerUp: handleTriggerPointerUp,
+            onPointerCancel: handleTriggerPointerCancel,
+            onClickCapture: handleTriggerClickCapture,
+        }} actions={projectMenu} actionsVisible={menuOpen} className={cn(dragging && 'pointer-events-none')}>
+        <div className="space-y-0.5" onPointerDown={(e) => e.stopPropagation()} onPointerDownCapture={(e) => e.stopPropagation()}>
+          {filesVisible && (<NavItem label="Files" icon={<Squares2X2Icon className="h-4 w-4 stroke-[1.75]"/>} selected={selected && selectedView === 'files'} onClick={() => onSelectView(windowKey, tmuxWindow.name, 'files')}/>)}
+
+          {terminalVisible && (<NavItem label="Terminal" icon={<CubeTransparentIcon className="h-4 w-4 stroke-[1.75]"/>} selected={selected && selectedView === 'terminal'} shortcut={typeof tmuxWindow.index === 'number' && tmuxWindow.index >= 0 && tmuxWindow.index < 9
+                ? ['G', String(tmuxWindow.index + 1)]
+                : undefined} onClick={() => onSelectView(windowKey, tmuxWindow.name, 'terminal')}/>)}
+
+          {planningVisible && (<NavItem label="Planning" icon={<Bars3BottomLeftIcon className="h-4 w-4 stroke-[1.75]"/>} selected={selected && selectedView === 'planning'} onClick={() => onSelectView(windowKey, tmuxWindow.name, 'planning')}/>)}
+        </div>
+      </NavGroup>
+    </Reorder.Item>);
+});

package/dist/web/components/sidebar/sidebar-search.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Search button that opens the command palette.
+ * Pill button styled to match Share/Actions buttons.
+ */
+export declare function SidebarSearch({ dividerVisible }: {
+    dividerVisible?: boolean;
+}): any;

package/dist/web/components/sidebar/sidebar-search.js

@@ -0,0 +1,18 @@
+'use client';
+import { useSetAtom } from 'jotai';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { commandPaletteOpenAtom } from '@/atoms/state';
+import { cn } from '@/lib/utils';
+/**
+ * Search button that opens the command palette.
+ * Pill button styled to match Share/Actions buttons.
+ */
+export function SidebarSearch({ dividerVisible }) {
+    const setCommandPaletteOpen = useSetAtom(commandPaletteOpenAtom);
+    return (<div className={cn('flex h-12 items-center px-2', dividerVisible && 'border-b border-border/60')}>
+      <button onClick={() => setCommandPaletteOpen(true)} className={cn('flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium', 'outline-none transition-colors', 'bg-background-secondary text-foreground-secondary', 'hover:bg-background-tertiary hover:text-foreground')}>
+        <MagnifyingGlassIcon className="h-3.5 w-3.5"/>
+        <span>Search</span>
+      </button>
+    </div>);
+}

package/dist/web/components/sidebar/sidebar-settings.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Settings navigation view (Vercel drill-down pattern).
+ */
+export declare function SidebarSettings(): any;

package/dist/web/components/sidebar/sidebar-settings.js

@@ -0,0 +1,28 @@
+'use client';
+import Link from 'next/link';
+import { useTheme } from 'next-themes';
+import { AdjustmentsHorizontalIcon, CommandLineIcon, InformationCircleIcon, SunIcon, MoonIcon, } from '@heroicons/react/24/outline';
+import { NavItem } from './nav-item';
+const SETTINGS_ITEMS = [
+    { id: 'general', label: 'General', Icon: AdjustmentsHorizontalIcon, href: '/settings' },
+    { id: 'shortcuts', label: 'Keyboard shortcuts', Icon: CommandLineIcon, href: '/shortcuts' },
+    { id: 'about', label: 'About', Icon: InformationCircleIcon, href: '/about' },
+];
+/**
+ * Settings navigation view (Vercel drill-down pattern).
+ */
+export function SidebarSettings() {
+    const { theme, setTheme } = useTheme();
+    const isDark = theme === 'dark';
+    const toggleTheme = () => {
+        setTheme(isDark ? 'light' : 'dark');
+    };
+    return (<div className="space-y-0.5 p-2">
+      {SETTINGS_ITEMS.map((item) => (<Link key={item.id} href={item.href}>
+          <NavItem label={item.label} icon={<item.Icon className="h-4 w-4 stroke-[1.75]"/>}/>
+        </Link>))}
+
+      {/* Theme toggle */}
+      <NavItem label={isDark ? 'Light mode' : 'Dark mode'} icon={isDark ? <SunIcon className="h-4 w-4 stroke-[1.75]"/> : <MoonIcon className="h-4 w-4 stroke-[1.75]"/>} onClick={toggleTheme}/>
+    </div>);
+}

package/dist/web/components/sidebar/sidebar-transition.d.ts

@@ -0,0 +1,12 @@
+interface SidebarTransitionProps {
+    className?: string;
+}
+/**
+ * Animated container for sidebar view transitions using motion.
+ * Renders the appropriate view content and handles smooth transitions.
+ *
+ * Forward (drill in): main exits left, settings enters from right
+ * Back (drill out): settings exits right, main enters from left
+ */
+export declare function SidebarTransition({ className }: SidebarTransitionProps): any;
+export {};

package/dist/web/components/sidebar/sidebar-transition.js

@@ -0,0 +1,58 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { motion, AnimatePresence } from 'motion/react';
+import { Cog6ToothIcon } from '@heroicons/react/24/outline';
+import { sidebarViewAtom, navigationDirectionAtom, pushViewAtom } from '@/atoms/sidebar';
+import { cn } from '@/lib/utils';
+import { SidebarHeader } from './sidebar-header';
+import { SidebarSearch } from './sidebar-search';
+import { SidebarNav } from './sidebar-nav';
+import { SidebarSettings } from './sidebar-settings';
+import { NavItem } from './nav-item';
+const TRANSITION_DURATION = 0.25;
+const EASE = [0.32, 0.72, 0, 1];
+// Separate components to ensure AnimatePresence can properly track them
+function MainView({ navScrolled, onNavScrolledChange, onNavigate, }) {
+    return (<>
+      <SidebarSearch dividerVisible={navScrolled}/>
+      <SidebarNav className="flex-1" onScrolledChange={onNavScrolledChange}/>
+      <div className="border-t border-border px-2 py-2">
+        <NavItem label="Settings" icon={<Cog6ToothIcon className="h-4 w-4 stroke-[1.75]"/>} shortcut={['G', 'S']} onClick={onNavigate}/>
+      </div>
+    </>);
+}
+function SettingsView() {
+    return (<>
+      <SidebarHeader title="Settings"/>
+      <div className="flex-1 overflow-y-auto">
+        <SidebarSettings />
+      </div>
+    </>);
+}
+/**
+ * Animated container for sidebar view transitions using motion.
+ * Renders the appropriate view content and handles smooth transitions.
+ *
+ * Forward (drill in): main exits left, settings enters from right
+ * Back (drill out): settings exits right, main enters from left
+ */
+export function SidebarTransition({ className }) {
+    const view = useAtomValue(sidebarViewAtom);
+    const direction = useAtomValue(navigationDirectionAtom);
+    const pushView = useSetAtom(pushViewAtom);
+    const [navScrolled, setNavScrolled] = useState(false);
+    useEffect(() => {
+        if (view !== 'main')
+            setNavScrolled(false);
+    }, [view]);
+    return (<div className={cn('relative flex-1 overflow-hidden', className)}>
+      <AnimatePresence mode="popLayout" initial={false} custom={direction}>
+        {view === 'main' ? (<motion.div key="main" custom={direction} initial={{ opacity: 0, x: -16, filter: 'blur(6px)' }} animate={{ opacity: 1, x: 0, filter: 'blur(0px)' }} exit={{ opacity: 0, x: -16, filter: 'blur(6px)' }} transition={{ duration: TRANSITION_DURATION, ease: EASE }} className="absolute inset-0 flex flex-col">
+            <MainView navScrolled={navScrolled} onNavScrolledChange={setNavScrolled} onNavigate={() => pushView('settings')}/>
+          </motion.div>) : (<motion.div key="settings" custom={direction} initial={{ opacity: 0, x: 16, filter: 'blur(6px)' }} animate={{ opacity: 1, x: 0, filter: 'blur(0px)' }} exit={{ opacity: 0, x: 16, filter: 'blur(6px)' }} transition={{ duration: TRANSITION_DURATION, ease: EASE }} className="absolute inset-0 flex flex-col">
+            <SettingsView />
+          </motion.div>)}
+      </AnimatePresence>
+    </div>);
+}

package/dist/web/components/status-bar.d.ts

@@ -0,0 +1 @@
+export declare function StatusBar(): any;