# 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?**
