@agents-at-scale/ark 0.1.34 → 0.1.35-rc1

package/dist/ui/MainMenu.js

@@ -1,70 +1,232 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Text, Box, useInput } from 'ink';
-import SelectInput from 'ink-select-input';
+import { Text, Box, render, useInput } from 'ink';
+import Spinner from 'ink-spinner';
 import * as React from 'react';
-import DashboardCLI from '../components/DashboardCLI.js';
-import GeneratorUI from '../components/GeneratorUI.js';
-import { StatusChecker } from '../components/statusChecker.js';
-import { ConfigManager } from '../config.js';
-import { ArkClient } from '../lib/arkClient.js';
-const EXIT_TIMEOUT_MS = 1000;
-const MainMenu = () => {
-    const [selectedChoice, setSelectedChoice] = React.useState(null);
-    const [statusData, setStatusData] = React.useState(null);
-    const [isLoading, setIsLoading] = React.useState(false);
-    const [error, setError] = React.useState(null);
-    const choices = [
-        { label: '🏷️  Dashboard', value: 'dashboard' },
-        { label: '🔍 Status Check', value: 'status' },
-        { label: '🎯 Generate', value: 'generate' },
-        { label: '👋 Exit', value: 'exit' },
-    ];
-    React.useEffect(() => {
-        if (selectedChoice === 'exit') {
-            const timer = setTimeout(() => {
-                process.exit(0);
-            }, EXIT_TIMEOUT_MS);
-            return () => clearTimeout(timer);
+import { isArkReady } from '../lib/arkStatus.js';
+//  Helper function to unmount the main ink app - used when we move from a
+//  React TUI app to basic input/output.
+async function unmountInkApp() {
+    const app = globalThis.inkApp;
+    if (app) {
+        // Unmount the Ink app
+        app.unmount();
+        // Clear the global reference
+        delete globalThis.inkApp;
+        // Reset terminal to normal mode
+        if (process.stdin.isTTY) {
+            process.stdin.setRawMode(false);
+            process.stdin.pause();
         }
-    }, [selectedChoice]);
+        // Clear screen
+        console.clear();
+        // Small delay to ensure everything is flushed
+        await new Promise((resolve) => setTimeout(resolve, 50));
+    }
+}
+const MainMenu = ({ config }) => {
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [arkReady, setArkReady] = React.useState(null);
+    const [isChecking, setIsChecking] = React.useState(true);
     React.useEffect(() => {
-        if (selectedChoice === 'status' && !statusData && !isLoading) {
-            checkStatus();
+        const checkArkStatus = async () => {
+            setIsChecking(true);
+            const ready = await isArkReady();
+            setArkReady(ready);
+            setIsChecking(false);
+            // Reset selected index to 0 after status check
+            setSelectedIndex(0);
+        };
+        checkArkStatus();
+    }, []);
+    // Handle Ctrl+C to properly unmount Ink and restore terminal
+    React.useEffect(() => {
+        const handleExit = () => {
+            const app = globalThis.inkApp;
+            if (app) {
+                app.unmount();
+            }
+            process.exit(0);
+        };
+        process.on('SIGINT', handleExit);
+        return () => {
+            process.removeListener('SIGINT', handleExit);
+        };
+    }, []);
+    // Check if upgrade is available
+    const hasUpgrade = React.useMemo(() => {
+        if (!config.currentVersion || !config.latestVersion)
+            return false;
+        // Simple version comparison
+        return config.currentVersion !== config.latestVersion;
+    }, [config.currentVersion, config.latestVersion]);
+    const allChoices = [
+        {
+            label: 'Chat',
+            description: 'Interactive chat with Ark agents',
+            value: 'chat',
+            command: 'ark chat',
+        },
+        {
+            label: 'Install',
+            description: 'Install Ark',
+            value: 'install',
+            command: 'ark install',
+        },
+        {
+            label: 'Upgrade',
+            description: `Upgrade Ark from ${config.currentVersion} to ${config.latestVersion}`,
+            value: 'upgrade',
+            command: 'ark install -y',
+        },
+        {
+            label: 'Dashboard',
+            description: 'Open Ark dashboard in browser',
+            value: 'dashboard',
+            command: 'ark dashboard',
+        },
+        {
+            label: 'Status',
+            description: 'Check Ark services status',
+            value: 'status',
+            command: 'ark status',
+        },
+        {
+            label: 'Generate',
+            description: 'Generate new Ark components',
+            value: 'generate',
+            command: 'ark generate',
+        },
+        { label: 'Exit', description: 'Exit Ark CLI', value: 'exit' },
+    ];
+    // Filter choices based on Ark readiness
+    const choices = React.useMemo(() => {
+        // Don't return any choices while checking
+        if (isChecking)
+            return [];
+        if (!arkReady) {
+            // Only show Install, Status, and Exit when Ark is not ready
+            return allChoices.filter((choice) => ['install', 'status', 'exit'].includes(choice.value));
         }
-    }, [selectedChoice, statusData, isLoading]);
-    const checkStatus = async () => {
-        setIsLoading(true);
-        setError(null);
-        try {
-            const configManager = new ConfigManager();
-            const apiBaseUrl = await configManager.getApiBaseUrl();
-            const serviceUrls = await configManager.getServiceUrls();
-            const arkClient = new ArkClient(apiBaseUrl);
-            const statusChecker = new StatusChecker(arkClient);
-            const status = await statusChecker.checkAll(serviceUrls, apiBaseUrl);
-            setStatusData(status);
+        // Ark is ready - filter out install (already installed) and conditionally show upgrade
+        const filteredChoices = allChoices.filter((choice) => {
+            // Never show install when Ark is ready (it's already installed)
+            if (choice.value === 'install')
+                return false;
+            // Only show upgrade if there's actually an upgrade available
+            if (choice.value === 'upgrade' && !hasUpgrade)
+                return false;
+            return true;
+        });
+        return filteredChoices;
+    }, [arkReady, isChecking, hasUpgrade, allChoices]);
+    useInput((input, key) => {
+        // Don't process input while checking status
+        if (isChecking)
+            return;
+        if (key.upArrow || input === 'k') {
+            setSelectedIndex((prev) => (prev > 0 ? prev - 1 : choices.length - 1));
         }
-        catch (err) {
-            setError(err instanceof Error ? err.message : 'Unknown error occurred');
+        else if (key.downArrow || input === 'j') {
+            setSelectedIndex((prev) => (prev < choices.length - 1 ? prev + 1 : 0));
         }
-        finally {
-            setIsLoading(false);
+        else if (key.return) {
+            handleSelect(choices[selectedIndex]);
         }
-    };
-    useInput((input, key) => {
-        if (selectedChoice && selectedChoice !== 'exit') {
-            if (key.escape || input === 'q' || key.return) {
-                // For generate, only reset on specific key combinations to avoid conflicts
-                if (selectedChoice === 'generate' && !(key.escape || input === 'q')) {
-                    return;
-                }
-                setSelectedChoice(null);
-                setStatusData(null);
-                setError(null);
+        else {
+            // Handle number keys for quick selection
+            const num = parseInt(input, 10);
+            if (!isNaN(num) && num >= 1 && num <= choices.length) {
+                handleSelect(choices[num - 1]);
             }
         }
     });
-    const renderBanner = () => (_jsxs(Box, { flexDirection: "column", alignItems: "center", marginBottom: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: `
+    const handleSelect = async (item) => {
+        switch (item.value) {
+            case 'exit':
+                process.exit(0);
+                break;
+            case 'chat': {
+                // Unmount fullscreen app and clear screen.
+                await unmountInkApp();
+                // Import and start ChatUI in the same process
+                const { render } = await import('ink');
+                const { ArkApiProxy } = await import('../lib/arkApiProxy.js');
+                const ChatUI = (await import('../components/ChatUI.js')).default;
+                try {
+                    const proxy = new ArkApiProxy();
+                    const arkApiClient = await proxy.start();
+                    // Render ChatUI as a new Ink app
+                    render(_jsx(ChatUI, { arkApiClient: arkApiClient, arkApiProxy: proxy }));
+                }
+                catch (error) {
+                    const output = (await import('../lib/output.js')).default;
+                    output.error(error instanceof Error
+                        ? error.message
+                        : 'Failed to connect to Ark API');
+                    process.exit(1);
+                }
+                break;
+            }
+            case 'install': {
+                //  Unmount fullscreen app and clear screen.
+                await unmountInkApp();
+                // Spawn as a new process to avoid Ink/inquirer signal conflicts
+                const { execFileSync } = await import('child_process');
+                try {
+                    execFileSync(process.execPath, [process.argv[1], 'install'], {
+                        stdio: 'inherit',
+                        env: { ...process.env, FORCE_COLOR: '1' },
+                    });
+                }
+                catch (error) {
+                    // execFileSync throws if the process exits with non-zero
+                    process.exit(error.status || 1);
+                }
+                process.exit(0);
+                break; // Add break even though process.exit prevents reaching here
+            }
+            case 'upgrade': {
+                //  Unmount fullscreen app and clear screen.
+                await unmountInkApp();
+                // Spawn as a new process with -y flag for automatic upgrade
+                const { execFileSync } = await import('child_process');
+                try {
+                    execFileSync(process.execPath, [process.argv[1], 'install', '-y'], {
+                        stdio: 'inherit',
+                        env: { ...process.env, FORCE_COLOR: '1' },
+                    });
+                }
+                catch (error) {
+                    // execFileSync throws if the process exits with non-zero
+                    process.exit(error.status || 1);
+                }
+                process.exit(0);
+                break; // Add break even though process.exit prevents reaching here
+            }
+            case 'dashboard': {
+                //  Unmount fullscreen app and clear screen.
+                await unmountInkApp();
+                const { openDashboard } = await import('../commands/dashboard/index.js');
+                await openDashboard();
+                break;
+            }
+            case 'status': {
+                //  Unmount fullscreen app and clear screen.
+                await unmountInkApp();
+                const { checkStatus } = await import('../commands/status/index.js');
+                await checkStatus(config);
+                process.exit(0);
+                break; // Add break even though process.exit prevents reaching here
+            }
+            case 'generate': {
+                const GeneratorUI = (await import('../components/GeneratorUI.js'))
+                    .default;
+                render(_jsx(GeneratorUI, {}));
+                break;
+            }
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", alignItems: "center", marginBottom: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: `
     ╔═══════════════════════════════════════╗
     ║                                       ║
     ║         █████╗ ██████╗ ██╗  ██╗       ║
@@ -77,40 +239,9 @@ const MainMenu = () => {
     ║        Agents at Scale Platform       ║
     ║                                       ║
     ╚═══════════════════════════════════════╝
-        ` }), _jsx(Text, { color: "green", bold: true, children: "Welcome to ARK! \uD83D\uDE80" }), _jsx(Text, { color: "gray", children: "Interactive terminal interface for ARK agents" })] }));
-    const renderServiceStatus = (service) => {
-        const statusColor = service.status === 'healthy'
-            ? 'green'
-            : service.status === 'unhealthy'
-                ? 'red'
-                : 'yellow';
-        const statusIcon = service.status === 'healthy'
-            ? '✓'
-            : service.status === 'unhealthy'
-                ? '✗'
-                : '?';
-        return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Box, { children: [_jsxs(Text, { color: statusColor, children: [statusIcon, " "] }), _jsxs(Text, { bold: true, children: [service.name, ": "] }), _jsx(Text, { color: statusColor, children: service.status })] }), service.url && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: "gray", children: ["URL: ", service.url] }) })), service.details && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", children: service.details }) }))] }, service.name));
-    };
-    const renderDependencyStatus = (dep) => {
-        const statusColor = dep.installed ? 'green' : 'red';
-        const statusIcon = dep.installed ? '✓' : '✗';
-        const statusText = dep.installed ? 'installed' : 'missing';
-        return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Box, { children: [_jsxs(Text, { color: statusColor, children: [statusIcon, " "] }), _jsxs(Text, { bold: true, children: [dep.name, ": "] }), _jsx(Text, { color: statusColor, children: statusText })] }), dep.version && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: "gray", children: ["Version: ", dep.version] }) })), dep.details && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", children: dep.details }) }))] }, dep.name));
-    };
-    const renderStatus = () => {
-        if (isLoading) {
-            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "yellow", children: "\uD83D\uDD0D Checking ARK system status..." }), _jsx(Text, { color: "gray", children: "Please wait while we verify services and dependencies." })] }));
-        }
-        if (error) {
-            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "red", children: "\u274C Error checking status:" }), _jsx(Text, { color: "red", children: error }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "Press ESC, 'q', or Enter to return to menu..." }) })] }));
-        }
-        if (!statusData) {
-            return null;
-        }
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "cyan", bold: true, children: "\uD83D\uDD0D ARK System Status" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "cyan", bold: true, children: "\uD83D\uDCE1 ARK Services:" }) }), statusData.services.map(renderServiceStatus), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "cyan", bold: true, children: "\uD83D\uDEE0\uFE0F System Dependencies:" }) }), statusData.dependencies.map(renderDependencyStatus), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "Press ESC, 'q', or Enter to return to menu..." }) })] }));
-    };
-    return (_jsxs(_Fragment, { children: [renderBanner(), !selectedChoice && (_jsx(SelectInput, { items: choices, onSelect: (choice) => {
-                    setSelectedChoice(choice.value);
-                } })), selectedChoice === 'status' && renderStatus(), selectedChoice === 'dashboard' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "green", children: "\uD83C\uDFF7\uFE0F Dashboard feature selected" }), _jsx(DashboardCLI, {})] })), selectedChoice === 'generate' && _jsx(GeneratorUI, {}), selectedChoice === 'exit' && _jsx(Text, { color: "yellow", children: "\uD83D\uDC4B Goodbye!" })] }));
+        ` }), isChecking ? (_jsxs(Text, { color: "gray", children: [_jsx(Spinner, { type: "dots" }), " Checking Ark status..."] })) : arkReady ? (_jsxs(Box, { children: [_jsx(Text, { color: "green", bold: true, children: "\u25CF Ark is ready" }), config.currentVersion && (_jsxs(Text, { color: "gray", children: [" (", config.currentVersion, ")"] }))] })) : (_jsx(Text, { color: "yellow", bold: true, children: "\u25CF Ark is not installed" })), _jsx(Text, { color: "gray", children: "Interactive terminal interface for Ark agents" })] }), !isChecking && (_jsx(Box, { flexDirection: "column", paddingX: 4, marginTop: 1, children: choices.map((choice, index) => {
+                    const isSelected = index === selectedIndex;
+                    return (_jsxs(Box, { flexDirection: "row", paddingY: 0, children: [_jsx(Text, { color: "gray", dimColor: true, children: isSelected ? '❯ ' : '  ' }), _jsxs(Text, { color: "gray", dimColor: true, children: [index + 1, "."] }), _jsx(Box, { marginLeft: 1, width: 20, children: _jsx(Text, { color: isSelected ? 'green' : 'white', bold: isSelected, children: choice.label }) }), _jsx(Text, { color: "gray", children: choice.description })] }, choice.value));
+                }) }))] }));
 };
 export default MainMenu;

package/dist/ui/ModelSelector.d.ts

@@ -0,0 +1,8 @@
+import { Model, ArkApiClient } from '../lib/arkApiClient.js';
+interface ModelSelectorProps {
+    arkApiClient: ArkApiClient;
+    onSelect: (model: Model) => void;
+    onExit: () => void;
+}
+export declare function ModelSelector({ arkApiClient, onSelect, onExit, }: ModelSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/ModelSelector.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+export function ModelSelector({ arkApiClient, onSelect, onExit, }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [models, setModels] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        arkApiClient
+            .getModels()
+            .then((fetchedModels) => {
+            setModels(fetchedModels);
+            setLoading(false);
+        })
+            .catch((err) => {
+            setError(err.message || 'Failed to fetch models');
+            setLoading(false);
+        });
+    }, [arkApiClient]);
+    useInput((input, key) => {
+        if (key.escape) {
+            onExit();
+        }
+        else if (key.upArrow || input === 'k') {
+            setSelectedIndex((prev) => (prev === 0 ? models.length - 1 : prev - 1));
+        }
+        else if (key.downArrow || input === 'j') {
+            setSelectedIndex((prev) => (prev === models.length - 1 ? 0 : prev + 1));
+        }
+        else if (key.return) {
+            onSelect(models[selectedIndex]);
+        }
+        else {
+            // Handle number keys for quick selection
+            const num = parseInt(input, 10);
+            if (!isNaN(num) && num >= 1 && num <= models.length) {
+                onSelect(models[num - 1]);
+            }
+        }
+    });
+    if (loading) {
+        return (_jsx(Box, { children: _jsx(Text, { children: "Loading models..." }) }));
+    }
+    if (error) {
+        return (_jsx(Box, { children: _jsxs(Text, { color: "red", children: ["Error: ", error] }) }));
+    }
+    if (models.length === 0) {
+        return (_jsx(Box, { children: _jsx(Text, { children: "No models available" }) }));
+    }
+    const selectedModel = models[selectedIndex];
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 2, paddingY: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "Select Model" }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Choose a model to start a conversation with" }) }), _jsx(Box, { flexDirection: "column", children: models.map((model, index) => (_jsx(Box, { marginBottom: 0, children: _jsxs(Text, { color: index === selectedIndex ? 'green' : undefined, children: [index === selectedIndex ? '❯ ' : '  ', index + 1, ". ", model.name, model.type ? ` (${model.type})` : ''] }) }, model.name))) }), selectedModel && selectedModel.model && (_jsx(Box, { marginTop: 1, paddingLeft: 2, children: _jsxs(Text, { dimColor: true, wrap: "wrap", children: ["Model: ", selectedModel.model] }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter to confirm \u00B7 Number to select \u00B7 Esc to exit" }) })] }));
+}

package/dist/ui/TeamSelector.d.ts

@@ -0,0 +1,8 @@
+import { Team, ArkApiClient } from '../lib/arkApiClient.js';
+interface TeamSelectorProps {
+    arkApiClient: ArkApiClient;
+    onSelect: (team: Team) => void;
+    onExit: () => void;
+}
+export declare function TeamSelector({ arkApiClient, onSelect, onExit, }: TeamSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/TeamSelector.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+export function TeamSelector({ arkApiClient, onSelect, onExit, }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [teams, setTeams] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        arkApiClient
+            .getTeams()
+            .then((fetchedTeams) => {
+            setTeams(fetchedTeams);
+            setLoading(false);
+        })
+            .catch((err) => {
+            setError(err.message || 'Failed to fetch teams');
+            setLoading(false);
+        });
+    }, [arkApiClient]);
+    useInput((input, key) => {
+        if (key.escape) {
+            onExit();
+        }
+        else if (key.upArrow || input === 'k') {
+            setSelectedIndex((prev) => (prev === 0 ? teams.length - 1 : prev - 1));
+        }
+        else if (key.downArrow || input === 'j') {
+            setSelectedIndex((prev) => (prev === teams.length - 1 ? 0 : prev + 1));
+        }
+        else if (key.return) {
+            onSelect(teams[selectedIndex]);
+        }
+        else {
+            // Handle number keys for quick selection
+            const num = parseInt(input, 10);
+            if (!isNaN(num) && num >= 1 && num <= teams.length) {
+                onSelect(teams[num - 1]);
+            }
+        }
+    });
+    if (loading) {
+        return (_jsx(Box, { children: _jsx(Text, { children: "Loading teams..." }) }));
+    }
+    if (error) {
+        return (_jsx(Box, { children: _jsxs(Text, { color: "red", children: ["Error: ", error] }) }));
+    }
+    if (teams.length === 0) {
+        return (_jsx(Box, { children: _jsx(Text, { children: "No teams available" }) }));
+    }
+    const selectedTeam = teams[selectedIndex];
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 2, paddingY: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "Select Team" }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Choose a team to start a conversation with" }) }), _jsx(Box, { flexDirection: "column", children: teams.map((team, index) => (_jsx(Box, { marginBottom: 0, children: _jsxs(Text, { color: index === selectedIndex ? 'green' : undefined, children: [index === selectedIndex ? '❯ ' : '  ', index + 1, ". ", team.name, team.strategy ? ` (${team.strategy})` : ''] }) }, team.name))) }), selectedTeam &&
+                (selectedTeam.description || selectedTeam.members_count) && (_jsx(Box, { marginTop: 1, paddingLeft: 2, children: _jsx(Text, { dimColor: true, wrap: "wrap", children: selectedTeam.description ||
+                        `Members: ${selectedTeam.members_count}` }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter to confirm \u00B7 Number to select \u00B7 Esc to exit" }) })] }));
+}

package/dist/ui/ToolSelector.d.ts

@@ -0,0 +1,8 @@
+import { Tool, ArkApiClient } from '../lib/arkApiClient.js';
+interface ToolSelectorProps {
+    arkApiClient: ArkApiClient;
+    onSelect: (tool: Tool) => void;
+    onExit: () => void;
+}
+export declare function ToolSelector({ arkApiClient, onSelect, onExit, }: ToolSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/ToolSelector.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+export function ToolSelector({ arkApiClient, onSelect, onExit, }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [tools, setTools] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        arkApiClient
+            .getTools()
+            .then((fetchedTools) => {
+            setTools(fetchedTools);
+            setLoading(false);
+        })
+            .catch((err) => {
+            setError(err.message || 'Failed to fetch tools');
+            setLoading(false);
+        });
+    }, [arkApiClient]);
+    useInput((input, key) => {
+        if (key.escape) {
+            onExit();
+        }
+        else if (key.upArrow || input === 'k') {
+            setSelectedIndex((prev) => (prev === 0 ? tools.length - 1 : prev - 1));
+        }
+        else if (key.downArrow || input === 'j') {
+            setSelectedIndex((prev) => (prev === tools.length - 1 ? 0 : prev + 1));
+        }
+        else if (key.return) {
+            onSelect(tools[selectedIndex]);
+        }
+        else {
+            // Handle number keys for quick selection
+            const num = parseInt(input, 10);
+            if (!isNaN(num) && num >= 1 && num <= tools.length) {
+                onSelect(tools[num - 1]);
+            }
+        }
+    });
+    if (loading) {
+        return (_jsx(Box, { children: _jsx(Text, { children: "Loading tools..." }) }));
+    }
+    if (error) {
+        return (_jsx(Box, { children: _jsxs(Text, { color: "red", children: ["Error: ", error] }) }));
+    }
+    if (tools.length === 0) {
+        return (_jsx(Box, { children: _jsx(Text, { children: "No tools available" }) }));
+    }
+    const selectedTool = tools[selectedIndex];
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 2, paddingY: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "Select Tool" }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Choose a tool to start a conversation with" }) }), _jsx(Box, { flexDirection: "column", children: tools.map((tool, index) => (_jsx(Box, { marginBottom: 0, children: _jsxs(Text, { color: index === selectedIndex ? 'green' : undefined, children: [index === selectedIndex ? '❯ ' : '  ', index + 1, ". ", tool.name] }) }, tool.name))) }), selectedTool && selectedTool.description && (_jsx(Box, { marginTop: 1, paddingLeft: 2, children: _jsx(Text, { dimColor: true, wrap: "wrap", children: selectedTool.description }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter to confirm \u00B7 Number to select \u00B7 Esc to exit" }) })] }));
+}

package/dist/ui/statusFormatter.d.ts

@@ -1,9 +1,24 @@
-import { StatusData } from '../lib/types.js';
+export type StatusColor = 'green' | 'red' | 'yellow' | 'gray' | 'white' | 'cyan' | 'bold';
+export interface StatusLine {
+    icon: string;
+    iconColor?: StatusColor;
+    status: string;
+    statusColor?: StatusColor;
+    name: string;
+    nameColor?: StatusColor;
+    details?: string;
+    subtext?: string;
+}
+export interface StatusSection {
+    title: string;
+    lines: StatusLine[];
+}
+/**
+ * Simple status formatter that just formats sections and lines
+ * The caller is responsible for deciding what to show
+ */
 export declare class StatusFormatter {
-    /**
-     * Print status check results to console
-     */
-    static printStatus(statusData: StatusData): void;
-    private static printService;
-    private static printDependency;
+    static printSections(sections: StatusSection[]): void;
+    private static applyColor;
+    private static printLine;
 }