@creativeintelligence/abbie 0.1.0

package/dist/web/components/command-palette.js

@@ -0,0 +1,297 @@
+'use client';
+import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useRouter } from 'next/navigation';
+import { AnimatePresence, motion } from 'motion/react';
+import { EyeIcon, AdjustmentsHorizontalIcon, CommandLineIcon, InformationCircleIcon, } from '@heroicons/react/24/outline';
+import { cn } from '@/lib/utils';
+import { formatTmuxWindowName } from '@/lib/paths';
+import { sessionsAtom, tmuxWindowsAtom, selectedWindowAtom, selectedSessionIdAtom, viewModeAtom, sidebarCollapsedAtom, projectsAtom, } from '@/atoms/state';
+import { pushViewAtom } from '@/atoms/sidebar';
+import { Kbd } from './sidebar/kbd';
+export function CommandPalette({ open, onOpenChange }) {
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const [query, setQuery] = useState('');
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const router = useRouter();
+    const windows = useAtomValue(tmuxWindowsAtom);
+    const sessions = useAtomValue(sessionsAtom);
+    const projects = useAtomValue(projectsAtom);
+    const setSelectedWindow = useSetAtom(selectedWindowAtom);
+    const setSelectedSessionId = useSetAtom(selectedSessionIdAtom);
+    const setViewMode = useSetAtom(viewModeAtom);
+    const setSidebarCollapsed = useSetAtom(sidebarCollapsedAtom);
+    const pushView = useSetAtom(pushViewAtom);
+    const getProjectEmoji = (name) => {
+        return projects.projects[name]?.emoji ?? projects.defaultEmoji;
+    };
+    // Build command items - Actions first, then Settings, then Windows
+    const allItems = useMemo(() => {
+        const items = [];
+        // Actions first
+        items.push({
+            id: 'action:toggle-sidebar',
+            label: 'Toggle Sidebar',
+            category: 'action',
+            icon: <EyeIcon className="h-4 w-4"/>,
+            keywords: ['sidebar', 'toggle', 'hide', 'show'],
+            shortcut: '⌘ B',
+            onSelect: () => {
+                setSidebarCollapsed((prev) => !prev);
+                onOpenChange(false);
+            },
+        });
+        items.push({
+            id: 'action:view-sessions',
+            label: 'View Sessions',
+            category: 'action',
+            icon: <EyeIcon className="h-4 w-4"/>,
+            keywords: ['sessions', 'runs', 'agents', 'history'],
+            shortcut: '2',
+            onSelect: () => {
+                setViewMode('sessions');
+                onOpenChange(false);
+            },
+        });
+        // Settings items
+        items.push({
+            id: 'settings:open',
+            label: 'Settings',
+            category: 'settings',
+            icon: <AdjustmentsHorizontalIcon className="h-4 w-4"/>,
+            keywords: ['settings', 'preferences', 'config'],
+            shortcut: 'G S',
+            onSelect: () => {
+                pushView('settings');
+                onOpenChange(false);
+            },
+        });
+        items.push({
+            id: 'settings:general',
+            label: 'General Settings',
+            category: 'settings',
+            icon: <AdjustmentsHorizontalIcon className="h-4 w-4"/>,
+            keywords: ['settings', 'general', 'preferences'],
+            onSelect: () => {
+                router.push('/settings');
+                onOpenChange(false);
+            },
+        });
+        items.push({
+            id: 'settings:shortcuts',
+            label: 'Keyboard Shortcuts',
+            category: 'settings',
+            icon: <CommandLineIcon className="h-4 w-4"/>,
+            keywords: ['keyboard', 'shortcuts', 'keys', 'bindings', 'hotkeys'],
+            onSelect: () => {
+                router.push('/shortcuts');
+                onOpenChange(false);
+            },
+        });
+        items.push({
+            id: 'settings:about',
+            label: 'About',
+            category: 'settings',
+            icon: <InformationCircleIcon className="h-4 w-4"/>,
+            keywords: ['about', 'info', 'version'],
+            onSelect: () => {
+                router.push('/about');
+                onOpenChange(false);
+            },
+        });
+        // Windows
+        windows.forEach((window) => {
+            const windowKey = window.id || (Number.isFinite(window.index) ? String(window.index) : window.name);
+            const label = formatTmuxWindowName(window.name);
+            items.push({
+                id: `window:${windowKey}`,
+                label,
+                category: 'window',
+                icon: <span className="text-base leading-none">{getProjectEmoji(window.name)}</span>,
+                keywords: ['tmux', 'window', 'pane', window.name.toLowerCase(), label.toLowerCase()],
+                onSelect: () => {
+                    setSelectedWindow(windowKey);
+                    setSelectedSessionId(null);
+                    setViewMode('windows');
+                    onOpenChange(false);
+                },
+            });
+        });
+        // Sessions
+        sessions.forEach((session) => {
+            items.push({
+                id: `session:${session.session_id}`,
+                label: session.goal || `${session.project} (${session.agent})`,
+                category: 'session',
+                icon: <span className="text-base leading-none">{getProjectEmoji(session.project)}</span>,
+                keywords: [
+                    'session',
+                    'agent',
+                    'run',
+                    session.project.toLowerCase(),
+                    session.agent.toLowerCase(),
+                    session.goal.toLowerCase(),
+                    session.issue?.toLowerCase() ?? '',
+                ].filter(Boolean),
+                onSelect: () => {
+                    setSelectedSessionId(session.session_id);
+                    setSelectedWindow(null);
+                    setViewMode('sessions');
+                    onOpenChange(false);
+                },
+            });
+        });
+        return items;
+    }, [
+        windows,
+        sessions,
+        projects,
+        router,
+        setSelectedWindow,
+        setSelectedSessionId,
+        setViewMode,
+        setSidebarCollapsed,
+        pushView,
+        onOpenChange,
+    ]);
+    // Filter items based on query
+    const filteredItems = useMemo(() => {
+        if (!query.trim())
+            return allItems;
+        const lowerQuery = query.toLowerCase();
+        return allItems.filter((item) => {
+            if (item.label.toLowerCase().includes(lowerQuery))
+                return true;
+            if (item.keywords.some((k) => k.toLowerCase().includes(lowerQuery)))
+                return true;
+            return false;
+        });
+    }, [allItems, query]);
+    // Group filtered items by category - Actions first
+    const groupedItems = useMemo(() => {
+        const groups = [
+            { category: 'action', label: 'Actions', items: [] },
+            { category: 'settings', label: 'Settings', items: [] },
+            { category: 'session', label: 'Sessions', items: [] },
+            { category: 'window', label: 'Windows', items: [] },
+        ];
+        filteredItems.forEach((item) => {
+            const group = groups.find((g) => g.category === item.category);
+            if (group)
+                group.items.push(item);
+        });
+        return groups.filter((g) => g.items.length > 0);
+    }, [filteredItems]);
+    // Reset state when dialog opens
+    useEffect(() => {
+        if (open) {
+            setQuery('');
+            setSelectedIndex(0);
+            const timer = setTimeout(() => inputRef.current?.focus(), 50);
+            return () => clearTimeout(timer);
+        }
+    }, [open]);
+    // Reset selection when query changes
+    useEffect(() => {
+        setSelectedIndex(0);
+    }, [query]);
+    // Handle keyboard navigation
+    const handleKeyDown = useCallback((e) => {
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setSelectedIndex((i) => Math.min(i + 1, filteredItems.length - 1));
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setSelectedIndex((i) => Math.max(i - 1, 0));
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (filteredItems[selectedIndex]) {
+                    filteredItems[selectedIndex].onSelect();
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                onOpenChange(false);
+                break;
+        }
+    }, [filteredItems, selectedIndex, onOpenChange]);
+    // Scroll selected item into view
+    useEffect(() => {
+        const listEl = listRef.current;
+        if (!listEl)
+            return;
+        const selectedEl = listEl.querySelector('[data-selected="true"]');
+        if (selectedEl) {
+            selectedEl.scrollIntoView({ block: 'nearest' });
+        }
+    }, [selectedIndex]);
+    // Flatten items for index tracking
+    let currentIndex = -1;
+    // Close on escape
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape')
+                onOpenChange(false);
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [open, onOpenChange]);
+    return (<AnimatePresence>
+      {open && (<>
+          {/* Backdrop */}
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15, ease: [0.32, 0.72, 0, 1] }} onClick={() => onOpenChange(false)} className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm"/>
+
+          {/* Modal */}
+          <motion.div initial={{ opacity: 0, scale: 0.96, y: -8, filter: 'blur(4px)' }} animate={{ opacity: 1, scale: 1, y: 0, filter: 'blur(0px)' }} exit={{ opacity: 0, scale: 0.96, y: -8, filter: 'blur(4px)' }} transition={{ duration: 0.2, ease: [0.32, 0.72, 0, 1] }} className={cn('fixed left-1/2 top-[15%] z-50 w-full max-w-lg -translate-x-1/2', 'rounded-lg border border-border/60 bg-background-secondary shadow-2xl', 'outline-none')}>
+            {/* Search input */}
+            <div className="flex items-center gap-3 border-b border-border px-3 py-2.5">
+              <input ref={inputRef} type="text" value={query} onChange={(e) => setQuery(e.target.value)} onKeyDown={handleKeyDown} placeholder="Search..." className="flex-1 bg-transparent text-sm text-foreground outline-none ring-0 focus:outline-none focus:ring-0 placeholder:text-foreground-tertiary"/>
+              <Kbd>Esc</Kbd>
+            </div>
+
+            {/* Results */}
+            <div ref={listRef} className="max-h-80 overflow-y-auto p-2">
+              {filteredItems.length === 0 ? (<div className="px-3 py-8 text-center text-sm text-foreground-tertiary">
+                  No results found.
+                </div>) : (groupedItems.map((group) => (<div key={group.category} className="mb-2">
+                    <div className="px-3 py-1.5 text-xs font-medium uppercase tracking-wider text-foreground-tertiary">
+                      {group.label}
+                    </div>
+                    {group.items.map((item) => {
+                    currentIndex++;
+                    const isSelected = currentIndex === selectedIndex;
+                    const itemIndex = currentIndex;
+                    return (<button key={item.id} data-selected={isSelected} onClick={() => item.onSelect()} onMouseEnter={() => setSelectedIndex(itemIndex)} className={cn('flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm', 'outline-none', isSelected
+                            ? 'bg-background-tertiary text-foreground'
+                            : 'text-foreground-secondary hover:bg-background-secondary hover:text-foreground')}>
+                          <span className="text-foreground-tertiary">{item.icon}</span>
+                          <span className="flex-1 truncate">{item.label}</span>
+                          {item.shortcut && (<Kbd className="hidden sm:inline-flex">{item.shortcut}</Kbd>)}
+                        </button>);
+                })}
+                  </div>)))}
+            </div>
+
+            {/* Footer */}
+            <div className="flex items-center border-t border-border px-3 py-2.5 text-xs text-foreground-tertiary">
+              <div className="flex items-center gap-4">
+                <span className="flex items-center gap-2">
+                  <Kbd>↑↓</Kbd>
+                  Navigate
+                </span>
+                <span className="flex items-center gap-2">
+                  <Kbd>↵</Kbd>
+                  Select
+                </span>
+              </div>
+            </div>
+          </motion.div>
+        </>)}
+    </AnimatePresence>);
+}

package/dist/web/components/main-view.d.ts

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

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

@@ -0,0 +1,93 @@
+'use client';
+import { useAtom, useAtomValue } from 'jotai';
+import { Balancer } from 'react-wrap-balancer';
+import { Tooltip } from '@base-ui-components/react/tooltip';
+import { Bars3Icon } from '@heroicons/react/24/outline';
+import { selectedProjectAtom, selectedProjectViewAtom, selectedSessionAtom, sidebarCollapsedAtom, tmuxWindowsAtom, viewModeAtom, } from '@/atoms/state';
+import { PaneView } from './pane-view';
+import { SessionView } from './session-view';
+import { SessionsListView } from './sessions-list-view';
+import { Kbd } from './sidebar/kbd';
+import { cn } from '@/lib/utils';
+import { ProjectFilesView } from './project-files-view';
+import { ProjectPlanningView } from './project-planning-view';
+import { formatTmuxWindowName } from '@/lib/paths';
+export function MainView() {
+    const viewMode = useAtomValue(viewModeAtom);
+    const selectedProject = useAtomValue(selectedProjectAtom);
+    const selectedProjectView = useAtomValue(selectedProjectViewAtom);
+    const selectedSession = useAtomValue(selectedSessionAtom);
+    const windows = useAtomValue(tmuxWindowsAtom);
+    const selectedWindow = selectedProject
+        ? windows.find((w) => w.id === selectedProject ||
+            String(w.index) === selectedProject ||
+            w.name === selectedProject) ?? null
+        : null;
+    return (<main className="flex flex-1 flex-col overflow-hidden bg-background-secondary">
+      {selectedSession ? (<SessionView session={selectedSession}/>) : viewMode === 'sessions' ? (<SessionsListView />) : selectedProject ? (selectedWindow ? (selectedProjectView === 'terminal' ? (<PaneView windowKey={selectedProject}/>) : selectedProjectView === 'files' ? (<ProjectFilesView windowId={selectedProject} label={formatTmuxWindowName(selectedWindow.name)}/>) : (<ProjectPlanningView projectName={selectedWindow.name} label={formatTmuxWindowName(selectedWindow.name)}/>)) : (<EmptyState />)) : (<EmptyState />)}
+    </main>);
+}
+function EmptyState() {
+    const [sidebarCollapsed, setSidebarCollapsed] = useAtom(sidebarCollapsedAtom);
+    return (<div className="flex h-full flex-col">
+      {/* Header with sidebar 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')}>
+                  <Bars3Icon 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>
+
+      {/* Content */}
+      <div className="flex flex-1 items-center justify-center p-4">
+        <div className="flex max-w-sm flex-col items-center gap-6 text-center">
+          {/* Icon with subtle glow */}
+          <div className="relative">
+            <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-background-tertiary">
+              <span className="text-4xl">🐙</span>
+            </div>
+            <div className="absolute inset-0 -z-10 rounded-2xl bg-primary/10 blur-xl"/>
+          </div>
+
+          {/* Text */}
+          <div className="space-y-2">
+            <h2 className="text-lg font-medium text-foreground">No selection</h2>
+            <p className="text-sm text-foreground-tertiary">
+              <Balancer>
+                Select a tmux window or agent session from the sidebar.
+              </Balancer>
+            </p>
+          </div>
+
+          {/* Keyboard hints */}
+          <div className="flex flex-wrap items-center justify-center gap-3 text-xs text-foreground-quaternary">
+            <span className="flex items-center gap-1.5">
+              <Kbd>J</Kbd>
+              <Kbd>K</Kbd>
+              <span>Navigate</span>
+            </span>
+            <span className="h-3 w-px bg-border"/>
+            <span className="flex items-center gap-1.5">
+              <Kbd>/</Kbd>
+              <span>Search</span>
+            </span>
+            <span className="h-3 w-px bg-border"/>
+            <span className="flex items-center gap-1.5">
+              <Kbd>Esc</Kbd>
+              <span>Deselect</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>);
+}

package/dist/web/components/overlay/page-overlay.d.ts

@@ -0,0 +1,16 @@
+interface PageOverlayProps {
+    title: string;
+    children: React.ReactNode;
+    /** Custom close action - defaults to router.back() */
+    onClose?: () => void;
+}
+/**
+ * Page overlay component for intercepting routes.
+ * Renders as a centered card with backdrop blur on top of existing content.
+ *
+ * Uses kumori-style dual-layer card design:
+ * - Outer card: subtle background with squircle corners
+ * - Inner card: main content area
+ */
+export declare function PageOverlay({ title, children, onClose }: PageOverlayProps): any;
+export {};

package/dist/web/components/overlay/page-overlay.js

@@ -0,0 +1,84 @@
+'use client';
+import { useCallback, useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { AnimatePresence, motion } from 'motion/react';
+import { X } from '@phosphor-icons/react';
+import { cn } from '@/lib/utils';
+// Smooth easing for natural feel
+const EASE = [0.32, 0.72, 0, 1];
+// Spring config for bouncy entrance
+const SPRING = { type: 'spring', damping: 25, stiffness: 300 };
+/**
+ * Page overlay component for intercepting routes.
+ * Renders as a centered card with backdrop blur on top of existing content.
+ *
+ * Uses kumori-style dual-layer card design:
+ * - Outer card: subtle background with squircle corners
+ * - Inner card: main content area
+ */
+export function PageOverlay({ title, children, onClose }) {
+    const router = useRouter();
+    const [isVisible, setIsVisible] = useState(false);
+    // Animate in on mount
+    useEffect(() => {
+        const timer = requestAnimationFrame(() => {
+            setIsVisible(true);
+        });
+        return () => cancelAnimationFrame(timer);
+    }, []);
+    const handleClose = useCallback(() => {
+        setIsVisible(false);
+        // Wait for exit animation
+        setTimeout(() => {
+            if (onClose) {
+                onClose();
+            }
+            else {
+                router.back();
+            }
+        }, 180);
+    }, [onClose, router]);
+    // Handle escape key
+    useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                handleClose();
+            }
+        };
+        window.addEventListener('keydown', handleEscape);
+        return () => window.removeEventListener('keydown', handleEscape);
+    }, [handleClose]);
+    // Handle backdrop click
+    const handleBackdropClick = useCallback((e) => {
+        if (e.target === e.currentTarget) {
+            handleClose();
+        }
+    }, [handleClose]);
+    return (<AnimatePresence>
+      {isVisible && (<div className="fixed inset-0 z-50 flex items-start justify-center pt-[10vh]">
+          {/* Backdrop - faster fade */}
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.12, ease: EASE }} onClick={handleBackdropClick} className="absolute inset-0 bg-black/60 backdrop-blur-sm"/>
+
+          {/* Outer card - kumori style with spring entrance */}
+          <motion.div initial={{ opacity: 0, scale: 0.95, y: 8, filter: 'blur(8px)' }} animate={{ opacity: 1, scale: 1, y: 0, filter: 'blur(0px)' }} exit={{ opacity: 0, scale: 0.97, y: 4, filter: 'blur(4px)' }} transition={{
+                opacity: { duration: 0.15, ease: EASE },
+                scale: SPRING,
+                y: SPRING,
+                filter: { duration: 0.2, ease: EASE },
+            }} className={cn('relative z-10 w-full max-w-lg', 'rounded-[24px] bg-background-secondary p-1.5', 'shadow-[0_24px_64px_rgba(0,0,0,0.3)]', '[corner-shape:squircle]')}>
+            {/* Header - in outer card */}
+            <div className="flex items-center justify-between px-3 py-2">
+              <h2 className="text-sm font-medium text-foreground">{title}</h2>
+              <button onClick={handleClose} className={cn('flex h-7 w-7 items-center justify-center rounded-md', 'text-foreground-secondary hover:text-foreground')}>
+                <X className="h-4 w-4"/>
+              </button>
+            </div>
+
+            {/* Inner card - main content */}
+            <div className={cn('rounded-[18px] bg-background', '[corner-shape:squircle]')}>
+              <div className="p-4">{children}</div>
+            </div>
+          </motion.div>
+        </div>)}
+    </AnimatePresence>);
+}

package/dist/web/components/pane-view.d.ts

@@ -0,0 +1,5 @@
+interface PaneViewProps {
+    windowKey: string;
+}
+export declare function PaneView({ windowKey }: PaneViewProps): any;
+export {};