illusion-code 0.1.0__py3-none-any.whl

illusion/_frontend/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@illusion/terminal",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "tsx src/index.tsx",
+    "build": "node build.mjs"
+  },
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "ink": "^5.1.0",
+    "ink-text-input": "^6.0.0",
+    "marked": "^18.0.2",
+    "react": "^18.3.1",
+    "string-width": "^8.2.0",
+    "strip-ansi": "^7.2.0",
+    "wrap-ansi": "^10.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.10",
+    "@types/react": "^18.3.12",
+    "@types/strip-ansi": "^3.0.0",
+    "esbuild": "^0.25.0",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.3"
+  }
+}

illusion/_frontend/src/App.tsx

@@ -0,0 +1,624 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {Box, Text, useApp, useInput} from 'ink';
+
+import {CommandPicker} from './components/CommandPicker.js';
+import {ConversationView} from './components/ConversationView.js';
+import {ModalHost} from './components/ModalHost.js';
+import {PromptInput} from './components/PromptInput.js';
+import {SelectModal, type SelectOption} from './components/SelectModal.js';
+import {Spinner} from './components/Spinner.js';
+import {StatusBar} from './components/StatusBar.js';
+import {SwarmPanel} from './components/SwarmPanel.js';
+import {TodoPanel} from './components/TodoPanel.js';
+import {useBackendSession} from './hooks/useBackendSession.js';
+import {normalizeLanguage, t} from './i18n.js';
+import {ThemeProvider, useTheme} from './theme/ThemeContext.js';
+import type {FrontendConfig} from './types.js';
+
+const rawReturnSubmit = process.env.ILLUSION_FRONTEND_RAW_RETURN === '1';
+const scriptedSteps = (() => {
+	const raw = process.env.ILLUSION_FRONTEND_SCRIPT;
+	if (!raw) {
+		return [] as string[];
+	}
+	try {
+		const parsed = JSON.parse(raw);
+		return Array.isArray(parsed) ? parsed.filter((item): item is string => typeof item === 'string') : [];
+	} catch {
+		return [];
+	}
+})();
+
+const PERMISSION_MODES: SelectOption[] = [
+	{value: 'default', label: 'Default', description: 'Ask before write/execute operations'},
+	{value: 'full_auto', label: 'Auto', description: 'Allow all tools automatically'},
+	{value: 'plan', label: 'Plan Mode', description: 'Block all write operations'},
+];
+
+type SelectModalState = {
+	title: string;
+	options: SelectOption[];
+	onSelect: (value: string) => void;
+} | null;
+
+const PERMISSION_PROMPT_OPTIONS: SelectOption[] = [
+	{value: 'allow', label: 'Allow', description: 'Approve this tool execution'},
+	{value: 'always', label: 'Always Allow', description: 'Always allow this tool without asking again'},
+	{value: 'deny', label: 'Deny', description: 'Reject this tool execution'},
+];
+
+
+export function App({config}: {config: FrontendConfig}): React.JSX.Element {
+	return (
+		<ThemeProvider>
+			<AppInner config={config} />
+		</ThemeProvider>
+	);
+}
+
+function AppInner({config}: {config: FrontendConfig}): React.JSX.Element {
+	const {exit} = useApp();
+	const theme = useTheme();
+	const [input, setInput] = useState('');
+	const [modalInput, setModalInput] = useState('');
+	const [scriptIndex, setScriptIndex] = useState(0);
+	const [pickerIndex, setPickerIndex] = useState(0);
+	const [selectModal, setSelectModal] = useState<SelectModalState>(null);
+	const [selectIndex, setSelectIndex] = useState(0);
+	const [permissionIndex, setPermissionIndex] = useState(2);
+	const [pendingPermissionAck, setPendingPermissionAck] = useState(false);
+	const [cursorReset, setCursorReset] = useState(0);
+	const session = useBackendSession(config, () => exit());
+	const isPermissionModal = session.modal?.kind === 'permission';
+	const language = normalizeLanguage(session.status.ui_language);
+	const permissionRequestId =
+		isPermissionModal && typeof session.modal?.request_id === 'string' ? String(session.modal.request_id) : '';
+	const localizedPermissionOptions = PERMISSION_PROMPT_OPTIONS.map((opt) => {
+		if (opt.value === 'allow') {
+			return {...opt, label: t(language, 'allow')};
+		}
+		if (opt.value === 'always') {
+			return {...opt, label: t(language, 'alwaysAllow')};
+		}
+		return {...opt, label: t(language, 'deny')};
+	});
+
+	// Current tool name for spinner
+	const currentToolName = useMemo(() => {
+		// 优先检查 pendingToolCalls（工具调用刚开始，参数尚未到达）
+		if (session.pendingToolCalls.length > 0) {
+			return session.pendingToolCalls[session.pendingToolCalls.length - 1].tool_name;
+		}
+		for (let i = session.staticItems.length - 1; i >= 0; i--) {
+			const item = session.staticItems[i];
+			if (item.role === 'tool') {
+				return item.tool_name ?? 'tool';
+			}
+			if (item.role === 'tool_result' || item.role === 'assistant') {
+				break;
+			}
+		}
+		return undefined;
+	}, [session.staticItems, session.pendingToolCalls]);
+
+	// Command hints
+	const commandHints = useMemo(() => {
+		if (!input.startsWith('/')) {
+			return [] as string[];
+		}
+		const value = input.trimEnd();
+		if (value === '') {
+			return [] as string[];
+		}
+		const matches = session.commands.filter((cmd) => cmd.startsWith(value));
+		if (value === '/') {
+			const preferred = ['/language'];
+			const boosted = preferred.filter((cmd) => matches.includes(cmd));
+			const rest = matches.filter((cmd) => !preferred.includes(cmd));
+			return [...boosted, ...rest];
+		}
+		return matches;
+	}, [session.commands, input]);
+
+	const canShowPicker = input.startsWith('/') && commandHints.length > 0;
+	const showPicker = canShowPicker && !session.busy && !session.modal && !selectModal;
+
+	useEffect(() => {
+		setPickerIndex(0);
+	}, [canShowPicker, commandHints.length, input]);
+
+	// Handle backend-initiated select requests (e.g. /resume session list)
+	useEffect(() => {
+		if (!session.selectRequest) {
+			return;
+		}
+		const req = session.selectRequest;
+		if (req.options.length === 0) {
+			session.setSelectRequest(null);
+			return;
+		}
+		setSelectIndex(0);
+		setSelectModal({
+			title: req.title,
+			options: req.options.map((o) => ({value: o.value, label: o.label, description: o.description})),
+			onSelect: (value) => {
+				session.sendRequest({type: 'apply_select_command', command: req.command, value});
+				session.setBusy(true);
+				setSelectModal(null);
+			},
+		});
+		session.setSelectRequest(null);
+	}, [session.selectRequest]);
+
+	useEffect(() => {
+		if (!isPermissionModal) {
+			setPendingPermissionAck(false);
+			return;
+		}
+		setPermissionIndex(1);
+		setPendingPermissionAck(false);
+	}, [permissionRequestId, isPermissionModal]);
+
+	// Intercept special commands that need interactive UI
+	const handleCommand = (cmd: string): boolean => {
+		const trimmed = cmd.trim();
+
+		// /permissions → show mode picker
+		if (trimmed === '/permissions' || trimmed === '/permissions show') {
+			const currentMode = String(session.status.permission_mode ?? 'default');
+			const options = PERMISSION_MODES.map((opt) => ({
+				...opt,
+				active: opt.value === currentMode,
+			}));
+			const initialIndex = options.findIndex((o) => o.active);
+			setSelectIndex(initialIndex >= 0 ? initialIndex : 0);
+			setSelectModal({
+				title: 'Permission Mode',
+				options,
+				onSelect: (value) => {
+					session.sendRequest({type: 'submit_line', line: `/permissions set ${value}`});
+					session.setBusy(true);
+					setSelectModal(null);
+				},
+			});
+			return true;
+		}
+
+		if (trimmed === '/language' || trimmed === '/language show') {
+			const current = normalizeLanguage(session.status.ui_language);
+			const options: SelectOption[] = [
+				{value: 'set zh-CN', label: t(current, 'langZh'), description: '中文界面', active: current === 'zh-CN'},
+				{value: 'set en', label: t(current, 'langEn'), description: 'English UI', active: current === 'en'},
+			];
+			const initialIndex = options.findIndex((o) => o.active);
+			setSelectIndex(initialIndex >= 0 ? initialIndex : 0);
+			setSelectModal({
+				title: t(current, 'language'),
+				options,
+				onSelect: (value) => {
+					session.sendRequest({type: 'submit_line', line: `/language ${value}`});
+					session.setBusy(true);
+					setSelectModal(null);
+				},
+			});
+			return true;
+		}
+
+		// /plan → toggle plan mode
+		if (trimmed === '/plan') {
+			const currentMode = String(session.status.permission_mode ?? 'default');
+			if (currentMode === 'plan') {
+				session.sendRequest({type: 'submit_line', line: '/plan off'});
+			} else {
+				session.sendRequest({type: 'submit_line', line: '/plan on'});
+			}
+			session.setBusy(true);
+			return true;
+		}
+
+		// /resume → request session list from backend (will trigger select_request)
+		if (trimmed === '/resume') {
+			session.sendRequest({type: 'list_sessions'});
+			return true;
+		}
+
+		// /model → show model selector dropdown
+		if (trimmed === '/model' || trimmed === '/model show') {
+			session.sendRequest({type: 'select_command', command: 'model'});
+			return true;
+		}
+
+		// /rewind → show message selector to pick rewind point
+		if (trimmed === '/rewind') {
+			session.sendRequest({type: 'select_command', command: 'rewind'});
+			return true;
+		}
+
+		// /delete → show session picker for deletion
+		if (trimmed === '/delete') {
+			session.sendRequest({type: 'select_command', command: 'delete'});
+			return true;
+		}
+
+		// /rules → show rule picker
+		if (trimmed === '/rules') {
+			session.sendRequest({type: 'select_command', command: 'rules'});
+			return true;
+		}
+
+		// /context → show context management selector
+		if (trimmed === '/context') {
+			session.sendRequest({type: 'select_command', command: 'context'});
+			return true;
+		}
+
+		// /new → clear conversation window and start fresh session
+		if (trimmed === '/new' || trimmed === '/clear') {
+			session.sendRequest({type: 'submit_line', line: '/new'});
+			session.setBusy(true);
+			return true;
+		}
+
+		// /version → 显示版本信息（前端处理，不发送到后端）
+		if (trimmed === '/version') {
+			session.setCommandResult({
+				text: 'IllusionCode 0.1.0',
+				type: 'info',
+			});
+			return true;
+		}
+
+		return false;
+	};
+
+	useInput((chunk, key) => {
+		// Ctrl+C → 退出程序
+		if (key.ctrl && chunk === 'c') {
+			session.sendRequest({type: 'shutdown'});
+			exit();
+			return;
+		}
+		// Ctrl+X → 停止当前任务
+		if (key.ctrl && chunk.toLowerCase() === 'x') {
+			if (session.busy) {
+				session.sendRequest({type: 'stop'});
+				session.pushStatic({role: 'system', text: ' '});
+				session.setCommandResult({
+					text: t(language, 'taskStopped'),
+					type: 'info',
+				});
+			}
+			return;
+		}
+		// Ctrl+O → 将完整结果内容显示在对话中（不发送到 AI）
+		if (key.ctrl && chunk.toLowerCase() === 'o' && session.commandResult) {
+			session.pushStatic({role: 'system', text: session.commandResult.text});
+			session.setCommandResult(null);
+			return;
+		}
+
+		// ESC → 清除指令结果
+		if (key.escape && session.commandResult) {
+			session.setCommandResult(null);
+			return;
+		}
+
+		// --- Select modal (permissions picker etc.) ---
+		if (selectModal) {
+			if (key.upArrow) {
+				setSelectIndex((i) => Math.max(0, i - 1));
+				return;
+			}
+			if (key.downArrow) {
+				setSelectIndex((i) => Math.min(selectModal.options.length - 1, i + 1));
+				return;
+			}
+			if (key.return) {
+				const selected = selectModal.options[selectIndex];
+				if (selected) {
+					selectModal.onSelect(selected.value);
+				}
+				return;
+			}
+			if (key.escape) {
+				setSelectModal(null);
+				session.setBusy(false);
+				return;
+			}
+			// Number keys for quick selection
+			const num = parseInt(chunk, 10);
+			if (num >= 1 && num <= selectModal.options.length) {
+				const selected = selectModal.options[num - 1];
+				if (selected) {
+					selectModal.onSelect(selected.value);
+				}
+				return;
+			}
+			return;
+		}
+
+		// --- Scripted raw return ---
+		if (rawReturnSubmit && key.return) {
+			if (session.modal?.kind === 'question') {
+				session.sendRequest({
+					type: 'question_response',
+					request_id: session.modal.request_id,
+					answer: modalInput,
+				});
+				session.setModal(null);
+				setModalInput('');
+				return;
+			}
+			if (!session.modal && !session.busy && input.trim()) {
+				onSubmit(input);
+				return;
+			}
+		}
+
+		// --- Permission modal (MUST be before busy check — modal appears while busy) ---
+		if (isPermissionModal) {
+			if (pendingPermissionAck) {
+				return;
+			}
+			if (key.upArrow || key.downArrow) {
+				setPermissionIndex((i) => {
+					if (key.upArrow) return i <= 0 ? 2 : i - 1;
+					return i >= 2 ? 0 : i + 1;
+				});
+				return;
+			}
+			if (key.return || key.escape) {
+				if (!permissionRequestId) {
+					return;
+				}
+				const selected = key.escape ? 'deny' : localizedPermissionOptions[permissionIndex]?.value;
+				const allowed = selected === 'allow' || selected === 'always';
+				session.sendRequest({
+					type: 'permission_response',
+					request_id: permissionRequestId,
+					allowed,
+					always_allow: selected === 'always',
+					tool_name: String(session.modal?.tool_name ?? ''),
+				});
+				setPendingPermissionAck(true);
+				return;
+			}
+			return;
+		}
+
+		// --- Question modal (also appears while busy) ---
+		if (session.modal?.kind === 'question') {
+			return;
+		}
+
+		// --- Ignore input while busy ---
+		if (session.busy) {
+			return;
+		}
+
+		// --- Command picker ---
+		if (showPicker) {
+			if (key.upArrow) {
+				setPickerIndex((i) => Math.max(0, i - 1));
+				return;
+			}
+			if (key.downArrow) {
+				setPickerIndex((i) => Math.min(commandHints.length - 1, i + 1));
+				return;
+			}
+			if (key.return) {
+				const selected = commandHints[pickerIndex];
+				if (selected) {
+					setInput('');
+					setCursorReset((c) => c + 1);
+					if (!handleCommand(selected)) {
+						onSubmit(selected);
+					}
+				}
+				return;
+			}
+			if (key.tab) {
+				const selected = commandHints[pickerIndex];
+				if (selected) {
+					setInput(selected + ' ');
+					setCursorReset((c) => c + 1);
+				}
+				return;
+			}
+			if (key.escape) {
+				setInput('');
+				setCursorReset((c) => c + 1);
+				return;
+			}
+		}
+
+		// Note: normal Enter submission is handled by TextInput's onSubmit in
+		// PromptInput.  Do NOT duplicate it here — that causes double requests.
+	});
+
+	const onSubmit = (value: string): void => {
+		if (session.modal?.kind === 'question') {
+			session.sendRequest({
+				type: 'question_response',
+				request_id: session.modal.request_id,
+				answer: value,
+			});
+			session.setModal(null);
+			setModalInput('');
+			return;
+		}
+		const trimmed = value.trim();
+		if (!trimmed || session.busy || !session.ready) {
+			return;
+		}
+		// Check if it's an interactive command
+		if (handleCommand(trimmed)) {
+			setInput('');
+			return;
+		}
+		session.sendRequest({type: 'submit_line', line: trimmed});
+		setInput('');
+		session.setBusy(true);
+	};
+
+	// 指令结果自动消失：3 秒后清除
+	useEffect(() => {
+		if (!session.commandResult) {
+			return;
+		}
+		const timer = setTimeout(() => {
+			session.setCommandResult(null);
+		}, 3000);
+		return () => clearTimeout(timer);
+	}, [session.commandResult]);
+
+	// Scripted automation
+	useEffect(() => {
+		if (scriptIndex >= scriptedSteps.length) {
+			return;
+		}
+		if (session.busy || session.modal || selectModal) {
+			return;
+		}
+		const step = scriptedSteps[scriptIndex];
+		const timer = setTimeout(() => {
+			onSubmit(step);
+			setScriptIndex((index) => index + 1);
+		}, 200);
+		return () => clearTimeout(timer);
+	}, [scriptIndex, session.busy, session.modal, selectModal]);
+
+	return (
+		<Box flexDirection="column" height="100%">
+			{/* Conversation area */}
+			<Box flexDirection="column" flexGrow={1}>
+				<ConversationView
+					staticItems={session.staticItems}
+					clearCount={session.clearCount}
+					assistantBuffer={session.assistantBuffer}
+					showWelcome={session.ready}
+					showThinking={session.showThinking}
+					language={language}
+					pendingToolCalls={session.pendingToolCalls}
+					commandPickerOpen={showPicker}
+				/>
+			</Box>
+
+			<Box flexDirection="column" paddingX={1}>
+			{/* Permission confirm modal */}
+			{isPermissionModal ? (
+				<SelectModal
+					title={`Allow ${String(session.modal?.tool_name ?? 'tool')}?`}
+					options={localizedPermissionOptions}
+					selectedIndex={permissionIndex}
+				/>
+			) : null}
+
+			{/* Backend modal (question, mcp auth) */}
+			{session.modal && !isPermissionModal ? (
+				<ModalHost
+					modal={session.modal}
+					modalInput={modalInput}
+					setModalInput={setModalInput}
+					onSubmit={onSubmit}
+					language={language}
+				/>
+			) : null}
+
+			{/* Frontend select modal (permissions picker, etc.) */}
+			{selectModal ? (
+				<SelectModal
+					title={selectModal.title}
+					options={selectModal.options}
+					selectedIndex={selectIndex}
+				/>
+			) : null}
+
+			{/* Command picker */}
+			{showPicker ? (
+				<CommandPicker hints={commandHints} selectedIndex={pickerIndex} totalCommands={session.commands.length} />
+			) : null}
+
+			{/* Command result display */}
+			{session.commandResult ? (
+				<CommandPicker
+					mode="result"
+					result={session.commandResult.text}
+					resultType={session.commandResult.type}
+				/>
+			) : null}
+
+			{/* Todo panel */}
+			{session.ready && session.todoItems.length > 0 ? (
+				<TodoPanel items={session.todoItems} />
+			) : null}
+
+			{/* Swarm panel */}
+			{session.ready && (session.swarmTeammates.length > 0 || session.swarmNotifications.length > 0) ? (
+				<SwarmPanel teammates={session.swarmTeammates} notifications={session.swarmNotifications} />
+			) : null}
+
+			{/* Status bar (only after backend is ready) */}
+			{session.ready ? (
+				<StatusBar status={session.status} tasks={session.tasks} />
+			) : null}
+
+			{/* Input — show loading indicator until backend is ready */}
+			{!session.ready ? (
+				<Box>
+					<Text color={theme.colors.warning}>{t(language, 'connecting')}</Text>
+				</Box>
+			) : session.modal || selectModal || pendingPermissionAck ? null : session.busy ? (
+				<Box marginTop={1}>
+					<Spinner
+						label={session.bgAgentLabel ?? undefined}
+						todoItems={session.todoItems}
+						language={language}
+						toolName={currentToolName}
+						sessionId={String(session.status.session_id ?? '')}
+					/>
+				</Box>
+			) : (
+				<PromptInput
+					busy={session.busy}
+					input={input}
+					setInput={setInput}
+					onSubmit={onSubmit}
+					toolName={session.busy ? currentToolName : undefined}
+					suppressSubmit={showPicker}
+					cursorReset={cursorReset}
+					language={language}
+					todoItems={session.todoItems}
+				/>
+			)}
+
+			{/* Keyboard hints (only after backend is ready) */}
+			{session.ready && !session.modal && !session.busy && !selectModal && !pendingPermissionAck ? (
+				<Box>
+					<Text dimColor>
+						<Text color={theme.colors.muted}>enter</Text> {t(language, 'send')}
+						<Text> {theme.icons.middleDot} </Text>
+						<Text color={theme.colors.muted}>/</Text> {t(language, 'commands')}
+						<Text> {theme.icons.middleDot} </Text>
+						<Text color={theme.colors.muted}>ctrl+c</Text> {t(language, 'exitProgram')}
+						<Text> {theme.icons.middleDot} </Text>
+						<Text color={theme.colors.muted}>ctrl+x</Text> {t(language, 'stopCurrentTask')}
+						<Text> {theme.icons.middleDot} </Text>
+						<Text color={theme.colors.muted}>ctrl+u</Text> {t(language, 'clearInput')}
+						<Text> {theme.icons.middleDot} </Text>
+						<Text color={theme.colors.muted}>ctrl+j</Text> {t(language, 'newline')}
+					</Text>
+				</Box>
+			) : session.ready && session.busy && !session.modal && !selectModal ? (
+				<Box marginTop={1}>
+					<Text dimColor>
+						<Text color={theme.colors.muted}>ctrl+c</Text> {t(language, 'exitProgram')}
+						<Text> {theme.icons.middleDot} </Text>
+						<Text color={theme.colors.muted}>ctrl+x</Text> {t(language, 'stopCurrentTask')}
+					</Text>
+				</Box>
+			) : null}
+			</Box>
+		</Box>
+	);
+}