625 lines
31 KiB
Markdown
625 lines
31 KiB
Markdown
# sgClaw Floating Chat Frontend Implementation Plan
|
||
|
||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||
|
||
**Goal:** Replace the current debug-style `sgclaw-chat` UI with a complete floating-chat frontend that matches the product structure of Doubao's side panel while preserving the current SuperRPA bridge and configuration capabilities.
|
||
|
||
**Architecture:** Keep `chrome://superrpa-functions/sgclaw-chat` as the first delivery host so the new UI can be built and verified without waiting for the final page-floating container. Split the current monolithic Lit component into host adapter, state modules, typed message model, presentational components, and secondary panels so the same UI can later be mounted in a real injected floating window on normal web pages. Preserve the existing browser bridge (`sgclawConnect`, `sgclawStart`, `sgclawStop`, `sgclawSubmitTask`) and re-home logs/configuration into secondary panels instead of deleting them.
|
||
|
||
**Tech Stack:** Chromium WebUI, Lit, existing `FunctionsUI` router, SuperRPA browser bridge callbacks, current `sgclaw-config` config page logic, future floating host injection in SuperRPA.
|
||
|
||
## Product Target
|
||
|
||
The frontend target is a single-column chat product, not a multi-card debug workstation.
|
||
|
||
Final visual structure:
|
||
|
||
```text
|
||
Collapsed Fab
|
||
┌────────────┐
|
||
│ sgClaw ●2 │
|
||
└────────────┘
|
||
|
||
Expanded Chat
|
||
┌──────────────────────────────────────────┐
|
||
│ sgClaw | 当前网页：example.com │
|
||
│ [新对话] [历史] [设置] [收起] │
|
||
│ 状态：待命 / 执行中 / 出错 │
|
||
├──────────────────────────────────────────┤
|
||
│ 欢迎区 / 推荐动作 │
|
||
│ [总结当前页面] [提取表格] [执行网页操作] │
|
||
├──────────────────────────────────────────┤
|
||
│ 消息流 │
|
||
│ 用户消息 │
|
||
│ 助手消息 │
|
||
│ 步骤卡 / 结果卡 / 错误卡 │
|
||
├──────────────────────────────────────────┤
|
||
│ [网页执行] [页面问答] [页面总结] │
|
||
│ [上下文开关] [调试] [更多] │
|
||
│ ┌──────────────────────────────────────┐ │
|
||
│ │ 输入任务... │ │
|
||
│ └──────────────────────────────────────┘ │
|
||
│ [发送]│
|
||
└──────────────────────────────────────────┘
|
||
```
|
||
|
||
Core UX rules:
|
||
|
||
- The primary content area is always the message stream.
|
||
- `finalResult` becomes a result card inside the message stream.
|
||
- `logs` move into a hidden debug drawer.
|
||
- `start/stop` remain available but move to the header status area.
|
||
- Configuration remains available but opens inside a settings panel first, with route-navigation fallback to `chrome://superrpa-functions/sgclaw-config`.
|
||
- The same component tree must work in `FunctionsUI` first and later inside a real injected floating host.
|
||
|
||
## Scope
|
||
|
||
### In Scope For This Frontend Plan
|
||
|
||
- Complete visual redesign of `sgclaw-chat`
|
||
- Empty state, active chat state, running state, success state, error state
|
||
- Local conversation history UI
|
||
- Embedded settings panel
|
||
- Debug drawer
|
||
- Stable typed message model
|
||
- Separation of host bridge code from UI code
|
||
- Floating launcher state model
|
||
|
||
### Explicitly Out Of Scope For First Frontend Delivery
|
||
|
||
- Real attachment upload execution
|
||
- Deep-thinking or multi-skill plugin ecosystem
|
||
- Provider/protocol redesign on the Rust side
|
||
- Full page-injected floating host implementation
|
||
- New backend APIs beyond the current bridge
|
||
|
||
## Existing Baseline To Reuse
|
||
|
||
The implementation should reuse these existing assets instead of replacing them blindly:
|
||
|
||
- Host page routing: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/functions.ts`
|
||
- Existing chat entry registration: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/functions_manifest.json`
|
||
- Current chat page bridge logic: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.ts`
|
||
- Current floating state prototype: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-floating_state.ts`
|
||
- Current config UI and bridge: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-config/sgclaw-config.ts`
|
||
|
||
## Final File Layout
|
||
|
||
All implementation paths below are exact and rooted in `/home/zyl/projects/superRpa/src`.
|
||
|
||
### Core Chat Entry
|
||
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.html.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.css.ts`
|
||
|
||
### State Modules
|
||
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-floating_state.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_window_state.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_conversation_state.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_history_state.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_settings_state.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_state.ts`
|
||
|
||
### Host Adapter
|
||
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_host_adapter.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_runtime_bridge.ts`
|
||
|
||
### Message Model And Rendering
|
||
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_messages.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-list.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-card-user.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-card-assistant.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-card-step.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-card-result.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-card-error.ts`
|
||
|
||
### Shell Components
|
||
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-chat-shell.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-chat-header.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-chat-composer.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-history-panel.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-settings-panel.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-debug-drawer.ts`
|
||
|
||
### Build And Host Wiring
|
||
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/BUILD.gn`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/functions.html.ts`
|
||
|
||
### Tests
|
||
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-floating_state_mainline_unittest.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_mainline_unittest.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_window_state_mainline_unittest.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_history_state_mainline_unittest.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_settings_state_mainline_unittest.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_runtime_bridge_mainline_unittest.ts`
|
||
|
||
## Target State Model
|
||
|
||
Use a typed model instead of the current loose shape.
|
||
|
||
```ts
|
||
interface SgClawChatWindowState {
|
||
windowOpen: boolean;
|
||
activePanel: 'chat' | 'history' | 'settings' | 'debug';
|
||
unreadCount: number;
|
||
}
|
||
|
||
interface SgClawChatConversationState {
|
||
conversationId: string;
|
||
draftInput: string;
|
||
mode: 'web-action' | 'page-qa' | 'page-summary';
|
||
contextEnabled: boolean;
|
||
messages: SgClawMessage[];
|
||
}
|
||
|
||
interface SgClawMessage {
|
||
id: string;
|
||
type: 'user_text' | 'assistant_text' | 'task_step' | 'task_result' | 'task_error' | 'system_notice';
|
||
role: 'user' | 'assistant' | 'system';
|
||
content: string;
|
||
status?: 'pending' | 'running' | 'done' | 'failed';
|
||
timestamp: number;
|
||
meta?: Record<string, unknown>;
|
||
}
|
||
```
|
||
|
||
The current `logs`, `messages`, `finalResult`, `pendingReply`, and `busy` state should be re-expressed through these typed stores instead of being owned directly by the entry component.
|
||
|
||
## Task 1: Freeze The Current Entry And Enable Real Template/CSS Modules
|
||
|
||
**Files:**
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.html.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.css.ts`
|
||
- Test: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_mainline_unittest.ts`
|
||
|
||
**Step 1: Write the failing structure test**
|
||
|
||
Add assertions that the entry no longer hardcodes the full DOM layout in `render()` and imports its shell template/style helpers.
|
||
|
||
**Step 2: Run test to verify it fails**
|
||
|
||
Run:
|
||
```bash
|
||
autoninja -C /home/zyl/projects/superRpa/src/out/KylinRelease sgclaw-chat_build_ts
|
||
```
|
||
|
||
Expected: fail because `sgclaw-chat.html.ts` and `sgclaw-chat.css.ts` are empty and the new test expects real exports.
|
||
|
||
**Step 3: Write the minimal implementation**
|
||
|
||
- Move root shell markup to `getHtml()`
|
||
- Move root style tokens/layout to `getCss()`
|
||
- Keep `sgclaw-chat.ts` focused on state + events
|
||
|
||
**Step 4: Run test to verify it passes**
|
||
|
||
Run the same build target.
|
||
|
||
Expected: TS build succeeds and the entry uses external template/style helpers.
|
||
|
||
**Step 5: Commit**
|
||
|
||
```bash
|
||
git -C /home/zyl/projects/superRpa/src add \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.html.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.css.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_mainline_unittest.ts
|
||
git -C /home/zyl/projects/superRpa/src commit -m "refactor: extract sgclaw chat shell template"
|
||
```
|
||
|
||
## Task 2: Build The Window, Conversation, History, And Settings State Modules
|
||
|
||
**Files:**
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-floating_state.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_window_state.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_conversation_state.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_history_state.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_settings_state.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_state.ts`
|
||
- Test: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-floating_state_mainline_unittest.ts`
|
||
- Test: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_window_state_mainline_unittest.ts`
|
||
- Test: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_history_state_mainline_unittest.ts`
|
||
- Test: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_settings_state_mainline_unittest.ts`
|
||
|
||
**Step 1: Write the failing pure-state tests**
|
||
|
||
Cover:
|
||
- open/close/switch panel transitions
|
||
- unread count clear on open
|
||
- create/reset conversation
|
||
- local history push/select/remove
|
||
- settings draft dirty detection
|
||
|
||
**Step 2: Run tests to verify RED**
|
||
|
||
Run:
|
||
```bash
|
||
autoninja -C /home/zyl/projects/superRpa/src/out/KylinRelease sgclaw-chat_build_ts
|
||
```
|
||
|
||
Expected: build fails because the new modules and tests do not exist yet.
|
||
|
||
**Step 3: Write the minimal implementation**
|
||
|
||
Implement pure functions only. Do not mix DOM work into these modules.
|
||
|
||
**Step 4: Run tests to verify GREEN**
|
||
|
||
Run the same build target.
|
||
|
||
Expected: all pure-state modules compile and their tests pass.
|
||
|
||
**Step 5: Commit**
|
||
|
||
```bash
|
||
git -C /home/zyl/projects/superRpa/src add \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-floating_state.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_window_state.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_conversation_state.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_history_state.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_settings_state.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_state.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-floating_state_mainline_unittest.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_window_state_mainline_unittest.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_history_state_mainline_unittest.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_settings_state_mainline_unittest.ts
|
||
git -C /home/zyl/projects/superRpa/src commit -m "feat: add sgclaw chat state modules"
|
||
```
|
||
|
||
## Task 3: Introduce A Host Adapter So UI Stops Owning Bridge Details
|
||
|
||
**Files:**
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_host_adapter.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_runtime_bridge.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.ts`
|
||
- Test: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_runtime_bridge_mainline_unittest.ts`
|
||
|
||
**Step 1: Write the failing bridge test**
|
||
|
||
Test that:
|
||
- `connect()` issues `sgclawConnect`
|
||
- `start()` issues `sgclawStart`
|
||
- `stop()` issues `sgclawStop`
|
||
- `submitTask()` issues `sgclawSubmitTask`
|
||
- callback payload parsing is handled in one place
|
||
|
||
**Step 2: Run test to verify RED**
|
||
|
||
Run:
|
||
```bash
|
||
autoninja -C /home/zyl/projects/superRpa/src/out/KylinRelease sgclaw-chat_build_ts
|
||
```
|
||
|
||
Expected: fail because adapter modules do not exist.
|
||
|
||
**Step 3: Write minimal implementation**
|
||
|
||
- Wrap `chrome.send`
|
||
- Centralize callback registration
|
||
- Return typed runtime events/state to the UI layer
|
||
|
||
**Step 4: Run test to verify GREEN**
|
||
|
||
Run the same build target.
|
||
|
||
Expected: adapter tests compile and pass.
|
||
|
||
**Step 5: Commit**
|
||
|
||
```bash
|
||
git -C /home/zyl/projects/superRpa/src add \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_host_adapter.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_runtime_bridge.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_runtime_bridge_mainline_unittest.ts
|
||
git -C /home/zyl/projects/superRpa/src commit -m "refactor: isolate sgclaw chat host bridge"
|
||
```
|
||
|
||
## Task 4: Replace The Loose Message Format With Typed Cards In The Message Stream
|
||
|
||
**Files:**
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_messages.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-list.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-card-user.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-card-assistant.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-card-step.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-card-result.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-card-error.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.ts`
|
||
- Test: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_mainline_unittest.ts`
|
||
|
||
**Step 1: Write the failing rendering test**
|
||
|
||
Add expectations that:
|
||
- empty state shows guidance instead of a blank box
|
||
- `task_complete` renders a result card in the message stream
|
||
- `error` renders an error card in the message stream
|
||
- `pendingReply` renders an assistant pending card
|
||
|
||
**Step 2: Run test to verify RED**
|
||
|
||
Run the TS build target.
|
||
|
||
Expected: fail because message types and card components do not exist.
|
||
|
||
**Step 3: Write minimal implementation**
|
||
|
||
- Keep the message list single-column
|
||
- Preserve current user/assistant turn behavior
|
||
- Move `finalResult` handling into result-card rendering
|
||
- Move error display into message flow
|
||
|
||
**Step 4: Run test to verify GREEN**
|
||
|
||
Run the same build target.
|
||
|
||
Expected: cards render correctly and the old standalone result area is no longer required.
|
||
|
||
**Step 5: Commit**
|
||
|
||
```bash
|
||
git -C /home/zyl/projects/superRpa/src add \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_messages.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-list.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-card-user.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-card-assistant.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-card-step.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-card-result.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-message-card-error.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_mainline_unittest.ts
|
||
git -C /home/zyl/projects/superRpa/src commit -m "feat: add sgclaw chat message cards"
|
||
```
|
||
|
||
## Task 5: Build The Real Header, Empty State, And Composer
|
||
|
||
**Files:**
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-chat-shell.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-chat-header.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-chat-composer.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.html.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.css.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.ts`
|
||
- Test: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_mainline_unittest.ts`
|
||
|
||
**Step 1: Write the failing shell test**
|
||
|
||
Assert that the rendered page now contains:
|
||
- header with title, current page label, and status pill
|
||
- empty state recommendation buttons
|
||
- fixed composer at the bottom
|
||
- no standalone `实时日志` or `最终结果` primary sections
|
||
|
||
**Step 2: Run test to verify RED**
|
||
|
||
Run the TS build target.
|
||
|
||
Expected: fail because the shell components do not exist.
|
||
|
||
**Step 3: Write minimal implementation**
|
||
|
||
- Header: title, page context, new-chat/history/settings/collapse actions
|
||
- Empty state: 3 to 4 recommended actions
|
||
- Composer: text input, send button, mode toggles, context switch
|
||
|
||
**Step 4: Run test to verify GREEN**
|
||
|
||
Run the same build target.
|
||
|
||
Expected: the page renders as a product-style chat shell.
|
||
|
||
**Step 5: Commit**
|
||
|
||
```bash
|
||
git -C /home/zyl/projects/superRpa/src add \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-chat-shell.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-chat-header.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-chat-composer.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.html.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.css.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_mainline_unittest.ts
|
||
git -C /home/zyl/projects/superRpa/src commit -m "feat: add sgclaw chat shell and composer"
|
||
```
|
||
|
||
## Task 6: Embed Settings And Move Raw Logs Into A Debug Drawer
|
||
|
||
**Files:**
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-settings-panel.ts`
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-debug-drawer.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.css.ts`
|
||
- Reuse Read-Only Reference: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-config/sgclaw-config.ts`
|
||
- Test: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_settings_state_mainline_unittest.ts`
|
||
|
||
**Step 1: Write the failing panel tests**
|
||
|
||
Cover:
|
||
- opening settings panel from header
|
||
- editing embedded config draft
|
||
- opening debug drawer and showing logs
|
||
- closing secondary panels without destroying the chat draft
|
||
|
||
**Step 2: Run test to verify RED**
|
||
|
||
Run the TS build target.
|
||
|
||
Expected: fail because secondary panel components do not exist.
|
||
|
||
**Step 3: Write minimal implementation**
|
||
|
||
- Reuse config field structure from `sgclaw-config`
|
||
- Keep raw logs in debug only
|
||
- Preserve route-navigation fallback for full config page if embedded save/load fails
|
||
|
||
**Step 4: Run test to verify GREEN**
|
||
|
||
Run the same build target.
|
||
|
||
Expected: settings and debug layers behave as secondary panels instead of separate pages.
|
||
|
||
**Step 5: Commit**
|
||
|
||
```bash
|
||
git -C /home/zyl/projects/superRpa/src add \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-settings-panel.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-debug-drawer.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.css.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_settings_state_mainline_unittest.ts
|
||
git -C /home/zyl/projects/superRpa/src commit -m "feat: add sgclaw settings panel and debug drawer"
|
||
```
|
||
|
||
## Task 7: Add Local Conversation History And New-Chat Recovery
|
||
|
||
**Files:**
|
||
- Create: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-history-panel.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_history_state.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.ts`
|
||
- Test: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_history_state_mainline_unittest.ts`
|
||
|
||
**Step 1: Write the failing history tests**
|
||
|
||
Cover:
|
||
- saving a conversation preview to local history
|
||
- creating a fresh conversation resets message stream but keeps config
|
||
- reopening a history item restores messages and draft
|
||
|
||
**Step 2: Run test to verify RED**
|
||
|
||
Run the TS build target.
|
||
|
||
Expected: fail because history panel and persistence behavior do not exist.
|
||
|
||
**Step 3: Write minimal implementation**
|
||
|
||
- Store history locally in browser storage or localStorage
|
||
- Keep only small metadata + message snapshot for first version
|
||
- No backend schema change in this phase
|
||
|
||
**Step 4: Run test to verify GREEN**
|
||
|
||
Run the same build target.
|
||
|
||
Expected: local conversation switching works fully in the frontend.
|
||
|
||
**Step 5: Commit**
|
||
|
||
```bash
|
||
git -C /home/zyl/projects/superRpa/src add \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/components/sgclaw-history-panel.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_history_state.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/sgclaw-chat/sgclaw-chat_history_state_mainline_unittest.ts
|
||
git -C /home/zyl/projects/superRpa/src commit -m "feat: add sgclaw local conversation history"
|
||
```
|
||
|
||
## Task 8: Wire New Shell Assets Into BUILD And Polish The Host Page
|
||
|
||
**Files:**
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/BUILD.gn`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/functions.html.ts`
|
||
- Modify: `/home/zyl/projects/superRpa/src/chrome/browser/resources/superrpa/devtools/functions/functions.css`
|
||
|
||
**Step 1: Write the failing host expectation**
|
||
|
||
Add a small host-level check that:
|
||
- `sgclaw-chat` still loads from the manifest
|
||
- host quick actions still work
|
||
- the function page provides enough room for the new chat shell
|
||
|
||
**Step 2: Run test/build to verify RED**
|
||
|
||
Run:
|
||
```bash
|
||
autoninja -C /home/zyl/projects/superRpa/src/out/KylinRelease sgclaw-chat_build_ts
|
||
```
|
||
|
||
Expected: fail or render incorrectly because new component files are not all wired into build/host styling yet.
|
||
|
||
**Step 3: Write minimal implementation**
|
||
|
||
- Add all new TS modules to `BUILD.gn`
|
||
- Keep `sgclaw-chat` and `sgclaw-config` quick actions
|
||
- Adjust host layout so the new shell is not boxed into the old debug-page proportions
|
||
|
||
**Step 4: Run verification**
|
||
|
||
Run:
|
||
```bash
|
||
autoninja -C /home/zyl/projects/superRpa/src/out/KylinRelease sgclaw-chat_build_ts
|
||
autoninja -C /home/zyl/projects/superRpa/src/out/KylinRelease superrpa_resources
|
||
```
|
||
|
||
Expected: build completes with all new chat modules wired in.
|
||
|
||
**Step 5: Commit**
|
||
|
||
```bash
|
||
git -C /home/zyl/projects/superRpa/src add \
|
||
chrome/browser/resources/superrpa/devtools/BUILD.gn \
|
||
chrome/browser/resources/superrpa/devtools/functions/functions.html.ts \
|
||
chrome/browser/resources/superrpa/devtools/functions/functions.css
|
||
git -C /home/zyl/projects/superRpa/src commit -m "chore: wire sgclaw chat frontend modules"
|
||
```
|
||
|
||
## Manual Verification Matrix
|
||
|
||
Run all manual checks in `chrome://superrpa-functions/sgclaw-chat` after the full frontend plan lands.
|
||
|
||
### UX States
|
||
|
||
- Empty state appears on first open.
|
||
- Recommended actions generate user messages.
|
||
- Composer stays visible while history/settings/debug panels switch.
|
||
- Message stream auto-scrolls to the latest item.
|
||
- Result cards and error cards appear inline.
|
||
|
||
### Runtime
|
||
|
||
- `启动` works from the header area.
|
||
- `停止` works from the header area.
|
||
- submit creates an immediate user message.
|
||
- pending assistant card appears while waiting.
|
||
- result card replaces the old standalone result behavior.
|
||
|
||
### Settings
|
||
|
||
- embedded settings loads existing values
|
||
- save updates status and clears dirty state
|
||
- fallback route to `chrome://superrpa-functions/sgclaw-config` still works
|
||
|
||
### Debug
|
||
|
||
- logs are not visible in the main chat view
|
||
- debug drawer shows raw logs when opened
|
||
|
||
### History
|
||
|
||
- new conversation starts clean
|
||
- previous conversation can be restored from local history
|
||
- unread badge clears when reopening the window
|
||
|
||
## Execution Notes
|
||
|
||
- Keep the current backend/runtime bridge unchanged until the new frontend shell is stable.
|
||
- Do not combine page-injected floating host work into this same branch. The first milestone is a complete product-grade frontend inside the existing `FunctionsUI` host.
|
||
- When this frontend plan is complete, the next plan should focus only on mounting the same component tree inside a real page floating container.
|
||
|
||
Plan complete and saved to `docs/plans/2026-03-27-sgclaw-floating-chat-frontend-design.md`. Two execution options:
|
||
|
||
**1. Subagent-Driven (this session)** - I dispatch fresh subagent per task, review between tasks, fast iteration
|
||
|
||
**2. Parallel Session (separate)** - Open new session with executing-plans, batch execution with checkpoints
|
||
|
||
**Which approach?**
|