claw/docs/plans/2026-03-27-sgclaw-floating-chat-frontend-design.md

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:

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.

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:

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

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:

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

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:

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

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

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

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

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

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:

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:

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

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?