@creativeintelligence/abbie 0.1.4 → 0.1.6

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

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

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

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

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

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

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

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