vrr/qwen-code
2
0
Fork 0
mirror of https://github.com/QwenLM/qwen-code.git synced 2026-04-30 12:40:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 21

Merge branch 'main' into feat/token_display

Browse source
This commit is contained in:
qqqys 2026-03-18 21:40:16 +08:00 • committed by GitHub
commit b66b390d55
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
195 changed files with 23765 additions and 2508 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/cli/src/acp-integration/acpAgent.ts
View file

@ -58,11 +58,11 @@ import { AcpFileSystemService } from './service/filesystem.js';
import { Readable, Writable } from 'node:stream';
import type { LoadedSettings } from '../config/settings.js';
import { SettingScope } from '../config/settings.js';
import type { ApprovalModeValue } from './session/types.js';
import { z } from 'zod';
import type { CliArgs } from '../config/config.js';
import { loadCliConfig } from '../config/config.js';
import { Session } from './session/Session.js';
import type { ApprovalModeValue } from './session/types.js';
import { formatAcpModelId } from '../utils/acpModelUtils.js';
const debugLogger = createDebugLogger('ACP_AGENT');

8
packages/cli/src/acp-integration/session/Session.ts
View file

@ -16,7 +16,7 @@ import type {
ToolCallConfirmationDetails,
ToolResult,
ChatRecord,
SubAgentEventEmitter,
AgentEventEmitter,
} from '@qwen-code/qwen-code-core';
import {
AuthType,
@ -530,7 +530,7 @@ export class Session implements SessionContext {
// Access eventEmitter from TaskTool invocation
const taskEventEmitter = (
invocation as {
eventEmitter: SubAgentEventEmitter;
eventEmitter: AgentEventEmitter;
}
).eventEmitter;
@ -539,7 +539,7 @@ export class Session implements SessionContext {
const subagentType = (args['subagent_type'] as string) ?? '';
// Create a SubAgentTracker for this tool execution
const subAgentTracker = new SubAgentTracker(
const subSubAgentTracker = new SubAgentTracker(
this,
this.client,
parentToolCallId,
@ -547,7 +547,7 @@ export class Session implements SessionContext {
);
// Set up sub-agent tool tracking
subAgentCleanupFunctions = subAgentTracker.setup(
subAgentCleanupFunctions = subSubAgentTracker.setup(
taskEventEmitter,
abortSignal,
);

108
packages/cli/src/acp-integration/session/SubAgentTracker.test.ts
View file

@ -10,26 +10,26 @@ import type { SessionContext } from './types.js';
import type {
Config,
ToolRegistry,
SubAgentEventEmitter,
SubAgentToolCallEvent,
SubAgentToolResultEvent,
SubAgentApprovalRequestEvent,
SubAgentStreamTextEvent,
AgentEventEmitter,
AgentToolCallEvent,
AgentToolResultEvent,
AgentApprovalRequestEvent,
AgentStreamTextEvent,
ToolEditConfirmationDetails,
ToolInfoConfirmationDetails,
} from '@qwen-code/qwen-code-core';
import {
SubAgentEventType,
AgentEventType,
ToolConfirmationOutcome,
TodoWriteTool,
} from '@qwen-code/qwen-code-core';
import type { AgentSideConnection } from '@agentclientprotocol/sdk';
import { EventEmitter } from 'node:events';
// Helper to create a mock SubAgentToolCallEvent with required fields
// Helper to create a mock AgentToolCallEvent with required fields
function createToolCallEvent(
overrides: Partial<SubAgentToolCallEvent> & { name: string; callId: string },
): SubAgentToolCallEvent {
overrides: Partial<AgentToolCallEvent> & { name: string; callId: string },
): AgentToolCallEvent {
return {
subagentId: 'test-subagent',
round: 1,
@ -40,14 +40,14 @@ function createToolCallEvent(
};
}
// Helper to create a mock SubAgentToolResultEvent with required fields
// Helper to create a mock AgentToolResultEvent with required fields
function createToolResultEvent(
overrides: Partial<SubAgentToolResultEvent> & {
overrides: Partial<AgentToolResultEvent> & {
name: string;
callId: string;
success: boolean;
},
): SubAgentToolResultEvent {
): AgentToolResultEvent {
return {
subagentId: 'test-subagent',
round: 1,
@ -56,15 +56,15 @@ function createToolResultEvent(
};
}
// Helper to create a mock SubAgentApprovalRequestEvent with required fields
// Helper to create a mock AgentApprovalRequestEvent with required fields
function createApprovalEvent(
overrides: Partial<SubAgentApprovalRequestEvent> & {
overrides: Partial<AgentApprovalRequestEvent> & {
name: string;
callId: string;
confirmationDetails: SubAgentApprovalRequestEvent['confirmationDetails'];
respond: SubAgentApprovalRequestEvent['respond'];
confirmationDetails: AgentApprovalRequestEvent['confirmationDetails'];
respond: AgentApprovalRequestEvent['respond'];
},
): SubAgentApprovalRequestEvent {
): AgentApprovalRequestEvent {
return {
subagentId: 'test-subagent',
round: 1,
@ -102,10 +102,10 @@ function createInfoConfirmation(
};
}
// Helper to create a mock SubAgentStreamTextEvent with required fields
// Helper to create a mock AgentStreamTextEvent with required fields
function createStreamTextEvent(
overrides: Partial<SubAgentStreamTextEvent> & { text: string },
): SubAgentStreamTextEvent {
overrides: Partial<AgentStreamTextEvent> & { text: string },
): AgentStreamTextEvent {
return {
subagentId: 'test-subagent',
round: 1,
@ -120,7 +120,7 @@ describe('SubAgentTracker', () => {
let sendUpdateSpy: ReturnType<typeof vi.fn>;
let requestPermissionSpy: ReturnType<typeof vi.fn>;
let tracker: SubAgentTracker;
let eventEmitter: SubAgentEventEmitter;
let eventEmitter: AgentEventEmitter;
let abortController: AbortController;
beforeEach(() => {
@ -151,7 +151,7 @@ describe('SubAgentTracker', () => {
'parent-call-123',
'test-subagent',
);
eventEmitter = new EventEmitter() as unknown as SubAgentEventEmitter;
eventEmitter = new EventEmitter() as unknown as AgentEventEmitter;
abortController = new AbortController();
});
@ -169,19 +169,19 @@ describe('SubAgentTracker', () => {
tracker.setup(eventEmitter, abortController.signal);
expect(onSpy).toHaveBeenCalledWith(
SubAgentEventType.TOOL_CALL,
AgentEventType.TOOL_CALL,
expect.any(Function),
);
expect(onSpy).toHaveBeenCalledWith(
SubAgentEventType.TOOL_RESULT,
AgentEventType.TOOL_RESULT,
expect.any(Function),
);
expect(onSpy).toHaveBeenCalledWith(
SubAgentEventType.TOOL_WAITING_APPROVAL,
AgentEventType.TOOL_WAITING_APPROVAL,
expect.any(Function),
);
expect(onSpy).toHaveBeenCalledWith(
SubAgentEventType.STREAM_TEXT,
AgentEventType.STREAM_TEXT,
expect.any(Function),
);
});
@ -193,19 +193,19 @@ describe('SubAgentTracker', () => {
cleanups[0]();
expect(offSpy).toHaveBeenCalledWith(
SubAgentEventType.TOOL_CALL,
AgentEventType.TOOL_CALL,
expect.any(Function),
);
expect(offSpy).toHaveBeenCalledWith(
SubAgentEventType.TOOL_RESULT,
AgentEventType.TOOL_RESULT,
expect.any(Function),
);
expect(offSpy).toHaveBeenCalledWith(
SubAgentEventType.TOOL_WAITING_APPROVAL,
AgentEventType.TOOL_WAITING_APPROVAL,
expect.any(Function),
);
expect(offSpy).toHaveBeenCalledWith(
SubAgentEventType.STREAM_TEXT,
AgentEventType.STREAM_TEXT,
expect.any(Function),
);
});
@ -222,7 +222,7 @@ describe('SubAgentTracker', () => {
description: 'Reading file',
});
eventEmitter.emit(SubAgentEventType.TOOL_CALL, event);
eventEmitter.emit(AgentEventType.TOOL_CALL, event);
// Allow async operations to complete
await vi.waitFor(() => {
@ -258,7 +258,7 @@ describe('SubAgentTracker', () => {
args: { todos: [] },
});
eventEmitter.emit(SubAgentEventType.TOOL_CALL, event);
eventEmitter.emit(AgentEventType.TOOL_CALL, event);
// Give time for any async operation
await new Promise((resolve) => setTimeout(resolve, 10));
@ -276,7 +276,7 @@ describe('SubAgentTracker', () => {
args: {},
});
eventEmitter.emit(SubAgentEventType.TOOL_CALL, event);
eventEmitter.emit(AgentEventType.TOOL_CALL, event);
await new Promise((resolve) => setTimeout(resolve, 10));
@ -290,7 +290,7 @@ describe('SubAgentTracker', () => {
// First emit tool call to store state
eventEmitter.emit(
SubAgentEventType.TOOL_CALL,
AgentEventType.TOOL_CALL,
createToolCallEvent({
name: 'read_file',
callId: 'call-123',
@ -306,7 +306,7 @@ describe('SubAgentTracker', () => {
resultDisplay: 'File contents',
});
eventEmitter.emit(SubAgentEventType.TOOL_RESULT, resultEvent);
eventEmitter.emit(AgentEventType.TOOL_RESULT, resultEvent);
await vi.waitFor(() => {
expect(sendUpdateSpy).toHaveBeenCalledWith(
@ -334,7 +334,7 @@ describe('SubAgentTracker', () => {
resultDisplay: undefined,
});
eventEmitter.emit(SubAgentEventType.TOOL_RESULT, resultEvent);
eventEmitter.emit(AgentEventType.TOOL_RESULT, resultEvent);
await vi.waitFor(() => {
expect(sendUpdateSpy).toHaveBeenCalledWith(
@ -356,7 +356,7 @@ describe('SubAgentTracker', () => {
// Store args via tool call
eventEmitter.emit(
SubAgentEventType.TOOL_CALL,
AgentEventType.TOOL_CALL,
createToolCallEvent({
name: TodoWriteTool.Name,
callId: 'call-todo',
@ -377,7 +377,7 @@ describe('SubAgentTracker', () => {
}),
});
eventEmitter.emit(SubAgentEventType.TOOL_RESULT, resultEvent);
eventEmitter.emit(AgentEventType.TOOL_RESULT, resultEvent);
await vi.waitFor(() => {
expect(sendUpdateSpy).toHaveBeenCalledWith({
@ -393,7 +393,7 @@ describe('SubAgentTracker', () => {
tracker.setup(eventEmitter, abortController.signal);
eventEmitter.emit(
SubAgentEventType.TOOL_CALL,
AgentEventType.TOOL_CALL,
createToolCallEvent({
name: 'test_tool',
callId: 'call-cleanup',
@ -402,7 +402,7 @@ describe('SubAgentTracker', () => {
);
eventEmitter.emit(
SubAgentEventType.TOOL_RESULT,
AgentEventType.TOOL_RESULT,
createToolResultEvent({
name: 'test_tool',
callId: 'call-cleanup',
@ -413,7 +413,7 @@ describe('SubAgentTracker', () => {
// Emit another result for same callId - should not have stored args
sendUpdateSpy.mockClear();
eventEmitter.emit(
SubAgentEventType.TOOL_RESULT,
AgentEventType.TOOL_RESULT,
createToolResultEvent({
name: 'test_tool',
callId: 'call-cleanup',
@ -447,7 +447,7 @@ describe('SubAgentTracker', () => {
respond: respondSpy,
});
eventEmitter.emit(SubAgentEventType.TOOL_WAITING_APPROVAL, event);
eventEmitter.emit(AgentEventType.TOOL_WAITING_APPROVAL, event);
await vi.waitFor(() => {
expect(requestPermissionSpy).toHaveBeenCalled();
@ -483,7 +483,7 @@ describe('SubAgentTracker', () => {
respond: respondSpy,
});
eventEmitter.emit(SubAgentEventType.TOOL_WAITING_APPROVAL, event);
eventEmitter.emit(AgentEventType.TOOL_WAITING_APPROVAL, event);
await vi.waitFor(() => {
expect(respondSpy).toHaveBeenCalledWith(
@ -504,7 +504,7 @@ describe('SubAgentTracker', () => {
respond: respondSpy,
});
eventEmitter.emit(SubAgentEventType.TOOL_WAITING_APPROVAL, event);
eventEmitter.emit(AgentEventType.TOOL_WAITING_APPROVAL, event);
await vi.waitFor(() => {
expect(respondSpy).toHaveBeenCalledWith(ToolConfirmationOutcome.Cancel);
@ -525,7 +525,7 @@ describe('SubAgentTracker', () => {
respond: respondSpy,
});
eventEmitter.emit(SubAgentEventType.TOOL_WAITING_APPROVAL, event);
eventEmitter.emit(AgentEventType.TOOL_WAITING_APPROVAL, event);
await vi.waitFor(() => {
expect(respondSpy).toHaveBeenCalledWith(ToolConfirmationOutcome.Cancel);
@ -548,7 +548,7 @@ describe('SubAgentTracker', () => {
respond: vi.fn(),
});
eventEmitter.emit(SubAgentEventType.TOOL_WAITING_APPROVAL, event);
eventEmitter.emit(AgentEventType.TOOL_WAITING_APPROVAL, event);
await vi.waitFor(() => {
expect(requestPermissionSpy).toHaveBeenCalled();
@ -572,7 +572,7 @@ describe('SubAgentTracker', () => {
text: 'Hello, this is a response from the model.',
});
eventEmitter.emit(SubAgentEventType.STREAM_TEXT, event);
eventEmitter.emit(AgentEventType.STREAM_TEXT, event);
await vi.waitFor(() => {
expect(sendUpdateSpy).toHaveBeenCalled();
@ -593,15 +593,15 @@ describe('SubAgentTracker', () => {
tracker.setup(eventEmitter, abortController.signal);
eventEmitter.emit(
SubAgentEventType.STREAM_TEXT,
AgentEventType.STREAM_TEXT,
createStreamTextEvent({ text: 'First chunk ' }),
);
eventEmitter.emit(
SubAgentEventType.STREAM_TEXT,
AgentEventType.STREAM_TEXT,
createStreamTextEvent({ text: 'Second chunk ' }),
);
eventEmitter.emit(
SubAgentEventType.STREAM_TEXT,
AgentEventType.STREAM_TEXT,
createStreamTextEvent({ text: 'Third chunk' }),
);
@ -640,7 +640,7 @@ describe('SubAgentTracker', () => {
text: 'This should not be emitted',
});
eventEmitter.emit(SubAgentEventType.STREAM_TEXT, event);
eventEmitter.emit(AgentEventType.STREAM_TEXT, event);
await new Promise((resolve) => setTimeout(resolve, 10));
@ -655,7 +655,7 @@ describe('SubAgentTracker', () => {
thought: true,
});
eventEmitter.emit(SubAgentEventType.STREAM_TEXT, event);
eventEmitter.emit(AgentEventType.STREAM_TEXT, event);
await vi.waitFor(() => {
expect(sendUpdateSpy).toHaveBeenCalled();
@ -680,7 +680,7 @@ describe('SubAgentTracker', () => {
thought: false,
});
eventEmitter.emit(SubAgentEventType.STREAM_TEXT, event);
eventEmitter.emit(AgentEventType.STREAM_TEXT, event);
await vi.waitFor(() => {
expect(sendUpdateSpy).toHaveBeenCalled();
@ -705,7 +705,7 @@ describe('SubAgentTracker', () => {
text: 'Default behavior text.',
});
eventEmitter.emit(SubAgentEventType.STREAM_TEXT, event);
eventEmitter.emit(AgentEventType.STREAM_TEXT, event);
await vi.waitFor(() => {
expect(sendUpdateSpy).toHaveBeenCalled();

48
packages/cli/src/acp-integration/session/SubAgentTracker.ts
View file

@ -5,18 +5,18 @@
*/
import type {
SubAgentEventEmitter,
SubAgentToolCallEvent,
SubAgentToolResultEvent,
SubAgentApprovalRequestEvent,
SubAgentUsageEvent,
SubAgentStreamTextEvent,
AgentEventEmitter,
AgentToolCallEvent,
AgentToolResultEvent,
AgentApprovalRequestEvent,
AgentUsageEvent,
AgentStreamTextEvent,
ToolCallConfirmationDetails,
AnyDeclarativeTool,
AnyToolInvocation,
} from '@qwen-code/qwen-code-core';
import {
SubAgentEventType,
AgentEventType,
ToolConfirmationOutcome,
createDebugLogger,
} from '@qwen-code/qwen-code-core';
@ -106,12 +106,12 @@ export class SubAgentTracker {
/**
* Sets up event listeners for a sub-agent's tool events.
*
* @param eventEmitter - The SubAgentEventEmitter from TaskTool
* @param eventEmitter - The AgentEventEmitter from TaskTool
* @param abortSignal - Signal to abort tracking if parent is cancelled
* @returns Array of cleanup functions to remove listeners
*/
setup(
eventEmitter: SubAgentEventEmitter,
eventEmitter: AgentEventEmitter,
abortSignal: AbortSignal,
): Array<() => void> {
const onToolCall = this.createToolCallHandler(abortSignal);
@ -120,19 +120,19 @@ export class SubAgentTracker {
const onUsageMetadata = this.createUsageMetadataHandler(abortSignal);
const onStreamText = this.createStreamTextHandler(abortSignal);
eventEmitter.on(SubAgentEventType.TOOL_CALL, onToolCall);
eventEmitter.on(SubAgentEventType.TOOL_RESULT, onToolResult);
eventEmitter.on(SubAgentEventType.TOOL_WAITING_APPROVAL, onApproval);
eventEmitter.on(SubAgentEventType.USAGE_METADATA, onUsageMetadata);
eventEmitter.on(SubAgentEventType.STREAM_TEXT, onStreamText);
eventEmitter.on(AgentEventType.TOOL_CALL, onToolCall);
eventEmitter.on(AgentEventType.TOOL_RESULT, onToolResult);
eventEmitter.on(AgentEventType.TOOL_WAITING_APPROVAL, onApproval);
eventEmitter.on(AgentEventType.USAGE_METADATA, onUsageMetadata);
eventEmitter.on(AgentEventType.STREAM_TEXT, onStreamText);
return [
() => {
eventEmitter.off(SubAgentEventType.TOOL_CALL, onToolCall);
eventEmitter.off(SubAgentEventType.TOOL_RESULT, onToolResult);
eventEmitter.off(SubAgentEventType.TOOL_WAITING_APPROVAL, onApproval);
eventEmitter.off(SubAgentEventType.USAGE_METADATA, onUsageMetadata);
eventEmitter.off(SubAgentEventType.STREAM_TEXT, onStreamText);
eventEmitter.off(AgentEventType.TOOL_CALL, onToolCall);
eventEmitter.off(AgentEventType.TOOL_RESULT, onToolResult);
eventEmitter.off(AgentEventType.TOOL_WAITING_APPROVAL, onApproval);
eventEmitter.off(AgentEventType.USAGE_METADATA, onUsageMetadata);
eventEmitter.off(AgentEventType.STREAM_TEXT, onStreamText);
// Clean up any remaining states
this.toolStates.clear();
},
@ -146,7 +146,7 @@ export class SubAgentTracker {
abortSignal: AbortSignal,
): (...args: unknown[]) => void {
return (...args: unknown[]) => {
const event = args[0] as SubAgentToolCallEvent;
const event = args[0] as AgentToolCallEvent;
if (abortSignal.aborted) return;
// Look up tool and build invocation for metadata
@ -187,7 +187,7 @@ export class SubAgentTracker {
abortSignal: AbortSignal,
): (...args: unknown[]) => void {
return (...args: unknown[]) => {
const event = args[0] as SubAgentToolResultEvent;
const event = args[0] as AgentToolResultEvent;
if (abortSignal.aborted) return;
const state = this.toolStates.get(event.callId);
@ -215,7 +215,7 @@ export class SubAgentTracker {
abortSignal: AbortSignal,
): (...args: unknown[]) => Promise<void> {
return async (...args: unknown[]) => {
const event = args[0] as SubAgentApprovalRequestEvent;
const event = args[0] as AgentApprovalRequestEvent;
if (abortSignal.aborted) return;
const state = this.toolStates.get(event.callId);
@ -292,7 +292,7 @@ export class SubAgentTracker {
abortSignal: AbortSignal,
): (...args: unknown[]) => void {
return (...args: unknown[]) => {
const event = args[0] as SubAgentUsageEvent;
const event = args[0] as AgentUsageEvent;
if (abortSignal.aborted) return;
this.messageEmitter.emitUsageMetadata(
@ -312,7 +312,7 @@ export class SubAgentTracker {
abortSignal: AbortSignal,
): (...args: unknown[]) => void {
return (...args: unknown[]) => {
const event = args[0] as SubAgentStreamTextEvent;
const event = args[0] as AgentStreamTextEvent;
if (abortSignal.aborted) return;
// Emit streamed text as agent message or thought based on the flag

3
packages/cli/src/acp-integration/session/emitters/MessageEmitter.ts
View file

@ -5,6 +5,7 @@
*/
import type { GenerateContentResponseUsageMetadata } from '@google/genai';
import type { SubagentMeta } from '../types.js';
import type { Usage } from '@agentclientprotocol/sdk';
import { BaseEmitter } from './BaseEmitter.js';
@ -77,7 +78,7 @@ export class MessageEmitter extends BaseEmitter {
usageMetadata: GenerateContentResponseUsageMetadata,
text: string = '',
durationMs?: number,
subagentMeta?: import('../types.js').SubagentMeta,
subagentMeta?: SubagentMeta,
): Promise<void> {
const usage: Usage = {
inputTokens: usageMetadata.promptTokenCount ?? 0,

39
packages/cli/src/config/config.test.ts
View file

@ -241,6 +241,30 @@ describe('parseArguments', () => {
expect(argv.prompt).toBeUndefined();
});
it('should parse --system-prompt', async () => {
process.argv = [
'node',
'script.js',
'--system-prompt',
'You are a test system prompt.',
];
const argv = await parseArguments();
expect(argv.systemPrompt).toBe('You are a test system prompt.');
expect(argv.appendSystemPrompt).toBeUndefined();
});
it('should parse --append-system-prompt', async () => {
process.argv = [
'node',
'script.js',
'--append-system-prompt',
'Be extra concise.',
];
const argv = await parseArguments();
expect(argv.appendSystemPrompt).toBe('Be extra concise.');
expect(argv.systemPrompt).toBeUndefined();
});
it('should allow -r flag as alias for --resume', async () => {
process.argv = [
'node',
@ -432,6 +456,21 @@ describe('parseArguments', () => {
mockExit.mockRestore();
});
it('should allow --system-prompt and --append-system-prompt together', async () => {
process.argv = [
'node',
'script.js',
'--system-prompt',
'Override prompt',
'--append-system-prompt',
'Append prompt',
];
const argv = await parseArguments();
expect(argv.systemPrompt).toBe('Override prompt');
expect(argv.appendSystemPrompt).toBe('Append prompt');
});
it('should throw an error when include-partial-messages is used without stream-json output', async () => {
process.argv = ['node', 'script.js', '--include-partial-messages'];

47
packages/cli/src/config/config.ts
View file

@ -51,16 +51,16 @@ import { appEvents } from '../utils/events.js';
import { mcpCommand } from '../commands/mcp.js';
// UUID v4 regex pattern for validation
const UUID_REGEX =
/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
const SESSION_ID_REGEX =
/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}(-agent-[a-zA-Z0-9_.-]+)?$/i;
/**
* Validates if a string is a valid UUID format
* @param value - The string to validate
* @returns True if the string is a valid UUID, false otherwise
* Validates if a string is a valid session ID format.
* Accepts a standard UUID, or a UUID followed by `-agent-{suffix}`
* (used by Arena to give each agent a deterministic session ID).
*/
function isValidUUID(value: string): boolean {
return UUID_REGEX.test(value);
function isValidSessionId(value: string): boolean {
return SESSION_ID_REGEX.test(value);
}
import { isWorkspaceTrusted } from './trustedFolders.js';
@ -110,6 +110,8 @@ export interface CliArgs {
debug: boolean | undefined;
prompt: string | undefined;
promptInteractive: string | undefined;
systemPrompt: string | undefined;
appendSystemPrompt: string | undefined;
yolo: boolean | undefined;
approvalMode: string | undefined;
telemetry: boolean | undefined;
@ -289,6 +291,16 @@ export async function parseArguments(): Promise<CliArgs> {
description:
'Execute the provided prompt and continue in interactive mode',
})
.option('system-prompt', {
type: 'string',
description:
'Override the main session system prompt for this run. Can be combined with --append-system-prompt.',
})
.option('append-system-prompt', {
type: 'string',
description:
'Append instructions to the main session system prompt for this run. Can be combined with --system-prompt.',
})
.option('sandbox', {
alias: 's',
type: 'boolean',
@ -556,10 +568,13 @@ export async function parseArguments(): Promise<CliArgs> {
if (argv['sessionId'] && (argv['continue'] || argv['resume'])) {
return 'Cannot use --session-id with --continue or --resume. Use --session-id to start a new session with a specific ID, or use --continue/--resume to resume an existing session.';
}
if (argv['sessionId'] && !isValidUUID(argv['sessionId'] as string)) {
if (
argv['sessionId'] &&
!isValidSessionId(argv['sessionId'] as string)
) {
return `Invalid --session-id: "${argv['sessionId']}". Must be a valid UUID (e.g., "123e4567-e89b-12d3-a456-426614174000").`;
}
if (argv['resume'] && !isValidUUID(argv['resume'] as string)) {
if (argv['resume'] && !isValidSessionId(argv['resume'] as string)) {
return `Invalid --resume: "${argv['resume']}". Must be a valid UUID (e.g., "123e4567-e89b-12d3-a456-426614174000").`;
}
return true;
@ -961,6 +976,8 @@ export async function loadCliConfig(
importFormat: settings.context?.importFormat || 'tree',
debugMode,
question,
systemPrompt: argv.systemPrompt,
appendSystemPrompt: argv.appendSystemPrompt,
coreTools: argv.coreTools || settings.tools?.core || undefined,
allowedTools: argv.allowedTools || settings.tools?.allowed || undefined,
excludeTools,
@ -1044,6 +1061,18 @@ export async function loadCliConfig(
lsp: {
enabled: lspEnabled,
},
agents: settings.agents
? {
displayMode: settings.agents.displayMode,
arena: settings.agents.arena
? {
worktreeBaseDir: settings.agents.arena.worktreeBaseDir,
preserveArtifacts:
settings.agents.arena.preserveArtifacts ?? false,
}
: undefined,
}
: undefined,
});
if (lspEnabled) {

109
packages/cli/src/config/settingsSchema.ts
View file

@ -1244,6 +1244,104 @@ const SETTINGS_SCHEMA = {
description: 'Configuration for web search providers.',
showInDialog: false,
},
agents: {
type: 'object',
label: 'Agents',
category: 'Advanced',
requiresRestart: false,
default: {},
description:
'Settings for multi-agent collaboration features (Arena, Team, Swarm).',
showInDialog: false,
properties: {
displayMode: {
type: 'enum',
label: 'Display Mode',
category: 'Advanced',
requiresRestart: false,
default: undefined as string | undefined,
description:
'Display mode for multi-agent sessions. Currently only "in-process" is supported.',
showInDialog: false,
options: [
{ value: 'in-process', label: 'In-process' },
// { value: 'tmux', label: 'tmux' },
// { value: 'iterm2', label: 'iTerm2' },
],
},
arena: {
type: 'object',
label: 'Arena',
category: 'Advanced',
requiresRestart: false,
default: {},
description: 'Settings for Arena (multi-model competitive execution).',
showInDialog: false,
properties: {
worktreeBaseDir: {
type: 'string',
label: 'Worktree Base Directory',
category: 'Advanced',
requiresRestart: true,
default: undefined as string | undefined,
description:
'Custom base directory for Arena worktrees. Defaults to ~/.qwen/arena.',
showInDialog: false,
},
preserveArtifacts: {
type: 'boolean',
label: 'Preserve Arena Artifacts',
category: 'Advanced',
requiresRestart: false,
default: false,
description:
'When enabled, Arena worktrees and session state files are preserved after the session ends or the main agent exits.',
showInDialog: true,
},
maxRoundsPerAgent: {
type: 'number',
label: 'Max Rounds Per Agent',
category: 'Advanced',
requiresRestart: false,
default: undefined as number | undefined,
description:
'Maximum number of rounds (turns) each agent can execute. No limit if unset.',
showInDialog: false,
},
timeoutSeconds: {
type: 'number',
label: 'Timeout (seconds)',
category: 'Advanced',
requiresRestart: false,
default: undefined as number | undefined,
description:
'Total timeout in seconds for the Arena session. No limit if unset.',
showInDialog: false,
},
},
},
team: {
type: 'object',
label: 'Team',
category: 'Advanced',
requiresRestart: false,
default: {},
description:
'Settings for Agent Team (role-based collaborative execution). Reserved for future use.',
showInDialog: false,
},
swarm: {
type: 'object',
label: 'Swarm',
category: 'Advanced',
requiresRestart: false,
default: {},
description:
'Settings for Agent Swarm (parallel sub-agent execution). Reserved for future use.',
showInDialog: false,
},
},
},
hooksConfig: {
type: 'object',
@ -1315,6 +1413,17 @@ const SETTINGS_SCHEMA = {
},
},
},
experimental: {
type: 'object',
label: 'Experimental',
category: 'Experimental',
requiresRestart: true,
default: {},
description: 'Setting to enable experimental features',
showInDialog: false,
properties: {},
},
} as const satisfies SettingsSchema;
export type SettingsSchemaType = typeof SETTINGS_SCHEMA;

2
packages/cli/src/gemini.test.tsx
View file

@ -467,6 +467,8 @@ describe('gemini.tsx main function kitty protocol', () => {
debug: undefined,
prompt: undefined,
promptInteractive: undefined,
systemPrompt: undefined,
appendSystemPrompt: undefined,
query: undefined,
yolo: undefined,
approvalMode: undefined,

17
packages/cli/src/gemini.tsx
View file

@ -35,6 +35,7 @@ import { KeypressProvider } from './ui/contexts/KeypressContext.js';
import { SessionStatsProvider } from './ui/contexts/SessionContext.js';
import { SettingsContext } from './ui/contexts/SettingsContext.js';
import { VimModeProvider } from './ui/contexts/VimModeContext.js';
import { AgentViewProvider } from './ui/contexts/AgentViewContext.js';
import { useKittyKeyboardProtocol } from './ui/hooks/useKittyKeyboardProtocol.js';
import { themeManager } from './ui/themes/theme-manager.js';
import { detectAndEnableKittyProtocol } from './ui/utils/kittyProtocolDetector.js';
@ -162,13 +163,15 @@ export async function startInteractiveUI(
>
<SessionStatsProvider sessionId={config.getSessionId()}>
<VimModeProvider settings={settings}>
<AppContainer
config={config}
settings={settings}
startupWarnings={startupWarnings}
version={version}
initializationResult={initializationResult}
/>
<AgentViewProvider config={config}>
<AppContainer
config={config}
settings={settings}
startupWarnings={startupWarnings}
version={version}
initializationResult={initializationResult}
/>
</AgentViewProvider>
</VimModeProvider>
</SessionStatsProvider>
</KeypressProvider>

23
packages/cli/src/nonInteractive/io/BaseJsonOutputAdapter.ts
View file

@ -282,12 +282,12 @@ export abstract class BaseJsonOutputAdapter {
return;
}
if (lastBlock.type === 'text') {
const index = state.blocks.length - 1;
this.onBlockClosed(state, index, actualParentToolUseId);
this.closeBlock(state, index);
} else if (lastBlock.type === 'thinking') {
const index = state.blocks.length - 1;
const index = state.blocks.length - 1;
if (!state.openBlocks.has(index)) {
return;
}
if (lastBlock.type === 'text' || lastBlock.type === 'thinking') {
this.onBlockClosed(state, index, actualParentToolUseId);
this.closeBlock(state, index);
}
@ -392,7 +392,9 @@ export abstract class BaseJsonOutputAdapter {
}
const message = this.buildMessage(parentToolUseId);
this.emitMessageImpl(message);
if (state.messageStarted) {
this.emitMessageImpl(message);
}
return message;
}
@ -656,12 +658,7 @@ export abstract class BaseJsonOutputAdapter {
parentToolUseId: string,
): CLIAssistantMessage {
const state = this.getMessageState(parentToolUseId);
const message = this.finalizeAssistantMessageInternal(
state,
parentToolUseId,
);
this.updateLastAssistantMessage(message);
return message;
return this.finalizeAssistantMessageInternal(state, parentToolUseId);
}
/**

4
packages/cli/src/nonInteractive/io/JsonOutputAdapter.ts
View file

@ -52,12 +52,10 @@ export class JsonOutputAdapter
}
finalizeAssistantMessage(): CLIAssistantMessage {
const message = this.finalizeAssistantMessageInternal(
return this.finalizeAssistantMessageInternal(
this.mainAgentMessageState,
null,
);
this.updateLastAssistantMessage(message);
return message;
}
emitResult(options: ResultOptions): void {

76
packages/cli/src/nonInteractive/io/StreamJsonOutputAdapter.test.ts
View file

@ -654,6 +654,24 @@ describe('StreamJsonOutputAdapter', () => {
'Message not started',
);
});
it('should not emit empty assistant message when started but no content processed', () => {
stdoutWriteSpy.mockClear();
adapter.finalizeAssistantMessage();
const assistantCalls = stdoutWriteSpy.mock.calls.filter(
(call: unknown[]) => {
try {
const parsed = JSON.parse(call[0] as string);
return parsed.type === 'assistant';
} catch {
return false;
}
},
);
expect(assistantCalls).toHaveLength(0);
});
});
describe('emitResult', () => {
@ -1007,56 +1025,68 @@ describe('StreamJsonOutputAdapter', () => {
});
});
describe('message_id in stream events', () => {
describe('content_block event identification', () => {
beforeEach(() => {
adapter = new StreamJsonOutputAdapter(mockConfig, true);
adapter.startAssistantMessage();
});
it('should include message_id in stream events after message starts', () => {
it('should not include message_id in content_block events', () => {
adapter.processEvent({
type: GeminiEventType.Content,
value: 'Text',
});
// Process another event to ensure messageStarted is true
adapter.processEvent({
type: GeminiEventType.Content,
value: 'More',
});
const calls = stdoutWriteSpy.mock.calls;
// Find all delta events
const deltaCalls = calls.filter((call: unknown[]) => {
const contentBlockCalls = calls.filter((call: unknown[]) => {
try {
const parsed = JSON.parse(call[0] as string);
return (
parsed.type === 'stream_event' &&
parsed.event.type === 'content_block_delta'
(parsed.event.type === 'content_block_start' ||
parsed.event.type === 'content_block_delta' ||
parsed.event.type === 'content_block_stop')
);
} catch {
return false;
}
});
expect(deltaCalls.length).toBeGreaterThan(0);
// The second delta event should have message_id (after messageStarted becomes true)
// message_id is added to the event object, so check parsed.event.message_id
if (deltaCalls.length > 1) {
const secondDelta = JSON.parse(
(deltaCalls[1] as unknown[])[0] as string,
);
// message_id is on the enriched event object
expect(
secondDelta.event.message_id || secondDelta.message_id,
).toBeTruthy();
} else {
// If only one delta, check if message_id exists
const delta = JSON.parse((deltaCalls[0] as unknown[])[0] as string);
// message_id is added when messageStarted is true
// First event may or may not have it, but subsequent ones should
expect(delta.event.message_id || delta.message_id).toBeTruthy();
expect(contentBlockCalls.length).toBeGreaterThan(0);
for (const call of contentBlockCalls) {
const parsed = JSON.parse((call as unknown[])[0] as string);
expect(parsed.event.message_id).toBeUndefined();
}
});
it('should identify content_block events by session_id and index', () => {
adapter.processEvent({
type: GeminiEventType.Content,
value: 'Text',
});
const calls = stdoutWriteSpy.mock.calls;
const blockStartCall = calls.find((call: unknown[]) => {
try {
const parsed = JSON.parse(call[0] as string);
return (
parsed.type === 'stream_event' &&
parsed.event.type === 'content_block_start'
);
} catch {
return false;
}
});
expect(blockStartCall).toBeDefined();
const parsed = JSON.parse((blockStartCall as unknown[])[0] as string);
expect(parsed.session_id).toBe('test-session-id');
expect(typeof parsed.event.index).toBe('number');
});
});
describe('multiple text blocks', () => {

57
packages/cli/src/nonInteractive/io/StreamJsonOutputAdapter.ts
View file

@ -36,6 +36,8 @@ export class StreamJsonOutputAdapter
extends BaseJsonOutputAdapter
implements JsonOutputAdapterInterface
{
private mainTurnMessageStartEmitted = false;
constructor(
config: Config,
private readonly includePartialMessages: boolean,
@ -68,29 +70,27 @@ export class StreamJsonOutputAdapter
return this.includePartialMessages;
}
override startAssistantMessage(): void {
this.mainTurnMessageStartEmitted = false;
super.startAssistantMessage();
}
finalizeAssistantMessage(): CLIAssistantMessage {
const state = this.mainAgentMessageState;
if (state.finalized) {
return this.buildMessage(null);
}
state.finalized = true;
this.finalizePendingBlocks(state, null);
const orderedOpenBlocks = Array.from(state.openBlocks).sort(
(a, b) => a - b,
const message = this.finalizeAssistantMessageInternal(
this.mainAgentMessageState,
null,
);
for (const index of orderedOpenBlocks) {
this.onBlockClosed(state, index, null);
this.closeBlock(state, index);
if (this.mainTurnMessageStartEmitted && this.includePartialMessages) {
const partial: CLIPartialAssistantMessage = {
type: 'stream_event',
uuid: randomUUID(),
session_id: this.getSessionId(),
parent_tool_use_id: null,
event: { type: 'message_stop' },
};
this.emitMessageImpl(partial);
}
if (state.messageStarted && this.includePartialMessages) {
this.emitStreamEventIfEnabled({ type: 'message_stop' }, null);
}
const message = this.buildMessage(null);
this.updateLastAssistantMessage(message);
this.emitMessageImpl(message);
this.mainTurnMessageStartEmitted = false;
return message;
}
@ -249,14 +249,15 @@ export class StreamJsonOutputAdapter
/**
* Overrides base class hook to emit message_start event when message is started.
* Only emits for main agent, not for subagents.
* Only emits once per turn for the main agent (guarded by mainTurnMessageStartEmitted),
* so block-type transitions inside a single turn do not produce spurious message_start events.
*/
protected override onEnsureMessageStarted(
state: MessageState,
parentToolUseId: string | null,
): void {
// Only emit message_start for main agent, not for subagents
if (parentToolUseId === null) {
if (parentToolUseId === null && !this.mainTurnMessageStartEmitted) {
this.mainTurnMessageStartEmitted = true;
this.emitStreamEventIfEnabled(
{
type: 'message_start',
@ -264,6 +265,7 @@ export class StreamJsonOutputAdapter
id: state.messageId!,
role: 'assistant',
model: this.config.getModel(),
content: [],
},
},
null,
@ -311,19 +313,12 @@ export class StreamJsonOutputAdapter
return;
}
const state = this.getMessageState(parentToolUseId);
const enrichedEvent = state.messageStarted
? ({ ...event, message_id: state.messageId } as StreamEvent & {
message_id: string;
})
: event;
const partial: CLIPartialAssistantMessage = {
type: 'stream_event',
uuid: randomUUID(),
session_id: this.getSessionId(),
parent_tool_use_id: parentToolUseId,
event: enrichedEvent,
event,
};
this.emitMessageImpl(partial);
}

1
packages/cli/src/nonInteractive/types.ts
View file

@ -201,6 +201,7 @@ export interface MessageStartStreamEvent {
id: string;
role: 'assistant';
model: string;
content: [];
};
}

10
packages/cli/src/nonInteractiveCli.ts
View file

@ -390,6 +390,16 @@ export async function runNonInteractive(
}
}
} catch (error) {
// Ensure message_start / message_stop (and content_block events) are
// properly paired even when an error aborts the turn mid-stream.
// The call is safe when no message was started (throws → caught) or
// when already finalized (idempotent guard inside the adapter).
try {
adapter.finalizeAssistantMessage();
} catch {
// Expected when no message was started or already finalized
}
// For JSON and STREAM_JSON modes, compute usage from metrics
const message = error instanceof Error ? error.message : String(error);
const metrics = uiTelemetryService.getMetrics();

2
packages/cli/src/services/BuiltinCommandLoader.ts
View file

@ -9,6 +9,7 @@ import type { SlashCommand } from '../ui/commands/types.js';
import type { Config } from '@qwen-code/qwen-code-core';
import { aboutCommand } from '../ui/commands/aboutCommand.js';
import { agentsCommand } from '../ui/commands/agentsCommand.js';
import { arenaCommand } from '../ui/commands/arenaCommand.js';
import { approvalModeCommand } from '../ui/commands/approvalModeCommand.js';
import { authCommand } from '../ui/commands/authCommand.js';
import { bugCommand } from '../ui/commands/bugCommand.js';
@ -61,6 +62,7 @@ export class BuiltinCommandLoader implements ICommandLoader {
const allDefinitions: Array<SlashCommand | null> = [
aboutCommand,
agentsCommand,
arenaCommand,
approvalModeCommand,
authCommand,
bugCommand,

7
packages/cli/src/services/prompt-processors/shellProcessor.ts
View file

@ -109,10 +109,9 @@ export class ShellProcessor implements IPromptProcessor {
return { ...injection, resolvedCommand: undefined };
}
const resolvedCommand = command.replaceAll(
SHORTHAND_ARGS_PLACEHOLDER,
userArgsEscaped,
);
const resolvedCommand = command
.replaceAll(SHORTHAND_ARGS_PLACEHOLDER, userArgsEscaped) // Replace {{args}}
.replaceAll('$ARGUMENTS', userArgsEscaped); // Replace $ARGUMENTS
return { ...injection, resolvedCommand };
},
);

66
packages/cli/src/ui/App.test.tsx
View file

@ -9,6 +9,11 @@ import { render } from 'ink-testing-library';
import { Text, useIsScreenReaderEnabled } from 'ink';
import { App } from './App.js';
import { UIStateContext, type UIState } from './contexts/UIStateContext.js';
import {
UIActionsContext,
type UIActions,
} from './contexts/UIActionsContext.js';
import { AgentViewProvider } from './contexts/AgentViewContext.js';
import { StreamingState } from './types.js';
vi.mock('ink', async (importOriginal) => {
@ -43,6 +48,10 @@ vi.mock('./components/Footer.js', () => ({
Footer: () => <Text>Footer</Text>,
}));
vi.mock('./components/agent-view/AgentTabBar.js', () => ({
AgentTabBar: () => null,
}));
describe('App', () => {
const mockUIState: Partial<UIState> = {
streamingState: StreamingState.Idle,
@ -58,13 +67,24 @@ describe('App', () => {
},
};
it('should render main content and composer when not quitting', () => {
const { lastFrame } = render(
<UIStateContext.Provider value={mockUIState as UIState}>
<App />
</UIStateContext.Provider>,
const mockUIActions = {
refreshStatic: vi.fn(),
} as unknown as UIActions;
const renderWithProviders = (uiState: UIState) =>
render(
<UIActionsContext.Provider value={mockUIActions}>
<AgentViewProvider>
<UIStateContext.Provider value={uiState}>
<App />
</UIStateContext.Provider>
</AgentViewProvider>
</UIActionsContext.Provider>,
);
it('should render main content and composer when not quitting', () => {
const { lastFrame } = renderWithProviders(mockUIState as UIState);
expect(lastFrame()).toContain('MainContent');
expect(lastFrame()).toContain('Composer');
});
@ -75,11 +95,7 @@ describe('App', () => {
quittingMessages: [{ id: 1, type: 'user', text: 'test' }],
} as UIState;
const { lastFrame } = render(
<UIStateContext.Provider value={quittingUIState}>
<App />
</UIStateContext.Provider>,
);
const { lastFrame } = renderWithProviders(quittingUIState);
expect(lastFrame()).toContain('Quitting...');
});
@ -90,11 +106,7 @@ describe('App', () => {
dialogsVisible: true,
} as UIState;
const { lastFrame } = render(
<UIStateContext.Provider value={dialogUIState}>
<App />
</UIStateContext.Provider>,
);
const { lastFrame } = renderWithProviders(dialogUIState);
expect(lastFrame()).toContain('MainContent');
expect(lastFrame()).toContain('DialogManager');
@ -107,11 +119,7 @@ describe('App', () => {
ctrlCPressedOnce: true,
} as UIState;
const { lastFrame } = render(
<UIStateContext.Provider value={ctrlCUIState}>
<App />
</UIStateContext.Provider>,
);
const { lastFrame } = renderWithProviders(ctrlCUIState);
expect(lastFrame()).toContain('Press Ctrl+C again to exit.');
});
@ -123,11 +131,7 @@ describe('App', () => {
ctrlDPressedOnce: true,
} as UIState;
const { lastFrame } = render(
<UIStateContext.Provider value={ctrlDUIState}>
<App />
</UIStateContext.Provider>,
);
const { lastFrame } = renderWithProviders(ctrlDUIState);
expect(lastFrame()).toContain('Press Ctrl+D again to exit.');
});
@ -135,11 +139,7 @@ describe('App', () => {
it('should render ScreenReaderAppLayout when screen reader is enabled', () => {
(useIsScreenReaderEnabled as vi.Mock).mockReturnValue(true);
const { lastFrame } = render(
<UIStateContext.Provider value={mockUIState as UIState}>
<App />
</UIStateContext.Provider>,
);
const { lastFrame } = renderWithProviders(mockUIState as UIState);
expect(lastFrame()).toContain(
'Notifications\nFooter\nMainContent\nComposer',
@ -149,11 +149,7 @@ describe('App', () => {
it('should render DefaultAppLayout when screen reader is not enabled', () => {
(useIsScreenReaderEnabled as vi.Mock).mockReturnValue(false);
const { lastFrame } = render(
<UIStateContext.Provider value={mockUIState as UIState}>
<App />
</UIStateContext.Provider>,
);
const { lastFrame } = renderWithProviders(mockUIState as UIState);
expect(lastFrame()).toContain('MainContent\nComposer');
});

17
packages/cli/src/ui/AppContainer.test.tsx
View file

@ -78,6 +78,21 @@ vi.mock('./hooks/useAutoAcceptIndicator.js');
vi.mock('./hooks/useGitBranchName.js');
vi.mock('./contexts/VimModeContext.js');
vi.mock('./contexts/SessionContext.js');
vi.mock('./contexts/AgentViewContext.js', () => ({
useAgentViewState: vi.fn(() => ({
activeView: 'main',
agents: new Map(),
})),
useAgentViewActions: vi.fn(() => ({
switchToMain: vi.fn(),
switchToAgent: vi.fn(),
switchToNext: vi.fn(),
switchToPrevious: vi.fn(),
registerAgent: vi.fn(),
unregisterAgent: vi.fn(),
unregisterAll: vi.fn(),
})),
}));
vi.mock('./components/shared/text-buffer.js');
vi.mock('./hooks/useLogger.js');
@ -268,7 +283,7 @@ describe('AppContainer State Management', () => {
listSubagents: vi.fn().mockResolvedValue([]),
addChangeListener: vi.fn(),
loadSubagent: vi.fn(),
createSubagentScope: vi.fn(),
createSubagent: vi.fn(),
};
vi.spyOn(mockConfig, 'getSubagentManager').mockReturnValue(
mockSubagentManager as SubagentManager,

52
packages/cli/src/ui/AppContainer.tsx
View file

@ -52,6 +52,7 @@ import { useAuthCommand } from './auth/useAuth.js';
import { useEditorSettings } from './hooks/useEditorSettings.js';
import { useSettingsCommand } from './hooks/useSettingsCommand.js';
import { useModelCommand } from './hooks/useModelCommand.js';
import { useArenaCommand } from './hooks/useArenaCommand.js';
import { useApprovalModeCommand } from './hooks/useApprovalModeCommand.js';
import { useResumeCommand } from './hooks/useResumeCommand.js';
import { useSlashCommandProcessor } from './hooks/slashCommandProcessor.js';
@ -96,6 +97,7 @@ import {
} from './hooks/useExtensionUpdates.js';
import { useCodingPlanUpdates } from './hooks/useCodingPlanUpdates.js';
import { ShellFocusContext } from './contexts/ShellFocusContext.js';
import { useAgentViewState } from './contexts/AgentViewContext.js';
import { t } from '../i18n/index.js';
import { useWelcomeBack } from './hooks/useWelcomeBack.js';
import { useDialogClose } from './hooks/useDialogClose.js';
@ -470,6 +472,8 @@ export const AppContainer = (props: AppContainerProps) => {
const { isModelDialogOpen, openModelDialog, closeModelDialog } =
useModelCommand();
const { activeArenaDialog, openArenaDialog, closeArenaDialog } =
useArenaCommand();
const {
isResumeDialogOpen,
@ -509,6 +513,7 @@ export const AppContainer = (props: AppContainerProps) => {
openEditorDialog,
openSettingsDialog,
openModelDialog,
openArenaDialog,
openPermissionsDialog,
openApprovalModeDialog,
quit: (messages: HistoryItem[]) => {
@ -533,6 +538,7 @@ export const AppContainer = (props: AppContainerProps) => {
openEditorDialog,
openSettingsDialog,
openModelDialog,
openArenaDialog,
setDebugMessage,
dispatchExtensionStateUpdate,
openPermissionsDialog,
@ -669,12 +675,15 @@ export const AppContainer = (props: AppContainerProps) => {
// Track whether suggestions are visible for Tab key handling
const [hasSuggestionsVisible, setHasSuggestionsVisible] = useState(false);
// Auto-accept indicator
const agentViewState = useAgentViewState();
// Auto-accept indicator — disabled on agent tabs (agents handle their own)
const showAutoAcceptIndicator = useAutoAcceptIndicator({
config,
addItem: historyManager.addItem,
onApprovalModeChange: handleApprovalModeChange,
shouldBlockTab: () => hasSuggestionsVisible,
disabled: agentViewState.activeView !== 'main',
});
const { messageQueue, addMessage, clearQueue, getQueuedMessagesText } =
@ -687,9 +696,26 @@ export const AppContainer = (props: AppContainerProps) => {
// Callback for handling final submit (must be after addMessage from useMessageQueue)
const handleFinalSubmit = useCallback(
(submittedValue: string) => {
// Route to active in-process agent if viewing a sub-agent tab.
if (agentViewState.activeView !== 'main') {
const agent = agentViewState.agents.get(agentViewState.activeView);
if (agent) {
agent.interactiveAgent.enqueueMessage(submittedValue.trim());
return;
}
}
addMessage(submittedValue);
},
[addMessage],
[addMessage, agentViewState],
);
const handleArenaModelsSelected = useCallback(
(models: string[]) => {
const value = models.join(',');
buffer.setText(`/arena start --models ${value} `);
closeArenaDialog();
},
[buffer, closeArenaDialog],
);
// Welcome back functionality (must be after handleFinalSubmit)
@ -765,10 +791,17 @@ export const AppContainer = (props: AppContainerProps) => {
}
}, [buffer, terminalWidth, terminalHeight]);
// Compute available terminal height based on controls measurement
// agentViewState is declared earlier (before handleFinalSubmit) so it
// is available for input routing. Referenced here for layout computation.
// Compute available terminal height based on controls measurement.
// When in-process agents are present the AgentTabBar renders an extra
// row at the top of the layout; subtract it so downstream consumers
// (shell, transcript, etc.) don't overestimate available space.
const tabBarHeight = agentViewState.agents.size > 0 ? 1 : 0;
const availableTerminalHeight = Math.max(
0,
terminalHeight - controlsHeight - staticExtraHeight - 2,
terminalHeight - controlsHeight - staticExtraHeight - 2 - tabBarHeight,
);
config.setShellExecutionConfig({
@ -1053,6 +1086,8 @@ export const AppContainer = (props: AppContainerProps) => {
exitEditorDialog,
isSettingsDialogOpen,
closeSettingsDialog,
activeArenaDialog,
closeArenaDialog,
isFolderTrustDialogOpen,
showWelcomeBackDialog,
handleWelcomeBackClose,
@ -1310,6 +1345,7 @@ export const AppContainer = (props: AppContainerProps) => {
isThemeDialogOpen ||
isSettingsDialogOpen ||
isModelDialogOpen ||
activeArenaDialog !== null ||
isPermissionsDialogOpen ||
isAuthDialogOpen ||
isAuthenticating ||
@ -1360,6 +1396,7 @@ export const AppContainer = (props: AppContainerProps) => {
quittingMessages,
isSettingsDialogOpen,
isModelDialogOpen,
activeArenaDialog,
isPermissionsDialogOpen,
isApprovalModeDialogOpen,
isResumeDialogOpen,
@ -1455,6 +1492,7 @@ export const AppContainer = (props: AppContainerProps) => {
quittingMessages,
isSettingsDialogOpen,
isModelDialogOpen,
activeArenaDialog,
isPermissionsDialogOpen,
isApprovalModeDialogOpen,
isResumeDialogOpen,
@ -1553,6 +1591,9 @@ export const AppContainer = (props: AppContainerProps) => {
exitEditorDialog,
closeSettingsDialog,
closeModelDialog,
openArenaDialog,
closeArenaDialog,
handleArenaModelsSelected,
dismissCodingPlanUpdate,
closePermissionsDialog,
setShellModeActive,
@ -1602,6 +1643,9 @@ export const AppContainer = (props: AppContainerProps) => {
exitEditorDialog,
closeSettingsDialog,
closeModelDialog,
openArenaDialog,
closeArenaDialog,
handleArenaModelsSelected,
dismissCodingPlanUpdate,
closePermissionsDialog,
setShellModeActive,

395
packages/cli/src/ui/commands/arenaCommand.test.ts Normal file
View file

@ -0,0 +1,395 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
import { describe, it, expect, vi, beforeEach } from 'vitest';
import {
type ArenaManager,
AgentStatus,
ArenaSessionStatus,
} from '@qwen-code/qwen-code-core';
import { arenaCommand } from './arenaCommand.js';
import type {
CommandContext,
OpenDialogActionReturn,
SlashCommand,
} from './types.js';
import { createMockCommandContext } from '../../test-utils/mockCommandContext.js';
function getArenaSubCommand(
name: 'start' | 'stop' | 'status' | 'select',
): SlashCommand {
const command = arenaCommand.subCommands?.find((item) => item.name === name);
if (!command?.action) {
throw new Error(`Arena subcommand "${name}" is missing an action`);
}
return command;
}
describe('arenaCommand stop subcommand', () => {
let mockContext: CommandContext;
let mockConfig: {
getArenaManager: ReturnType<typeof vi.fn>;
setArenaManager: ReturnType<typeof vi.fn>;
cleanupArenaRuntime: ReturnType<typeof vi.fn>;
getAgentsSettings: ReturnType<typeof vi.fn>;
};
beforeEach(() => {
mockConfig = {
getArenaManager: vi.fn(() => null),
setArenaManager: vi.fn(),
cleanupArenaRuntime: vi.fn().mockResolvedValue(undefined),
getAgentsSettings: vi.fn(() => ({})),
};
mockContext = createMockCommandContext({
invocation: {
raw: '/arena stop',
name: 'arena',
args: 'stop',
},
executionMode: 'interactive',
services: {
config: mockConfig as never,
},
});
});
it('returns an error when no arena session is running', async () => {
const stopCommand = getArenaSubCommand('stop');
const result = await stopCommand.action!(mockContext, '');
expect(result).toEqual({
type: 'message',
messageType: 'error',
content: 'No running Arena session found.',
});
});
it('opens stop dialog when a running session exists', async () => {
const mockManager = {
getSessionStatus: vi.fn(() => ArenaSessionStatus.RUNNING),
} as unknown as ArenaManager;
mockConfig.getArenaManager = vi.fn(() => mockManager);
const stopCommand = getArenaSubCommand('stop');
const result = (await stopCommand.action!(
mockContext,
'',
)) as OpenDialogActionReturn;
expect(result).toEqual({
type: 'dialog',
dialog: 'arena_stop',
});
});
it('opens stop dialog when a completed session exists', async () => {
const mockManager = {
getSessionStatus: vi.fn(() => ArenaSessionStatus.COMPLETED),
} as unknown as ArenaManager;
mockConfig.getArenaManager = vi.fn(() => mockManager);
const stopCommand = getArenaSubCommand('stop');
const result = (await stopCommand.action!(
mockContext,
'',
)) as OpenDialogActionReturn;
expect(result).toEqual({
type: 'dialog',
dialog: 'arena_stop',
});
});
});
describe('arenaCommand status subcommand', () => {
let mockContext: CommandContext;
let mockConfig: {
getArenaManager: ReturnType<typeof vi.fn>;
};
beforeEach(() => {
mockConfig = {
getArenaManager: vi.fn(() => null),
};
mockContext = createMockCommandContext({
invocation: {
raw: '/arena status',
name: 'arena',
args: 'status',
},
executionMode: 'interactive',
services: {
config: mockConfig as never,
},
});
});
it('returns an error when no arena session exists', async () => {
const statusCommand = getArenaSubCommand('status');
const result = await statusCommand.action!(mockContext, '');
expect(result).toEqual({
type: 'message',
messageType: 'error',
content: 'No Arena session found. Start one with /arena start.',
});
});
it('opens status dialog when a session exists', async () => {
const mockManager = {
getSessionStatus: vi.fn(() => ArenaSessionStatus.RUNNING),
} as unknown as ArenaManager;
mockConfig.getArenaManager = vi.fn(() => mockManager);
const statusCommand = getArenaSubCommand('status');
const result = (await statusCommand.action!(
mockContext,
'',
)) as OpenDialogActionReturn;
expect(result).toEqual({
type: 'dialog',
dialog: 'arena_status',
});
});
it('opens status dialog for completed session', async () => {
const mockManager = {
getSessionStatus: vi.fn(() => ArenaSessionStatus.COMPLETED),
} as unknown as ArenaManager;
mockConfig.getArenaManager = vi.fn(() => mockManager);
const statusCommand = getArenaSubCommand('status');
const result = (await statusCommand.action!(
mockContext,
'',
)) as OpenDialogActionReturn;
expect(result).toEqual({
type: 'dialog',
dialog: 'arena_status',
});
});
});
describe('arenaCommand select subcommand', () => {
let mockContext: CommandContext;
let mockConfig: {
getArenaManager: ReturnType<typeof vi.fn>;
setArenaManager: ReturnType<typeof vi.fn>;
cleanupArenaRuntime: ReturnType<typeof vi.fn>;
getAgentsSettings: ReturnType<typeof vi.fn>;
};
beforeEach(() => {
mockConfig = {
getArenaManager: vi.fn(() => null),
setArenaManager: vi.fn(),
cleanupArenaRuntime: vi.fn().mockResolvedValue(undefined),
getAgentsSettings: vi.fn(() => ({})),
};
mockContext = createMockCommandContext({
invocation: {
raw: '/arena select',
name: 'arena',
args: 'select',
},
executionMode: 'interactive',
services: {
config: mockConfig as never,
},
});
});
it('returns error when no arena session exists', async () => {
const selectCommand = getArenaSubCommand('select');
const result = await selectCommand.action!(mockContext, '');
expect(result).toEqual({
type: 'message',
messageType: 'error',
content: 'No arena session found. Start one with /arena start.',
});
});
it('returns error when arena is still running', async () => {
const mockManager = {
getSessionStatus: vi.fn(() => ArenaSessionStatus.RUNNING),
} as unknown as ArenaManager;
mockConfig.getArenaManager = vi.fn(() => mockManager);
const selectCommand = getArenaSubCommand('select');
const result = await selectCommand.action!(mockContext, '');
expect(result).toEqual({
type: 'message',
messageType: 'error',
content:
'Arena session is still running. Wait for it to complete or use /arena stop first.',
});
});
it('returns error when all agents failed', async () => {
const mockManager = {
getSessionStatus: vi.fn(() => ArenaSessionStatus.COMPLETED),
getAgentStates: vi.fn(() => [
{
agentId: 'agent-1',
status: AgentStatus.FAILED,
model: { modelId: 'model-1' },
},
]),
} as unknown as ArenaManager;
mockConfig.getArenaManager = vi.fn(() => mockManager);
const selectCommand = getArenaSubCommand('select');
const result = await selectCommand.action!(mockContext, '');
expect(result).toEqual({
type: 'message',
messageType: 'error',
content:
'No successful agent results to select from. All agents failed or were cancelled.\n' +
'Use /arena stop to end the session.',
});
});
it('opens dialog when no args provided and agents have results', async () => {
const mockManager = {
getSessionStatus: vi.fn(() => ArenaSessionStatus.COMPLETED),
getAgentStates: vi.fn(() => [
{
agentId: 'agent-1',
status: AgentStatus.COMPLETED,
model: { modelId: 'model-1' },
},
{
agentId: 'agent-2',
status: AgentStatus.COMPLETED,
model: { modelId: 'model-2' },
},
]),
} as unknown as ArenaManager;
mockConfig.getArenaManager = vi.fn(() => mockManager);
const selectCommand = getArenaSubCommand('select');
const result = await selectCommand.action!(mockContext, '');
expect(result).toEqual({
type: 'dialog',
dialog: 'arena_select',
});
});
it('applies changes directly when model name is provided', async () => {
const mockManager = {
getSessionStatus: vi.fn(() => ArenaSessionStatus.COMPLETED),
getAgentStates: vi.fn(() => [
{
agentId: 'agent-1',
status: AgentStatus.COMPLETED,
model: { modelId: 'gpt-4o', displayName: 'gpt-4o' },
},
{
agentId: 'agent-2',
status: AgentStatus.COMPLETED,
model: { modelId: 'claude-sonnet', displayName: 'claude-sonnet' },
},
]),
applyAgentResult: vi.fn().mockResolvedValue({ success: true }),
cleanup: vi.fn().mockResolvedValue(undefined),
} as unknown as ArenaManager;
mockConfig.getArenaManager = vi.fn(() => mockManager);
const selectCommand = getArenaSubCommand('select');
const result = await selectCommand.action!(mockContext, 'gpt-4o');
expect(mockManager.applyAgentResult).toHaveBeenCalledWith('agent-1');
expect(mockConfig.cleanupArenaRuntime).toHaveBeenCalled();
expect(result).toEqual({
type: 'message',
messageType: 'info',
content:
'Applied changes from gpt-4o to workspace. Arena session complete.',
});
});
it('returns error when specified model not found', async () => {
const mockManager = {
getSessionStatus: vi.fn(() => ArenaSessionStatus.COMPLETED),
getAgentStates: vi.fn(() => [
{
agentId: 'agent-1',
status: AgentStatus.COMPLETED,
model: { modelId: 'gpt-4o', displayName: 'gpt-4o' },
},
]),
} as unknown as ArenaManager;
mockConfig.getArenaManager = vi.fn(() => mockManager);
const selectCommand = getArenaSubCommand('select');
const result = await selectCommand.action!(mockContext, 'nonexistent');
expect(result).toEqual({
type: 'message',
messageType: 'error',
content: 'No idle agent found matching "nonexistent".',
});
});
it('asks for confirmation when --discard flag is used', async () => {
const mockManager = {
getSessionStatus: vi.fn(() => ArenaSessionStatus.COMPLETED),
getAgentStates: vi.fn(() => [
{
agentId: 'agent-1',
status: AgentStatus.COMPLETED,
model: { modelId: 'gpt-4o' },
},
]),
} as unknown as ArenaManager;
mockConfig.getArenaManager = vi.fn(() => mockManager);
const selectCommand = getArenaSubCommand('select');
const result = await selectCommand.action!(mockContext, '--discard');
expect(result).toEqual({
type: 'confirm_action',
prompt: 'Discard all Arena results and clean up worktrees?',
originalInvocation: { raw: '/arena select' },
});
});
it('discards results after --discard confirmation', async () => {
const mockManager = {
getSessionStatus: vi.fn(() => ArenaSessionStatus.COMPLETED),
getAgentStates: vi.fn(() => [
{
agentId: 'agent-1',
status: AgentStatus.COMPLETED,
model: { modelId: 'gpt-4o' },
},
]),
cleanup: vi.fn().mockResolvedValue(undefined),
} as unknown as ArenaManager;
mockConfig.getArenaManager = vi.fn(() => mockManager);
mockContext.overwriteConfirmed = true;
const selectCommand = getArenaSubCommand('select');
const result = await selectCommand.action!(mockContext, '--discard');
expect(mockConfig.cleanupArenaRuntime).toHaveBeenCalled();
expect(result).toEqual({
type: 'message',
messageType: 'info',
content: 'Arena results discarded. All worktrees cleaned up.',
});
});
});

659
packages/cli/src/ui/commands/arenaCommand.ts Normal file
View file

@ -0,0 +1,659 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
import type {
SlashCommand,
CommandContext,
ConfirmActionReturn,
MessageActionReturn,
OpenDialogActionReturn,
SlashCommandActionReturn,
} from './types.js';
import { CommandKind } from './types.js';
import {
ArenaManager,
ArenaEventType,
isTerminalStatus,
isSuccessStatus,
ArenaSessionStatus,
AuthType,
createDebugLogger,
stripStartupContext,
type Config,
type ArenaModelConfig,
type ArenaAgentErrorEvent,
type ArenaAgentCompleteEvent,
type ArenaAgentStartEvent,
type ArenaSessionCompleteEvent,
type ArenaSessionErrorEvent,
type ArenaSessionStartEvent,
type ArenaSessionUpdateEvent,
} from '@qwen-code/qwen-code-core';
import {
MessageType,
type ArenaAgentCardData,
type HistoryItemWithoutId,
} from '../types.js';
/**
* Parsed model entry with optional auth type.
*/
interface ParsedModel {
authType?: string;
modelId: string;
}
/**
* Parses arena command arguments.
*
* Supported formats:
* /arena start --models model1,model2 <task>
* /arena start --models authType1:model1,authType2:model2 <task>
*
* Model format: [authType:]modelId
* - "gpt-4o" → uses default auth type
* - "openai:gpt-4o" → uses "openai" auth type
*/
function parseArenaArgs(args: string): {
models: ParsedModel[];
task: string;
} {
const modelsMatch = args.match(/--models\s+(\S+)/);
let models: ParsedModel[] = [];
let task = args;
if (modelsMatch) {
const modelStrings = modelsMatch[1]!.split(',').filter(Boolean);
models = modelStrings.map((str) => {
// Check for authType:modelId format
const colonIndex = str.indexOf(':');
if (colonIndex > 0) {
return {
authType: str.substring(0, colonIndex),
modelId: str.substring(colonIndex + 1),
};
}
return { modelId: str };
});
task = task.replace(/--models\s+\S+/, '').trim();
}
// Strip surrounding quotes from task
task = task.replace(/^["']|["']$/g, '').trim();
return { models, task };
}
const debugLogger = createDebugLogger('ARENA_COMMAND');
interface ArenaExecutionInput {
task: string;
models: ArenaModelConfig[];
approvalMode?: string;
}
function buildArenaExecutionInput(
parsed: ReturnType<typeof parseArenaArgs>,
config: Config,
): ArenaExecutionInput | MessageActionReturn {
if (!parsed.task) {
return {
type: 'message',
messageType: 'error',
content:
'Usage: /arena start --models model1,model2 <task>\n' +
'\n' +
'Options:\n' +
' --models [authType:]model1,[authType:]model2\n' +
' Models to compete (required, at least 2)\n' +
' Format: authType:modelId or just modelId\n' +
'\n' +
'Examples:\n' +
' /arena start --models openai:gpt-4o,anthropic:claude-3 "implement sorting"\n' +
' /arena start --models qwen-coder-plus,kimi-for-coding "fix the bug"',
};
}
if (parsed.models.length < 2) {
return {
type: 'message',
messageType: 'error',
content:
'Arena requires at least 2 models. Use --models model1,model2 to specify.\n' +
'Format: [authType:]modelId (e.g., openai:gpt-4o or just gpt-4o)',
};
}
// Get the current auth type as default for models without explicit auth type
const contentGeneratorConfig = config.getContentGeneratorConfig();
const defaultAuthType =
contentGeneratorConfig?.authType ?? AuthType.USE_OPENAI;
// Build ArenaModelConfig for each model, resolving display names from
// the model registry when available.
const modelsConfig = config.getModelsConfig();
const models: ArenaModelConfig[] = parsed.models.map((parsedModel) => {
const authType =
(parsedModel.authType as AuthType | undefined) ?? defaultAuthType;
const registryModels = modelsConfig.getAvailableModelsForAuthType(authType);
const resolved = registryModels.find((m) => m.id === parsedModel.modelId);
return {
modelId: parsedModel.modelId,
authType,
displayName: resolved?.label ?? parsedModel.modelId,
};
});
return {
task: parsed.task,
models,
approvalMode: config.getApprovalMode(),
};
}
/**
* Persists a single arena history item to the session JSONL file.
*
* Arena events fire asynchronously (after the slash command's recording
* window has closed), so each item must be recorded individually.
*/
function recordArenaItem(config: Config, item: HistoryItemWithoutId): void {
try {
const chatRecorder = config.getChatRecordingService();
if (!chatRecorder) return;
chatRecorder.recordSlashCommand({
phase: 'result',
rawCommand: '/arena',
outputHistoryItems: [{ ...item } as Record<string, unknown>],
});
} catch {
debugLogger.error('Failed to record arena history item');
}
}
function executeArenaCommand(
config: Config,
ui: CommandContext['ui'],
input: ArenaExecutionInput,
): void {
// Capture the main session's chat history so arena agents start with
// conversational context. Strip the leading startup context (env info
// user message + model ack) because each agent generates its own for
// its worktree directory — keeping the parent's would duplicate it.
let chatHistory;
try {
const fullHistory = config.getGeminiClient().getHistory();
chatHistory = stripStartupContext(fullHistory);
} catch {
debugLogger.debug('Could not retrieve chat history for arena agents');
}
const manager = new ArenaManager(config);
const emitter = manager.getEventEmitter();
const detachListeners: Array<() => void> = [];
const agentLabels = new Map<string, string>();
const addArenaMessage = (
type: 'info' | 'warning' | 'error' | 'success',
text: string,
) => {
ui.addItem({ type, text }, Date.now());
};
const addAndRecordArenaMessage = (
type: 'info' | 'warning' | 'error' | 'success',
text: string,
) => {
const item: HistoryItemWithoutId = { type, text };
ui.addItem(item, Date.now());
recordArenaItem(config, item);
};
const handleSessionStart = (event: ArenaSessionStartEvent) => {
const modelList = event.models
.map((model, index) => ` ${index + 1}. ${model.modelId}`)
.join('\n');
// SESSION_START fires synchronously before the first await in
// ArenaManager.start(), so the slash command processor's finally
// block already captures this item — no extra recording needed.
addArenaMessage(
MessageType.INFO,
`Arena started with ${event.models.length} agents on task: "${event.task}"\nModels:\n${modelList}`,
);
};
const handleAgentStart = (event: ArenaAgentStartEvent) => {
agentLabels.set(event.agentId, event.model.modelId);
debugLogger.debug(
`Arena agent started: ${event.model.modelId} (${event.agentId})`,
);
};
const handleSessionUpdate = (event: ArenaSessionUpdateEvent) => {
const attachHintPrefix = 'To view agent panes, run: ';
if (event.message.startsWith(attachHintPrefix)) {
const command = event.message.slice(attachHintPrefix.length).trim();
addAndRecordArenaMessage(
MessageType.INFO,
`Arena panes are running in tmux. Attach with: \`${command}\``,
);
return;
}
if (event.type === 'success') {
addAndRecordArenaMessage(MessageType.SUCCESS, event.message);
} else if (event.type === 'info') {
addAndRecordArenaMessage(MessageType.INFO, event.message);
} else {
addAndRecordArenaMessage(MessageType.WARNING, event.message);
}
};
const handleAgentError = (event: ArenaAgentErrorEvent) => {
const label = agentLabels.get(event.agentId) || event.agentId;
addAndRecordArenaMessage(
MessageType.ERROR,
`[${label}] failed: ${event.error}`,
);
};
const buildAgentCardData = (
result: ArenaAgentCompleteEvent['result'],
): ArenaAgentCardData => ({
label: result.model.modelId,
status: result.status,
durationMs: result.stats.durationMs,
totalTokens: result.stats.totalTokens,
inputTokens: result.stats.inputTokens,
outputTokens: result.stats.outputTokens,
toolCalls: result.stats.toolCalls,
successfulToolCalls: result.stats.successfulToolCalls,
failedToolCalls: result.stats.failedToolCalls,
rounds: result.stats.rounds,
error: result.error,
diff: result.diff,
});
const handleAgentComplete = (event: ArenaAgentCompleteEvent) => {
if (!isTerminalStatus(event.result.status)) {
return;
}
const agent = buildAgentCardData(event.result);
const item = {
type: 'arena_agent_complete',
agent,
} as HistoryItemWithoutId;
ui.addItem(item, Date.now());
recordArenaItem(config, item);
};
const handleSessionError = (event: ArenaSessionErrorEvent) => {
addAndRecordArenaMessage(MessageType.ERROR, `${event.error}`);
};
const handleSessionComplete = (event: ArenaSessionCompleteEvent) => {
const item = {
type: 'arena_session_complete',
sessionStatus: event.result.status,
task: event.result.task,
totalDurationMs: event.result.totalDurationMs ?? 0,
agents: event.result.agents.map(buildAgentCardData),
} as HistoryItemWithoutId;
ui.addItem(item, Date.now());
recordArenaItem(config, item);
};
emitter.on(ArenaEventType.SESSION_START, handleSessionStart);
detachListeners.push(() =>
emitter.off(ArenaEventType.SESSION_START, handleSessionStart),
);
emitter.on(ArenaEventType.AGENT_START, handleAgentStart);
detachListeners.push(() =>
emitter.off(ArenaEventType.AGENT_START, handleAgentStart),
);
emitter.on(ArenaEventType.SESSION_UPDATE, handleSessionUpdate);
detachListeners.push(() =>
emitter.off(ArenaEventType.SESSION_UPDATE, handleSessionUpdate),
);
emitter.on(ArenaEventType.AGENT_ERROR, handleAgentError);
detachListeners.push(() =>
emitter.off(ArenaEventType.AGENT_ERROR, handleAgentError),
);
emitter.on(ArenaEventType.AGENT_COMPLETE, handleAgentComplete);
detachListeners.push(() =>
emitter.off(ArenaEventType.AGENT_COMPLETE, handleAgentComplete),
);
emitter.on(ArenaEventType.SESSION_ERROR, handleSessionError);
detachListeners.push(() =>
emitter.off(ArenaEventType.SESSION_ERROR, handleSessionError),
);
emitter.on(ArenaEventType.SESSION_COMPLETE, handleSessionComplete);
detachListeners.push(() =>
emitter.off(ArenaEventType.SESSION_COMPLETE, handleSessionComplete),
);
config.setArenaManager(manager);
const cols = process.stdout.columns || 120;
const rows = Math.max((process.stdout.rows || 40) - 2, 1);
const lifecycle = manager
.start({
task: input.task,
models: input.models,
cols,
rows,
approvalMode: input.approvalMode,
chatHistory,
})
.then(
() => {
debugLogger.debug('Arena agents settled');
},
(error) => {
const message = error instanceof Error ? error.message : String(error);
addAndRecordArenaMessage(MessageType.ERROR, `${message}`);
debugLogger.error('Arena session failed:', error);
// Clear the stored manager so subsequent /arena start calls
// are not blocked by the stale reference after a startup failure.
config.setArenaManager(null);
// Detach listeners on failure — session is done for good.
for (const detach of detachListeners) {
detach();
}
},
);
// NOTE: listeners are NOT detached when start() resolves because agents
// may still be alive (IDLE) and accept follow-up tasks. The listeners
// reference this manager's emitter, so they are garbage collected when
// the manager is cleaned up and replaced.
// Store so that stop can wait for start() to fully unwind before cleanup
manager.setLifecyclePromise(lifecycle);
}
export const arenaCommand: SlashCommand = {
name: 'arena',
description: 'Manage Arena sessions',
kind: CommandKind.BUILT_IN,
subCommands: [
{
name: 'start',
description:
'Start an Arena session with multiple models competing on the same task',
kind: CommandKind.BUILT_IN,
action: async (
context: CommandContext,
args: string,
): Promise<void | MessageActionReturn | OpenDialogActionReturn> => {
const executionMode = context.executionMode ?? 'interactive';
if (executionMode !== 'interactive') {
return {
type: 'message',
messageType: 'error',
content:
'Arena is not supported in non-interactive mode. Use interactive mode to start an Arena session.',
};
}
const { services, ui } = context;
const { config } = services;
if (!config) {
return {
type: 'message',
messageType: 'error',
content: 'Configuration not available.',
};
}
// Refuse to start if a session already exists (regardless of status)
const existingManager = config.getArenaManager();
if (existingManager) {
return {
type: 'message',
messageType: 'error',
content:
'An Arena session exists. Use /arena stop or /arena select to end it before starting a new one.',
};
}
const parsed = parseArenaArgs(args);
if (parsed.models.length === 0) {
return {
type: 'dialog',
dialog: 'arena_start',
};
}
const executionInput = buildArenaExecutionInput(parsed, config);
if ('type' in executionInput) {
return executionInput;
}
executeArenaCommand(config, ui, executionInput);
},
},
{
name: 'stop',
description: 'Stop the current Arena session',
kind: CommandKind.BUILT_IN,
action: async (
context: CommandContext,
): Promise<void | SlashCommandActionReturn> => {
const executionMode = context.executionMode ?? 'interactive';
if (executionMode !== 'interactive') {
return {
type: 'message',
messageType: 'error',
content:
'Arena is not supported in non-interactive mode. Use interactive mode to stop an Arena session.',
};
}
const { config } = context.services;
if (!config) {
return {
type: 'message',
messageType: 'error',
content: 'Configuration not available.',
};
}
const manager = config.getArenaManager();
if (!manager) {
return {
type: 'message',
messageType: 'error',
content: 'No running Arena session found.',
};
}
return {
type: 'dialog',
dialog: 'arena_stop',
};
},
},
{
name: 'status',
description: 'Show the current Arena session status',
kind: CommandKind.BUILT_IN,
action: async (
context: CommandContext,
): Promise<void | SlashCommandActionReturn> => {
const executionMode = context.executionMode ?? 'interactive';
if (executionMode !== 'interactive') {
return {
type: 'message',
messageType: 'error',
content: 'Arena is not supported in non-interactive mode.',
};
}
const { config } = context.services;
if (!config) {
return {
type: 'message',
messageType: 'error',
content: 'Configuration not available.',
};
}
const manager = config.getArenaManager();
if (!manager) {
return {
type: 'message',
messageType: 'error',
content: 'No Arena session found. Start one with /arena start.',
};
}
return {
type: 'dialog',
dialog: 'arena_status',
};
},
},
{
name: 'select',
altNames: ['choose'],
description:
'Select a model result and merge its diff into the current workspace',
kind: CommandKind.BUILT_IN,
action: async (
context: CommandContext,
args: string,
): Promise<
| void
| MessageActionReturn
| OpenDialogActionReturn
| ConfirmActionReturn
> => {
const executionMode = context.executionMode ?? 'interactive';
if (executionMode !== 'interactive') {
return {
type: 'message',
messageType: 'error',
content: 'Arena is not supported in non-interactive mode.',
};
}
const { config } = context.services;
if (!config) {
return {
type: 'message',
messageType: 'error',
content: 'Configuration not available.',
};
}
const manager = config.getArenaManager();
if (!manager) {
return {
type: 'message',
messageType: 'error',
content: 'No arena session found. Start one with /arena start.',
};
}
const sessionStatus = manager.getSessionStatus();
if (
sessionStatus === ArenaSessionStatus.RUNNING ||
sessionStatus === ArenaSessionStatus.INITIALIZING
) {
return {
type: 'message',
messageType: 'error',
content:
'Arena session is still running. Wait for it to complete or use /arena stop first.',
};
}
// Handle --discard flag before checking for successful agents,
// so users can clean up worktrees even when all agents failed.
const trimmedArgs = args.trim();
if (trimmedArgs === '--discard') {
if (!context.overwriteConfirmed) {
return {
type: 'confirm_action',
prompt: 'Discard all Arena results and clean up worktrees?',
originalInvocation: {
raw: context.invocation?.raw || '/arena select --discard',
},
};
}
await config.cleanupArenaRuntime(true);
return {
type: 'message',
messageType: 'info',
content: 'Arena results discarded. All worktrees cleaned up.',
};
}
const agents = manager.getAgentStates();
const hasSuccessful = agents.some((a) => isSuccessStatus(a.status));
if (!hasSuccessful) {
return {
type: 'message',
messageType: 'error',
content:
'No successful agent results to select from. All agents failed or were cancelled.\n' +
'Use /arena stop to end the session.',
};
}
// Handle direct model selection via args
if (trimmedArgs) {
const matchingAgent = agents.find(
(a) =>
isSuccessStatus(a.status) &&
a.model.modelId.toLowerCase() === trimmedArgs.toLowerCase(),
);
if (!matchingAgent) {
return {
type: 'message',
messageType: 'error',
content: `No idle agent found matching "${trimmedArgs}".`,
};
}
const label = matchingAgent.model.modelId;
const result = await manager.applyAgentResult(matchingAgent.agentId);
if (!result.success) {
return {
type: 'message',
messageType: 'error',
content: `Failed to apply changes from ${label}: ${result.error}`,
};
}
await config.cleanupArenaRuntime(true);
return {
type: 'message',
messageType: 'info',
content: `Applied changes from ${label} to workspace. Arena session complete.`,
};
}
// No args → open the select dialog
return {
type: 'dialog',
dialog: 'arena_select',
};
},
},
],
};

4
packages/cli/src/ui/commands/types.ts
View file

@ -139,6 +139,10 @@ export interface OpenDialogActionReturn {
dialog:
| 'help'
| 'arena_start'
| 'arena_select'
| 'arena_stop'
| 'arena_status'
| 'auth'
| 'theme'
| 'editor'

287
packages/cli/src/ui/components/BaseTextInput.tsx Normal file
View file

@ -0,0 +1,287 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview BaseTextInput — shared text input component with rendering
* and common readline keyboard handling.
*
* Provides:
* - Viewport line rendering from a TextBuffer with cursor display
* - Placeholder support when buffer is empty
* - Configurable border/prefix styling
* - Standard readline shortcuts (Ctrl+A/E/K/U/W, Escape, etc.)
* - An `onKeypress` interceptor so consumers can layer custom behavior
*
* Used by both InputPrompt (with syntax highlighting + complex key handling)
* and AgentComposer (with minimal customization).
*/
import type React from 'react';
import { useCallback } from 'react';
import { Box, Text } from 'ink';
import chalk from 'chalk';
import type { TextBuffer } from './shared/text-buffer.js';
import type { Key } from '../hooks/useKeypress.js';
import { useKeypress } from '../hooks/useKeypress.js';
import { keyMatchers, Command } from '../keyMatchers.js';
import { cpSlice, cpLen } from '../utils/textUtils.js';
import { theme } from '../semantic-colors.js';
// ─── Types ──────────────────────────────────────────────────
export interface RenderLineOptions {
/** The text content of this visual line. */
lineText: string;
/** Whether the cursor is on this visual line. */
isOnCursorLine: boolean;
/** The cursor column within this visual line (visual col, not logical). */
cursorCol: number;
/** Whether the cursor should be rendered. */
showCursor: boolean;
/** Index of this line within the rendered viewport (0-based). */
visualLineIndex: number;
/** Absolute visual line index (scrollVisualRow + visualLineIndex). */
absoluteVisualIndex: number;
/** The underlying text buffer. */
buffer: TextBuffer;
/** The first visible visual row (scroll offset). */
scrollVisualRow: number;
}
export interface BaseTextInputProps {
/** The text buffer driving this input. */
buffer: TextBuffer;
/** Called when the user submits (Enter). Buffer is cleared automatically. */
onSubmit: (text: string) => void;
/**
* Optional key interceptor. Called before default readline handling.
* Return `true` if the key was handled (skips default processing).
*/
onKeypress?: (key: Key) => boolean;
/** Whether to show the blinking block cursor. Defaults to true. */
showCursor?: boolean;
/** Placeholder text shown when the buffer is empty. */
placeholder?: string;
/** Custom prefix node (defaults to `> `). */
prefix?: React.ReactNode;
/** Border color for the input box. */
borderColor?: string;
/** Whether keyboard handling is active. Defaults to true. */
isActive?: boolean;
/**
* Custom line renderer for advanced rendering (e.g. syntax highlighting).
* When not provided, lines are rendered as plain text with cursor overlay.
*/
renderLine?: (opts: RenderLineOptions) => React.ReactNode;
}
// ─── Default line renderer ──────────────────────────────────
/**
* Renders a single visual line with an inverse-video block cursor.
* Uses codepoint-aware string operations for Unicode/emoji safety.
*/
export function defaultRenderLine({
lineText,
isOnCursorLine,
cursorCol,
showCursor,
}: RenderLineOptions): React.ReactNode {
if (!isOnCursorLine || !showCursor) {
return <Text>{lineText || ' '}</Text>;
}
const len = cpLen(lineText);
// Cursor past end of line — append inverse space
if (cursorCol >= len) {
return (
<Text>
{lineText}
{chalk.inverse(' ') + '\u200B'}
</Text>
);
}
const before = cpSlice(lineText, 0, cursorCol);
const cursorChar = cpSlice(lineText, cursorCol, cursorCol + 1);
const after = cpSlice(lineText, cursorCol + 1);
return (
<Text>
{before}
{chalk.inverse(cursorChar)}
{after}
</Text>
);
}
// ─── Component ──────────────────────────────────────────────
export const BaseTextInput: React.FC<BaseTextInputProps> = ({
buffer,
onSubmit,
onKeypress,
showCursor = true,
placeholder,
prefix,
borderColor,
isActive = true,
renderLine = defaultRenderLine,
}) => {
// ── Keyboard handling ──
const handleKey = useCallback(
(key: Key) => {
// Let the consumer intercept first
if (onKeypress?.(key)) {
return;
}
// ── Standard readline shortcuts ──
// Submit (Enter, no modifiers)
if (keyMatchers[Command.SUBMIT](key)) {
if (buffer.text.trim()) {
const text = buffer.text;
buffer.setText('');
onSubmit(text);
}
return;
}
// Newline (Shift+Enter, Ctrl+Enter, Ctrl+J)
if (keyMatchers[Command.NEWLINE](key)) {
buffer.newline();
return;
}
// Escape → clear input
if (keyMatchers[Command.ESCAPE](key)) {
if (buffer.text.length > 0) {
buffer.setText('');
}
return;
}
// Ctrl+C → clear input
if (keyMatchers[Command.CLEAR_INPUT](key)) {
if (buffer.text.length > 0) {
buffer.setText('');
}
return;
}
// Ctrl+A → home
if (keyMatchers[Command.HOME](key)) {
buffer.move('home');
return;
}
// Ctrl+E → end
if (keyMatchers[Command.END](key)) {
buffer.move('end');
return;
}
// Ctrl+K → kill to end of line
if (keyMatchers[Command.KILL_LINE_RIGHT](key)) {
buffer.killLineRight();
return;
}
// Ctrl+U → kill to start of line
if (keyMatchers[Command.KILL_LINE_LEFT](key)) {
buffer.killLineLeft();
return;
}
// Ctrl+W / Alt+Backspace → delete word backward
if (keyMatchers[Command.DELETE_WORD_BACKWARD](key)) {
buffer.deleteWordLeft();
return;
}
// Ctrl+X Ctrl+E → open in external editor
if (keyMatchers[Command.OPEN_EXTERNAL_EDITOR](key)) {
buffer.openInExternalEditor();
return;
}
// Backspace
if (
key.name === 'backspace' ||
key.sequence === '\x7f' ||
(key.ctrl && key.name === 'h')
) {
buffer.backspace();
return;
}
// Fallthrough — delegate to buffer's built-in input handler
buffer.handleInput(key);
},
[buffer, onSubmit, onKeypress],
);
useKeypress(handleKey, { isActive });
// ── Rendering ──
const linesToRender = buffer.viewportVisualLines;
const [cursorVisualRow, cursorVisualCol] = buffer.visualCursor;
const scrollVisualRow = buffer.visualScrollRow;
const resolvedBorderColor = borderColor ?? theme.border.focused;
const resolvedPrefix = prefix ?? (
<Text color={theme.text.accent}>{'> '}</Text>
);
return (
<Box
borderStyle="single"
borderTop={true}
borderBottom={true}
borderLeft={false}
borderRight={false}
borderColor={resolvedBorderColor}
>
{resolvedPrefix}
<Box flexGrow={1} flexDirection="column">
{buffer.text.length === 0 && placeholder ? (
showCursor ? (
<Text>
{chalk.inverse(placeholder.slice(0, 1))}
<Text color={theme.text.secondary}>{placeholder.slice(1)}</Text>
</Text>
) : (
<Text color={theme.text.secondary}>{placeholder}</Text>
)
) : (
linesToRender.map((lineText, idx) => {
const absoluteVisualIndex = scrollVisualRow + idx;
const isOnCursorLine = absoluteVisualIndex === cursorVisualRow;
return (
<Box key={idx} height={1}>
{renderLine({
lineText,
isOnCursorLine,
cursorCol: cursorVisualCol,
showCursor,
visualLineIndex: idx,
absoluteVisualIndex,
buffer,
scrollVisualRow,
})}
</Box>
);
})
)}
</Box>
</Box>
);
};

4
packages/cli/src/ui/components/Composer.tsx
View file

@ -115,8 +115,8 @@ export const Composer = () => {
{/* Exclusive area: only one component visible at a time */}
{/* Hide footer when a confirmation dialog (e.g. ask_user_question) is active */}
{!showSuggestions &&
uiState.streamingState !== StreamingState.WaitingForConfirmation &&
{uiState.isInputActive &&
!showSuggestions &&
(showShortcuts ? (
<KeyboardShortcuts />
) : (

47
packages/cli/src/ui/components/DialogManager.tsx
View file

@ -20,6 +20,10 @@ import { AuthDialog } from '../auth/AuthDialog.js';
import { EditorSettingsDialog } from './EditorSettingsDialog.js';
import { PermissionsModifyTrustDialog } from './PermissionsModifyTrustDialog.js';
import { ModelDialog } from './ModelDialog.js';
import { ArenaStartDialog } from './arena/ArenaStartDialog.js';
import { ArenaSelectDialog } from './arena/ArenaSelectDialog.js';
import { ArenaStopDialog } from './arena/ArenaStopDialog.js';
import { ArenaStatusDialog } from './arena/ArenaStatusDialog.js';
import { ApprovalModeDialog } from './ApprovalModeDialog.js';
import { theme } from '../semantic-colors.js';
import { useUIState } from '../contexts/UIStateContext.js';
@ -237,6 +241,49 @@ export const DialogManager = ({
if (uiState.isModelDialogOpen) {
return <ModelDialog onClose={uiActions.closeModelDialog} />;
}
if (uiState.activeArenaDialog === 'start') {
return (
<ArenaStartDialog
onClose={() => uiActions.closeArenaDialog()}
onConfirm={(models) => uiActions.handleArenaModelsSelected?.(models)}
/>
);
}
if (uiState.activeArenaDialog === 'status') {
const arenaManager = config.getArenaManager();
if (arenaManager) {
return (
<ArenaStatusDialog
manager={arenaManager}
closeArenaDialog={uiActions.closeArenaDialog}
width={mainAreaWidth}
/>
);
}
}
if (uiState.activeArenaDialog === 'stop') {
return (
<ArenaStopDialog
config={config}
addItem={addItem}
closeArenaDialog={uiActions.closeArenaDialog}
/>
);
}
if (uiState.activeArenaDialog === 'select') {
const arenaManager = config.getArenaManager();
if (arenaManager) {
return (
<ArenaSelectDialog
manager={arenaManager}
config={config}
addItem={addItem}
closeArenaDialog={uiActions.closeArenaDialog}
/>
);
}
}
if (uiState.isAuthDialogOpen || uiState.authError) {
return (
<Box flexDirection="column">

17
packages/cli/src/ui/components/HistoryItemDisplay.tsx
View file

@ -24,6 +24,7 @@ import {
WarningMessage,
ErrorMessage,
RetryCountdownMessage,
SuccessMessage,
} from './messages/StatusMessages.js';
import { Box } from 'ink';
import { AboutBox } from './AboutBox.js';
@ -38,6 +39,7 @@ import { getMCPServerStatus } from '@qwen-code/qwen-code-core';
import { SkillsList } from './views/SkillsList.js';
import { ToolsList } from './views/ToolsList.js';
import { McpStatus } from './views/McpStatus.js';
import { ArenaAgentCard, ArenaSessionCard } from './arena/ArenaCards.js';
import { InsightProgressMessage } from './messages/InsightProgressMessage.js';
interface HistoryItemDisplayProps {
@ -132,6 +134,9 @@ const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
{itemForDisplay.type === 'info' && (
<InfoMessage text={itemForDisplay.text} />
)}
{itemForDisplay.type === 'success' && (
<SuccessMessage text={itemForDisplay.text} />
)}
{itemForDisplay.type === 'warning' && (
<WarningMessage text={itemForDisplay.text} />
)}
@ -191,6 +196,18 @@ const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
{itemForDisplay.type === 'mcp_status' && (
<McpStatus {...itemForDisplay} serverStatus={getMCPServerStatus} />
)}
{itemForDisplay.type === 'arena_agent_complete' && (
<ArenaAgentCard agent={itemForDisplay.agent} width={boxWidth} />
)}
{itemForDisplay.type === 'arena_session_complete' && (
<ArenaSessionCard
sessionStatus={itemForDisplay.sessionStatus}
task={itemForDisplay.task}
totalDurationMs={itemForDisplay.totalDurationMs}
agents={itemForDisplay.agents}
width={boxWidth}
/>
)}
{itemForDisplay.type === 'insight_progress' && (
<InsightProgressMessage progress={itemForDisplay.progress} />
)}

19
packages/cli/src/ui/components/InputPrompt.test.tsx
View file

@ -1957,6 +1957,25 @@ describe('InputPrompt', () => {
});
describe('command search (Ctrl+R when not in shell)', () => {
it('passes newest-first user history to command search', async () => {
props.shellModeActive = false;
props.userMessages = ['oldest', 'middle', 'newest'];
const { unmount } = renderWithProviders(<InputPrompt {...props} />);
await wait();
const commandSearchCall =
mockedUseReverseSearchCompletion.mock.calls.find(
([, history]) =>
Array.isArray(history) &&
history.length === 3 &&
history.includes('newest'),
);
expect(commandSearchCall?.[1]).toEqual(['newest', 'middle', 'oldest']);
unmount();
});
it('enters command search on Ctrl+R and shows suggestions', async () => {
props.shellModeActive = false;

499
packages/cli/src/ui/components/InputPrompt.tsx
View file

@ -5,7 +5,7 @@
*/
import type React from 'react';
import { useCallback, useEffect, useState, useRef } from 'react';
import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
import { Box, Text } from 'ink';
import { SuggestionsDisplay, MAX_WIDTH } from './SuggestionsDisplay.js';
import { theme } from '../semantic-colors.js';
@ -18,7 +18,6 @@ import { useShellHistory } from '../hooks/useShellHistory.js';
import { useReverseSearchCompletion } from '../hooks/useReverseSearchCompletion.js';
import { useCommandCompletion } from '../hooks/useCommandCompletion.js';
import type { Key } from '../hooks/useKeypress.js';
import { useKeypress } from '../hooks/useKeypress.js';
import { keyMatchers, Command } from '../keyMatchers.js';
import type { CommandContext, SlashCommand } from '../commands/types.js';
import type { Config } from '@qwen-code/qwen-code-core';
@ -43,7 +42,13 @@ import { useShellFocusState } from '../contexts/ShellFocusContext.js';
import { useUIState } from '../contexts/UIStateContext.js';
import { useUIActions } from '../contexts/UIActionsContext.js';
import { useKeypressContext } from '../contexts/KeypressContext.js';
import {
useAgentViewState,
useAgentViewActions,
} from '../contexts/AgentViewContext.js';
import { FEEDBACK_DIALOG_KEYS } from '../FeedbackDialog.js';
import { BaseTextInput } from './BaseTextInput.js';
import type { RenderLineOptions } from './BaseTextInput.js';
/**
* Represents an attachment (e.g., pasted image) displayed above the input prompt
@ -78,30 +83,8 @@ export interface InputPromptProps {
isEmbeddedShellFocused?: boolean;
}
// The input content, input container, and input suggestions list may have different widths
export const calculatePromptWidths = (terminalWidth: number) => {
const widthFraction = 0.9;
const FRAME_PADDING_AND_BORDER = 4; // Border (2) + padding (2)
const PROMPT_PREFIX_WIDTH = 2; // '> ' or '! '
const MIN_CONTENT_WIDTH = 2;
const innerContentWidth =
Math.floor(terminalWidth * widthFraction) -
FRAME_PADDING_AND_BORDER -
PROMPT_PREFIX_WIDTH;
const inputWidth = Math.max(MIN_CONTENT_WIDTH, innerContentWidth);
const FRAME_OVERHEAD = FRAME_PADDING_AND_BORDER + PROMPT_PREFIX_WIDTH;
const containerWidth = inputWidth + FRAME_OVERHEAD;
const suggestionsWidth = Math.max(20, Math.floor(terminalWidth * 1.0));
return {
inputWidth,
containerWidth,
suggestionsWidth,
frameOverhead: FRAME_OVERHEAD,
} as const;
};
// Re-export from shared utils for backwards compatibility
export { calculatePromptWidths } from '../utils/layoutUtils.js';
// Large paste placeholder thresholds
const LARGE_PASTE_CHAR_THRESHOLD = 1000;
@ -132,6 +115,9 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
const uiState = useUIState();
const uiActions = useUIActions();
const { pasteWorkaround } = useKeypressContext();
const { agents, agentTabBarFocused } = useAgentViewState();
const { setAgentTabBarFocused } = useAgentViewActions();
const hasAgents = agents.size > 0;
const [justNavigatedHistory, setJustNavigatedHistory] = useState(false);
const [escPressCount, setEscPressCount] = useState(0);
const [showEscapePrompt, setShowEscapePrompt] = useState(false);
@ -213,9 +199,14 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
reverseSearchActive,
);
const commandSearchHistory = useMemo(
() => [...userMessages].reverse(),
[userMessages],
);
const commandSearchCompletion = useReverseSearchCompletion(
buffer,
userMessages,
commandSearchHistory,
commandSearchActive,
);
@ -225,7 +216,8 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
const resetCommandSearchCompletionState =
commandSearchCompletion.resetCompletionState;
const showCursor = focus && isShellFocused && !isEmbeddedShellFocused;
const showCursor =
focus && isShellFocused && !isEmbeddedShellFocused && !agentTabBarFocused;
const resetEscapeState = useCallback(() => {
if (escapeTimerRef.current) {
@ -351,6 +343,17 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
onChange: customSetTextAndResetCompletionSignal,
});
// When an arena session starts (agents appear), reset history position so
// that pressing down-arrow immediately focuses the agent tab bar instead
// of cycling through input history.
const prevHasAgentsRef = useRef(hasAgents);
useEffect(() => {
if (hasAgents && !prevHasAgentsRef.current) {
inputHistory.resetHistoryNav();
}
prevHasAgentsRef.current = hasAgents;
}, [hasAgents, inputHistory]);
// Effect to reset completion if history navigation just occurred and set the text
useEffect(() => {
if (justNavigatedHistory) {
@ -411,13 +414,30 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
}, []);
const handleInput = useCallback(
(key: Key) => {
(key: Key): boolean => {
// When the tab bar has focus, block all non-printable keys so arrow
// keys and shortcuts don't interfere. Printable characters fall
// through to BaseTextInput's default handler so the first keystroke
// appears in the input immediately (the tab bar handler releases
// focus on the same event).
if (agentTabBarFocused) {
if (
key.sequence &&
key.sequence.length === 1 &&
!key.ctrl &&
!key.meta
) {
return false; // let BaseTextInput type the character
}
return true; // consume non-printable keys
}
// TODO(jacobr): this special case is likely not needed anymore.
// We should probably stop supporting paste if the InputPrompt is not
// focused.
/// We want to handle paste even when not focused to support drag and drop.
if (!focus && !key.paste) {
return;
return true;
}
if (key.paste) {
@ -459,18 +479,18 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
// Normal paste handling for small content
buffer.handleInput(key);
}
return;
return true;
}
if (vimHandleInput && vimHandleInput(key)) {
return;
return true;
}
// Handle feedback dialog keyboard interactions when dialog is open
if (uiState.isFeedbackDialogOpen) {
// If it's one of the feedback option keys (1-4), let FeedbackDialog handle it
if ((FEEDBACK_DIALOG_KEYS as readonly string[]).includes(key.name)) {
return;
return true;
} else {
// For any other key, close feedback dialog temporarily and continue with normal processing
uiActions.temporaryCloseFeedbackDialog();
@ -496,7 +516,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
}
setShellModeActive(!shellModeActive);
buffer.setText(''); // Clear the '!' from input
return;
return true;
}
// Toggle keyboard shortcuts display with "?" when buffer is empty
@ -507,7 +527,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
onToggleShortcuts
) {
onToggleShortcuts();
return;
return true;
}
// Hide shortcuts on any other key press
@ -537,33 +557,33 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
setReverseSearchActive,
reverseSearchCompletion.resetCompletionState,
);
return;
return true;
}
if (commandSearchActive) {
cancelSearch(
setCommandSearchActive,
commandSearchCompletion.resetCompletionState,
);
return;
return true;
}
if (shellModeActive) {
setShellModeActive(false);
resetEscapeState();
return;
return true;
}
if (completion.showSuggestions) {
completion.resetCompletionState();
setExpandedSuggestionIndex(-1);
resetEscapeState();
return;
return true;
}
// Handle double ESC for clearing input
if (escPressCount === 0) {
if (buffer.text === '') {
return;
return true;
}
setEscPressCount(1);
setShowEscapePrompt(true);
@ -579,7 +599,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
resetCompletionState();
resetEscapeState();
}
return;
return true;
}
// Ctrl+Y: Retry the last failed request.
@ -589,19 +609,19 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
// If no failed request exists, a message will be shown to the user.
if (keyMatchers[Command.RETRY_LAST](key)) {
uiActions.handleRetryLastPrompt();
return;
return true;
}
if (shellModeActive && keyMatchers[Command.REVERSE_SEARCH](key)) {
setReverseSearchActive(true);
setTextBeforeReverseSearch(buffer.text);
setCursorPosition(buffer.cursor);
return;
return true;
}
if (keyMatchers[Command.CLEAR_SCREEN](key)) {
onClearScreen();
return;
return true;
}
if (reverseSearchActive || commandSearchActive) {
@ -626,29 +646,29 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
if (showSuggestions) {
if (keyMatchers[Command.NAVIGATION_UP](key)) {
navigateUp();
return;
return true;
}
if (keyMatchers[Command.NAVIGATION_DOWN](key)) {
navigateDown();
return;
return true;
}
if (keyMatchers[Command.COLLAPSE_SUGGESTION](key)) {
if (suggestions[activeSuggestionIndex].value.length >= MAX_WIDTH) {
setExpandedSuggestionIndex(-1);
return;
return true;
}
}
if (keyMatchers[Command.EXPAND_SUGGESTION](key)) {
if (suggestions[activeSuggestionIndex].value.length >= MAX_WIDTH) {
setExpandedSuggestionIndex(activeSuggestionIndex);
return;
return true;
}
}
if (keyMatchers[Command.ACCEPT_SUGGESTION_REVERSE_SEARCH](key)) {
sc.handleAutocomplete(activeSuggestionIndex);
resetState();
setActive(false);
return;
return true;
}
}
@ -660,7 +680,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
handleSubmitAndClear(textToSubmit);
resetState();
setActive(false);
return;
return true;
}
// Prevent up/down from falling through to regular history navigation
@ -668,14 +688,14 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
keyMatchers[Command.NAVIGATION_UP](key) ||
keyMatchers[Command.NAVIGATION_DOWN](key)
) {
return;
return true;
}
}
// If the command is a perfect match, pressing enter should execute it.
if (completion.isPerfectMatch && keyMatchers[Command.RETURN](key)) {
handleSubmitAndClear(buffer.text);
return;
return true;
}
if (completion.showSuggestions) {
@ -683,12 +703,12 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
if (keyMatchers[Command.COMPLETION_UP](key)) {
completion.navigateUp();
setExpandedSuggestionIndex(-1); // Reset expansion when navigating
return;
return true;
}
if (keyMatchers[Command.COMPLETION_DOWN](key)) {
completion.navigateDown();
setExpandedSuggestionIndex(-1); // Reset expansion when navigating
return;
return true;
}
}
@ -703,7 +723,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
setExpandedSuggestionIndex(-1); // Reset expansion after selection
}
}
return;
return true;
}
}
@ -711,28 +731,28 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
if (isAttachmentMode && attachments.length > 0) {
if (key.name === 'left') {
setSelectedAttachmentIndex((i) => Math.max(0, i - 1));
return;
return true;
}
if (key.name === 'right') {
setSelectedAttachmentIndex((i) =>
Math.min(attachments.length - 1, i + 1),
);
return;
return true;
}
if (keyMatchers[Command.NAVIGATION_DOWN](key)) {
// Exit attachment mode and return to input
setIsAttachmentMode(false);
setSelectedAttachmentIndex(-1);
return;
return true;
}
if (key.name === 'backspace' || key.name === 'delete') {
handleAttachmentDelete(selectedAttachmentIndex);
return;
return true;
}
if (key.name === 'return' || key.name === 'escape') {
setIsAttachmentMode(false);
setSelectedAttachmentIndex(-1);
return;
return true;
}
// For other keys, exit attachment mode and let input handle them
setIsAttachmentMode(false);
@ -753,7 +773,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
) {
setIsAttachmentMode(true);
setSelectedAttachmentIndex(attachments.length - 1);
return;
return true;
}
if (!shellModeActive) {
@ -761,16 +781,16 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
setCommandSearchActive(true);
setTextBeforeReverseSearch(buffer.text);
setCursorPosition(buffer.cursor);
return;
return true;
}
if (keyMatchers[Command.HISTORY_UP](key)) {
inputHistory.navigateUp();
return;
return true;
}
if (keyMatchers[Command.HISTORY_DOWN](key)) {
inputHistory.navigateDown();
return;
return true;
}
// Handle arrow-up/down for history on single-line or at edges
if (
@ -779,27 +799,33 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
(buffer.visualCursor[0] === 0 && buffer.visualScrollRow === 0))
) {
inputHistory.navigateUp();
return;
return true;
}
if (
keyMatchers[Command.NAVIGATION_DOWN](key) &&
(buffer.allVisualLines.length === 1 ||
buffer.visualCursor[0] === buffer.allVisualLines.length - 1)
) {
inputHistory.navigateDown();
return;
if (inputHistory.navigateDown()) {
return true;
}
if (hasAgents) {
setAgentTabBarFocused(true);
return true;
}
return true;
}
} else {
// Shell History Navigation
if (keyMatchers[Command.NAVIGATION_UP](key)) {
const prevCommand = shellHistory.getPreviousCommand();
if (prevCommand !== null) buffer.setText(prevCommand);
return;
return true;
}
if (keyMatchers[Command.NAVIGATION_DOWN](key)) {
const nextCommand = shellHistory.getNextCommand();
if (nextCommand !== null) buffer.setText(nextCommand);
return;
return true;
}
}
@ -810,7 +836,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
// paste markers may not work reliably and Enter key events can leak from pasted text.
if (pasteWorkaround && recentPasteTime !== null) {
// Paste occurred recently, ignore this submit to prevent auto-execution
return;
return true;
}
const [row, col] = buffer.cursor;
@ -823,65 +849,21 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
handleSubmitAndClear(buffer.text);
}
}
return;
}
// Newline insertion
if (keyMatchers[Command.NEWLINE](key)) {
buffer.newline();
return;
}
// Ctrl+A (Home) / Ctrl+E (End)
if (keyMatchers[Command.HOME](key)) {
buffer.move('home');
return;
}
if (keyMatchers[Command.END](key)) {
buffer.move('end');
return;
}
// Ctrl+C (Clear input)
if (keyMatchers[Command.CLEAR_INPUT](key)) {
if (buffer.text.length > 0) {
buffer.setText('');
resetCompletionState();
}
return;
}
// Kill line commands
if (keyMatchers[Command.KILL_LINE_RIGHT](key)) {
buffer.killLineRight();
return;
}
if (keyMatchers[Command.KILL_LINE_LEFT](key)) {
buffer.killLineLeft();
return;
}
if (keyMatchers[Command.DELETE_WORD_BACKWARD](key)) {
buffer.deleteWordLeft();
return;
}
// External editor
if (keyMatchers[Command.OPEN_EXTERNAL_EDITOR](key)) {
buffer.openInExternalEditor();
return;
return true;
}
// Ctrl+V for clipboard image paste
if (keyMatchers[Command.PASTE_CLIPBOARD_IMAGE](key)) {
handleClipboardImage();
return;
return true;
}
// Handle backspace with placeholder-aware deletion
if (
key.name === 'backspace' ||
key.sequence === '\x7f' ||
(key.ctrl && key.name === 'h')
pendingPastes.size > 0 &&
(key.name === 'backspace' ||
key.sequence === '\x7f' ||
(key.ctrl && key.name === 'h'))
) {
const text = buffer.text;
const [row, col] = buffer.cursor;
@ -894,7 +876,6 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
offset += col;
// Check if we're at the end of any placeholder
let placeholderDeleted = false;
for (const placeholder of pendingPastes.keys()) {
const placeholderStart = offset - placeholder.length;
if (
@ -913,20 +894,22 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
if (parsed) {
freePlaceholderId(parsed.charCount, parsed.id);
}
placeholderDeleted = true;
break;
return true;
}
}
if (!placeholderDeleted) {
// Normal backspace behavior
buffer.backspace();
}
return;
// No placeholder matched — fall through to BaseTextInput's default backspace
}
// Fall back to the text buffer's default input handling for all other keys
buffer.handleInput(key);
// Ctrl+C with completion active — also reset completion state
if (keyMatchers[Command.CLEAR_INPUT](key)) {
if (buffer.text.length > 0) {
resetCompletionState();
}
// Fall through to BaseTextInput's default CLEAR_INPUT handler
}
// All remaining keys (readline shortcuts, text input) handled by BaseTextInput
return false;
},
[
focus,
@ -964,15 +947,89 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
pendingPastes,
parsePlaceholder,
freePlaceholderId,
agentTabBarFocused,
hasAgents,
setAgentTabBarFocused,
],
);
useKeypress(handleInput, { isActive: !isEmbeddedShellFocused });
const renderLineWithHighlighting = useCallback(
(opts: RenderLineOptions): React.ReactNode => {
const {
lineText,
isOnCursorLine,
cursorCol: cursorVisualColAbsolute,
showCursor: showCursorOpt,
absoluteVisualIndex,
buffer: buf,
} = opts;
const mapEntry = buf.visualToLogicalMap[absoluteVisualIndex];
const [logicalLineIdx, logicalStartCol] = mapEntry;
const logicalLine = buf.lines[logicalLineIdx] || '';
const tokens = parseInputForHighlighting(logicalLine, logicalLineIdx);
const linesToRender = buffer.viewportVisualLines;
const [cursorVisualRowAbsolute, cursorVisualColAbsolute] =
buffer.visualCursor;
const scrollVisualRow = buffer.visualScrollRow;
const visualStart = logicalStartCol;
const visualEnd = logicalStartCol + cpLen(lineText);
const segments = buildSegmentsForVisualSlice(
tokens,
visualStart,
visualEnd,
);
const renderedLine: React.ReactNode[] = [];
let charCount = 0;
segments.forEach((seg, segIdx) => {
const segLen = cpLen(seg.text);
let display = seg.text;
if (isOnCursorLine) {
const segStart = charCount;
const segEnd = segStart + segLen;
if (
cursorVisualColAbsolute >= segStart &&
cursorVisualColAbsolute < segEnd
) {
const charToHighlight = cpSlice(
seg.text,
cursorVisualColAbsolute - segStart,
cursorVisualColAbsolute - segStart + 1,
);
const highlighted = showCursorOpt
? chalk.inverse(charToHighlight)
: charToHighlight;
display =
cpSlice(seg.text, 0, cursorVisualColAbsolute - segStart) +
highlighted +
cpSlice(seg.text, cursorVisualColAbsolute - segStart + 1);
}
charCount = segEnd;
}
const color =
seg.type === 'command' || seg.type === 'file'
? theme.text.accent
: theme.text.primary;
renderedLine.push(
<Text key={`token-${segIdx}`} color={color}>
{display}
</Text>,
);
});
if (isOnCursorLine && cursorVisualColAbsolute === cpLen(lineText)) {
// Add zero-width space after cursor to prevent Ink from trimming trailing whitespace
renderedLine.push(
<Text key={`cursor-end-${cursorVisualColAbsolute}`}>
{showCursorOpt ? chalk.inverse(' ') + '\u200B' : ' \u200B'}
</Text>,
);
}
return <Text>{renderedLine}</Text>;
},
[],
);
const getActiveCompletion = () => {
if (commandSearchActive) return commandSearchCompletion;
@ -1009,10 +1066,33 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
}
const borderColor =
isShellFocused && !isEmbeddedShellFocused
isShellFocused && !isEmbeddedShellFocused && !agentTabBarFocused
? (statusColor ?? theme.border.focused)
: theme.border.default;
const prefixNode = (
<Text
color={statusColor ?? theme.text.accent}
aria-label={statusText || undefined}
>
{shellModeActive ? (
reverseSearchActive ? (
<Text color={theme.text.link} aria-label={SCREEN_READER_USER_PREFIX}>
(r:){' '}
</Text>
) : (
'!'
)
) : commandSearchActive ? (
<Text color={theme.text.accent}>(r:) </Text>
) : showYoloStyling ? (
'*'
) : (
'>'
)}{' '}
</Text>
);
return (
<>
{attachments.length > 0 && (
@ -1032,142 +1112,17 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
))}
</Box>
)}
<Box
borderStyle="single"
borderTop={true}
borderBottom={true}
borderLeft={false}
borderRight={false}
<BaseTextInput
buffer={buffer}
onSubmit={handleSubmitAndClear}
onKeypress={handleInput}
showCursor={showCursor}
placeholder={placeholder}
prefix={prefixNode}
borderColor={borderColor}
>
<Text
color={statusColor ?? theme.text.accent}
aria-label={statusText || undefined}
>
{shellModeActive ? (
reverseSearchActive ? (
<Text
color={theme.text.link}
aria-label={SCREEN_READER_USER_PREFIX}
>
(r:){' '}
</Text>
) : (
'!'
)
) : commandSearchActive ? (
<Text color={theme.text.accent}>(r:) </Text>
) : showYoloStyling ? (
'*'
) : (
'>'
)}{' '}
</Text>
<Box flexGrow={1} flexDirection="column">
{buffer.text.length === 0 && placeholder ? (
showCursor ? (
<Text>
{chalk.inverse(placeholder.slice(0, 1))}
<Text color={theme.text.secondary}>{placeholder.slice(1)}</Text>
</Text>
) : (
<Text color={theme.text.secondary}>{placeholder}</Text>
)
) : (
linesToRender.map((lineText, visualIdxInRenderedSet) => {
const absoluteVisualIdx =
scrollVisualRow + visualIdxInRenderedSet;
const mapEntry = buffer.visualToLogicalMap[absoluteVisualIdx];
const cursorVisualRow = cursorVisualRowAbsolute - scrollVisualRow;
const isOnCursorLine =
focus && visualIdxInRenderedSet === cursorVisualRow;
const renderedLine: React.ReactNode[] = [];
const [logicalLineIdx, logicalStartCol] = mapEntry;
const logicalLine = buffer.lines[logicalLineIdx] || '';
const tokens = parseInputForHighlighting(
logicalLine,
logicalLineIdx,
);
const visualStart = logicalStartCol;
const visualEnd = logicalStartCol + cpLen(lineText);
const segments = buildSegmentsForVisualSlice(
tokens,
visualStart,
visualEnd,
);
let charCount = 0;
segments.forEach((seg, segIdx) => {
const segLen = cpLen(seg.text);
let display = seg.text;
if (isOnCursorLine) {
const relativeVisualColForHighlight = cursorVisualColAbsolute;
const segStart = charCount;
const segEnd = segStart + segLen;
if (
relativeVisualColForHighlight >= segStart &&
relativeVisualColForHighlight < segEnd
) {
const charToHighlight = cpSlice(
seg.text,
relativeVisualColForHighlight - segStart,
relativeVisualColForHighlight - segStart + 1,
);
const highlighted = showCursor
? chalk.inverse(charToHighlight)
: charToHighlight;
display =
cpSlice(
seg.text,
0,
relativeVisualColForHighlight - segStart,
) +
highlighted +
cpSlice(
seg.text,
relativeVisualColForHighlight - segStart + 1,
);
}
charCount = segEnd;
}
const color =
seg.type === 'command' || seg.type === 'file'
? theme.text.accent
: theme.text.primary;
renderedLine.push(
<Text key={`token-${segIdx}`} color={color}>
{display}
</Text>,
);
});
if (
isOnCursorLine &&
cursorVisualColAbsolute === cpLen(lineText)
) {
// Add zero-width space after cursor to prevent Ink from trimming trailing whitespace
renderedLine.push(
<Text key={`cursor-end-${cursorVisualColAbsolute}`}>
{showCursor ? chalk.inverse(' ') + '\u200B' : ' \u200B'}
</Text>,
);
}
return (
<Box key={`line-${visualIdxInRenderedSet}`} height={1}>
<Text>{renderedLine}</Text>
</Box>
);
})
)}
</Box>
</Box>
isActive={!isEmbeddedShellFocused}
renderLine={renderLineWithHighlighting}
/>
{shouldShowSuggestions && (
<Box marginLeft={2} marginRight={2}>
<SuggestionsDisplay

2
packages/cli/src/ui/components/LoadingIndicator.tsx
View file

@ -60,7 +60,7 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
: null;
return (
<Box paddingLeft={0} flexDirection="column">
<Box paddingLeft={2} flexDirection="column">
{/* Main loading line */}
<Box
width="100%"

272
packages/cli/src/ui/components/agent-view/AgentChatView.tsx Normal file
View file

@ -0,0 +1,272 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview AgentChatView — displays a single in-process agent's conversation.
*
* Renders the agent's message history using HistoryItemDisplay — the same
* component used by the main agent view. AgentMessage[] is converted to
* HistoryItem[] by agentMessagesToHistoryItems() so all 27 HistoryItem types
* are available without duplicating rendering logic.
*
* Layout:
* - Static area: finalized messages (efficient Ink <Static>)
* - Live area: tool groups still executing / awaiting confirmation
* - Status line: spinner while the agent is running
*
* Model text output is shown only after each round completes (no live
* streaming), which avoids per-chunk re-renders and keeps the display simple.
*/
import { Box, Text, Static } from 'ink';
import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
import {
AgentStatus,
AgentEventType,
getGitBranch,
type AgentStatusChangeEvent,
} from '@qwen-code/qwen-code-core';
import {
useAgentViewState,
useAgentViewActions,
} from '../../contexts/AgentViewContext.js';
import { useUIState } from '../../contexts/UIStateContext.js';
import { useTerminalSize } from '../../hooks/useTerminalSize.js';
import { HistoryItemDisplay } from '../HistoryItemDisplay.js';
import { ToolCallStatus } from '../../types.js';
import { theme } from '../../semantic-colors.js';
import { GeminiRespondingSpinner } from '../GeminiRespondingSpinner.js';
import { useKeypress } from '../../hooks/useKeypress.js';
import { agentMessagesToHistoryItems } from './agentHistoryAdapter.js';
import { AgentHeader } from './AgentHeader.js';
// ─── Main Component ─────────────────────────────────────────
interface AgentChatViewProps {
agentId: string;
}
export const AgentChatView = ({ agentId }: AgentChatViewProps) => {
const { agents } = useAgentViewState();
const { setAgentShellFocused } = useAgentViewActions();
const uiState = useUIState();
const { historyRemountKey, availableTerminalHeight, constrainHeight } =
uiState;
const { columns: terminalWidth } = useTerminalSize();
const agent = agents.get(agentId);
const contentWidth = terminalWidth - 4;
// Force re-render on message updates and status changes.
// STREAM_TEXT is deliberately excluded — model text is shown only after
// each round completes (via committed messages), avoiding per-chunk re-renders.
const [, setRenderTick] = useState(0);
const tickRef = useRef(0);
const forceRender = useCallback(() => {
tickRef.current += 1;
setRenderTick(tickRef.current);
}, []);
useEffect(() => {
if (!agent) return;
const emitter = agent.interactiveAgent.getEventEmitter();
if (!emitter) return;
const onStatusChange = (_event: AgentStatusChangeEvent) => forceRender();
const onToolCall = () => forceRender();
const onToolResult = () => forceRender();
const onRoundEnd = () => forceRender();
const onApproval = () => forceRender();
const onOutputUpdate = () => forceRender();
emitter.on(AgentEventType.STATUS_CHANGE, onStatusChange);
emitter.on(AgentEventType.TOOL_CALL, onToolCall);
emitter.on(AgentEventType.TOOL_RESULT, onToolResult);
emitter.on(AgentEventType.ROUND_END, onRoundEnd);
emitter.on(AgentEventType.TOOL_WAITING_APPROVAL, onApproval);
emitter.on(AgentEventType.TOOL_OUTPUT_UPDATE, onOutputUpdate);
return () => {
emitter.off(AgentEventType.STATUS_CHANGE, onStatusChange);
emitter.off(AgentEventType.TOOL_CALL, onToolCall);
emitter.off(AgentEventType.TOOL_RESULT, onToolResult);
emitter.off(AgentEventType.ROUND_END, onRoundEnd);
emitter.off(AgentEventType.TOOL_WAITING_APPROVAL, onApproval);
emitter.off(AgentEventType.TOOL_OUTPUT_UPDATE, onOutputUpdate);
};
}, [agent, forceRender]);
const interactiveAgent = agent?.interactiveAgent;
const messages = interactiveAgent?.getMessages() ?? [];
const pendingApprovals = interactiveAgent?.getPendingApprovals();
const liveOutputs = interactiveAgent?.getLiveOutputs();
const shellPids = interactiveAgent?.getShellPids();
const status = interactiveAgent?.getStatus();
const isRunning =
status === AgentStatus.RUNNING || status === AgentStatus.INITIALIZING;
// Derive the active PTY PID: first shell PID among currently-executing tools.
// Resets naturally to undefined when the tool finishes (shellPids cleared).
const activePtyId =
shellPids && shellPids.size > 0
? shellPids.values().next().value
: undefined;
// Track whether the user has toggled input focus into the embedded shell.
// Mirrors the main agent's embeddedShellFocused in AppContainer.
const [embeddedShellFocused, setEmbeddedShellFocusedLocal] = useState(false);
// Sync to AgentViewContext so AgentTabBar can suppress arrow-key navigation
// when an agent's embedded shell is focused.
useEffect(() => {
setAgentShellFocused(embeddedShellFocused);
return () => setAgentShellFocused(false);
}, [embeddedShellFocused, setAgentShellFocused]);
// Reset focus when the shell exits (activePtyId disappears).
useEffect(() => {
if (!activePtyId) setEmbeddedShellFocusedLocal(false);
}, [activePtyId]);
// Ctrl+F: toggle shell input focus when a PTY is active.
useKeypress(
(key) => {
if (key.ctrl && key.name === 'f') {
if (activePtyId || embeddedShellFocused) {
setEmbeddedShellFocusedLocal((prev) => !prev);
}
}
},
{ isActive: true },
);
// Convert AgentMessage[] → HistoryItem[] via adapter.
// tickRef.current in deps ensures we rebuild when events fire even if
// messages.length and pendingApprovals.size haven't changed (e.g. a
// tool result updates an existing entry in place).
const allItems = useMemo(
() =>
agentMessagesToHistoryItems(
messages,
pendingApprovals ?? new Map(),
liveOutputs,
shellPids,
),
// eslint-disable-next-line react-hooks/exhaustive-deps
[
agentId,
messages.length,
pendingApprovals?.size,
liveOutputs?.size,
shellPids?.size,
tickRef.current,
],
);
// Split into committed (Static) and pending (live area).
// Any tool_group with an Executing or Confirming tool — plus everything
// after it — stays in the live area so confirmation dialogs remain
// interactive (Ink's <Static> cannot receive input).
const splitIndex = useMemo(() => {
for (let idx = allItems.length - 1; idx >= 0; idx--) {
const item = allItems[idx]!;
if (
item.type === 'tool_group' &&
item.tools.some(
(t) =>
t.status === ToolCallStatus.Executing ||
t.status === ToolCallStatus.Confirming,
)
) {
return idx;
}
}
return allItems.length; // all committed
}, [allItems]);
const committedItems = allItems.slice(0, splitIndex);
const pendingItems = allItems.slice(splitIndex);
const core = interactiveAgent?.getCore();
const agentWorkingDir = core?.runtimeContext.getTargetDir() ?? '';
// Cache the branch — it won't change during the agent's lifetime and
// getGitBranch uses synchronous execSync which blocks the render loop.
const agentGitBranch = useMemo(
() => (agentWorkingDir ? getGitBranch(agentWorkingDir) : ''),
// eslint-disable-next-line react-hooks/exhaustive-deps
[agentId],
);
if (!agent || !interactiveAgent || !core) {
return (
<Box marginX={2}>
<Text color={theme.status.error}>
Agent &quot;{agentId}&quot; not found.
</Text>
</Box>
);
}
const agentModelId = core.modelConfig.model ?? '';
return (
<Box flexDirection="column">
{/* Committed message history.
key includes historyRemountKey: when refreshStatic() clears the
terminal it bumps the key, forcing Static to remount and re-emit
all items on the cleared screen. */}
<Static
key={`agent-${agentId}-${historyRemountKey}`}
items={[
<AgentHeader
key="agent-header"
modelId={agentModelId}
modelName={agent.modelName}
workingDirectory={agentWorkingDir}
gitBranch={agentGitBranch}
/>,
...committedItems.map((item) => (
<HistoryItemDisplay
key={item.id}
item={item}
isPending={false}
terminalWidth={terminalWidth}
mainAreaWidth={contentWidth}
/>
)),
]}
>
{(item) => item}
</Static>
{/* Live area — tool groups awaiting confirmation or still executing.
Must remain outside Static so confirmation dialogs are interactive.
Pass PTY state so ShellInputPrompt is reachable via Ctrl+F. */}
{pendingItems.map((item) => (
<HistoryItemDisplay
key={item.id}
item={item}
isPending={true}
terminalWidth={terminalWidth}
mainAreaWidth={contentWidth}
availableTerminalHeight={
constrainHeight ? availableTerminalHeight : undefined
}
isFocused={true}
activeShellPtyId={activePtyId ?? null}
embeddedShellFocused={embeddedShellFocused}
/>
))}
{/* Spinner */}
{isRunning && (
<Box marginX={2} marginTop={1}>
<GeminiRespondingSpinner />
</Box>
)}
</Box>
);
};

308
packages/cli/src/ui/components/agent-view/AgentComposer.tsx Normal file
View file

@ -0,0 +1,308 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview AgentComposer — footer area for in-process agent tabs.
*
* Replaces the main Composer when an agent tab is active so that:
* - The loading indicator reflects the agent's status (not the main agent)
* - The input prompt sends messages to the agent (via enqueueMessage)
* - Keyboard events are scoped — no conflict with the main InputPrompt
*
* Wraps its content in a local StreamingContext.Provider so reusable
* components like LoadingIndicator and GeminiRespondingSpinner read the
* agent's derived streaming state instead of the main agent's.
*/
import { Box, Text, useStdin } from 'ink';
import { useCallback, useEffect, useMemo, useState } from 'react';
import {
AgentStatus,
isTerminalStatus,
ApprovalMode,
APPROVAL_MODES,
} from '@qwen-code/qwen-code-core';
import {
useAgentViewState,
useAgentViewActions,
} from '../../contexts/AgentViewContext.js';
import { useConfig } from '../../contexts/ConfigContext.js';
import { StreamingContext } from '../../contexts/StreamingContext.js';
import { StreamingState } from '../../types.js';
import { useTerminalSize } from '../../hooks/useTerminalSize.js';
import { useAgentStreamingState } from '../../hooks/useAgentStreamingState.js';
import { useKeypress, type Key } from '../../hooks/useKeypress.js';
import { useTextBuffer } from '../shared/text-buffer.js';
import { calculatePromptWidths } from '../../utils/layoutUtils.js';
import { BaseTextInput } from '../BaseTextInput.js';
import { LoadingIndicator } from '../LoadingIndicator.js';
import { QueuedMessageDisplay } from '../QueuedMessageDisplay.js';
import { AgentFooter } from './AgentFooter.js';
import { keyMatchers, Command } from '../../keyMatchers.js';
import { theme } from '../../semantic-colors.js';
import { t } from '../../../i18n/index.js';
// ─── Types ──────────────────────────────────────────────────
interface AgentComposerProps {
agentId: string;
}
// ─── Component ──────────────────────────────────────────────
export const AgentComposer: React.FC<AgentComposerProps> = ({ agentId }) => {
const { agents, agentTabBarFocused, agentShellFocused, agentApprovalModes } =
useAgentViewState();
const {
setAgentInputBufferText,
setAgentTabBarFocused,
setAgentApprovalMode,
} = useAgentViewActions();
const agent = agents.get(agentId);
const interactiveAgent = agent?.interactiveAgent;
const config = useConfig();
const { columns: terminalWidth } = useTerminalSize();
const { inputWidth } = calculatePromptWidths(terminalWidth);
const { stdin, setRawMode } = useStdin();
const {
status,
streamingState,
isInputActive,
elapsedTime,
lastPromptTokenCount,
} = useAgentStreamingState(interactiveAgent);
// ── Escape to cancel the active agent round ──
useKeypress(
(key) => {
if (
key.name === 'escape' &&
streamingState === StreamingState.Responding
) {
interactiveAgent?.cancelCurrentRound();
}
},
{
isActive:
streamingState === StreamingState.Responding && !agentShellFocused,
},
);
// ── Shift+Tab to cycle this agent's approval mode ──
const agentApprovalMode =
agentApprovalModes.get(agentId) ?? ApprovalMode.DEFAULT;
useKeypress(
(key) => {
const isShiftTab = key.shift && key.name === 'tab';
const isWindowsTab =
process.platform === 'win32' &&
key.name === 'tab' &&
!key.ctrl &&
!key.meta;
if (isShiftTab || isWindowsTab) {
const currentIndex = APPROVAL_MODES.indexOf(agentApprovalMode);
const nextIndex =
currentIndex === -1 ? 0 : (currentIndex + 1) % APPROVAL_MODES.length;
setAgentApprovalMode(agentId, APPROVAL_MODES[nextIndex]!);
}
},
{ isActive: !agentShellFocused },
);
// ── Input buffer (independent from main agent) ──
const isValidPath = useCallback((): boolean => false, []);
const buffer = useTextBuffer({
initialText: '',
viewport: { height: 3, width: inputWidth },
stdin,
setRawMode,
isValidPath,
});
// Sync agent buffer text to context so AgentTabBar can guard tab switching
useEffect(() => {
setAgentInputBufferText(buffer.text);
return () => setAgentInputBufferText('');
}, [buffer.text, setAgentInputBufferText]);
// When agent input is not active (agent running, completed, etc.),
// auto-focus the tab bar so arrow keys switch tabs directly.
// We also depend on streamingState so that transitions like
// WaitingForConfirmation → Responding re-trigger the effect — the
// approval keypress releases tab-bar focus (printable char handler),
// but isInputActive stays false throughout, so without this extra
// dependency the focus would never be restored.
useEffect(() => {
if (!isInputActive) {
setAgentTabBarFocused(true);
}
}, [isInputActive, streamingState, setAgentTabBarFocused]);
// ── Focus management between input and tab bar ──
const handleKeypress = useCallback(
(key: Key): boolean => {
// When tab bar has focus, block all non-printable keys so they don't
// act on the hidden buffer. Printable characters fall through to
// BaseTextInput naturally; the tab bar handler releases focus on the
// same event so the keystroke appears in the input immediately.
if (agentTabBarFocused) {
if (
key.sequence &&
key.sequence.length === 1 &&
!key.ctrl &&
!key.meta
) {
return false; // let BaseTextInput type the character
}
return true; // consume non-printable keys
}
// Down arrow at the bottom edge (or empty buffer) → focus the tab bar
if (keyMatchers[Command.NAVIGATION_DOWN](key)) {
if (
buffer.text === '' ||
buffer.allVisualLines.length === 1 ||
buffer.visualCursor[0] === buffer.allVisualLines.length - 1
) {
setAgentTabBarFocused(true);
return true;
}
}
return false;
},
[buffer, agentTabBarFocused, setAgentTabBarFocused],
);
// ── Message queue (accumulate while streaming, flush as one prompt on idle) ──
const [messageQueue, setMessageQueue] = useState<string[]>([]);
// When agent becomes idle (and not terminal), flush queued messages.
useEffect(() => {
if (
streamingState === StreamingState.Idle &&
messageQueue.length > 0 &&
status !== undefined &&
!isTerminalStatus(status)
) {
const combined = messageQueue.join('\n');
setMessageQueue([]);
interactiveAgent?.enqueueMessage(combined);
}
}, [streamingState, messageQueue, interactiveAgent, status]);
const handleSubmit = useCallback(
(text: string) => {
const trimmed = text.trim();
if (!trimmed || !interactiveAgent) return;
if (streamingState === StreamingState.Idle) {
interactiveAgent.enqueueMessage(trimmed);
} else {
setMessageQueue((prev) => [...prev, trimmed]);
}
},
[interactiveAgent, streamingState],
);
// ── Render ──
const statusLabel = useMemo(() => {
switch (status) {
case AgentStatus.COMPLETED:
return { text: t('Completed'), color: theme.status.success };
case AgentStatus.FAILED:
return {
text: t('Failed: {{error}}', {
error:
interactiveAgent?.getError() ??
interactiveAgent?.getLastRoundError() ??
'unknown',
}),
color: theme.status.error,
};
case AgentStatus.CANCELLED:
return { text: t('Cancelled'), color: theme.text.secondary };
default:
return null;
}
}, [status, interactiveAgent]);
// ── Approval-mode styling (mirrors main InputPrompt) ──
const isYolo = agentApprovalMode === ApprovalMode.YOLO;
const isAutoAccept = agentApprovalMode !== ApprovalMode.DEFAULT;
const statusColor = isYolo
? theme.status.errorDim
: isAutoAccept
? theme.status.warningDim
: undefined;
const inputBorderColor =
!isInputActive || agentTabBarFocused
? theme.border.default
: (statusColor ?? theme.border.focused);
const prefixNode = (
<Text color={statusColor ?? theme.text.accent}>{isYolo ? '*' : '>'} </Text>
);
return (
<StreamingContext.Provider value={streamingState}>
<Box flexDirection="column" marginTop={1}>
{/* Loading indicator — mirrors main Composer but reads agent's
streaming state via the overridden StreamingContext. */}
<LoadingIndicator
currentLoadingPhrase={
streamingState === StreamingState.Responding
? t('Thinking…')
: undefined
}
elapsedTime={elapsedTime}
/>
{/* Terminal status for completed/failed agents */}
{statusLabel && (
<Box marginLeft={2}>
<Text color={statusLabel.color}>{statusLabel.text}</Text>
</Box>
)}
<QueuedMessageDisplay messageQueue={messageQueue} />
{/* Input prompt — always visible, like the main Composer */}
<BaseTextInput
buffer={buffer}
onSubmit={handleSubmit}
onKeypress={handleKeypress}
showCursor={isInputActive && !agentTabBarFocused}
placeholder={' ' + t('Send a message to this agent')}
prefix={prefixNode}
borderColor={inputBorderColor}
isActive={isInputActive && !agentShellFocused}
/>
{/* Footer: approval mode + context usage */}
<AgentFooter
approvalMode={agentApprovalMode}
promptTokenCount={lastPromptTokenCount}
contextWindowSize={
config.getContentGeneratorConfig()?.contextWindowSize
}
terminalWidth={terminalWidth}
/>
</Box>
</StreamingContext.Provider>
);
};

66
packages/cli/src/ui/components/agent-view/AgentFooter.tsx Normal file
View file

@ -0,0 +1,66 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview Lightweight footer for agent tabs showing approval mode
* and context usage. Mirrors the main Footer layout but without
* main-agent-specific concerns (vim mode, shell mode, exit prompts, etc.).
*/
import type React from 'react';
import { Box, Text } from 'ink';
import { ApprovalMode } from '@qwen-code/qwen-code-core';
import { AutoAcceptIndicator } from '../AutoAcceptIndicator.js';
import { ContextUsageDisplay } from '../ContextUsageDisplay.js';
import { theme } from '../../semantic-colors.js';
interface AgentFooterProps {
approvalMode: ApprovalMode | undefined;
promptTokenCount: number;
contextWindowSize: number | undefined;
terminalWidth: number;
}
export const AgentFooter: React.FC<AgentFooterProps> = ({
approvalMode,
promptTokenCount,
contextWindowSize,
terminalWidth,
}) => {
const showApproval =
approvalMode !== undefined && approvalMode !== ApprovalMode.DEFAULT;
const showContext = promptTokenCount > 0 && contextWindowSize !== undefined;
if (!showApproval && !showContext) {
return null;
}
return (
<Box
justifyContent="space-between"
width="100%"
flexDirection="row"
alignItems="center"
>
<Box marginLeft={2}>
{showApproval ? (
<AutoAcceptIndicator approvalMode={approvalMode} />
) : null}
</Box>
<Box marginRight={2}>
{showContext && (
<Text color={theme.text.accent}>
<ContextUsageDisplay
promptTokenCount={promptTokenCount}
terminalWidth={terminalWidth}
contextWindowSize={contextWindowSize!}
/>
</Text>
)}
</Box>
</Box>
);
};

64
packages/cli/src/ui/components/agent-view/AgentHeader.tsx Normal file
View file

@ -0,0 +1,64 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview Compact header for agent tabs, visually distinct from the
* main view's boxed logo header. Shows model, working directory, and git
* branch in a bordered info panel.
*/
import type React from 'react';
import { Box, Text } from 'ink';
import { shortenPath, tildeifyPath } from '@qwen-code/qwen-code-core';
import { theme } from '../../semantic-colors.js';
import { useTerminalSize } from '../../hooks/useTerminalSize.js';
interface AgentHeaderProps {
modelId: string;
modelName?: string;
workingDirectory: string;
gitBranch?: string;
}
export const AgentHeader: React.FC<AgentHeaderProps> = ({
modelId,
modelName,
workingDirectory,
gitBranch,
}) => {
const { columns: terminalWidth } = useTerminalSize();
const maxPathLen = Math.max(20, terminalWidth - 12);
const displayPath = shortenPath(tildeifyPath(workingDirectory), maxPathLen);
const modelText =
modelName && modelName !== modelId ? `${modelId} (${modelName})` : modelId;
return (
<Box
flexDirection="column"
marginX={2}
marginTop={1}
borderStyle="round"
borderColor={theme.border.default}
paddingX={1}
>
<Text>
<Text color={theme.text.secondary}>{'Model: '}</Text>
<Text color={theme.text.primary}>{modelText}</Text>
</Text>
<Text>
<Text color={theme.text.secondary}>{'Path: '}</Text>
<Text color={theme.text.primary}>{displayPath}</Text>
</Text>
{gitBranch && (
<Text>
<Text color={theme.text.secondary}>{'Branch: '}</Text>
<Text color={theme.text.primary}>{gitBranch}</Text>
</Text>
)}
</Box>
);
};

167
packages/cli/src/ui/components/agent-view/AgentTabBar.tsx Normal file
View file

@ -0,0 +1,167 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview AgentTabBar — horizontal tab strip for in-process agent views.
*
* Rendered at the top of the terminal whenever in-process agents are registered.
*
* On the main tab, Left/Right switch tabs when the input buffer is empty.
* On agent tabs, the tab bar uses an exclusive-focus model:
* - Down arrow at the input's bottom edge focuses the tab bar
* - Left/Right switch tabs only when the tab bar is focused
* - Up arrow or typing returns focus to the input
*
* Tab indicators: running, idle/completed, failed, cancelled
*/
import { Box, Text } from 'ink';
import { useState, useEffect, useCallback } from 'react';
import { AgentStatus, AgentEventType } from '@qwen-code/qwen-code-core';
import {
useAgentViewState,
useAgentViewActions,
type RegisteredAgent,
} from '../../contexts/AgentViewContext.js';
import { useKeypress } from '../../hooks/useKeypress.js';
import { useUIState } from '../../contexts/UIStateContext.js';
import { theme } from '../../semantic-colors.js';
// ─── Status Indicators ──────────────────────────────────────
function statusIndicator(agent: RegisteredAgent): {
symbol: string;
color: string;
} {
const status = agent.interactiveAgent.getStatus();
switch (status) {
case AgentStatus.RUNNING:
case AgentStatus.INITIALIZING:
return { symbol: '\u25CF', color: theme.status.warning }; // ● running
case AgentStatus.IDLE:
return { symbol: '\u25CF', color: theme.status.success }; // ● idle (ready)
case AgentStatus.COMPLETED:
return { symbol: '\u2713', color: theme.status.success }; // ✓ completed
case AgentStatus.FAILED:
return { symbol: '\u2717', color: theme.status.error }; // ✗ failed
case AgentStatus.CANCELLED:
return { symbol: '\u25CB', color: theme.text.secondary }; // ○ cancelled
default:
return { symbol: '\u25CB', color: theme.text.secondary }; // ○ fallback
}
}
// ─── Component ──────────────────────────────────────────────
export const AgentTabBar: React.FC = () => {
const { activeView, agents, agentShellFocused, agentTabBarFocused } =
useAgentViewState();
const { switchToNext, switchToPrevious, setAgentTabBarFocused } =
useAgentViewActions();
const { embeddedShellFocused } = useUIState();
useKeypress(
(key) => {
if (embeddedShellFocused || agentShellFocused) return;
if (!agentTabBarFocused) return;
if (key.name === 'left') {
switchToPrevious();
} else if (key.name === 'right') {
switchToNext();
} else if (key.name === 'up') {
setAgentTabBarFocused(false);
} else if (
key.sequence &&
key.sequence.length === 1 &&
!key.ctrl &&
!key.meta
) {
// Printable character → return focus to input (key falls through
// to BaseTextInput's useKeypress and gets typed normally)
setAgentTabBarFocused(false);
}
},
{ isActive: true },
);
// Subscribe to STATUS_CHANGE events from all agents so the tab bar
// re-renders when an agent's status transitions (e.g. RUNNING → COMPLETED).
// Without this, status indicators would be stale until the next unrelated render.
const [, setTick] = useState(0);
const forceRender = useCallback(() => setTick((t) => t + 1), []);
useEffect(() => {
const cleanups: Array<() => void> = [];
for (const [, agent] of agents) {
const emitter = agent.interactiveAgent.getEventEmitter();
if (emitter) {
emitter.on(AgentEventType.STATUS_CHANGE, forceRender);
cleanups.push(() =>
emitter.off(AgentEventType.STATUS_CHANGE, forceRender),
);
}
}
return () => cleanups.forEach((fn) => fn());
}, [agents, forceRender]);
const isFocused = agentTabBarFocused;
// Navigation hint varies by context
const hint = isFocused ? '\u2190/\u2192 switch \u2191 input' : '\u2193 tabs';
return (
<Box flexDirection="row" paddingX={1}>
{/* Main tab */}
<Box marginRight={1}>
<Text
bold={activeView === 'main'}
dimColor={!isFocused}
backgroundColor={
activeView === 'main' ? theme.border.default : undefined
}
color={
activeView === 'main' ? theme.text.primary : theme.text.secondary
}
>
{' Main '}
</Text>
</Box>
{/* Separator */}
<Text dimColor={!isFocused} color={theme.border.default}>
{'\u2502'}
</Text>
{/* Agent tabs */}
{[...agents.entries()].map(([agentId, agent]) => {
const isActive = activeView === agentId;
const { symbol, color: indicatorColor } = statusIndicator(agent);
return (
<Box key={agentId} marginLeft={1}>
<Text
bold={isActive}
dimColor={!isFocused}
backgroundColor={isActive ? theme.border.default : undefined}
color={isActive ? undefined : agent.color || theme.text.secondary}
>
{` ${agent.modelId} `}
</Text>
<Text dimColor={!isFocused} color={indicatorColor}>
{` ${symbol}`}
</Text>
</Box>
);
})}
{/* Navigation hint */}
<Box marginLeft={2}>
<Text color={theme.text.secondary}>{hint}</Text>
</Box>
</Box>
);
};

510
packages/cli/src/ui/components/agent-view/agentHistoryAdapter.test.ts Normal file
View file

@ -0,0 +1,510 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
import { describe, it, expect } from 'vitest';
import { agentMessagesToHistoryItems } from './agentHistoryAdapter.js';
import type {
AgentMessage,
ToolCallConfirmationDetails,
} from '@qwen-code/qwen-code-core';
import { ToolCallStatus } from '../../types.js';
// ─── Helpers ────────────────────────────────────────────────
function msg(
role: AgentMessage['role'],
content: string,
extra?: Partial<AgentMessage>,
): AgentMessage {
return { role, content, timestamp: 0, ...extra };
}
const noApprovals = new Map<string, ToolCallConfirmationDetails>();
function toolCallMsg(
callId: string,
toolName: string,
opts?: { description?: string; renderOutputAsMarkdown?: boolean },
): AgentMessage {
return msg('tool_call', `Tool call: ${toolName}`, {
metadata: {
callId,
toolName,
description: opts?.description ?? '',
renderOutputAsMarkdown: opts?.renderOutputAsMarkdown,
},
});
}
function toolResultMsg(
callId: string,
toolName: string,
opts?: {
success?: boolean;
resultDisplay?: string;
outputFile?: string;
},
): AgentMessage {
return msg('tool_result', `Tool ${toolName}`, {
metadata: {
callId,
toolName,
success: opts?.success ?? true,
resultDisplay: opts?.resultDisplay,
outputFile: opts?.outputFile,
},
});
}
// ─── Role mapping ────────────────────────────────────────────
describe('agentMessagesToHistoryItems — role mapping', () => {
it('maps user message', () => {
const items = agentMessagesToHistoryItems(
[msg('user', 'hello')],
noApprovals,
);
expect(items).toHaveLength(1);
expect(items[0]).toMatchObject({ type: 'user', text: 'hello' });
});
it('maps plain assistant message', () => {
const items = agentMessagesToHistoryItems(
[msg('assistant', 'response')],
noApprovals,
);
expect(items[0]).toMatchObject({ type: 'gemini', text: 'response' });
});
it('maps thought assistant message', () => {
const items = agentMessagesToHistoryItems(
[msg('assistant', 'thinking...', { thought: true })],
noApprovals,
);
expect(items[0]).toMatchObject({
type: 'gemini_thought',
text: 'thinking...',
});
});
it('maps assistant message with error metadata', () => {
const items = agentMessagesToHistoryItems(
[msg('assistant', 'oops', { metadata: { error: true } })],
noApprovals,
);
expect(items[0]).toMatchObject({ type: 'error', text: 'oops' });
});
it('maps info message with no level → type info', () => {
const items = agentMessagesToHistoryItems(
[msg('info', 'note')],
noApprovals,
);
expect(items[0]).toMatchObject({ type: 'info', text: 'note' });
});
it.each([
['warning', 'warning'],
['success', 'success'],
['error', 'error'],
] as const)('maps info message with level=%s', (level, expectedType) => {
const items = agentMessagesToHistoryItems(
[msg('info', 'text', { metadata: { level } })],
noApprovals,
);
expect(items[0]).toMatchObject({ type: expectedType });
});
it('maps unknown info level → type info', () => {
const items = agentMessagesToHistoryItems(
[msg('info', 'x', { metadata: { level: 'verbose' } })],
noApprovals,
);
expect(items[0]).toMatchObject({ type: 'info' });
});
it('skips unknown roles without crashing', () => {
const items = agentMessagesToHistoryItems(
[
msg('user', 'before'),
// force an unknown role
{ role: 'unknown' as AgentMessage['role'], content: 'x', timestamp: 0 },
msg('user', 'after'),
],
noApprovals,
);
expect(items).toHaveLength(2);
expect(items[0]).toMatchObject({ type: 'user', text: 'before' });
expect(items[1]).toMatchObject({ type: 'user', text: 'after' });
});
});
// ─── Tool grouping ───────────────────────────────────────────
describe('agentMessagesToHistoryItems — tool grouping', () => {
it('merges a tool_call + tool_result pair into one tool_group', () => {
const items = agentMessagesToHistoryItems(
[toolCallMsg('c1', 'read_file'), toolResultMsg('c1', 'read_file')],
noApprovals,
);
expect(items).toHaveLength(1);
expect(items[0]!.type).toBe('tool_group');
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools).toHaveLength(1);
expect(group.tools[0]!.name).toBe('read_file');
});
it('merges multiple parallel tool calls into one tool_group', () => {
const items = agentMessagesToHistoryItems(
[
toolCallMsg('c1', 'read_file'),
toolCallMsg('c2', 'write_file'),
toolResultMsg('c1', 'read_file'),
toolResultMsg('c2', 'write_file'),
],
noApprovals,
);
expect(items).toHaveLength(1);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools).toHaveLength(2);
expect(group.tools[0]!.name).toBe('read_file');
expect(group.tools[1]!.name).toBe('write_file');
});
it('preserves tool call order by first appearance', () => {
const items = agentMessagesToHistoryItems(
[
toolCallMsg('c2', 'second'),
toolCallMsg('c1', 'first'),
toolResultMsg('c1', 'first'),
toolResultMsg('c2', 'second'),
],
noApprovals,
);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.name).toBe('second');
expect(group.tools[1]!.name).toBe('first');
});
it('breaks tool groups at non-tool messages', () => {
const items = agentMessagesToHistoryItems(
[
toolCallMsg('c1', 'tool_a'),
toolResultMsg('c1', 'tool_a'),
msg('assistant', 'between'),
toolCallMsg('c2', 'tool_b'),
toolResultMsg('c2', 'tool_b'),
],
noApprovals,
);
expect(items).toHaveLength(3);
expect(items[0]!.type).toBe('tool_group');
expect(items[1]!.type).toBe('gemini');
expect(items[2]!.type).toBe('tool_group');
});
it('handles tool_result arriving without a prior tool_call gracefully', () => {
const items = agentMessagesToHistoryItems(
[
toolResultMsg('c1', 'orphan', {
success: true,
resultDisplay: 'output',
}),
],
noApprovals,
);
expect(items).toHaveLength(1);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.callId).toBe('c1');
expect(group.tools[0]!.status).toBe(ToolCallStatus.Success);
});
});
// ─── Tool status ─────────────────────────────────────────────
describe('agentMessagesToHistoryItems — tool status', () => {
it('Executing: tool_call with no result yet', () => {
const items = agentMessagesToHistoryItems(
[toolCallMsg('c1', 'shell')],
noApprovals,
);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.status).toBe(ToolCallStatus.Executing);
});
it('Success: tool_result with success=true', () => {
const items = agentMessagesToHistoryItems(
[
toolCallMsg('c1', 'read'),
toolResultMsg('c1', 'read', { success: true }),
],
noApprovals,
);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.status).toBe(ToolCallStatus.Success);
});
it('Error: tool_result with success=false', () => {
const items = agentMessagesToHistoryItems(
[
toolCallMsg('c1', 'write'),
toolResultMsg('c1', 'write', { success: false }),
],
noApprovals,
);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.status).toBe(ToolCallStatus.Error);
});
it('Confirming: tool_call present in pendingApprovals', () => {
const fakeApproval = {} as ToolCallConfirmationDetails;
const approvals = new Map([['c1', fakeApproval]]);
const items = agentMessagesToHistoryItems(
[toolCallMsg('c1', 'shell')],
approvals,
);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.status).toBe(ToolCallStatus.Confirming);
expect(group.tools[0]!.confirmationDetails).toBe(fakeApproval);
});
it('Confirming takes priority over Executing', () => {
// pending approval AND no result yet → Confirming, not Executing
const approvals = new Map([['c1', {} as ToolCallConfirmationDetails]]);
const items = agentMessagesToHistoryItems(
[toolCallMsg('c1', 'shell')],
approvals,
);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.status).toBe(ToolCallStatus.Confirming);
});
});
// ─── Tool metadata ───────────────────────────────────────────
describe('agentMessagesToHistoryItems — tool metadata', () => {
it('forwards resultDisplay from tool_result', () => {
const items = agentMessagesToHistoryItems(
[
toolCallMsg('c1', 'read'),
toolResultMsg('c1', 'read', {
success: true,
resultDisplay: 'file contents',
}),
],
noApprovals,
);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.resultDisplay).toBe('file contents');
});
it('forwards renderOutputAsMarkdown from tool_call', () => {
const items = agentMessagesToHistoryItems(
[
toolCallMsg('c1', 'web_fetch', { renderOutputAsMarkdown: true }),
toolResultMsg('c1', 'web_fetch', { success: true }),
],
noApprovals,
);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.renderOutputAsMarkdown).toBe(true);
});
it('forwards description from tool_call', () => {
const items = agentMessagesToHistoryItems(
[toolCallMsg('c1', 'read', { description: 'reading src/index.ts' })],
noApprovals,
);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.description).toBe('reading src/index.ts');
});
});
// ─── liveOutputs overlay ─────────────────────────────────────
describe('agentMessagesToHistoryItems — liveOutputs', () => {
it('uses liveOutput as resultDisplay for Executing tools', () => {
const liveOutputs = new Map([['c1', 'live stdout so far']]);
const items = agentMessagesToHistoryItems(
[toolCallMsg('c1', 'shell')],
noApprovals,
liveOutputs,
);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.resultDisplay).toBe('live stdout so far');
});
it('ignores liveOutput for completed tools', () => {
const liveOutputs = new Map([['c1', 'stale live output']]);
const items = agentMessagesToHistoryItems(
[
toolCallMsg('c1', 'shell'),
toolResultMsg('c1', 'shell', {
success: true,
resultDisplay: 'final output',
}),
],
noApprovals,
liveOutputs,
);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.resultDisplay).toBe('final output');
});
it('falls back to entry resultDisplay when no liveOutput for callId', () => {
const liveOutputs = new Map([['other-id', 'unrelated']]);
const items = agentMessagesToHistoryItems(
[toolCallMsg('c1', 'shell')],
noApprovals,
liveOutputs,
);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.resultDisplay).toBeUndefined();
});
});
// ─── shellPids overlay ───────────────────────────────────────
describe('agentMessagesToHistoryItems — shellPids', () => {
it('sets ptyId for Executing tools with a known PID', () => {
const shellPids = new Map([['c1', 12345]]);
const items = agentMessagesToHistoryItems(
[toolCallMsg('c1', 'shell')],
noApprovals,
undefined,
shellPids,
);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.ptyId).toBe(12345);
});
it('does not set ptyId for completed tools', () => {
const shellPids = new Map([['c1', 12345]]);
const items = agentMessagesToHistoryItems(
[
toolCallMsg('c1', 'shell'),
toolResultMsg('c1', 'shell', { success: true }),
],
noApprovals,
undefined,
shellPids,
);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.ptyId).toBeUndefined();
});
it('does not set ptyId when shellPids is not provided', () => {
const items = agentMessagesToHistoryItems(
[toolCallMsg('c1', 'shell')],
noApprovals,
);
const group = items[0] as Extract<
(typeof items)[0],
{ type: 'tool_group' }
>;
expect(group.tools[0]!.ptyId).toBeUndefined();
});
});
// ─── ID stability ────────────────────────────────────────────
describe('agentMessagesToHistoryItems — ID stability', () => {
it('assigns monotonically increasing IDs', () => {
const items = agentMessagesToHistoryItems(
[
msg('user', 'u1'),
msg('assistant', 'a1'),
msg('info', 'i1'),
toolCallMsg('c1', 'tool'),
toolResultMsg('c1', 'tool'),
],
noApprovals,
);
const ids = items.map((i) => i.id);
expect(ids).toEqual([0, 1, 2, 3]);
});
it('tool_group consumes one ID regardless of how many calls it contains', () => {
const items = agentMessagesToHistoryItems(
[
msg('user', 'go'),
toolCallMsg('c1', 'tool_a'),
toolCallMsg('c2', 'tool_b'),
toolResultMsg('c1', 'tool_a'),
toolResultMsg('c2', 'tool_b'),
msg('assistant', 'done'),
],
noApprovals,
);
// user=0, tool_group=1, assistant=2
expect(items.map((i) => i.id)).toEqual([0, 1, 2]);
});
it('IDs from a prefix of messages are stable when more messages are appended', () => {
const base: AgentMessage[] = [msg('user', 'u'), msg('assistant', 'a')];
const before = agentMessagesToHistoryItems(base, noApprovals);
const after = agentMessagesToHistoryItems(
[...base, msg('info', 'i')],
noApprovals,
);
expect(after[0]!.id).toBe(before[0]!.id);
expect(after[1]!.id).toBe(before[1]!.id);
expect(after[2]!.id).toBe(2);
});
});

194
packages/cli/src/ui/components/agent-view/agentHistoryAdapter.ts Normal file
View file

@ -0,0 +1,194 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview agentHistoryAdapter — converts AgentMessage[] to HistoryItem[].
*
* This adapter bridges the sub-agent data model (AgentMessage[] from
* AgentInteractive) to the shared rendering model (HistoryItem[] consumed by
* HistoryItemDisplay). It lives in the CLI package so that packages/core types
* are never coupled to CLI rendering types.
*
* ID stability: AgentMessage[] is append-only, so the resulting HistoryItem[]
* only ever grows. Index-based IDs are therefore stable — Ink's <Static>
* requires items never shift or be removed, which this guarantees.
*/
import type {
AgentMessage,
ToolCallConfirmationDetails,
ToolResultDisplay,
} from '@qwen-code/qwen-code-core';
import type { HistoryItem, IndividualToolCallDisplay } from '../../types.js';
import { ToolCallStatus } from '../../types.js';
/**
* Convert AgentMessage[] + pendingApprovals into HistoryItem[].
*
* Consecutive tool_call / tool_result messages are merged into a single
* tool_group HistoryItem. pendingApprovals overlays confirmation state so
* ToolGroupMessage can render confirmation dialogs.
*
* liveOutputs (optional) provides real-time display data for executing tools.
* shellPids (optional) provides PTY PIDs for interactive shell tools so
* HistoryItemDisplay can render ShellInputPrompt on the active shell.
*/
export function agentMessagesToHistoryItems(
messages: readonly AgentMessage[],
pendingApprovals: ReadonlyMap<string, ToolCallConfirmationDetails>,
liveOutputs?: ReadonlyMap<string, ToolResultDisplay>,
shellPids?: ReadonlyMap<string, number>,
): HistoryItem[] {
const items: HistoryItem[] = [];
let nextId = 0;
let i = 0;
while (i < messages.length) {
const msg = messages[i]!;
// ── user ──────────────────────────────────────────────────
if (msg.role === 'user') {
items.push({ type: 'user', text: msg.content, id: nextId++ });
i++;
// ── assistant ─────────────────────────────────────────────
} else if (msg.role === 'assistant') {
if (msg.metadata?.['error']) {
items.push({ type: 'error', text: msg.content, id: nextId++ });
} else if (msg.thought) {
items.push({ type: 'gemini_thought', text: msg.content, id: nextId++ });
} else {
items.push({ type: 'gemini', text: msg.content, id: nextId++ });
}
i++;
// ── info / warning / success / error ──────────────────────
} else if (msg.role === 'info') {
const level = msg.metadata?.['level'] as string | undefined;
const type =
level === 'warning' || level === 'success' || level === 'error'
? level
: 'info';
items.push({ type, text: msg.content, id: nextId++ });
i++;
// ── tool_call / tool_result → tool_group ──────────────────
} else if (msg.role === 'tool_call' || msg.role === 'tool_result') {
const groupId = nextId++;
const callMap = new Map<
string,
{
callId: string;
name: string;
description: string;
resultDisplay: ToolResultDisplay | string | undefined;
outputFile: string | undefined;
renderOutputAsMarkdown: boolean | undefined;
success: boolean | undefined;
}
>();
const callOrder: string[] = [];
while (
i < messages.length &&
(messages[i]!.role === 'tool_call' ||
messages[i]!.role === 'tool_result')
) {
const m = messages[i]!;
const callId = (m.metadata?.['callId'] as string) ?? `unknown-${i}`;
if (m.role === 'tool_call') {
if (!callMap.has(callId)) callOrder.push(callId);
callMap.set(callId, {
callId,
name: (m.metadata?.['toolName'] as string) ?? 'unknown',
description: (m.metadata?.['description'] as string) ?? '',
resultDisplay: undefined,
outputFile: undefined,
renderOutputAsMarkdown: m.metadata?.['renderOutputAsMarkdown'] as
| boolean
| undefined,
success: undefined,
});
} else {
// tool_result — attach to existing call entry
const entry = callMap.get(callId);
const resultDisplay = m.metadata?.['resultDisplay'] as
| ToolResultDisplay
| string
| undefined;
const outputFile = m.metadata?.['outputFile'] as string | undefined;
const success = m.metadata?.['success'] as boolean;
if (entry) {
entry.success = success;
entry.resultDisplay = resultDisplay;
entry.outputFile = outputFile;
} else {
// Result arrived without a prior tool_call message (shouldn't
// normally happen, but handle gracefully)
callOrder.push(callId);
callMap.set(callId, {
callId,
name: (m.metadata?.['toolName'] as string) ?? 'unknown',
description: '',
resultDisplay,
outputFile,
renderOutputAsMarkdown: undefined,
success,
});
}
}
i++;
}
const tools: IndividualToolCallDisplay[] = callOrder.map((callId) => {
const entry = callMap.get(callId)!;
const approval = pendingApprovals.get(callId);
let status: ToolCallStatus;
if (approval) {
status = ToolCallStatus.Confirming;
} else if (entry.success === undefined) {
status = ToolCallStatus.Executing;
} else if (entry.success) {
status = ToolCallStatus.Success;
} else {
status = ToolCallStatus.Error;
}
// For executing tools, use live output if available (Gap 4)
const resultDisplay =
status === ToolCallStatus.Executing && liveOutputs?.has(callId)
? liveOutputs.get(callId)
: entry.resultDisplay;
return {
callId: entry.callId,
name: entry.name,
description: entry.description,
resultDisplay,
outputFile: entry.outputFile,
renderOutputAsMarkdown: entry.renderOutputAsMarkdown,
status,
confirmationDetails: approval,
ptyId:
status === ToolCallStatus.Executing
? shellPids?.get(callId)
: undefined,
};
});
items.push({ type: 'tool_group', tools, id: groupId });
} else {
// Skip unknown roles
i++;
}
}
return items;
}

12
packages/cli/src/ui/components/agent-view/index.ts Normal file
View file

@ -0,0 +1,12 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
export { AgentTabBar } from './AgentTabBar.js';
export { AgentChatView } from './AgentChatView.js';
export { AgentHeader } from './AgentHeader.js';
export { AgentComposer } from './AgentComposer.js';
export { AgentFooter } from './AgentFooter.js';
export { agentMessagesToHistoryItems } from './agentHistoryAdapter.js';

290
packages/cli/src/ui/components/arena/ArenaCards.tsx Normal file
View file

@ -0,0 +1,290 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
import type React from 'react';
import { Box, Text } from 'ink';
import { theme } from '../../semantic-colors.js';
import { formatDuration } from '../../utils/formatters.js';
import { getArenaStatusLabel } from '../../utils/displayUtils.js';
import type { ArenaAgentCardData } from '../../types.js';
// ─── Helpers ────────────────────────────────────────────────
// ─── Agent Complete Card ────────────────────────────────────
interface ArenaAgentCardProps {
agent: ArenaAgentCardData;
width?: number;
}
export const ArenaAgentCard: React.FC<ArenaAgentCardProps> = ({
agent,
width,
}) => {
const { icon, text, color } = getArenaStatusLabel(agent.status);
const duration = formatDuration(agent.durationMs);
const tokens = agent.totalTokens.toLocaleString();
const inTokens = agent.inputTokens.toLocaleString();
const outTokens = agent.outputTokens.toLocaleString();
return (
<Box flexDirection="column" width={width}>
{/* Line 1: Status icon + text + label + duration */}
<Box>
<Text color={color}>
{icon} {agent.label} · {text} · {duration}
</Text>
</Box>
{/* Line 2: Tokens */}
<Box marginLeft={2}>
<Text color={theme.text.secondary}>
Tokens: {tokens} (in {inTokens}, out {outTokens})
</Text>
</Box>
{/* Line 3: Tool Calls with colored success/error counts */}
<Box marginLeft={2}>
<Text color={theme.text.secondary}>
Tool Calls: {agent.toolCalls}
{agent.failedToolCalls > 0 && (
<>
{' '}
(
<Text color={theme.status.success}>
✓ {agent.successfulToolCalls}
</Text>
<Text color={theme.text.secondary}> </Text>
<Text color={theme.status.error}>✕ {agent.failedToolCalls}</Text>)
</>
)}
</Text>
</Box>
{/* Error line (if terminated with error) */}
{agent.error && (
<Box marginLeft={2}>
<Text color={theme.status.error}>{agent.error}</Text>
</Box>
)}
</Box>
);
};
// ─── Session Complete Card ──────────────────────────────────
interface ArenaSessionCardProps {
sessionStatus: string;
task: string;
totalDurationMs: number;
agents: ArenaAgentCardData[];
width?: number;
}
/**
* Pad or truncate a string to a fixed visual width.
*/
function pad(
str: string,
len: number,
align: 'left' | 'right' = 'left',
): string {
if (str.length >= len) return str.slice(0, len);
const padding = ' '.repeat(len - str.length);
return align === 'right' ? padding + str : str + padding;
}
/**
* Truncate a string to a maximum length, adding ellipsis if truncated.
*/
function truncate(str: string, maxLen: number): string {
if (str.length <= maxLen) return str;
return str.slice(0, maxLen - 1) + '…';
}
/**
* Calculate diff stats from a unified diff string.
* Returns the stats string and individual counts for colored rendering.
*/
function getDiffStats(diff: string | undefined): {
text: string;
additions: number;
deletions: number;
} {
if (!diff) return { text: '', additions: 0, deletions: 0 };
const lines = diff.split('\n');
let additions = 0;
let deletions = 0;
for (const line of lines) {
if (line.startsWith('+') && !line.startsWith('+++')) {
additions++;
} else if (line.startsWith('-') && !line.startsWith('---')) {
deletions++;
}
}
return { text: `+${additions}/-${deletions}`, additions, deletions };
}
const MAX_MODEL_NAME_LENGTH = 35;
export const ArenaSessionCard: React.FC<ArenaSessionCardProps> = ({
sessionStatus,
task,
agents,
width,
}) => {
// Truncate task for display
const maxTaskLen = 60;
const displayTask =
task.length > maxTaskLen ? task.slice(0, maxTaskLen - 1) + '…' : task;
// Column widths for the agent table (unified with Arena Results)
const colStatus = 14;
const colTime = 8;
const colTokens = 10;
const colChanges = 10;
const titleLabel =
sessionStatus === 'idle'
? 'Agents Status · Idle'
: sessionStatus === 'completed'
? 'Arena Complete'
: sessionStatus === 'cancelled'
? 'Arena Cancelled'
: 'Arena Failed';
return (
<Box
borderStyle="round"
borderColor={theme.border.default}
flexDirection="column"
paddingX={2}
paddingY={1}
width={width}
>
{/* Title - neutral color (not green) */}
<Box>
<Text bold color={theme.text.primary}>
{titleLabel}
</Text>
</Box>
<Box height={1} />
{/* Task */}
<Box>
<Text>
<Text color={theme.text.secondary}>Task: </Text>
<Text color={theme.text.primary}>&quot;{displayTask}&quot;</Text>
</Text>
</Box>
<Box height={1} />
{/* Table header - unified columns: Agent, Status, Time, Tokens, Changes */}
<Box>
<Box flexGrow={1}>
<Text bold color={theme.text.secondary}>
Agent
</Text>
</Box>
<Box width={colStatus} justifyContent="flex-end">
<Text bold color={theme.text.secondary}>
Status
</Text>
</Box>
<Box width={colTime} justifyContent="flex-end">
<Text bold color={theme.text.secondary}>
Time
</Text>
</Box>
<Box width={colTokens} justifyContent="flex-end">
<Text bold color={theme.text.secondary}>
Tokens
</Text>
</Box>
<Box width={colChanges} justifyContent="flex-end">
<Text bold color={theme.text.secondary}>
Changes
</Text>
</Box>
</Box>
{/* Table separator */}
<Box>
<Text color={theme.border.default}>
{'─'.repeat((width ?? 60) - 8)}
</Text>
</Box>
{/* Agent rows */}
{agents.map((agent) => {
const { text: statusText, color } = getArenaStatusLabel(agent.status);
const diffStats = getDiffStats(agent.diff);
return (
<Box key={agent.label}>
<Box flexGrow={1}>
<Text color={theme.text.primary}>
{truncate(agent.label, MAX_MODEL_NAME_LENGTH)}
</Text>
</Box>
<Box width={colStatus} justifyContent="flex-end">
<Text color={color}>{statusText}</Text>
</Box>
<Box width={colTime} justifyContent="flex-end">
<Text color={theme.text.primary}>
{pad(formatDuration(agent.durationMs), colTime - 1, 'right')}
</Text>
</Box>
<Box width={colTokens} justifyContent="flex-end">
<Text color={theme.text.primary}>
{pad(
agent.totalTokens.toLocaleString(),
colTokens - 1,
'right',
)}
</Text>
</Box>
<Box width={colChanges} justifyContent="flex-end">
{diffStats.additions > 0 || diffStats.deletions > 0 ? (
<Text>
<Text color={theme.status.success}>
+{diffStats.additions}
</Text>
<Text color={theme.text.secondary}>/</Text>
<Text color={theme.status.error}>-{diffStats.deletions}</Text>
</Text>
) : (
<Text color={theme.text.secondary}>-</Text>
)}
</Box>
</Box>
);
})}
<Box height={1} />
{/* Hint */}
{sessionStatus === 'idle' && (
<Box flexDirection="column">
<Text color={theme.text.secondary}>
Switch to an agent tab to continue, or{' '}
<Text color={theme.text.accent}>/arena select</Text> to pick a
winner.
</Text>
</Box>
)}
{sessionStatus === 'completed' && (
<Box>
<Text color={theme.text.secondary}>
Run <Text color={theme.text.accent}>/arena select</Text> to pick a
winner.
</Text>
</Box>
)}
</Box>
);
};

260
packages/cli/src/ui/components/arena/ArenaSelectDialog.tsx Normal file
View file

@ -0,0 +1,260 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
import type React from 'react';
import { useCallback, useMemo } from 'react';
import { Box, Text } from 'ink';
import {
type ArenaManager,
isSuccessStatus,
type Config,
} from '@qwen-code/qwen-code-core';
import { theme } from '../../semantic-colors.js';
import { useKeypress } from '../../hooks/useKeypress.js';
import { MessageType, type HistoryItemWithoutId } from '../../types.js';
import type { UseHistoryManagerReturn } from '../../hooks/useHistoryManager.js';
import { formatDuration } from '../../utils/formatters.js';
import { getArenaStatusLabel } from '../../utils/displayUtils.js';
import { DescriptiveRadioButtonSelect } from '../shared/DescriptiveRadioButtonSelect.js';
import type { DescriptiveRadioSelectItem } from '../shared/DescriptiveRadioButtonSelect.js';
interface ArenaSelectDialogProps {
manager: ArenaManager;
config: Config;
addItem: UseHistoryManagerReturn['addItem'];
closeArenaDialog: () => void;
}
export function ArenaSelectDialog({
manager,
config,
addItem,
closeArenaDialog,
}: ArenaSelectDialogProps): React.JSX.Element {
const pushMessage = useCallback(
(result: { messageType: 'info' | 'error'; content: string }) => {
const item: HistoryItemWithoutId = {
type:
result.messageType === 'info' ? MessageType.INFO : MessageType.ERROR,
text: result.content,
};
addItem(item, Date.now());
try {
const chatRecorder = config.getChatRecordingService();
chatRecorder?.recordSlashCommand({
phase: 'result',
rawCommand: '/arena select',
outputHistoryItems: [{ ...item } as Record<string, unknown>],
});
} catch {
// Best-effort recording
}
},
[addItem, config],
);
const onSelect = useCallback(
async (agentId: string) => {
closeArenaDialog();
const mgr = config.getArenaManager();
if (!mgr) {
pushMessage({
messageType: 'error',
content: 'No arena session found. Start one with /arena start.',
});
return;
}
const agent =
mgr.getAgentState(agentId) ??
mgr.getAgentStates().find((item) => item.agentId === agentId);
const label = agent?.model.modelId || agentId;
pushMessage({
messageType: 'info',
content: `Applying changes from ${label}…`,
});
const result = await mgr.applyAgentResult(agentId);
if (!result.success) {
pushMessage({
messageType: 'error',
content: `Failed to apply changes from ${label}: ${result.error}`,
});
return;
}
try {
await config.cleanupArenaRuntime(true);
} catch (err) {
pushMessage({
messageType: 'error',
content: `Warning: failed to clean up arena resources: ${err instanceof Error ? err.message : String(err)}`,
});
}
pushMessage({
messageType: 'info',
content: `Applied changes from ${label} to workspace. Arena session complete.`,
});
},
[closeArenaDialog, config, pushMessage],
);
const onDiscard = useCallback(async () => {
closeArenaDialog();
const mgr = config.getArenaManager();
if (!mgr) {
pushMessage({
messageType: 'error',
content: 'No arena session found. Start one with /arena start.',
});
return;
}
try {
pushMessage({
messageType: 'info',
content: 'Discarding Arena results and cleaning up…',
});
await config.cleanupArenaRuntime(true);
pushMessage({
messageType: 'info',
content: 'Arena results discarded. All worktrees cleaned up.',
});
} catch (err) {
pushMessage({
messageType: 'error',
content: `Failed to clean up arena worktrees: ${err instanceof Error ? err.message : String(err)}`,
});
}
}, [closeArenaDialog, config, pushMessage]);
const result = manager.getResult();
const agents = manager.getAgentStates();
const items: Array<DescriptiveRadioSelectItem<string>> = useMemo(
() =>
agents.map((agent) => {
const label = agent.model.modelId;
const statusInfo = getArenaStatusLabel(agent.status);
const duration = formatDuration(agent.stats.durationMs);
const tokens = agent.stats.totalTokens.toLocaleString();
// Build diff summary from cached result if available
let diffAdditions = 0;
let diffDeletions = 0;
if (isSuccessStatus(agent.status) && result) {
const agentResult = result.agents.find(
(a) => a.agentId === agent.agentId,
);
if (agentResult?.diff) {
const lines = agentResult.diff.split('\n');
for (const line of lines) {
if (line.startsWith('+') && !line.startsWith('+++')) {
diffAdditions++;
} else if (line.startsWith('-') && !line.startsWith('---')) {
diffDeletions++;
}
}
}
}
// Title: full model name (not truncated)
const title = <Text>{label}</Text>;
// Description: status, time, tokens, changes (unified with Arena Complete columns)
const description = (
<Text>
<Text color={statusInfo.color}>{statusInfo.text}</Text>
<Text color={theme.text.secondary}> · </Text>
<Text color={theme.text.secondary}>{duration}</Text>
<Text color={theme.text.secondary}> · </Text>
<Text color={theme.text.secondary}>{tokens} tokens</Text>
{(diffAdditions > 0 || diffDeletions > 0) && (
<>
<Text color={theme.text.secondary}> · </Text>
<Text color={theme.status.success}>+{diffAdditions}</Text>
<Text color={theme.text.secondary}>/</Text>
<Text color={theme.status.error}>-{diffDeletions}</Text>
<Text color={theme.text.secondary}> lines</Text>
</>
)}
</Text>
);
return {
key: agent.agentId,
value: agent.agentId,
title,
description,
disabled: !isSuccessStatus(agent.status),
};
}),
[agents, result],
);
useKeypress(
(key) => {
if (key.name === 'escape') {
closeArenaDialog();
}
if (key.name === 'd' && !key.ctrl && !key.meta) {
onDiscard();
}
},
{ isActive: true },
);
const task = result?.task || '';
return (
<Box
borderStyle="round"
borderColor={theme.border.default}
flexDirection="column"
padding={1}
width="100%"
>
{/* Neutral title color (not green) */}
<Text bold color={theme.text.primary}>
Arena Results
</Text>
<Box marginTop={1} flexDirection="column">
<Text>
<Text color={theme.text.secondary}>Task: </Text>
<Text
color={theme.text.primary}
>{`"${task.length > 60 ? task.slice(0, 59) + '…' : task}"`}</Text>
</Text>
</Box>
<Box marginTop={1}>
<Text color={theme.text.secondary}>
Select a winner to apply changes:
</Text>
</Box>
<Box marginTop={1} flexDirection="column">
<DescriptiveRadioButtonSelect
items={items}
initialIndex={items.findIndex((item) => !item.disabled)}
onSelect={(agentId: string) => {
onSelect(agentId);
}}
isFocused={true}
showNumbers={false}
/>
</Box>
<Box marginTop={1}>
<Text color={theme.text.secondary}>
Enter to select, d to discard all, Esc to cancel
</Text>
</Box>
</Box>
);
}

161
packages/cli/src/ui/components/arena/ArenaStartDialog.tsx Normal file
View file

@ -0,0 +1,161 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
import type React from 'react';
import { useMemo, useState } from 'react';
import { Box, Text } from 'ink';
import Link from 'ink-link';
import { AuthType } from '@qwen-code/qwen-code-core';
import { useConfig } from '../../contexts/ConfigContext.js';
import { theme } from '../../semantic-colors.js';
import { useKeypress } from '../../hooks/useKeypress.js';
import { MultiSelect } from '../shared/MultiSelect.js';
import { t } from '../../../i18n/index.js';
interface ArenaStartDialogProps {
onClose: () => void;
onConfirm: (selectedModels: string[]) => void;
}
const MODEL_PROVIDERS_DOCUMENTATION_URL =
'https://qwenlm.github.io/qwen-code-docs/en/users/configuration/settings/#modelproviders';
export function ArenaStartDialog({
onClose,
onConfirm,
}: ArenaStartDialogProps): React.JSX.Element {
const config = useConfig();
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const modelItems = useMemo(() => {
const allModels = config.getAllConfiguredModels();
const selectableModels = allModels.filter((model) => !model.isRuntimeModel);
return selectableModels.map((model) => {
const token = `${model.authType}:${model.id}`;
const isQwenOauth = model.authType === AuthType.QWEN_OAUTH;
return {
key: token,
value: token,
label: `[${model.authType}] ${model.label}`,
disabled: isQwenOauth,
};
});
}, [config]);
const hasDisabledQwenOauth = modelItems.some((item) => item.disabled);
const selectableModelCount = modelItems.filter(
(item) => !item.disabled,
).length;
const needsMoreModels = selectableModelCount < 2;
const shouldShowMoreModelsHint =
selectableModelCount >= 2 && selectableModelCount < 3;
useKeypress(
(key) => {
if (key.name === 'escape') {
onClose();
}
},
{ isActive: true },
);
const handleConfirm = (values: string[]) => {
if (values.length < 2) {
setErrorMessage(
t('Please select at least 2 models to start an Arena session.'),
);
return;
}
setErrorMessage(null);
onConfirm(values);
};
return (
<Box
borderStyle="round"
borderColor={theme.border.default}
flexDirection="column"
padding={1}
width="100%"
>
<Text bold>{t('Select Models')}</Text>
{modelItems.length === 0 ? (
<Box marginTop={1} flexDirection="column">
<Text color={theme.status.warning}>
{t('No models available. Please configure models first.')}
</Text>
</Box>
) : (
<Box marginTop={1}>
<MultiSelect
items={modelItems}
initialIndex={0}
onConfirm={handleConfirm}
showNumbers
showScrollArrows
maxItemsToShow={10}
/>
</Box>
)}
{errorMessage && (
<Box marginTop={1}>
<Text color={theme.status.error}>{errorMessage}</Text>
</Box>
)}
{(hasDisabledQwenOauth || needsMoreModels) && (
<Box marginTop={1} flexDirection="column">
{hasDisabledQwenOauth && (
<Text color={theme.status.warning}>
{t('Note: qwen-oauth models are not supported in Arena.')}
</Text>
)}
{needsMoreModels && (
<>
<Text color={theme.status.warning}>
{t('Arena requires at least 2 models. To add more:')}
</Text>
<Text color={theme.status.warning}>
{t(
' - Run /auth to set up a Coding Plan (includes multiple models)',
)}
</Text>
<Text color={theme.status.warning}>
{t(' - Or configure modelProviders in settings.json')}
</Text>
</>
)}
</Box>
)}
{shouldShowMoreModelsHint && (
<>
<Box marginTop={1}>
<Text color={theme.text.secondary}>
{t('Configure more models with the modelProviders guide:')}
</Text>
</Box>
<Box marginTop={0}>
<Link url={MODEL_PROVIDERS_DOCUMENTATION_URL} fallback={false}>
<Text color={theme.text.secondary} underline>
{MODEL_PROVIDERS_DOCUMENTATION_URL}
</Text>
</Link>
</Box>
</>
)}
<Box marginTop={1} flexDirection="column">
<Text color={theme.text.secondary}>
{t('Space to toggle, Enter to confirm, Esc to cancel')}
</Text>
</Box>
</Box>
);
}

288
packages/cli/src/ui/components/arena/ArenaStatusDialog.tsx Normal file
View file

@ -0,0 +1,288 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
import type React from 'react';
import { useEffect, useMemo, useState } from 'react';
import { Box, Text } from 'ink';
import {
type ArenaManager,
type ArenaAgentState,
type InProcessBackend,
type AgentStatsSummary,
isSettledStatus,
ArenaSessionStatus,
DISPLAY_MODE,
} from '@qwen-code/qwen-code-core';
import { theme } from '../../semantic-colors.js';
import { useKeypress } from '../../hooks/useKeypress.js';
import { formatDuration } from '../../utils/formatters.js';
import { getArenaStatusLabel } from '../../utils/displayUtils.js';
const STATUS_REFRESH_INTERVAL_MS = 2000;
const IN_PROCESS_REFRESH_INTERVAL_MS = 1000;
interface ArenaStatusDialogProps {
manager: ArenaManager;
closeArenaDialog: () => void;
width?: number;
}
function truncate(str: string, maxLen: number): string {
if (str.length <= maxLen) return str;
return str.slice(0, maxLen - 1) + '…';
}
function pad(
str: string,
len: number,
align: 'left' | 'right' = 'left',
): string {
if (str.length >= len) return str.slice(0, len);
const padding = ' '.repeat(len - str.length);
return align === 'right' ? padding + str : str + padding;
}
function getElapsedMs(agent: ArenaAgentState): number {
if (isSettledStatus(agent.status)) {
return agent.stats.durationMs;
}
return Date.now() - agent.startedAt;
}
function getSessionStatusLabel(status: ArenaSessionStatus): {
text: string;
color: string;
} {
switch (status) {
case ArenaSessionStatus.RUNNING:
return { text: 'Running', color: theme.status.success };
case ArenaSessionStatus.INITIALIZING:
return { text: 'Initializing', color: theme.status.warning };
case ArenaSessionStatus.IDLE:
return { text: 'Idle', color: theme.status.success };
case ArenaSessionStatus.COMPLETED:
return { text: 'Completed', color: theme.status.success };
case ArenaSessionStatus.CANCELLED:
return { text: 'Cancelled', color: theme.status.warning };
case ArenaSessionStatus.FAILED:
return { text: 'Failed', color: theme.status.error };
default:
return { text: String(status), color: theme.text.secondary };
}
}
const MAX_MODEL_NAME_LENGTH = 35;
export function ArenaStatusDialog({
manager,
closeArenaDialog,
width,
}: ArenaStatusDialogProps): React.JSX.Element {
const [tick, setTick] = useState(0);
// Detect in-process backend for live stats reading
const backend = manager.getBackend();
const isInProcess = backend?.type === DISPLAY_MODE.IN_PROCESS;
const inProcessBackend = isInProcess ? (backend as InProcessBackend) : null;
useEffect(() => {
const interval = isInProcess
? IN_PROCESS_REFRESH_INTERVAL_MS
: STATUS_REFRESH_INTERVAL_MS;
const timer = setInterval(() => {
setTick((prev) => prev + 1);
}, interval);
return () => clearInterval(timer);
}, [isInProcess]);
// Force re-read on every tick
void tick;
const sessionStatus = manager.getSessionStatus();
const sessionLabel = getSessionStatusLabel(sessionStatus);
const agents = manager.getAgentStates();
const task = manager.getTask() ?? '';
// For in-process mode, read live stats directly from AgentInteractive
const liveStats = useMemo(() => {
if (!inProcessBackend) return null;
const statsMap = new Map<string, AgentStatsSummary>();
for (const agent of agents) {
const interactive = inProcessBackend.getAgent(agent.agentId);
if (interactive) {
statsMap.set(agent.agentId, interactive.getStats());
}
}
return statsMap;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [inProcessBackend, agents, tick]);
const maxTaskLen = 60;
const displayTask =
task.length > maxTaskLen ? task.slice(0, maxTaskLen - 1) + '…' : task;
const colStatus = 14;
const colTime = 8;
const colTokens = 10;
const colRounds = 8;
const colTools = 8;
useKeypress(
(key) => {
if (key.name === 'escape' || key.name === 'q' || key.name === 'return') {
closeArenaDialog();
}
},
{ isActive: true },
);
// Inner content width: total width minus border (2) and paddingX (2*2)
const innerWidth = (width ?? 80) - 6;
return (
<Box
borderStyle="round"
borderColor={theme.border.default}
flexDirection="column"
paddingX={2}
paddingY={1}
width="100%"
>
{/* Title */}
<Box>
<Text bold color={theme.text.primary}>
Arena Status
</Text>
<Text color={theme.text.secondary}> · </Text>
<Text color={sessionLabel.color}>{sessionLabel.text}</Text>
</Box>
<Box height={1} />
{/* Task */}
<Box>
<Text>
<Text color={theme.text.secondary}>Task: </Text>
<Text color={theme.text.primary}>&quot;{displayTask}&quot;</Text>
</Text>
</Box>
<Box height={1} />
{/* Table header */}
<Box>
<Box flexGrow={1}>
<Text bold color={theme.text.secondary}>
Agent
</Text>
</Box>
<Box width={colStatus} justifyContent="flex-end">
<Text bold color={theme.text.secondary}>
Status
</Text>
</Box>
<Box width={colTime} justifyContent="flex-end">
<Text bold color={theme.text.secondary}>
Time
</Text>
</Box>
<Box width={colTokens} justifyContent="flex-end">
<Text bold color={theme.text.secondary}>
Tokens
</Text>
</Box>
<Box width={colRounds} justifyContent="flex-end">
<Text bold color={theme.text.secondary}>
Rounds
</Text>
</Box>
<Box width={colTools} justifyContent="flex-end">
<Text bold color={theme.text.secondary}>
Tools
</Text>
</Box>
</Box>
{/* Separator */}
<Box>
<Text color={theme.border.default}>{'─'.repeat(innerWidth)}</Text>
</Box>
{/* Agent rows */}
{agents.map((agent) => {
const label = agent.model.modelId;
const { text: statusText, color } = getArenaStatusLabel(agent.status);
const elapsed = getElapsedMs(agent);
// Use live stats from AgentInteractive when in-process, otherwise
// fall back to the cached ArenaAgentState.stats (file-polled).
const live = liveStats?.get(agent.agentId);
const totalTokens = live?.totalTokens ?? agent.stats.totalTokens;
const rounds = live?.rounds ?? agent.stats.rounds;
const toolCalls = live?.totalToolCalls ?? agent.stats.toolCalls;
const successfulToolCalls =
live?.successfulToolCalls ?? agent.stats.successfulToolCalls;
const failedToolCalls =
live?.failedToolCalls ?? agent.stats.failedToolCalls;
return (
<Box key={agent.agentId} flexDirection="column">
<Box>
<Box flexGrow={1}>
<Text color={theme.text.primary}>
{truncate(label, MAX_MODEL_NAME_LENGTH)}
</Text>
</Box>
<Box width={colStatus} justifyContent="flex-end">
<Text color={color}>{statusText}</Text>
</Box>
<Box width={colTime} justifyContent="flex-end">
<Text color={theme.text.primary}>
{pad(formatDuration(elapsed), colTime - 1, 'right')}
</Text>
</Box>
<Box width={colTokens} justifyContent="flex-end">
<Text color={theme.text.primary}>
{pad(totalTokens.toLocaleString(), colTokens - 1, 'right')}
</Text>
</Box>
<Box width={colRounds} justifyContent="flex-end">
<Text color={theme.text.primary}>
{pad(String(rounds), colRounds - 1, 'right')}
</Text>
</Box>
<Box width={colTools} justifyContent="flex-end">
{failedToolCalls > 0 ? (
<Text>
<Text color={theme.status.success}>
{successfulToolCalls}
</Text>
<Text color={theme.text.secondary}>/</Text>
<Text color={theme.status.error}>{failedToolCalls}</Text>
</Text>
) : (
<Text
color={
toolCalls > 0 ? theme.status.success : theme.text.primary
}
>
{pad(String(toolCalls), colTools - 1, 'right')}
</Text>
)}
</Box>
</Box>
</Box>
);
})}
{agents.length === 0 && (
<Box>
<Text color={theme.text.secondary}>No agents registered yet.</Text>
</Box>
)}
</Box>
);
}

213
packages/cli/src/ui/components/arena/ArenaStopDialog.tsx Normal file
View file

@ -0,0 +1,213 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
import type React from 'react';
import { useCallback, useMemo, useState } from 'react';
import { Box, Text } from 'ink';
import {
ArenaSessionStatus,
createDebugLogger,
type Config,
} from '@qwen-code/qwen-code-core';
import { theme } from '../../semantic-colors.js';
import { useKeypress } from '../../hooks/useKeypress.js';
import { MessageType, type HistoryItemWithoutId } from '../../types.js';
import type { UseHistoryManagerReturn } from '../../hooks/useHistoryManager.js';
import { DescriptiveRadioButtonSelect } from '../shared/DescriptiveRadioButtonSelect.js';
import type { DescriptiveRadioSelectItem } from '../shared/DescriptiveRadioButtonSelect.js';
const debugLogger = createDebugLogger('ARENA_STOP_DIALOG');
type StopAction = 'cleanup' | 'preserve';
interface ArenaStopDialogProps {
config: Config;
addItem: UseHistoryManagerReturn['addItem'];
closeArenaDialog: () => void;
}
export function ArenaStopDialog({
config,
addItem,
closeArenaDialog,
}: ArenaStopDialogProps): React.JSX.Element {
const [isProcessing, setIsProcessing] = useState(false);
const pushMessage = useCallback(
(result: { messageType: 'info' | 'error'; content: string }) => {
const item: HistoryItemWithoutId = {
type:
result.messageType === 'info' ? MessageType.INFO : MessageType.ERROR,
text: result.content,
};
addItem(item, Date.now());
try {
const chatRecorder = config.getChatRecordingService();
chatRecorder?.recordSlashCommand({
phase: 'result',
rawCommand: '/arena stop',
outputHistoryItems: [{ ...item } as Record<string, unknown>],
});
} catch {
// Best-effort recording
}
},
[addItem, config],
);
const onStop = useCallback(
async (action: StopAction) => {
if (isProcessing) return;
setIsProcessing(true);
closeArenaDialog();
const mgr = config.getArenaManager();
if (!mgr) {
pushMessage({
messageType: 'error',
content: 'No running Arena session found.',
});
return;
}
try {
const sessionStatus = mgr.getSessionStatus();
if (
sessionStatus === ArenaSessionStatus.RUNNING ||
sessionStatus === ArenaSessionStatus.INITIALIZING
) {
pushMessage({
messageType: 'info',
content: 'Stopping Arena agents…',
});
await mgr.cancel();
}
await mgr.waitForSettled();
pushMessage({
messageType: 'info',
content: 'Cleaning up Arena resources…',
});
if (action === 'preserve') {
await mgr.cleanupRuntime();
} else {
await mgr.cleanup();
}
config.setArenaManager(null);
if (action === 'preserve') {
pushMessage({
messageType: 'info',
content:
'Arena session stopped. Worktrees and session files were preserved. ' +
'Use /arena select --discard to manually clean up later.',
});
} else {
pushMessage({
messageType: 'info',
content:
'Arena session stopped. All Arena resources (including Git worktrees) were cleaned up.',
});
}
} catch (error) {
const message = error instanceof Error ? error.message : String(error);
debugLogger.error('Failed to stop Arena session:', error);
pushMessage({
messageType: 'error',
content: `Failed to stop Arena session: ${message}`,
});
}
},
[isProcessing, closeArenaDialog, config, pushMessage],
);
const configPreserve =
config.getAgentsSettings().arena?.preserveArtifacts ?? false;
const items: Array<DescriptiveRadioSelectItem<StopAction>> = useMemo(
() => [
{
key: 'cleanup',
value: 'cleanup' as StopAction,
title: <Text>Stop and clean up</Text>,
description: (
<Text color={theme.text.secondary}>
Remove all worktrees and session files
</Text>
),
},
{
key: 'preserve',
value: 'preserve' as StopAction,
title: <Text>Stop and preserve artifacts</Text>,
description: (
<Text color={theme.text.secondary}>
Keep worktrees and session files for later inspection
</Text>
),
},
],
[],
);
const defaultIndex = configPreserve ? 1 : 0;
useKeypress(
(key) => {
if (key.name === 'escape') {
closeArenaDialog();
}
},
{ isActive: !isProcessing },
);
return (
<Box
borderStyle="round"
borderColor={theme.border.default}
flexDirection="column"
padding={1}
width="100%"
>
<Text bold color={theme.text.primary}>
Stop Arena Session
</Text>
<Box marginTop={1}>
<Text color={theme.text.secondary}>
Choose what to do with Arena artifacts:
</Text>
</Box>
<Box marginTop={1} flexDirection="column">
<DescriptiveRadioButtonSelect
items={items}
initialIndex={defaultIndex}
onSelect={(action: StopAction) => {
onStop(action);
}}
isFocused={!isProcessing}
showNumbers={false}
/>
</Box>
{configPreserve && (
<Box marginTop={1}>
<Text color={theme.text.secondary} dimColor>
Default: preserve (agents.arena.preserveArtifacts is enabled)
</Text>
</Box>
)}
<Box marginTop={1}>
<Text color={theme.text.secondary}>
Enter to confirm, Esc to cancel
</Text>
</Box>
</Box>
);
}

2
packages/cli/src/ui/components/messages/StatusMessages.tsx
View file

@ -75,7 +75,7 @@ export const SuccessMessage: React.FC<StatusTextProps> = ({ text }) => (
export const WarningMessage: React.FC<StatusTextProps> = ({ text }) => (
<StatusMessage
text={text}
prefix="⚠"
prefix="△"
prefixColor={theme.status.warning}
textColor={theme.status.warning}
/>

6
packages/cli/src/ui/components/shared/DescriptiveRadioButtonSelect.tsx
View file

@ -66,7 +66,11 @@ export function DescriptiveRadioButtonSelect<T>({
renderItem={(item, { titleColor }) => (
<Box flexDirection="column" key={item.key}>
<Text color={titleColor}>{item.title}</Text>
<Text color={theme.text.secondary}>{item.description}</Text>
{typeof item.description === 'string' ? (
<Text color={theme.text.secondary}>{item.description}</Text>
) : (
item.description
)}
</Box>
)}
/>

193
packages/cli/src/ui/components/shared/MultiSelect.tsx Normal file
View file

@ -0,0 +1,193 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
import type React from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Box, Text } from 'ink';
import { theme } from '../../semantic-colors.js';
import { useSelectionList } from '../../hooks/useSelectionList.js';
import { useKeypress } from '../../hooks/useKeypress.js';
import type { SelectionListItem } from '../../hooks/useSelectionList.js';
export interface MultiSelectItem<T> extends SelectionListItem<T> {
label: string;
}
export interface MultiSelectProps<T> {
items: Array<MultiSelectItem<T>>;
initialIndex?: number;
initialSelectedKeys?: string[];
onConfirm: (selectedValues: T[]) => void;
onChange?: (selectedValues: T[]) => void;
onHighlight?: (value: T) => void;
isFocused?: boolean;
showNumbers?: boolean;
showScrollArrows?: boolean;
maxItemsToShow?: number;
}
const EMPTY_SELECTED_KEYS: string[] = [];
function getSelectedValues<T>(
items: Array<MultiSelectItem<T>>,
selectedKeys: Set<string>,
): T[] {
return items
.filter((item) => selectedKeys.has(item.key))
.map((item) => item.value);
}
export function MultiSelect<T>({
items,
initialIndex = 0,
initialSelectedKeys = EMPTY_SELECTED_KEYS,
onConfirm,
onChange,
onHighlight,
isFocused = true,
showNumbers = true,
showScrollArrows = false,
maxItemsToShow = 10,
}: MultiSelectProps<T>): React.JSX.Element {
const [selectedKeys, setSelectedKeys] = useState<Set<string>>(
() => new Set(initialSelectedKeys),
);
const [scrollOffset, setScrollOffset] = useState(0);
useEffect(() => {
setSelectedKeys((prev) => {
const next = new Set(initialSelectedKeys);
if (
prev.size === next.size &&
Array.from(next).every((key) => prev.has(key))
) {
return prev;
}
return next;
});
}, [initialSelectedKeys]);
const { activeIndex } = useSelectionList({
items,
initialIndex,
isFocused,
// Disable numeric quick-select in useSelectionList — in a multi-select
// context, onSelect triggers onConfirm (submit), so numeric keys would
// accidentally submit the dialog instead of toggling checkboxes.
// Numbers are still rendered visually via the showNumbers prop below.
showNumbers: false,
onHighlight,
onSelect: () => {
onConfirm(getSelectedValues(items, selectedKeys));
},
});
const toggleSelectionAtIndex = useCallback(
(index: number) => {
const item = items[index];
if (!item || item.disabled) {
return;
}
setSelectedKeys((prev) => {
const next = new Set(prev);
if (next.has(item.key)) {
next.delete(item.key);
} else {
next.add(item.key);
}
return next;
});
},
[items],
);
useEffect(() => {
onChange?.(getSelectedValues(items, selectedKeys));
}, [items, selectedKeys, onChange]);
useKeypress(
(key) => {
if (key.name === 'space' || key.sequence === ' ') {
toggleSelectionAtIndex(activeIndex);
}
},
{ isActive: isFocused },
);
useEffect(() => {
const newScrollOffset = Math.max(
0,
Math.min(activeIndex - maxItemsToShow + 1, items.length - maxItemsToShow),
);
if (activeIndex < scrollOffset) {
setScrollOffset(activeIndex);
} else if (activeIndex >= scrollOffset + maxItemsToShow) {
setScrollOffset(newScrollOffset);
}
}, [activeIndex, items.length, scrollOffset, maxItemsToShow]);
const visibleItems = useMemo(
() => items.slice(scrollOffset, scrollOffset + maxItemsToShow),
[items, scrollOffset, maxItemsToShow],
);
const numberColumnWidth = String(items.length).length;
const hasMoreAbove = scrollOffset > 0;
const hasMoreBelow = scrollOffset + maxItemsToShow < items.length;
const moreAboveCount = scrollOffset;
const moreBelowCount = Math.max(
0,
items.length - (scrollOffset + maxItemsToShow),
);
return (
<Box flexDirection="column">
{showScrollArrows && hasMoreAbove && (
<Text color={theme.text.secondary}>↑ {moreAboveCount} more above</Text>
)}
{visibleItems.map((item, index) => {
const itemIndex = scrollOffset + index;
const isActive = activeIndex === itemIndex;
const isChecked = selectedKeys.has(item.key);
const itemNumberText = `${String(itemIndex + 1).padStart(
numberColumnWidth,
)}.`;
const checkboxText = item.disabled ? '[x]' : isChecked ? '[✓]' : '[ ]';
let textColor = theme.text.primary;
if (item.disabled) {
textColor = theme.text.secondary;
} else if (isActive) {
textColor = theme.status.success;
} else if (isChecked) {
textColor = theme.text.accent;
}
return (
<Box key={item.key} alignItems="flex-start">
<Box minWidth={4} flexShrink={0}>
<Text color={textColor}>{checkboxText}</Text>
</Box>
{showNumbers && (
<Box marginRight={1} minWidth={itemNumberText.length}>
<Text color={textColor}>{itemNumberText}</Text>
</Box>
)}
<Box flexGrow={1}>
<Text color={textColor}>{item.label}</Text>
</Box>
</Box>
);
})}
{showScrollArrows && hasMoreBelow && (
<Text color={theme.text.secondary}>↓ {moreBelowCount} more below</Text>
)}
</Box>
);
}

4
packages/cli/src/ui/components/shared/text-buffer.ts
View file

@ -1907,8 +1907,8 @@ export function useTextBuffer({
else if (key.ctrl && key.name === 'b') move('left');
else if (key.name === 'right' && !key.meta && !key.ctrl) move('right');
else if (key.ctrl && key.name === 'f') move('right');
else if (key.name === 'up') move('up');
else if (key.name === 'down') move('down');
else if (key.name === 'up' && !key.shift) move('up');
else if (key.name === 'down' && !key.shift) move('down');
else if ((key.ctrl || key.meta) && key.name === 'left') move('wordLeft');
else if (key.meta && key.name === 'b') move('wordLeft');
else if ((key.ctrl || key.meta) && key.name === 'right')

4
packages/cli/src/ui/components/subagents/runtime/AgentExecutionDisplay.tsx
View file

@ -8,7 +8,7 @@ import React, { useMemo } from 'react';
import { Box, Text } from 'ink';
import type {
TaskResultDisplay,
SubagentStatsSummary,
AgentStatsSummary,
Config,
} from '@qwen-code/qwen-code-core';
import { theme } from '../../../semantic-colors.js';
@ -467,7 +467,7 @@ const ExecutionSummaryDetails: React.FC<{
* Tool usage statistics component
*/
const ToolUsageStats: React.FC<{
executionSummary?: SubagentStatsSummary;
executionSummary?: AgentStatsSummary;
}> = ({ executionSummary }) => {
if (!executionSummary) {
return (

308
packages/cli/src/ui/contexts/AgentViewContext.tsx Normal file
View file

@ -0,0 +1,308 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview AgentViewContext — React context for in-process agent view switching.
*
* Tracks which view is active (main or an agent tab) and the set of registered
* AgentInteractive instances. Consumed by AgentTabBar, AgentChatView, and
* DefaultAppLayout to implement tab-based agent navigation.
*
* Kept separate from UIStateContext to avoid bloating the main state with
* in-process-only concerns and to make the feature self-contained.
*/
import {
createContext,
useContext,
useCallback,
useMemo,
useState,
} from 'react';
import {
type AgentInteractive,
type ApprovalMode,
type Config,
} from '@qwen-code/qwen-code-core';
import { useArenaInProcess } from '../hooks/useArenaInProcess.js';
// ─── Types ──────────────────────────────────────────────────
export interface RegisteredAgent {
interactiveAgent: AgentInteractive;
/** Model identifier shown in tabs and paths (e.g. "glm-5"). */
modelId: string;
/** Human-friendly model name (e.g. "GLM 5"). */
modelName?: string;
color: string;
}
export interface AgentViewState {
/** 'main' or an agentId */
activeView: string;
/** Registered in-process agents keyed by agentId */
agents: ReadonlyMap<string, RegisteredAgent>;
/** Whether any agent tab's embedded shell currently has input focus. */
agentShellFocused: boolean;
/** Current text in the active agent tab's input buffer (empty when on main). */
agentInputBufferText: string;
/** Whether the tab bar has keyboard focus (vs the agent input). */
agentTabBarFocused: boolean;
/** Per-agent approval modes (keyed by agentId). */
agentApprovalModes: ReadonlyMap<string, ApprovalMode>;
}
export interface AgentViewActions {
switchToMain(): void;
switchToAgent(agentId: string): void;
switchToNext(): void;
switchToPrevious(): void;
registerAgent(
agentId: string,
interactiveAgent: AgentInteractive,
modelId: string,
color: string,
modelName?: string,
): void;
unregisterAgent(agentId: string): void;
unregisterAll(): void;
setAgentShellFocused(focused: boolean): void;
setAgentInputBufferText(text: string): void;
setAgentTabBarFocused(focused: boolean): void;
setAgentApprovalMode(agentId: string, mode: ApprovalMode): void;
}
// ─── Context ────────────────────────────────────────────────
const AgentViewStateContext = createContext<AgentViewState | null>(null);
const AgentViewActionsContext = createContext<AgentViewActions | null>(null);
// ─── Defaults (used when no provider is mounted) ────────────
const DEFAULT_STATE: AgentViewState = {
activeView: 'main',
agents: new Map(),
agentShellFocused: false,
agentInputBufferText: '',
agentTabBarFocused: false,
agentApprovalModes: new Map(),
};
const noop = () => {};
const DEFAULT_ACTIONS: AgentViewActions = {
switchToMain: noop,
switchToAgent: noop,
switchToNext: noop,
switchToPrevious: noop,
registerAgent: noop,
unregisterAgent: noop,
unregisterAll: noop,
setAgentShellFocused: noop,
setAgentInputBufferText: noop,
setAgentTabBarFocused: noop,
setAgentApprovalMode: noop,
};
// ─── Hook: useAgentViewState ────────────────────────────────
export function useAgentViewState(): AgentViewState {
return useContext(AgentViewStateContext) ?? DEFAULT_STATE;
}
// ─── Hook: useAgentViewActions ──────────────────────────────
export function useAgentViewActions(): AgentViewActions {
return useContext(AgentViewActionsContext) ?? DEFAULT_ACTIONS;
}
// ─── Provider ───────────────────────────────────────────────
interface AgentViewProviderProps {
config?: Config;
children: React.ReactNode;
}
export function AgentViewProvider({
config,
children,
}: AgentViewProviderProps) {
const [activeView, setActiveView] = useState<string>('main');
const [agents, setAgents] = useState<Map<string, RegisteredAgent>>(
() => new Map(),
);
const [agentShellFocused, setAgentShellFocused] = useState(false);
const [agentInputBufferText, setAgentInputBufferText] = useState('');
const [agentTabBarFocused, setAgentTabBarFocused] = useState(false);
const [agentApprovalModes, setAgentApprovalModes] = useState<
Map<string, ApprovalMode>
>(() => new Map());
// ── Navigation ──
const switchToMain = useCallback(() => {
setActiveView('main');
setAgentTabBarFocused(false);
}, []);
const switchToAgent = useCallback(
(agentId: string) => {
if (agents.has(agentId)) {
setActiveView(agentId);
}
},
[agents],
);
const switchToNext = useCallback(() => {
const ids = ['main', ...agents.keys()];
const currentIndex = ids.indexOf(activeView);
const nextIndex = (currentIndex + 1) % ids.length;
setActiveView(ids[nextIndex]!);
}, [agents, activeView]);
const switchToPrevious = useCallback(() => {
const ids = ['main', ...agents.keys()];
const currentIndex = ids.indexOf(activeView);
const prevIndex = (currentIndex - 1 + ids.length) % ids.length;
setActiveView(ids[prevIndex]!);
}, [agents, activeView]);
// ── Registration ──
const registerAgent = useCallback(
(
agentId: string,
interactiveAgent: AgentInteractive,
modelId: string,
color: string,
modelName?: string,
) => {
setAgents((prev) => {
const next = new Map(prev);
next.set(agentId, {
interactiveAgent,
modelId,
color,
modelName,
});
return next;
});
// Seed approval mode from the agent's own config
const mode = interactiveAgent.getCore().runtimeContext.getApprovalMode();
setAgentApprovalModes((prev) => {
const next = new Map(prev);
next.set(agentId, mode);
return next;
});
},
[],
);
const unregisterAgent = useCallback((agentId: string) => {
setAgents((prev) => {
if (!prev.has(agentId)) return prev;
const next = new Map(prev);
next.delete(agentId);
return next;
});
setAgentApprovalModes((prev) => {
if (!prev.has(agentId)) return prev;
const next = new Map(prev);
next.delete(agentId);
return next;
});
setActiveView((current) => (current === agentId ? 'main' : current));
}, []);
const unregisterAll = useCallback(() => {
setAgents(new Map());
setAgentApprovalModes(new Map());
setActiveView('main');
setAgentTabBarFocused(false);
}, []);
const setAgentApprovalMode = useCallback(
(agentId: string, mode: ApprovalMode) => {
// Update the agent's runtime config so tool scheduling picks it up
const agent = agents.get(agentId);
if (agent) {
agent.interactiveAgent.getCore().runtimeContext.setApprovalMode(mode);
}
// Update UI state
setAgentApprovalModes((prev) => {
const next = new Map(prev);
next.set(agentId, mode);
return next;
});
},
[agents],
);
// ── Memoized values ──
const state: AgentViewState = useMemo(
() => ({
activeView,
agents,
agentShellFocused,
agentInputBufferText,
agentTabBarFocused,
agentApprovalModes,
}),
[
activeView,
agents,
agentShellFocused,
agentInputBufferText,
agentTabBarFocused,
agentApprovalModes,
],
);
const actions: AgentViewActions = useMemo(
() => ({
switchToMain,
switchToAgent,
switchToNext,
switchToPrevious,
registerAgent,
unregisterAgent,
unregisterAll,
setAgentShellFocused,
setAgentInputBufferText,
setAgentTabBarFocused,
setAgentApprovalMode,
}),
[
switchToMain,
switchToAgent,
switchToNext,
switchToPrevious,
registerAgent,
unregisterAgent,
unregisterAll,
setAgentShellFocused,
setAgentInputBufferText,
setAgentTabBarFocused,
setAgentApprovalMode,
],
);
// ── Arena in-process bridge ──
// Bridge arena manager events to agent registration. The hook is kept
// in its own file for separation of concerns; it's called here so the
// provider is the single owner of agent tab lifecycle.
useArenaInProcess(config ?? null, actions);
return (
<AgentViewStateContext.Provider value={state}>
<AgentViewActionsContext.Provider value={actions}>
{children}
</AgentViewActionsContext.Provider>
</AgentViewStateContext.Provider>
);
}

69
packages/cli/src/ui/contexts/KeypressContext.test.tsx
View file

@ -1367,6 +1367,75 @@ describe('KeypressContext - Kitty Protocol', () => {
}),
);
});
it('drops unsupported Kitty CSI-u keys without blocking later input', () => {
const keyHandler = vi.fn();
const { result } = renderHook(() => useKeypressContext(), { wrapper });
act(() => result.current.subscribe(keyHandler));
act(() => stdin.sendKittySequence(`\x1b[57358u`)); // CAPS_LOCK
act(() =>
stdin.pressKey({
name: 'a',
ctrl: false,
meta: false,
shift: false,
paste: false,
sequence: 'a',
}),
);
expect(keyHandler).toHaveBeenCalledTimes(1);
expect(keyHandler).toHaveBeenCalledWith(
expect.objectContaining({
name: 'a',
sequence: 'a',
}),
);
});
it('recovers plain text that arrives in the same chunk after an unsupported CSI-u key', () => {
const keyHandler = vi.fn();
const { result } = renderHook(() => useKeypressContext(), { wrapper });
act(() => result.current.subscribe(keyHandler));
act(() =>
stdin.pressKey({
name: '',
ctrl: false,
meta: false,
shift: false,
paste: false,
sequence: '\x1b[57358ua',
}),
);
expect(keyHandler).toHaveBeenCalledTimes(1);
expect(keyHandler).toHaveBeenCalledWith(
expect.objectContaining({
name: 'a',
sequence: 'a',
kittyProtocol: true,
}),
);
});
it('drops unsupported CSI-u variants with event metadata and keeps parsing', () => {
const keyHandler = vi.fn();
const { result } = renderHook(() => useKeypressContext(), { wrapper });
act(() => result.current.subscribe(keyHandler));
act(() => stdin.sendKittySequence(`\x1b[57358;1:1u\x1b[100u`));
expect(keyHandler).toHaveBeenCalledTimes(1);
expect(keyHandler).toHaveBeenCalledWith(
expect.objectContaining({
name: 'd',
sequence: 'd',
kittyProtocol: true,
}),
);
});
});
describe('Kitty keypad private-use keys', () => {

159
packages/cli/src/ui/contexts/KeypressContext.tsx
View file

@ -178,6 +178,25 @@ export function KeypressProvider({
let rawDataBuffer = Buffer.alloc(0);
let rawFlushTimeout: NodeJS.Timeout | null = null;
const createPrintableKey = (char: string): Key => {
const printableName =
char === ' '
? 'space'
: /^[A-Za-z]$/.test(char)
? char.toLowerCase()
: char;
return {
name: printableName,
ctrl: false,
meta: false,
shift: false,
paste: false,
sequence: char,
kittyProtocol: true,
};
};
// Parse a single complete kitty sequence from the start (prefix) of the
// buffer and return both the Key and the number of characters consumed.
// This lets us "peel off" one complete event when multiple sequences arrive
@ -415,22 +434,11 @@ export function KeypressProvider({
keyCode <= 0x10ffff &&
!(keyCode >= 0xe000 && keyCode <= 0xf8ff)
) {
const char = String.fromCodePoint(keyCode);
const printableName =
char === ' '
? 'space'
: /^[A-Za-z]$/.test(char)
? char.toLowerCase()
: char;
return {
key: {
name: printableName,
ctrl: false,
...createPrintableKey(String.fromCodePoint(keyCode)),
meta: alt,
shift,
paste: false,
sequence: char,
kittyProtocol: true,
},
length: m[0].length,
};
@ -490,6 +498,42 @@ export function KeypressProvider({
return null;
};
const getCompleteCsiSequenceLength = (buffer: string): number | null => {
if (!buffer.startsWith(`${ESC}[`)) {
return null;
}
for (let i = 2; i < buffer.length; i++) {
const code = buffer.charCodeAt(i);
if (code >= 0x40 && code <= 0x7e) {
return i + 1;
}
if (code < 0x20 || code > 0x3f) {
return 0;
}
}
return null;
};
const parsePlainTextPrefix = (
buffer: string,
): { key: Key; length: number } | null => {
if (!buffer || buffer.startsWith(ESC)) {
return null;
}
const [char] = Array.from(buffer);
if (!char) {
return null;
}
return {
key: createPrintableKey(char),
length: char.length,
};
};
const broadcast = (key: Key) => {
for (const handler of subscribers) {
handler(key);
@ -653,47 +697,82 @@ export function KeypressProvider({
// start of the buffer. This handles batched inputs cleanly. If the
// prefix is incomplete or invalid, skip to the next CSI introducer
// (ESC[) so that a following valid sequence can still be parsed.
let parsedAny = false;
let bufferedInputHandled = false;
while (kittySequenceBuffer) {
const parsed = parseKittyPrefix(kittySequenceBuffer);
if (!parsed) {
// Look for the next potential CSI start beyond index 0
const nextStart = kittySequenceBuffer.indexOf(`${ESC}[`, 1);
if (nextStart > 0) {
if (debugKeystrokeLogging) {
if (parsed) {
if (debugKeystrokeLogging) {
const parsedSequence = kittySequenceBuffer.slice(
0,
parsed.length,
);
if (kittySequenceBuffer.length > parsed.length) {
debugLogger.debug(
'[DEBUG] Skipping incomplete/invalid CSI prefix:',
kittySequenceBuffer.slice(0, nextStart),
'[DEBUG] Kitty sequence parsed successfully (prefix):',
parsedSequence,
);
} else {
debugLogger.debug(
'[DEBUG] Kitty sequence parsed successfully:',
parsedSequence,
);
}
kittySequenceBuffer = kittySequenceBuffer.slice(nextStart);
continue;
}
break;
// Consume the parsed prefix and broadcast it.
kittySequenceBuffer = kittySequenceBuffer.slice(parsed.length);
broadcast(parsed.key);
bufferedInputHandled = true;
continue;
}
if (debugKeystrokeLogging) {
const parsedSequence = kittySequenceBuffer.slice(
0,
parsed.length,
const completeUnsupportedCsiLength =
getCompleteCsiSequenceLength(kittySequenceBuffer);
if (completeUnsupportedCsiLength) {
if (debugKeystrokeLogging) {
debugLogger.debug(
'[DEBUG] Dropping unsupported complete CSI sequence:',
kittySequenceBuffer.slice(0, completeUnsupportedCsiLength),
);
}
kittySequenceBuffer = kittySequenceBuffer.slice(
completeUnsupportedCsiLength,
);
if (kittySequenceBuffer.length > parsed.length) {
bufferedInputHandled = true;
continue;
}
const plainTextPrefix = parsePlainTextPrefix(kittySequenceBuffer);
if (plainTextPrefix) {
if (debugKeystrokeLogging) {
debugLogger.debug(
'[DEBUG] Kitty sequence parsed successfully (prefix):',
parsedSequence,
);
} else {
debugLogger.debug(
'[DEBUG] Kitty sequence parsed successfully:',
parsedSequence,
'[DEBUG] Recovered plain text after kitty sequence:',
plainTextPrefix.key.sequence,
);
}
kittySequenceBuffer = kittySequenceBuffer.slice(
plainTextPrefix.length,
);
broadcast(plainTextPrefix.key);
bufferedInputHandled = true;
continue;
}
// Consume the parsed prefix and broadcast it.
kittySequenceBuffer = kittySequenceBuffer.slice(parsed.length);
broadcast(parsed.key);
parsedAny = true;
// Look for the next potential CSI start beyond index 0
const nextStart = kittySequenceBuffer.indexOf(`${ESC}[`, 1);
if (nextStart > 0) {
if (debugKeystrokeLogging) {
debugLogger.debug(
'[DEBUG] Skipping incomplete/invalid CSI prefix:',
kittySequenceBuffer.slice(0, nextStart),
);
}
kittySequenceBuffer = kittySequenceBuffer.slice(nextStart);
bufferedInputHandled = true;
continue;
}
break;
}
if (parsedAny) return;
if (bufferedInputHandled) return;
if (config?.getDebugMode() || debugKeystrokeLogging) {
const codes = Array.from(kittySequenceBuffer).map((ch) =>

4
packages/cli/src/ui/contexts/UIActionsContext.tsx
View file

@ -17,6 +17,7 @@ import {
import { type SettingScope } from '../../config/settings.js';
import { type CodingPlanRegion } from '../../constants/codingPlan.js';
import type { AuthState } from '../types.js';
import { type ArenaDialogType } from '../hooks/useArenaCommand.js';
// OpenAICredentials type (previously imported from OpenAIKeyPrompt)
export interface OpenAICredentials {
apiKey: string;
@ -54,6 +55,9 @@ export interface UIActions {
exitEditorDialog: () => void;
closeSettingsDialog: () => void;
closeModelDialog: () => void;
openArenaDialog: (type: Exclude<ArenaDialogType, null>) => void;
closeArenaDialog: () => void;
handleArenaModelsSelected?: (models: string[]) => void;
dismissCodingPlanUpdate: () => void;
closePermissionsDialog: () => void;
setShellModeActive: (value: boolean) => void;

2
packages/cli/src/ui/contexts/UIStateContext.tsx
View file

@ -33,6 +33,7 @@ import type { UpdateObject } from '../utils/updateCheck.js';
import { type UseHistoryManagerReturn } from '../hooks/useHistoryManager.js';
import { type RestartReason } from '../hooks/useIdeTrustListener.js';
import { type CodingPlanUpdateRequest } from '../hooks/useCodingPlanUpdates.js';
import { type ArenaDialogType } from '../hooks/useArenaCommand.js';
export interface UIState {
history: HistoryItem[];
@ -52,6 +53,7 @@ export interface UIState {
quittingMessages: HistoryItem[] | null;
isSettingsDialogOpen: boolean;
isModelDialogOpen: boolean;
activeArenaDialog: ArenaDialogType;
isPermissionsDialogOpen: boolean;
isApprovalModeDialogOpen: boolean;
isResumeDialogOpen: boolean;

14
packages/cli/src/ui/hooks/slashCommandProcessor.ts
View file

@ -7,6 +7,7 @@
import { useCallback, useMemo, useEffect, useRef, useState } from 'react';
import { type PartListUnion } from '@google/genai';
import type { UseHistoryManagerReturn } from './useHistoryManager.js';
import type { ArenaDialogType } from './useArenaCommand.js';
import {
type Logger,
type Config,
@ -66,6 +67,7 @@ const SLASH_COMMANDS_SKIP_RECORDING = new Set([
interface SlashCommandProcessorActions {
openAuthDialog: () => void;
openArenaDialog?: (type: Exclude<ArenaDialogType, null>) => void;
openThemeDialog: () => void;
openEditorDialog: () => void;
openSettingsDialog: () => void;
@ -456,6 +458,18 @@ export const useSlashCommandProcessor = (
return { type: 'handled' };
case 'dialog':
switch (result.dialog) {
case 'arena_start':
actions.openArenaDialog?.('start');
return { type: 'handled' };
case 'arena_select':
actions.openArenaDialog?.('select');
return { type: 'handled' };
case 'arena_stop':
actions.openArenaDialog?.('stop');
return { type: 'handled' };
case 'arena_status':
actions.openArenaDialog?.('status');
return { type: 'handled' };
case 'auth':
actions.openAuthDialog();
return { type: 'handled' };

166
packages/cli/src/ui/hooks/useAgentStreamingState.ts Normal file
View file

@ -0,0 +1,166 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview Hook that subscribes to an AgentInteractive's events and
* derives streaming state, elapsed time, input-active flag, and status.
*
* Extracts the common reactivity + derived-state pattern shared by
* AgentComposer and AgentChatView so each component only deals with
* layout and interaction.
*/
import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import {
AgentStatus,
AgentEventType,
isTerminalStatus,
type AgentInteractive,
type AgentEventEmitter,
} from '@qwen-code/qwen-code-core';
import { StreamingState } from '../types.js';
import { useTimer } from './useTimer.js';
// ─── Types ──────────────────────────────────────────────────
export interface AgentStreamingInfo {
/** The agent's current lifecycle status. */
status: AgentStatus | undefined;
/** Derived streaming state for StreamingContext / LoadingIndicator. */
streamingState: StreamingState;
/** Whether the agent can accept user input right now. */
isInputActive: boolean;
/** Seconds elapsed while in Responding state (resets each cycle). */
elapsedTime: number;
/** Prompt token count from the most recent round (for context usage). */
lastPromptTokenCount: number;
}
// ─── Hook ───────────────────────────────────────────────────
/**
* Subscribe to an AgentInteractive's events and derive UI streaming state.
*
* @param interactiveAgent - The agent instance, or undefined if not yet registered.
* @param events - Which event types trigger a re-render. Defaults to
* STATUS_CHANGE, TOOL_WAITING_APPROVAL, and TOOL_RESULT — sufficient for
* composer / footer use. Callers like AgentChatView can pass a broader set
* (e.g. include TOOL_CALL, ROUND_END, TOOL_OUTPUT_UPDATE) for richer updates.
*/
export function useAgentStreamingState(
interactiveAgent: AgentInteractive | undefined,
events?: ReadonlyArray<(typeof AgentEventType)[keyof typeof AgentEventType]>,
): AgentStreamingInfo {
// ── Force-render on agent events ──
const [, setTick] = useState(0);
const tickRef = useRef(0);
const forceRender = useCallback(() => {
tickRef.current += 1;
setTick(tickRef.current);
}, []);
// ── Track last prompt token count from USAGE_METADATA events ──
const [lastPromptTokenCount, setLastPromptTokenCount] = useState(
() => interactiveAgent?.getLastPromptTokenCount() ?? 0,
);
const subscribedEvents = events ?? DEFAULT_EVENTS;
useEffect(() => {
if (!interactiveAgent) return;
const emitter: AgentEventEmitter | undefined =
interactiveAgent.getEventEmitter();
if (!emitter) return;
const handler = () => forceRender();
for (const evt of subscribedEvents) {
emitter.on(evt, handler);
}
// Dedicated listener for usage metadata — updates React state directly
// so the token count is available immediately (even if no other event
// triggers a re-render). Prefers totalTokenCount (prompt + output)
// because output becomes history for the next round, matching
// geminiChat.ts.
const usageHandler = (event: {
usage?: { totalTokenCount?: number; promptTokenCount?: number };
}) => {
const count =
event?.usage?.totalTokenCount ?? event?.usage?.promptTokenCount;
if (typeof count === 'number' && count > 0) {
setLastPromptTokenCount(count);
}
};
emitter.on(AgentEventType.USAGE_METADATA, usageHandler);
return () => {
for (const evt of subscribedEvents) {
emitter.off(evt, handler);
}
emitter.off(AgentEventType.USAGE_METADATA, usageHandler);
};
}, [interactiveAgent, forceRender, subscribedEvents]);
// ── Derived state ──
const status = interactiveAgent?.getStatus();
const pendingApprovals = interactiveAgent?.getPendingApprovals();
const hasPendingApprovals =
pendingApprovals !== undefined && pendingApprovals.size > 0;
const streamingState = useMemo(() => {
if (hasPendingApprovals) {
return StreamingState.WaitingForConfirmation;
}
if (status === AgentStatus.RUNNING || status === AgentStatus.INITIALIZING) {
return StreamingState.Responding;
}
return StreamingState.Idle;
}, [status, hasPendingApprovals]);
const isInputActive =
(streamingState === StreamingState.Idle ||
streamingState === StreamingState.Responding) &&
status !== undefined &&
!isTerminalStatus(status);
// ── Timer (resets each time we enter Responding) ──
const [timerResetKey, setTimerResetKey] = useState(0);
const prevStreamingRef = useRef(streamingState);
useEffect(() => {
if (
streamingState === StreamingState.Responding &&
prevStreamingRef.current !== StreamingState.Responding
) {
setTimerResetKey((k) => k + 1);
}
prevStreamingRef.current = streamingState;
}, [streamingState]);
const elapsedTime = useTimer(
streamingState === StreamingState.Responding,
timerResetKey,
);
return {
status,
streamingState,
isInputActive,
elapsedTime,
lastPromptTokenCount,
};
}
// ─── Defaults ───────────────────────────────────────────────
const DEFAULT_EVENTS = [
AgentEventType.STATUS_CHANGE,
AgentEventType.TOOL_WAITING_APPROVAL,
AgentEventType.TOOL_RESULT,
] as const;

37
packages/cli/src/ui/hooks/useArenaCommand.ts Normal file
View file

@ -0,0 +1,37 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
import { useCallback, useState } from 'react';
export type ArenaDialogType = 'start' | 'select' | 'stop' | 'status' | null;
interface UseArenaCommandReturn {
activeArenaDialog: ArenaDialogType;
openArenaDialog: (type: Exclude<ArenaDialogType, null>) => void;
closeArenaDialog: () => void;
}
export function useArenaCommand(): UseArenaCommandReturn {
const [activeArenaDialog, setActiveArenaDialog] =
useState<ArenaDialogType>(null);
const openArenaDialog = useCallback(
(type: Exclude<ArenaDialogType, null>) => {
setActiveArenaDialog(type);
},
[],
);
const closeArenaDialog = useCallback(() => {
setActiveArenaDialog(null);
}, []);
return {
activeArenaDialog,
openArenaDialog,
closeArenaDialog,
};
}

177
packages/cli/src/ui/hooks/useArenaInProcess.ts Normal file
View file

@ -0,0 +1,177 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview useArenaInProcess — bridges ArenaManager in-process events
* to AgentViewContext agent registration.
*
* Subscribes to `config.onArenaManagerChange()` to react immediately when
* the arena manager is set or cleared. Event listeners are attached to the
* manager's emitter as soon as it appears — the backend is resolved lazily
* inside the AGENT_START handler, which only fires after the backend is
* initialized.
*/
import { useEffect, useRef } from 'react';
import {
ArenaEventType,
ArenaSessionStatus,
DISPLAY_MODE,
type ArenaAgentStartEvent,
type ArenaManager,
type ArenaSessionCompleteEvent,
type Config,
type InProcessBackend,
} from '@qwen-code/qwen-code-core';
import type { AgentViewActions } from '../contexts/AgentViewContext.js';
import { theme } from '../semantic-colors.js';
const AGENT_COLORS = [
theme.text.accent,
theme.text.link,
theme.status.success,
theme.status.warning,
theme.text.code,
theme.status.error,
];
/**
* Bridge arena in-process events to agent tab registration/unregistration.
*
* Called by AgentViewProvider — accepts config and actions directly so the
* hook has no dependency on AgentViewContext (avoiding a circular import).
*/
export function useArenaInProcess(
config: Config | null,
actions: AgentViewActions,
): void {
const actionsRef = useRef(actions);
actionsRef.current = actions;
useEffect(() => {
if (!config) return;
let detachArenaListeners: (() => void) | null = null;
const retryTimeouts = new Set<ReturnType<typeof setTimeout>>();
/** Remove agent tabs, cancel pending retries, and detach arena events. */
const detachSession = () => {
actionsRef.current.unregisterAll();
for (const t of retryTimeouts) clearTimeout(t);
retryTimeouts.clear();
detachArenaListeners?.();
detachArenaListeners = null;
};
/** Attach to an arena manager's event emitter. The backend is resolved
* lazily — we only need it when registering agents, not at subscribe
* time. This avoids the race where setArenaManager fires before
* manager.start() initializes the backend. */
const attachSession = (manager: ArenaManager) => {
const emitter = manager.getEventEmitter();
let colorIndex = 0;
const nextColor = () => AGENT_COLORS[colorIndex++ % AGENT_COLORS.length]!;
/** Resolve the InProcessBackend, or null if not applicable. */
const getInProcessBackend = (): InProcessBackend | null => {
const backend = manager.getBackend();
if (!backend || backend.type !== DISPLAY_MODE.IN_PROCESS) return null;
return backend as InProcessBackend;
};
// Register agents that already started (events may have fired before
// the callback was attached).
const inProcessBackend = getInProcessBackend();
if (inProcessBackend) {
for (const agentState of manager.getAgentStates()) {
const interactive = inProcessBackend.getAgent(agentState.agentId);
if (interactive) {
actionsRef.current.registerAgent(
agentState.agentId,
interactive,
agentState.model.modelId,
nextColor(),
agentState.model.displayName,
);
}
}
}
// AGENT_START fires *before* backend.spawnAgent() creates the
// AgentInteractive, so getAgent() may return undefined. Retry briefly.
const MAX_RETRIES = 20;
const RETRY_MS = 50;
const onAgentStart = (event: ArenaAgentStartEvent) => {
const tryRegister = (retriesLeft: number) => {
const backend = getInProcessBackend();
if (!backend) return; // not an in-process session
const interactive = backend.getAgent(event.agentId);
if (interactive) {
actionsRef.current.registerAgent(
event.agentId,
interactive,
event.model.modelId,
nextColor(),
event.model.displayName,
);
return;
}
if (retriesLeft > 0) {
const timeout = setTimeout(() => {
retryTimeouts.delete(timeout);
tryRegister(retriesLeft - 1);
}, RETRY_MS);
retryTimeouts.add(timeout);
}
};
tryRegister(MAX_RETRIES);
};
const onSessionComplete = (event: ArenaSessionCompleteEvent) => {
// IDLE means agents finished but the session is still alive for
// follow-up interaction — keep the tab bar.
if (event.result.status === ArenaSessionStatus.IDLE) return;
detachSession();
};
const onSessionError = () => detachSession();
emitter.on(ArenaEventType.AGENT_START, onAgentStart);
emitter.on(ArenaEventType.SESSION_COMPLETE, onSessionComplete);
emitter.on(ArenaEventType.SESSION_ERROR, onSessionError);
detachArenaListeners = () => {
emitter.off(ArenaEventType.AGENT_START, onAgentStart);
emitter.off(ArenaEventType.SESSION_COMPLETE, onSessionComplete);
emitter.off(ArenaEventType.SESSION_ERROR, onSessionError);
};
};
const handleManagerChange = (manager: ArenaManager | null) => {
detachSession();
if (manager) {
attachSession(manager);
}
};
// Subscribe to future changes.
config.onArenaManagerChange(handleManagerChange);
// Handle the case where a manager already exists when we mount.
const current = config.getArenaManager();
if (current) {
attachSession(current);
}
return () => {
config.onArenaManagerChange(null);
detachSession();
};
}, [config]);
}

5
packages/cli/src/ui/hooks/useAutoAcceptIndicator.ts
View file

@ -19,6 +19,8 @@ export interface UseAutoAcceptIndicatorArgs {
addItem?: (item: HistoryItemWithoutId, timestamp: number) => void;
onApprovalModeChange?: (mode: ApprovalMode) => void;
shouldBlockTab?: () => boolean;
/** When true, the keyboard handler is disabled (e.g. agent tab is active). */
disabled?: boolean;
}
export function useAutoAcceptIndicator({
@ -26,6 +28,7 @@ export function useAutoAcceptIndicator({
addItem,
onApprovalModeChange,
shouldBlockTab,
disabled,
}: UseAutoAcceptIndicatorArgs): ApprovalMode {
const currentConfigValue = config.getApprovalMode();
const [showAutoAcceptIndicator, setShowAutoAcceptIndicator] =
@ -78,7 +81,7 @@ export function useAutoAcceptIndicator({
}
}
},
{ isActive: true },
{ isActive: !disabled },
);
return showAutoAcceptIndicator;

10
packages/cli/src/ui/hooks/useDialogClose.ts
View file

@ -7,6 +7,7 @@
import { useCallback } from 'react';
import { SettingScope } from '../../config/settings.js';
import type { AuthType, ApprovalMode } from '@qwen-code/qwen-code-core';
import type { ArenaDialogType } from './useArenaCommand.js';
// OpenAICredentials type (previously imported from OpenAIKeyPrompt)
interface OpenAICredentials {
apiKey: string;
@ -42,6 +43,10 @@ export interface DialogCloseOptions {
isSettingsDialogOpen: boolean;
closeSettingsDialog: () => void;
// Arena dialogs
activeArenaDialog: ArenaDialogType;
closeArenaDialog: () => void;
// Folder trust dialog
isFolderTrustDialogOpen: boolean;
@ -83,6 +88,11 @@ export function useDialogClose(options: DialogCloseOptions) {
return true;
}
if (options.activeArenaDialog !== null) {
options.closeArenaDialog();
return true;
}
if (options.isFolderTrustDialogOpen) {
// FolderTrustDialog doesn't expose close function, but ESC would prevent exit
// We follow the same pattern - prevent exit behavior

1
packages/cli/src/ui/hooks/useGeminiStream.test.tsx
View file

@ -203,6 +203,7 @@ describe('useGeminiStream', () => {
.fn()
.mockReturnValue(contentGeneratorConfig),
getMaxSessionTurns: vi.fn(() => 50),
getArenaAgentClient: vi.fn(() => null),
} as unknown as Config;
mockOnDebugMessage = vi.fn();
mockHandleSlashCommand = vi.fn().mockResolvedValue(false);

10
packages/cli/src/ui/hooks/useGeminiStream.ts
View file

@ -430,6 +430,12 @@ export const useGeminiStream = (
isSubmittingQueryRef.current = false;
abortControllerRef.current?.abort();
// Report cancellation to arena status reporter (if in arena mode).
// This is needed because cancellation during tool execution won't
// flow through sendMessageStream where the inline reportCancelled()
// lives — tools get cancelled and handleCompletedTools returns early.
config.getArenaAgentClient()?.reportCancelled();
// Log API cancellation
const prompt_id = config.getSessionId() + '########' + getPromptCount();
const cancellationEvent = new ApiCancelEvent(
@ -1433,6 +1439,9 @@ export const useGeminiStream = (
role: 'user',
parts: combinedParts,
});
// Report cancellation to arena (safety net — cancelOngoingRequest
config.getArenaAgentClient()?.reportCancelled();
}
const callIdsToMarkAsSubmitted = geminiTools.map(
@ -1469,6 +1478,7 @@ export const useGeminiStream = (
geminiClient,
performMemoryRefresh,
modelSwitchedFromQuotaError,
config,
],
);

2
packages/cli/src/ui/hooks/useInputHistory.ts
View file

@ -18,6 +18,7 @@ export interface UseInputHistoryReturn {
handleSubmit: (value: string) => void;
navigateUp: () => boolean;
navigateDown: () => boolean;
resetHistoryNav: () => void;
}
export function useInputHistory({
@ -107,5 +108,6 @@ export function useInputHistory({
handleSubmit,
navigateUp,
navigateDown,
resetHistoryNav,
};
}

32
packages/cli/src/ui/hooks/useSelectionList.test.ts
View file

@ -5,6 +5,7 @@
*/
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { useEffect, useState } from 'react';
import { renderHook, act } from '@testing-library/react';
import {
useSelectionList,
@ -915,6 +916,37 @@ describe('useSelectionList', () => {
expect(result.current.activeIndex).toBe(2);
});
it('should handle equivalent items regenerated on each render', () => {
const { result } = renderHook(() => {
const [tick, setTick] = useState(0);
const regeneratedItems = [
{ value: 'A', key: 'A' },
{ value: 'B', disabled: true, key: 'B' },
{ value: 'C', key: 'C' },
];
const selection = useSelectionList({
items: regeneratedItems,
onSelect: mockOnSelect,
initialIndex: 0,
});
useEffect(() => {
if (tick === 0) {
setTick(1);
}
}, [tick]);
return {
tick,
activeIndex: selection.activeIndex,
};
});
expect(result.current.tick).toBe(1);
expect(result.current.activeIndex).toBe(0);
});
});
describe('Manual Control', () => {

41
packages/cli/src/ui/hooks/useSelectionList.ts
View file

@ -133,6 +133,27 @@ const computeInitialIndex = <T>(
return targetIndex;
};
const areItemsStructurallyEqual = <T>(
a: Array<SelectionListItem<T>>,
b: Array<SelectionListItem<T>>,
): boolean => {
if (a === b) {
return true;
}
if (a.length !== b.length) {
return false;
}
for (let i = 0; i < a.length; i++) {
if (a[i]?.key !== b[i]?.key || a[i]?.disabled !== b[i]?.disabled) {
return false;
}
}
return true;
};
function selectionListReducer<T>(
state: SelectionListState<T>,
action: SelectionListAction<T>,
@ -176,22 +197,30 @@ function selectionListReducer<T>(
case 'INITIALIZE': {
const { initialIndex, items } = action.payload;
const initialIndexChanged = initialIndex !== state.initialIndex;
const activeKey =
initialIndex === state.initialIndex &&
state.activeIndex !== state.initialIndex
!initialIndexChanged && state.activeIndex !== state.initialIndex
? state.items[state.activeIndex]?.key
: undefined;
const targetIndex = computeInitialIndex(initialIndex, items, activeKey);
const itemsStructurallyEqual = areItemsStructurallyEqual(
items,
state.items,
);
if (items === state.items && initialIndex === state.initialIndex) {
if (
!initialIndexChanged &&
targetIndex === state.activeIndex &&
itemsStructurallyEqual
) {
return state;
}
const targetIndex = computeInitialIndex(initialIndex, items, activeKey);
return {
...state,
items,
items: itemsStructurallyEqual ? state.items : items,
activeIndex: targetIndex,
initialIndex,
pendingHighlight: false,
};
}

69
packages/cli/src/ui/layouts/DefaultAppLayout.tsx
View file

@ -5,36 +5,77 @@
*/
import type React from 'react';
import { useEffect, useRef } from 'react';
import { Box } from 'ink';
import { MainContent } from '../components/MainContent.js';
import { DialogManager } from '../components/DialogManager.js';
import { Composer } from '../components/Composer.js';
import { ExitWarning } from '../components/ExitWarning.js';
import { AgentTabBar } from '../components/agent-view/AgentTabBar.js';
import { AgentChatView } from '../components/agent-view/AgentChatView.js';
import { AgentComposer } from '../components/agent-view/AgentComposer.js';
import { useUIState } from '../contexts/UIStateContext.js';
import { useUIActions } from '../contexts/UIActionsContext.js';
import { useAgentViewState } from '../contexts/AgentViewContext.js';
import { useTerminalSize } from '../hooks/useTerminalSize.js';
export const DefaultAppLayout: React.FC = () => {
const uiState = useUIState();
const { refreshStatic } = useUIActions();
const { activeView, agents } = useAgentViewState();
const { columns: terminalWidth } = useTerminalSize();
const hasAgents = agents.size > 0;
const isAgentTab = activeView !== 'main' && agents.has(activeView);
// Clear terminal on view switch so previous view's <Static> output
// is removed. refreshStatic clears the terminal and bumps the
// historyRemountKey so MainContent's <Static> re-renders all items
// when switching back.
const prevViewRef = useRef(activeView);
useEffect(() => {
if (prevViewRef.current !== activeView) {
prevViewRef.current = activeView;
refreshStatic();
}
}, [activeView, refreshStatic]);
return (
<Box flexDirection="column" width={terminalWidth}>
<MainContent />
<Box flexDirection="column" ref={uiState.mainControlsRef}>
{uiState.dialogsVisible ? (
<Box marginX={2} flexDirection="column" width={uiState.mainAreaWidth}>
<DialogManager
terminalWidth={uiState.terminalWidth}
addItem={uiState.historyManager.addItem}
/>
{isAgentTab ? (
<>
{/* Agent view: chat history + agent-specific composer */}
<AgentChatView agentId={activeView} />
<Box flexDirection="column" ref={uiState.mainControlsRef}>
<AgentComposer key={activeView} agentId={activeView} />
<ExitWarning />
</Box>
) : (
<Composer />
)}
</>
) : (
<>
{/* Main view: conversation history + main composer / dialogs */}
<MainContent />
<Box flexDirection="column" ref={uiState.mainControlsRef}>
{uiState.dialogsVisible ? (
<Box
marginX={2}
flexDirection="column"
width={uiState.mainAreaWidth}
>
<DialogManager
terminalWidth={uiState.terminalWidth}
addItem={uiState.historyManager.addItem}
/>
</Box>
) : (
<Composer />
)}
<ExitWarning />
</Box>
</>
)}
<ExitWarning />
</Box>
{/* Tab bar: visible whenever in-process agents exist and input is active */}
{hasAgents && !uiState.dialogsVisible && <AgentTabBar />}
</Box>
);
};

46
packages/cli/src/ui/types.ts
View file

@ -11,6 +11,7 @@ import type {
ToolCallConfirmationDetails,
ToolConfirmationOutcome,
ToolResultDisplay,
AgentStatus,
} from '@qwen-code/qwen-code-core';
import type { PartListUnion } from '@google/genai';
import { type ReactNode } from 'react';
@ -128,6 +129,11 @@ export type HistoryItemWarning = HistoryItemBase & {
text: string;
};
export type HistoryItemSuccess = HistoryItemBase & {
type: 'success';
text: string;
};
export type HistoryItemRetryCountdown = HistoryItemBase & {
type: 'retry_countdown';
text: string;
@ -256,6 +262,40 @@ export type HistoryItemMcpStatus = HistoryItemBase & {
showTips: boolean;
};
/**
* Arena agent completion card data.
*/
export interface ArenaAgentCardData {
label: string;
status: AgentStatus;
durationMs: number;
totalTokens: number;
inputTokens: number;
outputTokens: number;
toolCalls: number;
successfulToolCalls: number;
failedToolCalls: number;
rounds: number;
error?: string;
diff?: string;
}
export type HistoryItemArenaAgentComplete = HistoryItemBase & {
type: 'arena_agent_complete';
agent: ArenaAgentCardData;
};
export type HistoryItemArenaSessionComplete = HistoryItemBase & {
type: 'arena_session_complete';
sessionStatus: string;
task: string;
totalDurationMs: number;
agents: ArenaAgentCardData[];
};
/**
* Insight progress message.
*/
export type HistoryItemInsightProgress = HistoryItemBase & {
type: 'insight_progress';
progress: InsightProgressProps;
@ -275,6 +315,7 @@ export type HistoryItemWithoutId =
| HistoryItemInfo
| HistoryItemError
| HistoryItemWarning
| HistoryItemSuccess
| HistoryItemRetryCountdown
| HistoryItemAbout
| HistoryItemHelp
@ -290,6 +331,8 @@ export type HistoryItemWithoutId =
| HistoryItemToolsList
| HistoryItemSkillsList
| HistoryItemMcpStatus
| HistoryItemArenaAgentComplete
| HistoryItemArenaSessionComplete
| HistoryItemInsightProgress;
export type HistoryItem = HistoryItemWithoutId & { id: number };
@ -297,6 +340,7 @@ export type HistoryItem = HistoryItemWithoutId & { id: number };
// Message types used by internal command feedback (subset of HistoryItem types)
export enum MessageType {
INFO = 'info',
SUCCESS = 'success',
ERROR = 'error',
WARNING = 'warning',
USER = 'user',
@ -313,6 +357,8 @@ export enum MessageType {
TOOLS_LIST = 'tools_list',
SKILLS_LIST = 'skills_list',
MCP_STATUS = 'mcp_status',
ARENA_AGENT_COMPLETE = 'arena_agent_complete',
ARENA_SESSION_COMPLETE = 'arena_session_complete',
INSIGHT_PROGRESS = 'insight_progress',
}

2
packages/cli/src/ui/utils/InlineMarkdownRenderer.tsx
View file

@ -103,7 +103,7 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({
const codeMatch = fullMatch.match(/^(`+)(.+?)\1$/s);
if (codeMatch && codeMatch[2]) {
renderedNode = (
<Text key={key} color={theme.text.accent}>
<Text key={key} color={theme.text.code}>
{codeMatch[2]}
</Text>
);

28
packages/cli/src/ui/utils/displayUtils.ts
View file

@ -5,6 +5,34 @@
*/
import { theme } from '../semantic-colors.js';
import { AgentStatus } from '@qwen-code/qwen-code-core';
// --- Status Labels ---
export interface StatusLabel {
icon: string;
text: string;
color: string;
}
export function getArenaStatusLabel(status: AgentStatus): StatusLabel {
switch (status) {
case AgentStatus.IDLE:
return { icon: '✓', text: 'Idle', color: theme.status.success };
case AgentStatus.COMPLETED:
return { icon: '✓', text: 'Done', color: theme.status.success };
case AgentStatus.CANCELLED:
return { icon: '⊘', text: 'Cancelled', color: theme.status.warning };
case AgentStatus.FAILED:
return { icon: '✗', text: 'Failed', color: theme.status.error };
case AgentStatus.RUNNING:
return { icon: '○', text: 'Running', color: theme.text.secondary };
case AgentStatus.INITIALIZING:
return { icon: '○', text: 'Initializing', color: theme.text.secondary };
default:
return { icon: '○', text: status, color: theme.text.secondary };
}
}
// --- Thresholds ---
export const TOOL_SUCCESS_RATE_HIGH = 95;

40
packages/cli/src/ui/utils/layoutUtils.ts Normal file
View file

@ -0,0 +1,40 @@
/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview Shared layout calculation utilities for the terminal UI.
*/
/**
* Calculate the widths for the input prompt area based on terminal width.
*
* Returns the content width (for the text buffer), the total container width
* (including border + padding + prefix), the suggestions dropdown width,
* and the frame overhead constant.
*/
export const calculatePromptWidths = (terminalWidth: number) => {
const widthFraction = 0.9;
const FRAME_PADDING_AND_BORDER = 4; // Border (2) + padding (2)
const PROMPT_PREFIX_WIDTH = 2; // '> ' or '! '
const MIN_CONTENT_WIDTH = 2;
const innerContentWidth =
Math.floor(terminalWidth * widthFraction) -
FRAME_PADDING_AND_BORDER -
PROMPT_PREFIX_WIDTH;
const inputWidth = Math.max(MIN_CONTENT_WIDTH, innerContentWidth);
const FRAME_OVERHEAD = FRAME_PADDING_AND_BORDER + PROMPT_PREFIX_WIDTH;
const containerWidth = inputWidth + FRAME_OVERHEAD;
const suggestionsWidth = Math.max(20, Math.floor(terminalWidth * 1.0));
return {
inputWidth,
containerWidth,
suggestionsWidth,
frameOverhead: FRAME_OVERHEAD,
} as const;
};