feat: add instance list columns and start action

docs/06-tasks.md

@@ -30,7 +30,7 @@
 | T-205 | 设置路径字段增加 Label、选择和搜索操作 | T-201 | DONE |
 | T-206 | 左侧导航、可取消路径搜索与新建实例表单语义 | T-205 | DONE |
 | T-207 | 接入新建实例的 Windows 目录选择器 | T-206 | DONE |
-| T-208 | 固化实例列表字段与启动操作列 | T-201 | TODO |
+| T-208 | 固化实例列表字段与启动操作列 | T-201 | DONE |
 
 ## Backlog
 

docs/current-state.md

@@ -3,11 +3,11 @@
 ## 快照
 
 - 日期：2026-07-22
-- 阶段：Phase 2 产品外壳（T-201 至 T-206 已完成）
-- 代码：已建立 Go module `chub`、`cmd/chub` 入口、logging 测试基座、浏览器 domain/application 合约、Chrome/Edge 参数/发现模块、启动 registry、Windows 身份/占用检查、优雅关闭、Job Object、真实 Chrome/Edge smoke、JSON 配置存储、启动恢复、CLI JSON 合约、应用内事件总线、UI 状态测试和 Windows smoke 脚本，T-001 至 T-003、T-101 至 T-104、T-201 至 T-206 已完成
-- UI：Gio 双页 Shell 使用左侧“实例/设置”导航；四个设置路径有独立异步可取消搜索，切换页面后输入和任务状态保留；新建实例表单使用 Label、Windows 原生目录选择器和 Chrome/Edge RadioButton；CLI `list/events` 已可用，`start/stop/restart` 等待 BrowserManager adapter
+- 阶段：Phase 2 产品外壳（T-201 至 T-208 已完成）
+- 代码：已建立 Go module `chub`、`cmd/chub` 入口、logging 测试基座、浏览器 domain/application 合约、Chrome/Edge 参数/发现模块、启动 registry、Windows 身份/占用检查、优雅关闭、Job Object、真实 Chrome/Edge smoke、JSON 配置存储、启动恢复、CLI JSON 合约、应用内事件总线、UI 状态测试和 Windows smoke 脚本，T-001 至 T-003、T-101 至 T-104、T-201 至 T-208 已完成
+- UI：Gio 双页 Shell 使用左侧“实例/设置”导航；实例列表固定显示实例名称、浏览器类型、用户数据目录、状态和启动；四个设置路径有独立异步可取消搜索，切换页面后输入和任务状态保留；新建实例表单使用 Label、Windows 原生目录选择器和 Chrome/Edge RadioButton；CLI `list/events` 已可用，`start/stop/restart` 等待 BrowserManager adapter
 - 浏览器核心：设计参考来自 `D:\OPC\shop_helm\internal\platform\chrome`，尚未复制或接入本项目
-- blocker：无；下一个任务为 T-208（固化实例列表字段与启动操作列）。
+- blocker：无；下一步可进入 BrowserManager application adapter，以及设置页路径选择器和真实 UI 操作接线。
 
 ## 当前目录
 

docs/tasks/T-208.md

@@ -3,7 +3,7 @@ id: T-208
 title: 固化实例列表字段与启动操作列
 phase: 2
 deps: [T-201]
-status: TODO
+status: DONE
 created: 2026-07-22
 owner: codex
 ---
@@ -29,8 +29,8 @@ owner: codex
 
 ## 执行记录
 
-- 状态：TODO
-- 变更：已建立列表字段和操作列契约。
-- 验证：待实现。
+- 状态：DONE
+- 变更：Gio 与 HTML 原型的实例列表统一为五列；实例行增加稳定 ID 与 User Data Dir；启动按钮按实例 ID 持有独立 Clickable，并提供当前 application adapter 未接入的明确反馈。
+- 验证：`gofmt`、HTML script syntax check、`go test ./...`、`go vet ./...`、Windows build/smoke 均通过。
 - 阻塞：无。
 - 残余风险：真实启动仍需要 BrowserManager application adapter。

docs/ui/README.md

@@ -8,7 +8,7 @@
 
 ## 评审场景
 
-1. 默认实例列表：运行中、启动中、被占用、已退出四种状态同时可见。
+1. 默认实例列表：每行显示实例名称、浏览器类型、用户数据目录、状态和启动按钮；运行中、启动中、被占用、已退出四种状态同时可见。
 2. 点击“新建实例”：检查实例名称、Chrome/Edge RadioButton、User Data Dir 选择入口、启动 URL（可选）和其他运行字段。
 3. 留空 user data dir 提交：观察字段级错误和输入保留。
 4. 点击运行中实例：查看 PID、路径、启动地址和操作入口。
@@ -33,6 +33,7 @@
 | --- | --- |
 | 顶级导航 | 稳定 page ID + 持久选中状态 |
 | 实例列表 | 虚拟化列表；实例 ID 而非行号作为身份 |
+| 实例列契约 | 固定为实例名称、浏览器类型、用户数据目录、状态、启动；每行启动按钮以实例 ID 独立持有状态 |
 | 启动表单 | 持久 editor/选择状态，显式提交，字段错误保留输入 |
 | 路径搜索 | 独立任务 ID、取消函数与结果通道；迟到结果按任务 ID 丢弃 |
 | 详情抽屉 | 自定义辅助面板，关闭后焦点返回实例行 |

docs/ui/browser-manager.html

@@ -238,7 +238,7 @@
 
         <section class="workspace" aria-labelledby="listTitle">
           <div class="toolbar"><div class="search"><span aria-hidden="true">⌕</span><input id="search" type="search" placeholder="搜索实例、路径或 PID" aria-label="搜索实例、路径或 PID"></div><select id="browserFilter" aria-label="筛选浏览器"><option value="all">全部浏览器</option><option value="chrome">Chrome</option><option value="edge">Edge</option></select><select id="statusFilter" aria-label="筛选状态"><option value="all">全部状态</option><option value="running">运行中</option><option value="starting">启动中</option><option value="occupied">被占用</option><option value="exited">已退出</option></select><div class="toolbar-spacer"></div><button class="secondary" id="refresh">↻ 刷新状态</button></div>
-          <div class="table-wrap"><table><caption id="listTitle" class="sr-only">浏览器实例列表</caption><thead><tr><th scope="col">实例</th><th scope="col">状态</th><th scope="col">PID</th><th scope="col">user data dir</th><th scope="col">最近启动</th><th scope="col"><span class="sr-only">操作</span></th></tr></thead><tbody id="instanceRows"></tbody></table><div class="empty-state" id="emptyState"><strong>没有匹配的实例</strong><span>尝试清除筛选，或新建一个浏览器实例。</span></div></div>
+          <div class="table-wrap"><table><caption id="listTitle" class="sr-only">浏览器实例列表</caption><thead><tr><th scope="col">实例名称</th><th scope="col">浏览器类型</th><th scope="col">用户数据目录</th><th scope="col">状态</th><th scope="col">启动</th></tr></thead><tbody id="instanceRows"></tbody></table><div class="empty-state" id="emptyState"><strong>没有匹配的实例</strong><span>尝试清除筛选，或新建一个浏览器实例。</span></div></div>
           <div class="table-footer"><span id="resultCount">显示 4 个实例</span><span>最后检查：刚刚</span></div>
         </section>
       </section>
@@ -285,9 +285,9 @@
     function renderRows() {
       const rows = filtered(), body = $('instanceRows'); body.innerHTML = '';
       rows.forEach(x => { const tr = document.createElement('tr'); tr.className = x.id === selectedId ? 'selected' : ''; tr.tabIndex = 0; tr.dataset.id = x.id; tr.innerHTML = `
-        <td><div class="instance-name"><span class="browser-logo ${x.kind}" aria-hidden="true">${x.kind === 'chrome' ? 'C' : 'E'}</span><div><strong>${x.name}</strong><small>${x.browser} · ${x.id}</small></div></div></td>
-        <td><span class="status ${statusClass(x.status)}">${x.statusText}</span></td><td class="mono">${x.pid}</td><td class="mono">${x.dir}</td><td>${x.started}</td>
-        <td><div class="row-actions"><button data-action="details" aria-label="查看 ${x.name} 详情">详情</button>${x.status === 'running' || x.status === 'occupied' ? `<button data-action="stop" aria-label="关闭 ${x.name}">关闭</button>` : `<button data-action="start" aria-label="启动 ${x.name}">启动</button>`}</div></td>`;
+        <td><div class="instance-name"><span class="browser-logo ${x.kind}" aria-hidden="true">${x.kind === 'chrome' ? 'C' : 'E'}</span><div><strong>${x.name}</strong><small>${x.id}</small></div></div></td>
+        <td>${x.browser}</td><td class="mono">${x.dir}</td><td><span class="status ${statusClass(x.status)}">${x.statusText}</span></td>
+        <td><div class="row-actions"><button data-action="start" aria-label="启动 ${x.name}">启动</button></div></td>`;
         tr.addEventListener('click', e => { if (!e.target.closest('button')) openDetails(x.id); });
         tr.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openDetails(x.id); } });
         tr.querySelectorAll('button').forEach(b => b.addEventListener('click', e => { e.stopPropagation(); selectedId = x.id; if (b.dataset.action === 'details') openDetails(x.id); else if (b.dataset.action === 'stop') openConfirm(x.id, false); else openConfirm(x.id, 'start'); }));