@creativeintelligence/abbie 0.1.3 → 0.1.5

package/dist/web/components/session-view.js

@@ -1,211 +0,0 @@
-'use client';
-import { useState } from 'react';
-import { useAtom } from 'jotai';
-import { Tooltip } from '@base-ui-components/react/tooltip';
-import { Robot, Folder, Clock, Hash, Stop, CircleNotch, CheckCircle, XCircle, Terminal, GitBranch, Circle, Copy, ArrowSquareOut, SidebarSimple, } from '@phosphor-icons/react';
-import { cn } from '@/lib/utils';
-import { api } from '@/lib/api';
-import { sidebarCollapsedAtom } from '@/atoms/state';
-import { formatDisplayPath } from '@/lib/paths';
-// Agent color mapping
-const AGENT_COLORS = {
-    claude: { bg: 'bg-agent-claude/15', text: 'text-agent-claude', icon: '🐙' },
-    codex: { bg: 'bg-agent-codex/15', text: 'text-agent-codex', icon: '🦉' },
-    copilot: { bg: 'bg-agent-copilot/15', text: 'text-agent-copilot', icon: '🐕' },
-    gemini: { bg: 'bg-agent-gemini/15', text: 'text-agent-gemini', icon: '🦊' },
-};
-function StatusIndicator({ status }) {
-    const config = {
-        running: { color: 'bg-success', label: 'Running', animate: true },
-        completed: { color: 'bg-success', label: 'Completed', animate: false },
-        failed: { color: 'bg-destructive', label: 'Failed', animate: false },
-        stopped: { color: 'bg-foreground-quaternary', label: 'Stopped', animate: false },
-    }[status];
-    return (<div className="flex items-center gap-2">
-      <span className={cn('h-2 w-2 rounded-full', config.color, config.animate && 'animate-pulse')}/>
-      <span className="text-xs font-medium text-foreground-secondary">{config.label}</span>
-    </div>);
-}
-function InfoCard({ children, className }) {
-    return (<div className={cn('rounded-xl border border-border/60 bg-card/50 p-4', className)}>
-      {children}
-    </div>);
-}
-function DetailItem({ icon, label, value, mono = false, copyable = false }) {
-    const [copied, setCopied] = useState(false);
-    const handleCopy = async () => {
-        await navigator.clipboard.writeText(value);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1500);
-    };
-    return (<div className="flex items-start gap-3 py-2.5 first:pt-0 last:pb-0">
-      <div className="mt-0.5 flex h-5 w-5 items-center justify-center text-foreground-tertiary">
-        {icon}
-      </div>
-      <div className="min-w-0 flex-1">
-        <div className="text-[10px] font-medium uppercase tracking-wider text-foreground-quaternary">
-          {label}
-        </div>
-        <div className="mt-1 flex items-center gap-2">
-          <span className={cn('text-sm text-foreground', mono && 'font-mono text-xs')}>
-            {value}
-          </span>
-          {copyable && (<button onClick={handleCopy} className={cn('flex h-5 w-5 items-center justify-center rounded text-foreground-quaternary', 'outline-none transition-colors duration-150 hover:duration-0', 'hover:bg-background-tertiary hover:text-foreground-secondary', copied && 'text-success')}>
-              {copied ? <CheckCircle className="h-3 w-3" weight="fill"/> : <Copy className="h-3 w-3"/>}
-            </button>)}
-        </div>
-      </div>
-    </div>);
-}
-export function SessionView({ session }) {
-    const [stopping, setStopping] = useState(false);
-    const [sidebarCollapsed, setSidebarCollapsed] = useAtom(sidebarCollapsedAtom);
-    const handleStop = async (force = false) => {
-        setStopping(true);
-        try {
-            await api.stopSession(session.session_id, force);
-        }
-        catch (e) {
-            console.error('Failed to stop session:', e);
-        }
-        finally {
-            setStopping(false);
-        }
-    };
-    const startedAt = new Date(session.started_at);
-    const formattedDate = startedAt.toLocaleDateString('en-US', {
-        weekday: 'short',
-        month: 'short',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: '2-digit',
-    });
-    const duration = Date.now() - startedAt.getTime();
-    const durationStr = duration < 60000
-        ? `${Math.floor(duration / 1000)}s`
-        : duration < 3600000
-            ? `${Math.floor(duration / 60000)}m`
-            : `${Math.floor(duration / 3600000)}h ${Math.floor((duration % 3600000) / 60000)}m`;
-    const agentConfig = AGENT_COLORS[session.agent] || AGENT_COLORS.copilot;
-    return (<div className="relative flex h-full flex-col bg-background">
-      {/* Header with toggle */}
-      <div className="flex h-12 shrink-0 items-center px-4">
-        <Tooltip.Provider delay={300} closeDelay={0}>
-          <Tooltip.Root>
-            <Tooltip.Trigger render={<button onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className={cn('flex h-7 w-7 items-center justify-center rounded-full', 'outline-none', 'bg-background-tertiary text-foreground-secondary', 'hover:bg-background-elevated hover:text-foreground')}>
-                  <SidebarSimple className="h-3.5 w-3.5"/>
-                </button>}/>
-            <Tooltip.Portal>
-              <Tooltip.Positioner side="bottom" sideOffset={6}>
-                <Tooltip.Popup className={cn('z-50 rounded-md px-2 py-1', 'bg-background-secondary border border-border', 'text-xs text-foreground-secondary', 'shadow-lg', 'origin-[var(--transform-origin)]', 'transition-[transform,opacity] duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', 'data-[instant]:duration-0', 'data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0', 'data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0')}>
-                  {sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}
-                </Tooltip.Popup>
-              </Tooltip.Positioner>
-            </Tooltip.Portal>
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      </div>
-
-      {/* Floating header */}
-      <div className="absolute left-4 right-4 top-14 z-20">
-        <div className={cn('flex h-11 items-center justify-between rounded-xl px-3', 'border border-border/60 bg-card/90 shadow-lg backdrop-blur-md')}>
-          {/* Left: Session info */}
-          <div className="flex items-center gap-2.5">
-            <div className={cn('flex h-6 w-6 items-center justify-center rounded-md text-sm', agentConfig.bg)}>
-              {agentConfig.icon}
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="text-sm font-medium text-foreground">{session.project}</span>
-              <span className="text-xs text-foreground-quaternary">·</span>
-              <span className={cn('text-xs font-medium', agentConfig.text)}>{session.agent}</span>
-            </div>
-          </div>
-
-          {/* Right: Status + actions */}
-          <div className="flex items-center gap-3">
-            <StatusIndicator status={session.status}/>
-            {session.status === 'running' && (<>
-                <div className="h-4 w-px bg-border/60"/>
-                <button onClick={() => handleStop()} disabled={stopping} className={cn('flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs font-medium', 'bg-destructive/15 text-destructive', 'outline-none transition-colors duration-150 hover:duration-0 hover:bg-destructive/25')}>
-                  {stopping ? (<CircleNotch className="h-3 w-3 animate-spin"/>) : (<Stop className="h-3 w-3" weight="fill"/>)}
-                  {stopping ? 'Stopping...' : 'Stop'}
-                </button>
-              </>)}
-          </div>
-        </div>
-      </div>
-
-      {/* Content */}
-      <div className="h-full overflow-auto px-4 pb-4 pt-16">
-        <div className="mx-auto max-w-2xl space-y-4">
-          {/* Goal card - prominent */}
-          <InfoCard className="bg-card">
-            <div className="flex items-start gap-3">
-              <div className="mt-1 flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
-                <Robot className="h-4 w-4 text-primary"/>
-              </div>
-              <div className="flex-1">
-                <div className="text-[10px] font-medium uppercase tracking-wider text-foreground-quaternary">
-                  Goal
-                </div>
-                <p className="mt-2 text-sm leading-relaxed text-foreground">
-                  {session.goal}
-                </p>
-              </div>
-            </div>
-          </InfoCard>
-
-          {/* Session details */}
-          <InfoCard>
-            <div className="divide-y divide-border/40">
-              <DetailItem icon={<Hash className="h-4 w-4"/>} label="Session ID" value={session.session_id} mono copyable/>
-              <DetailItem icon={<Folder className="h-4 w-4"/>} label="Working Directory" value={formatDisplayPath(session.cwd)} mono/>
-              <DetailItem icon={<Clock className="h-4 w-4"/>} label="Started" value={`${formattedDate} (${durationStr} ago)`}/>
-              {session.issue && (<DetailItem icon={<GitBranch className="h-4 w-4"/>} label="Linear Issue" value={session.issue} copyable/>)}
-              {session.trace_id && (<DetailItem icon={<Hash className="h-4 w-4"/>} label="Trace ID" value={session.trace_id} mono copyable/>)}
-            </div>
-          </InfoCard>
-
-          {/* Exit status (if completed/failed) */}
-          {session.exit_code !== undefined && (<InfoCard className={cn(session.exit_code === 0 ? 'border-success/30 bg-success/5' : 'border-destructive/30 bg-destructive/5')}>
-              <div className="flex items-center gap-3">
-                {session.exit_code === 0 ? (<CheckCircle className="h-5 w-5 text-success" weight="fill"/>) : (<XCircle className="h-5 w-5 text-destructive" weight="fill"/>)}
-                <div>
-                  <div className="text-sm font-medium text-foreground">
-                    {session.exit_code === 0 ? 'Completed successfully' : 'Exited with error'}
-                  </div>
-                  <div className="text-xs text-foreground-secondary">
-                    Exit code: <code className="font-mono">{session.exit_code}</code>
-                  </div>
-                </div>
-              </div>
-            </InfoCard>)}
-
-          {/* Quick actions */}
-          <div className="flex items-center gap-2 pt-2">
-            <button className={cn('flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium', 'bg-background-tertiary text-foreground-secondary', 'outline-none transition-colors duration-150 hover:duration-0', 'hover:bg-background-elevated hover:text-foreground')}>
-              <Terminal className="h-3.5 w-3.5"/>
-              View Output
-            </button>
-            <button className={cn('flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium', 'bg-background-tertiary text-foreground-secondary', 'outline-none transition-colors duration-150 hover:duration-0', 'hover:bg-background-elevated hover:text-foreground')}>
-              <ArrowSquareOut className="h-3.5 w-3.5"/>
-              Open in VS Code
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Status bar */}
-      <div className="absolute bottom-0 left-0 right-0 flex h-7 items-center justify-between border-t border-border/40 bg-background/90 px-4 text-[10px] backdrop-blur-sm">
-        <div className="flex items-center gap-3 text-foreground-quaternary">
-          <span>PID: <code className="font-mono">{session.pid}</code></span>
-        </div>
-        <div className="flex items-center gap-2 text-foreground-quaternary">
-          {session.status === 'running' && (<span className="flex items-center gap-1.5">
-              <Circle className="h-1.5 w-1.5 animate-pulse text-success" weight="fill"/>
-              Active
-            </span>)}
-        </div>
-      </div>
-    </div>);
-}

package/dist/web/components/sessions-list-view.d.ts

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

package/dist/web/components/sessions-list-view.js

@@ -1,118 +0,0 @@
-'use client';
-import { useMemo, useState } from 'react';
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { Tooltip } from '@base-ui-components/react/tooltip';
-import { Circle, MagnifyingGlass, SidebarSimple, } from '@phosphor-icons/react';
-import { cn } from '@/lib/utils';
-import { formatDisplayPath } from '@/lib/paths';
-import { projectsAtom, selectedProjectAtom, selectedSessionIdAtom, sessionsAtom, sidebarCollapsedAtom, } from '@/atoms/state';
-function formatTime(iso) {
-    const date = new Date(iso);
-    return date.toLocaleTimeString('en-US', {
-        hour: 'numeric',
-        minute: '2-digit',
-    });
-}
-export function SessionsListView() {
-    const sessions = useAtomValue(sessionsAtom);
-    const projects = useAtomValue(projectsAtom);
-    const setSelectedSessionId = useSetAtom(selectedSessionIdAtom);
-    const setSelectedProject = useSetAtom(selectedProjectAtom);
-    const [sidebarCollapsed, setSidebarCollapsed] = useAtom(sidebarCollapsedAtom);
-    const [query, setQuery] = useState('');
-    const filtered = useMemo(() => {
-        const q = query.trim().toLowerCase();
-        const items = [...sessions].sort((a, b) => b.started_at.localeCompare(a.started_at));
-        if (!q)
-            return items;
-        return items.filter((s) => {
-            return (s.project.toLowerCase().includes(q) ||
-                s.goal.toLowerCase().includes(q) ||
-                s.agent.toLowerCase().includes(q) ||
-                (s.issue ?? '').toLowerCase().includes(q));
-        });
-    }, [sessions, query]);
-    return (<div className="flex h-full flex-col bg-background-secondary">
-      {/* Header */}
-      <div className="grid h-12 shrink-0 grid-cols-[1fr_auto_1fr] items-center px-4">
-        <Tooltip.Provider delay={300} closeDelay={0}>
-          <div className="flex items-center justify-start gap-1.5">
-            <Tooltip.Root>
-              <Tooltip.Trigger render={<button onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className={cn('flex h-7 w-7 items-center justify-center rounded-full', 'outline-none', 'bg-background-tertiary text-foreground-secondary', 'hover:bg-background-elevated hover:text-foreground')}>
-                    <SidebarSimple className="h-3.5 w-3.5"/>
-                  </button>}/>
-              <Tooltip.Portal>
-                <Tooltip.Positioner side="bottom" sideOffset={6}>
-                  <Tooltip.Popup className={cn('z-50 rounded-md px-2 py-1', 'bg-background-secondary border border-border', 'text-xs text-foreground-secondary', 'shadow-lg', 'origin-[var(--transform-origin)]', 'transition-[transform,opacity] duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', 'data-[instant]:duration-0', 'data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0', 'data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0')}>
-                    {sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}
-                  </Tooltip.Popup>
-                </Tooltip.Positioner>
-              </Tooltip.Portal>
-            </Tooltip.Root>
-          </div>
-        </Tooltip.Provider>
-
-        <span className="text-sm font-medium text-foreground">Sessions</span>
-        <div />
-      </div>
-
-      {/* Search */}
-      <div className="px-4 pb-3">
-        <div className={cn('flex items-center gap-2 rounded-full px-3 py-2', 'bg-background-tertiary text-foreground-secondary', 'border border-border/60')}>
-          <MagnifyingGlass className="h-4 w-4 text-foreground-tertiary"/>
-          <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search sessions…" className={cn('w-full bg-transparent text-sm text-foreground outline-none', 'placeholder:text-foreground-quaternary')}/>
-        </div>
-      </div>
-
-      {/* List */}
-      <div className="flex-1 overflow-y-auto px-3 pb-4">
-        {filtered.length === 0 ? (<div className="px-4 py-10 text-center text-sm text-foreground-tertiary">
-            No sessions found.
-          </div>) : (<div className="space-y-1">
-            {filtered.map((session) => {
-                const emoji = projects.projects[session.project]?.emoji ?? projects.defaultEmoji;
-                const running = session.status === 'running';
-                const cwd = formatDisplayPath(session.cwd);
-                return (<button key={session.session_id} onClick={() => {
-                        setSelectedProject(null);
-                        setSelectedSessionId(session.session_id);
-                    }} className={cn('w-full rounded-2xl px-4 py-3 text-left', 'outline-none', 'bg-background-tertiary/40 hover:bg-background-tertiary', 'transition-colors duration-150 hover:duration-0')}>
-                  <div className="flex items-center gap-3">
-                    <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-background-secondary text-lg">
-                      {emoji}
-                    </div>
-
-                    <div className="min-w-0 flex-1">
-                      <div className="truncate text-sm font-medium text-foreground">
-                        {session.goal || session.project}
-                      </div>
-
-                      <div className="mt-1 flex items-center justify-between gap-3">
-                        <div className="min-w-0 truncate text-xs text-foreground-tertiary">
-                          {cwd}
-                        </div>
-                        <div className="shrink-0 text-xs text-foreground-tertiary">
-                          {formatTime(session.started_at)}
-                        </div>
-                      </div>
-
-                      <div className="mt-1 flex items-center justify-between gap-3">
-                        <div className="truncate text-[11px] text-foreground-quaternary">
-                          {session.project} · {session.agent}
-                          {session.issue ? ` · ${session.issue}` : ''}
-                        </div>
-                        <div className="shrink-0 flex items-center gap-1.5">
-                          <Circle weight="fill" className={cn('h-2 w-2', running ? 'text-success' : 'text-foreground-quaternary')}/>
-                          <span className="text-[11px] text-foreground-quaternary">
-                            {running ? 'Running' : session.status}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </button>);
-            })}
-          </div>)}
-      </div>
-    </div>);
-}

package/dist/web/components/sidebar/index.d.ts

@@ -1,9 +0,0 @@
-/**
- * Main sidebar component combining:
- * - Linear-style accordion navigation (projects expand to show sessions)
- * - Vercel-style drill-down for settings (blur + slide transitions)
- * - When collapsed, completely unmounts (toggle lives in main header)
- *
- * All list interactions are instant (0ms) for responsive feel.
- */
-export declare function Sidebar(): any;

package/dist/web/components/sidebar/index.js

@@ -1,29 +0,0 @@
-'use client';
-import { useRef } from 'react';
-import { useAtomValue } from 'jotai';
-import { Tooltip } from '@base-ui-components/react/tooltip';
-import { cn } from '@/lib/utils';
-import { sidebarCollapsedAtom } from '@/atoms/state';
-import { SidebarTransition } from './sidebar-transition';
-const SIDEBAR_WIDTH = 260;
-/**
- * Main sidebar component combining:
- * - Linear-style accordion navigation (projects expand to show sessions)
- * - Vercel-style drill-down for settings (blur + slide transitions)
- * - When collapsed, completely unmounts (toggle lives in main header)
- *
- * All list interactions are instant (0ms) for responsive feel.
- */
-export function Sidebar() {
-    const collapsed = useAtomValue(sidebarCollapsedAtom);
-    const sidebarRef = useRef(null);
-    // Don't render sidebar at all when collapsed
-    if (collapsed) {
-        return null;
-    }
-    return (<Tooltip.Provider delay={300} closeDelay={0}>
-      <aside ref={sidebarRef} style={{ width: SIDEBAR_WIDTH }} className={cn('relative flex h-full shrink-0 flex-col border-r border-border bg-background')}>
-        <SidebarTransition />
-      </aside>
-    </Tooltip.Provider>);
-}

package/dist/web/components/sidebar/kbd.d.ts

@@ -1,17 +0,0 @@
-interface KbdProps {
-    children: React.ReactNode;
-    className?: string;
-}
-/**
- * Keyboard shortcut display component.
- * Renders keyboard shortcuts in Linear's style: "G then S"
- * Always uppercase like Linear.
- */
-export declare function Kbd({ children, className }: KbdProps): any;
-/**
- * Compound keyboard shortcut (e.g., "G then S")
- */
-export declare function KbdSequence({ keys }: {
-    keys: string[];
-}): any;
-export {};

package/dist/web/components/sidebar/kbd.js

@@ -1,47 +0,0 @@
-'use client';
-import { cn } from '@/lib/utils';
-/**
- * Keyboard shortcut display component.
- * Renders keyboard shortcuts in Linear's style: "G then S"
- * Always uppercase like Linear.
- */
-export function Kbd({ children, className }) {
-    // Normalize key display: uppercase, and common aliases
-    const normalizeKey = (key) => {
-        if (typeof key !== 'string')
-            return key;
-        const aliases = {
-            escape: 'Esc',
-            esc: 'Esc',
-            enter: 'Enter',
-            return: 'Enter',
-            space: 'Space',
-            tab: 'Tab',
-            backspace: 'Backspace',
-            delete: 'Del',
-            arrowup: '↑',
-            arrowdown: '↓',
-            arrowleft: '←',
-            arrowright: '→',
-        };
-        const lower = key.toLowerCase();
-        if (aliases[lower])
-            return aliases[lower];
-        // Single chars uppercase, multi-char capitalize first
-        return key.length === 1 ? key.toUpperCase() : key;
-    };
-    return (<kbd className={cn('inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5', 'bg-background-elevated border border-border/60', 'font-mono text-[10px] text-foreground-tertiary', className)}>
-      {normalizeKey(children)}
-    </kbd>);
-}
-/**
- * Compound keyboard shortcut (e.g., "G then S")
- */
-export function KbdSequence({ keys }) {
-    return (<span className="inline-flex items-center gap-1">
-      {keys.map((key, i) => (<span key={i} className="inline-flex items-center gap-1">
-          <Kbd>{key}</Kbd>
-          {i < keys.length - 1 && (<span className="text-[10px] text-foreground-quaternary">then</span>)}
-        </span>))}
-    </span>);
-}

package/dist/web/components/sidebar/nav-group.d.ts

@@ -1,22 +0,0 @@
-import { Collapsible } from '@base-ui-components/react/collapsible';
-interface NavGroupProps {
-    label: string;
-    leading?: React.ReactNode;
-    icon?: React.ReactNode;
-    expanded: boolean;
-    onExpandedChange: (expanded: boolean) => void;
-    triggerProps?: Omit<React.ComponentPropsWithoutRef<typeof Collapsible.Trigger>, 'className' | 'children'>;
-    dragging?: boolean;
-    actions?: React.ReactNode;
-    actionsVisible?: boolean;
-    children: React.ReactNode;
-    className?: string;
-}
-/**
- * Collapsible navigation group (Linear accordion pattern).
- * Uses Base UI Collapsible for accessibility.
- *
- * Expansion is instant (list-item UX).
- */
-export declare function NavGroup({ label, leading, icon, expanded, onExpandedChange, triggerProps, dragging, actions, actionsVisible, children, className, }: NavGroupProps): any;
-export {};

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

@@ -1,43 +0,0 @@
-'use client';
-import { Collapsible } from '@base-ui-components/react/collapsible';
-import { ChevronDownIcon } from '@heroicons/react/24/outline';
-import { cn } from '@/lib/utils';
-/**
- * Collapsible navigation group (Linear accordion pattern).
- * Uses Base UI Collapsible for accessibility.
- *
- * Expansion is instant (list-item UX).
- */
-export function NavGroup({ label, leading, icon, expanded, onExpandedChange, triggerProps, dragging, actions, actionsVisible, children, className, }) {
-    const headerActive = expanded || actionsVisible;
-    const contentOpacity = dragging ? 'opacity-70' : 'opacity-100';
-    return (<Collapsible.Root open={expanded} onOpenChange={onExpandedChange} className={className}>
-      <div className={cn('group flex items-center', headerActive ? 'text-foreground' : 'text-foreground-secondary', 'hover:text-foreground')}>
-        <Collapsible.Trigger {...triggerProps} className={cn('flex h-7 flex-1 items-center gap-1.5 py-0 pl-2 pr-2 text-left text-sm', 'cursor-grab select-none outline-none transition-none active:cursor-grabbing', dragging && 'cursor-grabbing')}>
-          {leading && (<span className={cn('shrink-0 transition-opacity duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', dragging ? 'opacity-0' : 'opacity-100')} aria-hidden={dragging ? true : undefined}>
-              {leading}
-            </span>)}
-
-          {/* Fixed-width icon container for stable positioning */}
-          <span className={cn('flex w-5 shrink-0 items-center text-base leading-none', 'transition-opacity duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', contentOpacity)}>
-            {icon}
-          </span>
-          <div className={cn('min-w-0 flex items-center gap-1', 'transition-opacity duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', contentOpacity)}>
-            <span className="truncate font-medium">{label}</span>
-            <ChevronDownIcon className={cn('h-3.5 w-3.5 text-foreground-tertiary', 'transition-opacity duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', !expanded && '-rotate-90', dragging ? 'opacity-0' : 'opacity-100')}/>
-          </div>
-
-          <span className="flex-1"/>
-        </Collapsible.Trigger>
-
-        {actions && (<div className={cn('shrink-0 pr-2', 'transition-opacity duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', dragging ? 'pointer-events-none opacity-0' : 'opacity-100')}>
-            {actions}
-          </div>)}
-      </div>
-      <Collapsible.Panel data-collapsible-panel data-state={expanded ? 'open' : 'closed'} className={cn('grid overflow-hidden', 'transition-[grid-template-rows,opacity] duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', dragging ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100')}>
-        <div className="overflow-hidden">
-          <div className="py-1 pl-6 pr-2">{children}</div>
-        </div>
-      </Collapsible.Panel>
-    </Collapsible.Root>);
-}

package/dist/web/components/sidebar/nav-item.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-interface NavItemProps {
-    label: string;
-    icon?: React.ReactNode;
-    shortcut?: string[];
-    selected?: boolean;
-    active?: boolean;
-    onClick?: () => void;
-    className?: string;
-    children?: React.ReactNode;
-}
-/**
- * Single navigation item with optional keyboard shortcut in tooltip.
- * Uses Base UI Tooltip for proper positioning and accessibility.
- */
-export declare function NavItem({ label, icon, shortcut, selected, active, onClick, className, children, }: NavItemProps): any;
-export {};

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

@@ -1,38 +0,0 @@
-'use client';
-import * as React from 'react';
-import { Tooltip } from '@base-ui-components/react/tooltip';
-import { cn } from '@/lib/utils';
-/**
- * Single navigation item with optional keyboard shortcut in tooltip.
- * Uses Base UI Tooltip for proper positioning and accessibility.
- */
-export function NavItem({ label, icon, shortcut, selected, active, onClick, className, children, }) {
-    const button = (<button onClick={onClick} data-selected={selected || undefined} data-active={active || undefined} className={cn('flex h-7 w-full items-center gap-2 rounded-[8px] py-0 pl-3 pr-2 text-left text-sm', 'cursor-pointer outline-none transition-none', selected
-            ? 'bg-background-secondary text-foreground'
-            : 'text-foreground-secondary hover:bg-background-secondary hover:text-foreground', active && !selected && 'text-foreground', className)}>
-      {/* Fixed-width icon container for stable positioning */}
-      <span className="flex w-5 shrink-0 items-center text-base leading-none">
-        {icon}
-      </span>
-      <span className="flex-1 truncate">{label}</span>
-      {children}
-    </button>);
-    if (!shortcut) {
-        return button;
-    }
-    return (<Tooltip.Root>
-      <Tooltip.Trigger render={button}/>
-      <Tooltip.Portal>
-        <Tooltip.Positioner side="right" sideOffset={8}>
-          <Tooltip.Popup className={cn('z-50 flex items-center gap-1.5 rounded-md px-2 py-1', 'bg-background-secondary border border-border', 'text-xs text-foreground-secondary', 'shadow-lg', 'origin-[var(--transform-origin)]', 'transition-[transform,opacity] duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', 'data-[instant]:duration-0', 'data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0', 'data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0')}>
-            {shortcut.map((key, i) => (<React.Fragment key={i}>
-                {i > 0 && <span className="text-foreground-tertiary">then</span>}
-                <kbd className="inline-flex h-5 min-w-5 items-center justify-center rounded bg-background-tertiary px-1 font-mono text-[11px] font-medium text-foreground">
-                  {key}
-                </kbd>
-              </React.Fragment>))}
-          </Tooltip.Popup>
-        </Tooltip.Positioner>
-      </Tooltip.Portal>
-    </Tooltip.Root>);
-}

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

@@ -1,9 +0,0 @@
-interface SidebarHeaderProps {
-    title: string;
-}
-/**
- * Sidebar header with back button for drilled sub-views.
- * Always renders - parent AnimatePresence handles exit animation.
- */
-export declare function SidebarHeader({ title }: SidebarHeaderProps): any;
-export {};

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

@@ -1,18 +0,0 @@
-'use client';
-import { useSetAtom } from 'jotai';
-import { ChevronLeftIcon } from '@heroicons/react/24/outline';
-import { popViewAtom } from '@/atoms/sidebar';
-import { cn } from '@/lib/utils';
-/**
- * Sidebar header with back button for drilled sub-views.
- * Always renders - parent AnimatePresence handles exit animation.
- */
-export function SidebarHeader({ title }) {
-    const popView = useSetAtom(popViewAtom);
-    return (<div className="flex h-12 items-center px-2">
-      <button onClick={() => popView()} className={cn('flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium', 'outline-none transition-colors duration-150 hover:duration-0', 'bg-background-secondary text-foreground-secondary', 'hover:bg-background-tertiary hover:text-foreground')}>
-        <ChevronLeftIcon className="h-3.5 w-3.5"/>
-        <span>{title}</span>
-      </button>
-    </div>);
-}

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

@@ -1,7 +0,0 @@
-/**
- * Main navigation - project list (tmux windows) with expandable sections.
- */
-export declare function SidebarNav({ className, onScrolledChange, }: {
-    className?: string;
-    onScrolledChange?: (scrolled: boolean) => void;
-}): any;