profclaw 2.0.0 → 2.4.0

package/dist/cli/ink/ChatApp.js

@@ -0,0 +1,325 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ChatApp — Full Interactive Chat TUI
+ *
+ * Layout:
+ *   ┌ SessionHeader ──────────────────────────────────┐
+ *   │  message history (StreamingMessage list)        │
+ *   │  AgentStatus (while streaming)                  │
+ *   │  PermissionPrompt (overlay when needed)         │
+ *   ├─────────────────────────────────────────────────┤
+ *   │  CostBar                                        │
+ *   │  > TextInput                                    │
+ *   └─────────────────────────────────────────────────┘
+ */
+import { useState, useCallback, useEffect } from 'react';
+import { Box, Text, useApp, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { App } from './App.js';
+import { SessionHeader } from './components/SessionHeader.js';
+import { StreamingMessage } from './components/StreamingMessage.js';
+import { AgentStatus } from './components/AgentStatus.js';
+import { CostBar } from './components/CostBar.js';
+import { PermissionPrompt, } from './components/PermissionPrompt.js';
+import { SuggestionBar } from './components/SuggestionBar.js';
+import { ConnectionStatus } from './components/ConnectionStatus.js';
+const SLASH_COMMANDS = [
+    { name: '/model', description: 'Switch AI model', hasSubPicker: true, immediate: false },
+    { name: '/provider', description: 'Switch provider', hasSubPicker: true, immediate: false },
+    { name: '/agentic', description: 'Toggle agentic mode (tools + multi-step)', hasSubPicker: false, immediate: true },
+    { name: '/effort', description: 'Set effort: low | medium | high', hasSubPicker: false, immediate: false },
+    { name: '/thinking', description: 'Toggle thinking display', hasSubPicker: false, immediate: true },
+    { name: '/tools', description: 'Toggle tool call verbosity', hasSubPicker: false, immediate: true },
+    { name: '/new', description: 'Start a fresh conversation', hasSubPicker: false, immediate: true },
+    { name: '/sessions', description: 'List recent conversations', hasSubPicker: false, immediate: true },
+    { name: '/resume', description: 'Resume a session by id prefix', hasSubPicker: false, immediate: false },
+    { name: '/status', description: 'Server and provider health', hasSubPicker: false, immediate: true },
+    { name: '/insights', description: 'Session and server usage analytics', hasSubPicker: false, immediate: true },
+    { name: '/run', description: 'Execute a shell command', hasSubPicker: false, immediate: false },
+    { name: '/retry', description: 'Retry last message', hasSubPicker: false, immediate: true },
+    { name: '/diff', description: 'Show unified diff of all file changes this session', hasSubPicker: false, immediate: true },
+    { name: '/rewind', description: 'List or restore file snapshots (optional: <path> or --turn <n>)', hasSubPicker: false, immediate: false },
+    { name: '/compact', description: 'Compact context — summarize old turns (--llm for LLM summary)', hasSubPicker: false, immediate: true },
+    { name: '/branch', description: 'Fork conversation at current turn (or /branch <n> for turn N)', hasSubPicker: false, immediate: false },
+    { name: '/branches', description: 'List all branches for this conversation', hasSubPicker: false, immediate: true },
+    { name: '/clear', description: 'Clear display', hasSubPicker: false, immediate: true },
+    { name: '/help', description: 'Show all commands', hasSubPicker: false, immediate: true },
+    { name: '/exit', description: 'Quit', hasSubPicker: false, immediate: true },
+];
+// Max number of history entries to retain
+const MAX_HISTORY = 50;
+export const ChatApp = ({ sessionInfo, tokensUsed, tokensMax, estimatedCost, agentStatus, agentAction, stepCount, elapsedMs, messages, streamingContent, pendingPermission, availableModels = [], availableProviders = [], suggestions = [], connectionStatus = 'connected', connectionLatencyMs, onSubmit, onPermissionDecision, onCancel, }) => {
+    const { exit } = useApp();
+    const [inputValue, setInputValue] = useState('');
+    const [pickerMode, setPickerMode] = useState('none');
+    const [selectedIdx, setSelectedIdx] = useState(0);
+    const [subPickerTitle, setSubPickerTitle] = useState('');
+    const [subPickerItems, setSubPickerItems] = useState([]);
+    const [subPickerCommand, setSubPickerCommand] = useState('');
+    // ── Multiline state ──────────────────────────────────────────────────────────
+    const [isMultiline, setIsMultiline] = useState(false);
+    const [multilineLines, setMultilineLines] = useState([]);
+    // ── Input history state ──────────────────────────────────────────────────────
+    const [inputHistory, setInputHistory] = useState([]);
+    const [historyIndex, setHistoryIndex] = useState(-1);
+    // Saved draft before navigating history (so Down arrow restores it)
+    const [historyDraft, setHistoryDraft] = useState('');
+    const isStreaming = agentStatus === 'thinking' || agentStatus === 'executing';
+    // Compute matching commands when in command picker mode
+    const inCommandPicker = inputValue.startsWith('/') && inputValue.indexOf(' ') === -1 && !isStreaming && !isMultiline;
+    const matchingCmds = inCommandPicker
+        ? SLASH_COMMANDS.filter(c => c.name.startsWith(inputValue.toLowerCase()))
+        : [];
+    // Auto-show/hide command picker
+    useEffect(() => {
+        if (inCommandPicker && matchingCmds.length > 0 && pickerMode === 'none') {
+            setPickerMode('commands');
+            setSelectedIdx(0);
+        }
+        else if (!inCommandPicker && pickerMode === 'commands') {
+            setPickerMode('none');
+        }
+    }, [inCommandPicker, matchingCmds.length, pickerMode]);
+    // Current picker items
+    const pickerItems = pickerMode === 'commands'
+        ? matchingCmds.map(c => ({ label: c.name, value: c.name, description: c.description }))
+        : pickerMode === 'sub'
+            ? subPickerItems
+            : [];
+    // Keep index in bounds
+    const maxIdx = Math.max(0, pickerItems.length - 1);
+    const safeIdx = Math.min(selectedIdx, maxIdx);
+    // Ghost text
+    const ghostText = pickerMode === 'commands' && matchingCmds.length > 0
+        ? (matchingCmds[safeIdx]?.name ?? '').slice(inputValue.length)
+        : '';
+    // Open sub-picker for a command
+    const openSubPicker = useCallback((cmd) => {
+        if (cmd.name === '/model') {
+            setSubPickerTitle(`Select Model (${availableModels.length} available)`);
+            setSubPickerItems(availableModels);
+            setSubPickerCommand('/model');
+        }
+        else if (cmd.name === '/provider') {
+            setSubPickerTitle(`Select Provider (${availableProviders.length} available)`);
+            setSubPickerItems(availableProviders);
+            setSubPickerCommand('/provider');
+        }
+        setPickerMode('sub');
+        setSelectedIdx(0);
+        setInputValue('');
+    }, [availableModels, availableProviders]);
+    // ── Ctrl+C handler — always active to intercept before Ink's default exit ────
+    useInput((input, key) => {
+        if (!key.ctrl || input !== 'c')
+            return;
+        if (isStreaming) {
+            // Cancel the in-flight stream; do not exit
+            onCancel?.();
+            return;
+        }
+        if (inputValue.length > 0 || isMultiline) {
+            // Clear pending input
+            setInputValue('');
+            setIsMultiline(false);
+            setMultilineLines([]);
+            setHistoryIndex(-1);
+            return;
+        }
+        // Nothing to cancel — exit normally
+        exit();
+    });
+    // ── Alt+Enter / history navigation ──────────────────────────────────────────
+    useInput((input, key) => {
+        // Alt+Enter: toggle multiline mode
+        if (key.meta && key.return) {
+            if (!isMultiline) {
+                setIsMultiline(true);
+            }
+            else {
+                // Cancel multiline; discard accumulated lines
+                setIsMultiline(false);
+                setMultilineLines([]);
+            }
+            return;
+        }
+        // Up arrow: navigate backward through history (picker closed, not in multiline)
+        if (key.upArrow && pickerMode === 'none' && !isMultiline) {
+            if (inputHistory.length === 0)
+                return;
+            if (historyIndex === -1) {
+                setHistoryDraft(inputValue);
+            }
+            const newIdx = historyIndex === -1
+                ? inputHistory.length - 1
+                : Math.max(0, historyIndex - 1);
+            setHistoryIndex(newIdx);
+            setInputValue(inputHistory[newIdx] ?? '');
+            return;
+        }
+        // Down arrow: navigate forward through history (picker closed, not in multiline)
+        if (key.downArrow && pickerMode === 'none' && !isMultiline) {
+            if (historyIndex === -1)
+                return;
+            const newIdx = historyIndex + 1;
+            if (newIdx >= inputHistory.length) {
+                setHistoryIndex(-1);
+                setInputValue(historyDraft);
+            }
+            else {
+                setHistoryIndex(newIdx);
+                setInputValue(inputHistory[newIdx] ?? '');
+            }
+            return;
+        }
+        // Ctrl+Enter in multiline mode: submit all accumulated lines + current line
+        if (isMultiline && key.ctrl && key.return) {
+            const allLines = [...multilineLines, inputValue].filter(l => l.length > 0);
+            if (allLines.length === 0)
+                return;
+            const combined = allLines.join('\n');
+            setIsMultiline(false);
+            setMultilineLines([]);
+            setInputValue('');
+            setHistoryIndex(-1);
+            setHistoryDraft('');
+            setInputHistory(prev => {
+                const next = [...prev, combined];
+                return next.length > MAX_HISTORY ? next.slice(next.length - MAX_HISTORY) : next;
+            });
+            onSubmit(combined);
+            return;
+        }
+        void input;
+    }, { isActive: !isStreaming && pendingPermission === undefined });
+    // ── Picker keyboard navigation ───────────────────────────────────────────────
+    useInput((_input, key) => {
+        if (pickerMode === 'none' || pickerItems.length === 0)
+            return;
+        if (key.upArrow) {
+            setSelectedIdx(prev => {
+                let next = prev <= 0 ? pickerItems.length - 1 : prev - 1;
+                // Skip disabled items
+                let attempts = 0;
+                while (pickerItems[next] && pickerItems[next]?.disabled && attempts < pickerItems.length) {
+                    next = next <= 0 ? pickerItems.length - 1 : next - 1;
+                    attempts++;
+                }
+                return next;
+            });
+        }
+        else if (key.downArrow) {
+            setSelectedIdx(prev => {
+                let next = prev >= pickerItems.length - 1 ? 0 : prev + 1;
+                let attempts = 0;
+                while (pickerItems[next] && pickerItems[next]?.disabled && attempts < pickerItems.length) {
+                    next = next >= pickerItems.length - 1 ? 0 : next + 1;
+                    attempts++;
+                }
+                return next;
+            });
+        }
+        else if (key.escape) {
+            setPickerMode('none');
+            setInputValue('');
+            setSelectedIdx(0);
+        }
+    }, { isActive: pickerMode !== 'none' && !isStreaming });
+    const handleSubmit = useCallback((value) => {
+        // In multiline mode, Enter appends the current line and moves to the next
+        if (isMultiline) {
+            setMultilineLines(prev => [...prev, value]);
+            setInputValue('');
+            return;
+        }
+        const trimmed = value.trim();
+        // Sub-picker: Enter selects the highlighted option (skip disabled)
+        if (pickerMode === 'sub' && subPickerItems.length > 0) {
+            const item = subPickerItems[safeIdx];
+            if (item && !(item.disabled)) {
+                setPickerMode('none');
+                setInputValue('');
+                setSelectedIdx(0);
+                onSubmit(`${subPickerCommand} ${item.value}`);
+            }
+            return;
+        }
+        // Command picker: Enter selects highlighted command
+        if (pickerMode === 'commands' && matchingCmds.length > 0) {
+            const cmd = matchingCmds[safeIdx];
+            if (cmd) {
+                if (cmd.hasSubPicker) {
+                    openSubPicker(cmd);
+                }
+                else if (cmd.immediate) {
+                    setPickerMode('none');
+                    setInputValue('');
+                    setSelectedIdx(0);
+                    if (cmd.name === '/exit') {
+                        exit();
+                        return;
+                    }
+                    onSubmit(cmd.name);
+                }
+            }
+            return;
+        }
+        if (trimmed.length === 0)
+            return;
+        if (trimmed === '/exit' || trimmed === '/quit') {
+            exit();
+            return;
+        }
+        setInputValue('');
+        setSelectedIdx(0);
+        setPickerMode('none');
+        setHistoryIndex(-1);
+        setHistoryDraft('');
+        setInputHistory(prev => {
+            const next = [...prev, trimmed];
+            return next.length > MAX_HISTORY ? next.slice(next.length - MAX_HISTORY) : next;
+        });
+        onSubmit(trimmed);
+    }, [
+        onSubmit,
+        exit,
+        pickerMode,
+        safeIdx,
+        matchingCmds,
+        subPickerItems,
+        subPickerCommand,
+        openSubPicker,
+        isMultiline,
+    ]);
+    const handlePermission = useCallback((decision) => {
+        if (pendingPermission) {
+            pendingPermission.resolve(decision);
+        }
+        onPermissionDecision?.(decision);
+    }, [pendingPermission, onPermissionDecision]);
+    // ── Prompt prefix ────────────────────────────────────────────────────────────
+    const promptPrefix = isMultiline ? '... ' : '> ';
+    return (_jsxs(App, { children: [_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(SessionHeader, { model: sessionInfo.model, provider: sessionInfo.provider, sessionId: sessionInfo.sessionId, mode: sessionInfo.mode }), connectionStatus !== 'connected' && (_jsx(Box, { paddingX: 1, children: _jsx(ConnectionStatus, { status: connectionStatus, latencyMs: connectionLatencyMs, provider: sessionInfo.provider }) }))] }), connectionStatus === 'disconnected' && (_jsxs(Box, { borderStyle: "round", borderColor: "red", paddingX: 2, paddingY: 0, marginX: 1, children: [_jsx(Text, { color: "red", bold: true, children: "Server unreachable \u2014 waiting for connection..." }), _jsx(Text, { dimColor: true, children: "  Messages will be sent once the server is back online." })] })), connectionStatus === 'reconnecting' && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: "yellow", children: "Reconnecting to server..." }) })), _jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingY: 1, children: [messages.map((msg, idx) => (_jsx(StreamingMessage, { role: msg.role === 'system' ? 'assistant' : msg.role, content: msg.content, model: msg.model }, `msg-${msg.timestamp?.getTime?.() ?? idx}-${idx}`))), streamingContent !== undefined && streamingContent.length > 0 && (_jsx(StreamingMessage, { role: "assistant", content: streamingContent, isStreaming: true, model: sessionInfo.model }))] }), (isStreaming || agentStatus === 'complete') && (_jsx(AgentStatus, { status: agentStatus, currentAction: agentAction, stepCount: stepCount, tokensUsed: tokensUsed, elapsedMs: elapsedMs })), pendingPermission !== undefined && (_jsx(PermissionPrompt, { toolName: pendingPermission.toolName, args: pendingPermission.args, permissionLevel: pendingPermission.permissionLevel, reason: pendingPermission.reason, onDecision: handlePermission })), pickerMode !== 'none' && pickerItems.length > 0 && (() => {
+                const MAX_VISIBLE = 6;
+                const total = pickerItems.length;
+                const start = Math.max(0, Math.min(safeIdx - Math.floor(MAX_VISIBLE / 2), total - MAX_VISIBLE));
+                const visible = pickerItems.slice(start, start + MAX_VISIBLE);
+                const showScrollUp = start > 0;
+                const showScrollDown = start + MAX_VISIBLE < total;
+                const title = pickerMode === 'sub' ? subPickerTitle : 'Commands';
+                return (_jsx(Box, { flexDirection: "column", paddingX: 2, children: _jsxs(Box, { borderStyle: "round", borderColor: "cyan", flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "cyan", children: [' ', title] }), _jsx(Text, { dimColor: true, children: ' ─'.repeat(20) }), showScrollUp && _jsxs(Text, { dimColor: true, children: ["  \u2191 more (", start, " above)"] }), visible.map((item) => {
+                                const realIdx = pickerItems.indexOf(item);
+                                const isSelected = realIdx === safeIdx;
+                                const isDisabled = item.disabled;
+                                return (_jsxs(Box, { gap: 1, children: [_jsxs(Text, { color: isDisabled ? 'gray' : isSelected ? 'cyan' : undefined, bold: isSelected && !isDisabled, inverse: isSelected && !isDisabled, dimColor: isDisabled, strikethrough: isDisabled, children: [' ', item.label.padEnd(20)] }), item.description && _jsx(Text, { dimColor: true, children: item.description }), item.active && !isDisabled && _jsx(Text, { color: "green", children: " \u25CF" }), isDisabled && _jsx(Text, { color: "gray", children: " \u2298" })] }, item.value + (isDisabled ? '-disabled' : '')));
+                            }), showScrollDown && _jsxs(Text, { dimColor: true, children: ["  \u2193 more (", total - start - MAX_VISIBLE, " below)"] }), _jsx(Text, { dimColor: true, children: "  \u2191\u2193 navigate \u00B7 Enter select \u00B7 Esc back" })] }) }));
+            })(), suggestions.length > 0 && !isStreaming && pickerMode === 'none' && (_jsx(SuggestionBar, { suggestions: suggestions, isActive: pendingPermission === undefined && !isStreaming && pickerMode === 'none', onSelect: (text) => {
+                    onSubmit(text);
+                } })), isMultiline && multilineLines.length > 0 && (_jsx(Box, { flexDirection: "column", paddingX: 1, children: multilineLines.map((line, idx) => (_jsxs(Box, { flexDirection: "row", gap: 0, children: [_jsx(Text, { color: "yellow", bold: true, children: '... ' }), _jsx(Text, { children: line })] }, idx))) })), _jsxs(Box, { flexDirection: "row", gap: 0, paddingX: 1, children: [_jsx(Text, { color: isMultiline ? 'yellow' : 'cyan', bold: true, children: promptPrefix }), connectionStatus === 'disconnected' ? (_jsx(Text, { dimColor: true, color: "red", children: "Offline \u2014 waiting for server..." })) : pendingPermission === undefined && !isStreaming ? (_jsxs(Box, { flexDirection: "row", children: [_jsx(TextInput, { value: inputValue, onChange: (val) => { setInputValue(val); if (!isMultiline)
+                                    setSelectedIdx(0); }, onSubmit: handleSubmit, placeholder: isMultiline
+                                    ? 'Add line... (Ctrl+Enter to send · Alt+Enter to cancel)'
+                                    : 'Message profClaw... (/ for commands)' }), ghostText.length > 0 && _jsx(Text, { dimColor: true, children: ghostText })] })) : (_jsx(Text, { dimColor: true, children: pendingPermission !== undefined
+                            ? 'Waiting for permission...'
+                            : 'Agent is working... (Ctrl+C to cancel)' }))] }), isMultiline && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: "  multiline \u2014 Enter adds line \u00B7 Ctrl+Enter sends \u00B7 Alt+Enter cancels" }) })), _jsx(CostBar, { tokensUsed: tokensUsed, tokensMax: tokensMax, estimatedCost: estimatedCost })] }));
+};
+//# sourceMappingURL=ChatApp.js.map

package/dist/cli/ink/DashboardApp.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function DashboardApp(): React.ReactElement;
+//# sourceMappingURL=DashboardApp.d.ts.map

package/dist/cli/ink/DashboardApp.js

@@ -0,0 +1,143 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import { ProviderList } from './components/ProviderList.js';
+import { TaskList } from './components/TaskList.js';
+import { SystemHealth } from './components/SystemHealth.js';
+import { HookStatus } from './components/HookStatus.js';
+import { ChannelList } from './components/ChannelList.js';
+import { api } from '../utils/api.js';
+const TABS = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'tasks', label: 'Tasks' },
+    { id: 'channels', label: 'Channels' },
+    { id: 'hooks', label: 'Hooks' },
+];
+// ---- Helpers ----
+function toTaskStatus(raw) {
+    const allowed = ['pending', 'running', 'completed', 'failed', 'cancelled'];
+    return allowed.includes(raw)
+        ? raw
+        : 'pending';
+}
+function toChannelStatus(raw) {
+    const allowed = ['connected', 'disconnected', 'error', 'connecting'];
+    return allowed.includes(raw)
+        ? raw
+        : 'disconnected';
+}
+// ---- Tab bar ----
+function TabBar({ current, onSelect }) {
+    void onSelect; // navigation handled via keyboard, kept for future mouse use
+    return (_jsxs(Box, { gap: 1, marginBottom: 1, children: [TABS.map((tab, i) => (_jsx(Box, { gap: 0, children: _jsxs(Text, { color: current === tab.id ? 'cyan' : 'white', bold: current === tab.id, dimColor: current !== tab.id, children: [i > 0 ? '│ ' : '', tab.label] }) }, tab.id))), _jsx(Text, { dimColor: true, children: "   \u2190 \u2192 to switch  q to quit" })] }));
+}
+// ---- Main app ----
+export function DashboardApp() {
+    const { exit } = useApp();
+    const [tabIndex, setTabIndex] = useState(0);
+    const [lastRefresh, setLastRefresh] = useState(new Date());
+    const [data, setData] = useState({
+        system: {},
+        providers: [],
+        tasks: [],
+        hooks: [],
+        channels: [],
+    });
+    const [loadState, setLoadState] = useState({ loading: true });
+    const fetchData = useCallback(async () => {
+        setLoadState((prev) => ({ ...prev, loading: true }));
+        const [sysRes, provRes, taskRes, hookRes, chanRes] = await Promise.allSettled([
+            api.get('/health'),
+            api.get('/api/chat/providers'),
+            api.get('/api/tasks?limit=20&sort=createdAt'),
+            api.get('/api/hooks'),
+            api.get('/api/channels'),
+        ]);
+        const next = {
+            system: {},
+            providers: [],
+            tasks: [],
+            hooks: [],
+            channels: [],
+        };
+        const errors = { loading: false };
+        if (sysRes.status === 'fulfilled' && sysRes.value.ok && sysRes.value.data) {
+            const raw = sysRes.value.data;
+            next.system = {
+                ...raw,
+                healthy: raw.status === 'ok' || raw.healthy === true,
+                queueBackend: (raw.queue ?? raw.queueBackend),
+            };
+        }
+        else {
+            errors.systemError =
+                sysRes.status === 'fulfilled'
+                    ? (sysRes.value.error ?? 'Failed to load system status')
+                    : 'Failed to load system status';
+        }
+        if (provRes.status === 'fulfilled' && provRes.value.ok && provRes.value.data) {
+            next.providers = provRes.value.data.providers;
+        }
+        else {
+            errors.providersError = 'Failed to load providers';
+        }
+        if (taskRes.status === 'fulfilled' && taskRes.value.ok && taskRes.value.data) {
+            next.tasks = taskRes.value.data.tasks.map((t) => ({
+                ...t,
+                status: toTaskStatus(t.status),
+            }));
+        }
+        else {
+            errors.tasksError = 'Failed to load tasks';
+        }
+        if (hookRes.status === 'fulfilled' && hookRes.value.ok && hookRes.value.data) {
+            next.hooks = hookRes.value.data.hooks;
+        }
+        else {
+            // /api/hooks may not exist yet — show empty list instead of error
+            next.hooks = [];
+        }
+        if (chanRes.status === 'fulfilled' && chanRes.value.ok && chanRes.value.data) {
+            // API returns { provider, registered, enabled, configured } — map to our Channel shape
+            const raw = chanRes.value.data.channels;
+            next.channels = raw.map((c) => ({
+                name: (c.name ?? c.provider ?? 'unknown'),
+                type: (c.type ?? c.provider ?? ''),
+                status: toChannelStatus(c.status ??
+                    (c.registered ? 'connected' : c.configured ? 'disconnected' : 'disconnected')),
+                messageCount: (c.messageCount ?? 0),
+                lastActivity: (c.lastActivity ?? c.lastActivityAt ?? ''),
+            }));
+        }
+        else {
+            errors.channelsError = 'Failed to load channels';
+        }
+        setData(next);
+        setLoadState(errors);
+        setLastRefresh(new Date());
+    }, []);
+    // Initial load + auto-refresh every 5 seconds
+    useEffect(() => {
+        void fetchData();
+        const timer = setInterval(() => { void fetchData(); }, 5000);
+        return () => clearInterval(timer);
+    }, [fetchData]);
+    useInput((input, key) => {
+        if (input === 'q' || (key.ctrl && input === 'c')) {
+            exit();
+            return;
+        }
+        if (key.rightArrow) {
+            setTabIndex((i) => (i + 1) % TABS.length);
+        }
+        if (key.leftArrow) {
+            setTabIndex((i) => (i - 1 + TABS.length) % TABS.length);
+        }
+        if (input === 'r') {
+            void fetchData();
+        }
+    });
+    const currentTab = TABS[tabIndex].id;
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsx(Text, { bold: true, color: "cyan", children: "profClaw Dashboard" }), _jsxs(Text, { dimColor: true, children: [lastRefresh.toLocaleTimeString(), " \u00B7 r to refresh"] })] }), _jsx(TabBar, { current: currentTab, onSelect: (id) => setTabIndex(TABS.findIndex((t) => t.id === id)) }), _jsx(Text, { dimColor: true, children: '─'.repeat(60) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [currentTab === 'overview' && (_jsxs(Box, { flexDirection: "column", gap: 2, children: [_jsx(SystemHealth, { metrics: data.system, loading: loadState.loading, error: loadState.systemError }), _jsx(ProviderList, { providers: data.providers, loading: loadState.loading, error: loadState.providersError })] })), currentTab === 'tasks' && (_jsx(TaskList, { tasks: data.tasks, loading: loadState.loading, error: loadState.tasksError })), currentTab === 'channels' && (_jsx(ChannelList, { channels: data.channels, loading: loadState.loading, error: loadState.channelsError })), currentTab === 'hooks' && (_jsx(HookStatus, { hooks: data.hooks, loading: loadState.loading, error: loadState.hooksError }))] })] }));
+}
+//# sourceMappingURL=DashboardApp.js.map

package/dist/cli/ink/components/AgentStatus.d.ts

@@ -0,0 +1,17 @@
+/**
+ * AgentStatus Component
+ *
+ * Real-time agent status display showing current action, step count,
+ * tokens used, and elapsed time. Uses a spinner when agent is active.
+ */
+import React from 'react';
+export type AgentStatusState = 'idle' | 'thinking' | 'executing' | 'complete' | 'error';
+export interface AgentStatusProps {
+    status: AgentStatusState;
+    currentAction?: string;
+    stepCount: number;
+    tokensUsed: number;
+    elapsedMs: number;
+}
+export declare const AgentStatus: React.FC<AgentStatusProps>;
+//# sourceMappingURL=AgentStatus.d.ts.map

package/dist/cli/ink/components/AgentStatus.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+function formatElapsed(ms) {
+    if (ms < 1000)
+        return `${ms}ms`;
+    if (ms < 60000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    const mins = Math.floor(ms / 60000);
+    const secs = Math.floor((ms % 60000) / 1000);
+    return `${mins}m ${secs}s`;
+}
+function formatTokens(count) {
+    if (count >= 1000000)
+        return `${(count / 1000000).toFixed(1)}M`;
+    if (count >= 1000)
+        return `${(count / 1000).toFixed(1)}K`;
+    return count.toString();
+}
+const STATUS_COLORS = {
+    idle: 'gray',
+    thinking: 'yellow',
+    executing: 'cyan',
+    complete: 'green',
+    error: 'red',
+};
+const isActive = (status) => status === 'thinking' || status === 'executing';
+export const AgentStatus = ({ status, currentAction, stepCount, tokensUsed, elapsedMs, }) => {
+    const statusColor = STATUS_COLORS[status];
+    const active = isActive(status);
+    return (_jsxs(Box, { flexDirection: "row", gap: 1, paddingX: 1, children: [active ? (_jsx(Text, { color: statusColor, children: _jsx(Spinner, { type: "dots" }) })) : (_jsx(Text, { color: statusColor, children: status === 'complete' ? '✓' : status === 'error' ? '✗' : '·' })), _jsx(Text, { color: statusColor, bold: active, children: status }), currentAction !== undefined && currentAction.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "\u203A" }), _jsx(Text, { color: "white", children: currentAction })] })), _jsxs(Text, { dimColor: true, children: [' ', "step ", stepCount, " \u00B7 ", formatTokens(tokensUsed), " tok \u00B7 ", formatElapsed(elapsedMs)] })] }));
+};
+//# sourceMappingURL=AgentStatus.js.map

package/dist/cli/ink/components/ChannelList.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export type ChannelStatus = 'connected' | 'disconnected' | 'error' | 'connecting';
+export interface Channel {
+    name: string;
+    type: string;
+    status: ChannelStatus;
+    messageCount?: number;
+    lastActivity?: string;
+}
+interface ChannelListProps {
+    channels: Channel[];
+    loading?: boolean;
+    error?: string;
+}
+export declare function ChannelList({ channels, loading, error }: ChannelListProps): React.ReactElement;
+export {};
+//# sourceMappingURL=ChannelList.d.ts.map

package/dist/cli/ink/components/ChannelList.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+function statusColor(status) {
+    const map = {
+        connected: 'green',
+        connecting: 'yellow',
+        disconnected: 'gray',
+        error: 'red',
+    };
+    return map[status];
+}
+function statusDot(status) {
+    return status === 'connected' ? '●' : status === 'connecting' ? '◐' : '○';
+}
+function formatRelative(iso) {
+    if (!iso)
+        return '-';
+    const diff = Date.now() - new Date(iso).getTime();
+    const s = Math.floor(diff / 1000);
+    if (s < 60)
+        return `${s}s ago`;
+    const m = Math.floor(s / 60);
+    if (m < 60)
+        return `${m}m ago`;
+    const h = Math.floor(m / 60);
+    if (h < 24)
+        return `${h}h ago`;
+    return `${Math.floor(h / 24)}d ago`;
+}
+export function ChannelList({ channels, loading, error }) {
+    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(Text, { bold: true, color: "white", children: "Chat Channels" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [loading && _jsx(Text, { dimColor: true, children: "  Loading channels..." }), error && _jsxs(Text, { color: "red", children: ["  ", error] }), !loading && !error && channels.length === 0 && (_jsx(Text, { dimColor: true, children: "  No channels configured" })), !loading && !error && channels.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { dimColor: true, bold: true, children: '  Channel'.padEnd(18) }), _jsx(Text, { dimColor: true, bold: true, children: 'Type'.padEnd(12) }), _jsx(Text, { dimColor: true, bold: true, children: 'Status'.padEnd(16) }), _jsx(Text, { dimColor: true, bold: true, children: 'Messages'.padEnd(10) }), _jsx(Text, { dimColor: true, bold: true, children: "Last active" })] }), channels.filter((c) => c.name).map((c) => (_jsxs(Box, { gap: 2, children: [_jsx(Text, { children: '  ' + (c.name ?? '').slice(0, 16).padEnd(16) }), _jsx(Text, { dimColor: true, children: (c.type ?? '').slice(0, 10).padEnd(10) }), _jsxs(Box, { width: 16, gap: 1, children: [_jsx(Text, { color: statusColor(c.status), children: statusDot(c.status) }), _jsx(Text, { color: statusColor(c.status), children: c.status })] }), _jsx(Text, { dimColor: true, children: String(c.messageCount ?? 0).padEnd(8) }), _jsx(Text, { dimColor: true, children: formatRelative(c.lastActivity) })] }, c.name)))] }))] })] }));
+}
+//# sourceMappingURL=ChannelList.js.map

package/dist/cli/ink/components/ConnectionStatus.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ConnectionStatus Component
+ *
+ * Small indicator shown in the session header area displaying the live
+ * server connection state, optional latency, and active provider.
+ *
+ * Visual states:
+ *   ● Connected   (green)
+ *   ○ Reconnecting... (yellow, animated dot cycle)
+ *   ✗ Disconnected (red)
+ */
+import React from 'react';
+export interface ConnectionStatusProps {
+    status: 'connected' | 'reconnecting' | 'disconnected';
+    latencyMs?: number;
+    provider?: string;
+}
+export declare const ConnectionStatus: React.FC<ConnectionStatusProps>;
+//# sourceMappingURL=ConnectionStatus.d.ts.map

package/dist/cli/ink/components/ConnectionStatus.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ConnectionStatus Component
+ *
+ * Small indicator shown in the session header area displaying the live
+ * server connection state, optional latency, and active provider.
+ *
+ * Visual states:
+ *   ● Connected   (green)
+ *   ○ Reconnecting... (yellow, animated dot cycle)
+ *   ✗ Disconnected (red)
+ */
+import { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+// Spinner frames used while reconnecting
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+export const ConnectionStatus = ({ status, latencyMs, provider, }) => {
+    const [spinnerIdx, setSpinnerIdx] = useState(0);
+    // Animate the spinner only while reconnecting
+    useEffect(() => {
+        if (status !== 'reconnecting')
+            return;
+        const id = setInterval(() => {
+            setSpinnerIdx(prev => (prev + 1) % SPINNER_FRAMES.length);
+        }, 80);
+        return () => clearInterval(id);
+    }, [status]);
+    let indicator;
+    let color;
+    let label;
+    switch (status) {
+        case 'connected':
+            indicator = '●';
+            color = 'green';
+            label = 'Connected';
+            break;
+        case 'reconnecting':
+            indicator = SPINNER_FRAMES[spinnerIdx] ?? '○';
+            color = 'yellow';
+            label = 'Reconnecting...';
+            break;
+        case 'disconnected':
+            indicator = '✗';
+            color = 'red';
+            label = 'Disconnected';
+            break;
+    }
+    return (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: color, children: indicator }), _jsx(Text, { color: color, children: label }), provider !== undefined && provider.length > 0 && (_jsxs(Text, { dimColor: true, children: ["via ", provider] })), latencyMs !== undefined && status === 'connected' && (_jsxs(Text, { dimColor: true, children: [latencyMs, "ms"] }))] }));
+};
+//# sourceMappingURL=ConnectionStatus.js.map