illusion-code 0.1.0__py3-none-any.whl

illusion/_frontend/src/components/MarkdownTable.tsx

@@ -0,0 +1,245 @@
+import type {Token, Tokens} from 'marked';
+import React from 'react';
+import {Text} from 'ink';
+import {useTerminalSize} from '../hooks/useTerminalSize.js';
+import {padAligned, stringWidth, stripAnsi, wrapText} from '../utils/markdown.js';
+
+const SAFETY_MARGIN = 4;
+const MIN_COLUMN_WIDTH = 3;
+const MAX_ROW_LINES = 4;
+
+const INLINE_CODE_COLOR = '#b1b9f9';
+
+function hexToAnsiRgb(hex: string): string {
+	const r = parseInt(hex.slice(1, 3), 16);
+	const g = parseInt(hex.slice(3, 5), 16);
+	const b = parseInt(hex.slice(5, 7), 16);
+	return `38;2;${r};${g};${b}`;
+}
+
+function renderInlineToAnsi(tokens: Token[] | undefined): string {
+	if (!tokens || tokens.length === 0) return '';
+	let result = '';
+
+	for (const t of tokens) {
+		switch (t.type) {
+			case 'strong': {
+				const st = t as Tokens.Strong;
+				result += `\x1b[1m${renderInlineToAnsi(st.tokens)}\x1b[22m`;
+				break;
+			}
+			case 'em': {
+				const et = t as Tokens.Em;
+				result += `\x1b[3m${renderInlineToAnsi(et.tokens)}\x1b[23m`;
+				break;
+			}
+			case 'codespan': {
+				const ct = t as Tokens.Codespan;
+				result += `\x1b[${hexToAnsiRgb(INLINE_CODE_COLOR)}m${ct.text}\x1b[39m`;
+				break;
+			}
+			case 'link': {
+				const lt = t as Tokens.Link;
+				result += `\x1b[4m${renderInlineToAnsi(lt.tokens)}\x1b[24m`;
+				break;
+			}
+			case 'text': {
+				const tt = t as Tokens.Text;
+				if (tt.tokens && tt.tokens.length > 0) {
+					result += renderInlineToAnsi(tt.tokens);
+				} else {
+					result += tt.raw ?? tt.text;
+				}
+				break;
+			}
+			case 'escape': {
+				result += t.text;
+				break;
+			}
+			default: {
+				result += (t as {raw?: string}).raw ?? (t as {text?: string}).text ?? '';
+				break;
+			}
+		}
+	}
+
+	return result;
+}
+
+type CellData = {text: string; tokens: Token[]};
+
+type Props = {
+	token: Tokens.Table;
+	forceWidth?: number;
+};
+
+function cellAnsiText(cell: CellData | undefined | null): string {
+	if (!cell) return '';
+	if (!cell.tokens || cell.tokens.length === 0) return cell.text ?? '';
+	return renderInlineToAnsi(cell.tokens);
+}
+
+function cellPlainText(cell: CellData | undefined | null): string {
+	return stripAnsi(cellAnsiText(cell));
+}
+
+function cellMinWidth(cell: CellData | undefined | null): number {
+	const text = cellPlainText(cell);
+	const words = text.split(/\s+/).filter((w) => w.length > 0);
+	if (words.length === 0) return MIN_COLUMN_WIDTH;
+	return Math.max(...words.map((w) => stringWidth(w)), MIN_COLUMN_WIDTH);
+}
+
+function cellIdealWidth(cell: CellData | undefined | null): number {
+	return Math.max(stringWidth(cellPlainText(cell)), MIN_COLUMN_WIDTH);
+}
+
+export function MarkdownTable({token, forceWidth}: Props): React.JSX.Element {
+	const {columns: actualTerminalWidth} = useTerminalSize();
+	const terminalWidth = forceWidth ?? actualTerminalWidth;
+
+	const headerCells = token.header as unknown as CellData[];
+	const rowsCells = token.rows as unknown as CellData[][];
+
+	const minWidths = headerCells.map((_h, colIndex) => {
+		let mw = cellMinWidth(headerCells[colIndex]);
+		for (const row of rowsCells) {
+			mw = Math.max(mw, cellMinWidth(row[colIndex]));
+		}
+		return mw;
+	});
+	const idealWidths = headerCells.map((_h, colIndex) => {
+		let iw = cellIdealWidth(headerCells[colIndex]);
+		for (const row of rowsCells) {
+			iw = Math.max(iw, cellIdealWidth(row[colIndex]));
+		}
+		return iw;
+	});
+
+	const numCols = headerCells.length;
+	const borderOverhead = 1 + numCols * 3;
+	const availableWidth = Math.max(terminalWidth - borderOverhead - SAFETY_MARGIN, numCols * MIN_COLUMN_WIDTH);
+
+	const totalMin = minWidths.reduce((s, w) => s + w, 0);
+	const totalIdeal = idealWidths.reduce((s, w) => s + w, 0);
+
+	let needsHardWrap = false;
+	let columnWidths: number[];
+	if (totalIdeal <= availableWidth) {
+		columnWidths = idealWidths;
+	} else if (totalMin <= availableWidth) {
+		const extraSpace = availableWidth - totalMin;
+		const overflows = idealWidths.map((ideal, i) => ideal - minWidths[i]!);
+		const totalOverflow = overflows.reduce((s, o) => s + o, 0);
+		columnWidths = minWidths.map((min, i) => {
+			if (totalOverflow === 0) return min;
+			return min + Math.floor((overflows[i]! / totalOverflow) * extraSpace);
+		});
+	} else {
+		needsHardWrap = true;
+		const scaleFactor = availableWidth / totalMin;
+		columnWidths = minWidths.map((w) => Math.max(Math.floor(w * scaleFactor), MIN_COLUMN_WIDTH));
+	}
+
+	function renderRowLines(cells: Array<CellData | undefined>, isHeader: boolean): string[] {
+		const cellLines = cells.map((cell, colIndex) => {
+			const text = cellAnsiText(cell);
+			return wrapText(text, columnWidths[colIndex]!, {hard: needsHardWrap});
+		});
+		const maxLines = Math.max(...cellLines.map((ls) => ls.length), 1);
+		const verticalOffsets = cellLines.map((ls) => Math.floor((maxLines - ls.length) / 2));
+		const result: string[] = [];
+		for (let lineIdx = 0; lineIdx < maxLines; lineIdx++) {
+			let line = '│';
+			for (let colIndex = 0; colIndex < cells.length; colIndex++) {
+				const ls = cellLines[colIndex]!;
+				const offset = verticalOffsets[colIndex]!;
+				const cIdx = lineIdx - offset;
+				const lineText = cIdx >= 0 && cIdx < ls.length ? ls[cIdx]! : '';
+				const width = columnWidths[colIndex]!;
+				const align = isHeader ? 'center' : (token.align?.[colIndex] as 'left' | 'center' | 'right' | undefined) ?? 'left';
+				const displayW = stringWidth(stripAnsi(lineText));
+				line += ' ' + padAligned(lineText, displayW, width, align) + ' │';
+			}
+			result.push(line);
+		}
+		return result;
+	}
+
+	function renderBorderLine(type: 'top' | 'middle' | 'bottom'): string {
+		const [left, mid, cross, right] = {
+			top: ['┌', '─', '┬', '┐'],
+			middle: ['├', '─', '┼', '┤'],
+			bottom: ['└', '─', '┴', '┘'],
+		}[type] as [string, string, string, string];
+		let line = left;
+		columnWidths.forEach((width, colIndex) => {
+			line += mid.repeat(width + 2);
+			line += colIndex < columnWidths.length - 1 ? cross : right;
+		});
+		return line;
+	}
+
+	function calculateMaxRowLines(): number {
+		let maxLines = 1;
+		for (let i = 0; i < headerCells.length; i++) {
+			const wrapped = wrapText(cellAnsiText(headerCells[i]), columnWidths[i]!, {hard: needsHardWrap});
+			maxLines = Math.max(maxLines, wrapped.length);
+		}
+		for (const row of rowsCells) {
+			for (let i = 0; i < row.length; i++) {
+				const wrapped = wrapText(cellAnsiText(row[i]), columnWidths[i]!, {hard: needsHardWrap});
+				maxLines = Math.max(maxLines, wrapped.length);
+			}
+		}
+		return maxLines;
+	}
+
+	const maxRowLines = calculateMaxRowLines();
+	const useVerticalFormat = maxRowLines > MAX_ROW_LINES;
+
+	function renderVerticalFormat(): string {
+		const lines: string[] = [];
+		const headers = headerCells.map((h) => cellAnsiText(h));
+		const separator = '─'.repeat(Math.min(terminalWidth - 1, 40));
+		rowsCells.forEach((row, rowIndex) => {
+			if (rowIndex > 0) lines.push(separator);
+			row.forEach((cell, colIndex) => {
+				const label = headers[colIndex] ?? `Column ${colIndex + 1}`;
+				const value = cellPlainText(cell).replace(/\n+/g, ' ').replace(/\s+/g, ' ').trim();
+				const firstLineWidth = Math.max(terminalWidth - stringWidth(label) - 3, 10);
+				const wrappedValue = wrapText(value, firstLineWidth);
+				lines.push(`${label}: ${wrappedValue[0] ?? ''}`);
+				for (let i = 1; i < wrappedValue.length; i++) {
+					const l = wrappedValue[i]!;
+					if (!l.trim()) return;
+					lines.push(`  ${l}`);
+				}
+			});
+		});
+		return lines.join('\n');
+	}
+
+	if (useVerticalFormat) {
+		return <Text>{renderVerticalFormat()}</Text>;
+	}
+
+	const tableLines: string[] = [];
+	tableLines.push(renderBorderLine('top'));
+	tableLines.push(...renderRowLines(headerCells, true));
+	tableLines.push(renderBorderLine('middle'));
+	rowsCells.forEach((row, rowIndex) => {
+		tableLines.push(...renderRowLines(row, false));
+		if (rowIndex < rowsCells.length - 1) {
+			tableLines.push(renderBorderLine('middle'));
+		}
+	});
+	tableLines.push(renderBorderLine('bottom'));
+
+	const maxLineWidth = Math.max(...tableLines.map((l) => stringWidth(stripAnsi(l))));
+	if (maxLineWidth > terminalWidth - SAFETY_MARGIN) {
+		return <Text>{renderVerticalFormat()}</Text>;
+	}
+
+	return <Text>{tableLines.join('\n')}</Text>;
+}

illusion/_frontend/src/components/ModalHost.tsx

@@ -0,0 +1,425 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {Box, Text, useInput} from 'ink';
+import TextInput from 'ink-text-input';
+
+import type {UiLanguage} from '../i18n.js';
+import {t} from '../i18n.js';
+import {useTheme} from '../theme/ThemeContext.js';
+
+type QuestionOption = {
+	label: string;
+	description?: string;
+	preview?: string;
+};
+
+type QuestionItem = {
+	question: string;
+	header?: string;
+	options?: QuestionOption[];
+	multiSelect?: boolean;
+};
+
+function QuestionModal({
+	modal,
+	modalInput,
+	setModalInput,
+	onSubmit,
+	language,
+}: {
+	modal: Record<string, unknown>;
+	modalInput: string;
+	setModalInput: (value: string) => void;
+	onSubmit: (value: string) => void;
+	language: UiLanguage;
+}): React.JSX.Element {
+	const theme = useTheme();
+	const [extraLines, setExtraLines] = useState<string[]>([]);
+	const [optionIndex, setOptionIndex] = useState(0);
+	const [isCustomInput, setIsCustomInput] = useState(false);
+	const [selectedIndices, setSelectedIndices] = useState<Set<number>>(new Set());
+
+	const questions: QuestionItem[] = useMemo(() => {
+		const raw = modal.questions;
+		if (!Array.isArray(raw)) return [];
+		return raw as QuestionItem[];
+	}, [modal.questions]);
+
+	const firstQuestion = questions.length > 0 ? questions[0] : null;
+	const options = firstQuestion?.options ?? [];
+	const hasOptions = options.length > 0;
+	const isMultiSelect = firstQuestion?.multiSelect === true && hasOptions;
+
+	type OptionEntry = {type: 'option'; label: string; description?: string} | {type: 'other'; label: string; description?: undefined};
+
+	const allOptions = useMemo(() => {
+		if (!hasOptions) return [] as OptionEntry[];
+		const result: OptionEntry[] = options.map((opt) => ({type: 'option' as const, label: opt.label, description: opt.description}));
+		// 多选模式下不追加"其他"选项
+		if (isMultiSelect) return result;
+		const hasOtherAlready = options.some((opt) => {
+			const lbl = opt.label.toLowerCase();
+			return lbl === 'other' || lbl === '其他' || lbl.startsWith('other') || lbl.startsWith('其他');
+		});
+		if (!hasOtherAlready) {
+			result.push({type: 'other' as const, label: language === 'zh-CN' ? '其他（手动输入）' : 'Other (type your answer)', description: undefined});
+		}
+		return result;
+	}, [options, hasOptions, isMultiSelect, language]);
+
+	useEffect(() => {
+		setOptionIndex(0);
+		setIsCustomInput(false);
+		setSelectedIndices(new Set());
+	}, [hasOptions, allOptions.length, isMultiSelect]);
+
+	useInput((_chunk, key) => {
+		// ---- 自定义输入模式 ----
+		if (isCustomInput) {
+			if (key.shift && key.return) {
+				setExtraLines((lines) => [...lines, modalInput]);
+				setModalInput('');
+			}
+			if (key.escape) {
+				setIsCustomInput(false);
+				setModalInput('');
+			}
+			return;
+		}
+
+		// ---- 多选模式 ----
+		if (isMultiSelect && allOptions.length > 0) {
+			if (key.upArrow) {
+				setOptionIndex((i) => Math.max(0, i - 1));
+				return;
+			}
+			if (key.downArrow) {
+				setOptionIndex((i) => Math.min(allOptions.length - 1, i + 1));
+				return;
+			}
+			if (key.return) {
+				// 收集所有选中项
+				const selected = allOptions
+					.filter((_, i) => selectedIndices.has(i))
+					.map((opt) => opt.label);
+				// 如果什么都没选，默认选中当前高亮的选项
+				if (selected.length === 0) {
+					selected.push(allOptions[optionIndex]!.label);
+				}
+				const header = firstQuestion?.header ?? 'answer';
+				onSubmit(JSON.stringify({[header]: selected}));
+				return;
+			}
+			if (_chunk === ' ') {
+				// Space 切换选中/取消
+				setSelectedIndices((prev) => {
+					const next = new Set(prev);
+					if (next.has(optionIndex)) {
+						next.delete(optionIndex);
+					} else {
+						next.add(optionIndex);
+					}
+					return next;
+				});
+				return;
+			}
+			// 数字键也切换选中（不立即提交）
+			const num = parseInt(_chunk, 10);
+			if (num >= 1 && num <= allOptions.length) {
+				setSelectedIndices((prev) => {
+					const next = new Set(prev);
+					const idx = num - 1;
+					if (next.has(idx)) {
+						next.delete(idx);
+					} else {
+						next.add(idx);
+					}
+					return next;
+				});
+				return;
+			}
+			return;
+		}
+
+		// ---- 单选模式（原逻辑） ----
+		if (hasOptions && allOptions.length > 0) {
+			if (key.upArrow) {
+				setOptionIndex((i) => Math.max(0, i - 1));
+				return;
+			}
+			if (key.downArrow) {
+				setOptionIndex((i) => Math.min(allOptions.length - 1, i + 1));
+				return;
+			}
+			if (key.return) {
+				const selected = allOptions[optionIndex];
+				if (selected?.type === 'other') {
+					setIsCustomInput(true);
+				} else if (selected) {
+					const idx = optionIndex + 1;
+					onSubmit(`${idx}. ${selected.label}`);
+				}
+				return;
+			}
+			const num = parseInt(_chunk, 10);
+			if (num >= 1 && num <= allOptions.length) {
+				const target = allOptions[num - 1];
+				if (target?.type === 'other') {
+					setIsCustomInput(true);
+				} else if (target) {
+					onSubmit(`${num}. ${target.label}`);
+				}
+				return;
+			}
+		} else {
+			if (key.shift && key.return) {
+				setExtraLines((lines) => [...lines, modalInput]);
+				setModalInput('');
+			}
+		}
+	});
+
+	const handleSubmit = (value: string): void => {
+		if (isCustomInput) {
+			const allLines = [...extraLines, value];
+			setExtraLines([]);
+			setIsCustomInput(false);
+			onSubmit(allLines.join('\n'));
+			return;
+		}
+		if (hasOptions) {
+			return;
+		}
+		const allLines = [...extraLines, value];
+		setExtraLines([]);
+		onSubmit(allLines.join('\n'));
+	};
+
+	const toolName = modal.tool_name ? String(modal.tool_name) : null;
+	const reason = modal.reason ? String(modal.reason) : null;
+	const question = String(modal.question ?? 'Question');
+	const header = firstQuestion?.header;
+
+	return (
+		<Box flexDirection="column" marginTop={1}>
+			<Box>
+				<Text color={theme.colors.illusion}>{theme.icons.pointer} </Text>
+				{header ? (
+					<>
+						<Text color={theme.colors.suggestion} bold>[{header}] </Text>
+						<Text bold>{firstQuestion?.question ?? question}</Text>
+					</>
+				) : (
+					<Text bold>{firstQuestion?.question ?? question}</Text>
+				)}
+			</Box>
+			{toolName ? (
+				<Box>
+					<Text dimColor>{`  ${theme.icons.resultPrefix} `}</Text>
+					<Text dimColor>Tool: </Text>
+					<Text color={theme.colors.info}>{toolName}</Text>
+				</Box>
+			) : null}
+			{reason ? (
+				<Box>
+					<Text dimColor>{`  ${theme.icons.resultPrefix} `}</Text>
+					<Text dimColor>{reason}</Text>
+				</Box>
+			) : null}
+
+			{hasOptions && !isCustomInput ? (
+				<Box flexDirection="column" marginTop={1}>
+					{allOptions.map((opt, i) => {
+						const isCurrent = i === optionIndex;
+						const isSelected = isMultiSelect ? selectedIndices.has(i) : false;
+						return (
+							<Box key={i}>
+								<Text color={isCurrent ? theme.colors.suggestion : theme.colors.muted}>
+									{isCurrent ? `${theme.icons.pointer} ` : '  '}
+								</Text>
+								{isMultiSelect && (
+									<Text color={isSelected ? theme.colors.suggestion : theme.colors.muted}>
+										[{isSelected ? 'x' : ' '}]
+									</Text>
+								)}
+								<Text color={isCurrent && !isMultiSelect ? theme.colors.suggestion : (isMultiSelect && isSelected ? theme.colors.suggestion : undefined)} bold={isCurrent && !isMultiSelect} dimColor={!isCurrent}>
+									{`${i + 1}. `}
+									{opt.label}
+								</Text>
+								{opt.description ? (
+									<Box marginLeft={1}>
+										<Text dimColor>{theme.icons.middleDot} {opt.description}</Text>
+									</Box>
+								) : null}
+								{isCurrent && !isMultiSelect ? <Text dimColor>{' [enter]'}</Text> : null}
+							</Box>
+						);
+					})}
+					<Box marginTop={0}>
+						<Text dimColor>
+							<Text color={theme.colors.muted}>↑↓</Text> navigate
+							{isMultiSelect ? (
+								<>
+									<Text> {theme.icons.middleDot} </Text>
+									<Text color={theme.colors.muted}>Space</Text> toggle
+									<Text> {theme.icons.middleDot} </Text>
+									<Text color={theme.colors.muted}>1-{allOptions.length}</Text> toggle
+									<Text> {theme.icons.middleDot} </Text>
+									<Text color={theme.colors.muted}>↵</Text> confirm
+								</>
+							) : (
+								<>
+									<Text> {theme.icons.middleDot} </Text>
+									<Text color={theme.colors.muted}>↵</Text> select
+									<Text> {theme.icons.middleDot} </Text>
+									<Text color={theme.colors.muted}>1-{allOptions.length}</Text> quick
+								</>
+							)}
+						</Text>
+					</Box>
+				</Box>
+			) : null}
+
+			{(isCustomInput || !hasOptions) ? (
+				<>
+					{isCustomInput ? (
+						<Box marginTop={1}>
+							<Text dimColor>{`  ${theme.icons.resultPrefix} `}</Text>
+							<Text dimColor>{language === 'zh-CN' ? '请输入您的回答：' : 'Type your answer:'}</Text>
+						</Box>
+					) : null}
+					{extraLines.length > 0 && (
+						<Box flexDirection="column" marginTop={1}>
+							{extraLines.map((line, i) => (
+								<Box key={i}>
+									<Text dimColor>{`  ${theme.icons.resultPrefix} `}</Text>
+									<Text dimColor>{line}</Text>
+								</Box>
+							))}
+						</Box>
+					)}
+					<Box marginTop={1}>
+						<Text color={theme.colors.illusion}>{theme.icons.pointer} </Text>
+						<TextInput value={modalInput} onChange={setModalInput} onSubmit={handleSubmit} />
+					</Box>
+				</>
+			) : null}
+		</Box>
+	);
+}
+
+function PermissionModal({
+	modal,
+}: {
+	modal: Record<string, unknown>;
+}): React.JSX.Element {
+	const theme = useTheme();
+	const toolName = String(modal.tool_name ?? 'tool');
+	const reason = modal.reason ? String(modal.reason) : null;
+
+	return (
+		<Box flexDirection="column" marginTop={1}>
+			<Box>
+				<Text color={theme.colors.warning}>{theme.icons.pointer} </Text>
+				<Text bold>Allow </Text>
+				<Text color={theme.colors.info} bold>{toolName}</Text>
+				<Text bold>?</Text>
+			</Box>
+			{reason ? (
+				<Box>
+					<Text dimColor>{`  ${theme.icons.resultPrefix} `}</Text>
+					<Text dimColor>{reason}</Text>
+				</Box>
+			) : null}
+			<Box>
+				<Text dimColor>{`  ${theme.icons.resultPrefix} `}</Text>
+				<Text dimColor>
+					<Text color={theme.colors.muted}>↑↓</Text> navigate
+					<Text> {theme.icons.middleDot} </Text>
+					<Text color={theme.colors.muted}>↵</Text> select
+				</Text>
+			</Box>
+		</Box>
+	);
+}
+
+function McpAuthModal({
+	modal,
+	modalInput,
+	setModalInput,
+	onSubmit,
+	language,
+}: {
+	modal: Record<string, unknown>;
+	modalInput: string;
+	setModalInput: (value: string) => void;
+	onSubmit: (value: string) => void;
+	language: UiLanguage;
+}): React.JSX.Element {
+	const theme = useTheme();
+	const prompt = String(modal.prompt ?? 'Provide auth details');
+
+	return (
+		<Box flexDirection="column" marginTop={1}>
+			<Box>
+				<Text color={theme.colors.warning}>{theme.icons.pointer} </Text>
+				<Text bold>MCP Authentication</Text>
+			</Box>
+			<Box>
+				<Text dimColor>{`  ${theme.icons.resultPrefix} `}</Text>
+				<Text dimColor>{prompt}</Text>
+			</Box>
+			<Box marginTop={1}>
+				<Text color={theme.colors.illusion}>{theme.icons.pointer} </Text>
+				<TextInput value={modalInput} onChange={setModalInput} onSubmit={onSubmit} />
+			</Box>
+		</Box>
+	);
+}
+
+export function ModalHost({
+	modal,
+	modalInput,
+	setModalInput,
+	onSubmit,
+	language,
+}: {
+	modal: Record<string, unknown> | null;
+	modalInput: string;
+	setModalInput: (value: string) => void;
+	onSubmit: (value: string) => void;
+	language: UiLanguage;
+}): React.JSX.Element | null {
+	if (!modal) {
+		return null;
+	}
+
+	if (modal.kind === 'permission') {
+		return <PermissionModal modal={modal} />;
+	}
+
+	if (modal.kind === 'question') {
+		return (
+			<QuestionModal
+				modal={modal}
+				modalInput={modalInput}
+				setModalInput={setModalInput}
+				onSubmit={onSubmit}
+				language={language}
+			/>
+		);
+	}
+
+	if (modal.kind === 'mcp_auth') {
+		return (
+			<McpAuthModal
+				modal={modal}
+				modalInput={modalInput}
+				setModalInput={setModalInput}
+				onSubmit={onSubmit}
+				language={language}
+			/>
+		);
+	}
+
+	return null;
+}