tui-clone

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

TUI Clone

TUI 克隆分析

Explore terminal user interfaces systematically to produce clone-ready documentation.

Key principle: Write findings to file immediately as discovered. This survives context compaction.

系统地探索终端用户界面，生成可用于克隆的文档。

核心原则：发现内容后立即写入文件。这样可以避免上下文压缩导致内容丢失。

Output File

输出文件

All findings go to:

tui-analysis-[app-name]-[timestamp].md

The timestamp ensures multiple sessions don't clobber each other.

所有分析结果将写入：

tui-analysis-[app-name]-[timestamp].md

时间戳可确保多个会话不会互相覆盖文件。

Process

操作流程

1. Setup and Initialize Output File

1. 环境设置与输出文件初始化

bash

source .claude/skills/tmux-cli-test/scripts/tmux_helpers.sh
TMUX_TEST_WIDTH=140
TMUX_TEST_HEIGHT=40

APP_NAME="lazygit"  # Set to target app
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
OUTPUT_FILE="tui-analysis-${APP_NAME}-${TIMESTAMP}.md"

bash

source .claude/skills/tmux-cli-test/scripts/tmux_helpers.sh
TMUX_TEST_WIDTH=140
TMUX_TEST_HEIGHT=40

APP_NAME="lazygit"  # 设置为目标应用
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
OUTPUT_FILE="tui-analysis-${APP_NAME}-${TIMESTAMP}.md"

Initialize output file with header

初始化输出文件并添加头部

cat > "$OUTPUT_FILE" << 'EOF'

[App Name] TUI Analysis

[应用名称] TUI 分析报告

Overview

概述

Purpose: [TODO]
Technology stack: [TODO]
Target users: [TODO]

用途: [待填写]
技术栈: [待填写]
目标用户: [待填写]

Screen Catalog

界面目录

EOF

echo "Output file: $OUTPUT_FILE"

undefined

EOF

echo "输出文件: $OUTPUT_FILE"

undefined

2. Launch Target and Capture Initial View

2. 启动目标应用并捕获初始视图

bash

SESSION="tui-analysis"
tmux_start "$SESSION" "$APP_NAME"
tmux_wait_for "$SESSION" "<ready-indicator>" 30

bash

SESSION="tui-analysis"
tmux_start "$SESSION" "$APP_NAME"
tmux_wait_for "$SESSION" "<ready-indicator>" 30

Immediately write initial view to file

立即将初始视图写入文件

{ echo "" echo "### Initial View" echo "- Entry: Launch command" echo '

'     tmux_capture "$SESSION"     echo '

' } >> "$OUTPUT_FILE"

echo "Wrote initial view to $OUTPUT_FILE"

undefined

{ echo "" echo "### 初始视图" echo "- 进入方式: 启动命令" echo '

'     tmux_capture "$SESSION"     echo '

' } >> "$OUTPUT_FILE"

echo "已将初始视图写入 $OUTPUT_FILE"

undefined

3. Write Screen Function

3. 编写界面记录函数

Use this helper to append each discovered screen:

bash

write_screen() {
    local name="$1"
    local entry="$2"
    local session="$3"

    {
        echo ""
        echo "### $name"
        echo "- Entry: $entry"
        echo '```'
        tmux_capture "$session"
        echo '```'
    } >> "$OUTPUT_FILE"

    echo "Wrote screen '$name' to $OUTPUT_FILE"
}

使用以下辅助函数来追加每个发现的界面：

bash

write_screen() {
    local name="$1"
    local entry="$2"
    local session="$3"

    {
        echo ""
        echo "### $name"
        echo "- 进入方式: $entry"
        echo '```'
        tmux_capture "$session"
        echo '```'
    } >> "$OUTPUT_FILE"

    echo "已将界面 '$name' 写入 $OUTPUT_FILE"
}

4. Explore and Write Immediately

4. 探索界面并立即记录

As you discover each screen, write it immediately:

bash

undefined

发现每个界面后，立即进行记录：

bash

undefined

Check for help screen

检查帮助界面

tmux_send "$SESSION" "?" if tmux_wait_for "$SESSION" "help|Help|Keybindings" 3; then write_screen "Help Screen" "Press ?" "$SESSION" fi tmux_send "$SESSION" Escape

tmux_send "$SESSION" "?" if tmux_wait_for "$SESSION" "help|Help|Keybindings" 3; then write_screen "帮助界面" "按下 ?" "$SESSION" fi tmux_send "$SESSION" Escape

Explore numbered tabs

探索数字标签页

for i in 1 2 3 4 5; do tmux_send "$SESSION" "$i" sleep 0.3 # Check if view changed meaningfully write_screen "Tab $i View" "Press $i" "$SESSION" done

undefined

for i in 1 2 3 4 5; do tmux_send "$SESSION" "$i" sleep 0.3 # 检查视图是否发生有意义的变化 write_screen "标签页 $i 视图" "按下 $i" "$SESSION" done

undefined

5. Write Keybindings Section

5. 编写快捷键部分

After exploring, append keybindings:

bash

{
    echo ""
    echo "## Keybindings"
    echo ""
    echo "| Key | Context | Action |"
    echo "|-----|---------|--------|"
    echo "| ? | Global | Show help |"
    echo "| q | Global | Quit |"
    echo "| j/k | List | Navigate up/down |"
    # Add more as discovered
} >> "$OUTPUT_FILE"

探索完成后，追加快捷键信息：

bash

{
    echo ""
    echo "## 快捷键"
    echo ""
    echo "| 按键 | 上下文 | 操作 |"
    echo "|-----|---------|--------|"
    echo "| ? | 全局 | 显示帮助 |"
    echo "| q | 全局 | 退出 |"
    echo "| j/k | 列表 | 上下导航 |"
    # 发现更多后继续添加
} >> "$OUTPUT_FILE"

6. Write Implementation Notes

6. 编写实现说明

At the end, append analysis:

bash

{
    echo ""
    echo "## Implementation Notes"
    echo ""
    echo "### Patterns Identified"
    echo "- [List patterns observed]"
    echo ""
    echo "### Recommended Tech Stack"
    echo "- [Your recommendations]"
    echo ""
    echo "### Complexity Assessment"
    echo "- [Your assessment]"
} >> "$OUTPUT_FILE"

最后，追加分析内容：

bash

{
    echo ""
    echo "## 实现说明"
    echo ""
    echo "### 已识别的模式"
    echo "- [列出观察到的模式]"
    echo ""
    echo "### 推荐技术栈"
    echo "- [你的推荐内容]"
    echo ""
    echo "### 复杂度评估"
    echo "- [你的评估内容]"
} >> "$OUTPUT_FILE"

Example Session: Analyzing lazygit

示例会话：分析 lazygit

bash

source .claude/skills/tmux-cli-test/scripts/tmux_helpers.sh
TMUX_TEST_WIDTH=140
TMUX_TEST_HEIGHT=40

APP_NAME="lazygit"
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
OUTPUT_FILE="tui-analysis-${APP_NAME}-${TIMESTAMP}.md"
SESSION="analyze-${APP_NAME}"

bash

source .claude/skills/tmux-cli-test/scripts/tmux_helpers.sh
TMUX_TEST_WIDTH=140
TMUX_TEST_HEIGHT=40

APP_NAME="lazygit"
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
OUTPUT_FILE="tui-analysis-${APP_NAME}-${TIMESTAMP}.md"
SESSION="analyze-${APP_NAME}"

Initialize output file

初始化输出文件

cat > "$OUTPUT_FILE" << EOF

$APP_NAME TUI Analysis

$APP_NAME TUI 分析报告

Overview

概述

Purpose: Git TUI client
Technology stack: Go + gocui/tcell
Target users: Developers who prefer terminal git workflow

用途: Git TUI 客户端
技术栈: Go + gocui/tcell
目标用户: 偏好终端Git工作流的开发者

Screen Catalog

界面目录

EOF

Launch and capture initial view

启动应用并捕获主视图

tmux_start "$SESSION" "$APP_NAME" tmux_wait_for "$SESSION" "Status" 15

{ echo "" echo "### Main View" echo "- Entry: Launch command" echo '

'     tmux_capture "$SESSION"     echo '

' } >> "$OUTPUT_FILE" echo "Wrote: Main View"

tmux_start "$SESSION" "$APP_NAME" tmux_wait_for "$SESSION" "Status" 15

{ echo "" echo "### 主视图" echo "- 进入方式: 启动命令" echo '

'     tmux_capture "$SESSION"     echo '

' } >> "$OUTPUT_FILE" echo "已写入: 主视图"

Check for help

检查帮助界面

tmux_send "$SESSION" "?" if tmux_wait_for "$SESSION" "Keybindings" 5; then { echo "" echo "### Help Screen" echo "- Entry: Press ?" echo '

'         tmux_capture "$SESSION"         echo '

' } >> "$OUTPUT_FILE" echo "Wrote: Help Screen" fi tmux_send "$SESSION" Escape

tmux_send "$SESSION" "?" if tmux_wait_for "$SESSION" "Keybindings" 5; then { echo "" echo "### 帮助界面" echo "- 进入方式: 按下 ?" echo '

'         tmux_capture "$SESSION"         echo '

' } >> "$OUTPUT_FILE" echo "已写入: 帮助界面" fi tmux_send "$SESSION" Escape

Explore numbered panels

探索数字面板

for i in 1 2 3 4 5; do tmux_send "$SESSION" "$i" sleep 0.3 { echo "" echo "### Panel $i" echo "- Entry: Press $i" echo '

'         tmux_capture "$SESSION"         echo '

' } >> "$OUTPUT_FILE" echo "Wrote: Panel $i" done

for i in 1 2 3 4 5; do tmux_send "$SESSION" "$i" sleep 0.3 { echo "" echo "### 面板 $i" echo "- 进入方式: 按下 $i" echo '

'         tmux_capture "$SESSION"         echo '

' } >> "$OUTPUT_FILE" echo "已写入: 面板 $i" done

Cleanup

清理会话

tmux_send "$SESSION" q tmux_wait_exit "$SESSION" 5

echo "Analysis complete: $OUTPUT_FILE"

undefined

tmux_send "$SESSION" q tmux_wait_exit "$SESSION" 5

echo "分析完成: $OUTPUT_FILE"

undefined

Resuming After Compaction

上下文压缩后恢复会话

If context compacts mid-session, find and read the output file to see progress:

bash

ls -la tui-analysis-*.md  # Find the current session's file
cat tui-analysis-lazygit-20260203-141523.md  # Read it

Then continue appending new discoveries to the same file. The timestamp in the filename helps identify which session you're continuing.

如果会话中途发生上下文压缩，找到并读取输出文件以查看进度：

bash

ls -la tui-analysis-*.md  # 找到当前会话的文件
cat tui-analysis-lazygit-20260203-141523.md  # 读取文件内容

然后继续将新发现的内容追加到同一个文件中。文件名中的时间戳可帮助你识别要继续的会话。

Additional Analysis Dimensions

额外分析维度

Beyond screens and keybindings, capture these for a complete clone spec:

除了界面和快捷键，还需捕获以下内容以生成完整的克隆规格：

7. Color/Style Analysis

7. 颜色/样式分析

Capture with ANSI codes to understand the color palette:

bash

{
    echo ""
    echo "## Color Palette"
    echo ""
    echo "Raw ANSI capture:"
    echo '```ansi'
    tmux_capture_ansi "$SESSION"
    echo '```'
} >> "$OUTPUT_FILE"

捕获ANSI代码以了解调色板：

bash

{
    echo ""
    echo "## 调色板"
    echo ""
    echo "原始ANSI捕获内容:"
    echo '```ansi'
    tmux_capture_ansi "$SESSION"
    echo '```'
} >> "$OUTPUT_FILE"

8. Component Inventory

8. 组件清单

Document reusable UI components observed:

bash

{
    echo ""
    echo "## Component Inventory"
    echo ""
    echo "| Component | Description | Observed In |"
    echo "|-----------|-------------|-------------|"
    echo "| List | Scrollable item list with selection | Main view, File picker |"
    echo "| Modal | Centered overlay dialog | Commit message, Confirmation |"
    echo "| Tabs | Numbered panel switcher | Top bar |"
    echo "| Status bar | Bottom info line | All views |"
    echo "| Progress | Loading/sync indicator | Push/pull operations |"
    echo "| Input | Text entry field | Search, Commit message |"
} >> "$OUTPUT_FILE"

记录观察到的可复用UI组件：

bash

{
    echo ""
    echo "## 组件清单"
    echo ""
    echo "| 组件 | 描述 | 出现位置 |"
    echo "|-----------|-------------|-------------|"
    echo "| 列表 | 可滚动的选项列表，支持选择 | 主视图、文件选择器 |"
    echo "| 模态框 | 居中的覆盖对话框 | 提交信息、确认窗口 |"
    echo "| 标签页 | 数字切换面板 | 顶部栏 |"
    echo "| 状态栏 | 底部信息栏 | 所有视图 |"
    echo "| 进度条 | 加载/同步指示器 | 推送/拉取操作 |"
    echo "| 输入框 | 文本输入字段 | 搜索、提交信息 |"
} >> "$OUTPUT_FILE"

9. Responsive Behavior

9. 响应式行为

Test terminal resize handling:

bash

undefined

测试终端窗口大小调整的处理逻辑：

bash

undefined

Resize terminal and capture

调整终端大小并捕获视图

tmux resize-pane -t "$SESSION" -x 80 -y 24 sleep 0.5 { echo "" echo "### Compact Layout (80x24)" echo '

'     tmux_capture "$SESSION"     echo '

' } >> "$OUTPUT_FILE"

tmux resize-pane -t "$SESSION" -x 200 -y 50 sleep 0.5 { echo "" echo "### Wide Layout (200x50)" echo '

'     tmux_capture "$SESSION"     echo '

' } >> "$OUTPUT_FILE"

undefined

tmux resize-pane -t "$SESSION" -x 80 -y 24 sleep 0.5 { echo "" echo "### 紧凑布局 (80x24)" echo '

'     tmux_capture "$SESSION"     echo '

' } >> "$OUTPUT_FILE"

tmux resize-pane -t "$SESSION" -x 200 -y 50 sleep 0.5 { echo "" echo "### 宽屏布局 (200x50)" echo '

'     tmux_capture "$SESSION"     echo '

' } >> "$OUTPUT_FILE"

undefined

10. State Transitions

10. 状态转换

Document view change triggers:

bash

{
    echo ""
    echo "## State Transitions"
    echo ""
    echo "| From | Trigger | To |"
    echo "|------|---------|-----|"
    echo "| Main | Enter on file | Diff view |"
    echo "| Main | c | Commit dialog |"
    echo "| Any | Escape | Previous view |"
    echo "| Any | q | Exit confirmation |"
} >> "$OUTPUT_FILE"

记录视图切换的触发条件：

bash

{
    echo ""
    echo "## 状态转换"
    echo ""
    echo "| 来源视图 | 触发条件 | 目标视图 |"
    echo "|------|---------|-----|"
    echo "| 主视图 | 在文件上按Enter | 差异视图 |"
    echo "| 主视图 | 按下c | 提交对话框 |"
    echo "| 任意视图 | 按下Escape | 上一视图 |"
    echo "| 任意视图 | 按下q | 退出确认窗口 |"
} >> "$OUTPUT_FILE"

11. Error/Loading States

11. 错误/加载状态

Look for and document:

Error messages (try invalid operations)
Loading spinners
Empty states
Confirmation dialogs

查找并记录：

错误信息（尝试执行无效操作）
加载动画
空状态
确认对话框

12. Data Structures

12. 数据结构

Document what data types the UI displays:

Lists (single select, multi-select)
Trees (expandable/collapsible)
Tables (columns, sorting)
Text views (scrollable, line numbers)
Diffs (side-by-side, unified)

记录UI显示的数据类型：

列表（单选、多选）
树形结构（可展开/折叠）
表格（列、排序）
文本视图（可滚动、行号）
差异对比（并排、统一格式）

ASCII Diagram Guidelines

ASCII 图表规范

When documenting layouts, use box-drawing characters:

┌─────────────────────────────────────────┐
│ Header / Title Bar                      │
├────────────────┬────────────────────────┤
│ Sidebar        │ Main Content           │
│                │                        │
│ - Item 1       │  Details here          │
│ > Item 2 *     │                        │
│ - Item 3       │                        │
├────────────────┴────────────────────────┤
│ Status Bar / Footer                     │
└─────────────────────────────────────────┘

Use these conventions:

```
>
```
for selected item
```
*
```
for active/focused
```
[Button]
```
for clickable
```
[x]
```
/
```
[ ]
```
for checkboxes
```
( )
```
/
```
(*)
```
for radio buttons
```
│
```
```
─
```
```
┌
```
```
┐
```
```
└
```
```
┘
```
```
├
```
```
┤
```
```
┬
```
```
┴
```
```
┼
```
for borders

记录布局时，使用方框绘制字符：

┌─────────────────────────────────────────┐
│ 头部/标题栏                              │
├────────────────┬────────────────────────┤
│ 侧边栏         │ 主内容区               │
│                │                        │
│ - 选项1        │ 详细信息展示           │
│ > 选项2 *      │                        │
│ - 选项3        │                        │
├────────────────┴────────────────────────┤
│ 状态栏/底部栏                           │
└─────────────────────────────────────────┘

使用以下约定：

```
>
```
表示选中的选项
```
*
```
表示当前激活/聚焦的元素
```
[按钮]
```
表示可点击元素
```
[x]
```
/
```
[ ]
```
表示复选框
```
( )
```
/
```
(*)
```
表示单选按钮
```
│
```
```
─
```
```
┌
```
```
┐
```
```
└
```
```
┘
```
```
├
```
```
┤
```
```
┬
```
```
┴
```
```
┼
```
用于绘制边框

Known TUI Commands

已知 TUI 命令

TUI	Launch Command	Ready Text
Claude Code	`claude`	`>` or prompt
OpenCode	`opencode`	Session or prompt
Codex	`codex`	Ready indicator
lazygit	`lazygit`	Status
lazydocker	`lazydocker`	Containers
htop	`htop`	CPU
btop	`btop`	CPU
k9s	`k9s`	Pods

TUI 应用	启动命令	就绪标识文本
Claude Code	`claude`	`>` 或提示符
OpenCode	`opencode`	会话或提示符
Codex	`codex`	就绪指示器
lazygit	`lazygit`	Status
lazydocker	`lazydocker`	Containers
htop	`htop`	CPU
btop	`btop`	CPU
k9s	`k9s`	Pods

Deliverable Checklist

交付物检查清单

The output file

tui-analysis-[app-name]-[timestamp].md

should contain:

Overview - Purpose, tech stack, target users
Screen Catalog - ASCII diagram + entry path for each view
Keybindings - Complete table with context
State Transitions - View change triggers
Component Inventory - Reusable UI elements
Color Palette - ANSI capture for styling
Responsive Behavior - Compact/wide layout captures
Error/Loading States - Edge case UI
Data Structures - Lists, trees, tables observed
Implementation Notes - Tech recommendations, complexity

输出文件

tui-analysis-[app-name]-[timestamp].md

应包含：

概述 - 用途、技术栈、目标用户
界面目录 - 每个视图的ASCII图表 + 进入路径
快捷键 - 包含上下文的完整表格
状态转换 - 视图切换触发条件
组件清单 - 可复用UI元素
调色板 - 用于样式的ANSI捕获内容
响应式行为 - 紧凑/宽屏布局捕获
错误/加载状态 - 边缘情况UI
数据结构 - 观察到的列表、树形结构、表格等
实现说明 - 技术推荐、复杂度评估

Quick Reference: What Makes a Good Clone Spec

快速参考：优质克隆规格的标准

Dimension	Question to Answer
Layout	How is the screen divided? Panels, sidebars, modals?
Navigation	How do users move between views? Keys, menus, tabs?
Selection	Single-select? Multi-select? How is selection shown?
Input	Text fields? How do they behave? Validation?
Feedback	Loading states? Success/error messages? Progress?
Scrolling	What scrolls? How is scroll position indicated?
Focus	What can be focused? How is focus shown?
Shortcuts	Global vs context-specific? Discoverable?
Theming	Hard-coded colors or configurable?
Resize	Fixed layout or responsive? Minimum size?

维度	需要回答的问题
布局	屏幕如何划分？面板、侧边栏、模态框？
导航	用户如何在视图间切换？按键、菜单、标签页？
选择	单选？多选？选择状态如何展示？
输入	文本字段？行为如何？是否有验证？
反馈	加载状态？成功/错误信息？进度提示？
滚动	哪些内容可滚动？滚动位置如何标识？
聚焦	哪些元素可被聚焦？聚焦状态如何展示？
快捷键	全局快捷键 vs 上下文特定快捷键？是否易于发现？
主题	硬编码颜色还是可配置？
窗口调整	固定布局还是响应式？最小尺寸是多少？