illusion-code 0.1.0__py3-none-any.whl

illusion/_frontend/src/components/StatusBar.tsx

@@ -0,0 +1,142 @@
+import React, {useEffect, useState} from 'react';
+import {Box, Text} from 'ink';
+
+import {useTheme} from '../theme/ThemeContext.js';
+import type {TaskSnapshot} from '../types.js';
+
+const SEP = ' · ';
+
+function AutoModeIndicator(): React.JSX.Element {
+	const theme = useTheme();
+	return (
+		<Box marginLeft={1}>
+			<Text backgroundColor={theme.colors.illusion} color={theme.colors.background} bold>
+				{' AUTO '}
+			</Text>
+		</Box>
+	);
+}
+
+function TokenDisplay({
+	inputTokens,
+	outputTokens,
+	color,
+}: {
+	inputTokens: number;
+	outputTokens: number;
+	color: string;
+}): React.JSX.Element {
+	return (
+		<Text color={color}>
+			<Text dimColor>{formatNum(inputTokens)}</Text>
+			<Text dimColor>↓</Text>
+			<Text> </Text>
+			<Text dimColor>{formatNum(outputTokens)}</Text>
+			<Text dimColor>↑</Text>
+		</Text>
+	);
+}
+
+function TaskIndicator({count}: {count: number}): React.JSX.Element {
+	const theme = useTheme();
+	return (
+		<Box>
+			<Text color={theme.colors.illusion}>{theme.icons.inProgress}</Text>
+			<Text color={theme.colors.illusion}> {count} task{count !== 1 ? 's' : ''}</Text>
+		</Box>
+	);
+}
+
+function McpIndicator({count}: {count: number}): React.JSX.Element {
+	const theme = useTheme();
+	return (
+		<Box>
+			<Text color={theme.colors.illusion}> · {count} MCP</Text>
+		</Box>
+	);
+}
+
+function AgentIndicator({count}: {count: number}): React.JSX.Element {
+	const theme = useTheme();
+	const [visible, setVisible] = useState(true);
+
+	useEffect(() => {
+		const interval = setInterval(() => setVisible(v => !v), 500);
+		return () => clearInterval(interval);
+	}, []);
+
+	if (!visible) {
+		return <Box><Text> </Text></Box>;
+	}
+
+	return (
+		<Box>
+			<Text color={theme.colors.illusion}> · {count} agent{count !== 1 ? 's' : ''}</Text>
+		</Box>
+	);
+}
+
+export function StatusBar({
+	status,
+	tasks,
+}: {
+	status: Record<string, unknown>;
+	tasks: TaskSnapshot[];
+}): React.JSX.Element {
+	const theme = useTheme();
+	const model = String(status.model ?? 'unknown');
+	const mode = String(status.permission_mode ?? 'default');
+	const taskCount = tasks.filter(
+		(task) => task.status === 'pending' || task.status === 'in_progress'
+	).length;
+	const mcpCount = Number(status.mcp_connected ?? 0);
+	const agentCount = Number(status.agent_count ?? 0);
+	const inputTokens = Number(status.input_tokens ?? 0);
+	const outputTokens = Number(status.output_tokens ?? 0);
+	const isAutoMode = mode === 'full_auto' || mode === 'auto';
+
+	return (
+		<Box flexDirection="column" marginTop={1}>
+			<Box flexDirection="row">
+				<Text color={theme.colors.text}>{'─'.repeat(60)}</Text>
+			</Box>
+			<Box flexDirection="row" alignItems="center">
+				<Text color={theme.colors.illusion}>{model}</Text>
+				{(inputTokens > 0 || outputTokens > 0) ? (
+					<>
+						<Text color={theme.colors.illusion}>{SEP}</Text>
+						<TokenDisplay inputTokens={inputTokens} outputTokens={outputTokens} color={theme.colors.illusion} />
+					</>
+				) : null}
+				{mode !== 'default' ? (
+					<>
+						<Text color={theme.colors.illusion}>{SEP}</Text>
+						<Text color={theme.colors.illusion}>{mode}</Text>
+					</>
+				) : null}
+				{taskCount > 0 ? (
+					<>
+						<Text color={theme.colors.illusion}>{SEP}</Text>
+						<TaskIndicator count={taskCount} />
+					</>
+				) : null}
+				{mcpCount > 0 ? (
+					<McpIndicator count={mcpCount} />
+				) : null}
+				{agentCount > 0 ? <AgentIndicator count={agentCount} /> : null}
+				<Box flexGrow={1} />
+				{isAutoMode ? <AutoModeIndicator /> : null}
+			</Box>
+		</Box>
+	);
+}
+
+function formatNum(n: number): string {
+	if (n >= 1000000) {
+		return `${(n / 1000000).toFixed(1)}M`;
+	}
+	if (n >= 1000) {
+		return `${(n / 1000).toFixed(1)}k`;
+	}
+	return String(n);
+}

illusion/_frontend/src/components/SwarmPanel.tsx

@@ -0,0 +1,141 @@
+import React, {useState} from 'react';
+import {Box, Text, useInput} from 'ink';
+
+import type {ThemeConfig} from '../theme/ThemeContext.js';
+import {useTheme} from '../theme/ThemeContext.js';
+export type SwarmTeammate = {
+	name: string;
+	status: 'running' | 'idle' | 'done' | 'error';
+	duration?: number; // seconds
+	task?: string;
+};
+
+export type SwarmNotification = {
+	from: string;
+	message: string;
+	timestamp: number;
+};
+
+function statusIcon(status: SwarmTeammate['status'], theme: ThemeConfig): string {
+	switch (status) {
+		case 'running':
+			return theme.icons.inProgress;
+		case 'idle':
+			return theme.icons.pending;
+		case 'done':
+			return theme.icons.completed;
+		case 'error':
+			return theme.icons.error;
+	}
+}
+
+function statusColor(status: SwarmTeammate['status']): string {
+	switch (status) {
+		case 'running':
+			return 'green';
+		case 'idle':
+			return 'yellow';
+		case 'done':
+			return 'cyan';
+		case 'error':
+			return 'red';
+	}
+}
+
+function formatDuration(seconds: number): string {
+	if (seconds < 60) {
+		return `${seconds}s`;
+	}
+	const m = Math.floor(seconds / 60);
+	const s = seconds % 60;
+	return `${m}m${s}s`;
+}
+
+export function SwarmPanel({
+	teammates,
+	notifications,
+	collapsed: initialCollapsed = false,
+}: {
+	teammates: SwarmTeammate[];
+	notifications: SwarmNotification[];
+	collapsed?: boolean;
+}): React.JSX.Element | null {
+	const theme = useTheme();
+	const [collapsed, setCollapsed] = useState(initialCollapsed);
+
+	useInput((chunk, key) => {
+		if (key.ctrl && chunk === 'w') {
+			setCollapsed((c) => !c);
+		}
+	});
+
+	if (teammates.length === 0 && notifications.length === 0) {
+		return null;
+	}
+
+	const activeCount = teammates.filter((t) => t.status === 'running').length;
+
+	if (collapsed) {
+		return (
+			<Box>
+				<Text color={theme.colors.accent} bold>
+					{theme.icons.inProgress}{' '}
+				</Text>
+				<Text dimColor>
+					Swarm: {teammates.length} agents ({activeCount} active)
+				</Text>
+				<Text dimColor> [ctrl+w to expand]</Text>
+			</Box>
+		);
+	}
+
+	return (
+		<Box flexDirection="column" borderStyle="round" borderColor={theme.colors.accent} paddingX={1} marginTop={1}>
+			<Box>
+				<Text color={theme.colors.accent} bold>
+					{theme.icons.inProgress}{' '}
+				</Text>
+				<Text bold>Swarm</Text>
+				<Text dimColor>
+					{' '}
+					({activeCount}/{teammates.length} active) [ctrl+w to collapse]
+				</Text>
+			</Box>
+
+			{teammates.length > 0 && (
+				<Box flexDirection="column" marginTop={1}>
+					{teammates.map((teammate) => (
+						<Box key={teammate.name} flexDirection="row" marginBottom={0}>
+							<Text color={statusColor(teammate.status)}>{statusIcon(teammate.status, theme)} </Text>
+							<Box flexDirection="column">
+								<Box>
+									<Text bold color={statusColor(teammate.status)}>
+										{teammate.name}
+									</Text>
+									{teammate.duration !== undefined && (
+										<Text dimColor> ({formatDuration(teammate.duration)})</Text>
+									)}
+								</Box>
+								{teammate.task && (
+									<Text dimColor>   {teammate.task.slice(0, 60)}{teammate.task.length > 60 ? '…' : ''}</Text>
+								)}
+							</Box>
+						</Box>
+					))}
+				</Box>
+			)}
+
+			{notifications.length > 0 && (
+				<Box flexDirection="column" marginTop={1}>
+					<Text dimColor bold>Recent notifications:</Text>
+					{notifications.slice(-3).map((n, i) => (
+						<Box key={i}>
+							<Text dimColor>[{n.from}] </Text>
+							<Text>{n.message.slice(0, 70)}{n.message.length > 70 ? '…' : ''}</Text>
+						</Box>
+					))}
+				</Box>
+			)}
+		</Box>
+	);
+}

illusion/_frontend/src/components/TodoPanel.tsx

@@ -0,0 +1,126 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {Box, Text} from 'ink';
+
+import type {ThemeConfig} from '../theme/ThemeContext.js';
+import {useTheme} from '../theme/ThemeContext.js';
+import type {TodoItemSnapshot} from '../types.js';
+
+/** 所有任务完成后自动隐藏的延迟时间（毫秒） */
+const HIDE_DELAY_MS = 5000;
+
+/** 最近完成任务的高亮时间（毫秒） */
+const RECENT_COMPLETED_TTL_MS = 30_000;
+
+export function TodoPanel({items}: {items: TodoItemSnapshot[]}): React.JSX.Element {
+	const theme = useTheme();
+	const [hidden, setHidden] = useState(false);
+	const hideTimerRef = useRef<NodeJS.Timeout | null>(null);
+	const completionTimeRef = useRef<Record<string, number>>({});
+
+	if (items.length === 0 || hidden) {
+		return <></>;
+	}
+
+	const completed = items.filter((t) => t.status === 'completed').length;
+	const inProgress = items.filter((t) => t.status === 'in_progress').length;
+	const pending = items.filter((t) => t.status === 'pending').length;
+	const allDone = completed === items.length && items.length > 0;
+
+	// 跟踪任务完成时间
+	const now = Date.now();
+	for (const item of items) {
+		if (item.status === 'completed' && !(item.content in completionTimeRef.current)) {
+			completionTimeRef.current[item.content] = now;
+		}
+	}
+
+	// 所有任务完成后延迟隐藏
+	useEffect(() => {
+		if (allDone) {
+			if (hideTimerRef.current === null) {
+				hideTimerRef.current = setTimeout(() => {
+					setHidden(true);
+					hideTimerRef.current = null;
+				}, HIDE_DELAY_MS);
+			}
+		} else {
+			setHidden(false);
+			if (hideTimerRef.current !== null) {
+				clearTimeout(hideTimerRef.current);
+				hideTimerRef.current = null;
+			}
+		}
+		return () => {
+			if (hideTimerRef.current !== null) {
+				clearTimeout(hideTimerRef.current);
+				hideTimerRef.current = null;
+			}
+		};
+	}, [allDone]);
+
+	// 排序：最近完成 > in_progress > pending > 较早完成
+	const sorted = [...items].sort((a, b) => {
+		const aRecent = a.status === 'completed' && (now - (completionTimeRef.current[a.content] ?? 0)) < RECENT_COMPLETED_TTL_MS;
+		const bRecent = b.status === 'completed' && (now - (completionTimeRef.current[b.content] ?? 0)) < RECENT_COMPLETED_TTL_MS;
+		const order = (item: TodoItemSnapshot, isRecent: boolean): number => {
+			if (item.status === 'in_progress') return 0;
+			if (isRecent) return 1;
+			if (item.status === 'pending') return 2;
+			return 3;
+		};
+		return order(a, aRecent) - order(b, bRecent);
+	});
+
+	return (
+		<Box flexDirection="column" marginTop={1}>
+			<Box marginBottom={0}>
+				<Text color={theme.colors.illusion} bold>{theme.icons.pointer} </Text>
+				<Text bold>Todos</Text>
+				<Text dimColor>{` ${completed}/${items.length} done`}</Text>
+				{inProgress > 0 ? <Text color={theme.colors.info}>{` ${theme.icons.middleDot} ${inProgress} active`}</Text> : null}
+				{pending > 0 ? <Text dimColor>{` ${theme.icons.middleDot} ${pending} open`}</Text> : null}
+			</Box>
+			{sorted.map((item, i) => (
+				<TodoRow key={i} item={item} theme={theme} now={now} completionTimes={completionTimeRef.current} />
+			))}
+		</Box>
+	);
+}
+
+function TodoRow({item, theme, now, completionTimes}: {item: TodoItemSnapshot; theme: ThemeConfig; now: number; completionTimes: Record<string, number>}): React.JSX.Element {
+	let icon: string;
+	let color: string;
+
+	switch (item.status) {
+		case 'completed':
+			icon = theme.icons.check;
+			color = theme.colors.success;
+			break;
+		case 'in_progress':
+			icon = theme.icons.inProgress;
+			color = theme.colors.illusion;
+			break;
+		default:
+			icon = theme.icons.pending;
+			color = theme.colors.muted;
+			break;
+	}
+
+	const isCompleted = item.status === 'completed';
+	// 最近完成的任务不高亮（不dim）
+	const isRecentCompleted = isCompleted && (now - (completionTimes[item.content] ?? 0)) < RECENT_COMPLETED_TTL_MS;
+
+	return (
+		<Box>
+			<Text color={color}>{icon} </Text>
+			<Text
+				color={isCompleted && !isRecentCompleted ? theme.colors.muted : undefined}
+				dimColor={isCompleted && !isRecentCompleted}
+				strikethrough={isCompleted}
+				bold={item.status === 'in_progress'}
+			>
+				{item.content}
+			</Text>
+		</Box>
+	);
+}

illusion/_frontend/src/components/ToolCallDisplay.tsx

@@ -0,0 +1,202 @@
+import React from 'react';
+import {Box, Text} from 'ink';
+
+import type {UiLanguage} from '../i18n.js';
+import type {ThemeConfig} from '../theme/ThemeContext.js';
+import {useTheme} from '../theme/ThemeContext.js';
+import type {TranscriptItem} from '../types.js';
+import {useTerminalSize} from '../hooks/useTerminalSize.js';
+import {stringWidth} from '../utils/markdown.js';
+
+const MAX_OUTPUT_LINES = 8;
+const MAX_COMMAND_LINES = 2;
+const MAX_COMMAND_CHARS = 160;
+
+export function ToolCallDisplay({item, language}: {item: TranscriptItem; language: UiLanguage}): React.JSX.Element {
+	const theme = useTheme();
+
+	if (item.role === 'tool') {
+		return <ToolUseMessage item={item} theme={theme} />;
+	}
+
+	if (item.role === 'tool_result') {
+		return <ToolResultMessage item={item} theme={theme} />;
+	}
+
+	return <Text>{item.text}</Text>;
+}
+
+function ToolUseMessage({
+	item,
+	theme,
+}: {
+	item: TranscriptItem;
+	theme: ThemeConfig;
+}): React.JSX.Element {
+	const toolName = item.tool_name ?? 'tool';
+	const summary = summarizeInput(toolName, item.tool_input, item.text);
+
+	return (
+		<Box>
+			<Text color={theme.colors.info}>{theme.icons.tool} </Text>
+			<Text color={theme.colors.info} bold>{toolName}</Text>
+			{summary ? (
+				<>
+					<Text dimColor>{' ('}</Text>
+					<Text dimColor>{summary}</Text>
+					<Text dimColor>{')'}</Text>
+				</>
+			) : null}
+		</Box>
+	);
+}
+
+function ToolResultMessage({
+	item,
+	theme,
+}: {
+	item: TranscriptItem;
+	theme: ThemeConfig;
+}): React.JSX.Element {
+	const {columns: terminalWidth} = useTerminalSize();
+	const lines = item.text.split('\n');
+	const truncated = lines.length > MAX_OUTPUT_LINES;
+	const display = truncated
+		? [...lines.slice(0, MAX_OUTPUT_LINES), `… +${lines.length - MAX_OUTPUT_LINES} lines`]
+		: lines;
+
+	const isError = item.is_error;
+	const icon = isError ? theme.icons.cross : theme.icons.check;
+	const iconColor = isError ? theme.colors.error : theme.colors.success;
+	// 可用宽度 = 终端宽度 - 前缀(2空格+图标) - 图标 - 安全边距
+	const prefixWidth = stringWidth(`  ${theme.icons.resultPrefix} `) + stringWidth(`${icon} `);
+	const availableWidth = Math.max(20, terminalWidth - prefixWidth - 2);
+
+	return (
+		<Box flexDirection="column">
+			{display.map((line, i) => (
+				<Box key={i}>
+					<Text dimColor>{i === 0 ? `  ${theme.icons.resultPrefix} ` : '    '}</Text>
+					{i === 0 ? (
+						<Text color={iconColor}>{icon} </Text>
+					) : null}
+					{i !== 0 ? <Text>{' '}</Text> : null}
+					<Text color={isError ? theme.colors.error : undefined} dimColor={!isError}>
+						{truncateToDisplayWidth(line, availableWidth)}
+					</Text>
+				</Box>
+			))}
+		</Box>
+	);
+}
+
+function summarizeInput(toolName: string, toolInput?: Record<string, unknown>, fallback?: string): string {
+	if (!toolInput) {
+		return truncateCommand(fallback ?? '');
+	}
+
+	const lower = toolName.toLowerCase();
+
+	if ((lower === 'bash' || lower === 'powershell') && toolInput.command) {
+		return truncateCommand(String(toolInput.command));
+	}
+	if ((lower === 'read' || lower === 'fileread' || lower === 'read_file') && (toolInput.path || toolInput.file_path)) {
+		return String(toolInput.path ?? toolInput.file_path);
+	}
+	if ((lower === 'write' || lower === 'filewrite' || lower === 'write_file') && (toolInput.path || toolInput.file_path)) {
+		return String(toolInput.path ?? toolInput.file_path);
+	}
+	if ((lower === 'edit' || lower === 'fileedit' || lower === 'edit_file') && (toolInput.path || toolInput.file_path)) {
+		return String(toolInput.path ?? toolInput.file_path);
+	}
+	if (lower === 'grep' && toolInput.pattern) {
+		return `/${String(toolInput.pattern)}/`;
+	}
+	if (lower === 'glob' && toolInput.pattern) {
+		return String(toolInput.pattern);
+	}
+	if (lower === 'agent' && toolInput.description) {
+		return truncateCommand(String(toolInput.description));
+	}
+	if (lower === 'todowrite' || lower === 'todo_write') {
+		const todos = toolInput.todos;
+		if (Array.isArray(todos)) {
+			const total = todos.length;
+			const completed = todos.filter((t: {status: string}) => t.status === 'completed').length;
+			return `${completed}/${total} tasks`;
+		}
+	}
+	if (lower === 'ask_user_question') {
+		const questions = toolInput.questions;
+		if (Array.isArray(questions) && questions.length > 0) {
+			const q = questions[0] as Record<string, unknown>;
+			return truncateCommand(String(q.question ?? ''));
+		}
+	}
+
+	const entries = Object.entries(toolInput);
+	if (entries.length > 0) {
+		const [key, val] = entries[0];
+		return truncateCommand(`${key}=${String(val)}`);
+	}
+
+	return truncateCommand(fallback ?? '');
+}
+
+// 参考 claude-code 的截断策略：先按行截断，再按字符截断
+function truncateCommand(str: string): string {
+	// 1. 按行分割
+	const lines = str.split('\n');
+
+	// 2. 移除每行首尾空格，过滤空行
+	const cleanedLines = lines.map(l => l.trim()).filter(l => l.length > 0);
+
+	// 3. 按行截断（最多 MAX_COMMAND_LINES 行）
+	const truncatedLines = cleanedLines.length > MAX_COMMAND_LINES
+		? [...cleanedLines.slice(0, MAX_COMMAND_LINES)]
+		: cleanedLines;
+
+	// 4. 合并为单行
+	let result = truncatedLines.join(' ');
+
+	// 5. 按字符截断
+	const needsCharTruncation = result.length > MAX_COMMAND_CHARS || cleanedLines.length > MAX_COMMAND_LINES;
+	if (needsCharTruncation && result.length > MAX_COMMAND_CHARS) {
+		result = result.slice(0, MAX_COMMAND_CHARS);
+		// 优先在分号处截断（命令分隔符）
+		const lastSemicolon = result.lastIndexOf(';');
+		if (lastSemicolon > MAX_COMMAND_CHARS * 0.3) {
+			result = result.slice(0, lastSemicolon + 1);
+		} else {
+			// 其次在空格处截断
+			const lastSpace = result.lastIndexOf(' ');
+			if (lastSpace > MAX_COMMAND_CHARS * 0.5) {
+				result = result.slice(0, lastSpace);
+			}
+		}
+	}
+
+	// 6. 添加省略号
+	if (needsCharTruncation) {
+		result += '…';
+	}
+
+	return result;
+}
+
+function truncateToDisplayWidth(text: string, maxWidth: number): string {
+	if (stringWidth(text) <= maxWidth) {
+		return text;
+	}
+	let result = '';
+	let width = 0;
+	for (const ch of text) {
+		const charWidth = stringWidth(ch);
+		if (width + charWidth > Math.max(1, maxWidth - 1)) {
+			break;
+		}
+		result += ch;
+		width += charWidth;
+	}
+	return result + '…';
+}

illusion/_frontend/src/components/TranscriptPane.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import {Box, Text} from 'ink';
+
+import type {ThemeConfig} from '../theme/ThemeContext.js';
+import {useTheme} from '../theme/ThemeContext.js';
+import type {TranscriptItem} from '../types.js';
+
+const MAX_VISIBLE_ITEMS = 30;
+
+export function TranscriptPane({
+	items,
+	assistantBuffer,
+}: {
+	items: TranscriptItem[];
+	assistantBuffer: string;
+}): React.JSX.Element {
+	const theme = useTheme();
+	const visible = items.slice(-MAX_VISIBLE_ITEMS);
+
+	return (
+		<Box flexDirection="column" width="68%" paddingRight={1}>
+			<Box marginBottom={1}>
+				<Text color={theme.colors.primary} bold>{theme.icons.chevron} Transcript</Text>
+			</Box>
+			<Box flexDirection="column" borderStyle="round" borderColor={theme.colors.muted} paddingX={1} minHeight={24}>
+				{visible.map((item, index) => (
+					<Box key={`${index}-${item.role}`} flexDirection="row">
+						<Text color={roleColor(item.role, theme)} bold>
+							{labelFor(item.role, theme)}{' '}
+						</Text>
+						<Text color={roleColor(item.role, theme)}>{item.text}</Text>
+					</Box>
+				))}
+				{assistantBuffer ? (
+					<Box flexDirection="row">
+						<Text color={theme.colors.success} bold>{theme.icons.assistant} </Text>
+						<Text color={theme.colors.success}>{assistantBuffer}</Text>
+					</Box>
+				) : null}
+			</Box>
+		</Box>
+	);
+}
+
+function labelFor(role: TranscriptItem['role'], theme: ThemeConfig): string {
+	switch (role) {
+		case 'user':
+			return theme.icons.user;
+		case 'assistant':
+			return theme.icons.assistant;
+		case 'tool':
+			return theme.icons.tool;
+		case 'tool_result':
+			return theme.icons.check;
+		case 'system':
+			return theme.icons.system;
+		case 'log':
+			return theme.icons.bullet;
+		default:
+			return theme.icons.dot;
+	}
+}
+
+function roleColor(role: TranscriptItem['role'], theme: ThemeConfig): string {
+	switch (role) {
+		case 'assistant':
+			return theme.colors.success;
+		case 'tool':
+			return theme.colors.accent;
+		case 'tool_result':
+			return theme.colors.warning;
+		case 'system':
+			return theme.colors.info;
+		case 'log':
+			return theme.colors.muted;
+		default:
+			return theme.colors.text;
+	}
+}