illusion-code 0.1.0__py3-none-any.whl

illusion/_frontend/src/components/CommandPicker.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import {Box, Text} from 'ink';
+
+import {useTheme} from '../theme/ThemeContext.js';
+
+const MAX_VISIBLE = 6;
+
+type CommandPickerMode = 'hints' | 'result';
+
+type CommandPickerProps = {
+	hints?: string[];
+	selectedIndex?: number;
+	totalCommands?: number;
+	/** 结果模式：显示指令执行结果 */
+	mode?: CommandPickerMode;
+	result?: string;
+	resultType?: 'success' | 'error' | 'info';
+};
+
+export function CommandPicker({
+	hints,
+	selectedIndex,
+	mode = 'hints',
+	result,
+}: CommandPickerProps): React.JSX.Element | null {
+	const theme = useTheme();
+
+	// 结果模式：显示指令执行结果
+	if (mode === 'result' && result) {
+		const lines = result.split('\n');
+		const displayLines = lines.slice(0, MAX_VISIBLE);
+
+		return (
+			<Box flexDirection="column" marginTop={1} borderStyle="round" borderColor={theme.colors.illusion} paddingX={1}>
+				{displayLines.map((line, i) => (
+					<Text key={i} color={theme.colors.illusion}>{line}</Text>
+				))}
+				{lines.length > MAX_VISIBLE ? (
+					<Text color={theme.colors.illusion} dimColor>
+						{'  '}... +{lines.length - MAX_VISIBLE} more lines
+					</Text>
+				) : null}
+				<Text dimColor>
+					<Text color={theme.colors.muted}>esc</Text> dismiss
+					<Text> {theme.icons.middleDot} </Text>
+					<Text color={theme.colors.muted}>ctrl+o</Text> show full
+				</Text>
+			</Box>
+		);
+	}
+
+	// 提示模式：显示命令提示列表
+	if (!hints || hints.length === 0) {
+		return null;
+	}
+
+	const safeSelectedIndex = selectedIndex ?? 0;
+	const startIndex = Math.max(
+		0,
+		Math.min(
+			safeSelectedIndex - Math.floor(MAX_VISIBLE / 2),
+			hints.length - MAX_VISIBLE,
+		),
+	);
+	const endIndex = Math.min(startIndex + MAX_VISIBLE, hints.length);
+	const visible = hints.slice(startIndex, endIndex);
+
+	return (
+		<Box flexDirection="column" marginTop={1}>
+			{visible.map((hint, vi) => {
+				const actualIndex = startIndex + vi;
+				const isSelected = actualIndex === safeSelectedIndex;
+				return (
+					<Box key={hint}>
+						<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}>
+							{hint}
+						</Text>
+						{isSelected ? <Text dimColor>{' [enter]'}</Text> : null}
+					</Box>
+				);
+			})}
+			<Box marginTop={0}>
+				<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}>tab</Text> complete
+					<Text> {theme.icons.middleDot} </Text>
+					<Text color={theme.colors.muted}>esc</Text> dismiss
+				</Text>
+			</Box>
+		</Box>
+	);
+}

illusion/_frontend/src/components/Composer.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import {Box, Text} from 'ink';
+import TextInput from 'ink-text-input';
+
+import {useTheme} from '../theme/ThemeContext.js';
+
+function sanitizeInput(value: string): string {
+	return value
+		.replace(/[\r\n]+/g, ' ')
+		.replace(/\s+/g, ' ')
+		.trim();
+}
+
+export function Composer({
+	busy,
+	input,
+	setInput,
+	onSubmit,
+	historyIndex,
+}: {
+	busy: boolean;
+	input: string;
+	setInput: (value: string) => void;
+	onSubmit: (value: string) => void;
+	historyIndex: number;
+}): React.JSX.Element {
+	const theme = useTheme();
+
+	return (
+		<Box flexDirection="column" marginTop={1}>
+			<Box borderStyle="round" borderColor={busy ? theme.colors.warning : theme.colors.success} paddingX={1}>
+				<Text color={busy ? theme.colors.warning : theme.colors.success} bold>
+					{busy ? theme.icons.inProgress : theme.icons.completed}{' '}
+				</Text>
+				<Text color={busy ? theme.colors.warning : theme.colors.success} bold>
+					{busy ? 'busy' : 'ready'}
+				</Text>
+				<Text> </Text>
+				<TextInput
+					value={input}
+					onChange={(value) => setInput(sanitizeInput(value))}
+					onSubmit={onSubmit}
+				/>
+			</Box>
+			<Box marginTop={1}>
+				<Text dimColor>
+					<Text color={theme.colors.muted}>enter</Text>=submit{' '}
+					<Text color={theme.colors.muted}>tab</Text>=complete{' '}
+					<Text color={theme.colors.muted}>ctrl-p/ctrl-n</Text>=history{' '}
+					<Text color={theme.colors.muted}>history_index</Text>={String(historyIndex)}
+				</Text>
+			</Box>
+		</Box>
+	);
+}

illusion/_frontend/src/components/ComposerController.tsx

@@ -0,0 +1,128 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {useInput} from 'ink';
+
+import type {UiLanguage} from '../i18n.js';
+import type {TodoItemSnapshot} from '../types.js';
+import {CommandPicker} from './CommandPicker.js';
+import {PromptInput} from './PromptInput.js';
+
+export function ComposerController({
+	commands,
+	busy,
+	disabled,
+	language,
+	todoItems,
+	toolName,
+	onSubmit,
+}: {
+	commands: string[];
+	busy: boolean;
+	disabled: boolean;
+	language: UiLanguage;
+	todoItems: TodoItemSnapshot[];
+	toolName?: string;
+	onSubmit: (value: string) => void;
+}): React.JSX.Element | null {
+	const [input, setInput] = useState('');
+	const [pickerIndex, setPickerIndex] = useState(0);
+	const [localBusy, setLocalBusy] = useState(false);
+
+	const commandHints = useMemo(() => {
+		if (!input.startsWith('/')) {
+			return [] as string[];
+		}
+		const value = input.trimEnd();
+		if (!value) {
+			return [] as string[];
+		}
+		const matches = 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;
+	}, [commands, input]);
+
+	const showPicker = !disabled && input.startsWith('/') && commandHints.length > 0;
+    const effectiveBusy = busy || localBusy;
+
+	useEffect(() => {
+		setPickerIndex(0);
+	}, [showPicker, commandHints.length, input]);
+
+	useEffect(() => {
+		if (!busy) {
+			setLocalBusy(false);
+		}
+	}, [busy]);
+
+	useInput((chunk, key) => {
+		if (disabled) {
+			return;
+		}
+
+		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) {
+					setLocalBusy(true);
+					setInput('');
+					onSubmit(selected);
+				}
+				return;
+			}
+			if (key.tab) {
+				const selected = commandHints[pickerIndex];
+				if (selected) {
+					setInput(selected + ' ');
+				}
+				return;
+			}
+			if (key.escape) {
+				setInput('');
+				return;
+			}
+		}
+
+		if (!showPicker && (key.upArrow || key.downArrow)) {
+			return;
+		}
+	});
+
+	if (disabled || effectiveBusy) {
+		return null;
+	}
+
+	return (
+		<>
+			{showPicker ? <CommandPicker hints={commandHints} selectedIndex={pickerIndex} totalCommands={commands.length} /> : null}
+			<PromptInput
+				busy={effectiveBusy}
+				input={input}
+				setInput={setInput}
+				onSubmit={(value) => {
+					if (!value.trim() || disabled) {
+						return;
+					}
+					setLocalBusy(true);
+					onSubmit(value);
+					setInput('');
+				}}
+				toolName={toolName}
+				suppressSubmit={showPicker}
+				language={language}
+				todoItems={todoItems}
+			/>
+		</>
+	);
+}