gstack × Conductor 侧边栏集成设计让 Chrome 侧边栏成为 Agent 会话的实时视窗【免费下载链接】gstackUse Garry Tans exact Claude Code setup: 23 opinionated tools that serve as CEO, Designer, Eng Manager, Release Manager, Doc Engineer, and QA项目地址: https://gitcode.com/GitHub_Trending/gs/gstack本文基于 gstack 仓库中的设计文档 CONDUCTOR_CHROME_SIDEBAR_INTEGRATION.md完整解析 gstack 的 Chrome 侧边栏如何从独立运行的第二个 Claude 实例演进为 Conductor 主会话的实时视窗读完后你将理解三项核心 API 需求会话事件订阅、消息注入、工作区注册的设计动机与契约细节以及 gstack 侧已完成的扩展架构SSE 事件渲染、双令牌鉴权、PTY 终端如何与之对接。1. 问题背景双窗口盲点与两个互不说话的 Agent在 gstack 工作流中Claude 常在 Conductor 工作区内并行干活——编辑文件、跑测试、浏览你的应用。当前$B connect启动的 Chrome 侧边栏只能让你看到 browse 命令流但当 Claude 在 Conductor 工作区里做 QA、看你的网站时你只能盯着 Conductor 的聊天窗口看工具调用一条条滚过却看不到浏览器里实际发生了什么。原始设计文档指出这里存在一个结构性问题侧边栏目前运行的是它自己独立的 Claude 实例。它看不到主 Conductor 会话在做什么主会话也看不到侧边栏在做什么——这是两个互不通信的独立 Agent。这个双实例架构在仓库早期设计中有迹可循。GSTACK_BROWSER_V0.md 的架构图显示侧边栏 Agent 是一个claude -p子进程包装器Future: BoomLooper 即预留的替换点而 SIDEBAR_MESSAGE_FLOW.md 记录了现行实现侧边栏的主界面是一个交互式claudePTYxterm.js 独立的terminal-agent.ts子进程持有claude子进程。这些实现都证明了侧边栏自有 Agent的路线是可行的但正是它造成了上下文割裂。修复方向在设计文档中一句话概括让侧边栏成为 Conductor 会话的视窗window into the session而不是另一个独立的东西。2. 核心设计向 Conductor 提出的三项 API 需求设计文档把需求收敛为三个接口能力全部围绕一个 Agent、两个视图的目标。2.1 需求一让我们看到 Agent 正在做什么事件订阅侧边栏需要一条从 Conductor 会话到扩展的事件管道文档给出的形态是 SSE 流或 WebSocket事件随会话发生实时推送典型事件包括Claude 正在编辑src/App.tsxClaude 正在运行npm testClaude 说我会修复这个 CSS 问题……关键前提是侧边栏已经具备渲染这些事件的能力——工具调用渲染为紧凑徽章badge文本渲染为聊天气泡。缺的只是那根管子。配套的 CONDUCTOR_SESSION_API.md 把这一需求落地成了具体的 API 契约一个 SSE 端点GET http://127.0.0.1:{PORT}/workspace/{ID}/session/stream以 NDJSON 事件重放 Claude Code 的会话流。事件类型直接复用 Claude Code 的--output-format stream-json格式无需发明新 schemaevent: assistant data: {type:assistant,content:Let me check that page...,truncated:true} event: tool_use data: {type:tool_use,name:Bash,input:$B snapshot,truncated_input:true} event: tool_result data: {type:tool_result,name:Bash,output:[snapshot output...],truncated_output:true} event: turn_complete data: {type:turn_complete,input_tokens:1234,output_tokens:567,cost_usd:0.02}这条契约在 gstack 侧有现成的对接面extension/sidepanel.js 已经用EventSource消费 browse 服务器的/activity/streamSSE 流并带after游标参数实现断点续传withCredentials: true携带一次性 view-only cookie 鉴权。换成 Conductor 的会话流只是换一个 URL——渲染层逻辑不变。2.2 需求二让我们向会话中发送消息消息注入当用户在 Chrome 侧边栏输入点击另一个按钮时这条消息应当以用户在 workspace 聊天框中亲自输入的身份出现在 Conductor 会话里Agent 在下一轮自行拾取并执行。设计文档称之为魔法时刻the magic moment用户正盯着 Chrome 看发现了不对的地方直接在侧边栏输入纠正指令Claude 立刻响应——全程无需切换窗口。这条需求是一个 Agent、两个视图体验闭环的另一半需求一只管看需求二才让用户能改。2.3 需求三从目录创建 Conductor 工作区$B connect启动时已会为文件隔离创建一个 git worktree。需求三是把这个 worktree注册为 Conductor 工作区让用户能在 Conductor 的文件树中看到侧边栏 Agent 的文件改动。文档同时点明其战略意义这为多浏览器会话multiple browser sessions打好地基——每个浏览器会话拥有各自独立的工作区。3. 为什么这件事重要把黑盒变成可视过程设计文档用三个要点说明收益核心是消除/qa与/design-review这类技能的黑盒感Claude 说我发现了 3 个问题但你不知道它在看什么实时观看 Claude 测试你的应用——每一次点击、每一次导航、每一张截图都同步呈现在你正看着的 Chrome 里可以随时打断——不测一下移动端视图跳过那个页面无需切换窗口一个 Agent两个视图——正在改你代码的那个 Claude就是正在控制浏览器的那个 Claude。没有上下文复制没有状态陈旧stale state。4. gstack 侧的现状几乎零改动即可对接设计文档明确列出了 gstack 侧已完成并随版本发布的组件清单这也是把侧边栏变成会话视窗成本如此之低的根本原因已建成的 gstack 侧组件说明Chrome 扩展自动加载$B connect运行时自动装载manifest 中key字段固定扩展 ID服务端仅向固定 Origin 发放令牌侧边栏自动打开用户零配置流式事件渲染器工具调用、文本、结果的 SSE 驱动渲染聊天输入 消息队列输入缓冲与排队重连逻辑 状态横幅断线自动恢复会话管理带持久化聊天历史Agent 生命周期spawn / stop / kill / 超时检测仓库中这些组件都有对应实体可查证extension/manifest.jsonManifest V3sidePanel权限 固定key对应POST /extension-token的 pinned-origin 发令牌机制host_permissions仅放行http://127.0.0.1:*/与ws://127.0.0.1:*/与 browse 服务器的本地信任模型一致extension/sidepanel.jsEventSource消费/activity/stream先取 view-only cookie 再开流after参数续传extension/sidepanel-terminal.js 与 extension/background.jsPTY 终端与服务引导/health探活 →/extension-token换令牌 →POST /pty-session→ WebSocket 握手SIDEBAR_MESSAGE_FLOW.md完整的启动时序、双令牌模型与威胁模型文档。文档结论是gstack 侧唯一要做的改动是把数据源从本地claude -p子进程换成Conductor 会话流。扩展代码保持不变。值得注意的安全设计同样来自现有实现SIDEBAR_MESSAGE_FLOW.md 中的双令牌模型AUTH_TOKEN用于/pty-session短生命周期gstack-pty.token经Sec-WebSocket-Protocol传递用于/ws升级鉴权二者严格不互通正是为令牌泄漏不能升级为 shell 访问而设计的分层隔离——Conductor 侧新增 SSE 端点时沿用同样的本地信任模型即可。5. Conductor 侧的 API 契约与关键设计决策CONDUCTOR_SESSION_API.md 给出了 Conductor 需要交付的完整服务端契约这里完整保留其核心内容。5.1 会话流端点与截断策略GET http://127.0.0.1:{PORT}/workspace/{ID}/session/streamSSENDJSON 事件如 2.1 节所示。内容截断规则工具输入/输出在流中上限 500 字符完整数据保留在 Conductor 的 UI 中。文档把截断明确定义为隐私特性privacy feature——长代码输出、文件内容、敏感工具结果永远不离开 Conductor 的完整 UI侧边栏是摘要视图不是替代品300px 宽的面板里长内容没有意义。5.2 工作区发现端点GET http://127.0.0.1:{PORT}/api/workspaces列出活跃工作区{ workspaces: [ { id: abc123, name: gstack, branch: garrytan/chrome-extension-ctrl, directory: /Users/garry/gstack, pid: 12345, active: true } ] }扩展通过匹配 browse 服务器 git 仓库来自/health响应与工作区的 directory 或 name 来自动选中工作区。5.3 安全模型仅本地回环Localhost-only与 Claude Code 自身 debug 输出同一信任模型默认无鉴权若 Conductor 希望加鉴权可在 workspace 列表里附带 Bearer token扩展在 SSE 请求中携带内容截断即隐私控制长内容不出 Conductor 完整 UI。5.4 设计决策表决策项选择理由传输层SSE而非 WebSocket单向、自动重连、更简单格式Claude 的 stream-jsonConductor 内部本就在解析它无新 schema发现机制HTTP 端点而非文件Chrome 扩展无法读文件系统鉴权无localhost与 browse 服务器、CDP 端口、Claude Code 一致截断500 字符侧边栏约 300px 宽长内容无用6. gstack 中已存在的 Conductor 集成点有意思的是gstack 并非第一次与 Conductor 打交道——仓库中已有若干为 Conductor 环境专门编写的适配代码可以印证Conductor 会话在 gstack 心智模型中的位置lib/is-conductor.tsConductor 宿主检测的单一事实来源。Conductor一个并行运行多个 coding agent 的 Mac 应用会在会话环境中设置CONDUCTOR_WORKSPACE_PATH/CONDUCTOR_PORT该辅助函数在调用时读取传入 env而非模块加载时快照原因注释写得很清楚——ESM 会把静态 import 提升加载期读取无法被测试用process.env.X ...固定lib/conductor-env-shim.tsConductor 工作区不继承用户交互式 shell 环境ANTHROPIC_API_KEY/OPENAI_API_KEY可能缺失而GSTACK_前缀形式存在。该 shim 在标准名空缺时把GSTACK_ANTHROPIC_API_KEY等提升为标准名供子进程gbrain embed、anthropic-ai/claude-agent-sdk等拾取conductor.json为 Conductor 宿主声明的脚本钩子setup/archive映射到bin/dev-setup、bin/dev-teardowntest/is-conductor.test.ts 与 test/conductor-env-shim.test.ts对上述两个适配点的单测覆盖。从源码结构看这些适配层说明 gstack 已把 Conductor 视为一等宿主first-class host本文所述的侧边栏集成是把这种关系从环境检测深化到会话级实时桥接。7. 实施路径与工作量估算综合 CONDUCTOR_SESSION_API.md两侧分工与步骤如下。扩展侧gstack5 步——当 Conductor API 就绪后侧边栏通过端口探测或手动输入发现 Conductor拉取/api/workspaces与 browse 服务器的仓库匹配对/workspace/{id}/session/stream打开EventSource渲染assistant 消息、工具名 图标、轮次边界、成本优雅降级Conductor 不可达时显示 Connect Conductor for full session view。服务端Conductor1) 按工作区重放 Claude Code stream-json 的 SSE 端点2)/api/workspaces发现端点3) 500 字符截断逻辑。工作量估算原文档结论Conductor 工程 2–3 天gstack 集成 1 天扩展侧约 200 行改动集中在sidepanel.js服务端约 100–200 行——前提是 Conductor 内部已捕获 Claude Code 的 stream-json它为自己的 UI 渲染本来就在捕获。8. 小结这份设计文档的价值在于把看 Agent 干活从产品愿景压缩成了三项可验收的接口需求事件订阅看、消息注入说、工作区注册文件树可见。gstack 侧的扩展、SSE 渲染器、双令牌鉴权、PTY 生命周期均已就位并被 SIDEBAR_MESSAGE_FLOW.md 完整文档化因此整个集成的剩余工作量几乎全部落在 Conductor 的会话流导出端点上。实现完成后一个 Agent、两个视图——在 Conductor 里写代码的 Claude 与在 Chrome 里被观察的 Claude——将是同一个 Agent/qa与/design-review的每一次点击和截图都将实时可见、随时可打断。【免费下载链接】gstackUse Garry Tans exact Claude Code setup: 23 opinionated tools that serve as CEO, Designer, Eng Manager, Release Manager, Doc Engineer, and QA项目地址: https://gitcode.com/GitHub_Trending/gs/gstack创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考