@creativeintelligence/abbie 0.1.4 → 0.1.6

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

@@ -1,505 +0,0 @@
-'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

@@ -1,7 +0,0 @@
-/**
- * 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

@@ -1,18 +0,0 @@
-'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

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

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

@@ -1,28 +0,0 @@
-'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

@@ -1,12 +0,0 @@
-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

@@ -1,58 +0,0 @@
-'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

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