标签 TUI 下的文章

最近想搞一搞 agent cli 开发。UI 层面,node 有比较成熟的 ink 方案。

但是看了下 go TUI 相关的解决方案,描述 UI 的方式有点别扭。当然可能是我没找到更好的实现思路。

所以实现了 rego ,取 react + go 的意思。

话不多说,先上代码。

package main

import (
    "fmt"
    "github.com/erweixin/rego"
)

func App(c rego.C) rego.Node {
    count := rego.Use(c, "count", 0)
    
    rego.UseKey(c, func(key rego.Key, r rune) {
        switch r {
        case '+': count.Set(count.Val + 1)
        case '-': count.Set(count.Val - 1)
        case 'q': c.Quit()
        }
    })
    
    return rego.VStack(
        rego.Text("Rego Counter").Bold(),
        rego.Text(fmt.Sprintf("Count: %d", count.Val)),
        rego.Spacer(),
        rego.Text("[+] 增加  [-] 减少  [q] 退出").Dim(),
    )
}

func main() {
    rego.Run(App)
}

运行效果:

Rego Counter
Count: 0

[+] 增加  [-] 减少  [q] 退出

仓库: https://github.com/erweixin/rego

对于多组件的使用可以参考: https://github.com/erweixin/rego/tree/main/examples/gallery

再贴一个 stream 组件的 demo 吧。

https://github.com/erweixin/rego/blob/main/examples/stream/stream_demo.gif

欢迎各位大佬试用、提 Issue 或 PR 。如果你也喜欢这种“在终端写 React”的思路,欢迎给个 Star 支持一下!👏

现在有了 ai 我遇到不懂的方法直接让 ai 分析输入输出和调用关系直接就出来了
例如:opencode 的源代码

用户发送消息
      ↓
┌─────────────────────────────────────────────────────────────┐
│  Server (routes/session.ts:733)                             │
│  SessionPrompt.prompt({ ...body, sessionID })               │
└─────────────────────┬───────────────────────────────────────┘
                      ↓
┌─────────────────────────────────────────────────────────────┐
│  SessionPrompt.prompt (prompt.ts:151)                       │
│  1. 创建用户消息                                             │
│  2. 调用 loop(sessionID)                                    │
└─────────────────────┬───────────────────────────────────────┘
                      ↓
┌─────────────────────────────────────────────────────────────┐
│  SessionPrompt.loop (prompt.ts:258)                         │
│  while (true) {                                             │
│    1. 获取 Agent 配置: Agent.get(lastUser.agent)            │
│    2. 解析工具: resolveTools({ agent, session, ... })       │
│    3. 创建处理器: SessionProcessor.create(...)              │
│    4. 调用处理器: processor.process({ user, agent, ... })   │
│  }                                                          │
└─────────────────────┬───────────────────────────────────────┘
                      ↓
┌─────────────────────────────────────────────────────────────┐
│  SessionProcessor.process (processor.ts:45)                 │
│  while (true) {                                             │
│    1. 调用 LLM: LLM.stream(streamInput)                     │
│    2. 处理流式响应:                                          │
│       - reasoning-delta → 更新推理部分                       │
│       - text-delta → 更新文本部分                            │
│       - tool-call → 执行工具                                 │
│    3. 工具执行完成后继续循环                                  │
│  }                                                          │
└─────────────────────┬───────────────────────────────────────┘
                      ↓
┌─────────────────────────────────────────────────────────────┐
│  LLM.stream (llm.ts)                                        │
│  1. 构建系统提示词                                           │
│  2. 调用 AI SDK: streamText({ model, messages, tools })     │
│  3. 返回流式响应                                             │
└─────────────────────────────────────────────────────────────┘

TUI ↔ Server 通信机制

架构图

┌─────────────────────────────────────────────────────────────┐
│  主线程 (thread.ts)                                         │
│  - 运行 TUI 界面                                            │
│  - 创建 RPC 客户端                                          │
└─────────────────────┬───────────────────────────────────────┘
                      │ RPC 通信
                      ▼
┌─────────────────────────────────────────────────────────────┐
│  Worker 线程 (worker.ts)                                    │
│  - 运行 Server.App()                                        │
│  - 处理 fetch 请求                                          │
│  - 转发事件                                                 │
└─────────────────────────────────────────────────────────────┘

Worker 启动流程

用户运行 `opencode`
         ↓
index.ts 解析命令 → TuiThreadCommand ($0 默认命令)
         ↓
thread.ts handler 执行:
         ↓
第 79-85 行:确定 worker 文件路径
         ↓
第 93 行:创建 Worker 线程
   const worker = new Worker(workerPath, { env: ... })
         ↓
第 101 行:创建 RPC 客户端与 Worker 通信
   const client = Rpc.client<typeof rpc>(worker)
         ↓
第 143 行:启动 TUI 界面
   const tuiPromise = tui({ url, fetch: customFetch, ... })

之前没有 ai 的时候经常一个方法看半天看不懂