Feature/tui redesign

.gitignore

@@ -21,3 +21,4 @@ autoresearch/
 .playwright-cli/
 .superpowers/
 _*.md
+package-lock.json

packages/cli/.gitignore

@@ -0,0 +1,2 @@
+.test-chat-history/
+.test-chat-session/

packages/cli/TUI_TESTING.md

@@ -0,0 +1,204 @@
+# InkOS TUI 测试指南
+
+## 概述
+
+TUI（Terminal User Interface）测试分为两种模式：
+1. **自动化测试**：测试UI组件逻辑（无需真实渲染）
+2. **手动测试模式**：在终端中实际运行TUI进行交互测试
+
+---
+
+## 自动化测试
+
+### 运行测试
+
+```bash
+# 在packages/cli目录下运行
+cd packages/cli
+npm test -- src/__tests__/chat-tui.test.ts
+```
+
+### 测试覆盖范围
+
+自动化测试覆盖以下关键逻辑：
+
+#### 1. 命令补全逻辑
+- ✅ Tab补全零参数命令（/exit, /clear → 无空格）
+- ✅ Tab补全需要参数的命令（/write, /switch → 有空格）
+- ✅ 命令列表完整性验证
+
+#### 2. 输入处理逻辑
+- ✅ 斜杠命令识别
+- ✅ 命令名称提取
+
+#### 3. 消息显示逻辑
+- ✅ 时间戳格式化（包括无效时间戳处理）
+- ✅ Token使用统计计算
+
+#### 4. 状态管理逻辑
+- ✅ 命令建议列表导航（↑↓循环）
+- ✅ 执行时间计算（MM:SS.T格式）
+
+#### 5. 边界情况处理
+- ✅ 空输入处理
+- ✅ 超长输入处理
+- ✅ 特殊字符输入处理（引号、$、\等）
+
+### 测试结果
+
+```
+✓ src/__tests__/chat-tui.test.ts (12 tests) 15ms
+
+ Test Files  1 passed (1)
+      Tests  12 passed (12)
+```
+
+---
+
+## 手动测试模式
+
+### 启动测试模式
+
+```bash
+# 在项目根目录运行
+npx tsx packages/cli/src/chat/test-mode.ts
+```
+
+### 测试前准备
+
+测试脚本会自动：
+1. 创建测试历史目录 `.test-tui-chat-history`
+2. 清理旧的测试数据
+3. 预填充测试消息（用于历史消息测试）
+
+### 测试场景清单
+
+启动后，你可以测试以下场景：
+
+#### 1. 基本输入测试
+- 输入普通文本：`写下一章`
+- 验证消息显示、时间戳格式
+
+#### 2. 命令补全测试
+- 输入 `/` 触发命令列表
+- 按 `Tab` 补全选中的命令
+- 验证补全后是否正确（零参数命令无空格，有参数命令有空格）
+
+#### 3. 命令导航测试
+- 输入 `/` 显示命令列表
+- 按 `↑` `↓` 导航命令列表
+- 验证循环导航是否工作
+
+#### 4. 历史消息测试
+- 查看预填充的测试消息
+- 验证时间戳显示、token统计
+
+#### 5. 清空测试
+- 输入 `/clear`
+- 验证历史消息被清空
+- 验证确认消息显示
+
+#### 6. 帮助测试
+- 输入 `/help`
+- 验证帮助信息显示（命令列表、Tab提示）
+
+#### 7. 退出测试
+- 输入 `/exit` 或 `/quit`
+- 或按 `Esc` 退出
+- 验证正在执行时的二次确认（按两次Esc强制退出）
+
+#### 8. 错误处理测试
+- 输入不存在的命令：`/invalid`
+- 验证错误消息显示
+- 输入不存在的book：`/switch missing-book`
+- 验证错误消息和历史记录
+
+---
+
+## TUI功能清单
+
+### 快捷键
+
+| 按键 | 功能 |
+|------|------|
+| `Tab` | 补全选中的命令 |
+| `↑` / `↓` | 导航命令建议列表 |
+| `Esc` | 退出（执行中按两次强制退出） |
+| `Enter` | 提交输入 |
+
+### 可用命令
+
+| 命令 | 参数 | 说明 |
+|------|------|------|
+| `/write` | `[--guidance '指导']` | 写下一章 |
+| `/audit` | `[章节号]` | 审计章节 |
+| `/revise` | `<章节号> [--mode polish\|rewrite]` | 修改章节 |
+| `/status` | - | 显示项目状态 |
+| `/clear` | - | 清空对话历史 |
+| `/switch` | `<book-id>` | 切换到其他book |
+| `/help` | - | 显示帮助信息 |
+| `/exit` `/quit` | - | 退出聊天界面 |
+
+### UI特性
+
+- ✅ 命令自动补全（Tab键）
+- ✅ 命令建议列表（输入`/`触发）
+- ✅ 执行状态显示（spinner + 计时器）
+- ✅ 执行元数据显示（model、tool、provider）
+- ✅ 流式内容显示
+- ✅ 历史消息加载
+- ✅ Token使用统计
+- ✅ 错误友好提示
+
+---
+
+## 测试最佳实践
+
+### 自动化测试
+- 定期运行自动化测试确保UI逻辑正确
+- 修改UI逻辑后立即添加相关测试
+- 测试边界情况（空输入、超长输入、特殊字符）
+
+### 手动测试
+- 在提交前进行完整的手动测试流程
+- 特别关注用户体验细节（补全、导航、错误提示）
+- 测试不同终端尺寸下的显示效果
+
+### 调试技巧
+- 使用 `console.log` 输出调试信息（会被Ink捕获显示）
+- 检查 `.test-tui-chat-history` 目录中的历史文件
+- 查看终端输出中的错误栈
+
+---
+
+## 常见问题
+
+### Q: TUI启动失败？
+A: 检查以下几点：
+1. 是否在项目根目录运行
+2. Node.js版本是否符合要求（≥20）
+3. 是否有终端交互权限
+
+### Q: 命令补全不工作？
+A: 确保：
+1. 输入以 `/` 开头
+2. 命令建议列表可见
+3. 按 `Tab` 时有选中项
+
+### Q: 如何查看测试数据？
+A: 查看测试历史目录：
+```bash
+cat .test-tui-chat-history/test-book.json
+```
+
+---
+
+## 贡献测试
+
+如果你发现新的测试场景或边界情况：
+
+1. 在 `chat-tui.test.ts` 中添加自动化测试
+2. 在 `test-mode.ts` 中添加测试场景提示
+3. 更新本文档的测试清单
+
+Happy Testing! 🧪

packages/cli/package.json

@@ -48,11 +48,16 @@
     "commander": "^13.0.0",
     "dotenv": "^16.4.0",
     "epub-gen-memory": "^1.0.10",
-    "marked": "^15.0.0"
+    "ink": "^6.8.0",
+    "ink-spinner": "^5.0.0",
+    "ink-text-input": "^6.0.0",
+    "marked": "^15.0.0",
+    "react": "^19.2.4"
   },
   "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.14",
     "typescript": "^5.8.0",
-    "vitest": "^3.0.0",
-    "@types/node": "^22.0.0"
+    "vitest": "^3.0.0"
   }
 }

packages/cli/src/__tests__/chat-commands.test.ts

@@ -0,0 +1,150 @@
+/**
+ * Tests for slash command parser.
+ */
+
+import { describe, test, expect } from "vitest";
+import {
+  getAutocompleteInput,
+  parseSlashCommand,
+  SLASH_COMMANDS,
+  validateCommandArgs,
+} from "../chat/commands.js";
+
+describe("Slash Commands", () => {
+  test("should parse /write command", () => {
+    const result = parseSlashCommand("/write");
+
+    expect(result.valid).toBe(true);
+    if (result.valid) {
+      expect(result.command).toBe("write");
+      expect(result.args).toEqual([]);
+    }
+  });
+
+  test("should parse /write with guidance", () => {
+    const result = parseSlashCommand("/write --guidance '增加动作戏'");
+
+    expect(result.valid).toBe(true);
+    if (result.valid) {
+      expect(result.command).toBe("write");
+      expect(result.options.guidance).toBe("增加动作戏"); // Quotes are stripped
+    }
+  });
+
+  test("should parse /audit with chapter number", () => {
+    const result = parseSlashCommand("/audit 5");
+
+    expect(result.valid).toBe(true);
+    if (result.valid) {
+      expect(result.command).toBe("audit");
+      expect(result.args).toEqual(["5"]);
+    }
+  });
+
+  test("should parse /revise with mode", () => {
+    const result = parseSlashCommand("/revise 5 --mode polish");
+
+    expect(result.valid).toBe(true);
+    if (result.valid) {
+      expect(result.command).toBe("revise");
+      expect(result.args).toEqual(["5"]);
+      expect(result.options.mode).toBe("polish");
+    }
+  });
+
+  test("should parse /switch command", () => {
+    const result = parseSlashCommand("/switch my-book");
+
+    expect(result.valid).toBe(true);
+    if (result.valid) {
+      expect(result.command).toBe("switch");
+      expect(result.args).toEqual(["my-book"]);
+    }
+  });
+
+  test("should reject invalid command", () => {
+    const result = parseSlashCommand("/invalid");
+
+    expect(result.valid).toBe(false);
+    if (!result.valid) {
+      expect(result.error).toContain("未知命令");
+    }
+  });
+
+  test("should require argument for /switch", () => {
+    const result = parseSlashCommand("/switch");
+
+    expect(result.valid).toBe(false);
+    if (!result.valid) {
+      expect(result.error).toContain("至少需要");
+    }
+  });
+
+  test("should reject extra positional args for zero-arg commands", () => {
+    const result = parseSlashCommand("/status foo");
+
+    expect(result.valid).toBe(false);
+    if (!result.valid) {
+      expect(result.error).toContain("不接受额外参数");
+    }
+  });
+
+  test("should reject extra positional args for single-arg commands", () => {
+    const result = parseSlashCommand("/switch my-book extra");
+
+    expect(result.valid).toBe(false);
+    if (!result.valid) {
+      expect(result.error).toContain("最多接受 1 个参数");
+    }
+  });
+
+  test("should reject positional args for option-only commands", () => {
+    const result = parseSlashCommand("/write draft");
+
+    expect(result.valid).toBe(false);
+    if (!result.valid) {
+      expect(result.error).toContain("不接受额外参数");
+    }
+  });
+
+  test("should enforce max positional args in validateCommandArgs", () => {
+    const result = validateCommandArgs("switch", ["my-book", "extra"]);
+
+    expect(result.valid).toBe(false);
+    if (!result.valid) {
+      expect(result.error).toContain("最多接受 1 个参数");
+    }
+  });
+
+  test("should parse /exit even with trailing whitespace", () => {
+    const result = parseSlashCommand("/exit ");
+
+    expect(result.valid).toBe(true);
+    if (result.valid) {
+      expect(result.command).toBe("exit");
+      expect(result.args).toEqual([]);
+    }
+  });
+
+  test("should not append trailing space for zero-argument autocomplete commands", () => {
+    expect(getAutocompleteInput("exit")).toBe("/exit");
+    expect(getAutocompleteInput("clear")).toBe("/clear");
+  });
+
+  test("should append trailing space for autocomplete commands expecting more input", () => {
+    expect(getAutocompleteInput("write")).toBe("/write ");
+    expect(getAutocompleteInput("switch")).toBe("/switch ");
+  });
+
+  test("should have all expected commands", () => {
+    const commands = Object.keys(SLASH_COMMANDS);
+
+    expect(commands).toContain("write");
+    expect(commands).toContain("audit");
+    expect(commands).toContain("revise");
+    expect(commands).toContain("status");
+    expect(commands).toContain("clear");
+    expect(commands).toContain("switch");
+    expect(commands).toContain("help");
+  });
+});