illusion-code 0.1.0__py3-none-any.whl

illusion/_frontend/src/components/MultilineTextInput.tsx

@@ -0,0 +1,250 @@
+import React, {useState, useEffect, useCallback} from 'react';
+import {Text, useInput} from 'ink';
+import chalk from 'chalk';
+
+interface TextPosition {
+	line: number;
+	column: number;
+}
+
+interface CursorState {
+	cursorOffset: number;
+	desiredColumn: number | null;
+}
+
+/**
+ * 将字符偏移量转换为行列位置
+ */
+function offsetToPosition(text: string, offset: number): TextPosition {
+	let line = 0;
+	let column = 0;
+	for (let i = 0; i < offset && i < text.length; i++) {
+		if (text[i] === '\n') {
+			line++;
+			column = 0;
+		} else {
+			column++;
+		}
+	}
+	return {line, column};
+}
+
+/**
+ * 获取指定行的起始偏移量和行内容
+ */
+function getLineInfo(text: string, lineNumber: number): {startOffset: number; content: string} {
+	const lines = text.split('\n');
+	let offset = 0;
+	for (let i = 0; i < lineNumber && i < lines.length; i++) {
+		offset += lines[i].length + 1; // +1 for \n
+	}
+	return {
+		startOffset: offset,
+		content: lines[lineNumber] ?? '',
+	};
+}
+
+/**
+ * 获取文本总行数
+ */
+function getLineCount(text: string): number {
+	if (text.length === 0) return 1;
+	return text.split('\n').length;
+}
+
+export default function MultilineTextInput({
+	value: originalValue,
+	placeholder = '',
+	focus = true,
+	showCursor = true,
+	onChange,
+	onSubmit,
+}: {
+	value: string;
+	placeholder?: string;
+	focus?: boolean;
+	showCursor?: boolean;
+	onChange: (value: string) => void;
+	onSubmit?: (value: string) => void;
+}): React.JSX.Element {
+	const [state, setState] = useState<CursorState>({
+		cursorOffset: (originalValue || '').length,
+		desiredColumn: null,
+	});
+
+	// 外部 value 变化时，钳位光标位置
+	useEffect(() => {
+		setState(prev => {
+			if (!focus || !showCursor) return prev;
+			const maxOffset = (originalValue || '').length;
+			if (prev.cursorOffset > maxOffset) {
+				return {cursorOffset: maxOffset, desiredColumn: null};
+			}
+			return prev;
+		});
+	}, [originalValue, focus, showCursor]);
+
+	const {cursorOffset, desiredColumn} = state;
+
+	const handleKeyDown = useCallback((input: string, key: {
+		upArrow?: boolean;
+		downArrow?: boolean;
+		leftArrow?: boolean;
+		rightArrow?: boolean;
+		return?: boolean;
+		backspace?: boolean;
+		delete?: boolean;
+		ctrl?: boolean;
+		shift?: boolean;
+		tab?: boolean;
+	}) => {
+		// Ctrl 组合键：不插入字符
+		if (key.ctrl) {
+			if (input === 'u') {
+				onChange('');
+				setState({cursorOffset: 0, desiredColumn: null});
+				return;
+			}
+			// 其他 Ctrl 组合键（c/o/x 等）不插入，让 App 层处理
+			return;
+		}
+
+		// Tab 不处理（留给命令选择器）
+		if (key.tab) return;
+
+		// \n (Ctrl+J) 插入换行（终端中 \n 与 \r 是不同字节，可靠区分）
+		if (input === '\n') {
+			const nextValue = originalValue.slice(0, cursorOffset) + '\n' + originalValue.slice(cursorOffset);
+			onChange(nextValue);
+			setState({cursorOffset: cursorOffset + 1, desiredColumn: null});
+			return;
+		}
+
+		// Enter (\r) 提交（Shift+Enter 在大多数终端中与 Enter 发送相同的 \r，
+		// 无法区分，因此仅支持 Ctrl+J 换行）
+		if (key.return) {
+			onSubmit?.(originalValue);
+			return;
+		}
+
+		// 上箭头：移动到上一行的同列位置
+		if (key.upArrow) {
+			if (!showCursor) return;
+			const pos = offsetToPosition(originalValue, cursorOffset);
+			if (pos.line === 0) {
+				// 已经在第一行，移到行首
+				if (pos.column > 0) {
+					setState({cursorOffset: cursorOffset - pos.column, desiredColumn: null});
+				}
+				return;
+			}
+			const targetColumn = desiredColumn ?? pos.column;
+			const prevLine = getLineInfo(originalValue, pos.line - 1);
+			const newColumn = Math.min(targetColumn, prevLine.content.length);
+			setState({
+				cursorOffset: prevLine.startOffset + newColumn,
+				desiredColumn: targetColumn,
+			});
+			return;
+		}
+
+		// 下箭头：移动到下一行的同列位置
+		if (key.downArrow) {
+			if (!showCursor) return;
+			const totalLines = getLineCount(originalValue);
+			const pos = offsetToPosition(originalValue, cursorOffset);
+			if (pos.line >= totalLines - 1) {
+				// 已经在最后一行，移到行尾
+				if (cursorOffset < originalValue.length) {
+					setState({cursorOffset: originalValue.length, desiredColumn: null});
+				}
+				return;
+			}
+			const targetColumn = desiredColumn ?? pos.column;
+			const nextLine = getLineInfo(originalValue, pos.line + 1);
+			const newColumn = Math.min(targetColumn, nextLine.content.length);
+			setState({
+				cursorOffset: nextLine.startOffset + newColumn,
+				desiredColumn: targetColumn,
+			});
+			return;
+		}
+
+		// 左右箭头时清除 desiredColumn
+		if (key.leftArrow) {
+			if (showCursor && cursorOffset > 0) {
+				setState({cursorOffset: cursorOffset - 1, desiredColumn: null});
+			}
+			return;
+		}
+		if (key.rightArrow) {
+			if (showCursor && cursorOffset < originalValue.length) {
+				setState({cursorOffset: cursorOffset + 1, desiredColumn: null});
+			}
+			return;
+		}
+
+		// 退格/删除（统一处理：Windows Terminal 的 Backspace 发送 \x7f 被解析为 key.delete，
+		// 与 ink-text-input 保持一致，都删除光标前一个字符）
+		if (key.backspace || key.delete) {
+			if (cursorOffset > 0) {
+				const nextValue = originalValue.slice(0, cursorOffset - 1) + originalValue.slice(cursorOffset);
+				onChange(nextValue);
+				setState({cursorOffset: cursorOffset - 1, desiredColumn: null});
+			}
+			return;
+		}
+
+		// 普通字符输入
+		if (input.length > 0) {
+			const nextValue = originalValue.slice(0, cursorOffset) + input + originalValue.slice(cursorOffset);
+			onChange(nextValue);
+			setState({cursorOffset: cursorOffset + input.length, desiredColumn: null});
+		}
+	}, [originalValue, cursorOffset, showCursor, onChange, onSubmit]);
+
+	useInput(handleKeyDown, {isActive: focus});
+
+	// --- 渲染 ---
+	const lines = originalValue.split('\n');
+
+	if (originalValue.length === 0 && placeholder) {
+		const renderedPlaceholder = showCursor && focus
+			? chalk.inverse(placeholder[0] ?? ' ') + chalk.grey(placeholder.slice(1))
+			: chalk.grey(placeholder);
+		return <Text>{renderedPlaceholder}</Text>;
+	}
+
+	const renderedLines: string[] = [];
+	let runningOffset = 0;
+
+	for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
+		const line = lines[lineIdx];
+		const lineStart = runningOffset;
+		const lineEnd = lineStart + line.length;
+
+		if (showCursor && focus && cursorOffset >= lineStart && cursorOffset <= lineEnd) {
+			// 光标在这一行
+			const cursorCol = cursorOffset - lineStart;
+			let rendered = '';
+			for (let i = 0; i < line.length; i++) {
+				rendered += i === cursorCol ? chalk.inverse(line[i]) : line[i];
+			}
+			if (cursorCol === line.length) {
+				rendered += chalk.inverse(' ');
+			}
+			renderedLines.push(rendered);
+		} else {
+			renderedLines.push(line || ' ');
+		}
+
+		runningOffset = lineEnd + 1; // +1 for \n
+	}
+
+	// 空文本且无 placeholder
+	if (renderedLines.length === 0) {
+		renderedLines.push(showCursor && focus ? chalk.inverse(' ') : ' ');
+	}
+
+	return <Text>{renderedLines.join('\n')}</Text>;
+}

illusion/_frontend/src/components/PromptInput.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {Box} from 'ink';
+
+import type {UiLanguage} from '../i18n.js';
+import {t} from '../i18n.js';
+import {useTheme} from '../theme/ThemeContext.js';
+import {Spinner} from './Spinner.js';
+import MultilineTextInput from './MultilineTextInput.js';
+import type {TodoItemSnapshot} from '../types.js';
+
+function noop(): void {}
+
+function sanitizeInput(value: string): string {
+	// 仅移除回车符，保留换行符（多行）和空格
+	return value.replace(/\r/g, '');
+}
+
+export function PromptInput({
+	busy,
+	input,
+	setInput,
+	onSubmit,
+	toolName,
+	suppressSubmit,
+	cursorReset,
+	language,
+	todoItems,
+}: {
+	busy: boolean;
+	input: string;
+	setInput: (value: string) => void;
+	onSubmit: (value: string) => void;
+	toolName?: string;
+	suppressSubmit?: boolean;
+	cursorReset?: number;
+	language: UiLanguage;
+	todoItems?: TodoItemSnapshot[];
+}): React.JSX.Element {
+	const theme = useTheme();
+
+	const handleChange = React.useCallback((value: string) => {
+		setInput(sanitizeInput(value));
+	}, [setInput]);
+
+	return (
+		<Box flexDirection="column" marginTop={1}>
+			{busy ? (
+				<Box marginBottom={1}>
+					<Spinner todoItems={todoItems} language={language} toolName={toolName} />
+				</Box>
+			) : null}
+			<Box borderStyle="round" borderColor={theme.colors.promptBorder} paddingLeft={1} paddingRight={1}>
+				<MultilineTextInput
+					key={cursorReset ?? 0}
+					value={input}
+					onChange={handleChange}
+					onSubmit={suppressSubmit ? noop : onSubmit}
+					placeholder={t(language, 'longTextHint')}
+					focus={!busy}
+				/>
+			</Box>
+		</Box>
+	);
+}

illusion/_frontend/src/components/SelectModal.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import {Box, Text} from 'ink';
+
+import {useTheme} from '../theme/ThemeContext.js';
+
+export type SelectOption = {
+	value: string;
+	label: string;
+	description?: string;
+	active?: boolean;
+};
+
+const MAX_VISIBLE = 6;
+
+export function SelectModal({
+	title,
+	options,
+	selectedIndex,
+}: {
+	title: string;
+	options: SelectOption[];
+	selectedIndex: number;
+}): React.JSX.Element {
+	const theme = useTheme();
+
+	const startIndex = Math.max(
+		0,
+		Math.min(
+			selectedIndex - Math.floor(MAX_VISIBLE / 2),
+			options.length - MAX_VISIBLE,
+		),
+	);
+	const endIndex = Math.min(startIndex + MAX_VISIBLE, options.length);
+	const visible = options.slice(startIndex, endIndex);
+
+	return (
+		<Box flexDirection="column" marginTop={1}>
+			<Box>
+				<Text color={theme.colors.permission}>{theme.icons.pointer} </Text>
+				<Text bold>{title}</Text>
+			</Box>
+			{visible.map((opt, vi) => {
+				const i = startIndex + vi;
+				const isSelected = i === selectedIndex;
+				const isCurrent = opt.active;
+				return (
+					<Box key={opt.value}>
+						<Text color={isSelected ? theme.colors.suggestion : theme.colors.muted}>
+							{isSelected ? `${theme.icons.pointer} ` : '  '}
+						</Text>
+						<Text color={isSelected ? theme.colors.suggestion : undefined} bold={isSelected} dimColor={!isSelected}>
+							{opt.label}
+						</Text>
+						{isCurrent ? (
+							<Box marginLeft={1}>
+								<Text color={theme.colors.success} dimColor>(current)</Text>
+							</Box>
+						) : null}
+						{opt.description ? (
+							<Box marginLeft={1}>
+								<Text dimColor>{theme.icons.middleDot} {opt.description}</Text>
+							</Box>
+						) : null}
+					</Box>
+				);
+			})}
+			<Box>
+				<Text dimColor>
+					<Text color={theme.colors.muted}>↑↓</Text> navigate
+					<Text> {theme.icons.middleDot} </Text>
+					<Text color={theme.colors.muted}>↵</Text> select
+					<Text> {theme.icons.middleDot} </Text>
+					<Text color={theme.colors.muted}>esc</Text> cancel
+				</Text>
+			</Box>
+		</Box>
+	);
+}

illusion/_frontend/src/components/SidePanel.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import {Box, Text} from 'ink';
+
+import type {ThemeConfig} from '../theme/ThemeContext.js';
+import {useTheme} from '../theme/ThemeContext.js';
+import type {BridgeSessionSnapshot, McpServerSnapshot, TaskSnapshot} from '../types.js';
+
+export function SidePanel({
+	status,
+	tasks,
+	commands,
+	commandHints,
+	mcpServers,
+	bridgeSessions,
+}: {
+	status: Record<string, unknown>;
+	tasks: TaskSnapshot[];
+	commands: string[];
+	commandHints: string[];
+	mcpServers: McpServerSnapshot[];
+	bridgeSessions: BridgeSessionSnapshot[];
+}): React.JSX.Element {
+	const theme = useTheme();
+
+	return (
+		<Box flexDirection="column" width="32%">
+			<StatusPanel status={status} theme={theme} />
+			<TaskPanel tasks={tasks} theme={theme} />
+			<McpPanel servers={mcpServers} theme={theme} />
+			<BridgePanel sessions={bridgeSessions} theme={theme} />
+			<CommandPanel commands={commands} hints={commandHints} theme={theme} />
+		</Box>
+	);
+}
+
+function StatusPanel({status, theme}: {status: Record<string, unknown>; theme: ThemeConfig}): React.JSX.Element {
+	const agentCount = Number(status.agent_count ?? 0);
+	return (
+		<>
+			<Box marginBottom={1}>
+				<Text color={theme.colors.primary} bold>{theme.icons.chevron} Status</Text>
+			</Box>
+			<Box flexDirection="column" borderStyle="round" borderColor={theme.colors.muted} paddingX={1} marginBottom={1}>
+				<Text><Text dimColor>model:</Text> <Text color={theme.colors.accent}>{String(status.model ?? 'unknown')}</Text></Text>
+				{agentCount > 0 ? (
+					<Text><Text dimColor>agents:</Text> <Text color={theme.colors.illusion}>{agentCount} running</Text></Text>
+				) : null}
+				<Text><Text dimColor>provider:</Text> <Text color={theme.colors.accent}>{String(status.provider ?? 'unknown')}</Text></Text>
+				<Text><Text dimColor>auth:</Text> <Text color={theme.colors.accent}>{String(status.auth_status ?? 'unknown')}</Text></Text>
+				<Text><Text dimColor>permission:</Text> <Text color={theme.colors.accent}>{String(status.permission_mode ?? 'unknown')}</Text></Text>
+				<Text><Text dimColor>cwd:</Text> <Text color={theme.colors.accent}>{String(status.cwd ?? '.')}</Text></Text>
+				<Text><Text dimColor>language:</Text> <Text color={theme.colors.accent}>{String(status.ui_language ?? 'zh-CN')}</Text></Text>
+				<Text><Text dimColor>fast:</Text> <Text color={theme.colors.accent}>{String(Boolean(status.fast_mode))}</Text></Text>
+				<Text><Text dimColor>effort:</Text> <Text color={theme.colors.accent}>{String(status.effort ?? 'medium')}</Text></Text>
+				<Text><Text dimColor>passes:</Text> <Text color={theme.colors.accent}>{String(status.passes ?? 1)}</Text></Text>
+			</Box>
+		</>
+	);
+}
+
+function TaskPanel({tasks, theme}: {tasks: TaskSnapshot[]; theme: ThemeConfig}): React.JSX.Element {
+	const visible = tasks.slice(0, 6);
+	return (
+		<>
+			<Box marginBottom={1}>
+				<Text color={theme.colors.primary} bold>{theme.icons.chevron} Tasks</Text>
+			</Box>
+			<Box flexDirection="column" borderStyle="round" borderColor={theme.colors.muted} paddingX={1} marginBottom={1}>
+				{visible.length === 0 ? (
+					<Text dimColor>(none)</Text>
+				) : (
+					visible.map((task) => (
+						<Box key={task.id} flexDirection="column" marginBottom={1}>
+							<Text>
+								<Text color={theme.colors.accent}>{task.id}</Text>
+								<Text dimColor> [{task.status}] </Text>
+								<Text>{task.description}</Text>
+							</Text>
+							<Text dimColor>
+								type={task.type} progress={task.metadata.progress ?? '-'} note={task.metadata.status_note ?? '-'}
+							</Text>
+						</Box>
+					))
+				)}
+			</Box>
+		</>
+	);
+}
+
+function McpPanel({servers, theme}: {servers: McpServerSnapshot[]; theme: ThemeConfig}): React.JSX.Element {
+	return (
+		<>
+			<Box marginBottom={1}>
+				<Text color={theme.colors.primary} bold>{theme.icons.chevron} MCP</Text>
+			</Box>
+			<Box flexDirection="column" borderStyle="round" borderColor={theme.colors.muted} paddingX={1} marginBottom={1}>
+				{servers.length === 0 ? (
+					<Text dimColor>(none)</Text>
+				) : (
+					servers.slice(0, 5).map((server) => (
+						<Box key={server.name} flexDirection="column" marginBottom={1}>
+							<Text>
+								<Text color={theme.colors.accent}>{server.name}</Text>
+								<Text dimColor> [{server.state}] </Text>
+								<Text>{server.transport ?? 'unknown'}</Text>
+							</Text>
+							<Text dimColor>
+								auth={String(Boolean(server.auth_configured))} tools={String(server.tool_count ?? 0)} resources=
+								{String(server.resource_count ?? 0)}
+							</Text>
+							{server.detail ? <Text dimColor>{server.detail}</Text> : null}
+						</Box>
+					))
+				)}
+			</Box>
+		</>
+	);
+}
+
+function BridgePanel({sessions, theme}: {sessions: BridgeSessionSnapshot[]; theme: ThemeConfig}): React.JSX.Element {
+	return (
+		<>
+			<Box marginBottom={1}>
+				<Text color={theme.colors.primary} bold>{theme.icons.chevron} Bridge</Text>
+			</Box>
+			<Box flexDirection="column" borderStyle="round" borderColor={theme.colors.muted} paddingX={1} marginBottom={1}>
+				{sessions.length === 0 ? (
+					<Text dimColor>(none)</Text>
+				) : (
+					sessions.slice(0, 4).map((session) => (
+						<Box key={session.session_id} flexDirection="column" marginBottom={1}>
+							<Text>
+								<Text color={theme.colors.accent}>{session.session_id}</Text>
+								<Text dimColor> [{session.status}] pid={session.pid}</Text>
+							</Text>
+							<Text dimColor>{session.command}</Text>
+						</Box>
+					))
+				)}
+			</Box>
+		</>
+	);
+}
+
+function CommandPanel({
+	commands,
+	hints,
+	theme,
+}: {
+	commands: string[];
+	hints: string[];
+	theme: ThemeConfig;
+}): React.JSX.Element {
+	return (
+		<>
+			<Box marginBottom={1}>
+				<Text color={theme.colors.primary} bold>{theme.icons.chevron} Commands</Text>
+			</Box>
+			<Box flexDirection="column" borderStyle="round" borderColor={theme.colors.muted} paddingX={1}>
+				{hints.length > 0 ? (
+					hints.map((command, index) => (
+						<Text key={command} color={index === 0 ? theme.colors.accent : theme.colors.text}>
+							{command}
+							{index === 0 ? <Text dimColor>  [tab]</Text> : ''}
+						</Text>
+					))
+				) : commands.length > 0 ? (
+					<Text dimColor>type / for commands</Text>
+				) : (
+					<Text dimColor>(none)</Text>
+				)}
+			</Box>
+		</>
+	);
+}

illusion/_frontend/src/components/Spinner.tsx

@@ -0,0 +1,77 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {Box, Text} from 'ink';
+
+import type {UiLanguage} from '../i18n.js';
+import {t} from '../i18n.js';
+import {useTheme} from '../theme/ThemeContext.js';
+import type {TodoItemSnapshot} from '../types.js';
+
+export function Spinner({label, todoItems, language, toolName, sessionId}: {label?: string; todoItems?: TodoItemSnapshot[]; language?: UiLanguage; toolName?: string; sessionId?: string}): React.JSX.Element {
+	const theme = useTheme();
+	const frames = theme.icons.spinner;
+	const [frame, setFrame] = useState(0);
+	const [verbIndex, setVerbIndex] = useState(0);
+	const [dotCount, setDotCount] = useState(0);
+
+	// 从 i18n 获取动词列表
+	const verbs = useMemo(() => {
+		if (!language) return ['Thinking'];
+		return t(language, 'spinnerVerbs').split(',');
+	}, [language]);
+
+	// 涟漪图标轮换
+	useEffect(() => {
+		const timer = setInterval(() => {
+			setFrame((f) => (f + 1) % frames.length);
+		}, 220);
+		return () => clearInterval(timer);
+	}, [frames.length]);
+
+	// 动词轮换
+	useEffect(() => {
+		const timer = setInterval(() => {
+			setVerbIndex((v) => (v + 1) % verbs.length);
+		}, 3000);
+		return () => clearInterval(timer);
+	}, [verbs.length]);
+
+	// 省略号呼吸动画：· → ·· → ··· → (空) → ·
+	useEffect(() => {
+		const timer = setInterval(() => {
+			setDotCount((d) => (d + 1) % 4);
+		}, 800);
+		return () => clearInterval(timer);
+	}, []);
+
+	// 从todo列表中获取当前in_progress任务的activeForm
+	const currentTodo = todoItems?.find((t) => t.status === 'in_progress');
+	const nextTodo = todoItems?.find((t) => t.status === 'pending');
+
+	// 构建显示文本：优先使用 label，其次使用 todo activeForm，再次使用工具名，最后轮换动词
+	const verb = label ?? (currentTodo?.activeForm
+		? currentTodo.activeForm
+		: toolName && language
+			? `${t(language, 'spinnerToolAction')} ${toolName}`
+			: verbs[verbIndex]);
+	const dots = dotCount > 0 ? '·'.repeat(dotCount) : '';
+
+	return (
+		<Box flexDirection="column">
+			<Box>
+				<Box width={2}>
+					<Text color={theme.colors.illusionShimmer}>{frames[frame]}</Text>
+				</Box>
+				<Text color={theme.colors.illusionShimmer}>{verb}</Text>
+				<Box width={5}>
+					<Text color={theme.colors.illusionShimmer}> {dots}</Text>
+				</Box>
+				{sessionId ? <Text color={theme.colors.muted} dimColor>(SESSION ID = {sessionId})</Text> : null}
+			</Box>
+			{nextTodo && !currentTodo ? (
+				<Box marginTop={1} marginLeft={3}>
+					<Text dimColor>Next: {nextTodo.content}</Text>
+				</Box>
+			) : null}
+		</Box>
+	);
+}