Claude Code Commander

Code Commander

See what your AI agents are actually doing. Run multiple coding agent sessions. Watch every file change in real time. One orchestrator to coordinate them all.

The Problem · How It Works · Orchestrator · Getting Started · Architecture

问题

你在终端中运行你的编码代理。它编辑文件、运行命令、构建功能。但你不能 *看见* 它在做什么。你正盯着一个滚动的终端，唯一能知道发生了什么变化的方法就是 git diff 完成之后。

现在将其乘以三到四个存储库——前端、后端、共享库。您打开了多个终端窗口，每个窗口中都运行着代理，并且对其中任何一个窗口中实际编写的代码都没有可见性。

其他所有工具都会给你一个聊天窗口。它们都不会在代码更改发生时向您显示代码更改，也不会让您浏览文件树，也不会在代理仍在工作时向您提供差异视图。

这就是指挥官解决的问题。

运作原理

graph LR
    subgraph Commander["Code Commander"]
        direction TB
        SB["Sidebar
All your projects"]
        TERM["Tabbed Terminals
Agent + shell tabs"]
        DIFF["Diff View
Every change, live"]
        TREE["File Explorer
What changed, what's new"]
        ENV["Env Variables
Per-project secrets"]
        EDIT["File Editor
Edit & save in-app"]
    end

    YOU([You]) --> SB
    SB --> TERM
    SB --> DIFF
    SB --> TREE
    SB --> ENV
    SB --> EDIT

    style Commander fill:#0d1117,stroke:#30363d,color:#e6edf3
    style YOU fill:#3fb950,stroke:#3fb950,color:#fff

1.添加您的项目

从侧边栏注册任何git存储库。添加任意数量的内容——前端、后端、基础设施、库、monorepo包。每个项目都有自己的独立工作区。

2.开始会话并与代理交谈

点击项目，点击 开始会话，然后在该目录中启动一个真正的CLI会话。这不是一个聊天包装器——它是一个完整的PTY终端，具有回滚、ANSI颜色、可点击链接和键盘输入。与你的代理人交谈，给它任务，问它问题。你可以在终端上做的一切，你都可以在这里做。

3.看看代理人在做什么——当它在做的时候

这是指挥官的核心。当代理工作时，您会看到：

• 实时文件树 --哪些文件被添加、修改或删除，并使用状态徽章实时更新
• 不同视角 --统一或并排的差异，语法突出显示，在代理编写代码时刷新
• 文件编辑器 --单击任何文件进行读取，并使用行号、脏指示符和Cmd+S进行编辑以保存
• 一键还原 --撤消每个文件的更改或还原整个代码库

你不必等待代理人完成。你不必跑 git diff你能看到每一个变化。

5.环境变量——安全，每个项目

点击 环境 顶部栏中的按钮打开Vercel风格的键值编辑器。为每个项目设置机密、API密钥或配置。默认情况下，值会通过眼睛切换进行屏蔽。

• 存储在 ~/.commander-central/envs/ — 从未在回购中，没有什么可不小心犯的
• 在生成时自动注入代理会话和shell终端
• .env* 文件也会显示在文件树中，因此如果您愿意，可以直接编辑它们

6.代理旁边的壳牌终端

每个项目都有一个 标签式终端区域代理选项卡始终存在，您可以根据需要生成任意数量的shell选项卡——运行开发服务器、构建、测试、linters等。

• 点击 + 在终端选项卡栏中生成新shell
• 每个shell都在项目目录中运行，并注入了env变量
• 关闭选项卡（x）以终止进程，或 exit 自动删除它
• 切换标签时，所有终端保持安装状态——无丢失状态

4.同时管理多个会话

侧边栏显示了每个带有实时状态指示器的项目：

  🟢  Active     — agent is generating output
  🟡  Waiting    — agent needs your input
  🔵  Starting   — session is booting up
  ⚪  Idle       — ready for the next prompt
  🔴  Error      — session crashed

立即在项目之间切换。每个都有自己的终端历史、差异状态和文件树。切换 自动接受 每个会话允许代理完全自主运行，或保持手动批准。

编排器

一旦你运行了多个会话，你就需要一个可以看到一切的代理。编排器是一个带有MCP工具的专用代理会话，使其能够控制其他所有会话。

graph LR
    You([You]) -->|talk to| Orch[Orchestrator Agent]
    Orch -->|start/stop
send commands
read output| S1[Agent: Frontend]
    Orch -->|start/stop
send commands
read output| S2[Agent: Backend]
    Orch -->|start/stop
send commands
read output| S3[Agent: Infra]
    Orch -->|read files
view diffs| Any[Any Codebase]

    style Orch fill:#58a6ff,stroke:#58a6ff,color:#fff
    style You fill:#3fb950,stroke:#3fb950,color:#fff

单击侧边栏顶部的编排器图标。它启动时带有权限绕过标志，因此可以不中断地运行。

你能对编排者说什么

*“在所有存储库中启动会话并运行其测试套件”*

*“后端代理卡住了——检查其输出并帮助它”*

*“从前端回购读取API类型，并将其发送到后端代理”*

*“哪些存储库有未提交的更改？用好消息提交所有更改”*

MCP工具

入门指南

git clone https://github.com/Dominien/code-commander.git
cd code-commander
npm install
npm run dev

先决条件

• Node.js 20+
• 在PATH中安装了基于CLI的AI编码代理
• Git

建筑

graph TB
    subgraph Electron["Electron Main Process"]
        direction TB
        CM["CodebaseManager
Lifecycle orchestration"]

        CM --> SC1["SessionController
Repo A"]
        CM --> SC2["SessionController
Repo B"]
        CM --> SC3["SessionController
Repo N..."]
        CM --> ORC["SessionController
Orchestrator"]
        CM --> API["McpServer
HTTP API on localhost"]

        SC1 --- PTY1["node-pty → agent CLI"]
        SC1 --- GIT1["GitManager
Diffs · File tree · Edit · Revert"]
        SC1 --- FW1["FileWatcher
Polling · No EMFILE"]
        SC1 --- SH1["ShellManager
Multiple shell PTYs"]

        CM --- ENV["EnvStore
Per-project env vars
~/.commander-central/envs/"]

        SC2 --- PTY2["node-pty → agent CLI"]
        SC3 --- PTY3["node-pty → agent CLI"]
        ORC --- PTY4["node-pty → agent CLI
with MCP tools"]
    end

    subgraph MCP["MCP Bridge (stdio ↔ HTTP)"]
        BRG["mcp-bridge.cjs"]
    end

    PTY4 |"stdin/stdout
(MCP protocol)"| BRG
    BRG |"HTTP
localhost"| API

    subgraph UI["Renderer Process"]
        direction TB
        APP["React 19 · Zustand · Tailwind CSS 4"]
        APP --- SB["Sidebar
Codebase list · Status dots"]
        APP --- CV["CodebaseView
File tree · Diff · Terminal"]
        APP --- OV["OrchestratorView
Dashboard · Terminal"]
    end

    Electron |"Electron IPC
Preload bridge"| UI

    style Electron fill:#0d1117,stroke:#30363d,color:#e6edf3
    style UI fill:#0d1117,stroke:#30363d,color:#e6edf3
    style MCP fill:#0d1117,stroke:#30363d,color:#e6edf3

为什么是stdio桥？

大多数CLI代理的MCP实现仅支持通过以下方式生成的服务器 command/args （stdio传输）。它们不支持直接连接到HTTP/SSE端点。因此，编排器的MCP工具通过桥梁工作：

sequenceDiagram
    participant CC as Orchestrator
(Agent CLI)
    participant Bridge as mcp-bridge.cjs
    participant API as McpServer
(Electron main)
    participant Session as Target Session

    CC->>Bridge: tool call via stdio
    Bridge->>API: HTTP POST /api/call
    API->>Session: Execute (read output, send input, etc.)
    Session-->>API: Result
    API-->>Bridge: JSON response
    Bridge-->>CC: tool result via stdio

桥脚本在运行时使用正确的端口生成 NODE_PATH 烤在里面。

技术栈

| | | |:--|:--| | 运行时 |电子33·节点pty| | 前端 |React 19·TypeScript 5.6·顺风CSS 4·Zustand 5| | 终端 |xterm.js 5.5（FitAddon、WebLinksAddon）| | Git |简单git·diff2html·highlight.js| | 主控程序 |@modelcontextprotocol/sdk（标准服务器传输）| | 存储 |电子存储器| | 构建 |电子vite 5·电子助洗剂25|

项目结构

src/
├── main/                        # Electron main process
│   ├── CodebaseManager.ts       # Codebase + orchestrator lifecycle
│   ├── SessionController.ts     # PTY session management per codebase
│   ├── ProcessManager.ts        # Spawns agent CLI via node-pty
│   ├── GitManager.ts            # Diffs, file trees, file editing, revert
│   ├── FileWatcher.ts           # Polling-based (avoids EMFILE on large repos)
│   ├── EnvStore.ts              # Per-project env var persistence (JSON)
│   ├── ShellManager.ts          # Multiple shell PTYs per codebase
│   ├── ipc-handlers.ts          # All IPC handler registrations
│   ├── store.ts                 # Persistent codebase storage
│   └── mcp/
│       ├── McpServer.ts         # HTTP JSON API for tool calls
│       └── mcp-config.ts        # Generates bridge script + .mcp.json
│
├── renderer/                    # React frontend
│   ├── App.tsx                  # Root — routing between views
│   ├── components/
│   │   ├── Sidebar.tsx          # Codebase list + orchestrator button
│   │   ├── CodebaseView.tsx     # Main workspace (explorer + diff + tabbed terminals)
│   │   ├── OrchestratorView.tsx # Orchestrator dashboard + terminal
│   │   ├── Terminal.tsx         # xterm.js with PTY integration (agent sessions)
│   │   ├── ShellTerminal.tsx    # xterm.js wrapper for shell PTYs
│   │   ├── DiffView.tsx         # Unified/split diff with syntax highlighting
│   │   ├── FileTree.tsx         # Recursive git-aware file explorer
│   │   ├── FilePreview.tsx      # File editor with line numbers + Cmd+S save
│   │   ├── EnvPanel.tsx         # Vercel-style env var key-value editor
│   │   ├── StatusIndicator.tsx  # Animated status dots
│   │   ├── AddCodebaseDialog.tsx
│   │   └── EmptyState.tsx
│   ├── hooks/
│   │   ├── useSession.ts       # Session start/stop/state
│   │   ├── useDiff.ts          # Git diff fetching
│   │   ├── useFileTree.ts      # File tree fetching
│   │   └── useIPC.ts           # Real-time IPC event subscriptions
│   ├── stores/appStore.ts      # Zustand — all UI state
│   └── styles/globals.css      # Dark theme + xterm + diff2html overrides
│
├── shared/types.ts              # TypeScript interfaces shared across processes
└── preload/index.ts             # Secure IPC bridge (context isolation)

发展

npm run dev          # Dev server with hot reload
npm run build        # Production build
npm run package      # DMG (macOS) / AppImage (Linux)
npm run rebuild      # Rebuild node-pty for your platform

贡献

欢迎PR。代码库足够小，可以在下午阅读。

如果要为编排器添加新的MCP工具：

1. 将工具定义添加到 TOOLS 数组in src/main/mcp/McpServer.ts
2. 在中添加处理程序 handleToolCall switch语句
3. 就是这样——桥脚本动态地获取工具

许可证

AGPL-3.0