profclaw 0.0.1-beta.3 → 2.3.0

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

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

@@ -0,0 +1,19 @@
+/**
+ * CostBar Component
+ *
+ * Horizontal progress bar showing budget usage.
+ * - Green when < 50%
+ * - Yellow when 50-80%
+ * - Red when > 80%
+ *
+ * Shows: tokens used / max, estimated cost, and percentage.
+ */
+import React from 'react';
+export interface CostBarProps {
+    tokensUsed: number;
+    tokensMax: number;
+    estimatedCost?: number;
+    width?: number;
+}
+export declare const CostBar: React.FC<CostBarProps>;
+//# sourceMappingURL=CostBar.d.ts.map

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useStdout } from 'ink';
+function formatTokens(count) {
+    if (count >= 1000000)
+        return `${(count / 1000000).toFixed(1)}M`;
+    if (count >= 1000)
+        return `${(count / 1000).toFixed(1)}K`;
+    return count.toString();
+}
+function getBarColor(ratio) {
+    if (ratio > 0.8)
+        return 'red';
+    if (ratio > 0.5)
+        return 'yellow';
+    return 'green';
+}
+function buildBar(filled, total, fillChar = '█', emptyChar = '░') {
+    return fillChar.repeat(filled) + emptyChar.repeat(total - filled);
+}
+export const CostBar = ({ tokensUsed, tokensMax, estimatedCost, width, }) => {
+    const { stdout } = useStdout();
+    const termWidth = width ?? stdout?.columns ?? 80;
+    // Reserve space for labels on each side
+    const barWidth = Math.max(10, termWidth - 40);
+    const ratio = tokensMax > 0 ? Math.min(tokensUsed / tokensMax, 1) : 0;
+    const filledCount = Math.round(ratio * barWidth);
+    const barColor = getBarColor(ratio);
+    const pct = Math.round(ratio * 100);
+    const bar = buildBar(filledCount, barWidth);
+    const costStr = estimatedCost !== undefined && estimatedCost > 0
+        ? ` $${estimatedCost.toFixed(4)}`
+        : '';
+    return (_jsxs(Box, { flexDirection: "row", gap: 1, paddingX: 1, children: [_jsx(Text, { dimColor: true, children: "tokens" }), _jsx(Text, { color: barColor, children: bar }), _jsxs(Text, { dimColor: true, children: [formatTokens(tokensUsed), "/", formatTokens(tokensMax), " (", pct, "%)", costStr] })] }));
+};
+//# sourceMappingURL=CostBar.js.map

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface Hook {
+    name: string;
+    point: string;
+    priority?: number;
+    active: boolean;
+}
+interface HookStatusProps {
+    hooks: Hook[];
+    loading?: boolean;
+    error?: string;
+}
+export declare function HookStatus({ hooks, loading, error }: HookStatusProps): React.ReactElement;
+export {};
+//# sourceMappingURL=HookStatus.d.ts.map

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function HookStatus({ hooks, loading, error }) {
+    const sorted = [...hooks].sort((a, b) => (a.priority ?? 50) - (b.priority ?? 50));
+    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(Text, { bold: true, color: "white", children: "Registered Hooks" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [loading && _jsx(Text, { dimColor: true, children: "  Loading hooks..." }), error && _jsxs(Text, { color: "red", children: ["  ", error] }), !loading && !error && sorted.length === 0 && (_jsx(Text, { dimColor: true, children: "  No hooks registered" })), !loading && !error && sorted.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { dimColor: true, bold: true, children: '  Name'.padEnd(22) }), _jsx(Text, { dimColor: true, bold: true, children: 'Hook point'.padEnd(20) }), _jsx(Text, { dimColor: true, bold: true, children: 'Priority'.padEnd(10) }), _jsx(Text, { dimColor: true, bold: true, children: "State" })] }), sorted.map((h, i) => (_jsxs(Box, { gap: 2, children: [_jsx(Text, { children: '  ' + h.name.slice(0, 20).padEnd(20) }), _jsx(Text, { dimColor: true, children: h.point.slice(0, 18).padEnd(18) }), _jsx(Text, { dimColor: true, children: String(h.priority ?? '-').padEnd(8) }), _jsx(Text, { color: h.active ? 'green' : 'gray', children: h.active ? '● active' : '○ inactive' })] }, `${h.name}-${i}`)))] }))] })] }));
+}
+//# sourceMappingURL=HookStatus.js.map

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

@@ -0,0 +1,21 @@
+/**
+ * PermissionPrompt Component
+ *
+ * Interactive dialog asking user to approve/deny a tool action.
+ * Shows: tool name, args, permission level, reason.
+ * Options: [y]es, [n]o, [a]lways allow, [d]eny always.
+ *
+ * Captures keypress and calls onDecision with the result.
+ */
+import React from 'react';
+export type PermissionDecision = 'yes' | 'no' | 'always' | 'deny_always';
+export type PermissionLevel = 'read' | 'write' | 'execute' | 'network' | 'sensitive';
+export interface PermissionPromptProps {
+    toolName: string;
+    args: Record<string, unknown>;
+    permissionLevel: PermissionLevel;
+    reason?: string;
+    onDecision: (decision: PermissionDecision) => void;
+}
+export declare const PermissionPrompt: React.FC<PermissionPromptProps>;
+//# sourceMappingURL=PermissionPrompt.d.ts.map

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PermissionPrompt Component
+ *
+ * Interactive dialog asking user to approve/deny a tool action.
+ * Shows: tool name, args, permission level, reason.
+ * Options: [y]es, [n]o, [a]lways allow, [d]eny always.
+ *
+ * Captures keypress and calls onDecision with the result.
+ */
+import { useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+const LEVEL_COLORS = {
+    read: 'green',
+    write: 'yellow',
+    execute: 'red',
+    network: 'magenta',
+    sensitive: 'red',
+};
+function argsDisplay(args) {
+    const entries = Object.entries(args).slice(0, 3);
+    return entries
+        .map(([k, v]) => {
+        const val = String(v ?? '');
+        return `${k}: ${val.length > 40 ? val.slice(0, 39) + '…' : val}`;
+    })
+        .join(', ');
+}
+export const PermissionPrompt = ({ toolName, args, permissionLevel, reason, onDecision, }) => {
+    const levelColor = LEVEL_COLORS[permissionLevel];
+    useInput((input, key) => {
+        if (key.escape || input === 'n') {
+            onDecision('no');
+        }
+        else if (input === 'y') {
+            onDecision('yes');
+        }
+        else if (input === 'a') {
+            onDecision('always');
+        }
+        else if (input === 'd') {
+            onDecision('deny_always');
+        }
+    });
+    // Memoize useEffect dependency
+    useEffect(() => {
+        // no-op; key capture is handled by useInput above
+    }, []);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 2, paddingY: 1, marginY: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: "Permission Required" }), _jsxs(Box, { marginTop: 1, flexDirection: "row", gap: 1, children: [_jsx(Text, { dimColor: true, children: "Tool:" }), _jsx(Text, { bold: true, color: "cyan", children: toolName }), _jsx(Text, { dimColor: true, children: "\u00B7" }), _jsx(Text, { color: levelColor, children: permissionLevel })] }), Object.keys(args).length > 0 && (_jsxs(Box, { marginTop: 0, flexDirection: "row", gap: 1, children: [_jsx(Text, { dimColor: true, children: "Args:" }), _jsx(Text, { color: "gray", children: argsDisplay(args) })] })), reason !== undefined && reason.length > 0 && (_jsxs(Box, { marginTop: 0, flexDirection: "row", gap: 1, children: [_jsx(Text, { dimColor: true, children: "Why:" }), _jsx(Text, { color: "white", children: reason })] })), _jsxs(Box, { marginTop: 1, flexDirection: "row", gap: 2, children: [_jsx(Text, { color: "green", children: "[y] Yes" }), _jsx(Text, { color: "red", children: "[n] No" }), _jsx(Text, { color: "cyan", children: "[a] Always allow" }), _jsx(Text, { color: "magenta", children: "[d] Always deny" })] })] }));
+};
+//# sourceMappingURL=PermissionPrompt.js.map

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

@@ -0,0 +1,23 @@
+/**
+ * PlanView Component
+ *
+ * Renders a Plan with steps. Each step shows: index, description,
+ * and status (checkbox style).
+ * - Green checkmark for completed
+ * - Yellow circle for in_progress
+ * - Gray dash for pending
+ */
+import React from 'react';
+export type PlanStepStatus = 'pending' | 'in_progress' | 'completed' | 'failed' | 'skipped';
+export interface PlanStep {
+    index: number;
+    description: string;
+    status: PlanStepStatus;
+    detail?: string;
+}
+export interface PlanViewProps {
+    title?: string;
+    steps: PlanStep[];
+}
+export declare const PlanView: React.FC<PlanViewProps>;
+//# sourceMappingURL=PlanView.d.ts.map

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+const STEP_ICON = {
+    pending: '○',
+    in_progress: '◐',
+    completed: '✓',
+    failed: '✗',
+    skipped: '—',
+};
+const STEP_COLOR = {
+    pending: 'gray',
+    in_progress: 'yellow',
+    completed: 'green',
+    failed: 'red',
+    skipped: 'gray',
+};
+const PlanStepRow = ({ step }) => {
+    const icon = STEP_ICON[step.status];
+    const color = STEP_COLOR[step.status];
+    const isActive = step.status === 'in_progress';
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: color, children: icon }), _jsxs(Text, { color: isActive ? 'white' : 'gray', bold: isActive, children: [step.index + 1, "."] }), _jsx(Text, { color: isActive ? 'white' : 'gray', children: step.description })] }), step.detail !== undefined && step.detail.length > 0 && (_jsx(Box, { paddingLeft: 4, children: _jsx(Text, { dimColor: true, children: step.detail }) }))] }));
+};
+export const PlanView = ({ title, steps }) => {
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, marginY: 1, children: [title !== undefined && title.length > 0 && (_jsx(Text, { bold: true, color: "cyan", children: title })), steps.map((step) => (_jsx(PlanStepRow, { step: step }, step.index)))] }));
+};
+//# sourceMappingURL=PlanView.js.map

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

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface Provider {
+    type: string;
+    healthy: boolean;
+    latencyMs?: number;
+    modelCount?: number;
+    priority?: number;
+}
+interface ProviderListProps {
+    providers: Provider[];
+    loading?: boolean;
+    error?: string;
+}
+export declare function ProviderList({ providers, loading, error }: ProviderListProps): React.ReactElement;
+export {};
+//# sourceMappingURL=ProviderList.d.ts.map

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+function StatusDot({ healthy }) {
+    return (_jsx(Text, { color: healthy ? 'green' : 'red', children: healthy ? '●' : '●' }));
+}
+function LatencyLabel({ ms }) {
+    if (ms == null)
+        return _jsx(Text, { dimColor: true, children: "-" });
+    const color = ms < 500 ? 'green' : ms < 1500 ? 'yellow' : 'red';
+    return _jsxs(Text, { color: color, children: [ms, "ms"] });
+}
+export function ProviderList({ providers, loading, error }) {
+    const sorted = [...providers].sort((a, b) => (a.priority ?? 99) - (b.priority ?? 99));
+    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(Text, { bold: true, color: "white", children: "AI Providers" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [loading && _jsx(Text, { dimColor: true, children: "  Loading providers..." }), error && _jsxs(Text, { color: "red", children: ["  ", error] }), !loading && !error && sorted.length === 0 && (_jsx(Text, { dimColor: true, children: "  No providers configured" })), !loading && !error && sorted.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { dimColor: true, bold: true, children: '  Provider'.padEnd(16) }), _jsx(Text, { dimColor: true, bold: true, children: 'Status'.padEnd(10) }), _jsx(Text, { dimColor: true, bold: true, children: 'Latency'.padEnd(10) }), _jsx(Text, { dimColor: true, bold: true, children: "Models" })] }), sorted.filter((p) => p.type).map((p) => (_jsxs(Box, { gap: 2, children: [_jsx(Text, { children: '  ' + (p.type ?? '').padEnd(14) }), _jsxs(Box, { width: 10, gap: 1, children: [_jsx(StatusDot, { healthy: p.healthy }), _jsx(Text, { color: p.healthy ? 'green' : 'red', children: p.healthy ? 'online' : 'offline' })] }), _jsx(Box, { width: 10, children: _jsx(LatencyLabel, { ms: p.latencyMs }) }), _jsx(Text, { dimColor: true, children: p.modelCount != null ? String(p.modelCount) : '-' })] }, p.type)))] }))] })] }));
+}
+//# sourceMappingURL=ProviderList.js.map

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

@@ -0,0 +1,15 @@
+/**
+ * SessionHeader Component
+ *
+ * Compact one-line display showing session info:
+ * model name, provider, session ID, and mode (pico/mini/pro).
+ */
+import React from 'react';
+export interface SessionHeaderProps {
+    model: string;
+    provider: string;
+    sessionId: string;
+    mode: 'pico' | 'mini' | 'pro' | 'chat' | 'agentic';
+}
+export declare const SessionHeader: React.FC<SessionHeaderProps>;
+//# sourceMappingURL=SessionHeader.d.ts.map

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+const MODE_COLORS = {
+    pico: 'cyan',
+    mini: 'green',
+    pro: 'magenta',
+    chat: 'cyan',
+    agentic: 'yellow',
+};
+export const SessionHeader = ({ model, provider, sessionId, mode, }) => {
+    const modeColor = MODE_COLORS[mode] ?? 'white';
+    const shortId = sessionId.slice(0, 8);
+    return (_jsxs(Box, { flexDirection: "row", gap: 2, borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: "profClaw" }), _jsx(Text, { dimColor: true, children: "\u00B7" }), _jsx(Text, { color: "white", children: model }), _jsx(Text, { dimColor: true, children: "via" }), _jsx(Text, { color: "blue", children: provider }), _jsx(Text, { dimColor: true, children: "\u00B7" }), _jsx(Text, { color: modeColor, children: mode }), _jsx(Text, { dimColor: true, children: "\u00B7" }), _jsxs(Text, { dimColor: true, children: ["#", shortId] })] }));
+};
+//# sourceMappingURL=SessionHeader.js.map

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

@@ -0,0 +1,20 @@
+/**
+ * StreamingMessage Component
+ *
+ * Renders streaming or complete LLM output with full markdown formatting.
+ * Delegates to renderMarkdown() in markdown-renderer.tsx for consistent,
+ * rich rendering: bold, italic, code blocks with syntax highlighting,
+ * headings, blockquotes, lists, links, strikethrough, and horizontal rules.
+ *
+ * For streaming, pass isStreaming=true and update `content` as tokens arrive.
+ * A blinking cursor is shown at the end of the partial line while streaming.
+ */
+import React from 'react';
+export interface StreamingMessageProps {
+    role: 'user' | 'assistant';
+    content: string;
+    isStreaming?: boolean;
+    model?: string;
+}
+export declare const StreamingMessage: React.FC<StreamingMessageProps>;
+//# sourceMappingURL=StreamingMessage.d.ts.map

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * StreamingMessage Component
+ *
+ * Renders streaming or complete LLM output with full markdown formatting.
+ * Delegates to renderMarkdown() in markdown-renderer.tsx for consistent,
+ * rich rendering: bold, italic, code blocks with syntax highlighting,
+ * headings, blockquotes, lists, links, strikethrough, and horizontal rules.
+ *
+ * For streaming, pass isStreaming=true and update `content` as tokens arrive.
+ * A blinking cursor is shown at the end of the partial line while streaming.
+ */
+import { useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { renderMarkdown } from '../markdown-renderer.js';
+export const StreamingMessage = ({ role, content, isStreaming = false, model, }) => {
+    const isUser = role === 'user';
+    // For streaming, append the cursor character to the raw content so
+    // renderMarkdown sees it as part of the last text run.
+    const displayContent = isStreaming ? content + '▌' : content;
+    // Memoize rendered output so renderMarkdown is only called when content changes
+    const rendered = useMemo(() => {
+        return renderMarkdown(displayContent, { syntaxHighlight: true, linkStyle: 'inline' });
+    }, [displayContent]);
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, marginY: 0, borderLeft: !isUser, borderTop: false, borderBottom: false, borderRight: false, borderLeftColor: !isUser ? 'cyan' : undefined, borderStyle: "single", children: [_jsxs(Box, { flexDirection: "row", gap: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: isUser ? 'green' : 'cyan', children: isUser ? 'You' : 'profClaw' }), model !== undefined && !isUser && (_jsxs(Text, { dimColor: true, children: ["(", model, ")"] }))] }), _jsx(Box, { flexDirection: "column", paddingLeft: isUser ? 0 : 1, children: rendered })] }));
+};
+//# sourceMappingURL=StreamingMessage.js.map