@creativeintelligence/abbie 0.1.0

package/dist/web/hooks/use-keybindings.js

@@ -0,0 +1,322 @@
+'use client';
+import { useEffect, useCallback, useState } from 'react';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { tmuxWindowsAtom, sessionsAtom, selectedWindowAtom, selectedSessionIdAtom, selectedProjectViewAtom, viewModeAtom, sidebarCollapsedAtom, prefixActiveAtom, commandPaletteOpenAtom, terminalFocusedAtom, } from '@/atoms/state';
+import { sidebarViewAtom, canGoBackAtom, pushViewAtom, popViewAtom, } from '@/atoms/sidebar';
+/**
+ * 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 function useKeybindings() {
+    const windows = useAtomValue(tmuxWindowsAtom);
+    const sessions = useAtomValue(sessionsAtom);
+    const [selectedWindow, setSelectedWindow] = useAtom(selectedWindowAtom);
+    const [selectedSessionId, setSelectedSessionId] = useAtom(selectedSessionIdAtom);
+    const [viewMode, setViewMode] = useAtom(viewModeAtom);
+    const [sidebarCollapsed, setSidebarCollapsed] = useAtom(sidebarCollapsedAtom);
+    const setSelectedProjectView = useSetAtom(selectedProjectViewAtom);
+    const [prefixActive, setPrefixActive] = useAtom(prefixActiveAtom);
+    const [commandPaletteOpen, setCommandPaletteOpen] = useAtom(commandPaletteOpenAtom);
+    const terminalFocused = useAtomValue(terminalFocusedAtom);
+    // Sidebar navigation
+    const sidebarView = useAtomValue(sidebarViewAtom);
+    const canGoBack = useAtomValue(canGoBackAtom);
+    const pushView = useSetAtom(pushViewAtom);
+    const popView = useSetAtom(popViewAtom);
+    // "G then X" prefix state for vim-style go-to commands
+    const [gPrefixActive, setGPrefixActive] = useState(false);
+    // Get current list based on view mode
+    const getCurrentItems = useCallback(() => {
+        if (viewMode === 'windows') {
+            return windows.map((w) => w.id || String(w.index));
+        }
+        return sessions.map((s) => s.session_id);
+    }, [viewMode, windows, sessions]);
+    // Get current selection
+    const getCurrentIndex = useCallback(() => {
+        const items = getCurrentItems();
+        if (viewMode === 'windows') {
+            return items.indexOf(selectedWindow || '');
+        }
+        return items.indexOf(selectedSessionId || '');
+    }, [getCurrentItems, viewMode, selectedWindow, selectedSessionId]);
+    // Set selection by index
+    const setSelectionByIndex = useCallback((index) => {
+        const items = getCurrentItems();
+        if (items.length === 0)
+            return;
+        const clampedIndex = Math.max(0, Math.min(items.length - 1, index));
+        const item = items[clampedIndex];
+        if (viewMode === 'windows') {
+            setSelectedWindow(item);
+            setSelectedProjectView('terminal');
+            setSelectedSessionId(null);
+        }
+        else {
+            setSelectedSessionId(item);
+            setSelectedWindow(null);
+        }
+    }, [getCurrentItems, viewMode, setSelectedWindow, setSelectedProjectView, setSelectedSessionId]);
+    // Navigate to next item
+    const navigateNext = useCallback(() => {
+        const currentIndex = getCurrentIndex();
+        if (currentIndex === -1) {
+            setSelectionByIndex(0);
+        }
+        else {
+            setSelectionByIndex(currentIndex + 1);
+        }
+    }, [getCurrentIndex, setSelectionByIndex]);
+    // Navigate to previous item
+    const navigatePrev = useCallback(() => {
+        const currentIndex = getCurrentIndex();
+        if (currentIndex === -1) {
+            setSelectionByIndex(0);
+        }
+        else {
+            setSelectionByIndex(currentIndex - 1);
+        }
+    }, [getCurrentIndex, setSelectionByIndex]);
+    // Navigate to first item
+    const navigateFirst = useCallback(() => {
+        setSelectionByIndex(0);
+    }, [setSelectionByIndex]);
+    // Navigate to last item
+    const navigateLast = useCallback(() => {
+        const items = getCurrentItems();
+        setSelectionByIndex(items.length - 1);
+    }, [getCurrentItems, setSelectionByIndex]);
+    // Handle tmux prefix commands
+    const handlePrefixCommand = useCallback((key) => {
+        setPrefixActive(false);
+        switch (key) {
+            case 'n':
+                // Next window in tmux
+                if (viewMode !== 'windows')
+                    setViewMode('windows');
+                navigateNext();
+                break;
+            case 'p':
+                // Previous window in tmux
+                if (viewMode !== 'windows')
+                    setViewMode('windows');
+                navigatePrev();
+                break;
+            case 's':
+                setViewMode('sessions');
+                break;
+            case 'w':
+                setViewMode('windows');
+                break;
+            case '[':
+                setSidebarCollapsed(!sidebarCollapsed);
+                break;
+            case 'c':
+                // New window - placeholder for now
+                console.log('[keybindings] new window command (placeholder)');
+                break;
+            default:
+                // Unknown prefix command
+                break;
+        }
+    }, [viewMode, setViewMode, navigateNext, navigatePrev, sidebarCollapsed, setSidebarCollapsed]);
+    useEffect(() => {
+        let prefixTimeout;
+        const handleKeyDown = (e) => {
+            // Skip if terminal is focused - let xterm.js handle all keys
+            // Exception: Escape can still close the terminal view
+            if (terminalFocused && e.key !== 'Escape') {
+                return;
+            }
+            // Skip if in input/textarea
+            if (e.target instanceof HTMLInputElement ||
+                e.target instanceof HTMLTextAreaElement ||
+                (e.target instanceof HTMLElement && e.target.isContentEditable)) {
+                return;
+            }
+            // Handle prefix timeout
+            if (prefixActive) {
+                clearTimeout(prefixTimeout);
+                handlePrefixCommand(e.key);
+                e.preventDefault();
+                return;
+            }
+            // Ctrl+A - tmux prefix
+            if (e.ctrlKey && e.key === 'a') {
+                e.preventDefault();
+                setPrefixActive(true);
+                prefixTimeout = setTimeout(() => setPrefixActive(false), 2000);
+                return;
+            }
+            // Cmd+K or / - command palette
+            if ((e.metaKey && e.key === 'k') || (e.key === '/' && !e.ctrlKey && !e.metaKey)) {
+                e.preventDefault();
+                setCommandPaletteOpen(true);
+                return;
+            }
+            // Escape - close command palette, pop sidebar view, or deselect
+            if (e.key === 'Escape') {
+                if (commandPaletteOpen) {
+                    setCommandPaletteOpen(false);
+                }
+                else if (gPrefixActive) {
+                    setGPrefixActive(false);
+                }
+                else if (canGoBack) {
+                    popView();
+                }
+                else {
+                    setSelectedWindow(null);
+                    setSelectedSessionId(null);
+                }
+                e.preventDefault();
+                return;
+            }
+            // "G" prefix for go-to commands (Linear style: G then S = settings)
+            if (e.key === 'g' && !e.shiftKey && !e.ctrlKey && !e.metaKey && !commandPaletteOpen) {
+                e.preventDefault();
+                setGPrefixActive(true);
+                // Timeout after 2 seconds
+                setTimeout(() => setGPrefixActive(false), 2000);
+                return;
+            }
+            // Handle G prefix commands
+            if (gPrefixActive) {
+                setGPrefixActive(false);
+                e.preventDefault();
+                switch (e.key.toLowerCase()) {
+                    case 's':
+                        // G then S = Settings
+                        pushView('settings');
+                        return;
+                    case 'h':
+                        // G then H = Home (pop all views)
+                        while (canGoBack)
+                            popView();
+                        return;
+                    case '1':
+                    case '2':
+                    case '3':
+                    case '4':
+                    case '5':
+                    case '6':
+                    case '7':
+                    case '8':
+                    case '9':
+                        // G then 1-9 = select nth window
+                        const index = parseInt(e.key, 10) - 1;
+                        if (windows[index]) {
+                            const w = windows[index];
+                            const windowKey = w.id || (Number.isFinite(w.index) ? String(w.index) : w.name);
+                            setSelectedWindow(windowKey);
+                            setSelectedProjectView('terminal');
+                            setSelectedSessionId(null);
+                            setViewMode('windows');
+                        }
+                        return;
+                }
+            }
+            // Skip other shortcuts when command palette is open
+            if (commandPaletteOpen)
+                return;
+            // Navigation
+            switch (e.key) {
+                case 'j':
+                case 'ArrowDown':
+                    e.preventDefault();
+                    navigateNext();
+                    break;
+                case 'k':
+                case 'ArrowUp':
+                    e.preventDefault();
+                    navigatePrev();
+                    break;
+                // 'g' is now handled by G prefix above
+                case 'G':
+                    e.preventDefault();
+                    navigateLast();
+                    break;
+                case 'h':
+                case 'ArrowLeft':
+                    // Collapse sidebar or deselect
+                    e.preventDefault();
+                    if (selectedWindow || selectedSessionId) {
+                        setSelectedWindow(null);
+                        setSelectedSessionId(null);
+                    }
+                    else {
+                        setSidebarCollapsed(true);
+                    }
+                    break;
+                case 'l':
+                case 'ArrowRight':
+                case 'Enter':
+                    // Expand sidebar if collapsed
+                    e.preventDefault();
+                    if (sidebarCollapsed) {
+                        setSidebarCollapsed(false);
+                    }
+                    break;
+                case '1':
+                    e.preventDefault();
+                    setViewMode('windows');
+                    break;
+                case '2':
+                    e.preventDefault();
+                    setViewMode('sessions');
+                    break;
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            clearTimeout(prefixTimeout);
+        };
+    }, [
+        prefixActive,
+        commandPaletteOpen,
+        sidebarCollapsed,
+        selectedWindow,
+        selectedSessionId,
+        handlePrefixCommand,
+        navigateNext,
+        navigatePrev,
+        navigateFirst,
+        navigateLast,
+        setSelectedWindow,
+        setSelectedSessionId,
+        setSidebarCollapsed,
+        setViewMode,
+        gPrefixActive,
+        canGoBack,
+        pushView,
+        popView,
+        windows,
+        terminalFocused,
+    ]);
+    return {
+        prefixActive,
+        commandPaletteOpen,
+        setCommandPaletteOpen,
+    };
+}

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

@@ -0,0 +1,11 @@
+export declare function useAgentState(): {
+    state: any;
+    isLoading: any;
+    error: any;
+    refresh: any;
+};
+export declare function usePaneContent(): {
+    content: any;
+    loading: any;
+    refresh: any;
+};

package/dist/web/hooks/use-state.js

@@ -0,0 +1,84 @@
+'use client';
+import { useEffect, useCallback } from 'react';
+import { useAtom, useSetAtom } from 'jotai';
+import { api } from '@/lib/api';
+import { getWSClient } from '@/lib/ws';
+import { stateAtom, isLoadingAtom, errorAtom, wsConnectedAtom, paneContentAtom, paneLoadingAtom, selectedWindowAtom, selectedPaneAtom, projectsAtom, } from '@/atoms/state';
+export function useAgentState() {
+    const [state, setState] = useAtom(stateAtom);
+    const [isLoading, setIsLoading] = useAtom(isLoadingAtom);
+    const [error, setError] = useAtom(errorAtom);
+    const setWsConnected = useSetAtom(wsConnectedAtom);
+    const setProjects = useSetAtom(projectsAtom);
+    const fetchState = useCallback(async () => {
+        try {
+            const data = await api.getState();
+            setState(data);
+            setError(null);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : 'Failed to fetch state');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [setState, setError, setIsLoading]);
+    // Fetch projects metadata (once on mount)
+    useEffect(() => {
+        api.getProjects().then(setProjects).catch(console.error);
+    }, [setProjects]);
+    // Initial fetch and WebSocket setup
+    useEffect(() => {
+        fetchState();
+        const client = getWSClient();
+        client.connect();
+        const unsubConnect = client.onConnect(() => setWsConnected(true));
+        const unsubDisconnect = client.onDisconnect(() => setWsConnected(false));
+        // Subscribe to session updates
+        const unsubSessions = client.subscribe('sessions', () => {
+            fetchState();
+        });
+        // Poll every 5 seconds as backup
+        const interval = setInterval(fetchState, 5000);
+        return () => {
+            unsubConnect();
+            unsubDisconnect();
+            unsubSessions();
+            clearInterval(interval);
+        };
+    }, [fetchState, setWsConnected]);
+    return { state, isLoading, error, refresh: fetchState };
+}
+export function usePaneContent() {
+    const [content, setContent] = useAtom(paneContentAtom);
+    const [loading, setLoading] = useAtom(paneLoadingAtom);
+    const [selectedWindow] = useAtom(selectedWindowAtom);
+    const [selectedPane] = useAtom(selectedPaneAtom);
+    const fetchContent = useCallback(async () => {
+        if (!selectedWindow)
+            return;
+        setLoading(true);
+        try {
+            const data = await api.captureTmuxPane(selectedWindow, selectedPane, 200);
+            setContent(data.content);
+        }
+        catch (e) {
+            console.error('Failed to capture pane:', e);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [selectedWindow, selectedPane, setContent, setLoading]);
+    // Fetch on window/pane change
+    useEffect(() => {
+        fetchContent();
+    }, [fetchContent]);
+    // Poll for updates
+    useEffect(() => {
+        if (!selectedWindow)
+            return;
+        const interval = setInterval(fetchContent, 2000);
+        return () => clearInterval(interval);
+    }, [selectedWindow, fetchContent]);
+    return { content, loading, refresh: fetchContent };
+}

package/dist/web/lib/api.d.ts

@@ -0,0 +1,179 @@
+export interface Session {
+    session_id: string;
+    agent: 'claude' | 'codex' | 'copilot' | 'gemini';
+    project: string;
+    goal: string;
+    issue?: string;
+    cwd: string;
+    pid: number;
+    started_at: string;
+    status: 'running' | 'completed' | 'failed' | 'stopped';
+    exit_code?: number;
+    prompt_path?: string;
+    output_path?: string;
+    trace_id?: string;
+}
+export interface TmuxWindow {
+    id: string;
+    index: number;
+    name: string;
+    active: boolean;
+    panes: number;
+    layout: string;
+}
+export interface TmuxSession {
+    name: string;
+    windows: number;
+    attached: boolean;
+    created: string;
+}
+export interface TmuxPane {
+    index: number;
+    active: boolean;
+    width: number;
+    height: number;
+    currentCommand: string;
+    currentPath: string;
+}
+export interface StateResponse {
+    sessions: {
+        total: number;
+        running: number;
+        items: Session[];
+    };
+    tmux: {
+        running: boolean;
+        windows: TmuxWindow[];
+    };
+    timestamp: number;
+}
+export interface Project {
+    emoji: string;
+    linearTeam: string | null;
+    name: string;
+}
+export interface ProjectsResponse {
+    projects: Record<string, Project>;
+    defaultEmoji: string;
+    lastUpdated?: string;
+}
+export interface ProjectRootResponse {
+    project: string;
+    root: string | null;
+}
+export interface FileEntry {
+    name: string;
+    type: 'dir' | 'file' | 'symlink';
+    size: number | null;
+    modified: string | null;
+}
+export interface ProjectFilesResponse {
+    project: string;
+    root: string;
+    path: string;
+    entries: FileEntry[];
+}
+export interface ProjectFileResponse {
+    project: string;
+    root: string;
+    path: string;
+    content: string;
+}
+export interface PlanSummary {
+    slug: string;
+    title: string;
+    hasPlan: boolean;
+    modified: string | null;
+}
+export interface ProjectPlansResponse {
+    project: string;
+    plans: PlanSummary[];
+}
+export interface ProjectPlanResponse {
+    project: string;
+    slug: string;
+    content: string;
+}
+export declare const api: {
+    health: () => Promise<{
+        ok: boolean;
+        timestamp: number;
+    }>;
+    getSessions: (params?: {
+        status?: string;
+        project?: string;
+        limit?: number;
+    }) => Promise<{
+        sessions: Session[];
+        total: number;
+    }>;
+    getSession: (id: string) => Promise<{
+        session: Session;
+    }>;
+    stopSession: (id: string, force?: boolean) => Promise<{
+        success: boolean;
+        session_id: string;
+    }>;
+    getState: () => Promise<StateResponse>;
+    getTmuxStatus: () => Promise<{
+        running: boolean;
+    }>;
+    getTmuxSessions: () => Promise<{
+        sessions: TmuxSession[];
+    }>;
+    getTmuxWindows: (session?: string) => Promise<{
+        windows: TmuxWindow[];
+    }>;
+    getTmuxPanes: (window: string, session?: string) => Promise<{
+        panes: TmuxPane[];
+    }>;
+    captureTmuxPane: (window: string, pane?: number, lines?: number, session?: string) => Promise<{
+        content: string;
+        window: string;
+        pane: number;
+    }>;
+    sendTmuxKeys: (window: string, pane: number, keys: string, options?: {
+        session?: string;
+        literal?: boolean;
+    }) => Promise<{
+        success: boolean;
+    }>;
+    selectTmuxWindow: (window: string, session?: string) => Promise<{
+        success: boolean;
+    }>;
+    newTmuxWindow: (options: {
+        name?: string;
+        cwd?: string;
+        session?: string;
+        command?: string;
+    }) => Promise<{
+        success: boolean;
+    }>;
+    reorderTmuxWindows: (sourceId: string, targetId: string, session?: string) => Promise<{
+        success: boolean;
+    }>;
+    reorderTmuxWindowsOrder: (order: string[], session?: string) => Promise<{
+        success: boolean;
+    }>;
+    getProjects: () => Promise<ProjectsResponse>;
+    getProjectRoot: (project: string) => Promise<ProjectRootResponse>;
+    listProjectFiles: (project: string, path?: string) => Promise<ProjectFilesResponse>;
+    getProjectFile: (project: string, path: string) => Promise<ProjectFileResponse>;
+    listProjectPlans: (project: string) => Promise<ProjectPlansResponse>;
+    getProjectPlan: (project: string, slug: string) => Promise<ProjectPlanResponse>;
+    getEvents: (limit?: number) => Promise<{
+        events: unknown[];
+    }>;
+    getPrompts: (limit?: number) => Promise<{
+        prompts: {
+            name: string;
+            path: string;
+            size: number;
+            modified: string;
+        }[];
+    }>;
+    getPrompt: (name: string) => Promise<{
+        name: string;
+        content: string;
+    }>;
+};

package/dist/web/lib/api.js

@@ -0,0 +1,79 @@
+// In dev: Next.js on 5173, API on 3847. In prod: both on same origin.
+const API_BASE = typeof window !== 'undefined' && window.location.port === '5173'
+    ? 'http://localhost:3847'
+    : typeof window !== 'undefined'
+        ? window.location.origin
+        : 'http://localhost:3847';
+async function fetchAPI(endpoint, options) {
+    const res = await fetch(`${API_BASE}${endpoint}`, {
+        ...options,
+        headers: {
+            'Content-Type': 'application/json',
+            ...options?.headers,
+        },
+    });
+    if (!res.ok) {
+        throw new Error(`API error: ${res.status}`);
+    }
+    return res.json();
+}
+export const api = {
+    // Health
+    health: () => fetchAPI('/api/health'),
+    // Sessions
+    getSessions: (params) => {
+        const searchParams = new URLSearchParams();
+        if (params?.status)
+            searchParams.set('status', params.status);
+        if (params?.project)
+            searchParams.set('project', params.project);
+        if (params?.limit)
+            searchParams.set('limit', String(params.limit));
+        const query = searchParams.toString();
+        return fetchAPI(`/api/sessions${query ? `?${query}` : ''}`);
+    },
+    getSession: (id) => fetchAPI(`/api/sessions/${id}`),
+    stopSession: (id, force = false) => fetchAPI(`/api/sessions/${id}/stop`, { method: 'POST', body: JSON.stringify({ force }) }),
+    // State
+    getState: () => fetchAPI('/api/state'),
+    // tmux
+    getTmuxStatus: () => fetchAPI('/api/tmux/status'),
+    getTmuxSessions: () => fetchAPI('/api/tmux/sessions'),
+    getTmuxWindows: (session) => {
+        const query = session ? `?session=${session}` : '';
+        return fetchAPI(`/api/tmux/windows${query}`);
+    },
+    getTmuxPanes: (window, session) => {
+        const query = session ? `?session=${session}` : '';
+        return fetchAPI(`/api/tmux/windows/${encodeURIComponent(window)}/panes${query}`);
+    },
+    captureTmuxPane: (window, pane = 0, lines = 100, session) => {
+        const params = new URLSearchParams({ pane: String(pane), lines: String(lines) });
+        if (session)
+            params.set('session', session);
+        return fetchAPI(`/api/tmux/capture/${encodeURIComponent(window)}?${params}`);
+    },
+    sendTmuxKeys: (window, pane, keys, options) => fetchAPI(`/api/tmux/send/${encodeURIComponent(window)}`, { method: 'POST', body: JSON.stringify({ pane, keys, ...options }) }),
+    selectTmuxWindow: (window, session) => fetchAPI(`/api/tmux/select/${encodeURIComponent(window)}`, { method: 'POST', body: JSON.stringify({ session }) }),
+    newTmuxWindow: (options) => fetchAPI('/api/tmux/new-window', { method: 'POST', body: JSON.stringify(options) }),
+    reorderTmuxWindows: (sourceId, targetId, session) => fetchAPI('/api/tmux/windows/reorder', { method: 'POST', body: JSON.stringify({ sourceId, targetId, session }) }),
+    reorderTmuxWindowsOrder: (order, session) => fetchAPI('/api/tmux/windows/reorder', { method: 'POST', body: JSON.stringify({ order, session }) }),
+    // Projects
+    getProjects: () => fetchAPI('/api/projects'),
+    getProjectRoot: (project) => fetchAPI(`/api/projects/${encodeURIComponent(project)}/root`),
+    listProjectFiles: (project, path = '.') => {
+        const params = new URLSearchParams({ path });
+        return fetchAPI(`/api/projects/${encodeURIComponent(project)}/fs?${params}`);
+    },
+    getProjectFile: (project, path) => {
+        const params = new URLSearchParams({ path });
+        return fetchAPI(`/api/projects/${encodeURIComponent(project)}/file?${params}`);
+    },
+    listProjectPlans: (project) => fetchAPI(`/api/projects/${encodeURIComponent(project)}/plans`),
+    getProjectPlan: (project, slug) => fetchAPI(`/api/projects/${encodeURIComponent(project)}/plans/${encodeURIComponent(slug)}`),
+    // Events
+    getEvents: (limit = 100) => fetchAPI(`/api/events?limit=${limit}`),
+    // Prompts
+    getPrompts: (limit = 50) => fetchAPI(`/api/prompts?limit=${limit}`),
+    getPrompt: (name) => fetchAPI(`/api/prompts/${name}`),
+};

package/dist/web/lib/paths.d.ts

@@ -0,0 +1,2 @@
+export declare function formatDisplayPath(path: string): string;
+export declare function formatTmuxWindowName(name: string): string;