agentk8 2.1.4 → 2.2.1

package/dist/cli.js

@@ -4,7 +4,7 @@ import { render } from 'ink';
 import meow from 'meow';
 import { App } from './components/App.js';
 import { checkClaudeInstalled } from './lib/claude.js';
-const VERSION = '2.1.4';
+const VERSION = '2.2.1';
 const cli = meow(`
   Usage
     $ agentk8 [options]

package/dist/components/AgentPanel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type AgentName = 'Orchestrator' | 'Engineer' | 'Tester' | 'Security' | 'Scout' | 'Researcher' | 'ML Engineer' | 'Data Engineer' | 'Evaluator';
+export type AgentState = 'idle' | 'active' | 'done';
+interface AgentPanelProps {
+    mode: 'dev' | 'ml';
+    activeAgent?: AgentName;
+    completedAgents: AgentName[];
+}
+export declare const AgentPanel: React.FC<AgentPanelProps>;
+export default AgentPanel;

package/dist/components/AgentPanel.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+const theme = {
+    border: '#2d3748',
+    accent: '#4fd1c5',
+    highlight: '#81e6d9',
+    dim: '#4a5568',
+    success: '#48bb78',
+    active: '#f6e05e',
+};
+// Animated border characters
+const borderFrames = ['◢', '◣', '◤', '◥'];
+const pulseChars = ['░', '▒', '▓', '█', '▓', '▒'];
+const AgentBox = ({ name, icon, state, width }) => {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        if (state !== 'active')
+            return;
+        const interval = setInterval(() => {
+            setFrame(f => (f + 1) % borderFrames.length);
+        }, 150);
+        return () => clearInterval(interval);
+    }, [state]);
+    const borderColor = state === 'active' ? theme.active : state === 'done' ? theme.success : theme.border;
+    const textColor = state === 'active' ? theme.highlight : state === 'done' ? theme.success : theme.dim;
+    const corner = state === 'active' ? borderFrames[frame] : state === 'done' ? '✓' : '○';
+    const innerWidth = width - 4;
+    const paddedName = name.length > innerWidth ? name.slice(0, innerWidth) : name.padEnd(innerWidth);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: borderColor, children: corner }), _jsx(Text, { color: borderColor, children: '─'.repeat(width - 2) }), _jsx(Text, { color: borderColor, children: corner })] }), _jsxs(Box, { children: [_jsx(Text, { color: borderColor, children: "\u2502" }), _jsxs(Text, { color: textColor, children: [" ", icon, " "] }), _jsx(Text, { color: textColor, children: paddedName }), _jsx(Text, { color: borderColor, children: "\u2502" })] }), _jsxs(Box, { children: [_jsx(Text, { color: borderColor, children: state === 'active' ? borderFrames[(frame + 2) % 4] : '└' }), _jsx(Text, { color: borderColor, children: '─'.repeat(width - 2) }), _jsx(Text, { color: borderColor, children: state === 'active' ? borderFrames[(frame + 2) % 4] : '┘' })] })] }));
+};
+export const AgentPanel = ({ mode, activeAgent, completedAgents }) => {
+    const devAgents = [
+        { name: 'Orchestrator', icon: '◆' },
+        { name: 'Engineer', icon: '⚙' },
+        { name: 'Tester', icon: '✓' },
+        { name: 'Security', icon: '⛨' },
+    ];
+    const mlAgents = [
+        { name: 'Orchestrator', icon: '◆' },
+        { name: 'Researcher', icon: '◈' },
+        { name: 'ML Engineer', icon: '⬡' },
+        { name: 'Evaluator', icon: '◉' },
+    ];
+    const agents = mode === 'dev' ? devAgents : mlAgents;
+    const boxWidth = 16;
+    const getState = (name) => {
+        if (activeAgent === name)
+            return 'active';
+        if (completedAgents.includes(name))
+            return 'done';
+        return 'idle';
+    };
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { justifyContent: "center", children: [_jsx(Text, { color: theme.dim, children: "\u2500\u2500\u2500 " }), _jsx(Text, { color: theme.accent, children: "Agents" }), _jsx(Text, { color: theme.dim, children: " \u2500\u2500\u2500" })] }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: agents.map((agent, i) => (_jsx(Box, { marginRight: i < agents.length - 1 ? 1 : 0, children: _jsx(AgentBox, { name: agent.name, icon: agent.icon, state: getState(agent.name), width: boxWidth }) }, agent.name))) })] }));
+};
+export default AgentPanel;

package/dist/components/AgentStatus.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type AgentName = 'Orchestrator' | 'Engineer' | 'Tester' | 'Security' | 'Scout' | 'Researcher' | 'ML Engineer' | 'Data Engineer' | 'Evaluator';
+export type AgentState = 'idle' | 'thinking' | 'working' | 'done';
+interface Agent {
+    name: AgentName;
+    state: AgentState;
+}
+interface AgentStatusProps {
+    agents: Agent[];
+    mode: 'dev' | 'ml';
+}
+export declare const AgentStatus: React.FC<AgentStatusProps>;
+export default AgentStatus;

package/dist/components/AgentStatus.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+const theme = {
+    accent: '#4fd1c5',
+    highlight: '#81e6d9',
+    dim: '#4a5568',
+    border: '#2d3748',
+    success: '#48bb78',
+    warning: '#ecc94b',
+};
+const agentIcons = {
+    Orchestrator: '◆',
+    Engineer: '⚙',
+    Tester: '✓',
+    Security: '⛨',
+    Scout: '◎',
+    Researcher: '◈',
+    'ML Engineer': '⬡',
+    'Data Engineer': '⬢',
+    Evaluator: '◉',
+};
+const stateColors = {
+    idle: theme.dim,
+    thinking: theme.warning,
+    working: theme.accent,
+    done: theme.success,
+};
+const stateIndicators = {
+    idle: '○',
+    thinking: '◐',
+    working: '●',
+    done: '✓',
+};
+export const AgentStatus = ({ agents, mode }) => {
+    if (agents.length === 0)
+        return null;
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, marginLeft: 2, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: theme.dim, children: "\u250C\u2500 " }), _jsx(Text, { color: theme.accent, children: "Active Agents" }), _jsx(Text, { color: theme.dim, children: " \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" })] }), agents.map((agent, i) => (_jsxs(Box, { marginLeft: 1, children: [_jsx(Text, { color: theme.dim, children: "\u2502 " }), _jsxs(Text, { color: stateColors[agent.state], children: [stateIndicators[agent.state], " "] }), _jsxs(Text, { color: theme.highlight, children: [agentIcons[agent.name], " "] }), _jsx(Text, { color: agent.state === 'idle' ? theme.dim : theme.highlight, children: agent.name }), agent.state !== 'idle' && agent.state !== 'done' && (_jsxs(Text, { color: theme.dim, children: [" ", agent.state, "..."] }))] }, agent.name))), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.dim, children: "\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }) })] }));
+};
+export default AgentStatus;

package/dist/components/App.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Text, useApp, useInput, Static } from 'ink';
-import { Banner } from './Banner.js';
+import { WelcomeBox } from './WelcomeBox.js';
 import { ChatMessage } from './ChatMessage.js';
 import { Input } from './Input.js';
 import { StatusBar } from './StatusBar.js';
@@ -15,6 +15,24 @@ export const App = ({ mode, version }) => {
     const [totalTokens, setTotalTokens] = useState(0);
     const [startTime] = useState(new Date());
     const [error, setError] = useState(null);
+    const [executionMode, setExecutionMode] = useState('plan');
+    const [activeAgent, setActiveAgent] = useState(undefined);
+    const [completedAgents, setCompletedAgents] = useState([]);
+    const [pendingPlan, setPendingPlan] = useState(null);
+    const [awaitingApproval, setAwaitingApproval] = useState(false);
+    // Detect agents mentioned in response
+    const detectMentionedAgents = (content) => {
+        const agents = [];
+        const devAgents = ['Engineer', 'Tester', 'Security', 'Scout'];
+        const mlAgents = ['Researcher', 'ML Engineer', 'Data Engineer', 'Evaluator'];
+        const relevantAgents = mode === 'dev' ? devAgents : mlAgents;
+        for (const agent of relevantAgents) {
+            if (content.toLowerCase().includes(agent.toLowerCase())) {
+                agents.push(agent);
+            }
+        }
+        return agents;
+    };
     // Handle input submission
     const handleSubmit = async (input) => {
         // Check for commands
@@ -22,6 +40,23 @@ export const App = ({ mode, version }) => {
             handleCommand(input);
             return;
         }
+        // Handle approval response
+        if (awaitingApproval) {
+            if (input.toLowerCase() === 'y' || input.toLowerCase() === 'yes') {
+                setAwaitingApproval(false);
+                if (pendingPlan) {
+                    await executeTask(pendingPlan);
+                    setPendingPlan(null);
+                }
+                return;
+            }
+            else if (input.toLowerCase() === 'n' || input.toLowerCase() === 'no') {
+                setAwaitingApproval(false);
+                setPendingPlan(null);
+                addSystemMessage('Plan cancelled. What would you like to do instead?');
+                return;
+            }
+        }
         // Add user message
         const userMessage = {
             id: Date.now().toString(),
@@ -30,13 +65,71 @@ export const App = ({ mode, version }) => {
             timestamp: new Date(),
         };
         setMessages(prev => [...prev, userMessage]);
+        if (executionMode === 'plan') {
+            await generatePlan(input);
+        }
+        else {
+            await executeTask(input);
+        }
+    };
+    // Generate a plan for approval
+    const generatePlan = async (input) => {
         setIsProcessing(true);
         setProcessingStartTime(new Date());
+        setActiveAgent('Orchestrator');
+        setError(null);
+        try {
+            const planPrompt = `Analyze this request and create a detailed execution plan. Do NOT execute yet - just analyze and plan.
+
+Request: ${input}
+
+Respond with:
+1. Task Analysis (complexity, scope)
+2. Agents Required (list which specialists are needed)
+3. Step-by-Step Plan (numbered steps)
+4. Questions (if any clarification needed)
+
+Format your response clearly with headers.`;
+            const result = await runClaude(planPrompt, mode);
+            const mentioned = detectMentionedAgents(result.response);
+            setCompletedAgents(['Orchestrator', ...mentioned]);
+            setActiveAgent(undefined);
+            const planMessage = {
+                id: (Date.now() + 1).toString(),
+                role: 'agent',
+                agentName: 'Orchestrator',
+                content: result.response,
+                tokens: result.tokens,
+                timestamp: new Date(),
+            };
+            setMessages(prev => [...prev, planMessage]);
+            if (result.tokens) {
+                setTotalTokens(prev => prev + result.tokens.input + result.tokens.output);
+            }
+            setPendingPlan(input);
+            setAwaitingApproval(true);
+            addSystemMessage('Execute this plan? (y/n)');
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Unknown error');
+        }
+        finally {
+            setIsProcessing(false);
+            setProcessingStartTime(null);
+        }
+    };
+    // Execute task directly
+    const executeTask = async (input) => {
+        setIsProcessing(true);
+        setProcessingStartTime(new Date());
+        setActiveAgent('Orchestrator');
+        setCompletedAgents([]);
         setError(null);
         try {
-            // Call Claude
             const result = await runClaude(input, mode);
-            // Add agent response
+            const mentioned = detectMentionedAgents(result.response);
+            setCompletedAgents(['Orchestrator', ...mentioned]);
+            setActiveAgent(undefined);
             const agentMessage = {
                 id: (Date.now() + 1).toString(),
                 role: 'agent',
@@ -46,7 +139,6 @@ export const App = ({ mode, version }) => {
                 timestamp: new Date(),
             };
             setMessages(prev => [...prev, agentMessage]);
-            // Update token count
             if (result.tokens) {
                 setTotalTokens(prev => prev + result.tokens.input + result.tokens.output);
             }
@@ -59,6 +151,17 @@ export const App = ({ mode, version }) => {
             setProcessingStartTime(null);
         }
     };
+    // Add system message helper
+    const addSystemMessage = (content) => {
+        const msg = {
+            id: Date.now().toString(),
+            role: 'system',
+            agentName: 'System',
+            content,
+            timestamp: new Date(),
+        };
+        setMessages(prev => [...prev, msg]);
+    };
     // Handle slash commands
     const handleCommand = (cmd) => {
         const [command] = cmd.slice(1).split(' ');
@@ -69,6 +172,29 @@ export const App = ({ mode, version }) => {
                 break;
             case 'clear':
                 setMessages([]);
+                setActiveAgent(undefined);
+                setCompletedAgents([]);
+                break;
+            case 'plan':
+                setExecutionMode('plan');
+                addSystemMessage('Plan mode enabled. I will show plans for approval before executing.');
+                break;
+            case 'auto':
+                setExecutionMode('auto');
+                addSystemMessage('Auto mode enabled. I will execute tasks directly without approval.');
+                break;
+            case 'mode':
+                addSystemMessage(`Current execution mode: ${executionMode}\nUse /plan or /auto to switch.`);
+                break;
+            case 'agents':
+                if (!activeAgent && completedAgents.length === 0) {
+                    addSystemMessage('No agents currently active.');
+                }
+                else {
+                    const status = activeAgent ? `Active: ${activeAgent}\n` : '';
+                    const completed = completedAgents.length > 0 ? `Completed: ${completedAgents.join(', ')}` : '';
+                    addSystemMessage(`Agent Status:\n${status}${completed}`);
+                }
                 break;
             case 'help':
                 const helpMessage = {
@@ -79,13 +205,17 @@ export const App = ({ mode, version }) => {
 /help     - Show this help
 /clear    - Clear chat history
 /status   - Show session status
+/plan     - Enable plan mode (ask before executing)
+/auto     - Enable auto mode (execute directly)
+/mode     - Show current execution mode
+/agents   - Show active agents
 /exit     - Exit AGENT-K
 
 Keyboard shortcuts:
 ↑/↓       - Browse command history
+Tab       - Autocomplete commands
 Ctrl+C    - Exit
-Ctrl+U    - Clear input line
-Ctrl+A/E  - Jump to start/end`,
+Ctrl+U    - Clear input line`,
                     timestamp: new Date(),
                 };
                 setMessages(prev => [...prev, helpMessage]);
@@ -97,8 +227,10 @@ Ctrl+A/E  - Jump to start/end`,
                     agentName: 'System',
                     content: `Session Status:
 ◇ Mode: ${mode === 'dev' ? 'Development' : 'ML Research'}
+◇ Execution: ${executionMode === 'plan' ? 'Plan (approval required)' : 'Auto (direct execution)'}
 ◇ Messages: ${messages.length}
 ◇ Total Tokens: ${totalTokens}
+◇ Active Agent: ${activeAgent || 'None'}
 ◇ Session Time: ${formatElapsed(startTime)}`,
                     timestamp: new Date(),
                 };
@@ -114,7 +246,16 @@ Ctrl+A/E  - Jump to start/end`,
             exit();
         }
     });
-    return (_jsxs(Box, { flexDirection: "column", children: [messages.length === 0 && _jsx(Banner, { version: version }), _jsx(Static, { items: messages, children: (msg) => (_jsx(ChatMessage, { role: msg.role, agentName: msg.agentName, content: msg.content, tokens: msg.tokens }, msg.id)) }), isProcessing && processingStartTime && (_jsx(ThinkingIndicator, { startTime: processingStartTime })), error && (_jsx(Box, { marginY: 1, marginLeft: 1, children: _jsxs(Text, { color: "#e53e3e", children: ["\u2717 Error: ", error] }) })), _jsx(Input, { onSubmit: handleSubmit, disabled: isProcessing, placeholder: "Type a message or /help for commands..." }), _jsx(StatusBar, { mode: mode, tokens: totalTokens, startTime: startTime, isProcessing: isProcessing })] }));
+    // Prepare items for Static (include welcome box as first item)
+    const staticItems = messages.length === 0
+        ? [{ id: 'welcome', isWelcome: true, role: 'system', content: '', timestamp: new Date() }]
+        : messages;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: staticItems, children: (item) => {
+                    if ('isWelcome' in item && item.isWelcome) {
+                        return _jsx(WelcomeBox, { version: version, mode: mode }, "welcome");
+                    }
+                    return (_jsx(ChatMessage, { role: item.role, agentName: item.agentName, content: item.content, tokens: item.tokens }, item.id));
+                } }), isProcessing && processingStartTime && (_jsx(ThinkingIndicator, { startTime: processingStartTime })), error && (_jsx(Box, { marginY: 1, marginLeft: 1, children: _jsxs(Text, { color: "#e53e3e", children: ["\u2717 Error: ", error] }) })), _jsx(Input, { onSubmit: handleSubmit, disabled: isProcessing, placeholder: awaitingApproval ? "Execute plan? (y/n)" : 'Try "build a password validator"' }), _jsx(StatusBar, { mode: mode, tokens: totalTokens, startTime: startTime, isProcessing: isProcessing, activeAgent: activeAgent, completedAgents: completedAgents })] }));
 };
 function formatElapsed(start) {
     const secs = Math.floor((Date.now() - start.getTime()) / 1000);

package/dist/components/ChatMessage.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface ChatMessageProps {
-    role: 'user' | 'agent';
+    role: 'user' | 'agent' | 'system';
     agentName?: string;
     content: string;
     tokens?: {

package/dist/components/ChatMessage.js

@@ -9,10 +9,12 @@ const theme = {
     dim: '#4a5568',
     user: '#9f7aea', // Purple for user
     agent: '#4fd1c5', // Teal for agent
+    system: '#f6e05e', // Yellow for system
 };
 export const ChatMessage = ({ role, agentName = 'Agent', content, tokens, }) => {
     const isUser = role === 'user';
-    const symbolColor = isUser ? theme.user : theme.agent;
+    const isSystem = role === 'system';
+    const symbolColor = isUser ? theme.user : isSystem ? theme.system : theme.agent;
     const title = isUser ? 'You' : agentName;
     const termWidth = process.stdout.columns || 80;
     const contentWidth = termWidth - 6;

package/dist/components/Input.js

@@ -1,23 +1,26 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Text, useInput } from 'ink';
 // Sophisticated theme
 const theme = {
     accent: '#4fd1c5',
     dim: '#4a5568',
+    border: '#4a5568',
     suggestion: '#718096',
+    text: '#e2e8f0',
 };
 // Available commands for autocomplete
-const COMMANDS = ['/help', '/status', '/clear', '/exit', '/mode'];
+const COMMANDS = ['/help', '/status', '/clear', '/exit', '/plan', '/auto', '/mode', '/agents'];
 // Store history globally so it persists across re-renders
 const commandHistory = [];
 const MAX_HISTORY = 100;
-export const Input = ({ onSubmit, placeholder = 'Type a message...', prefix = '>', disabled = false, }) => {
+export const Input = ({ onSubmit, placeholder = 'Type a message...', prefix = '❯', disabled = false, }) => {
     const [value, setValue] = useState('');
     const [cursorPosition, setCursorPosition] = useState(0);
     const [historyIndex, setHistoryIndex] = useState(-1);
-    const [tempValue, setTempValue] = useState(''); // Store current input when browsing history
-    const [tabIndex, setTabIndex] = useState(0); // For cycling through completions
+    const [tempValue, setTempValue] = useState('');
+    const [tabIndex, setTabIndex] = useState(0);
+    const termWidth = process.stdout.columns || 80;
     // Get autocomplete suggestion
     const getSuggestion = () => {
         if (!value.startsWith('/') || value.length < 1)
@@ -33,7 +36,6 @@ export const Input = ({ onSubmit, placeholder = 'Type a message...', prefix = '>
             return;
         if (key.return) {
             if (value.trim()) {
-                // Add to history (avoid duplicates at the end)
                 if (commandHistory.length === 0 || commandHistory[commandHistory.length - 1] !== value) {
                     commandHistory.push(value);
                     if (commandHistory.length > MAX_HISTORY) {
@@ -48,10 +50,8 @@ export const Input = ({ onSubmit, placeholder = 'Type a message...', prefix = '>
             }
         }
         else if (key.upArrow) {
-            // Navigate history backwards
             if (commandHistory.length > 0) {
                 if (historyIndex === -1) {
-                    // Save current input before browsing history
                     setTempValue(value);
                     const newIndex = commandHistory.length - 1;
                     setHistoryIndex(newIndex);
@@ -67,7 +67,6 @@ export const Input = ({ onSubmit, placeholder = 'Type a message...', prefix = '>
             }
         }
         else if (key.downArrow) {
-            // Navigate history forwards
             if (historyIndex !== -1) {
                 if (historyIndex < commandHistory.length - 1) {
                     const newIndex = historyIndex + 1;
@@ -76,7 +75,6 @@ export const Input = ({ onSubmit, placeholder = 'Type a message...', prefix = '>
                     setCursorPosition(commandHistory[newIndex].length);
                 }
                 else {
-                    // Return to the original input
                     setHistoryIndex(-1);
                     setValue(tempValue);
                     setCursorPosition(tempValue.length);
@@ -87,7 +85,7 @@ export const Input = ({ onSubmit, placeholder = 'Type a message...', prefix = '>
             if (cursorPosition > 0) {
                 setValue(prev => prev.slice(0, cursorPosition - 1) + prev.slice(cursorPosition));
                 setCursorPosition(pos => pos - 1);
-                setHistoryIndex(-1); // Reset history navigation on edit
+                setHistoryIndex(-1);
             }
         }
         else if (key.leftArrow) {
@@ -100,28 +98,23 @@ export const Input = ({ onSubmit, placeholder = 'Type a message...', prefix = '>
             process.exit(0);
         }
         else if (key.ctrl && input === 'u') {
-            // Clear line
             setValue('');
             setCursorPosition(0);
             setHistoryIndex(-1);
         }
         else if (key.ctrl && input === 'a') {
-            // Go to beginning
             setCursorPosition(0);
         }
         else if (key.ctrl && input === 'e') {
-            // Go to end
             setCursorPosition(value.length);
         }
         else if (key.tab) {
-            // Tab completion
             if (suggestion) {
                 const completed = value + suggestion;
                 setValue(completed);
                 setCursorPosition(completed.length);
             }
             else if (value.startsWith('/')) {
-                // Cycle through matching commands
                 const matches = COMMANDS.filter(cmd => cmd.startsWith(value.toLowerCase()));
                 if (matches.length > 0) {
                     const nextIndex = (tabIndex + 1) % matches.length;
@@ -134,14 +127,14 @@ export const Input = ({ onSubmit, placeholder = 'Type a message...', prefix = '>
         else if (!key.ctrl && !key.meta && input) {
             setValue(prev => prev.slice(0, cursorPosition) + input + prev.slice(cursorPosition));
             setCursorPosition(pos => pos + input.length);
-            setHistoryIndex(-1); // Reset history navigation on edit
-            setTabIndex(0); // Reset tab completion cycle
+            setHistoryIndex(-1);
+            setTabIndex(0);
         }
     });
     // Render input with cursor
     const beforeCursor = value.slice(0, cursorPosition);
     const atCursor = value[cursorPosition] || ' ';
     const afterCursor = value.slice(cursorPosition + 1);
-    return (_jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: theme.accent, bold: true, children: [prefix, " "] }), value.length === 0 && !disabled ? (_jsx(Text, { color: theme.dim, children: placeholder })) : (_jsxs(_Fragment, { children: [_jsx(Text, { children: beforeCursor }), _jsx(Text, { inverse: true, children: atCursor }), _jsx(Text, { children: afterCursor }), suggestion && cursorPosition === value.length && (_jsx(Text, { color: theme.suggestion, children: suggestion }))] })), disabled && _jsx(Text, { color: theme.dim, children: " processing..." })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: _jsx(Text, { color: theme.border, children: '─'.repeat(termWidth) }) }), _jsxs(Box, { paddingX: 1, children: [_jsxs(Text, { color: theme.accent, children: [prefix, " "] }), value.length === 0 && !disabled ? (_jsx(Text, { color: theme.dim, children: placeholder })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.text, children: beforeCursor }), _jsx(Text, { inverse: true, children: atCursor }), _jsx(Text, { color: theme.text, children: afterCursor }), suggestion && cursorPosition === value.length && (_jsx(Text, { color: theme.suggestion, children: suggestion }))] })), disabled && _jsx(Text, { color: theme.dim, children: " processing..." })] }), _jsx(Box, { children: _jsx(Text, { color: theme.border, children: '─'.repeat(termWidth) }) })] }));
 };
 export default Input;

package/dist/components/StatusBar.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
+import { AgentName } from './AgentPanel.js';
 interface StatusBarProps {
     mode: 'dev' | 'ml';
     tokens: number;
     startTime: Date;
     isProcessing?: boolean;
+    activeAgent?: AgentName;
+    completedAgents?: AgentName[];
 }
 export declare const StatusBar: React.FC<StatusBarProps>;
 export default StatusBar;

package/dist/components/StatusBar.js

@@ -1,17 +1,30 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
 import { Box, Text } from 'ink';
 import { icons } from '../themes/retro.js';
-// Matching sophisticated theme
+// Theme
 const theme = {
-    border: '#2d3748',
+    border: '#4a5568',
     accent: '#4fd1c5',
     highlight: '#81e6d9',
-    dim: '#4a5568',
-    glow: '#319795',
+    dim: '#718096',
+    active: '#f6e05e',
+    done: '#48bb78',
 };
-export const StatusBar = ({ mode, tokens, startTime, isProcessing = false, }) => {
-    const [elapsed, setElapsed] = useState('0s');
+// Agent icons
+const agentIcons = {
+    Orchestrator: '◆',
+    Engineer: '⚙',
+    Tester: '✓',
+    Security: '⛨',
+    Scout: '◎',
+    Researcher: '◈',
+    'ML Engineer': '⬡',
+    'Data Engineer': '⬢',
+    Evaluator: '◉',
+};
+export const StatusBar = ({ mode, tokens, startTime, isProcessing = false, activeAgent, completedAgents = [], }) => {
+    const [elapsed, setElapsed] = useState('');
     const [spinnerFrame, setSpinnerFrame] = useState(0);
     useEffect(() => {
         if (!isProcessing) {
@@ -42,7 +55,17 @@ export const StatusBar = ({ mode, tokens, startTime, isProcessing = false, }) =>
         return t.toString();
     };
     const modeLabel = mode === 'dev' ? 'DEV' : 'ML';
-    const termWidth = process.stdout.columns || 80;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.border, children: '─'.repeat(termWidth) }), _jsxs(Box, { justifyContent: "space-between", width: termWidth, children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.dim, children: '  ◇ ' }), _jsx(Text, { color: theme.accent, children: modeLabel }), _jsx(Text, { color: theme.border, children: ' │ ' }), _jsx(Text, { color: theme.dim, children: "/help" }), isProcessing && (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.border, children: ' │ ' }), _jsx(Text, { color: theme.highlight, children: icons.spinner[spinnerFrame] })] }))] }), _jsxs(Box, { children: [elapsed && (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.dim, children: elapsed }), _jsx(Text, { color: theme.border, children: ' │ ' })] })), _jsxs(Text, { color: theme.accent, children: ["\u2191 ", formatTokens(tokens)] }), _jsx(Text, { color: theme.dim, children: ' tokens  ' })] })] })] }));
+    // Get agents for this mode
+    const modeAgents = mode === 'dev'
+        ? ['Orchestrator', 'Engineer', 'Tester', 'Security']
+        : ['Orchestrator', 'Researcher', 'ML Engineer', 'Evaluator'];
+    const getAgentColor = (agent) => {
+        if (activeAgent === agent)
+            return theme.active;
+        if (completedAgents.includes(agent))
+            return theme.done;
+        return theme.dim;
+    };
+    return (_jsxs(Box, { children: [_jsx(Text, { color: theme.dim, children: "  " }), _jsx(Text, { color: theme.accent, children: modeLabel }), _jsx(Text, { color: theme.border, children: " \u2502 " }), modeAgents.map((agent, i) => (_jsxs(React.Fragment, { children: [_jsx(Text, { color: getAgentColor(agent), children: "[" }), _jsx(Text, { color: getAgentColor(agent), children: agentIcons[agent] }), _jsx(Text, { color: getAgentColor(agent), children: "]" }), i < modeAgents.length - 1 && _jsx(Text, { color: theme.dim, children: " " })] }, agent))), _jsx(Text, { color: theme.border, children: " \u2502 " }), _jsx(Text, { color: theme.dim, children: "? help" }), isProcessing && (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.border, children: " \u2502 " }), _jsx(Text, { color: theme.highlight, children: icons.spinner[spinnerFrame] })] })), elapsed && (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.border, children: " \u2502 " }), _jsx(Text, { color: theme.dim, children: elapsed })] })), _jsx(Text, { color: theme.dim, children: '  '.repeat(3) }), _jsxs(Text, { color: theme.accent, children: ["\u2191 ", formatTokens(tokens)] }), _jsx(Text, { color: theme.dim, children: " tokens" })] }));
 };
 export default StatusBar;

package/dist/components/WelcomeBox.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface WelcomeBoxProps {
+    version: string;
+    mode: 'dev' | 'ml';
+}
+export declare const WelcomeBox: React.FC<WelcomeBoxProps>;
+export default WelcomeBox;

package/dist/components/WelcomeBox.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from 'ink';
+const theme = {
+    border: '#4a5568',
+    accent: '#4fd1c5',
+    highlight: '#81e6d9',
+    dim: '#718096',
+    text: '#e2e8f0',
+    title: '#f6e05e',
+};
+export const WelcomeBox = ({ version, mode }) => {
+    const termWidth = Math.min(process.stdout.columns || 120, 120);
+    const boxWidth = termWidth - 4;
+    const leftWidth = Math.floor(boxWidth * 0.45);
+    const rightWidth = boxWidth - leftWidth - 3;
+    const modeLabel = mode === 'dev' ? 'Software Development' : 'ML Research';
+    const agents = mode === 'dev'
+        ? ['Orchestrator', 'Engineer', 'Tester', 'Security']
+        : ['Orchestrator', 'Researcher', 'ML Engineer', 'Evaluator'];
+    // Title bar
+    const titleText = ` AGENT-K v${version} `;
+    const titlePadLeft = Math.floor((boxWidth - titleText.length) / 2);
+    const titlePadRight = boxWidth - titleText.length - titlePadLeft;
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.border, children: "\u256D" }), _jsx(Text, { color: theme.border, children: '─'.repeat(titlePadLeft - 1) }), _jsx(Text, { color: theme.title, bold: true, children: titleText }), _jsx(Text, { color: theme.border, children: '─'.repeat(titlePadRight - 1) }), _jsx(Text, { color: theme.border, children: "\u256E" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.border, children: "\u2502" }), _jsx(Text, { children: ' '.repeat(boxWidth) }), _jsx(Text, { color: theme.border, children: "\u2502" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.border, children: "\u2502" }), _jsx(Box, { width: leftWidth, justifyContent: "center", children: _jsx(Text, { color: theme.accent, children: "  /\\_/\\  " }) }), _jsx(Text, { color: theme.border, children: "\u2502" }), _jsxs(Box, { width: rightWidth, paddingLeft: 1, children: [_jsx(Text, { color: theme.text, children: "Welcome to " }), _jsx(Text, { color: theme.accent, bold: true, children: "AGENT-K" })] }), _jsx(Text, { color: theme.border, children: "\u2502" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.border, children: "\u2502" }), _jsx(Box, { width: leftWidth, justifyContent: "center", children: _jsx(Text, { color: theme.accent, children: " ( o.o ) " }) }), _jsx(Text, { color: theme.border, children: "\u2502" }), _jsx(Box, { width: rightWidth, paddingLeft: 1, children: _jsx(Text, { color: theme.dim, children: "Multi-Agent Intelligence System" }) }), _jsx(Text, { color: theme.border, children: "\u2502" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.border, children: "\u2502" }), _jsx(Box, { width: leftWidth, justifyContent: "center", children: _jsxs(Text, { color: theme.accent, children: ["  ", '>', "  ", '<', "  "] }) }), _jsx(Text, { color: theme.border, children: "\u2502" }), _jsxs(Box, { width: rightWidth, paddingLeft: 1, children: [_jsx(Text, { color: theme.dim, children: "Mode: " }), _jsx(Text, { color: theme.highlight, children: modeLabel })] }), _jsx(Text, { color: theme.border, children: "\u2502" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.border, children: "\u2502" }), _jsx(Text, { children: ' '.repeat(boxWidth) }), _jsx(Text, { color: theme.border, children: "\u2502" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.border, children: "\u2502" }), _jsx(Box, { width: boxWidth, justifyContent: "center", children: agents.map((agent, i) => (_jsxs(React.Fragment, { children: [_jsx(Text, { color: theme.accent, children: "\u25C6 " }), _jsx(Text, { color: theme.text, children: agent }), i < agents.length - 1 && _jsx(Text, { color: theme.dim, children: "  \u00B7  " })] }, agent))) }), _jsx(Text, { color: theme.border, children: "\u2502" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.border, children: "\u2502" }), _jsx(Text, { children: ' '.repeat(boxWidth) }), _jsx(Text, { color: theme.border, children: "\u2502" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.border, children: "\u2502" }), _jsx(Box, { width: boxWidth, justifyContent: "center", children: _jsx(Text, { color: theme.dim, children: "/help for commands  \u00B7  /plan or /auto to set mode  \u00B7  Ctrl+C to exit" }) }), _jsx(Text, { color: theme.border, children: "\u2502" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.border, children: "\u2570" }), _jsx(Text, { color: theme.border, children: '─'.repeat(boxWidth) }), _jsx(Text, { color: theme.border, children: "\u256F" })] })] }));
+};
+export default WelcomeBox;

package/dist/components/index.d.ts

@@ -1,7 +1,11 @@
 export { App } from './App.js';
 export { Banner } from './Banner.js';
+export { WelcomeBox } from './WelcomeBox.js';
 export { ChatMessage } from './ChatMessage.js';
 export { Input } from './Input.js';
 export { StatusBar } from './StatusBar.js';
 export { ThinkingIndicator } from './ThinkingIndicator.js';
 export { RetroBox } from './Box.js';
+export { AgentStatus } from './AgentStatus.js';
+export { AgentPanel } from './AgentPanel.js';
+export type { AgentName, AgentState } from './AgentPanel.js';

package/dist/components/index.js

@@ -1,7 +1,10 @@
 export { App } from './App.js';
 export { Banner } from './Banner.js';
+export { WelcomeBox } from './WelcomeBox.js';
 export { ChatMessage } from './ChatMessage.js';
 export { Input } from './Input.js';
 export { StatusBar } from './StatusBar.js';
 export { ThinkingIndicator } from './ThinkingIndicator.js';
 export { RetroBox } from './Box.js';
+export { AgentStatus } from './AgentStatus.js';
+export { AgentPanel } from './AgentPanel.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentk8",
-  "version": "2.1.4",
+  "version": "2.2.1",
   "description": "Multi-Agent Claude Code Terminal Suite",
   "type": "module",
   "main": "dist/index.js",