agentk8 2.1.3 → 2.2.0

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.3';
+const VERSION = '2.2.0';
 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

@@ -6,6 +6,7 @@ import { ChatMessage } from './ChatMessage.js';
 import { Input } from './Input.js';
 import { StatusBar } from './StatusBar.js';
 import { ThinkingIndicator } from './ThinkingIndicator.js';
+import { AgentPanel } from './AgentPanel.js';
 import { runClaude } from '../lib/claude.js';
 export const App = ({ mode, version }) => {
     const { exit } = useApp();
@@ -15,6 +16,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 +41,24 @@ export const App = ({ mode, version }) => {
             handleCommand(input);
             return;
         }
+        // Handle approval response
+        if (awaitingApproval) {
+            if (input.toLowerCase() === 'y' || input.toLowerCase() === 'yes') {
+                setAwaitingApproval(false);
+                // Execute the pending plan
+                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 +67,75 @@ 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);
+            // Mark orchestrator done, detect other agents
+            const mentioned = detectMentionedAgents(result.response);
+            setCompletedAgents(['Orchestrator', ...mentioned]);
+            setActiveAgent(undefined);
+            // Add plan message
+            const planMessage = {
+                id: (Date.now() + 1).toString(),
+                role: 'agent',
+                agentName: 'Orchestrator',
+                content: result.response,
+                tokens: result.tokens,
+                timestamp: new Date(),
+            };
+            setMessages(prev => [...prev, planMessage]);
+            // Update tokens
+            if (result.tokens) {
+                setTotalTokens(prev => prev + result.tokens.input + result.tokens.output);
+            }
+            // Ask for approval
+            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 +145,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,9 +157,20 @@ 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(' ');
+        const [command, ...args] = cmd.slice(1).split(' ');
         switch (command) {
             case 'exit':
             case 'quit':
@@ -69,6 +178,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 +211,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 +233,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 +252,16 @@ Ctrl+A/E  - Jump to start/end`,
             exit();
         }
     });
-    return (_jsxs(Box, { flexDirection: "column", children: [_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 banner as first item)
+    const staticItems = messages.length === 0
+        ? [{ id: 'banner', isBanner: true, role: 'system', content: '', timestamp: new Date() }]
+        : messages;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: staticItems, children: (item) => {
+                    if ('isBanner' in item && item.isBanner) {
+                        return _jsx(Banner, { version: version }, "banner");
+                    }
+                    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)" : "Type a message or /help for commands..." }), _jsx(AgentPanel, { mode: mode, activeAgent: activeAgent, completedAgents: completedAgents }), _jsx(StatusBar, { mode: mode, tokens: totalTokens, startTime: startTime, isProcessing: isProcessing })] }));
 };
 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

@@ -8,7 +8,7 @@ const theme = {
     suggestion: '#718096',
 };
 // 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;

package/dist/components/index.d.ts

@@ -5,3 +5,6 @@ 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

@@ -5,3 +5,5 @@ 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.3",
+  "version": "2.2.0",
   "description": "Multi-Agent Claude Code Terminal Suite",
   "type": "module",
   "main": "dist/index.js",