@poolzin/pool-bot 2026.3.22 → 2026.3.24

package/docs/plans/2026-03-15-openclaw-features-implementation.md

@@ -0,0 +1,1632 @@
+# OpenClaw Features Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Implement all missing OpenClaw features to make Pool Bot production-ready and feature-equivalent.
+
+**Architecture:** Phased approach prioritizing critical UI/UX foundations (Phase 1), then control-plane improvements (Phase 2), channel expansion (Phase 3), and specialized features (Phase 4).
+
+**Tech Stack:** TypeScript, Lit (UI), @mariozechner/pi-tui (TUI), Node.js 22+, Vitest (testing), pnpm (package management)
+
+---
+
+## PHASE 1: CRITICAL FOUNDATION (Weeks 1-4)
+
+### Task 1: TUI Integration (@mariozechner/pi-tui)
+
+**Files:**
+- Create: `src/tui/components/login-gate.ts`
+- Create: `src/tui/components/nodes-list.ts`
+- Create: `src/tui/components/exec-approvals-panel.ts`
+- Create: `src/tui/components/device-pairing.ts`
+- Modify: `src/tui/tui.ts:45-120` (add component registration)
+- Test: `src/tui/components/*.test.ts` (one per component)
+
+**Dependencies:** `@mariozechner/pi-tui@0.52.12` (already in package.json)
+
+**Estimated Effort:** 16 hours (2 days)
+
+**Success Criteria:**
+- TUI renders all 4 new components
+- Components respond to gateway events
+- Keyboard navigation works (arrow keys, Enter, Escape)
+- Tests pass with >80% coverage
+
+**Step 1: Create login-gate component**
+
+```typescript
+// src/tui/components/login-gate.ts
+import { Component, Container, Text } from "@mariozechner/pi-tui";
+
+export class LoginGate extends Component {
+  private status: "disconnected" | "connecting" | "authenticated" = "disconnected";
+  private error: string | null = null;
+
+  setStatus(status: typeof this.status) {
+    this.status = status;
+    this.markDirty();
+  }
+
+  setError(error: string | null) {
+    this.error = error;
+    this.markDirty();
+  }
+
+  render() {
+    if (this.status === "authenticated") return null;
+    
+    return new Container([
+      new Text(`Gateway: ${this.status}`, { color: this.status === "disconnected" ? "red" : "yellow" }),
+      this.error ? new Text(this.error, { color: "red" }) : null,
+    ].filter(Boolean));
+  }
+}
+```
+
+**Step 2: Run test to verify component compiles**
+
+```bash
+pnpm tsc --noEmit src/tui/components/login-gate.ts
+```
+Expected: No errors
+
+**Step 3: Create test file**
+
+```typescript
+// src/tui/components/login-gate.test.ts
+import { describe, it, expect } from "vitest";
+import { LoginGate } from "./login-gate";
+
+describe("LoginGate", () => {
+  it("renders disconnected status", () => {
+    const component = new LoginGate();
+    component.setStatus("disconnected");
+    expect(component.render()).toBeDefined();
+  });
+
+  it("shows error message", () => {
+    const component = new LoginGate();
+    component.setError("Auth failed");
+    const rendered = component.render();
+    expect(rendered).toBeDefined();
+  });
+});
+```
+
+**Step 4: Run test**
+
+```bash
+pnpm test src/tui/components/login-gate.test.ts
+```
+Expected: PASS
+
+**Step 5: Create remaining components (nodes-list, exec-approvals-panel, device-pairing)**
+
+Follow same pattern as Step 1-4 for each component.
+
+**Step 6: Register components in TUI**
+
+```typescript
+// src/tui/tui.ts - add to component initialization
+import { LoginGate } from "./components/login-gate";
+import { NodesList } from "./components/nodes-list";
+import { ExecApprovalsPanel } from "./components/exec-approvals-panel";
+import { DevicePairing } from "./components/device-pairing";
+
+// In constructor or init method:
+this.loginGate = new LoginGate();
+this.nodesList = new NodesList();
+this.execApprovals = new ExecApprovalsPanel();
+this.devicePairing = new DevicePairing();
+```
+
+**Step 7: Commit**
+
+```bash
+git add src/tui/components/*.ts src/tui/tui.ts
+git commit -m "feat(tui): add login-gate, nodes-list, exec-approvals, device-pairing components"
+```
+
+---
+
+### Task 2: Command Palette UI (Cmd+K Navigation)
+
+**Files:**
+- Modify: `ui/src/ui/views/command-palette.ts:16-82` (add more navigation items)
+- Modify: `ui/src/ui/views/dashboard-v2.ts` (integrate command palette)
+- Create: `ui/src/ui/views/command-palette.test.ts`
+- Modify: `ui/src/ui/storage.ts` (persist cmd-k usage stats)
+
+**Dependencies:** Lit (already installed)
+
+**Estimated Effort:** 8 hours (1 day)
+
+**Success Criteria:**
+- Cmd+K opens palette from any view
+- Search filters items correctly
+- Arrow keys navigate, Enter selects
+- Usage stats tracked in storage
+
+**Step 1: Add navigation items for new views**
+
+```typescript
+// ui/src/ui/views/command-palette.ts - extend NAVIGATION_ITEMS
+const NAVIGATION_ITEMS: PaletteItem[] = [
+  // ... existing items ...
+  {
+    id: "nav-nodes",
+    label: "Nodes",
+    icon: "server",
+    category: "navigation",
+    action: "nav:nodes",
+    description: "Manage compute nodes",
+  },
+  {
+    id: "nav-exec-approvals",
+    label: "Exec Approvals",
+    icon: "shield",
+    category: "navigation",
+    action: "nav:exec-approvals",
+    description: "Pending command approvals",
+  },
+  {
+    id: "nav-device-pair",
+    label: "Pair Device",
+    icon: "smartphone",
+    category: "navigation",
+    action: "nav:device-pair",
+    description: "Pair new device",
+  },
+];
+```
+
+**Step 2: Integrate with dashboard-v2**
+
+```typescript
+// ui/src/ui/views/dashboard-v2.ts - add import and handler
+import { renderCommandPalette, installGlobalCmdKHandler, getPaletteItemsForCmdK } from "./command-palette";
+
+// In state:
+private cmdKOpen = false;
+private cmdKQuery = "";
+private cmdKActiveIndex = 0;
+
+// In render method:
+${renderCommandPalette({
+  open: this.cmdKOpen,
+  query: this.cmdKQuery,
+  activeIndex: this.cmdKActiveIndex,
+  onToggle: () => { this.cmdKOpen = !this.cmdKOpen; },
+  onQueryChange: (q) => { this.cmdKQuery = q; },
+  onActiveIndexChange: (i) => { this.cmdKActiveIndex = i; },
+  onNavigate: (tab) => { this.navigate(tab); },
+  onSlashCommand: (cmd) => { this.handleSlashCommand(cmd); },
+})}
+```
+
+**Step 3: Install global handler**
+
+```typescript
+// In connectedCallback or init:
+installGlobalCmdKHandler(() => {
+  this.cmdKOpen = !this.cmdKOpen;
+});
+```
+
+**Step 4: Create test file**
+
+```typescript
+// ui/src/ui/views/command-palette.test.ts
+import { describe, it, expect } from "vitest";
+import { getPaletteItemsForCmdK, filteredItems } from "./command-palette";
+
+describe("Command Palette", () => {
+  it("returns navigation items", () => {
+    const items = getPaletteItemsForCmdK();
+    expect(items.some(i => i.category === "navigation")).toBe(true);
+  });
+
+  it("filters by query", () => {
+    const items = filteredItems("nodes");
+    expect(items.every(i => 
+      i.label.toLowerCase().includes("nodes") || 
+      i.description?.toLowerCase().includes("nodes")
+    )).toBe(true);
+  });
+});
+```
+
+**Step 5: Run tests**
+
+```bash
+pnpm test ui/src/ui/views/command-palette.test.ts
+```
+Expected: PASS
+
+**Step 6: Commit**
+
+```bash
+git add ui/src/ui/views/command-palette.ts ui/src/ui/views/dashboard-v2.ts
+git commit -m "feat(ui): enhance command palette with nodes/exec-approvals navigation"
+```
+
+---
+
+### Task 3: Login Gate Component
+
+**Files:**
+- Create: `ui/src/ui/components/login-gate.ts`
+- Create: `ui/src/ui/components/login-gate.test.ts`
+- Modify: `ui/src/ui/views/overview.ts` (embed login-gate)
+
+**Dependencies:** Lit (already installed)
+
+**Estimated Effort:** 6 hours (0.75 days)
+
+**Success Criteria:**
+- Login gate shows before dashboard access
+- Validates token/password
+- Shows clear error messages
+- Persists auth state
+
+**Step 1: Create login-gate component**
+
+```typescript
+// ui/src/ui/components/login-gate.ts
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("login-gate")
+export class LoginGate extends LitElement {
+  @property({ type: Boolean }) connected = false;
+  @property({ type: String }) error: string | null = null;
+  @property({ type: String }) token = "";
+  @property({ type: String }) password = "";
+
+  static styles = css`
+    :host {
+      display: block;
+      max-width: 400px;
+      margin: 2rem auto;
+      padding: 2rem;
+      border: 1px solid #e0e0e0;
+      border-radius: 8px;
+    }
+    .error { color: #d32f2f; margin-top: 1rem; }
+    .field { margin-bottom: 1rem; }
+    .field label { display: block; margin-bottom: 0.5rem; }
+    .field input { width: 100%; padding: 0.5rem; }
+    button { 
+      width: 100%; 
+      padding: 0.75rem; 
+      background: #1976d2; 
+      color: white; 
+      border: none; 
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  `;
+
+  private handleSubmit(e: Event) {
+    e.preventDefault();
+    this.dispatchEvent(new CustomEvent("login", {
+      detail: { token: this.token, password: this.password }
+    }));
+  }
+
+  render() {
+    if (this.connected) {
+      return html`<div style="color: green;">✓ Authenticated</div>`;
+    }
+
+    return html`
+      <form @submit=${this.handleSubmit}>
+        <div class="field">
+          <label>Gateway Token</label>
+          <input 
+            type="text" 
+            .value=${this.token}
+            @input=${(e: Event) => this.token = (e.target as HTMLInputElement).value}
+            placeholder="CLAWDBOT_GATEWAY_TOKEN"
+          />
+        </div>
+        <div class="field">
+          <label>Password (optional)</label>
+          <input 
+            type="password"
+            .value=${this.password}
+            @input=${(e: Event) => this.password = (e.target as HTMLInputElement).value}
+          />
+        </div>
+        ${this.error ? html`<div class="error">${this.error}</div>` : ""}
+        <button type="submit">Connect</button>
+      </form>
+    `;
+  }
+}
+```
+
+**Step 2: Create test**
+
+```typescript
+// ui/src/ui/components/login-gate.test.ts
+import { describe, it, expect } from "vitest";
+import { LoginGate } from "./login-gate";
+
+describe("LoginGate", () => {
+  it("renders login form when disconnected", () => {
+    const el = new LoginGate();
+    el.connected = false;
+    const shadow = el.renderRoot as ShadowRoot;
+    expect(shadow.querySelector("form")).toBeDefined();
+  });
+
+  it("shows success message when connected", () => {
+    const el = new LoginGate();
+    el.connected = true;
+    const shadow = el.renderRoot as ShadowRoot;
+    expect(shadow.textContent).toContain("Authenticated");
+  });
+
+  it("dispatches login event on submit", () => {
+    const el = new LoginGate();
+    let eventDispatched = false;
+    el.addEventListener("login", () => { eventDispatched = true; });
+    el.token = "test-token";
+    // Simulate form submit
+    const form = el.renderRoot.querySelector("form");
+    form?.dispatchEvent(new SubmitEvent("submit", { cancelable: true }));
+    expect(eventDispatched).toBe(true);
+  });
+});
+```
+
+**Step 3: Run test**
+
+```bash
+pnpm test ui/src/ui/components/login-gate.test.ts
+```
+Expected: PASS
+
+**Step 4: Embed in overview**
+
+```typescript
+// ui/src/ui/views/overview.ts - replace auth form section
+import "../components/login-gate";
+
+// In render method:
+<login-gate
+  .connected=${props.connected}
+  .error=${props.lastError}
+  .token=${props.settings.token}
+  .password=${props.password}
+  @login=${(e: CustomEvent) => {
+    props.onSettingsChange({ ...props.settings, token: e.detail.token });
+    props.onPasswordChange(e.detail.password);
+    props.onConnect();
+  }}
+></login-gate>
+```
+
+**Step 5: Commit**
+
+```bash
+git add ui/src/ui/components/login-gate.ts ui/src/ui/views/overview.ts
+git commit -m "feat(ui): add login-gate component for authentication"
+```
+
+---
+
+### Task 4: Nodes Management UI
+
+**Files:**
+- Modify: `ui/src/ui/views/nodes.ts` (add full CRUD UI)
+- Create: `ui/src/ui/controllers/nodes-crud.ts`
+- Create: `ui/src/ui/components/nodes-table.ts`
+- Create: `ui/src/ui/components/nodes-form.ts`
+- Test: `ui/src/ui/views/nodes.test.ts`
+
+**Dependencies:** Existing nodes gateway methods (`src/gateway/server-methods/nodes.ts`)
+
+**Estimated Effort:** 12 hours (1.5 days)
+
+**Success Criteria:**
+- List all nodes with status
+- Add/edit/delete nodes
+- Show node health metrics
+- Real-time status updates
+
+**Step 1: Read existing nodes view**
+
+```bash
+cat ui/src/ui/views/nodes.ts
+```
+Understand current structure before modifying.
+
+**Step 2: Create nodes-table component**
+
+```typescript
+// ui/src/ui/components/nodes-table.ts
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+type Node = {
+  id: string;
+  name: string;
+  status: "online" | "offline" | "busy";
+  cpu: number;
+  memory: number;
+  lastSeen: number;
+};
+
+@customElement("nodes-table")
+export class NodesTable extends LitElement {
+  @property({ type: Array }) nodes: Node[] = [];
+  @property({ type: Number }) selectedIndex = -1;
+
+  static styles = css`
+    table { width: 100%; border-collapse: collapse; }
+    th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #e0e0e0; }
+    th { background: #f5f5f5; font-weight: 600; }
+    tr.selected { background: #e3f2fd; }
+    .status { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.875rem; }
+    .status-online { background: #c8e6c9; color: #2e7d32; }
+    .status-offline { background: #ffcdd2; color: #c62828; }
+    .status-busy { background: #fff9c4; color: #f57f17; }
+  `;
+
+  render() {
+    return html`
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Status</th>
+            <th>CPU</th>
+            <th>Memory</th>
+            <th>Last Seen</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${this.nodes.map((node, i) => html`
+            <tr 
+              class=${i === this.selectedIndex ? "selected" : ""}
+              @click=${() => this.dispatchEvent(new CustomEvent("select", { detail: i }))}
+            >
+              <td>${node.name}</td>
+              <td><span class="status status-${node.status}">${node.status}</span></td>
+              <td>${node.cpu}%</td>
+              <td>${node.memory}%</td>
+              <td>${new Date(node.lastSeen).toLocaleString()}</td>
+            </tr>
+          `)}
+        </tbody>
+      </table>
+    `;
+  }
+}
+```
+
+**Step 3: Create nodes-form component**
+
+```typescript
+// ui/src/ui/components/nodes-form.ts
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+type NodeFormData = {
+  name: string;
+  endpoint: string;
+  token: string;
+};
+
+@customElement("nodes-form")
+export class NodesForm extends LitElement {
+  @property({ type: Object }) data: NodeFormData = { name: "", endpoint: "", token: "" };
+
+  static styles = css`
+    .field { margin-bottom: 1rem; }
+    label { display: block; margin-bottom: 0.5rem; }
+    input { width: 100%; padding: 0.5rem; }
+    .actions { display: flex; gap: 1rem; margin-top: 1rem; }
+    button { padding: 0.5rem 1rem; }
+  `;
+
+  render() {
+    return html`
+      <form @submit=${(e: Event) => e.preventDefault()}>
+        <div class="field">
+          <label>Name</label>
+          <input 
+            .value=${this.data.name}
+            @input=${(e: Event) => this.data.name = (e.target as HTMLInputElement).value}
+          />
+        </div>
+        <div class="field">
+          <label>Endpoint</label>
+          <input 
+            .value=${this.data.endpoint}
+            @input=${(e: Event) => this.data.endpoint = (e.target as HTMLInputElement).value}
+            placeholder="https://node.example.com:18789"
+          />
+        </div>
+        <div class="field">
+          <label>Token</label>
+          <input 
+            type="password"
+            .value=${this.data.token}
+            @input=${(e: Event) => this.data.token = (e.target as HTMLInputElement).value}
+          />
+        </div>
+        <div class="actions">
+          <button @click=${() => this.dispatchEvent(new CustomEvent("save", { detail: this.data }))}>
+            Save
+          </button>
+          <button type="button" @click=${() => this.dispatchEvent(new CustomEvent("cancel"))}>
+            Cancel
+          </button>
+        </div>
+      </form>
+    `;
+  }
+}
+```
+
+**Step 4: Create CRUD controller**
+
+```typescript
+// ui/src/ui/controllers/nodes-crud.ts
+import type { GatewayClient } from "../gateway";
+
+export class NodesCrudController {
+  private client: GatewayClient;
+
+  constructor(client: GatewayClient) {
+    this.client = client;
+  }
+
+  async list() {
+    const response = await this.client.send({ method: "nodes:list", params: {} });
+    return response.result as any[];
+  }
+
+  async create(data: { name: string; endpoint: string; token: string }) {
+    const response = await this.client.send({ 
+      method: "nodes:create", 
+      params: data 
+    });
+    return response.result;
+  }
+
+  async update(id: string, data: Partial<{ name: string; endpoint: string; token: string }>) {
+    const response = await this.client.send({ 
+      method: "nodes:update", 
+      params: { id, ...data } 
+    });
+    return response.result;
+  }
+
+  async delete(id: string) {
+    const response = await this.client.send({ 
+      method: "nodes:delete", 
+      params: { id } 
+    });
+    return response.result;
+  }
+}
+```
+
+**Step 5: Update nodes view**
+
+```typescript
+// ui/src/ui/views/nodes.ts - integrate components
+import "../components/nodes-table";
+import "../components/nodes-form";
+import { NodesCrudController } from "../controllers/nodes-crud";
+
+// In class:
+private crud = new NodesCrudController(this.client);
+private nodes = [];
+private showForm = false;
+
+async loadNodes() {
+  this.nodes = await this.crud.list();
+  this.requestUpdate();
+}
+
+render() {
+  return html`
+    <div class="toolbar">
+      <button @click=${() => this.showForm = true}>Add Node</button>
+      <button @click=${() => this.loadNodes()}>Refresh</button>
+    </div>
+    ${this.showForm ? html`
+      <nodes-form 
+        @save=${async (e: CustomEvent) => {
+          await this.crud.create(e.detail);
+          this.showForm = false;
+          this.loadNodes();
+        }}
+        @cancel=${() => this.showForm = false}
+      ></nodes-form>
+    ` : html`
+      <nodes-table 
+        .nodes=${this.nodes}
+        @select=${(e: CustomEvent) => this.selectNode(e.detail)}
+      ></nodes-table>
+    `}
+  `;
+}
+```
+
+**Step 6: Create tests**
+
+```typescript
+// ui/src/ui/views/nodes.test.ts
+import { describe, it, expect, vi } from "vitest";
+import { NodesView } from "./nodes";
+
+describe("NodesView", () => {
+  it("loads nodes on connect", async () => {
+    const view = new NodesView();
+    const mockClient = { send: vi.fn().mockResolvedValue({ result: [] }) };
+    view.client = mockClient as any;
+    await view.loadNodes();
+    expect(mockClient.send).toHaveBeenCalledWith({ method: "nodes:list", params: {} });
+  });
+
+  it("creates node via form", async () => {
+    const view = new NodesView();
+    const mockClient = { send: vi.fn().mockResolvedValue({ result: {} }) };
+    view.client = mockClient as any;
+    // Simulate form save
+    await view.crud.create({ name: "test", endpoint: "http://test", token: "abc" });
+    expect(mockClient.send).toHaveBeenCalledWith({
+      method: "nodes:create",
+      params: { name: "test", endpoint: "http://test", token: "abc" }
+    });
+  });
+});
+```
+
+**Step 7: Run tests**
+
+```bash
+pnpm test ui/src/ui/views/nodes.test.ts
+```
+Expected: PASS
+
+**Step 8: Commit**
+
+```bash
+git add ui/src/ui/views/nodes.ts ui/src/ui/components/nodes-*.ts ui/src/ui/controllers/nodes-crud.ts
+git commit -m "feat(ui): add full CRUD UI for nodes management"
+```
+
+---
+
+### Task 5: Exec Approvals UI for Nodes
+
+**Files:**
+- Modify: `ui/src/ui/views/exec-approval.ts` (enhance with nodes support)
+- Create: `ui/src/ui/components/exec-approvals-queue.ts`
+- Create: `ui/src/ui/components/exec-approvals-history.ts`
+- Test: `ui/src/ui/views/exec-approval.test.ts`
+
+**Dependencies:** `src/gateway/server-methods/exec-approval.ts`, `src/infra/exec-approvals.ts`
+
+**Estimated Effort:** 10 hours (1.25 days)
+
+**Success Criteria:**
+- Shows pending approvals queue
+- Approve/reject buttons work
+- Shows approval history
+- Filters by node/status
+
+**Step 1: Read existing exec-approval view**
+
+```bash
+cat ui/src/ui/views/exec-approval.ts
+```
+
+**Step 2: Create queue component**
+
+```typescript
+// ui/src/ui/components/exec-approvals-queue.ts
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+type PendingApproval = {
+  id: string;
+  nodeId: string;
+  command: string;
+  requestedAt: number;
+  requester: string;
+};
+
+@customElement("exec-approvals-queue")
+export class ExecApprovalsQueue extends LitElement {
+  @property({ type: Array }) pending: PendingApproval[] = [];
+
+  static styles = css`
+    .approval { 
+      border: 1px solid #e0e0e0; 
+      padding: 1rem; 
+      margin-bottom: 1rem; 
+      border-radius: 4px;
+    }
+    .command { 
+      font-family: monospace; 
+      background: #f5f5f5; 
+      padding: 0.5rem; 
+      margin: 0.5rem 0;
+    }
+    .actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
+    .approve { background: #4caf50; color: white; border: none; padding: 0.5rem 1rem; }
+    .reject { background: #f44336; color: white; border: none; padding: 0.5rem 1rem; }
+  `;
+
+  render() {
+    if (this.pending.length === 0) {
+      return html`<div class="empty">No pending approvals</div>`;
+    }
+
+    return html`
+      ${this.pending.map(approval => html`
+        <div class="approval">
+          <div><strong>Node:</strong> ${approval.nodeId}</div>
+          <div><strong>Command:</strong></div>
+          <div class="command">${approval.command}</div>
+          <div><strong>Requested:</strong> ${new Date(approval.requestedAt).toLocaleString()}</div>
+          <div><strong>Requester:</strong> ${approval.requester}</div>
+          <div class="actions">
+            <button 
+              class="approve"
+              @click=${() => this.dispatchEvent(new CustomEvent("approve", { detail: approval.id }))}
+            >
+              Approve
+            </button>
+            <button 
+              class="reject"
+              @click=${() => this.dispatchEvent(new CustomEvent("reject", { detail: approval.id }))}
+            >
+              Reject
+            </button>
+          </div>
+        </div>
+      `)}
+    `;
+  }
+}
+```
+
+**Step 3: Create history component**
+
+```typescript
+// ui/src/ui/components/exec-approvals-history.ts
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+type ApprovalHistory = {
+  id: string;
+  command: string;
+  status: "approved" | "rejected" | "expired";
+  decidedAt: number;
+  decisionBy: string;
+};
+
+@customElement("exec-approvals-history")
+export class ExecApprovalsHistory extends LitElement {
+  @property({ type: Array }) history: ApprovalHistory[] = [];
+  @property({ type: String }) filter = "all";
+
+  static styles = css`
+    table { width: 100%; border-collapse: collapse; }
+    th, td { padding: 0.5rem; text-align: left; border-bottom: 1px solid #e0e0e0; }
+    .status-approved { color: #4caf50; }
+    .status-rejected { color: #f44336; }
+    .status-expired { color: #ff9800; }
+    .filters { margin-bottom: 1rem; }
+    .filters button { margin-right: 0.5rem; }
+  `;
+
+  private get filteredHistory() {
+    if (this.filter === "all") return this.history;
+    return this.history.filter(h => h.status === this.filter);
+  }
+
+  render() {
+    return html`
+      <div class="filters">
+        <button @click=${() => this.filter = "all"}>All</button>
+        <button @click=${() => this.filter = "approved"}>Approved</button>
+        <button @click=${() => this.filter = "rejected"}>Rejected</button>
+        <button @click=${() => this.filter = "expired"}>Expired</button>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th>Command</th>
+            <th>Status</th>
+            <th>Decided</th>
+            <th>By</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${this.filteredHistory.map(h => html`
+            <tr>
+              <td><code>${h.command}</code></td>
+              <td class="status-${h.status}">${h.status}</td>
+              <td>${new Date(h.decidedAt).toLocaleString()}</td>
+              <td>${h.decisionBy}</td>
+            </tr>
+          `)}
+        </tbody>
+      </table>
+    `;
+  }
+}
+```
+
+**Step 4: Enhance exec-approval view**
+
+```typescript
+// ui/src/ui/views/exec-approval.ts
+import "../components/exec-approvals-queue";
+import "../components/exec-approvals-history";
+
+// Add state:
+private pending = [];
+private history = [];
+private activeTab = "queue";
+
+// Add methods:
+async loadPending() {
+  const response = await this.client.send({ method: "exec-approvals:list", params: { status: "pending" } });
+  this.pending = response.result as any[];
+}
+
+async approve(id: string) {
+  await this.client.send({ method: "exec-approvals:approve", params: { id } });
+  this.loadPending();
+  this.loadHistory();
+}
+
+async reject(id: string) {
+  await this.client.send({ method: "exec-approvals:reject", params: { id } });
+  this.loadPending();
+  this.loadHistory();
+}
+
+// Render:
+render() {
+  return html`
+    <div class="tabs">
+      <button class=${this.activeTab === "queue" ? "active" : ""} 
+              @click=${() => this.activeTab = "queue"}>
+        Queue
+      </button>
+      <button class=${this.activeTab === "history" ? "active" : ""} 
+              @click=${() => this.activeTab = "history"}>
+        History
+      </button>
+    </div>
+    ${this.activeTab === "queue" ? html`
+      <exec-approvals-queue
+        .pending=${this.pending}
+        @approve=${(e: CustomEvent) => this.approve(e.detail)}
+        @reject=${(e: CustomEvent) => this.reject(e.detail)}
+      ></exec-approvals-queue>
+    ` : html`
+      <exec-approvals-history .history=${this.history}></exec-approvals-history>
+    `}
+  `;
+}
+```
+
+**Step 5: Create tests**
+
+```typescript
+// ui/src/ui/views/exec-approval.test.ts
+import { describe, it, expect, vi } from "vitest";
+import { ExecApprovalView } from "./exec-approval";
+
+describe("ExecApprovalView", () => {
+  it("loads pending approvals", async () => {
+    const view = new ExecApprovalView();
+    const mockClient = { send: vi.fn().mockResolvedValue({ result: [] }) };
+    view.client = mockClient as any;
+    await view.loadPending();
+    expect(mockClient.send).toHaveBeenCalledWith({
+      method: "exec-approvals:list",
+      params: { status: "pending" }
+    });
+  });
+
+  it("approves pending request", async () => {
+    const view = new ExecApprovalView();
+    const mockClient = { send: vi.fn().mockResolvedValue({ result: {} }) };
+    view.client = mockClient as any;
+    await view.approve("approval-123");
+    expect(mockClient.send).toHaveBeenCalledWith({
+      method: "exec-approvals:approve",
+      params: { id: "approval-123" }
+    });
+  });
+});
+```
+
+**Step 6: Run tests**
+
+```bash
+pnpm test ui/src/ui/views/exec-approval.test.ts
+```
+Expected: PASS
+
+**Step 7: Commit**
+
+```bash
+git add ui/src/ui/views/exec-approval.ts ui/src/ui/components/exec-approvals-*.ts
+git commit -m "feat(ui): add exec approvals queue and history UI"
+```
+
+---
+
+### Task 6: Device Pairing UI
+
+**Files:**
+- Create: `ui/src/ui/views/device-pair.ts`
+- Create: `ui/src/ui/components/device-pair-qr.ts`
+- Create: `ui/src/ui/components/device-pair-code.ts`
+- Test: `ui/src/ui/views/device-pair.test.ts`
+
+**Dependencies:** `src/infra/device-pairing.ts`, `src/gateway/device-pairing-security.ts`
+
+**Estimated Effort:** 10 hours (1.25 days)
+
+**Success Criteria:**
+- Shows QR code for pairing
+- Shows setup code alternative
+- Pairing status updates in real-time
+- Shows paired devices list
+
+**Step 1: Create QR component**
+
+```typescript
+// ui/src/ui/components/device-pair-qr.ts
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("device-pair-qr")
+export class DevicePairQR extends LitElement {
+  @property({ type: String }) pairingUrl = "";
+  @property({ type: String }) setupCode = "";
+
+  static styles = css`
+    .container { text-align: center; padding: 2rem; }
+    .qr { 
+      width: 256px; 
+      height: 256px; 
+      margin: 1rem auto; 
+      background: white; 
+      border: 1px solid #e0e0e0;
+    }
+    .code { 
+      font-size: 2rem; 
+      font-family: monospace; 
+      letter-spacing: 0.5rem;
+      margin: 1rem 0;
+    }
+    .instructions { color: #666; margin-top: 1rem; }
+  `;
+
+  render() {
+    return html`
+      <div class="container">
+        <div class="qr">
+          <!-- Use QR code library or API -->
+          <img src="https://api.qrserver.com/v1/create-qr-code/?size=256x256&data=${encodeURIComponent(this.pairingUrl)}" />
+        </div>
+        <div>Or enter setup code:</div>
+        <div class="code">${this.setupCode}</div>
+        <div class="instructions">
+          Open Pool Bot mobile app → Settings → Pair Device → Scan QR or enter code
+        </div>
+      </div>
+    `;
+  }
+}
+```
+
+**Step 2: Create pairing code component**
+
+```typescript
+// ui/src/ui/components/device-pair-code.ts
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("device-pair-code")
+export class DevicePairCode extends LitElement {
+  @property({ type: String }) code = "";
+  @property({ type: Boolean }) loading = false;
+  @property({ type: String }) error: string | null = null;
+
+  static styles = css`
+    .form { max-width: 400px; margin: 0 auto; }
+    .field { margin-bottom: 1rem; }
+    label { display: block; margin-bottom: 0.5rem; }
+    input { width: 100%; padding: 0.75rem; font-size: 1.25rem; letter-spacing: 0.25rem; }
+    button { 
+      width: 100%; 
+      padding: 1rem; 
+      background: #1976d2; 
+      color: white; 
+      border: none; 
+      border-radius: 4px;
+    }
+    button:disabled { background: #ccc; }
+    .error { color: #d32f2f; margin-top: 1rem; }
+  `;
+
+  render() {
+    return html`
+      <form class="form" @submit=${(e: Event) => e.preventDefault()}>
+        <div class="field">
+          <label>Enter Setup Code from Device</label>
+          <input 
+            .value=${this.code}
+            @input=${(e: Event) => this.code = (e.target as HTMLInputElement).value.toUpperCase()}
+            placeholder="ABC123"
+            maxlength="6"
+          />
+        </div>
+        ${this.error ? html`<div class="error">${this.error}</div>` : ""}
+        <button 
+          type="submit" 
+          ?disabled=${this.loading || this.code.length !== 6}
+          @click=${() => this.dispatchEvent(new CustomEvent("pair", { detail: this.code }))}
+        >
+          ${this.loading ? "Pairing..." : "Pair Device"}
+        </button>
+      </form>
+    `;
+  }
+}
+```
+
+**Step 3: Create device-pair view**
+
+```typescript
+// ui/src/ui/views/device-pair.ts
+import { LitElement, html, css } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import "./components/device-pair-qr";
+import "./components/device-pair-code";
+
+@customElement("device-pair")
+export class DevicePairView extends LitElement {
+  @state() private pairingUrl = "";
+  @state() private setupCode = "";
+  @state() private loading = false;
+  @state() private error: string | null = null;
+  @state() private pairedDevices: Array<{ id: string; name: string; pairedAt: number }> = [];
+
+  static styles = css`
+    .container { max-width: 800px; margin: 0 auto; padding: 2rem; }
+    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
+    .card { border: 1px solid #e0e0e0; padding: 1.5rem; border-radius: 8px; }
+    h2 { margin-top: 0; }
+  `;
+
+  async firstUpdated() {
+    await this.generatePairingCode();
+    await this.loadPairedDevices();
+  }
+
+  async generatePairingCode() {
+    this.loading = true;
+    try {
+      const response = await fetch("/api/device-pair/generate", { method: "POST" });
+      const data = await response.json();
+      this.pairingUrl = data.pairingUrl;
+      this.setupCode = data.setupCode;
+    } catch (e) {
+      this.error = "Failed to generate pairing code";
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  async loadPairedDevices() {
+    const response = await fetch("/api/device-pair/list");
+    this.pairedDevices = await response.json();
+  }
+
+  async handlePair(e: CustomEvent) {
+    this.loading = true;
+    this.error = null;
+    try {
+      const response = await fetch("/api/device-pair/complete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ code: e.detail })
+      });
+      if (!response.ok) throw new Error("Pairing failed");
+      await this.loadPairedDevices();
+      await this.generatePairingCode();
+    } catch (e) {
+      this.error = e.message;
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  render() {
+    return html`
+      <div class="container">
+        <h2>Pair Device</h2>
+        <div class="grid">
+          <div class="card">
+            <h3>Scan QR Code</h3>
+            ${this.loading ? html`<div>Loading...</div>` : html`
+              <device-pair-qr 
+                .pairingUrl=${this.pairingUrl}
+                .setupCode=${this.setupCode}
+              ></device-pair-qr>
+            `}
+          </div>
+          <div class="card">
+            <h3>Enter Code Manually</h3>
+            <device-pair-code
+              .loading=${this.loading}
+              .error=${this.error}
+              @pair=${this.handlePair}
+            ></device-pair-code>
+          </div>
+        </div>
+        <div class="card" style="margin-top: 2rem;">
+          <h3>Paired Devices</h3>
+          ${this.pairedDevices.length === 0 ? html`<div>No paired devices</div>` : html`
+            <table>
+              <thead><tr><th>Name</th><th>Paired</th><th>Actions</th></tr></thead>
+              <tbody>
+                ${this.pairedDevices.map(d => html`
+                  <tr>
+                    <td>${d.name}</td>
+                    <td>${new Date(d.pairedAt).toLocaleString()}</td>
+                    <td><button>Unpair</button></td>
+                  </tr>
+                `)}
+              </tbody>
+            </table>
+          `}
+        </div>
+      </div>
+    `;
+  }
+}
+```
+
+**Step 4: Create tests**
+
+```typescript
+// ui/src/ui/views/device-pair.test.ts
+import { describe, it, expect, vi } from "vitest";
+import { DevicePairView } from "./device-pair";
+
+describe("DevicePairView", () => {
+  it("generates pairing code on load", async () => {
+    const view = new DevicePairView();
+    global.fetch = vi.fn().mockResolvedValue({
+      json: () => Promise.resolve({ pairingUrl: "ws://test", setupCode: "ABC123" })
+    });
+    await view.firstUpdated();
+    expect(view.pairingUrl).toBe("ws://test");
+    expect(view.setupCode).toBe("ABC123");
+  });
+
+  it("completes pairing with code", async () => {
+    const view = new DevicePairView();
+    global.fetch = vi.fn()
+      .mockResolvedValueOnce({ json: () => Promise.resolve({ pairingUrl: "", setupCode: "" }) })
+      .mockResolvedValueOnce({ ok: true, json: () => Promise.resolve([]) });
+    await view.firstUpdated();
+    await view.handlePair({ detail: "ABC123" } as any);
+    expect(global.fetch).toHaveBeenCalledWith("/api/device-pair/complete", expect.any(Object));
+  });
+});
+```
+
+**Step 5: Run tests**
+
+```bash
+pnpm test ui/src/ui/views/device-pair.test.ts
+```
+Expected: PASS
+
+**Step 6: Commit**
+
+```bash
+git add ui/src/ui/views/device-pair.ts ui/src/ui/components/device-pair-*.ts
+git commit -m "feat(ui): add device pairing UI with QR and code support"
+```
+
+---
+
+## PHASE 2: HIGH PRIORITY (Weeks 5-8)
+
+### Task 7: Refactor Overview into 6 Components
+
+**Files:**
+- Create: `ui/src/ui/components/overview-gateway-status.ts`
+- Create: `ui/src/ui/components/overview-auth-form.ts`
+- Create: `ui/src/ui/components/overview-channels-status.ts`
+- Create: `ui/src/ui/components/overview-sessions-stats.ts`
+- Create: `ui/src/ui/components/overview-cron-status.ts`
+- Create: `ui/src/ui/components/overview-system-health.ts`
+- Modify: `ui/src/ui/views/overview.ts` (refactor to use components)
+
+**Estimated Effort:** 16 hours (2 days)
+
+**Success Criteria:**
+- Overview view < 200 LOC
+- Each component < 150 LOC
+- All components testable in isolation
+- No regression in functionality
+
+**Implementation Steps:**
+
+1. Read current overview.ts to identify 6 logical sections
+2. Extract each section into separate component
+3. Define clear props/contracts for each component
+4. Update overview.ts to compose components
+5. Write tests for each component
+6. Run full test suite to verify no regressions
+
+---
+
+### Task 8: Config Search Functionality
+
+**Files:**
+- Modify: `ui/src/ui/views/config.ts` (add search input)
+- Create: `ui/src/ui/utils/config-search.ts`
+- Create: `ui/src/ui/utils/config-search.test.ts`
+- Modify: `src/config/config-store.ts` (add search method)
+
+**Estimated Effort:** 8 hours (1 day)
+
+**Success Criteria:**
+- Search filters config keys in real-time
+- Supports fuzzy matching
+- Highlights matched text
+- Works across nested config objects
+
+---
+
+### Task 9: Chrome MCP Snapshot
+
+**Files:**
+- Create: `src/browser/chrome-mcp-snapshot.ts`
+- Create: `src/browser/chrome-mcp-snapshot.test.ts`
+- Modify: `src/browser/chrome.ts` (integrate snapshot)
+
+**Dependencies:** Chrome DevTools Protocol (existing)
+
+**Estimated Effort:** 12 hours (1.5 days)
+
+**Success Criteria:**
+- Captures page state as structured snapshot
+- Includes DOM, network, console state
+- Snapshot serializable to JSON
+- Tests cover edge cases
+
+---
+
+### Task 10: Chrome Extension Validation
+
+**Files:**
+- Create: `src/browser/chrome-extension-validator.ts`
+- Create: `src/browser/chrome-extension-validator.test.ts`
+- Modify: `assets/chrome-extension/manifest.json` (update if needed)
+- Create: `assets/chrome-extension/options.ts`
+- Create: `assets/chrome-extension/background.ts`
+
+**Estimated Effort:** 10 hours (1.25 days)
+
+**Success Criteria:**
+- Validates manifest.json structure
+- Validates options.html exists
+- Validates background.js/service worker
+- Provides clear error messages
+
+---
+
+### Task 11: Persistent Bindings (ACP)
+
+**Files:**
+- Modify: `src/acp/translator.ts` (add bindings persistence)
+- Modify: `src/acp/session.ts` (store bindings)
+- Create: `src/acp/bindings-store.ts`
+- Create: `src/acp/bindings-store.test.ts`
+
+**Estimated Effort:** 12 hours (1.5 days)
+
+**Success Criteria:**
+- Bindings persist across restarts
+- Bindings scoped to session
+- Bindings validate on load
+- Tests cover persistence scenarios
+
+---
+
+### Task 12: Translator Features
+
+**Files:**
+- Modify: `src/acp/translator.ts` (add prompt-prefix support)
+- Modify: `src/acp/translator.ts` (add cancel-scoping)
+- Create: `src/acp/translator.prompt-prefix.test.ts`
+- Create: `src/acp/translator.cancel-scoping.test.ts`
+
+**Estimated Effort:** 10 hours (1.25 days)
+
+**Success Criteria:**
+- prompt-prefix configurable per session
+- cancel-scoping prevents cascade cancels
+- Features documented in ACP docs
+- Tests cover edge cases
+
+---
+
+## PHASE 3: MEDIUM PRIORITY (Weeks 9-12)
+
+### Task 13: Google Chat Channel
+
+**Files:**
+- Create: `extensions/googlechat/src/index.ts`
+- Create: `extensions/googlechat/src/googlechat-channel.ts`
+- Create: `extensions/googlechat/src/googlechat-auth.ts`
+- Create: `extensions/googlechat/package.json`
+- Test: `extensions/googlechat/src/*.test.ts`
+
+**Estimated Effort:** 20 hours (2.5 days)
+
+**Success Criteria:**
+- OAuth auth flow works
+- Sends/receives messages
+- Supports threads
+- Presence tracking
+
+---
+
+### Task 14: IRC Channel
+
+**Files:**
+- Create: `extensions/irc/src/index.ts`
+- Create: `extensions/irc/src/irc-channel.ts`
+- Create: `extensions/irc/src/irc-connection.ts`
+- Create: `extensions/irc/package.json`
+- Test: `extensions/irc/src/*.test.ts`
+
+**Estimated Effort:** 16 hours (2 days)
+
+**Success Criteria:**
+- Connects to IRC servers
+- Joins channels
+- Sends/receives messages
+- Handles reconnects
+
+---
+
+### Task 15: Nostr Channel
+
+**Files:**
+- Modify: `extensions/nostr/src/` (integrate as channel)
+- Create: `extensions/nostr/src/nostr-channel.ts`
+- Test: `extensions/nostr/src/nostr-channel.test.ts`
+
+**Estimated Effort:** 16 hours (2 days)
+
+**Success Criteria:**
+- Publishes to Nostr relays
+- Subscribes to events
+- Supports NIP-04 DMs
+- Profile management
+
+---
+
+### Task 16: Deadcode Detection
+
+**Files:**
+- Modify: `package.json` (add scripts)
+- Create: `.knip.jsonc`
+- Create: `.ts-prune.jsonc`
+- Create: `.ts-unused.jsonc`
+- Modify: `.github/workflows/lint.yml` (add deadcode checks)
+
+**Estimated Effort:** 6 hours (0.75 days)
+
+**Success Criteria:**
+- `pnpm deadcode:knip` works
+- `pnpm deadcode:ts-prune` works
+- `pnpm deadcode:ts-unused` works
+- CI fails on deadcode
+
+---
+
+### Task 17: Protocol Generation for Swift
+
+**Files:**
+- Create: `scripts/generate-swift-protocol.ts`
+- Create: `src/gateway/protocol/swift-generator.ts`
+- Create: `templates/swift/` (Swift templates)
+- Test: `scripts/generate-swift-protocol.test.ts`
+
+**Estimated Effort:** 16 hours (2 days)
+
+**Success Criteria:**
+- Generates Swift types from TypeScript
+- Generated code compiles
+- Round-trip validation
+- Integrated in build process
+
+---
+
+### Task 18: Advanced Cron Filters
+
+**Files:**
+- Modify: `src/cron/cron-scheduler.ts` (add filters)
+- Modify: `ui/src/ui/views/cron.ts` (add filter UI)
+- Create: `src/cron/cron-filters.ts`
+- Create: `src/cron/cron-filters.test.ts`
+
+**Estimated Effort:** 12 hours (1.5 days)
+
+**Success Criteria:**
+- Filters by channel
+- Filters by user
+- Filters by session
+- UI for filter management
+
+---
+
+### Task 19: Session Cost Types
+
+**Files:**
+- Modify: `src/config/sessions/types.ts` (add cost types)
+- Modify: `src/gateway/server-methods/sessions.ts` (track costs)
+- Modify: `ui/src/ui/views/sessions.ts` (show costs)
+- Create: `src/usage/session-costs.ts`
+- Create: `src/usage/session-costs.test.ts`
+
+**Estimated Effort:** 10 hours (1.25 days)
+
+**Success Criteria:**
+- Tracks token costs
+- Tracks time costs
+- Shows cost breakdown
+- Exportable cost reports
+
+---
+
+## PHASE 4: LOW PRIORITY (Weeks 13+)
+
+### Task 20: Additional Specialized Plugins
+
+**Files:**
+- Create: `extensions/phone-control/` (4-6h)
+- Create: `extensions/llm-task/` (3-4h)
+- Create: `extensions/thread-ownership/` (3-4h)
+- Create: `extensions/open-prose/` (2-3h)
+
+**Estimated Effort:** 14 hours (1.75 days)
+
+**Success Criteria:**
+- Each plugin has README
+- Each plugin has tests
+- Plugins loadable via plugin system
+- Documented in plugin docs
+
+---
+
+### Task 21: Test Suite Expansion
+
+**Files:**
+- Create: `vitest.channels.config.ts` (2h)
+- Create: `vitest.extensions.config.ts` (2h)
+- Create: `test:channels` script (1h)
+- Create: `test:extensions` script (1h)
+- Create: E2E test variants (4h)
+
+**Estimated Effort:** 10 hours (1.25 days)
+
+**Success Criteria:**
+- All test configs work
+- Scripts run correct tests
+- E2E tests cover key flows
+- CI runs all test suites
+
+---
+
+### Task 22: Specialized Lint Checks
+
+**Files:**
+- Modify: `package.json` (add lint scripts)
+- Modify: `.oxlintrc.json` (add rules)
+- Create: `scripts/lint-security.ts` (4h)
+- Create: `scripts/lint-performance.ts` (4h)
+
+**Estimated Effort:** 10 hours (1.25 days)
+
+**Success Criteria:**
+- Security lint checks run
+- Performance lint checks run
+- CI fails on violations
+- Clear error messages
+
+---
+
+### Task 23: Channel Documentation Expansion
+
+**Files:**
+- Create: `docs/channels/google-chat.md` (2h)
+- Create: `docs/channels/irc.md` (2h)
+- Create: `docs/channels/nostr.md` (2h)
+- Create: `docs/channels/line.md` (2h)
+- Create: `docs/channels/zalo.md` (2h)
+
+**Estimated Effort:** 10 hours (1.25 days)
+
+**Success Criteria:**
+- Each channel has setup guide
+- Each channel has config examples
+- Each channel has troubleshooting
+- Screenshots where applicable
+
+---
+
+## SUMMARY
+
+| Phase | Tasks | Total Hours | Weeks |
+|-------|-------|-------------|-------|
+| **Phase 1 (Critical)** | 6 | 72h | 4 |
+| **Phase 2 (High)** | 6 | 66h | 4 |
+| **Phase 3 (Medium)** | 7 | 98h | 4 |
+| **Phase 4 (Low)** | 4 | 44h | 2+ |
+| **TOTAL** | **23** | **280h** | **14-16 weeks** |
+
+---
+
+## TESTING REQUIREMENTS
+
+Every task must include:
+1. Unit tests for new components/functions
+2. Integration tests where applicable
+3. Run `pnpm test` before commit
+4. Coverage > 80% for new code
+
+## DOCUMENTATION REQUIREMENTS
+
+Every user-facing feature must include:
+1. Update to relevant docs/*.md file
+2. Changelog entry (if user-facing)
+3. Code comments for complex logic
+4. JSDoc for public APIs
+
+## COMMIT GUIDELINES
+
+- One commit per task (or sub-task for large tasks)
+- Conventional Commits format
+- Include test files in same commit
+- Keep commits under 500 LOC when possible
+
+---
+
+**Plan complete and saved to `docs/plans/2026-03-15-openclaw-features-implementation.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?**
+
+https://docs.molt.bot/plans/2026-03-15-openclaw-features-implementation