agentk8 2.2.1 → 2.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +1 -1
- package/dist/components/App.js +7 -3
- package/dist/components/StatusBar.js +27 -11
- package/dist/components/WelcomeBox.js +14 -1
- package/package.json +1 -1
package/dist/cli.js
CHANGED
package/dist/components/App.js
CHANGED
|
@@ -42,7 +42,8 @@ export const App = ({ mode, version }) => {
|
|
|
42
42
|
}
|
|
43
43
|
// Handle approval response
|
|
44
44
|
if (awaitingApproval) {
|
|
45
|
-
|
|
45
|
+
// Enter (empty input) = approve
|
|
46
|
+
if (input.trim() === '') {
|
|
46
47
|
setAwaitingApproval(false);
|
|
47
48
|
if (pendingPlan) {
|
|
48
49
|
await executeTask(pendingPlan);
|
|
@@ -56,6 +57,9 @@ export const App = ({ mode, version }) => {
|
|
|
56
57
|
addSystemMessage('Plan cancelled. What would you like to do instead?');
|
|
57
58
|
return;
|
|
58
59
|
}
|
|
60
|
+
// Any other input cancels and starts new request
|
|
61
|
+
setAwaitingApproval(false);
|
|
62
|
+
setPendingPlan(null);
|
|
59
63
|
}
|
|
60
64
|
// Add user message
|
|
61
65
|
const userMessage = {
|
|
@@ -108,7 +112,7 @@ Format your response clearly with headers.`;
|
|
|
108
112
|
}
|
|
109
113
|
setPendingPlan(input);
|
|
110
114
|
setAwaitingApproval(true);
|
|
111
|
-
addSystemMessage('
|
|
115
|
+
addSystemMessage('Press Enter to execute, or type "n" to cancel');
|
|
112
116
|
}
|
|
113
117
|
catch (err) {
|
|
114
118
|
setError(err instanceof Error ? err.message : 'Unknown error');
|
|
@@ -255,7 +259,7 @@ Ctrl+U - Clear input line`,
|
|
|
255
259
|
return _jsx(WelcomeBox, { version: version, mode: mode }, "welcome");
|
|
256
260
|
}
|
|
257
261
|
return (_jsx(ChatMessage, { role: item.role, agentName: item.agentName, content: item.content, tokens: item.tokens }, item.id));
|
|
258
|
-
} }), 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 ? "
|
|
262
|
+
} }), 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 ? "Press Enter to execute, n to cancel" : 'Try "build a password validator"' }), _jsx(StatusBar, { mode: mode, tokens: totalTokens, startTime: startTime, isProcessing: isProcessing, activeAgent: activeAgent, completedAgents: completedAgents })] }));
|
|
259
263
|
};
|
|
260
264
|
function formatElapsed(start) {
|
|
261
265
|
const secs = Math.floor((Date.now() - start.getTime()) / 1000);
|
|
@@ -11,21 +11,23 @@ const theme = {
|
|
|
11
11
|
active: '#f6e05e',
|
|
12
12
|
done: '#48bb78',
|
|
13
13
|
};
|
|
14
|
-
// Agent icons
|
|
14
|
+
// Agent icons - matching WelcomeBox symbols
|
|
15
15
|
const agentIcons = {
|
|
16
|
-
Orchestrator: '
|
|
17
|
-
Engineer: '
|
|
18
|
-
Tester: '
|
|
19
|
-
Security: '
|
|
20
|
-
Scout: '
|
|
21
|
-
Researcher: '
|
|
22
|
-
'ML Engineer': '
|
|
23
|
-
'Data Engineer': '
|
|
24
|
-
Evaluator: '
|
|
16
|
+
Orchestrator: '*',
|
|
17
|
+
Engineer: '#',
|
|
18
|
+
Tester: '+',
|
|
19
|
+
Security: '!',
|
|
20
|
+
Scout: '@',
|
|
21
|
+
Researcher: '~',
|
|
22
|
+
'ML Engineer': '%',
|
|
23
|
+
'Data Engineer': '&',
|
|
24
|
+
Evaluator: '^',
|
|
25
25
|
};
|
|
26
26
|
export const StatusBar = ({ mode, tokens, startTime, isProcessing = false, activeAgent, completedAgents = [], }) => {
|
|
27
27
|
const [elapsed, setElapsed] = useState('');
|
|
28
28
|
const [spinnerFrame, setSpinnerFrame] = useState(0);
|
|
29
|
+
const [pulseFrame, setPulseFrame] = useState(0);
|
|
30
|
+
const pulseBrackets = ['[', '(', '{', '<', '{', '('];
|
|
29
31
|
useEffect(() => {
|
|
30
32
|
if (!isProcessing) {
|
|
31
33
|
setElapsed('');
|
|
@@ -47,6 +49,15 @@ export const StatusBar = ({ mode, tokens, startTime, isProcessing = false, activ
|
|
|
47
49
|
}, 100);
|
|
48
50
|
return () => clearInterval(interval);
|
|
49
51
|
}, [isProcessing]);
|
|
52
|
+
// Pulse animation for active agent
|
|
53
|
+
useEffect(() => {
|
|
54
|
+
if (!activeAgent)
|
|
55
|
+
return;
|
|
56
|
+
const interval = setInterval(() => {
|
|
57
|
+
setPulseFrame(f => (f + 1) % pulseBrackets.length);
|
|
58
|
+
}, 200);
|
|
59
|
+
return () => clearInterval(interval);
|
|
60
|
+
}, [activeAgent]);
|
|
50
61
|
const formatTokens = (t) => {
|
|
51
62
|
if (t >= 1000000)
|
|
52
63
|
return `${(t / 1000000).toFixed(1)}M`;
|
|
@@ -66,6 +77,11 @@ export const StatusBar = ({ mode, tokens, startTime, isProcessing = false, activ
|
|
|
66
77
|
return theme.done;
|
|
67
78
|
return theme.dim;
|
|
68
79
|
};
|
|
69
|
-
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) =>
|
|
80
|
+
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) => {
|
|
81
|
+
const isActive = activeAgent === agent;
|
|
82
|
+
const leftBracket = isActive ? pulseBrackets[pulseFrame] : '[';
|
|
83
|
+
const rightBracket = isActive ? pulseBrackets[(pulseFrame + 3) % pulseBrackets.length] === '<' ? '>' : pulseBrackets[(pulseFrame + 3) % pulseBrackets.length] === '{' ? '}' : pulseBrackets[(pulseFrame + 3) % pulseBrackets.length] === '(' ? ')' : ']' : ']';
|
|
84
|
+
return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: getAgentColor(agent), children: leftBracket }), _jsx(Text, { color: getAgentColor(agent), children: agentIcons[agent] }), _jsx(Text, { color: getAgentColor(agent), children: rightBracket }), i < modeAgents.length - 1 && _jsx(Text, { color: theme.dim, children: " " })] }, agent));
|
|
85
|
+
}), _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" })] }));
|
|
70
86
|
};
|
|
71
87
|
export default StatusBar;
|
|
@@ -8,6 +8,9 @@ const theme = {
|
|
|
8
8
|
dim: '#718096',
|
|
9
9
|
text: '#e2e8f0',
|
|
10
10
|
title: '#f6e05e',
|
|
11
|
+
koi1: '#f6ad55', // orange koi
|
|
12
|
+
koi2: '#e2e8f0', // white koi
|
|
13
|
+
water: '#4299e1', // blue water
|
|
11
14
|
};
|
|
12
15
|
export const WelcomeBox = ({ version, mode }) => {
|
|
13
16
|
const termWidth = Math.min(process.stdout.columns || 120, 120);
|
|
@@ -15,6 +18,16 @@ export const WelcomeBox = ({ version, mode }) => {
|
|
|
15
18
|
const leftWidth = Math.floor(boxWidth * 0.45);
|
|
16
19
|
const rightWidth = boxWidth - leftWidth - 3;
|
|
17
20
|
const modeLabel = mode === 'dev' ? 'Software Development' : 'ML Research';
|
|
21
|
+
// Agent icons matching StatusBar
|
|
22
|
+
const agentIcons = {
|
|
23
|
+
Orchestrator: '*',
|
|
24
|
+
Engineer: '#',
|
|
25
|
+
Tester: '+',
|
|
26
|
+
Security: '!',
|
|
27
|
+
Researcher: '~',
|
|
28
|
+
'ML Engineer': '%',
|
|
29
|
+
Evaluator: '^',
|
|
30
|
+
};
|
|
18
31
|
const agents = mode === 'dev'
|
|
19
32
|
? ['Orchestrator', 'Engineer', 'Tester', 'Security']
|
|
20
33
|
: ['Orchestrator', 'Researcher', 'ML Engineer', 'Evaluator'];
|
|
@@ -22,6 +35,6 @@ export const WelcomeBox = ({ version, mode }) => {
|
|
|
22
35
|
const titleText = ` AGENT-K v${version} `;
|
|
23
36
|
const titlePadLeft = Math.floor((boxWidth - titleText.length) / 2);
|
|
24
37
|
const titlePadRight = boxWidth - titleText.length - titlePadLeft;
|
|
25
|
-
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" }),
|
|
38
|
+
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" }), _jsxs(Box, { width: leftWidth, justifyContent: "center", children: [_jsx(Text, { color: theme.water, children: "~" }), _jsxs(Text, { color: theme.koi1, 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.water, children: " ~ ~ " }) }), _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" }), _jsxs(Box, { width: leftWidth, justifyContent: "center", children: [_jsxs(Text, { color: theme.koi2, children: [" <", "'", ")))><"] }), _jsx(Text, { color: theme.water, 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: [_jsxs(Text, { color: theme.accent, children: ["[", agentIcons[agent], "] "] }), _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" })] })] }));
|
|
26
39
|
};
|
|
27
40
|
export default WelcomeBox;
|