Qwen Code Web Shell Workspaces 总览面板Layer B2实战指南从表格式健康总览到共享移除流程【免费下载链接】qwen-codeAn open-source AI coding agent that lives in your terminal.项目地址: https://gitcode.com/GitHub_Trending/qw/qwen-code本篇文章围绕 qwen-code 仓库中 Web Shell 的 Workspaces overview panel方案 Layer B2展开它把注册的全部 workspace 以一张表格的形式集中呈现包含健康度、会话数、MCP 状态、Git 分支与最近活跃时间并提供了 New task 与 Remove 等行内操作。读完本文你将掌握该面板的入口与列语义、行内操作的触发条件、移除流程对 daemon 各错误码workspace_busy/workspace_mismatch/ in-progress的处理方式以及对应的源码位置与测试覆盖可直接对照仓库复现和验证。背景Layer A 之后的聚合视图缺口Web Shell 侧边栏在 Layer A对应 PR #10407之后已经能为每个 workspace 渲染独立的 chips 与⋮菜单但没有任何一个单一入口列出所有已注册 workspace 及其健康状态——Projects 区域是当时唯一的聚合视图。Workspaces 总览面板Layer B2正是为了补齐这一缺口用一整页表格回答我的每个 workspace 现在是否健康、有多少会话在跑、MCP 是否全部连通这类问题而无需逐个打开会话。方案来源见 设计文档 中的 Layer B2 一节。本地复现环境搭建在仓库根目录执行以下两步即可拉起带两个 workspace 的 Web Shell 服务# 1. 构建web-shell 客户端产物 npm run build # 2. 在 loopback 上启动 serve注册主、副两个 workspace node dist/cli.js serve --workspace primary --workspace secondary复现文档建议让副 workspace 满足两个脏状态条件便于观察表格中的健康指标是一个携带本地改动dirty worktree的 git 仓库——用于验证 Branch 列的n changed徽标配置了一个故意损坏broken的 MCP server——用于验证 MCP 列的n failed徽标与告警语义。面板入口点Entry points面板有两条进入路径外加一个锁死场景入口行为源码位置Projects 区域末行的Manage workspaces…点击后聊天视图被替换为 Workspaces 面板返回箭头back arrow回到原视图WebShellSidebar.tsxProjects 头部manage-workspaces按钮、App.tsx面板渲染Embedder 注入的workspacesOverviewfooter item可选配项不在默认 footer 集合中需要显式加入footerItemsWebShellSidebar.tsx侧边栏锁定到单一 workspace此时 Projects 头部与 footer 均不渲染该入口lockedWorkspaceCwd存在即隐藏WebShellSidebar.tsx面板组件本体是WorkspacesOverviewPanelApp panel id 为workspaces完整页面由tanstack/react-table驱动风格对齐 Session Overview 面板根节点带data-testidworkspaces-overview-panel供 E2E 与可访问性测试定位参见 WorkspacesOverviewPanel.tsx。表格行与列语义一行对应一个已注册 workspace。daemon 持有的kind: live运行时不会被列出——它们在渲染前就被过滤掉了WorkspacesOverviewPanel.tsx。Name 列名称与徽标显示 display name若无则以文件夹 basename 兜底全路径通过 tooltip 呈现primary徽标secondary variant标记主 workspaceuntrusted徽标outline variant标记未受信 workspaceNameCell。Sessions 列活跃会话计数统计活跃 web-shell 会话数并按状态拆分n runningsecondary 徽标与n need attentiondestructive 徽标两类总数为分页截断时显示N每30 秒刷新一次SESSIONS_POLL_MS 30_000数据来自与侧边栏字节级相同的 catalog 查询因此 catalog store 会对面板与侧边栏订阅去重untrusted 行显示—会话页未返回时同样显示—绝不渲染占位的 0SessionsCell。MCP 列connected / configured显示connected/configuredconfigured 分母会剔除 disabled serverconfigured - disabled与侧边栏 chip 的 connected/enabled 约定一致有失败 server 时追加n failed徽标destructive variant在 ACP 运行时上报initialized之前恒为———占位态绝不显示0/0因为 MCP server 由 workspace 的 ACP 子进程发现运行时未起来时 0 是未知而非确实没有McpCell。Branch 列当前分支与脏文件数显示当前分支名工作树脏时追加n changedstaged unstaged untracked conflicted 之和刷新纪律与侧边栏 git chip 完全一致enrichedwait: true状态、60 秒慢轮询GIT_POLL_MS 60_000、window focus时立即刷新、仅在document.visibilityState visible时轮询、单次失败静默保留上次已知值useWorkspaceGitStatus。Last activity 列最近活跃取该 workspace 下所有会话updatedAt的最大值镜像 daemon 的getSummaryActivityTime语义——live 会话在首个 terminal 发布前没有updatedAt此时用createdAt兜底无任何会话时显示—有值则以相对时间渲染LastActivityCell。行内操作Actions每一行的操作区按状态做精细门控New task在该 workspace 内启动一个新 draft新会话草稿随后返回聊天视图。主行固定以 primary workspace 为目标点击期间该行按钮禁用防止并发创建creatingCwd状态门控。Remove仅在trusted、可移除removable true、非 primary的行出现且要求 daemon 在 capabilities 中通告workspace_runtime_removal特性removalEnabled 判定。移除走与侧边栏行同一套对话框与 busy/force 流程。Add workspace工具栏复用既有的注册对话框仅在 daemon 通告dynamic_workspace_registration时渲染由 App 侧注入onAddWorkspace。移除流程深度解析共享的 useWorkspaceRemovalLayer B2 的关键重构是移除流程从侧边栏抽离为workspaces/useWorkspaceRemoval钩子 WorkspaceRemovalDialog侧边栏行与总览面板共用同一实现。钩子内部的状态机覆盖了 daemon 返回的全部失败语义useWorkspaceRemoval.tsdaemon 应答处理成功触发onRemoved面板侧使 catalog 中该 workspace 失效 刷新 capabilities并清空对话框状态409 workspace_busy带 activity 报告展示 daemon 的 activity 报告武装 Force remove强制移除重试但若该 workspace 是当前活跃会话所在目录blockForce回调拒绝强制重试始终保持阻塞400 workspace_mismatch视为已被移除直接走onRemoved收敛409 workspace_removal_in_progress/workspace_registration_in_progress进入短暂重试循环最多 20 次、每次间隔 250 ms期间其他 writer 正在收敛循环中若转为workspace_busy则停止重试进入强制流程若转为workspace_mismatch则直接收敛重试耗尽后报错钩子通过optionsRef与useMemo保持 controller 身份稳定避免每次渲染重建导致表格列定义重算、进而重挂载所有单元格并重新触发 fetch——这是与tanstack/react-table列 memo 依赖协同的关键细节。数据获取纪律与请求成本面板的每个 facet 遵循同一条原则未知不等于零静默失败保留上次值页面不可见时不轮询。会话页查询与侧边栏共享 catalog store 去重git 状态慢轮询受 visibility 门控MCP 概览走useWorkspaceOverview的items: [mcp]子集。列元信息宽度与流体权重定义见 WorkspacesOverviewPanel.tsx其中 name/path 列支持 fluid 布局。自动化测试覆盖该功能拥有从单元到 E2E 的完整测试链全部可直接在仓库中查阅useWorkspaceRemoval.test.tsx——共享移除流程busy→force、mismatch、阻塞 force、错误路径WorkspacesOverviewPanel.test.tsx——行、徽标、计数、unknown-not-zero、untrusted 门控、操作按钮WebShellSidebar.workspace-removal.test.tsx——侧边栏基于共享钩子的移除流程 Manage workspaces 入口App.test.tsx——面板从侧边栏打开web-shell.workspaces-panel.spec.ts——端到端从 Projects 入口列出每个 workspace 及其健康状态、可移除行才出现共享移除对话框。后续演进Layer C 展望设计文档同时给出了该面板的后续方向daemon 侧新增GET /workspaces/:w/overview聚合端点以workspace_overview特性通告把当前每个 facet 一次请求的扇出收敛为单次请求——这也解释了当前面板逐 facet 拉取的请求成本设计详见 设计文档 的 Follow-ups 与 Data flow 章节。对于当前实现而言理解这张表格的列语义与移除状态机已经能完整支撑日常多 workspace 场景下的健康巡检与清理操作。【免费下载链接】qwen-codeAn open-source AI coding agent that lives in your terminal.项目地址: https://gitcode.com/GitHub_Trending/qw/qwen-code创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Qwen Code Web Shell Workspaces 总览面板（Layer B2）实战指南：从表格式健康总览到共享移除流程
Qwen Code Web Shell Workspaces 总览面板Layer B2实战指南从表格式健康总览到共享移除流程【免费下载链接】qwen-codeAn open-source AI coding agent that lives in your terminal.项目地址: https://gitcode.com/GitHub_Trending/qw/qwen-code本篇文章围绕 qwen-code 仓库中 Web Shell 的 Workspaces overview panel方案 Layer B2展开它把注册的全部 workspace 以一张表格的形式集中呈现包含健康度、会话数、MCP 状态、Git 分支与最近活跃时间并提供了 New task 与 Remove 等行内操作。读完本文你将掌握该面板的入口与列语义、行内操作的触发条件、移除流程对 daemon 各错误码workspace_busy/workspace_mismatch/ in-progress的处理方式以及对应的源码位置与测试覆盖可直接对照仓库复现和验证。背景Layer A 之后的聚合视图缺口Web Shell 侧边栏在 Layer A对应 PR #10407之后已经能为每个 workspace 渲染独立的 chips 与⋮菜单但没有任何一个单一入口列出所有已注册 workspace 及其健康状态——Projects 区域是当时唯一的聚合视图。Workspaces 总览面板Layer B2正是为了补齐这一缺口用一整页表格回答我的每个 workspace 现在是否健康、有多少会话在跑、MCP 是否全部连通这类问题而无需逐个打开会话。方案来源见 设计文档 中的 Layer B2 一节。本地复现环境搭建在仓库根目录执行以下两步即可拉起带两个 workspace 的 Web Shell 服务# 1. 构建web-shell 客户端产物 npm run build # 2. 在 loopback 上启动 serve注册主、副两个 workspace node dist/cli.js serve --workspace primary --workspace secondary复现文档建议让副 workspace 满足两个脏状态条件便于观察表格中的健康指标是一个携带本地改动dirty worktree的 git 仓库——用于验证 Branch 列的n changed徽标配置了一个故意损坏broken的 MCP server——用于验证 MCP 列的n failed徽标与告警语义。面板入口点Entry points面板有两条进入路径外加一个锁死场景入口行为源码位置Projects 区域末行的Manage workspaces…点击后聊天视图被替换为 Workspaces 面板返回箭头back arrow回到原视图WebShellSidebar.tsxProjects 头部manage-workspaces按钮、App.tsx面板渲染Embedder 注入的workspacesOverviewfooter item可选配项不在默认 footer 集合中需要显式加入footerItemsWebShellSidebar.tsx侧边栏锁定到单一 workspace此时 Projects 头部与 footer 均不渲染该入口lockedWorkspaceCwd存在即隐藏WebShellSidebar.tsx面板组件本体是WorkspacesOverviewPanelApp panel id 为workspaces完整页面由tanstack/react-table驱动风格对齐 Session Overview 面板根节点带data-testidworkspaces-overview-panel供 E2E 与可访问性测试定位参见 WorkspacesOverviewPanel.tsx。表格行与列语义一行对应一个已注册 workspace。daemon 持有的kind: live运行时不会被列出——它们在渲染前就被过滤掉了WorkspacesOverviewPanel.tsx。Name 列名称与徽标显示 display name若无则以文件夹 basename 兜底全路径通过 tooltip 呈现primary徽标secondary variant标记主 workspaceuntrusted徽标outline variant标记未受信 workspaceNameCell。Sessions 列活跃会话计数统计活跃 web-shell 会话数并按状态拆分n runningsecondary 徽标与n need attentiondestructive 徽标两类总数为分页截断时显示N每30 秒刷新一次SESSIONS_POLL_MS 30_000数据来自与侧边栏字节级相同的 catalog 查询因此 catalog store 会对面板与侧边栏订阅去重untrusted 行显示—会话页未返回时同样显示—绝不渲染占位的 0SessionsCell。MCP 列connected / configured显示connected/configuredconfigured 分母会剔除 disabled serverconfigured - disabled与侧边栏 chip 的 connected/enabled 约定一致有失败 server 时追加n failed徽标destructive variant在 ACP 运行时上报initialized之前恒为———占位态绝不显示0/0因为 MCP server 由 workspace 的 ACP 子进程发现运行时未起来时 0 是未知而非确实没有McpCell。Branch 列当前分支与脏文件数显示当前分支名工作树脏时追加n changedstaged unstaged untracked conflicted 之和刷新纪律与侧边栏 git chip 完全一致enrichedwait: true状态、60 秒慢轮询GIT_POLL_MS 60_000、window focus时立即刷新、仅在document.visibilityState visible时轮询、单次失败静默保留上次已知值useWorkspaceGitStatus。Last activity 列最近活跃取该 workspace 下所有会话updatedAt的最大值镜像 daemon 的getSummaryActivityTime语义——live 会话在首个 terminal 发布前没有updatedAt此时用createdAt兜底无任何会话时显示—有值则以相对时间渲染LastActivityCell。行内操作Actions每一行的操作区按状态做精细门控New task在该 workspace 内启动一个新 draft新会话草稿随后返回聊天视图。主行固定以 primary workspace 为目标点击期间该行按钮禁用防止并发创建creatingCwd状态门控。Remove仅在trusted、可移除removable true、非 primary的行出现且要求 daemon 在 capabilities 中通告workspace_runtime_removal特性removalEnabled 判定。移除走与侧边栏行同一套对话框与 busy/force 流程。Add workspace工具栏复用既有的注册对话框仅在 daemon 通告dynamic_workspace_registration时渲染由 App 侧注入onAddWorkspace。移除流程深度解析共享的 useWorkspaceRemovalLayer B2 的关键重构是移除流程从侧边栏抽离为workspaces/useWorkspaceRemoval钩子 WorkspaceRemovalDialog侧边栏行与总览面板共用同一实现。钩子内部的状态机覆盖了 daemon 返回的全部失败语义useWorkspaceRemoval.tsdaemon 应答处理成功触发onRemoved面板侧使 catalog 中该 workspace 失效 刷新 capabilities并清空对话框状态409 workspace_busy带 activity 报告展示 daemon 的 activity 报告武装 Force remove强制移除重试但若该 workspace 是当前活跃会话所在目录blockForce回调拒绝强制重试始终保持阻塞400 workspace_mismatch视为已被移除直接走onRemoved收敛409 workspace_removal_in_progress/workspace_registration_in_progress进入短暂重试循环最多 20 次、每次间隔 250 ms期间其他 writer 正在收敛循环中若转为workspace_busy则停止重试进入强制流程若转为workspace_mismatch则直接收敛重试耗尽后报错钩子通过optionsRef与useMemo保持 controller 身份稳定避免每次渲染重建导致表格列定义重算、进而重挂载所有单元格并重新触发 fetch——这是与tanstack/react-table列 memo 依赖协同的关键细节。数据获取纪律与请求成本面板的每个 facet 遵循同一条原则未知不等于零静默失败保留上次值页面不可见时不轮询。会话页查询与侧边栏共享 catalog store 去重git 状态慢轮询受 visibility 门控MCP 概览走useWorkspaceOverview的items: [mcp]子集。列元信息宽度与流体权重定义见 WorkspacesOverviewPanel.tsx其中 name/path 列支持 fluid 布局。自动化测试覆盖该功能拥有从单元到 E2E 的完整测试链全部可直接在仓库中查阅useWorkspaceRemoval.test.tsx——共享移除流程busy→force、mismatch、阻塞 force、错误路径WorkspacesOverviewPanel.test.tsx——行、徽标、计数、unknown-not-zero、untrusted 门控、操作按钮WebShellSidebar.workspace-removal.test.tsx——侧边栏基于共享钩子的移除流程 Manage workspaces 入口App.test.tsx——面板从侧边栏打开web-shell.workspaces-panel.spec.ts——端到端从 Projects 入口列出每个 workspace 及其健康状态、可移除行才出现共享移除对话框。后续演进Layer C 展望设计文档同时给出了该面板的后续方向daemon 侧新增GET /workspaces/:w/overview聚合端点以workspace_overview特性通告把当前每个 facet 一次请求的扇出收敛为单次请求——这也解释了当前面板逐 facet 拉取的请求成本设计详见 设计文档 的 Follow-ups 与 Data flow 章节。对于当前实现而言理解这张表格的列语义与移除状态机已经能完整支撑日常多 workspace 场景下的健康巡检与清理操作。【免费下载链接】qwen-codeAn open-source AI coding agent that lives in your terminal.项目地址: https://gitcode.com/GitHub_Trending/qw/qwen-code创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考