@creativeintelligence/abbie 0.1.4 → 0.1.6

package/dist/web/components/status-bar.js

@@ -1,53 +0,0 @@
-'use client';
-import { useAtomValue } from 'jotai';
-import { Circle, WifiHigh, WifiSlash } from '@phosphor-icons/react';
-import { cn } from '@/lib/utils';
-import { tmuxRunningAtom, runningSessionsAtom, tmuxWindowsAtom, wsConnectedAtom, prefixActiveAtom, } from '@/atoms/state';
-export function StatusBar() {
-    const tmuxRunning = useAtomValue(tmuxRunningAtom);
-    const runningSessions = useAtomValue(runningSessionsAtom);
-    const windows = useAtomValue(tmuxWindowsAtom);
-    const wsConnected = useAtomValue(wsConnectedAtom);
-    const prefixActive = useAtomValue(prefixActiveAtom);
-    return (<footer className="flex h-6 items-center justify-between border-t border-border bg-background px-3 text-[11px]">
-      <div className="flex items-center gap-4">
-        {/* Prefix indicator */}
-        {prefixActive && (<div className="flex items-center gap-1.5 animate-pulse">
-            <span className="rounded bg-primary/20 px-1.5 py-0.5 font-mono text-primary">
-              C-a
-            </span>
-            <span className="text-primary">waiting...</span>
-          </div>)}
-
-        {/* tmux status */}
-        {!prefixActive && (<div className="flex items-center gap-1.5">
-            <Circle weight="fill" className={cn('h-2 w-2', tmuxRunning ? 'text-success' : 'text-destructive')}/>
-            <span className="text-foreground-secondary">
-              tmux {tmuxRunning ? 'running' : 'stopped'}
-            </span>
-          </div>)}
-
-        {/* Window count */}
-        {tmuxRunning && (<span className="text-foreground-tertiary">
-            {windows.length} windows
-          </span>)}
-
-        {/* Running sessions */}
-        {runningSessions.length > 0 && (<span className="text-foreground-secondary">
-            {runningSessions.length} running
-          </span>)}
-      </div>
-
-      <div className="flex items-center gap-2">
-        {/* WebSocket status */}
-        <div className="flex items-center gap-1">
-          {wsConnected ? (<WifiHigh className="h-3.5 w-3.5 text-success"/>) : (<WifiSlash className="h-3.5 w-3.5 text-foreground-tertiary"/>)}
-        </div>
-
-        {/* Keybindings hint */}
-        <span className="text-foreground-quaternary">
-          j/k Navigate · Enter Select · / Search
-        </span>
-      </div>
-    </footer>);
-}

package/dist/web/components/terminal.d.ts

@@ -1,4 +0,0 @@
-export interface TerminalViewHandle {
-    scrollToBottom: () => void;
-}
-export declare const TerminalView: any;

package/dist/web/components/terminal.js

@@ -1,324 +0,0 @@
-'use client';
-import { useEffect, useRef, useCallback, useState, forwardRef, useImperativeHandle } from 'react';
-import { useSetAtom } from 'jotai';
-import { cn } from '@/lib/utils';
-import { getWSClient } from '@/lib/ws';
-import { terminalFocusedAtom } from '@/atoms/state';
-// Dynamic import for xterm (client-side only)
-let Terminal;
-let FitAddon;
-let WebLinksAddon;
-// Custom theme matching our design system
-const TERMINAL_THEME = {
-    background: '#0c0c0d',
-    foreground: '#fafafa',
-    cursor: '#fafafa',
-    cursorAccent: '#0c0c0d',
-    selectionBackground: 'rgba(74, 125, 255, 0.3)',
-    selectionForeground: '#fafafa',
-    // ANSI colors
-    black: '#0c0c0d',
-    red: '#ff4d4d',
-    green: '#22c55e',
-    yellow: '#f59e0b',
-    blue: '#4a7dff',
-    magenta: '#8b5cf6',
-    cyan: '#06b6d4',
-    white: '#fafafa',
-    brightBlack: '#404040',
-    brightRed: '#ff6b6b',
-    brightGreen: '#4ade80',
-    brightYellow: '#fbbf24',
-    brightBlue: '#5d8cff',
-    brightMagenta: '#a78bfa',
-    brightCyan: '#22d3ee',
-    brightWhite: '#ffffff',
-};
-export const TerminalView = forwardRef(function TerminalView({ windowName, pane = 0, session, className, onScrollChange }, ref) {
-    const containerRef = useRef(null);
-    const terminalRef = useRef(null);
-    const fitAddonRef = useRef(null);
-    const onScrollChangeRef = useRef(onScrollChange);
-    const lastFullContentRef = useRef('');
-    const pendingWriteDataRef = useRef('');
-    const writeInProgressRef = useRef(false);
-    const writeRafRef = useRef(null);
-    const [initialized, setInitialized] = useState(false);
-    const [connected, setConnected] = useState(false);
-    const setTerminalFocused = useSetAtom(terminalFocusedAtom);
-    const queueTerminalWrite = useCallback((payload) => {
-        pendingWriteDataRef.current = payload;
-        if (writeRafRef.current != null)
-            return;
-        writeRafRef.current = requestAnimationFrame(() => {
-            writeRafRef.current = null;
-            if (writeInProgressRef.current)
-                return;
-            const terminal = terminalRef.current;
-            const data = pendingWriteDataRef.current;
-            if (!terminal || !data)
-                return;
-            pendingWriteDataRef.current = '';
-            writeInProgressRef.current = true;
-            terminal.write(data, () => {
-                writeInProgressRef.current = false;
-                if (pendingWriteDataRef.current) {
-                    queueTerminalWrite(pendingWriteDataRef.current);
-                }
-            });
-        });
-    }, []);
-    const writeFullFrame = useCallback((content) => {
-        // Single write call to avoid blank-frame flash from terminal.clear() + write()
-        // - hide cursor during repaint
-        // - reset SGR so stale colors don't leak
-        // - home + clear screen, then write new snapshot
-        queueTerminalWrite(`\x1b[?25l\x1b[0m\x1b[H\x1b[2J${content}\x1b[?25h`);
-    }, [queueTerminalWrite]);
-    // Expose scrollToBottom via ref
-    useImperativeHandle(ref, () => ({
-        scrollToBottom: () => {
-            terminalRef.current?.scrollToBottom();
-        },
-    }), []);
-    // Keep ref updated
-    onScrollChangeRef.current = onScrollChange;
-    // Initialize terminal (runs once on mount)
-    useEffect(() => {
-        if (!containerRef.current)
-            return;
-        let disposed = false;
-        // Dynamic import xterm modules
-        Promise.all([
-            import('@xterm/xterm'),
-            import('@xterm/addon-fit'),
-            import('@xterm/addon-web-links'),
-        ]).then(([xtermModule, fitModule, webLinksModule]) => {
-            if (disposed || !containerRef.current)
-                return;
-            Terminal = xtermModule.Terminal;
-            FitAddon = fitModule.FitAddon;
-            WebLinksAddon = webLinksModule.WebLinksAddon;
-            const terminal = new Terminal({
-                theme: TERMINAL_THEME,
-                // Ghostty-inspired font stack: prefer SF Mono for macOS crispness
-                fontFamily: '"SF Mono", "Berkeley Mono", "JetBrains Mono", "Fira Code", Menlo, monospace',
-                fontSize: 13,
-                fontWeight: 400,
-                fontWeightBold: 600,
-                lineHeight: 1.2, // Tighter like native terminals (Ghostty uses ~1.15-1.2)
-                letterSpacing: 0,
-                cursorBlink: true,
-                cursorStyle: 'block',
-                scrollback: 0, // No local buffer - tmux owns scrollback
-                convertEol: true,
-                allowProposedApi: true,
-                minimumContrastRatio: 1, // Don't adjust colors - trust our theme
-                drawBoldTextInBrightColors: false, // Keep bold as weight, not color
-            });
-            const fitAddon = new FitAddon();
-            const webLinksAddon = new WebLinksAddon();
-            terminal.loadAddon(fitAddon);
-            terminal.loadAddon(webLinksAddon);
-            terminal.open(containerRef.current);
-            fitAddon.fit();
-            terminalRef.current = terminal;
-            fitAddonRef.current = fitAddon;
-            // No local scroll tracking - tmux owns scrollback (scrollback: 0)
-            // Scroll controls in UI chrome will send tmux copy-mode commands
-            // Handle keyboard input - send to tmux via WebSocket
-            terminal.onData((data) => {
-                // Debug: log what xterm is sending
-                const escaped = data.replace(/\r/g, '\\r').replace(/\n/g, '\\n').replace(/\x7f/g, '\\x7f').replace(/\x1b/g, '\\e');
-                console.log('[terminal] onData:', escaped, 'length:', data.length);
-                const ws = getWSClient();
-                ws.sendTerminalInput(data);
-            });
-            setInitialized(true);
-        });
-        // Clean up focus state on unmount
-        return () => {
-            disposed = true;
-            setTerminalFocused(false);
-            terminalRef.current?.dispose();
-            terminalRef.current = null;
-            fitAddonRef.current = null;
-        };
-    }, [setTerminalFocused]);
-    // Handle resize - fit xterm and report dimensions to server for tmux pane resize
-    useEffect(() => {
-        if (!fitAddonRef.current || !containerRef.current || !terminalRef.current)
-            return;
-        const terminal = terminalRef.current;
-        let lastCols = terminal.cols;
-        let lastRows = terminal.rows;
-        let rafId = null;
-        const applyFit = () => {
-            rafId = null;
-            if (!fitAddonRef.current || !terminalRef.current)
-                return;
-            fitAddonRef.current.fit();
-            terminalRef.current.refresh(0, Math.max(0, terminalRef.current.rows - 1));
-            const cols = terminalRef.current.cols;
-            const rows = terminalRef.current.rows;
-            if (cols === lastCols && rows === lastRows)
-                return;
-            lastCols = cols;
-            lastRows = rows;
-            // Report new dimensions to server for tmux pane resize (coalesced per frame)
-            const ws = getWSClient();
-            ws.send({
-                type: 'terminal:resize',
-                cols,
-                rows,
-            });
-            // If tmux doesn't emit new content immediately on resize, force a local repaint
-            // so the new rows/cols aren't blank until the next keystroke/output.
-            if (lastFullContentRef.current) {
-                writeFullFrame(lastFullContentRef.current);
-            }
-        };
-        const resizeObserver = new ResizeObserver(() => {
-            if (rafId != null)
-                cancelAnimationFrame(rafId);
-            rafId = requestAnimationFrame(applyFit);
-        });
-        resizeObserver.observe(containerRef.current);
-        rafId = requestAnimationFrame(applyFit);
-        return () => resizeObserver.disconnect();
-    }, [initialized, writeFullFrame]);
-    // Track terminal focus state for global keybinding passthrough
-    useEffect(() => {
-        if (!containerRef.current)
-            return;
-        const container = containerRef.current;
-        const handleFocusIn = () => {
-            setTerminalFocused(true);
-        };
-        const handleFocusOut = (e) => {
-            // Only clear focus if focus is leaving the container entirely
-            if (!container.contains(e.relatedTarget)) {
-                setTerminalFocused(false);
-            }
-        };
-        container.addEventListener('focusin', handleFocusIn);
-        container.addEventListener('focusout', handleFocusOut);
-        return () => {
-            container.removeEventListener('focusin', handleFocusIn);
-            container.removeEventListener('focusout', handleFocusOut);
-        };
-    }, [setTerminalFocused]);
-    // Prevent keyboard events from bubbling UP to parent window (Claude Code CLI)
-    // IMPORTANT: Use bubble phase (not capture) so xterm.js receives the events first
-    useEffect(() => {
-        if (!containerRef.current)
-            return;
-        const container = containerRef.current;
-        const stopPropagation = (e) => {
-            // Stop propagation in bubble phase - xterm.js has already received the event
-            e.stopPropagation();
-        };
-        // Use bubble phase (false) so xterm.js captures events first, then we stop them from bubbling up
-        container.addEventListener('keydown', stopPropagation, false);
-        container.addEventListener('keyup', stopPropagation, false);
-        container.addEventListener('keypress', stopPropagation, false);
-        return () => {
-            container.removeEventListener('keydown', stopPropagation, false);
-            container.removeEventListener('keyup', stopPropagation, false);
-            container.removeEventListener('keypress', stopPropagation, false);
-        };
-    }, []);
-    // Subscribe to WebSocket terminal stream
-    useEffect(() => {
-        if (!initialized || !terminalRef.current)
-            return;
-        const ws = getWSClient();
-        const terminal = terminalRef.current;
-        // Ensure WS is connected
-        ws.connect();
-        // Subscribe to terminal content
-        const unsubContent = ws.subscribe('terminal:content', (data) => {
-            const { content, full } = data;
-            if (full) {
-                // Full refresh - replace the visible frame without a blank flash.
-                lastFullContentRef.current = content;
-                writeFullFrame(content);
-            }
-            else {
-                // Incremental update - just append
-                // Note: preserve any queued full-frame repaint by appending after it.
-                pendingWriteDataRef.current = `${pendingWriteDataRef.current}${content}`;
-                queueTerminalWrite(pendingWriteDataRef.current);
-            }
-        });
-        // Subscribe to connection state - also receive pane dimensions to sync
-        const unsubSubscribed = ws.subscribe('terminal:subscribed', (data) => {
-            const { dims } = (data ?? {});
-            console.log('[terminal] received terminal:subscribed, dims:', dims);
-            setConnected(true);
-            // Source of truth is the browser container size.
-            // Always fit xterm to the container (accounting for padding), then resize tmux to match.
-            // Resizing xterm to tmux dims can make the xterm element wider than its container,
-            // causing lines to overflow instead of wrapping.
-            requestAnimationFrame(() => {
-                const fitAddon = fitAddonRef.current;
-                const term = terminalRef.current;
-                if (!fitAddon || !term)
-                    return;
-                fitAddon.fit();
-                const cols = term.cols;
-                const rows = term.rows;
-                if (!dims || dims.cols !== cols || dims.rows !== rows) {
-                    console.log('[terminal] resizing tmux to match xterm dims:', { cols, rows, server: dims });
-                    ws.send({ type: 'terminal:resize', cols, rows });
-                }
-            });
-        });
-        // Start streaming when connected
-        const trySubscribe = () => {
-            if (ws.isConnected()) {
-                ws.subscribeTerminal(windowName, pane, session);
-            }
-        };
-        // Try immediately and also on connect
-        trySubscribe();
-        const unsubConnect = ws.onConnect(() => {
-            trySubscribe();
-        });
-        return () => {
-            unsubContent();
-            unsubSubscribed();
-            unsubConnect();
-            ws.unsubscribeTerminal();
-            setConnected(false);
-        };
-    }, [initialized, windowName, pane, session]);
-    // Scroll to bottom method
-    const scrollToBottom = useCallback(() => {
-        terminalRef.current?.scrollToBottom();
-    }, []);
-    // Focus terminal on click and track focus state
-    const handleClick = useCallback(() => {
-        terminalRef.current?.focus();
-        setTerminalFocused(true);
-    }, [setTerminalFocused]);
-    return (<div className={cn('relative h-full w-full overflow-hidden', className)} onClick={handleClick}>
-      {/* Terminal container */}
-      <div ref={containerRef} className="absolute inset-0 overflow-hidden" style={{ padding: '12px 16px' }} tabIndex={-1}/>
-
-      {/* Loading overlay */}
-      {!initialized && (<div className="absolute inset-0 flex items-center justify-center">
-          <div className="flex items-center gap-3 text-sm text-foreground-tertiary">
-            <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-foreground-tertiary"/>
-            Initializing...
-          </div>
-        </div>)}
-
-      {/* Connection indicator */}
-      {initialized && !connected && (<div className="absolute inset-0 z-10 flex items-center justify-center overflow-visible">
-          <span className="whitespace-nowrap text-sm font-medium connecting-shimmer">
-            Connecting...
-          </span>
-        </div>)}
-    </div>);
-});

package/dist/web/components/toast.d.ts

@@ -1,7 +0,0 @@
-export declare const toastManager: any;
-export declare function ToastProvider({ children }: {
-    children: React.ReactNode;
-}): any;
-export declare function toast(description: string, type?: 'success' | 'error' | 'info'): any;
-export declare function toastSuccess(description: string): any;
-export declare function toastError(description: string): any;

package/dist/web/components/toast.js

@@ -1,72 +0,0 @@
-'use client';
-import { Toast } from '@base-ui-components/react/toast';
-import { CheckCircle, X, Warning, Info } from '@phosphor-icons/react';
-import { cn } from '@/lib/utils';
-// Create a global toast manager for use outside React tree
-export const toastManager = Toast.createToastManager();
-const ICONS = {
-    success: CheckCircle,
-    error: Warning,
-    info: Info,
-};
-function ToastList() {
-    const { toasts } = Toast.useToastManager();
-    return toasts.map((toast) => {
-        const Icon = ICONS[toast.type] || CheckCircle;
-        return (<Toast.Root key={toast.id} toast={toast} className={cn(
-            // CSS variables for stacking math
-            '[--gap:0.75rem]', '[--peek:0.75rem]', '[--scale:calc(max(0,1-(var(--toast-index)*0.1)))]', '[--shrink:calc(1-var(--scale))]', '[--height:var(--toast-frontmost-height,var(--toast-height))]', '[--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]', 
-            // Position and stacking
-            'absolute right-0 bottom-0 left-auto', 'z-[calc(1000-var(--toast-index))]', 'w-full origin-bottom', 
-            // Transform for stacked appearance
-            '[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))]', 
-            // Styling
-            'rounded-xl border border-border bg-card p-4 shadow-xl', 'select-none bg-clip-padding', 
-            // Height management
-            'h-[var(--height)]', 
-            // Pseudo-element for gap hitbox
-            'after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[""]', 
-            // Transitions
-            '[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]', 
-            // Expanded state (viewport hovered/focused)
-            'data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))]', 'data-[expanded]:h-[var(--toast-height)]', 
-            // Enter animation
-            'data-[starting-style]:[transform:translateY(150%)]', 
-            // Exit animation (no swipe)
-            '[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]', 'data-[ending-style]:opacity-0', 
-            // Limited (exceeded limit)
-            'data-[limited]:opacity-0', 
-            // Swipe exit animations
-            'data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]', 'data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]', 'data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]', 'data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]', 'data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]', 'data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]', 'data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]', 'data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]')}>
-        <Toast.Content className={cn('flex items-center gap-3', 'overflow-hidden', 'transition-opacity duration-250', 'data-[behind]:pointer-events-none data-[behind]:opacity-0', 'data-[expanded]:pointer-events-auto data-[expanded]:opacity-100')}>
-          <Icon className={cn('h-5 w-5 shrink-0', toast.type === 'success' && 'text-success', toast.type === 'error' && 'text-destructive', (!toast.type || toast.type === 'info') && 'text-primary')} weight="fill"/>
-          <Toast.Description className="flex-1 text-sm text-foreground">
-            {toast.description}
-          </Toast.Description>
-          <Toast.Close className={cn('flex h-6 w-6 shrink-0 items-center justify-center rounded-md', 'text-foreground-tertiary', 'outline-none hover:bg-background-tertiary hover:text-foreground-secondary')}>
-            <X className="h-3.5 w-3.5"/>
-          </Toast.Close>
-        </Toast.Content>
-      </Toast.Root>);
-    });
-}
-export function ToastProvider({ children }) {
-    return (<Toast.Provider toastManager={toastManager}>
-      {children}
-      <Toast.Portal>
-        <Toast.Viewport className={cn('fixed z-50', 'bottom-4 right-4 top-auto left-auto', 'mx-auto flex w-[280px]', 'sm:bottom-6 sm:right-6 sm:w-[320px]', 'outline-none')}>
-          <ToastList />
-        </Toast.Viewport>
-      </Toast.Portal>
-    </Toast.Provider>);
-}
-// Convenience functions
-export function toast(description, type) {
-    return toastManager.add({ description, type, timeout: 3000 });
-}
-export function toastSuccess(description) {
-    return toastManager.add({ description, type: 'success', timeout: 3000 });
-}
-export function toastError(description) {
-    return toastManager.add({ description, type: 'error', timeout: 5000 });
-}

package/dist/web/hooks/use-keybindings.d.ts

@@ -1,30 +0,0 @@
-export interface KeybindingsState {
-    prefixActive: boolean;
-    commandPaletteOpen: boolean;
-    setCommandPaletteOpen: (open: boolean) => void;
-}
-/**
- * Vim + tmux keybindings for the agents web UI.
- *
- * Navigation (vim-style):
- *   j/↓ - next item
- *   k/↑ - previous item
- *   Enter/l - select/expand
- *   h/Esc - back/collapse
- *   g - first item
- *   G - last item
- *
- * Commands:
- *   / or Cmd+K - open command palette
- *   Escape - close command palette
- *   1/2 - switch to windows/sessions view
- *
- * tmux prefix (Ctrl+a):
- *   n - next window
- *   p - previous window
- *   c - new window (placeholder)
- *   s - toggle sessions view
- *   w - toggle windows view
- *   [ - toggle sidebar
- */
-export declare function useKeybindings(): KeybindingsState;