# 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; } ``` 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?**