diff --git a/apps/desktop/README.md b/apps/desktop/README.md index 4654ea1b..01cbfa36 100644 --- a/apps/desktop/README.md +++ b/apps/desktop/README.md @@ -466,255 +466,26 @@ pnpm --filter @multica/desktop add -D @types/qrcode.react --- -## 八、实现步骤计划 +## 八、待办事项 -### Phase 1: 统一布局与路由重构 +### 功能开发 -**目标**: 统一页面结构，移除 /admin 子路由 +#### 设备授权与白名单 -#### Step 1.1: 路由重构 +- [ ] Client 连接授权弹窗 +- [ ] 已授权设备白名单管理 +- [ ] 显示当前连接的 Client 数量 -- [x] 重构 `App.tsx` 路由 - - 移除 `/admin` 子路由 - - 统一页面结构: / (Home) / /chat / /tools / /skills -- [x] 创建 `pages/layout.tsx` - 全局布局 - - Header: Logo + 标题 + Settings 按钮 - - Tabs: Home / Chat / Tools / Skills - - Content Area: 子路由出口 -- [x] 移动页面文件到根级别 +#### Settings 页面 -#### Step 1.2: Home 页面 (三入口) +- [ ] Gateway URL 配置 +- [ ] Theme 切换 (Light / Dark / System) +- [ ] 打开 credentials.json5 按钮 -- [x] 重构 `pages/home.tsx` - - 左侧二维码 + 右侧 Agent 状态面板 - - 底部: Open Chat 按钮 + Connect to Remote (Coming soon) -- [x] 安装 `qrcode.react` 依赖 -- [x] 创建 `components/qr-code.tsx` - 分享二维码组件 - - 生成二维码数据 (hubId, agentId, token, gateway, expires) - - 倒计时显示 + 自动过期刷新 - - Refresh 按钮 + Copy Link 按钮 - - 装饰性角落边框 +### 联调测试 -#### Step 1.3: Chat 页面 (双模式) - -- [ ] 重构 `pages/chat.tsx` - - 顶部模式切换: Local Agent / Remote Agent - - 支持本地 Agent 直接调用 - - 支持远程 Agent WebSocket 连接 -- [ ] 创建 `hooks/use-local-agent.ts` - 本地 Agent 调用 -- [ ] 创建 `hooks/use-remote-agent.ts` - 远程 Agent 连接 - -**交付物**: 统一的页面结构，Home 页面三入口可用 - ---- - -### Phase 2: IPC 集成与 Hub 启动 ✅ (完成) - -**目标**: 在 Main Process 中启动 Hub，通过 IPC 与 Renderer 通信 - -#### Step 2.1: IPC 基础设施 - -- [x] 创建 `electron/ipc/` 目录结构 -- [x] 创建 `electron/ipc/index.ts` - 统一注册 handlers -- [x] 创建 `electron/ipc/agent.ts` - Tools 相关 IPC handlers -- [x] 创建 `electron/ipc/skills.ts` - Skills 相关 IPC handlers -- [x] 更新 `electron/main.ts` - 注册 IPC handlers - -#### Step 2.2: Hub 集成 - -- [x] 创建 `electron/ipc/hub.ts` - Hub 管理 -- [x] 实现 Hub 自动启动 (App ready 时) -- [x] 实现 Agent 自动创建 -- [x] 实现 Hub 状态查询 (`hub:getStatus`) - -#### Step 2.3: Preload 脚本 - -- [x] 更新 `electron/preload.ts` - - 暴露 `window.electronAPI.hub.*` - - 暴露 `window.electronAPI.tools.*` - - 暴露 `window.electronAPI.skills.*` - -#### Step 2.4: Hooks 更新 - -- [x] 更新 `hooks/use-tools.ts` - 调用 IPC -- [x] 更新 `hooks/use-skills.ts` - 调用 IPC -- [x] 创建 `hooks/use-hub.ts` - Hub 状态 - -**交付物**: Hub 在主进程运行，UI 可通过 IPC 获取真实数据 - ---- - -### Phase 3: Tools 管理页面 - -**目标**: 查看和管理 Agent Tools - -#### Step 3.1: Tools 数据获取 - -- [x] 创建 `hooks/use-tools.ts` - - 获取所有 tools 列表 - - 获取 tool groups 和 profiles - - 管理 allow/deny 状态 - -#### Step 3.2: Tools UI 组件 - -- [x] 创建 `components/tool-list.tsx` - - 表格展示: Name / Group / Status / Toggle - - 按 Group 分组折叠 - - 开关切换 (Switch 组件) - - Profile 下拉选择器 (内置) - - Reset to Default 按钮 (内置) - -#### Step 3.3: Tools 页面整合 - -- [x] 更新 `pages/tools.tsx` - - Profile 选择器 - - Tool 列表 - - (状态持久化待后续实现) - -#### Step 3.4: Tools 实时同步 - -- [x] 实现 `tools:list` 从真实 Agent 获取活跃 tools -- [x] 实现 `tools:active` 获取当前活跃工具 -- [x] 实现 `tools:reload` 调用 Agent.reloadTools() -- [x] 暴露 AsyncAgent.getActiveTools() 和 reloadTools() 方法 -- [x] 实现 `tools:setStatus` 持久化到 profile config.json -- [ ] 验证 Tool 开关影响 Agent 行为 - -**交付物**: 可查看所有 Tools，切换 Profile，开关单个 Tool，实时影响 Agent - ---- - -### Phase 4: Skills 管理页面 - -**目标**: 查看、添加、删除 Skills - -#### Step 4.1: Skills 数据获取 - -- [x] 创建 `hooks/use-skills.ts` - - 加载所有 skills (mock data for now) - - 检查 eligibility - - 添加/删除/安装操作 (stub) - -#### Step 4.2: Skills UI 组件 - -- [x] 创建 `components/skill-list.tsx` - - 表格展示: Name / Source / Status / Actions - - Status 徽章 (ready / missing / disabled) - - Action 按钮 (View / Install / Delete) - - Add Skill dialog (内置 skills.tsx) - - View Skill dialog (内置 skills.tsx) - -#### Step 4.3: Skills 页面整合 - -- [x] 更新 `pages/skills.tsx` - - Skill 列表 - - Add Skill 按钮 + dialog - - View Skill dialog - - Refresh 按钮 - -#### Step 4.4: Skills IPC 集成 - -- [x] 在 Agent 中添加 `getSkillsWithStatus()` 方法 -- [x] 在 AsyncAgent 中暴露 `getSkillsWithStatus()` 方法 -- [x] 实现 `skills:list` 从真实 Agent 获取 skills -- [x] 实现 `skills:get` 获取单个 skill 详情 -- [x] 实现 `skills:toggle` 返回当前 eligibility 状态 -- [x] 实现 `skills:reload` 重新加载 skills -- [x] 实现 `skills:add` 调用 `addSkill()` -- [x] 实现 `skills:remove` 调用 `removeSkill()` - -**交付物**: 可查看所有 Skills，查看 Skill 详情，显示 eligibility 状态 - ---- - -### Phase 5: 设置与完善 - -**目标**: Settings 页面 + 体验优化 - -#### Step 5.1: Settings 页面 - -- [ ] 创建 `components/settings-dialog.tsx` - - Gateway URL 配置 - - Theme 切换 (Light / Dark / System) - - 打开 credentials.json5 按钮 - -#### Step 5.2: 连接状态管理 - -- [ ] 创建 `components/connection-status.tsx` - - 显示 Gateway 连接状态 - - 显示已连接的 Client 信息 - - 显示 Agent 状态 - -#### Step 5.3: 体验优化 - -- [ ] Toast 通知 (操作成功/失败) -- [ ] Loading 状态优化 (各页面) -- [ ] 错误边界处理 (React Error Boundary) -- [ ] 二维码自动刷新 (5 分钟过期后自动刷新) - -**交付物**: 完整的管理功能，良好的用户体验 - ---- - -### Phase 6: Chat 页面与 Agent 联调 - -**目标**: 实现 Chat 功能，支持本地和远程 Agent - -#### Step 6.1: 本地 Chat 实现 - -- [ ] 重构 `pages/chat.tsx` - - 消息输入框 + 发送按钮 - - 消息历史展示 - - 流式响应显示 -- [ ] 创建 `hooks/use-local-agent.ts` - - 通过 IPC 调用 Agent.run() - - 处理流式响应 - - 管理消息历史 - -#### Step 6.2: 远程 Chat 实现 - -- [ ] 创建 `hooks/use-remote-agent.ts` - - 通过 Gateway WebSocket 连接 - - 处理远程消息 -- [ ] Chat 页面模式切换 - - Local Mode / Remote Mode 切换 - -**交付物**: 可与本地 Agent 对话，可连接远程 Agent - ---- - -### Phase 7: 联调与测试 - -**目标**: 完整流程联调 - -#### Step 7.1: 本地 Agent 联调 - -- [ ] Tools 开关实时影响 Agent +- [ ] Tools 开关实时影响 Agent 行为 - [ ] Skills 启用/禁用影响 Agent -- [ ] Chat 流式响应正常 - -#### Step 7.2: 远程连接联调 - - [ ] 扫码连接远程 Agent - [ ] Token 验证流程 -- [ ] 消息流转测试 - -#### Step 7.3: 异常处理 - -- [ ] 断开重连 -- [ ] Token 过期处理 -- [ ] Gateway 断开处理 - ---- - -## 九、当前进度摘要 - -| Phase | 名称 | 状态 | -| ------- | -------------- | ----------------------- | -| Phase 1 | 布局与路由 | ✅ 完成 | -| Phase 2 | IPC 集成与 Hub | ✅ 完成 | -| Phase 3 | Tools 管理 | ✅ UI + IPC 集成完成 | -| Phase 4 | Skills 管理 | ✅ UI + IPC 集成完成 | -| Phase 5 | 设置与完善 | ⏳ 待开始 | -| Phase 6 | Chat 页面 | ⏳ 待开始 (同事负责 UI) | -| Phase 7 | 联调测试 | ⏳ 待开始 | +- [ ] 断开重连、Token 过期处理