# Harness 风格三栏工作台

日期：2026-08-14

# 目标

参考本机 deepseek-harness 的工作台信息架构，给 Pi Agent Web 建立清晰的桌面分区：会话导航、对话任务画布、运行详情。不复制其业务代码或协议，只借鉴布局职责与响应式策略。

# 变更

• main.app-shell 默认采用“会话栏 / 自适应中心”两栏；用户打开链路、单次链路或工件后才扩展为第三个详情栏，避免空详情列长期占用阅读宽度。
• 链路历史、单次链路和工件预览统一复用 DetailsPanel；详情不再绝对定位覆盖消息流。
• 会话栏与桌面详情栏可通过拖拽或键盘方向键改变宽度，宽度范围分别限制在 220–420px 与 300–560px，并只保存为本地 UI 偏好。
• 前端职责拆分到 components/ColumnResizeHandle.tsx、components/DetailsPanels.tsx、hooks/useStoredState.ts 与 types.ts；main.tsx 保留会话、SSE 和页面编排，不再承载本次新增的详情展示与列宽交互实现。
• 左侧增加完整的“新建会话”按钮和会话分区标题；折叠态仅保留图标，不改变既有会话 API。
• 中央欢迎态与输入框收束到阅读宽度，输入框保持聊天底部的独立任务入口。
• 宽度小于 1180px 时，详情栏默认隐藏；用户打开链路或工件后以覆盖式抽屉展示，避免三栏挤压中心消息。移动端继续使用会话抽屉。

# 验证

• web/ 执行 npm run build：TypeScript 检查与 Vite 生产构建通过。
• 用本地 Vite 预览连接现有 Java 后端，确认真实会话历史可加载，右侧存在默认“详情”占位区；浏览器控制台无错误或警告。
• 仍需关注 Vite 单个压缩包大于 500 kB 的既有告警；本次未做拆包。

# 边界

• Pi Agent 当前没有多工作区领域模型，因此左栏的“会话”不是伪造的工作区选择器。
• 本次没有修改 /api/*、SSE 事件或 AgentLoop；仅消费既有会话、链路和工件接口。
• 默认隐藏详情栏以优先保证消息阅读宽度；用户打开详情后可调整受限的列宽偏好，而不是恢复自由浮层。