acmecode 1.0.0

package/packages/tui/src/CatLogo.tsx

@@ -0,0 +1,134 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { t } from './i18n.js';
+import { theme } from './theme.js';
+
+// ── Animated Cat Logo (Horizontal Layout) ──
+// A compact card with the cat on the left and info on the right
+
+const CAT_FRAMES = [
+    // Frame 0: Eyes open
+    [
+        `  /\\_/\\  `,
+        ` ( o.o ) `,
+        `  > ^ <  `,
+        ` /|   |\\ `,
+        `(_|   |_)~`,
+    ],
+    // Frame 1: Eyes open
+    [
+        `  /\\_/\\  `,
+        ` ( o.o ) `,
+        `  > ^ <  `,
+        ` /|   |\\ `,
+        `(_|   |_)~`,
+    ],
+    // Frame 2: Half blink
+    [
+        `  /\\_/\\  `,
+        ` ( -.o ) `,
+        `  > ^ <  `,
+        ` /|   |\\ `,
+        `(_|   |_)~`,
+    ],
+    // Frame 3: Full blink
+    [
+        `  /\\_/\\  `,
+        ` ( -.- ) `,
+        `  > ^ <  `,
+        ` /|   |\\ `,
+        `(_|   |_)~`,
+    ],
+    // Frame 4: Eyes open wide (surprise)
+    [
+        `  /\\_/\\  `,
+        ` ( O.O ) `,
+        `  > ^ <  `,
+        ` /|   |\\ `,
+        `(_|   |_)~`,
+    ],
+    // Frame 5: Eyes open
+    [
+        `  /\\_/\\  `,
+        ` ( o.o ) `,
+        `  > ^ <  `,
+        ` /|   |\\ `,
+        `(_|   |_)~`,
+    ],
+];
+
+// Animation sequence: mostly open eyes with occasional blinks
+const SEQUENCE = [0, 1, 0, 5, 0, 1, 2, 3, 3, 2, 0, 1, 4, 4, 0, 5];
+
+// Color palette for the gradient title
+const TITLE_COLORS = [
+    'cyan',
+    'blue',
+    'magenta',
+    'blue',
+];
+
+interface CatLogoProps {
+    provider?: string;
+    modelName?: string;
+    visionProvider?: string;
+    visionModel?: string;
+    version?: string;
+}
+
+export default function CatLogo({ provider, modelName, visionProvider, visionModel, version = 'v1.0' }: CatLogoProps): React.ReactElement {
+    const [frame, setFrame] = useState(0);
+    const [titleColorIdx, setTitleColorIdx] = useState(0);
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setFrame(prev => (prev + 1) % SEQUENCE.length);
+            setTitleColorIdx(prev => (prev + 1) % TITLE_COLORS.length);
+        }, 600);
+        return () => clearInterval(timer);
+    }, []);
+
+    const catLines = CAT_FRAMES[SEQUENCE[frame]!]!;
+    const catColor = '#ffaf87';
+    const mutedColor = 'gray';
+
+    const vModel = visionProvider && visionModel ? `${visionProvider}:${visionModel}` : t('ui.disabled');
+
+    return (
+        <Box
+            flexDirection="row"
+            paddingX={1}
+            paddingY={0}
+            borderStyle="round"
+            borderColor={theme.accentIdle.startsWith('#') ? undefined : theme.accentIdle as any}
+            width={65}
+        >
+            {/* Left side: Cat ASCII (10 cells wide) */}
+            <Box flexDirection="column" marginRight={2} width={10}>
+                {catLines.map((line, i) => (
+                    <Text key={i} color={catColor}>{line}</Text>
+                ))}
+            </Box>
+
+            {/* Right side: Info */}
+            <Box flexDirection="column" justifyContent="center">
+                <Text>
+                    <Text bold color={TITLE_COLORS[titleColorIdx]}>AcmeCode</Text>
+                    <Text color={mutedColor}> {version} | {t('ui.tagline')}</Text>
+                </Text>
+                <Box flexDirection="column" marginTop={1}>
+                    <Text wrap="truncate-end">
+                        <Text>{theme.primary('Model: ')}</Text>
+                        <Text>{theme.primary(provider || '---')}</Text>
+                        <Text>{theme.muted(':')}</Text>
+                        <Text>{theme.info(modelName || '---')}</Text>
+                    </Text>
+                    <Text wrap="truncate-end">
+                        <Text>{theme.muted('Vision: ')}</Text>
+                        <Text>{theme.info(vModel)}</Text>
+                    </Text>
+                </Box>
+            </Box>
+        </Box>
+    );
+}

package/packages/tui/src/OptionList.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { theme } from './theme.js';
+import { t } from './i18n.js';
+
+interface Option {
+    id: string;
+    label: string;
+}
+
+interface OptionListProps {
+    options: Option[];
+    onSelect: (option: Option) => void;
+    onCancel: () => void;
+    title?: string;
+    description?: string;
+    currentId?: string;
+}
+
+export default function OptionList({ options, onSelect, onCancel, title, description, currentId }: OptionListProps) {
+    const [selectedIndex, setSelectedIndex] = useState(() => {
+        const idx = options.findIndex(o => o.id === currentId);
+        return idx >= 0 ? idx : 0;
+    });
+
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex(prev => (prev > 0 ? prev - 1 : options.length - 1));
+        } else if (key.downArrow) {
+            setSelectedIndex(prev => (prev < options.length - 1 ? prev + 1 : 0));
+        } else if (key.return) {
+            onSelect(options[selectedIndex]!);
+        } else if (key.escape || (input === 'c' && key.ctrl)) {
+            onCancel();
+        } else if (/^\d+$/.test(input)) {
+            const num = parseInt(input, 10);
+            if (num >= 1 && num <= options.length) {
+                onSelect(options[num - 1]!);
+            }
+        }
+    });
+
+    return (
+        <Box flexDirection="column" paddingX={1} marginY={1}>
+            {title && (
+                <Box marginBottom={1}>
+                    <Text bold underline>{title}</Text>
+                </Box>
+            )}
+            {description && (
+                <Box marginBottom={1}>
+                    <Text dimColor>{description}</Text>
+                </Box>
+            )}
+            <Box flexDirection="column">
+                {options.map((option, index) => {
+                    const isSelected = index === selectedIndex;
+                    const isCurrent = option.id === currentId;
+                    return (
+                        <Box key={option.id} flexDirection="row">
+                            <Box width={3}>
+                                <Text>
+                                    {isSelected ? theme.primary('❯ ') : '  '}
+                                </Text>
+                            </Box>
+                            <Box width={3}>
+                                <Text>
+                                    {theme.muted(`${index + 1}.`)}
+                                </Text>
+                            </Box>
+                            <Box marginRight={1}>
+                                <Text>
+                                    {isCurrent ? theme.success('●') : ' '}
+                                </Text>
+                            </Box>
+                            <Text bold={isSelected}>
+                                {isSelected ? theme.primary(option.label) : isCurrent ? theme.success(option.label) : option.label}
+                            </Text>
+                            {isCurrent && !isSelected && (
+                                <Box marginLeft={1}>
+                                    <Text>{theme.muted(`(${t('status.current')})`)}</Text>
+                                </Box>
+                            )}
+                        </Box>
+                    );
+                })}
+            </Box>
+            <Box marginTop={1}>
+                <Text dimColor>
+                    (Use {theme.primary('↑↓')} or {theme.primary('1-' + options.length)} to select, {theme.primary('Enter')} to confirm, {theme.primary('Esc')} to cancel)
+                </Text>
+            </Box>
+        </Box>
+    );
+}

package/packages/tui/src/Spinner.tsx

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+import { Text } from 'ink';
+
+const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const INTERVAL = 80;
+
+interface SpinnerProps {
+    label?: string;
+    color?: string;
+}
+
+export default function Spinner({ label, color = 'cyan' }: SpinnerProps) {
+    const [frame, setFrame] = useState(0);
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setFrame(prev => (prev + 1) % frames.length);
+        }, INTERVAL);
+        return () => clearInterval(timer);
+    }, []);
+
+    return (
+        <Text>
+            <Text color={color}>{frames[frame]} </Text>
+            {label ? <Text color="gray">{label}</Text> : null}
+        </Text>
+    );
+}

package/packages/tui/src/TextInput.tsx

@@ -0,0 +1,202 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Text, useInput } from "ink";
+import chalk from "chalk";
+import { theme } from "./theme.js";
+
+// Threshold matching opencode: ≥3 lines or >150 chars triggers paste collapse
+const PASTE_LINE_THRESHOLD = 3;
+const PASTE_CHAR_THRESHOLD = 150;
+
+export interface PastedPart {
+  /** Placeholder shown in the input, e.g. "[Pasted ~12 lines]" */
+  label: string;
+  /** Full original text to be expanded on submit */
+  text: string;
+}
+
+interface TextInputProps {
+  value: string;
+  placeholder?: string;
+  focus?: boolean;
+  showCursor?: boolean;
+  onChange: (value: string) => void;
+  onSubmit?: (value: string) => void;
+  onUp?: () => void;
+  onDown?: () => void;
+  onTab?: () => void;
+  /** Called when a large paste is detected and should be collapsed */
+  onPaste?: (part: PastedPart) => void;
+}
+
+/**
+ * Custom TextInput that fixes the stale-closure bug in ink-text-input@6.0.0.
+ * Also detects large pastes (≥3 lines or >150 chars) and calls onPaste so the
+ * caller can collapse them into a "[Pasted ~N lines]" token — matching opencode.
+ */
+function TextInput({
+  value,
+  placeholder = "",
+  focus = true,
+  showCursor = true,
+  onChange,
+  onSubmit,
+  onUp,
+  onDown,
+  onTab,
+  onPaste,
+}: TextInputProps) {
+  const [cursorOffset, setCursorOffset] = useState(value.length);
+
+  const valueRef = useRef(value);
+  const cursorRef = useRef(cursorOffset);
+  const onChangeRef = useRef(onChange);
+  const onSubmitRef = useRef(onSubmit);
+  const onUpRef = useRef(onUp);
+  const onDownRef = useRef(onDown);
+  const onTabRef = useRef(onTab);
+  const onPasteRef = useRef(onPaste);
+
+  valueRef.current = value;
+  cursorRef.current = cursorOffset;
+  onChangeRef.current = onChange;
+  onSubmitRef.current = onSubmit;
+  onUpRef.current = onUp;
+  onDownRef.current = onDown;
+  onTabRef.current = onTab;
+  onPasteRef.current = onPaste;
+
+  useEffect(() => {
+    if (cursorOffset > value.length) {
+      setCursorOffset(value.length);
+    }
+  }, [value, cursorOffset]);
+
+  useInput(
+    (input, key) => {
+      if (key.upArrow) {
+        onUpRef.current?.();
+        return;
+      }
+      if (key.downArrow) {
+        onDownRef.current?.();
+        return;
+      }
+      if (key.tab || (key.shift && key.tab)) {
+        onTabRef.current?.();
+        return;
+      }
+      if ((key.ctrl && input === "c") || key.escape) return;
+
+      const currentValue = valueRef.current;
+      const currentCursor = cursorRef.current;
+
+      if (key.return) {
+        onSubmitRef.current?.(currentValue);
+        return;
+      }
+
+      if (key.leftArrow) {
+        const next = Math.max(0, currentCursor - 1);
+        setCursorOffset(next);
+        cursorRef.current = next;
+        return;
+      }
+      if (key.rightArrow) {
+        const next = Math.min(currentValue.length, currentCursor + 1);
+        setCursorOffset(next);
+        cursorRef.current = next;
+        return;
+      }
+      if (key.backspace || key.delete) {
+        if (currentCursor > 0) {
+          const nextValue =
+            currentValue.slice(0, currentCursor - 1) +
+            currentValue.slice(currentCursor);
+          const nextCursor = currentCursor - 1;
+          setCursorOffset(nextCursor);
+          cursorRef.current = nextCursor;
+          valueRef.current = nextValue;
+          onChangeRef.current(nextValue);
+        }
+        return;
+      }
+
+      // ── Paste detection ──
+      // Terminals send pasted text as a burst of characters in a single input event.
+      // Detect by: multi-char input that isn't a known control sequence.
+      if (input.length > 1 && onPasteRef.current) {
+        const normalized = input.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+        const lineCount = (normalized.match(/\n/g)?.length ?? 0) + 1;
+        if (
+          lineCount >= PASTE_LINE_THRESHOLD ||
+          normalized.length > PASTE_CHAR_THRESHOLD
+        ) {
+          const label = `[Pasted ~${lineCount} lines]`;
+          onPasteRef.current({ label, text: normalized });
+          // Insert the label token into the input at cursor position
+          const nextValue =
+            currentValue.slice(0, currentCursor) +
+            label +
+            currentValue.slice(currentCursor);
+          const nextCursor = currentCursor + label.length;
+          setCursorOffset(nextCursor);
+          cursorRef.current = nextCursor;
+          valueRef.current = nextValue;
+          onChangeRef.current(nextValue);
+          return;
+        }
+      }
+
+      // Normal character input (including multi-char IME input)
+      const nextValue =
+        currentValue.slice(0, currentCursor) +
+        input +
+        currentValue.slice(currentCursor);
+      const nextCursor = currentCursor + input.length;
+      setCursorOffset(nextCursor);
+      cursorRef.current = nextCursor;
+      valueRef.current = nextValue;
+      onChangeRef.current(nextValue);
+    },
+    { isActive: focus },
+  );
+
+  // ── Render ──
+  if (showCursor && focus) {
+    if (value.length === 0) {
+      if (placeholder) {
+        return (
+          <Text>
+            {chalk.inverse(placeholder[0]) + chalk.grey(placeholder.slice(1))}
+          </Text>
+        );
+      }
+      return <Text>{chalk.inverse(" ")}</Text>;
+    }
+    const before = value.slice(0, cursorOffset);
+    const cursorChar = cursorOffset < value.length ? value[cursorOffset] : " ";
+    const after =
+      cursorOffset < value.length ? value.slice(cursorOffset + 1) : "";
+    // Highlight [Pasted ~N lines] tokens in cyan
+    return (
+      <Text>
+        {renderWithTokens(before)}
+        {chalk.inverse(cursorChar!)}
+        {renderWithTokens(after)}
+      </Text>
+    );
+  }
+
+  if (value.length === 0 && placeholder) {
+    return <Text>{chalk.grey(placeholder)}</Text>;
+  }
+
+  return <Text>{renderWithTokens(value)}</Text>;
+}
+
+/** Highlight [Pasted ~N lines] tokens so they stand out */
+function renderWithTokens(text: string): string {
+  return text.replace(/\[Pasted ~\d+ lines\]/g, (m) => theme.primary(m));
+}
+
+export default React.memo(TextInput);

package/packages/tui/src/Tips.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { Box, Text } from 'ink';
+import { getLang, t } from './i18n.js';
+import { theme } from './theme.js';
+
+const TIPS_EN = [
+    `Type ${theme.primary('/model')} to switch AI model`,
+    `Type ${theme.primary('/skill')} to view and activate skills`,
+    `Type ${theme.primary('/clear')} to clear conversation history`,
+    `Type ${theme.primary('/cancel')} to abort current generation`,
+    `Type ${theme.primary('/theme')} to change UI theme`,
+    `Type ${theme.primary('/lang')} to change UI language`,
+    `Create ${theme.primary('.acmecode.md')} in root to define AI rules`,
+    `AI segments large file reads to avoid context overflow`,
+    `AI auto-fixes tool names if it makes a typo`,
+    `${theme.primary('Ctrl+C')} aborts current operation`,
+    `Supports OpenAI, Claude, Gemini, Grok and more`,
+    `Use ${theme.primary('acmecode --list')} to see sessions`,
+    `Use ${theme.primary('acmecode [dir]')} to start in a directory`,
+    `Environment context (CWD, OS, Git) is automatically injected`,
+    `Specific prompts are optimized per AI family (Beast/Anthropic/Gemini)`,
+    `${theme.primary('AGENTS.md')} is automatically loaded as project spec`,
+    `Markdown rendering supports headers, code, lists, and checkboxes`,
+    `Use ${theme.primary('/model provider:model')} for quick switch`,
+    `Tool results are truncated if super long to save tokens`,
+    `Session titles are auto-generated from your first message`,
+];
+
+const TIPS_ZH = [
+    `输入 ${theme.primary('/model')} 切换 AI 模型`,
+    `输入 ${theme.primary('/skill')} 查看和激活技能`,
+    `输入 ${theme.primary('/clear')} 清空对话历史`,
+    `输入 ${theme.primary('/cancel')} 中断正在生成的回复`,
+    `输入 ${theme.primary('/theme')} 切换界面主题`,
+    `输入 ${theme.primary('/lang')} 切换界面语言`,
+    `在项目根目录创建 ${theme.primary('.acmecode.md')} 文件来定义 AI 编码规范`,
+    `读大文件时，AI 会自动分段读取，避免上下文溢出`,
+    `工具调用失败时，AI 会自动修复工具名称并重试`,
+    `${theme.primary('Ctrl+C')} 可以中断当前操作`,
+    `支持 OpenAI、Claude、Gemini、Grok 等 8 种 AI 模型`,
+    `使用 ${theme.primary('acmecode --list')} 查看所有历史会话`,
+    `使用 ${theme.primary('acmecode [dir]')} 在指定目录启动 AcmeCode`,
+    `系统会自动注入工作目录、操作系统等环境上下文给 AI`,
+    `模型特定提示词会根据你使用的 AI 自动优化`,
+    `${theme.primary('AGENTS.md')} 和 ${theme.primary('CLAUDE.md')} 文件也会被自动加载为项目规范`,
+    `AI 回复支持 Markdown 渲染：标题、代码块、列表都会美化显示`,
+    `使用 ${theme.primary('/model provider:model')} 快速切换到指定模型`,
+    `每个 AI 模型有独立优化的系统提示词（Beast/Anthropic/Gemini 三大家族）`,
+    `工具结果超长时会自动截断，但完整内容仍会发送给 AI`,
+    `会话标题会自动从你的第一条消息生成`,
+];
+
+export default function Tips(): React.ReactElement {
+    const [tip] = useState(() => {
+        const list = getLang() === 'zh' ? TIPS_ZH : TIPS_EN;
+        return list[Math.floor(Math.random() * list.length)]!;
+    });
+
+    return (
+        <Box>
+            <Text>{theme.warning('● ' + t('tip.prefix'))} {theme.muted('─')} {tip}</Text>
+        </Box>
+    );
+}

package/packages/tui/src/Toast.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import pc from 'picocolors';
+
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+
+interface ToastData {
+    message: string;
+    variant: ToastVariant;
+    title?: string;
+}
+
+interface ToastProps {
+    toast: ToastData | null;
+    onDismiss: () => void;
+    duration?: number;
+}
+
+const VARIANT_STYLES: Record<ToastVariant, { icon: string; color: (s: string) => string }> = {
+    success: { icon: '✔', color: pc.green },
+    error: { icon: '✖', color: pc.red },
+    warning: { icon: '⚠', color: pc.yellow },
+    info: { icon: 'ℹ', color: pc.cyan },
+};
+
+export default function Toast({ toast, onDismiss, duration = 3000 }: ToastProps): React.ReactElement | null {
+    useEffect(() => {
+        if (!toast) return;
+        const timer = setTimeout(onDismiss, duration);
+        return () => clearTimeout(timer);
+    }, [toast, duration, onDismiss]);
+
+    if (!toast) return null;
+
+    const style = VARIANT_STYLES[toast.variant];
+    const border = style.color('┃');
+
+    return (
+        <Box flexDirection="column" marginY={1}>
+            <Box>
+                <Text>
+                    {border} {style.color(style.icon)} {toast.title ? pc.bold(toast.title) + ' — ' : ''}{toast.message}
+                </Text>
+            </Box>
+        </Box>
+    );
+}
+
+// ── Toast hook for easy usage ──
+export function useToast() {
+    const [toast, setToast] = useState<ToastData | null>(null);
+
+    const show = (variant: ToastVariant, message: string, title?: string) => {
+        setToast({ message, variant, title });
+    };
+
+    const dismiss = () => setToast(null);
+
+    return { toast, show, dismiss };
+}

package/packages/tui/src/TodoItem.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import pc from 'picocolors';
+
+interface TodoItemProps {
+    status: 'pending' | 'in_progress' | 'completed';
+    content: string;
+}
+
+const STATUS_ICONS: Record<string, string> = {
+    pending: pc.dim('○'),
+    in_progress: pc.yellow('●'),
+    completed: pc.green('✔'),
+};
+
+export default function TodoItem({ status, content }: TodoItemProps): React.ReactElement {
+    const icon = STATUS_ICONS[status] || pc.dim('○');
+    const text = status === 'completed'
+        ? pc.strikethrough(pc.dim(content))
+        : status === 'in_progress'
+            ? pc.yellow(content)
+            : content;
+
+    return (
+        <Box>
+            <Text>{icon} {text}</Text>
+        </Box>
+    );
+}