William Valentin
615 lines
22 KiB
TypeScript
615 lines
22 KiB
TypeScript
import React, { useState, useCallback, useRef, useEffect } from 'react';
|
|
import { Box, Text, useApp, useInput } from 'ink';
|
|
import { StatusBar } from './StatusBar.js';
|
|
import { MessageList } from './MessageList.js';
|
|
import { InputBar } from './InputBar.js';
|
|
import { parseCommand, getHelpText, resolveModelAlias, getCommandCompletions } from '../commands.js';
|
|
import type { Message, ModelClient, TokenUsage } from '../../../models/types.js';
|
|
import type { ModelRouter } from '../../../models/router.js';
|
|
import type { ManagedSession } from '../../../session/index.js';
|
|
import type { NativeAgent, ToolUseEvent } from '../../../backends/native/agent.js';
|
|
import type { HookEngine, HookResult } from '../../../hooks/index.js';
|
|
import type { ModelConfig, ModelProvider } from '../../../config/schema.js';
|
|
import { MODEL_PROVIDERS } from '../../../config/schema.js';
|
|
import { createClientFromConfig } from '../../../daemon/index.js';
|
|
import { estimateMessageTokens, getContextWindow } from '../../../context/tokens.js';
|
|
|
|
/** Format a tool name like "gmail.list" -> "Gmail: List" */
|
|
function formatToolName(name: string): string {
|
|
const parts = name.split('.');
|
|
return parts.map((p, i) => {
|
|
const capitalized = p.charAt(0).toUpperCase() + p.slice(1);
|
|
return i === 0 && parts.length > 1 ? capitalized + ':' : capitalized;
|
|
}).join(' ');
|
|
}
|
|
|
|
/** Format tool args as a compact, readable summary. */
|
|
function formatToolArgs(args: unknown): string {
|
|
if (!args || typeof args !== 'object') {return '';}
|
|
const entries = Object.entries(args as Record<string, unknown>);
|
|
if (entries.length === 0) {return '';}
|
|
const parts = entries.map(([key, value]) => {
|
|
if (typeof value === 'string') {
|
|
const display = value.length > 50 ? value.slice(0, 47) + '...' : value;
|
|
return `${key}: "${display}"`;
|
|
}
|
|
if (typeof value === 'number' || typeof value === 'boolean') {
|
|
return `${key}: ${value}`;
|
|
}
|
|
return `${key}: ${JSON.stringify(value)}`;
|
|
});
|
|
return parts.join(', ');
|
|
}
|
|
|
|
export interface AppProps {
|
|
session: ManagedSession;
|
|
modelClient: ModelClient;
|
|
modelRouter?: ModelRouter;
|
|
systemPrompt: string;
|
|
model: string;
|
|
agent?: NativeAgent;
|
|
hookEngine?: HookEngine;
|
|
modelProviderConfigs?: Partial<Record<ModelProvider, ModelConfig>>;
|
|
contextThresholdPct?: number;
|
|
onExit?: () => void;
|
|
}
|
|
|
|
export function App({
|
|
session,
|
|
modelClient,
|
|
modelRouter,
|
|
systemPrompt,
|
|
model,
|
|
agent,
|
|
hookEngine,
|
|
modelProviderConfigs,
|
|
contextThresholdPct,
|
|
onExit,
|
|
}: AppProps): React.ReactElement {
|
|
const { exit } = useApp();
|
|
const [input, setInput] = useState('');
|
|
const [messages, setMessages] = useState<Message[]>(session.getHistory());
|
|
const [isStreaming, setIsStreaming] = useState(false);
|
|
const [streamingContent, setStreamingContent] = useState('');
|
|
const [scrollOffset, setScrollOffset] = useState(0);
|
|
const [tokenUsage, setTokenUsage] = useState<TokenUsage>({ inputTokens: 0, outputTokens: 0 });
|
|
const [verbose, setVerbose] = useState(false);
|
|
const [currentModel, setCurrentModel] = useState(() => {
|
|
if (!modelRouter) {return model;}
|
|
return modelRouter.getLabel(modelRouter.getTier());
|
|
});
|
|
|
|
const abortRef = useRef(false);
|
|
const toolLinesRef = useRef<string[]>([]);
|
|
|
|
const confirmResolveRef = useRef<((result: HookResult) => void) | null>(null);
|
|
const [confirmation, setConfirmation] = useState<{ tool: string; args: Record<string, unknown> } | null>(null);
|
|
|
|
// Set up an Ink-compatible onToolUse callback for the agent.
|
|
// This replaces process.stdout writes (which corrupt Ink rendering)
|
|
// with one that updates React state to show tool activity.
|
|
useEffect(() => {
|
|
if (!agent) {return;}
|
|
|
|
const handleToolEvent = (event: ToolUseEvent) => {
|
|
if (event.type === 'start') {
|
|
const label = formatToolName(event.tool);
|
|
const argsStr = event.args ? ` (${formatToolArgs(event.args)})` : '';
|
|
toolLinesRef.current = [...toolLinesRef.current, `> ${label}${argsStr}`];
|
|
setStreamingContent(toolLinesRef.current.join('\n'));
|
|
return;
|
|
}
|
|
|
|
if (event.type === 'end' && event.result) {
|
|
const icon = event.result.success ? 'done' : 'error';
|
|
const detail = event.result.success
|
|
? `(${event.result.output.split('\n').length} lines)`
|
|
: (event.result.error ?? 'unknown error');
|
|
toolLinesRef.current = [...toolLinesRef.current, ` ${icon} ${detail}`];
|
|
setStreamingContent(toolLinesRef.current.join('\n'));
|
|
}
|
|
};
|
|
|
|
agent.setOnToolUse(handleToolEvent);
|
|
return () => {
|
|
agent.setOnToolUse(undefined);
|
|
};
|
|
}, [agent]);
|
|
|
|
// Inline confirmations for dangerous tools (e.g. shell.exec) in fullscreen mode.
|
|
useEffect(() => {
|
|
if (!hookEngine) {return;}
|
|
|
|
hookEngine.setInteractiveConfirmer(async (pending) => {
|
|
return new Promise<HookResult>((resolve) => {
|
|
confirmResolveRef.current = resolve;
|
|
setConfirmation({ tool: pending.tool, args: pending.args });
|
|
});
|
|
});
|
|
|
|
return () => {
|
|
hookEngine.setInteractiveConfirmer(undefined);
|
|
confirmResolveRef.current = null;
|
|
setConfirmation(null);
|
|
};
|
|
}, [hookEngine]);
|
|
|
|
useInput((inputChar, key) => {
|
|
// Confirmation prompt mode: capture y/n and ignore everything else.
|
|
if (confirmation && confirmResolveRef.current) {
|
|
const c = inputChar.toLowerCase();
|
|
if (c === 'y') {
|
|
confirmResolveRef.current({ approved: true });
|
|
confirmResolveRef.current = null;
|
|
setConfirmation(null);
|
|
return;
|
|
}
|
|
if (c === 'n') {
|
|
confirmResolveRef.current({ approved: false, reason: 'Denied by user' });
|
|
confirmResolveRef.current = null;
|
|
setConfirmation(null);
|
|
return;
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (key.escape) {
|
|
if (isStreaming) {
|
|
abortRef.current = true;
|
|
} else {
|
|
onExit?.();
|
|
exit();
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Tab completion for slash commands
|
|
if (key.tab && !isStreaming) {
|
|
const completions = getCommandCompletions(input);
|
|
if (completions.length > 0) {
|
|
setInput(completions[0]);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Only handle scroll keys, ignore regular typing
|
|
if (!key.upArrow && !key.downArrow && !key.pageUp && !key.pageDown && !key.tab) {
|
|
return;
|
|
}
|
|
|
|
if (key.upArrow && scrollOffset > 0) {
|
|
setScrollOffset(prev => Math.max(0, prev - 1));
|
|
}
|
|
if (key.downArrow) {
|
|
setScrollOffset(prev => Math.min(messages.length - 1, prev + 1));
|
|
}
|
|
if (key.pageUp) {
|
|
setScrollOffset(prev => Math.max(0, prev - 10));
|
|
}
|
|
if (key.pageDown) {
|
|
setScrollOffset(prev => Math.min(messages.length - 1, prev + 10));
|
|
}
|
|
});
|
|
|
|
const handleSubmit = useCallback(async (value: string) => {
|
|
if (confirmation) {
|
|
return;
|
|
}
|
|
|
|
const command = parseCommand(value);
|
|
if (!command) {return;}
|
|
|
|
setInput('');
|
|
|
|
switch (command.type) {
|
|
case 'quit':
|
|
onExit?.();
|
|
exit();
|
|
return;
|
|
|
|
case 'reset':
|
|
if (agent) {
|
|
agent.reset();
|
|
} else {
|
|
session.clear();
|
|
}
|
|
setMessages([]);
|
|
setTokenUsage({ inputTokens: 0, outputTokens: 0 });
|
|
setScrollOffset(0);
|
|
return;
|
|
|
|
case 'help': {
|
|
const helpMsg: Message = { role: 'assistant', content: getHelpText() };
|
|
setMessages(prev => [...prev, session.addMessage(helpMsg)]);
|
|
return;
|
|
}
|
|
|
|
case 'status': {
|
|
const status = `Session: ${session.id}\nMessages: ${messages.length}\nTokens: ${tokenUsage.inputTokens} in / ${tokenUsage.outputTokens} out`;
|
|
const statusMsg: Message = { role: 'assistant', content: status };
|
|
setMessages(prev => [...prev, session.addMessage(statusMsg)]);
|
|
return;
|
|
}
|
|
|
|
case 'compact': {
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: 'Compact command is not available in fullscreen TUI mode.' })]);
|
|
return;
|
|
}
|
|
|
|
case 'usage': {
|
|
const text = `Token Usage\n\nTotal: ${tokenUsage.inputTokens} in / ${tokenUsage.outputTokens} out`;
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: text })]);
|
|
return;
|
|
}
|
|
|
|
case 'context': {
|
|
const history = session.getHistory();
|
|
const estimated = estimateMessageTokens(history);
|
|
const tier = modelRouter?.getTier() ?? 'default';
|
|
const modelName = modelRouter?.getLabel(tier) ?? model;
|
|
const window = getContextWindow(modelName);
|
|
const usagePct = window > 0 ? (estimated / window) * 100 : 0;
|
|
const thresholdPct = contextThresholdPct ?? 80;
|
|
const thresholdTokens = Math.floor((thresholdPct / 100) * window);
|
|
const remaining = Math.max(0, window - estimated);
|
|
const text = [
|
|
'Context Usage (estimated)',
|
|
'',
|
|
`Model: ${modelName}`,
|
|
`Used: ${estimated.toLocaleString()} / ${window.toLocaleString()} tokens (${usagePct.toFixed(1)}%)`,
|
|
`Remaining: ${remaining.toLocaleString()} tokens`,
|
|
`Compaction threshold: ${thresholdPct}% (${thresholdTokens.toLocaleString()} tokens)`,
|
|
`Should compact: ${estimated > thresholdTokens ? 'yes' : 'no'}`,
|
|
].join('\n');
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: text })]);
|
|
return;
|
|
}
|
|
|
|
case 'verbose': {
|
|
const next = !verbose;
|
|
setVerbose(next);
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: `Verbose mode: ${next ? 'on' : 'off'}` })]);
|
|
return;
|
|
}
|
|
|
|
case 'model': {
|
|
if (!modelRouter) {
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: 'Model switching not available.' })]);
|
|
return;
|
|
}
|
|
|
|
// /model
|
|
if (!command.name) {
|
|
const current = modelRouter.getTier();
|
|
const available = modelRouter.getAvailableTiers();
|
|
const labels = modelRouter.getAllLabels();
|
|
|
|
const lines: string[] = [];
|
|
lines.push(`Active tier: ${current}`);
|
|
for (const t of available) {
|
|
const label = labels[t] ?? 'unknown';
|
|
const strict = modelRouter.isTierStrict(t) ? ' (strict)' : '';
|
|
lines.push(` ${t}: ${label}${strict}${t === current ? ' ←' : ''}`);
|
|
}
|
|
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: lines.join('\n') })]);
|
|
return;
|
|
}
|
|
|
|
// /model <tier> <provider/model>
|
|
if (command.providerModel) {
|
|
const tier = resolveModelAlias(command.name);
|
|
const providerModel = command.providerModel;
|
|
|
|
const slashIdx = providerModel.indexOf('/');
|
|
if (slashIdx === -1) {
|
|
setMessages(prev => [...prev, session.addMessage({
|
|
role: 'assistant',
|
|
content: 'Invalid format. Use provider/model (e.g. anthropic/claude-sonnet-4)',
|
|
})]);
|
|
return;
|
|
}
|
|
|
|
const provider = providerModel.slice(0, slashIdx);
|
|
const modelName = providerModel.slice(slashIdx + 1);
|
|
|
|
if (!MODEL_PROVIDERS.includes(provider as ModelProvider)) {
|
|
setMessages(prev => [...prev, session.addMessage({
|
|
role: 'assistant',
|
|
content: `Unknown provider "${provider}". Known providers: ${MODEL_PROVIDERS.join(', ')}`,
|
|
})]);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const providerType = provider as ModelProvider;
|
|
const template = modelProviderConfigs?.[providerType];
|
|
const client = createClientFromConfig({
|
|
...(template ?? {}),
|
|
provider: providerType,
|
|
model: modelName,
|
|
});
|
|
|
|
modelRouter.setClient(tier, client, providerModel);
|
|
modelRouter.setTierStrict(tier, true);
|
|
|
|
if (agent && tier === modelRouter.getTier()) {
|
|
agent.setModelTier(tier);
|
|
setCurrentModel(modelRouter.getLabel(tier));
|
|
}
|
|
|
|
setMessages(prev => [...prev, session.addMessage({
|
|
role: 'assistant',
|
|
content: `Set ${tier} to: ${providerModel}\nFallbacks for ${tier} disabled (strict tier mode).`,
|
|
})]);
|
|
} catch (error) {
|
|
const msg = error instanceof Error ? error.message : String(error);
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: `Failed to create client: ${msg}` })]);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
// /model <tier>
|
|
const tier = resolveModelAlias(command.name);
|
|
if (modelRouter.setTier(tier)) {
|
|
if (agent) {
|
|
agent.setModelTier(tier);
|
|
}
|
|
setCurrentModel(modelRouter.getLabel(tier));
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: `Switched to model: ${tier}` })]);
|
|
} else {
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: `Model not available: ${command.name}` })]);
|
|
}
|
|
return;
|
|
}
|
|
|
|
case 'fullscreen':
|
|
return;
|
|
|
|
case 'transfer':
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: 'Transfer not supported in fullscreen mode.' })]);
|
|
return;
|
|
|
|
case 'queue': {
|
|
if (!command.action || command.action === 'show') {
|
|
const mode = session.getConfig('queue.mode') ?? 'collect';
|
|
const cap = session.getConfig('queue.cap') ?? '50';
|
|
const overflow = session.getConfig('queue.overflow') ?? 'drop_old';
|
|
const debounceMs = session.getConfig('queue.debounce_ms') ?? '0';
|
|
const summarizeOverflow = session.getConfig('queue.summarize_overflow') ?? 'true';
|
|
const text = [
|
|
'Queue policy:',
|
|
`mode: ${mode}`,
|
|
`cap: ${cap}`,
|
|
`overflow: ${overflow}`,
|
|
`debounce_ms: ${debounceMs}`,
|
|
`summarize_overflow: ${summarizeOverflow}`,
|
|
].join('\n');
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: text })]);
|
|
return;
|
|
}
|
|
|
|
if (command.action === 'reset') {
|
|
session.deleteConfig('queue.mode');
|
|
session.deleteConfig('queue.cap');
|
|
session.deleteConfig('queue.overflow');
|
|
session.deleteConfig('queue.debounce_ms');
|
|
session.deleteConfig('queue.summarize_overflow');
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: 'Reset session queue overrides.' })]);
|
|
return;
|
|
}
|
|
|
|
const raw = (command.args ?? '').trim();
|
|
const [rawKey, ...rest] = raw.split(/\s+/);
|
|
const value = rest.join(' ').trim();
|
|
if (!rawKey || !value) {
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: 'Usage: /queue set <mode|cap|overflow|debounce_ms|summarize_overflow> <value>' })]);
|
|
return;
|
|
}
|
|
|
|
const key = rawKey.toLowerCase();
|
|
if (key === 'mode') {
|
|
if (!['collect', 'followup', 'steer', 'steer_backlog', 'interrupt'].includes(value)) {
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: 'Invalid mode. Use: collect, followup, steer, steer_backlog, interrupt' })]);
|
|
return;
|
|
}
|
|
session.setConfig('queue.mode', value);
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: `Set queue.mode=${value}` })]);
|
|
return;
|
|
}
|
|
|
|
if (key === 'cap') {
|
|
const cap = Number.parseInt(value, 10);
|
|
if (!Number.isFinite(cap) || cap < 1 || cap > 1000) {
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: 'Invalid cap. Use an integer between 1 and 1000.' })]);
|
|
return;
|
|
}
|
|
session.setConfig('queue.cap', String(cap));
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: `Set queue.cap=${cap}` })]);
|
|
return;
|
|
}
|
|
|
|
if (key === 'overflow') {
|
|
if (value !== 'drop_old' && value !== 'drop_new') {
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: 'Invalid overflow. Use drop_old or drop_new.' })]);
|
|
return;
|
|
}
|
|
session.setConfig('queue.overflow', value);
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: `Set queue.overflow=${value}` })]);
|
|
return;
|
|
}
|
|
|
|
if (key === 'debounce_ms') {
|
|
const debounceMs = Number.parseInt(value, 10);
|
|
if (!Number.isFinite(debounceMs) || debounceMs < 0 || debounceMs > 60_000) {
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: 'Invalid debounce_ms. Use an integer between 0 and 60000.' })]);
|
|
return;
|
|
}
|
|
session.setConfig('queue.debounce_ms', String(debounceMs));
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: `Set queue.debounce_ms=${debounceMs}` })]);
|
|
return;
|
|
}
|
|
|
|
if (key === 'summarize_overflow') {
|
|
const normalized = value.toLowerCase();
|
|
if (normalized !== 'true' && normalized !== 'false') {
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: 'Invalid summarize_overflow. Use true or false.' })]);
|
|
return;
|
|
}
|
|
session.setConfig('queue.summarize_overflow', normalized);
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: `Set queue.summarize_overflow=${normalized}` })]);
|
|
return;
|
|
}
|
|
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: 'Unknown queue key. Use mode, cap, overflow, debounce_ms, summarize_overflow.' })]);
|
|
return;
|
|
}
|
|
|
|
case 'backend':
|
|
case 'login':
|
|
case 'pair':
|
|
case 'elevate':
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: `/${command.type} is not supported in fullscreen mode.` })]);
|
|
return;
|
|
|
|
case 'message':
|
|
break;
|
|
|
|
default: {
|
|
const exhaustive: never = command;
|
|
throw new Error(`Unhandled command: ${JSON.stringify(exhaustive)}`);
|
|
}
|
|
}
|
|
|
|
if (command.type !== 'message' || isStreaming) {
|
|
return;
|
|
}
|
|
|
|
// Add user message to UI (and session if no agent — agent adds it internally)
|
|
const userMessage: Message = { role: 'user', content: command.content };
|
|
if (!agent) {
|
|
const messageWithTimestamp = session.addMessage(userMessage);
|
|
setMessages(prev => [...prev, messageWithTimestamp]);
|
|
} else {
|
|
setMessages(prev => [...prev, { ...userMessage, timestamp: Date.now() }]);
|
|
}
|
|
setScrollOffset(0);
|
|
|
|
setIsStreaming(true);
|
|
setStreamingContent('');
|
|
toolLinesRef.current = [];
|
|
abortRef.current = false;
|
|
|
|
try {
|
|
if (agent) {
|
|
await agent.process(command.content);
|
|
const usage = agent.getUsage();
|
|
setTokenUsage({ inputTokens: usage.inputTokens, outputTokens: usage.outputTokens });
|
|
setMessages(session.getHistory());
|
|
} else if (modelClient.chatStream) {
|
|
let fullContent = '';
|
|
|
|
for await (const event of modelClient.chatStream({
|
|
messages: session.getHistory(),
|
|
system: systemPrompt,
|
|
})) {
|
|
if (abortRef.current) {
|
|
fullContent += '\n\n[interrupted]';
|
|
break;
|
|
}
|
|
|
|
if (event.type === 'content' && event.content) {
|
|
fullContent += event.content;
|
|
setStreamingContent(fullContent);
|
|
}
|
|
if (event.type === 'done' && event.usage) {
|
|
const usage = event.usage;
|
|
setTokenUsage(prev => ({
|
|
inputTokens: prev.inputTokens + usage.inputTokens,
|
|
outputTokens: prev.outputTokens + usage.outputTokens,
|
|
}));
|
|
}
|
|
if (event.type === 'error') {
|
|
throw event.error ?? new Error('Stream error');
|
|
}
|
|
}
|
|
|
|
const assistantMessage: Message = { role: 'assistant', content: fullContent };
|
|
setMessages(prev => [...prev, session.addMessage(assistantMessage)]);
|
|
} else {
|
|
const response = await modelClient.chat({
|
|
messages: session.getHistory(),
|
|
system: systemPrompt,
|
|
});
|
|
|
|
setTokenUsage(prev => ({
|
|
inputTokens: prev.inputTokens + response.usage.inputTokens,
|
|
outputTokens: prev.outputTokens + response.usage.outputTokens,
|
|
}));
|
|
|
|
const assistantMessage: Message = { role: 'assistant', content: response.content };
|
|
setMessages(prev => [...prev, session.addMessage(assistantMessage)]);
|
|
}
|
|
} catch (error) {
|
|
const msg = error instanceof Error ? error.message : 'Unknown error';
|
|
setMessages(prev => [...prev, session.addMessage({ role: 'assistant', content: `Error: ${msg}` })]);
|
|
} finally {
|
|
setIsStreaming(false);
|
|
setStreamingContent('');
|
|
}
|
|
}, [
|
|
confirmation,
|
|
session,
|
|
agent,
|
|
modelClient,
|
|
modelRouter,
|
|
systemPrompt,
|
|
exit,
|
|
onExit,
|
|
isStreaming,
|
|
messages.length,
|
|
tokenUsage.inputTokens,
|
|
tokenUsage.outputTokens,
|
|
modelProviderConfigs,
|
|
]);
|
|
|
|
return (
|
|
<Box flexDirection="column" height="100%">
|
|
<MessageList
|
|
messages={messages}
|
|
scrollOffset={scrollOffset}
|
|
streamingContent={isStreaming ? streamingContent : undefined}
|
|
/>
|
|
|
|
{confirmation ? (
|
|
<Box paddingX={1} paddingY={0} borderStyle="round" borderColor="yellow">
|
|
<Text color="yellow">
|
|
Confirmation required: {confirmation.tool}{' '}
|
|
{Object.keys(confirmation.args).length > 0 ? JSON.stringify(confirmation.args) : ''}
|
|
</Text>
|
|
<Text color="yellow">Press y to approve, n to deny.</Text>
|
|
</Box>
|
|
) : null}
|
|
|
|
<InputBar
|
|
value={input}
|
|
onChange={setInput}
|
|
onSubmit={handleSubmit}
|
|
isLoading={isStreaming || !!confirmation}
|
|
placeholder={confirmation
|
|
? 'Confirmation required (press y/n)'
|
|
: (isStreaming ? 'Flynn is typing... (Esc to cancel)' : 'Type a message... (Esc=exit, /help)')}
|
|
/>
|
|
|
|
<StatusBar
|
|
sessionId={session.id}
|
|
messageCount={messages.length}
|
|
model={currentModel}
|
|
tokenUsage={{ input: tokenUsage.inputTokens, output: tokenUsage.outputTokens }}
|
|
isStreaming={isStreaming}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|