diff --git a/docs/superpowers/plans/2026-04-02-agent-chat-upgrade.md b/docs/superpowers/plans/2026-04-02-agent-chat-upgrade.md
new file mode 100644
index 00000000..1180b680
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-02-agent-chat-upgrade.md
@@ -0,0 +1,1987 @@
+# Agent Chat Upgrade Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Transform the Agent Chat from a single-session-per-email timeline into a multi-session chat with persistent history, live thread context, and a polished chat UI.
+
+**Architecture:** Add an `agent_sessions` DB table to persist sessions independently of emails. Replace the flat event timeline with a chat-bubble UI composed of small focused components under `AgentPanel/`. The renderer watches `selectedEmailId` changes and lazily injects thread context into agent messages.
+
+**Tech Stack:** Electron, React, TypeScript, Zustand, Tailwind CSS, better-sqlite3, Playwright (tests)
+
+---
+
+## File Structure
+
+| File | Responsibility |
+|------|---------------|
+| `src/shared/agent-types.ts` | Add `AgentSession`, `AgentSessionSummary`, `ThreadContextMessage` types |
+| `src/main/db/schema.ts` | Add `agent_sessions` table DDL |
+| `src/main/db/index.ts` | Migration v2 + session CRUD functions |
+| `src/main/ipc/agent.ipc.ts` | New session IPC handlers, modify `agent:run` |
+| `src/main/agents/agent-coordinator.ts` | Session creation/update on task lifecycle |
+| `src/preload/index.ts` | Expose new session IPC methods + `getThreadEmails` |
+| `src/renderer/store/index.ts` | Replace task state with session state, add context tracking |
+| `src/renderer/components/AgentPanel.tsx` | Slim down to barrel export + `AgentTabContent` shell |
+| `src/renderer/components/AgentPanel/SessionDropdown.tsx` | Session list dropdown |
+| `src/renderer/components/AgentPanel/ChatMessage.tsx` | User/agent message bubbles |
+| `src/renderer/components/AgentPanel/CollapsedToolCalls.tsx` | Foldable tool call groups |
+| `src/renderer/components/AgentPanel/ChatInput.tsx` | Multi-line input with send button |
+| `src/renderer/components/AgentPanel/ThreadBar.tsx` | Current thread indicator |
+| `src/renderer/components/AgentPanel/TypingIndicator.tsx` | Animated dots while agent runs |
+| `src/renderer/components/AgentPanel/index.ts` | Barrel exports |
+| `src/renderer/components/AgentCommandPalette.tsx` | Use session-based flow |
+| `src/renderer/components/EmailPreviewSidebar.tsx` | Update to use session state |
+| `src/renderer/components/AgentsSidebar.tsx` | Pull history from sessions |
+| `tests/unit/agent-sessions-db.spec.ts` | DB CRUD + migration tests |
+| `tests/unit/agent-chat-ui.spec.ts` | Component rendering tests |
+
+---
+
+### Task 1: Add Types to `agent-types.ts`
+
+**Files:**
+- Modify: `src/shared/agent-types.ts`
+
+- [ ] **Step 1: Add `AgentSession` type**
+
+At the end of `src/shared/agent-types.ts`, add:
+
+```typescript
+/** A persistent agent chat session, decoupled from email lifecycle */
+export interface AgentSession {
+  id: string;
+  title: string;
+  emailId: string | null;
+  threadId: string | null;
+  accountId: string;
+  providerIds: string[];
+  createdAt: number;
+  updatedAt: number;
+  status: "active" | "completed" | "failed" | "cancelled";
+  runs: Record<string, AgentProviderRun>;
+}
+
+export interface AgentSessionSummary {
+  id: string;
+  title: string;
+  status: AgentSession["status"];
+  updatedAt: number;
+  emailId: string | null;
+}
+
+/** Plain-text representation of one message in a thread, for agent context injection */
+export interface ThreadContextMessage {
+  from: string;
+  date: string;
+  body: string;
+  isFromUser: boolean;
+}
+```
+
+- [ ] **Step 2: Run type check**
+
+Run: `npx tsc --noEmit`
+Expected: PASS (new types are additive, no consumers yet)
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/shared/agent-types.ts
+git commit -m "feat(agent): add AgentSession, AgentSessionSummary, ThreadContextMessage types"
+```
+
+---
+
+### Task 2: Add `agent_sessions` DB Table & Migration
+
+**Files:**
+- Modify: `src/main/db/schema.ts`
+- Modify: `src/main/db/index.ts`
+- Create: `tests/unit/agent-sessions-db.spec.ts`
+
+- [ ] **Step 1: Write the failing test for session CRUD**
+
+Create `tests/unit/agent-sessions-db.spec.ts`:
+
+```typescript
+import { test, expect } from "@playwright/test";
+import Database from "better-sqlite3";
+
+/**
+ * These tests create an in-memory SQLite DB, run the schema + migrations,
+ * then exercise the session CRUD functions. We import the functions directly
+ * from the db module after initializing with the test DB.
+ */
+
+// We'll test the raw SQL since the db module requires electron app paths.
+// This validates the schema and migration SQL are correct.
+
+function createTestDb(): Database.Database {
+  const db = new Database(":memory:");
+  db.pragma("journal_mode = WAL");
+  return db;
+}
+
+const AGENT_SESSIONS_DDL = `
+  CREATE TABLE IF NOT EXISTS agent_sessions (
+    id TEXT PRIMARY KEY,
+    title TEXT NOT NULL,
+    email_id TEXT,
+    thread_id TEXT,
+    account_id TEXT NOT NULL,
+    provider_ids TEXT NOT NULL,
+    created_at INTEGER NOT NULL,
+    updated_at INTEGER NOT NULL,
+    status TEXT NOT NULL DEFAULT 'active'
+  );
+  CREATE INDEX IF NOT EXISTS idx_agent_sessions_account ON agent_sessions(account_id);
+  CREATE INDEX IF NOT EXISTS idx_agent_sessions_email ON agent_sessions(email_id);
+  CREATE INDEX IF NOT EXISTS idx_agent_sessions_updated ON agent_sessions(updated_at DESC);
+`;
+
+test.describe("agent_sessions table", () => {
+  test("creates table and inserts/reads sessions", () => {
+    const db = createTestDb();
+    db.exec(AGENT_SESSIONS_DDL);
+
+    const now = Date.now();
+    db.prepare(`
+      INSERT INTO agent_sessions (id, title, email_id, thread_id, account_id, provider_ids, created_at, updated_at, status)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+    `).run("sess-1", "Draft reply", "email-1", "thread-1", "acct-1", '["claude"]', now, now, "active");
+
+    const row = db.prepare("SELECT * FROM agent_sessions WHERE id = ?").get("sess-1") as Record<string, unknown>;
+    expect(row).toBeTruthy();
+    expect(row.title).toBe("Draft reply");
+    expect(row.email_id).toBe("email-1");
+    expect(row.status).toBe("active");
+    expect(JSON.parse(row.provider_ids as string)).toEqual(["claude"]);
+  });
+
+  test("lists sessions ordered by updated_at desc", () => {
+    const db = createTestDb();
+    db.exec(AGENT_SESSIONS_DDL);
+
+    const now = Date.now();
+    db.prepare(`
+      INSERT INTO agent_sessions (id, title, account_id, provider_ids, created_at, updated_at, status)
+      VALUES (?, ?, ?, ?, ?, ?, ?)
+    `).run("sess-old", "Old", "acct-1", '["claude"]', now - 2000, now - 2000, "completed");
+    db.prepare(`
+      INSERT INTO agent_sessions (id, title, account_id, provider_ids, created_at, updated_at, status)
+      VALUES (?, ?, ?, ?, ?, ?, ?)
+    `).run("sess-new", "New", "acct-1", '["claude"]', now, now, "active");
+
+    const rows = db.prepare(
+      "SELECT id FROM agent_sessions WHERE account_id = ? ORDER BY updated_at DESC"
+    ).all("acct-1") as Array<{ id: string }>;
+    expect(rows.map((r) => r.id)).toEqual(["sess-new", "sess-old"]);
+  });
+
+  test("updates session status and updated_at", () => {
+    const db = createTestDb();
+    db.exec(AGENT_SESSIONS_DDL);
+
+    const now = Date.now();
+    db.prepare(`
+      INSERT INTO agent_sessions (id, title, account_id, provider_ids, created_at, updated_at, status)
+      VALUES (?, ?, ?, ?, ?, ?, ?)
+    `).run("sess-1", "Test", "acct-1", '["claude"]', now, now, "active");
+
+    const later = now + 5000;
+    db.prepare("UPDATE agent_sessions SET status = ?, updated_at = ? WHERE id = ?")
+      .run("completed", later, "sess-1");
+
+    const row = db.prepare("SELECT status, updated_at FROM agent_sessions WHERE id = ?")
+      .get("sess-1") as { status: string; updated_at: number };
+    expect(row.status).toBe("completed");
+    expect(row.updated_at).toBe(later);
+  });
+
+  test("deletes session", () => {
+    const db = createTestDb();
+    db.exec(AGENT_SESSIONS_DDL);
+
+    const now = Date.now();
+    db.prepare(`
+      INSERT INTO agent_sessions (id, title, account_id, provider_ids, created_at, updated_at, status)
+      VALUES (?, ?, ?, ?, ?, ?, ?)
+    `).run("sess-1", "Delete me", "acct-1", '["claude"]', now, now, "active");
+
+    db.prepare("DELETE FROM agent_sessions WHERE id = ?").run("sess-1");
+    const row = db.prepare("SELECT * FROM agent_sessions WHERE id = ?").get("sess-1");
+    expect(row).toBeUndefined();
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it passes (schema DDL is self-contained in test)**
+
+Run: `npm run test:unit -- --grep "agent_sessions table"`
+Expected: PASS (4 tests)
+
+- [ ] **Step 3: Add table DDL to `schema.ts`**
+
+In `src/main/db/schema.ts`, add after the `memories` table definition:
+
+```typescript
+// Agent chat sessions — persistent multi-session support
+CREATE TABLE IF NOT EXISTS agent_sessions (
+  id TEXT PRIMARY KEY,
+  title TEXT NOT NULL,
+  email_id TEXT,
+  thread_id TEXT,
+  account_id TEXT NOT NULL,
+  provider_ids TEXT NOT NULL,
+  created_at INTEGER NOT NULL,
+  updated_at INTEGER NOT NULL,
+  status TEXT NOT NULL DEFAULT 'active'
+);
+CREATE INDEX IF NOT EXISTS idx_agent_sessions_account ON agent_sessions(account_id);
+CREATE INDEX IF NOT EXISTS idx_agent_sessions_email ON agent_sessions(email_id);
+CREATE INDEX IF NOT EXISTS idx_agent_sessions_updated ON agent_sessions(updated_at DESC);
+```
+
+- [ ] **Step 4: Add migration v2 to `index.ts`**
+
+In `src/main/db/index.ts`, add to `NUMBERED_MIGRATIONS` array after version 1:
+
+```typescript
+{
+  version: 2,
+  name: "add_agent_sessions_table",
+  up: (db) => {
+    db.exec(`
+      CREATE TABLE IF NOT EXISTS agent_sessions (
+        id TEXT PRIMARY KEY,
+        title TEXT NOT NULL,
+        email_id TEXT,
+        thread_id TEXT,
+        account_id TEXT NOT NULL,
+        provider_ids TEXT NOT NULL,
+        created_at INTEGER NOT NULL,
+        updated_at INTEGER NOT NULL,
+        status TEXT NOT NULL DEFAULT 'active'
+      );
+      CREATE INDEX IF NOT EXISTS idx_agent_sessions_account ON agent_sessions(account_id);
+      CREATE INDEX IF NOT EXISTS idx_agent_sessions_email ON agent_sessions(email_id);
+      CREATE INDEX IF NOT EXISTS idx_agent_sessions_updated ON agent_sessions(updated_at DESC);
+    `);
+
+    // Migrate existing traces to sessions
+    const traces = db.prepare("SELECT * FROM agent_conversation_mirror").all() as Array<{
+      local_task_id: string;
+      provider_id: string;
+      messages_json: string;
+      created_at: string;
+      updated_at: string;
+    }>;
+
+    const insertSession = db.prepare(`
+      INSERT OR IGNORE INTO agent_sessions (id, title, email_id, thread_id, account_id, provider_ids, created_at, updated_at, status)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+    `);
+
+    for (const trace of traces) {
+      if (!trace.local_task_id) continue;
+      // Extract title from first user_message event
+      let title = "Untitled session";
+      try {
+        const events = JSON.parse(trace.messages_json) as Array<{ type: string; text?: string }>;
+        const firstUserMsg = events.find((e) => e.type === "user_message");
+        if (firstUserMsg?.text) {
+          title = firstUserMsg.text.length > 40
+            ? firstUserMsg.text.slice(0, 40).replace(/\s+\S*$/, "") + "..."
+            : firstUserMsg.text;
+        }
+      } catch { /* ignore parse errors */ }
+
+      const createdAt = new Date(trace.created_at).getTime() || Date.now();
+      const updatedAt = new Date(trace.updated_at).getTime() || Date.now();
+
+      insertSession.run(
+        trace.local_task_id,
+        title,
+        null,  // email_id not stored in mirror table
+        null,  // thread_id not stored in mirror table
+        "",    // account_id not stored in mirror table
+        JSON.stringify([trace.provider_id]),
+        createdAt,
+        updatedAt,
+        "completed"
+      );
+    }
+  },
+},
+```
+
+- [ ] **Step 5: Add session CRUD functions to `index.ts`**
+
+Add these functions to `src/main/db/index.ts` near the other agent-related functions:
+
+```typescript
+// ---------------------------------------------------------------------------
+// Agent Sessions
+// ---------------------------------------------------------------------------
+
+export interface AgentSessionRow {
+  id: string;
+  title: string;
+  email_id: string | null;
+  thread_id: string | null;
+  account_id: string;
+  provider_ids: string;  // JSON array
+  created_at: number;
+  updated_at: number;
+  status: string;
+}
+
+export function saveAgentSession(session: AgentSessionRow): void {
+  getDb()
+    .prepare(
+      `INSERT OR REPLACE INTO agent_sessions
+       (id, title, email_id, thread_id, account_id, provider_ids, created_at, updated_at, status)
+       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`
+    )
+    .run(
+      session.id,
+      session.title,
+      session.email_id,
+      session.thread_id,
+      session.account_id,
+      session.provider_ids,
+      session.created_at,
+      session.updated_at,
+      session.status
+    );
+}
+
+export function getAgentSession(sessionId: string): AgentSessionRow | null {
+  return (
+    getDb()
+      .prepare("SELECT * FROM agent_sessions WHERE id = ?")
+      .get(sessionId) as AgentSessionRow | undefined
+  ) ?? null;
+}
+
+export function listAgentSessions(accountId: string, limit = 50): AgentSessionRow[] {
+  return getDb()
+    .prepare(
+      "SELECT * FROM agent_sessions WHERE account_id = ? ORDER BY updated_at DESC LIMIT ?"
+    )
+    .all(accountId, limit) as AgentSessionRow[];
+}
+
+export function listAgentSessionsForEmail(emailId: string): AgentSessionRow[] {
+  return getDb()
+    .prepare(
+      "SELECT * FROM agent_sessions WHERE email_id = ? ORDER BY updated_at DESC"
+    )
+    .all(emailId) as AgentSessionRow[];
+}
+
+export function updateAgentSessionStatus(
+  sessionId: string,
+  status: string,
+  updatedAt = Date.now()
+): void {
+  getDb()
+    .prepare("UPDATE agent_sessions SET status = ?, updated_at = ? WHERE id = ?")
+    .run(status, updatedAt, sessionId);
+}
+
+export function updateAgentSessionTitle(sessionId: string, title: string): void {
+  getDb()
+    .prepare("UPDATE agent_sessions SET title = ?, updated_at = ? WHERE id = ?")
+    .run(title, Date.now(), sessionId);
+}
+
+export function deleteAgentSession(sessionId: string): void {
+  getDb().prepare("DELETE FROM agent_sessions WHERE id = ?").run(sessionId);
+  // Also clean up associated traces
+  getDb()
+    .prepare("DELETE FROM agent_conversation_mirror WHERE local_task_id = ?")
+    .run(sessionId);
+}
+```
+
+- [ ] **Step 6: Run type check**
+
+Run: `npx tsc --noEmit`
+Expected: PASS
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add src/main/db/schema.ts src/main/db/index.ts tests/unit/agent-sessions-db.spec.ts
+git commit -m "feat(agent): add agent_sessions table, migration v2, CRUD functions"
+```
+
+---
+
+### Task 3: Add Session IPC Handlers
+
+**Files:**
+- Modify: `src/main/ipc/agent.ipc.ts`
+- Modify: `src/preload/index.ts`
+
+- [ ] **Step 1: Add session IPC handlers to `agent.ipc.ts`**
+
+Import the new DB functions at the top of `src/main/ipc/agent.ipc.ts`:
+
+```typescript
+import {
+  // ... existing imports ...
+  saveAgentSession,
+  getAgentSession,
+  listAgentSessions,
+  listAgentSessionsForEmail,
+  updateAgentSessionStatus,
+  updateAgentSessionTitle,
+  deleteAgentSession,
+  type AgentSessionRow,
+} from "../db";
+```
+
+Add these handlers inside `registerAgentIpc()`, after the existing handlers:
+
+```typescript
+ipcMain.handle(
+  "agent:list-sessions",
+  async (_, { accountId, emailId }: { accountId: string; emailId?: string }) => {
+    try {
+      const rows = emailId
+        ? listAgentSessionsForEmail(emailId)
+        : listAgentSessions(accountId);
+      const summaries = rows.map((r) => ({
+        id: r.id,
+        title: r.title,
+        status: r.status,
+        updatedAt: r.updated_at,
+        emailId: r.email_id,
+      }));
+      return { success: true, data: summaries };
+    } catch (err) {
+      log.error({ err }, "Failed to list agent sessions");
+      return { success: false, error: String(err) };
+    }
+  }
+);
+
+ipcMain.handle(
+  "agent:get-session",
+  async (_, { sessionId }: { sessionId: string }) => {
+    try {
+      const row = getAgentSession(sessionId);
+      if (!row) return { success: false, error: "Session not found" };
+      return {
+        success: true,
+        data: {
+          id: row.id,
+          title: row.title,
+          emailId: row.email_id,
+          threadId: row.thread_id,
+          accountId: row.account_id,
+          providerIds: JSON.parse(row.provider_ids),
+          createdAt: row.created_at,
+          updatedAt: row.updated_at,
+          status: row.status,
+        },
+      };
+    } catch (err) {
+      log.error({ err }, "Failed to get agent session");
+      return { success: false, error: String(err) };
+    }
+  }
+);
+
+ipcMain.handle(
+  "agent:rename-session",
+  async (_, { sessionId, title }: { sessionId: string; title: string }) => {
+    try {
+      updateAgentSessionTitle(sessionId, title);
+      return { success: true, data: null };
+    } catch (err) {
+      log.error({ err }, "Failed to rename agent session");
+      return { success: false, error: String(err) };
+    }
+  }
+);
+
+ipcMain.handle(
+  "agent:delete-session",
+  async (_, { sessionId }: { sessionId: string }) => {
+    try {
+      deleteAgentSession(sessionId);
+      return { success: true, data: null };
+    } catch (err) {
+      log.error({ err }, "Failed to delete agent session");
+      return { success: false, error: String(err) };
+    }
+  }
+);
+```
+
+- [ ] **Step 2: Expose in preload bridge**
+
+In `src/preload/index.ts`, add to the `agent` object (inside the `contextBridge.exposeInMainWorld` call, after the existing agent methods):
+
+```typescript
+listSessions(accountId: string, emailId?: string): Promise<{ success: boolean; data?: AgentSessionSummary[]; error?: string }> {
+  return ipcRenderer.invoke("agent:list-sessions", { accountId, emailId });
+},
+getSession(sessionId: string): Promise<{ success: boolean; data?: unknown; error?: string }> {
+  return ipcRenderer.invoke("agent:get-session", { sessionId });
+},
+renameSession(sessionId: string, title: string): Promise<{ success: boolean; error?: string }> {
+  return ipcRenderer.invoke("agent:rename-session", { sessionId, title });
+},
+deleteSession(sessionId: string): Promise<{ success: boolean; error?: string }> {
+  return ipcRenderer.invoke("agent:delete-session", { sessionId });
+},
+```
+
+- [ ] **Step 3: Run type check**
+
+Run: `npx tsc --noEmit`
+Expected: PASS
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/main/ipc/agent.ipc.ts src/preload/index.ts
+git commit -m "feat(agent): add session IPC handlers and preload bridge"
+```
+
+---
+
+### Task 4: Update Agent Coordinator for Session Lifecycle
+
+**Files:**
+- Modify: `src/main/agents/agent-coordinator.ts`
+
+- [ ] **Step 1: Import session DB functions**
+
+Add imports at top of `src/main/agents/agent-coordinator.ts`:
+
+```typescript
+import {
+  saveAgentSession,
+  updateAgentSessionStatus,
+  type AgentSessionRow,
+} from "../db";
+```
+
+- [ ] **Step 2: Create session on `runAgent()` call**
+
+In the `runAgent()` method, after the existing setup code (where `taskEvents[taskId]` is initialized), add session creation:
+
+```typescript
+// Create or update session in DB
+const now = Date.now();
+const sessionRow: AgentSessionRow = {
+  id: taskId,
+  title: prompt.length > 40
+    ? prompt.slice(0, 40).replace(/\s+\S*$/, "") + "..."
+    : prompt,
+  email_id: context.currentEmailId || null,
+  thread_id: context.currentThreadId || null,
+  account_id: context.accountId,
+  provider_ids: JSON.stringify(providerIds),
+  created_at: now,
+  updated_at: now,
+  status: "active",
+};
+saveAgentSession(sessionRow);
+```
+
+- [ ] **Step 3: Update session status on terminal state**
+
+In the terminal state detection block (where `persistTaskEvents()` is called), add:
+
+```typescript
+const terminalStatus = state === "completed" ? "completed"
+  : state === "cancelled" ? "cancelled"
+  : "failed";
+updateAgentSessionStatus(taskId, terminalStatus);
+```
+
+- [ ] **Step 4: Update session status on cancel**
+
+In the `cancel()` method, add after persisting:
+
+```typescript
+updateAgentSessionStatus(taskId, "cancelled");
+```
+
+- [ ] **Step 5: Add session DB methods to worker proxy**
+
+Add to the `dbMethods` map so the worker can access sessions if needed:
+
+```typescript
+saveAgentSession: (session: AgentSessionRow) => saveAgentSession(session),
+updateAgentSessionStatus: (sessionId: string, status: string) =>
+  updateAgentSessionStatus(sessionId, status),
+```
+
+- [ ] **Step 6: Run type check**
+
+Run: `npx tsc --noEmit`
+Expected: PASS
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add src/main/agents/agent-coordinator.ts
+git commit -m "feat(agent): coordinator creates/updates sessions on task lifecycle"
+```
+
+---
+
+### Task 5: Update Zustand Store — Session State
+
+**Files:**
+- Modify: `src/renderer/store/index.ts`
+
+- [ ] **Step 1: Add session state fields**
+
+Add alongside the existing agent state fields (do NOT remove old fields yet — we'll keep both during transition):
+
+```typescript
+// Session-based agent state (new)
+agentSessions: Record<string, AgentSession>;
+activeSessionId: string | null;
+sessionList: AgentSessionSummary[];
+viewedThreadId: string | null;  // tracks which thread the user is currently viewing
+```
+
+Initialize in the store creator:
+
+```typescript
+agentSessions: {},
+activeSessionId: null,
+sessionList: [],
+viewedThreadId: null,
+```
+
+- [ ] **Step 2: Add session actions**
+
+```typescript
+// Session management
+setActiveSessionId: (sessionId: string | null) => void;
+loadSessionList: (accountId: string) => void;
+createSession: (session: AgentSession) => void;
+updateSessionInStore: (sessionId: string, updates: Partial<AgentSession>) => void;
+removeSession: (sessionId: string) => void;
+setViewedThreadId: (threadId: string | null) => void;
+```
+
+Implement them:
+
+```typescript
+setActiveSessionId: (sessionId) => set({ activeSessionId: sessionId }),
+
+loadSessionList: async (accountId) => {
+  const result = await window.api.agent.listSessions(accountId);
+  if (result.success && result.data) {
+    set({ sessionList: result.data });
+  }
+},
+
+createSession: (session) =>
+  set((state) => ({
+    agentSessions: { ...state.agentSessions, [session.id]: session },
+    activeSessionId: session.id,
+    sessionList: [
+      { id: session.id, title: session.title, status: session.status, updatedAt: session.updatedAt, emailId: session.emailId },
+      ...state.sessionList,
+    ],
+  })),
+
+updateSessionInStore: (sessionId, updates) =>
+  set((state) => {
+    const existing = state.agentSessions[sessionId];
+    if (!existing) return state;
+    const updated = { ...existing, ...updates, updatedAt: Date.now() };
+    return {
+      agentSessions: { ...state.agentSessions, [sessionId]: updated },
+      sessionList: state.sessionList.map((s) =>
+        s.id === sessionId
+          ? { ...s, title: updated.title, status: updated.status, updatedAt: updated.updatedAt }
+          : s
+      ),
+    };
+  }),
+
+removeSession: (sessionId) =>
+  set((state) => {
+    const { [sessionId]: _, ...rest } = state.agentSessions;
+    return {
+      agentSessions: rest,
+      sessionList: state.sessionList.filter((s) => s.id !== sessionId),
+      activeSessionId: state.activeSessionId === sessionId ? null : state.activeSessionId,
+    };
+  }),
+
+setViewedThreadId: (threadId) => set({ viewedThreadId: threadId }),
+```
+
+- [ ] **Step 3: Wire `appendAgentEvent` to also update session runs**
+
+In the existing `appendAgentEvent` implementation, after updating `agentTasks`, add:
+
+```typescript
+// Also update session if it exists
+const session = state.agentSessions[taskId];
+if (session) {
+  const providerId = event.providerId || session.providerIds[0] || "unknown";
+  const run = session.runs[providerId] || { status: "running" as const, events: [] };
+  const updatedRun = { ...run, events: [...run.events, event] };
+
+  if (event.type === "state") {
+    updatedRun.status = event.state;
+  }
+  if (event.type === "confirmation_required") {
+    updatedRun.pendingConfirmation = {
+      toolCallId: event.toolCallId,
+      toolName: event.toolName,
+      input: event.input,
+      description: event.description,
+    };
+  }
+  if (event.providerConversationId) {
+    updatedRun.providerConversationId = event.providerConversationId;
+  }
+
+  return {
+    ...state,
+    agentSessions: {
+      ...state.agentSessions,
+      [taskId]: {
+        ...session,
+        runs: { ...session.runs, [providerId]: updatedRun },
+        updatedAt: Date.now(),
+      },
+    },
+  };
+}
+```
+
+- [ ] **Step 4: Run type check**
+
+Run: `npx tsc --noEmit`
+Expected: PASS
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/renderer/store/index.ts
+git commit -m "feat(agent): add session state and actions to Zustand store"
+```
+
+---
+
+### Task 6: Build Chat UI Components
+
+**Files:**
+- Create: `src/renderer/components/AgentPanel/index.ts`
+- Create: `src/renderer/components/AgentPanel/ChatMessage.tsx`
+- Create: `src/renderer/components/AgentPanel/CollapsedToolCalls.tsx`
+- Create: `src/renderer/components/AgentPanel/TypingIndicator.tsx`
+- Create: `src/renderer/components/AgentPanel/ThreadBar.tsx`
+- Create: `src/renderer/components/AgentPanel/ChatInput.tsx`
+- Create: `src/renderer/components/AgentPanel/SessionDropdown.tsx`
+
+- [ ] **Step 1: Create barrel export**
+
+Create `src/renderer/components/AgentPanel/index.ts`:
+
+```typescript
+export { ChatMessage } from "./ChatMessage";
+export { CollapsedToolCalls } from "./CollapsedToolCalls";
+export { TypingIndicator } from "./TypingIndicator";
+export { ThreadBar } from "./ThreadBar";
+export { ChatInput } from "./ChatInput";
+export { SessionDropdown } from "./SessionDropdown";
+```
+
+- [ ] **Step 2: Create `ChatMessage.tsx`**
+
+Create `src/renderer/components/AgentPanel/ChatMessage.tsx`:
+
+```tsx
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+
+interface ChatMessageProps {
+  role: "user" | "agent";
+  content: string;
+  timestamp?: number;
+}
+
+export const ChatMessage = memo(function ChatMessage({
+  role,
+  content,
+  timestamp,
+}: ChatMessageProps) {
+  const isUser = role === "user";
+
+  return (
+    <div className={`flex ${isUser ? "justify-end" : "justify-start"} mb-2`}>
+      <div
+        className={`max-w-[85%] rounded-xl px-3 py-2 text-sm ${
+          isUser
+            ? "bg-blue-500 text-white rounded-br-sm"
+            : "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-bl-sm"
+        }`}
+      >
+        {isUser ? (
+          <p className="whitespace-pre-wrap">{content}</p>
+        ) : (
+          <div className="prose prose-sm dark:prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+            <ReactMarkdown>{content}</ReactMarkdown>
+          </div>
+        )}
+        {timestamp && (
+          <div
+            className={`text-[10px] mt-1 ${
+              isUser ? "text-blue-200" : "text-gray-400 dark:text-gray-500"
+            }`}
+          >
+            {new Date(timestamp).toLocaleTimeString([], {
+              hour: "2-digit",
+              minute: "2-digit",
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+```
+
+- [ ] **Step 3: Create `CollapsedToolCalls.tsx`**
+
+Create `src/renderer/components/AgentPanel/CollapsedToolCalls.tsx`:
+
+```tsx
+import { useState, memo } from "react";
+import type { ScopedAgentEvent } from "../../../shared/agent-types";
+
+interface CollapsedToolCallsProps {
+  events: ScopedAgentEvent[];
+}
+
+export const CollapsedToolCalls = memo(function CollapsedToolCalls({
+  events,
+}: CollapsedToolCallsProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  const toolNames = events
+    .filter((e) => e.type === "tool_call_start")
+    .map((e) => (e as { toolName: string }).toolName);
+
+  const uniqueTools = [...new Set(toolNames)];
+  const summary =
+    uniqueTools.length <= 2
+      ? uniqueTools.join(", ")
+      : `${uniqueTools.slice(0, 2).join(", ")} +${uniqueTools.length - 2}`;
+
+  return (
+    <div className="mb-2">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+      >
+        <span className={`transition-transform ${expanded ? "rotate-90" : ""}`}>
+          ▸
+        </span>
+        <span className="font-mono">
+          Used {toolNames.length} tool{toolNames.length !== 1 ? "s" : ""}
+          {summary ? ` (${summary})` : ""}
+        </span>
+      </button>
+      {expanded && (
+        <div className="mt-1 ml-3 space-y-1 border-l-2 border-gray-200 dark:border-gray-700 pl-2">
+          {events.map((event, i) => {
+            if (event.type === "tool_call_start") {
+              const e = event as { toolName: string; input: unknown };
+              return (
+                <div key={i} className="text-xs text-gray-500 dark:text-gray-400">
+                  <span className="font-mono font-medium">{e.toolName}</span>
+                  <pre className="mt-0.5 text-[10px] text-gray-400 dark:text-gray-500 overflow-x-auto max-h-20 overflow-y-auto">
+                    {typeof e.input === "string"
+                      ? e.input.slice(0, 200)
+                      : JSON.stringify(e.input, null, 2).slice(0, 200)}
+                  </pre>
+                </div>
+              );
+            }
+            if (event.type === "tool_call_end") {
+              const e = event as { result: unknown };
+              return (
+                <div
+                  key={i}
+                  className="text-[10px] text-gray-400 dark:text-gray-500 font-mono overflow-x-auto max-h-16 overflow-y-auto"
+                >
+                  → {typeof e.result === "string"
+                    ? e.result.slice(0, 150)
+                    : JSON.stringify(e.result).slice(0, 150)}
+                </div>
+              );
+            }
+            return null;
+          })}
+        </div>
+      )}
+    </div>
+  );
+});
+```
+
+- [ ] **Step 4: Create `TypingIndicator.tsx`**
+
+Create `src/renderer/components/AgentPanel/TypingIndicator.tsx`:
+
+```tsx
+export function TypingIndicator() {
+  return (
+    <div className="flex justify-start mb-2">
+      <div className="bg-gray-100 dark:bg-gray-800 rounded-xl rounded-bl-sm px-4 py-3">
+        <div className="flex gap-1">
+          <span className="w-1.5 h-1.5 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce [animation-delay:0ms]" />
+          <span className="w-1.5 h-1.5 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce [animation-delay:150ms]" />
+          <span className="w-1.5 h-1.5 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce [animation-delay:300ms]" />
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 5: Create `ThreadBar.tsx`**
+
+Create `src/renderer/components/AgentPanel/ThreadBar.tsx`:
+
+```tsx
+import { useAppStore } from "../../store";
+
+export function ThreadBar() {
+  const selectedEmailId = useAppStore((s) => s.selectedEmailId);
+  const emails = useAppStore((s) => s.emails);
+
+  const selectedEmail = selectedEmailId
+    ? emails.find((e) => e.id === selectedEmailId)
+    : null;
+
+  if (!selectedEmail) {
+    return (
+      <div className="px-3 py-1.5 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-400 dark:text-gray-500">
+        No thread selected
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-3 py-1.5 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400 truncate">
+      <span className="mr-1">📎</span>
+      {selectedEmail.subject || "(no subject)"}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 6: Create `ChatInput.tsx`**
+
+Create `src/renderer/components/AgentPanel/ChatInput.tsx`:
+
+```tsx
+import { useState, useRef, useCallback, type KeyboardEvent } from "react";
+
+interface ChatInputProps {
+  onSend: (message: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+export function ChatInput({ onSend, disabled, placeholder }: ChatInputProps) {
+  const [value, setValue] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleSend = useCallback(() => {
+    const trimmed = value.trim();
+    if (!trimmed || disabled) return;
+    onSend(trimmed);
+    setValue("");
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+  }, [value, disabled, onSend]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter" && e.metaKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+
+  const handleInput = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = Math.min(el.scrollHeight, 96) + "px"; // max ~4 lines
+  }, []);
+
+  return (
+    <div className="flex items-end gap-1.5 p-2 border-t border-gray-200 dark:border-gray-700">
+      <textarea
+        ref={textareaRef}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+          handleInput();
+        }}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder || "Ask about this thread..."}
+        disabled={disabled}
+        rows={1}
+        className="flex-1 resize-none rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50"
+      />
+      <button
+        onClick={handleSend}
+        disabled={disabled || !value.trim()}
+        className="flex-shrink-0 w-8 h-8 rounded-lg bg-blue-500 text-white flex items-center justify-center hover:bg-blue-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+      >
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M5 10l7-7m0 0l7 7m-7-7v18"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 7: Create `SessionDropdown.tsx`**
+
+Create `src/renderer/components/AgentPanel/SessionDropdown.tsx`:
+
+```tsx
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useAppStore } from "../../store";
+import type { AgentSessionSummary } from "../../../shared/agent-types";
+
+function formatRelativeTime(ts: number): string {
+  const diff = Date.now() - ts;
+  const minutes = Math.floor(diff / 60000);
+  if (minutes < 1) return "now";
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  return `${days}d`;
+}
+
+function statusDot(status: AgentSessionSummary["status"]): string {
+  switch (status) {
+    case "active":
+      return "bg-green-500";
+    case "completed":
+      return "bg-gray-400";
+    case "failed":
+      return "bg-red-500";
+    case "cancelled":
+      return "bg-yellow-500";
+  }
+}
+
+interface SessionDropdownProps {
+  onNewChat: () => void;
+}
+
+export function SessionDropdown({ onNewChat }: SessionDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const [editingTitle, setEditingTitle] = useState(false);
+  const [titleDraft, setTitleDraft] = useState("");
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const activeSessionId = useAppStore((s) => s.activeSessionId);
+  const agentSessions = useAppStore((s) => s.agentSessions);
+  const sessionList = useAppStore((s) => s.sessionList);
+  const setActiveSessionId = useAppStore((s) => s.setActiveSessionId);
+
+  const currentSession = activeSessionId
+    ? agentSessions[activeSessionId]
+    : null;
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    }
+    if (open) document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+
+  // Focus input when editing
+  useEffect(() => {
+    if (editingTitle && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editingTitle]);
+
+  const handleRename = useCallback(async () => {
+    if (!activeSessionId || !titleDraft.trim()) {
+      setEditingTitle(false);
+      return;
+    }
+    await window.api.agent.renameSession(activeSessionId, titleDraft.trim());
+    useAppStore.getState().updateSessionInStore(activeSessionId, {
+      title: titleDraft.trim(),
+    });
+    setEditingTitle(false);
+  }, [activeSessionId, titleDraft]);
+
+  const handleSelect = useCallback(
+    (sessionId: string) => {
+      setActiveSessionId(sessionId);
+      setOpen(false);
+    },
+    [setActiveSessionId]
+  );
+
+  const activeSessions = sessionList.filter(
+    (s) => s.status === "active"
+  );
+  const recentSessions = sessionList.filter(
+    (s) => s.status !== "active"
+  );
+
+  return (
+    <div ref={dropdownRef} className="relative border-b border-gray-200 dark:border-gray-700">
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center justify-between px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+      >
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="text-gray-400">▾</span>
+          {editingTitle ? (
+            <input
+              ref={inputRef}
+              value={titleDraft}
+              onChange={(e) => setTitleDraft(e.target.value)}
+              onBlur={handleRename}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleRename();
+                if (e.key === "Escape") setEditingTitle(false);
+              }}
+              onClick={(e) => e.stopPropagation()}
+              className="text-sm bg-transparent border-b border-blue-500 outline-none text-gray-900 dark:text-gray-100 w-full"
+            />
+          ) : (
+            <span
+              className="truncate text-gray-900 dark:text-gray-100"
+              onDoubleClick={() => {
+                if (currentSession) {
+                  setTitleDraft(currentSession.title);
+                  setEditingTitle(true);
+                }
+              }}
+            >
+              {currentSession?.title || "No active chat"}
+            </span>
+          )}
+        </div>
+      </button>
+
+      {open && (
+        <div className="absolute top-full left-0 right-0 z-50 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-b-lg shadow-lg max-h-[300px] overflow-y-auto">
+          <button
+            onClick={() => {
+              onNewChat();
+              setOpen(false);
+            }}
+            className="w-full px-3 py-2 text-sm text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 text-left font-medium"
+          >
+            + New Chat
+          </button>
+
+          {activeSessions.length > 0 && (
+            <>
+              <div className="px-3 py-1 text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500 font-medium">
+                Active
+              </div>
+              {activeSessions.map((s) => (
+                <button
+                  key={s.id}
+                  onClick={() => handleSelect(s.id)}
+                  className={`w-full px-3 py-1.5 text-sm text-left hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center gap-2 ${
+                    s.id === activeSessionId
+                      ? "bg-gray-50 dark:bg-gray-800"
+                      : ""
+                  }`}
+                >
+                  <span
+                    className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${statusDot(s.status)}`}
+                  />
+                  <span className="truncate text-gray-900 dark:text-gray-100">
+                    {s.title}
+                  </span>
+                  <span className="ml-auto text-[10px] text-gray-400 flex-shrink-0">
+                    {formatRelativeTime(s.updatedAt)}
+                  </span>
+                </button>
+              ))}
+            </>
+          )}
+
+          {recentSessions.length > 0 && (
+            <>
+              <div className="px-3 py-1 text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500 font-medium">
+                Recent
+              </div>
+              {recentSessions.map((s) => (
+                <button
+                  key={s.id}
+                  onClick={() => handleSelect(s.id)}
+                  className={`w-full px-3 py-1.5 text-sm text-left hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center gap-2 ${
+                    s.id === activeSessionId
+                      ? "bg-gray-50 dark:bg-gray-800"
+                      : ""
+                  }`}
+                >
+                  <span
+                    className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${statusDot(s.status)}`}
+                  />
+                  <span className="truncate text-gray-700 dark:text-gray-300">
+                    {s.title}
+                  </span>
+                  <span className="ml-auto text-[10px] text-gray-400 flex-shrink-0">
+                    {formatRelativeTime(s.updatedAt)}
+                  </span>
+                </button>
+              ))}
+            </>
+          )}
+
+          {sessionList.length === 0 && (
+            <div className="px-3 py-4 text-sm text-gray-400 dark:text-gray-500 text-center">
+              No chat history
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 8: Run type check**
+
+Run: `npx tsc --noEmit`
+Expected: PASS
+
+- [ ] **Step 9: Commit**
+
+```bash
+git add src/renderer/components/AgentPanel/
+git commit -m "feat(agent): add chat UI components — bubbles, tools, input, dropdown"
+```
+
+---
+
+### Task 7: Rewrite `AgentPanel.tsx` as Chat Interface
+
+**Files:**
+- Modify: `src/renderer/components/AgentPanel.tsx`
+
+This is the biggest change. We rewrite `AgentTabContent` to use the new components while keeping `EventTimeline` and `SubAgentBlock` as internal helpers for backward compat.
+
+- [ ] **Step 1: Rewrite `AgentTabContent`**
+
+Replace the `AgentTabContent` component in `src/renderer/components/AgentPanel.tsx`. Keep all the helper components (`SqlHighlighter`, `SubAgentBlock`, etc.) that are used internally — we still need them for expanded tool details. The key change is the outer structure:
+
+```tsx
+import { useEffect, useRef, useMemo, useCallback, useState } from "react";
+import { useAppStore } from "../store";
+import {
+  ChatMessage,
+  CollapsedToolCalls,
+  TypingIndicator,
+  ThreadBar,
+  ChatInput,
+  SessionDropdown,
+} from "./AgentPanel/index";
+import type { ScopedAgentEvent, AgentSession } from "../../shared/agent-types";
+
+// ... keep existing helper components (SqlHighlighter, SubAgentBlock, etc.) ...
+
+/** Groups consecutive tool events between text segments */
+function groupEventsForChat(events: ScopedAgentEvent[]): Array<
+  | { kind: "user"; text: string; timestamp?: number }
+  | { kind: "agent"; text: string; timestamp?: number }
+  | { kind: "tools"; events: ScopedAgentEvent[] }
+  | { kind: "confirmation"; event: ScopedAgentEvent }
+  | { kind: "error"; message: string }
+  | { kind: "context"; text: string }
+> {
+  const groups: ReturnType<typeof groupEventsForChat> = [];
+  let textBuffer = "";
+  let toolBuffer: ScopedAgentEvent[] = [];
+
+  function flushText() {
+    if (textBuffer.trim()) {
+      groups.push({ kind: "agent", text: textBuffer.trim() });
+      textBuffer = "";
+    }
+  }
+
+  function flushTools() {
+    if (toolBuffer.length > 0) {
+      groups.push({ kind: "tools", events: [...toolBuffer] });
+      toolBuffer = [];
+    }
+  }
+
+  for (const event of events) {
+    switch (event.type) {
+      case "text_delta":
+        flushTools();
+        textBuffer += (event as { text: string }).text;
+        break;
+      case "user_message":
+        flushText();
+        flushTools();
+        groups.push({ kind: "user", text: (event as { text: string }).text });
+        break;
+      case "tool_call_start":
+      case "tool_call_end":
+      case "tool_call_pending":
+        flushText();
+        toolBuffer.push(event);
+        break;
+      case "confirmation_required":
+        flushText();
+        flushTools();
+        groups.push({ kind: "confirmation", event });
+        break;
+      case "error":
+        flushText();
+        flushTools();
+        groups.push({ kind: "error", message: (event as { message: string }).message });
+        break;
+      case "done":
+        flushText();
+        flushTools();
+        break;
+      case "state":
+        // Skip state events in chat display
+        break;
+    }
+  }
+  flushText();
+  flushTools();
+
+  return groups;
+}
+
+export const AgentTabContent = memo(function AgentTabContent({
+  emailId,
+}: {
+  emailId: string;
+}) {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const activeSessionId = useAppStore((s) => s.activeSessionId);
+  const agentSessions = useAppStore((s) => s.agentSessions);
+  const currentAccountId = useAppStore((s) => s.currentAccountId);
+  const selectedEmailId = useAppStore((s) => s.selectedEmailId);
+  const selectedThreadId = useAppStore((s) => s.selectedThreadId);
+  const emails = useAppStore((s) => s.emails);
+  const availableProviders = useAppStore((s) => s.availableProviders);
+  const selectedAgentIds = useAppStore((s) => s.selectedAgentIds);
+  const startAgentTask = useAppStore((s) => s.startAgentTask);
+  const createSession = useAppStore((s) => s.createSession);
+  const setActiveSessionId = useAppStore((s) => s.setActiveSessionId);
+  const loadSessionList = useAppStore((s) => s.loadSessionList);
+
+  const session = activeSessionId ? agentSessions[activeSessionId] : null;
+
+  // Load session list on mount and account change
+  useEffect(() => {
+    if (currentAccountId) {
+      loadSessionList(currentAccountId);
+    }
+  }, [currentAccountId, loadSessionList]);
+
+  // Auto-scroll to bottom on new messages
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [session?.runs]);
+
+  // Build thread context for the agent
+  const buildThreadContext = useCallback((): string => {
+    if (!selectedThreadId) return "";
+    const threadEmails = emails
+      .filter((e) => e.threadId === selectedThreadId)
+      .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+    if (threadEmails.length === 0) return "";
+
+    const currentEmail = selectedEmailId
+      ? emails.find((e) => e.id === selectedEmailId)
+      : threadEmails[0];
+    const subject = currentEmail?.subject || "(no subject)";
+
+    const lines = [`[Currently viewing thread: "${subject}"]`];
+    lines.push(
+      `${threadEmails.length} message${threadEmails.length !== 1 ? "s" : ""} in thread`
+    );
+    lines.push("---");
+    for (let i = 0; i < threadEmails.length; i++) {
+      const e = threadEmails[i];
+      const date = new Date(e.date).toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      });
+      lines.push(`[${i + 1}] From: ${e.from} | ${date}`);
+      // Use snippet for thread context — body may be large
+      lines.push(e.snippet || "(no content)");
+      lines.push("");
+    }
+    return lines.join("\n");
+  }, [selectedThreadId, selectedEmailId, emails]);
+
+  const handleSend = useCallback(
+    async (message: string) => {
+      const providerIds =
+        selectedAgentIds.length > 0
+          ? selectedAgentIds
+          : availableProviders.length > 0
+            ? [availableProviders[0].id]
+            : [];
+
+      if (providerIds.length === 0) return;
+
+      const threadContext = buildThreadContext();
+      const fullPrompt = threadContext
+        ? `${threadContext}\n\n---\nUser: ${message}`
+        : message;
+
+      // If we have an active session with a running provider, do a follow-up
+      if (session && Object.values(session.runs).some((r) => r.status === "completed" || r.status === "failed")) {
+        // Follow-up on existing session
+        const taskId = session.id;
+        useAppStore.getState().followUpAgentTask(emailId, message);
+        await window.api.agent.run(taskId, providerIds, fullPrompt, {
+          accountId: currentAccountId || "",
+          currentEmailId: selectedEmailId || undefined,
+          currentThreadId: selectedThreadId || undefined,
+          userEmail: "",
+        });
+        return;
+      }
+
+      // Create new session
+      const taskId = crypto.randomUUID();
+      const title =
+        message.length > 40
+          ? message.slice(0, 40).replace(/\s+\S*$/, "") + "..."
+          : message;
+
+      const now = Date.now();
+      const newSession: AgentSession = {
+        id: taskId,
+        title,
+        emailId: selectedEmailId || null,
+        threadId: selectedThreadId || null,
+        accountId: currentAccountId || "",
+        providerIds,
+        createdAt: now,
+        updatedAt: now,
+        status: "active",
+        runs: Object.fromEntries(
+          providerIds.map((pid) => [pid, { status: "running" as const, events: [] }])
+        ),
+      };
+      createSession(newSession);
+
+      // Also create in old system for backward compat
+      startAgentTask(
+        taskId,
+        emailId,
+        providerIds,
+        message,
+        {
+          accountId: currentAccountId || "",
+          currentEmailId: selectedEmailId || undefined,
+          currentThreadId: selectedThreadId || undefined,
+          userEmail: "",
+        }
+      );
+
+      const result = await window.api.agent.run(
+        taskId,
+        providerIds,
+        fullPrompt,
+        {
+          accountId: currentAccountId || "",
+          currentEmailId: selectedEmailId || undefined,
+          currentThreadId: selectedThreadId || undefined,
+          userEmail: "",
+        }
+      );
+
+      if (result && !result.success) {
+        useAppStore.getState().appendAgentEvent(taskId, {
+          type: "error",
+          message: result.error || "Failed to start agent",
+        });
+      }
+    },
+    [
+      session,
+      emailId,
+      selectedAgentIds,
+      availableProviders,
+      currentAccountId,
+      selectedEmailId,
+      selectedThreadId,
+      buildThreadContext,
+      createSession,
+      startAgentTask,
+    ]
+  );
+
+  const handleNewChat = useCallback(() => {
+    setActiveSessionId(null);
+  }, [setActiveSessionId]);
+
+  // Get events from session runs
+  const allEvents = useMemo(() => {
+    if (!session) return [];
+    return Object.values(session.runs).flatMap((r) => r.events);
+  }, [session]);
+
+  const groups = useMemo(() => groupEventsForChat(allEvents), [allEvents]);
+
+  const isRunning = session
+    ? Object.values(session.runs).some((r) => r.status === "running")
+    : false;
+
+  const hasConfirmation = session
+    ? Object.values(session.runs).some((r) => r.pendingConfirmation)
+    : false;
+
+  // Also check old task system for backward compat
+  const oldTask = useAppStore((s) => s.agentTasks[emailId]);
+  const effectiveGroups =
+    groups.length > 0
+      ? groups
+      : oldTask
+        ? groupEventsForChat(
+            Object.values(oldTask.runs).flatMap((r) => r.events)
+          )
+        : [];
+
+  const effectiveRunning =
+    isRunning ||
+    (oldTask
+      ? Object.values(oldTask.runs).some((r) => r.status === "running")
+      : false);
+
+  const placeholder = selectedEmailId
+    ? "Ask about this thread… (⌘↩ to send)"
+    : "Start a conversation… (⌘↩ to send)";
+
+  return (
+    <div className="flex flex-col h-full">
+      <SessionDropdown onNewChat={handleNewChat} />
+
+      <div className="flex-1 overflow-y-auto px-3 py-2 space-y-1">
+        {effectiveGroups.length === 0 && !effectiveRunning && (
+          <div className="flex items-center justify-center h-full text-sm text-gray-400 dark:text-gray-500">
+            <div className="text-center">
+              <p>Start a conversation</p>
+              <p className="text-xs mt-1">
+                {selectedEmailId
+                  ? "I can see the thread you're viewing"
+                  : "Select an email for context"}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {effectiveGroups.map((group, i) => {
+          switch (group.kind) {
+            case "user":
+              return <ChatMessage key={i} role="user" content={group.text} />;
+            case "agent":
+              return <ChatMessage key={i} role="agent" content={group.text} />;
+            case "tools":
+              return <CollapsedToolCalls key={i} events={group.events} />;
+            case "confirmation": {
+              const e = group.event as {
+                toolCallId: string;
+                toolName: string;
+                description: string;
+                input: unknown;
+              };
+              return (
+                <div
+                  key={i}
+                  className="mb-2 rounded-lg border border-yellow-300 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-900/20 p-2 text-sm"
+                >
+                  <p className="font-medium text-yellow-800 dark:text-yellow-200">
+                    Approval needed: {e.toolName}
+                  </p>
+                  <p className="text-xs text-yellow-700 dark:text-yellow-300 mt-1">
+                    {e.description}
+                  </p>
+                  <div className="flex gap-2 mt-2">
+                    <button
+                      onClick={() =>
+                        window.api.agent.confirm(e.toolCallId, true)
+                      }
+                      className="px-2 py-1 text-xs rounded bg-green-500 text-white hover:bg-green-600"
+                    >
+                      Approve
+                    </button>
+                    <button
+                      onClick={() =>
+                        window.api.agent.confirm(e.toolCallId, false)
+                      }
+                      className="px-2 py-1 text-xs rounded bg-red-500 text-white hover:bg-red-600"
+                    >
+                      Deny
+                    </button>
+                  </div>
+                </div>
+              );
+            }
+            case "error":
+              return (
+                <div
+                  key={i}
+                  className="mb-2 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-2 text-sm text-red-700 dark:text-red-300"
+                >
+                  {group.message}
+                </div>
+              );
+            case "context":
+              return (
+                <div
+                  key={i}
+                  className="text-center text-xs text-gray-400 dark:text-gray-500 py-1"
+                >
+                  · {group.text} ·
+                </div>
+              );
+            default:
+              return null;
+          }
+        })}
+
+        {effectiveRunning && <TypingIndicator />}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      <ThreadBar />
+      <ChatInput
+        onSend={handleSend}
+        disabled={effectiveRunning || hasConfirmation}
+        placeholder={placeholder}
+      />
+    </div>
+  );
+});
+```
+
+Note: The existing `AgentTabContent` export name is preserved so `EmailPreviewSidebar.tsx` doesn't need changes yet.
+
+- [ ] **Step 2: Run type check**
+
+Run: `npx tsc --noEmit`
+Expected: PASS
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/renderer/components/AgentPanel.tsx
+git commit -m "feat(agent): rewrite AgentTabContent as chat interface with bubbles"
+```
+
+---
+
+### Task 8: Update `EmailPreviewSidebar.tsx` for Session State
+
+**Files:**
+- Modify: `src/renderer/components/EmailPreviewSidebar.tsx`
+
+- [ ] **Step 1: Update trace loading to populate sessions**
+
+In the trace loading effect (the debounced block around lines 232-287), after calling `replayAgentTrace()`, also create a session in the store:
+
+```typescript
+// After replayAgentTrace call, also populate session store
+const { createSession } = useAppStore.getState();
+createSession({
+  id: taskId,
+  title: prompt || "Restored session",
+  emailId: emailId,
+  threadId: null,
+  accountId: currentAccountId || "",
+  providerIds: ["claude"],
+  createdAt: Date.now(),
+  updatedAt: Date.now(),
+  status: "completed",
+  runs: {
+    claude: {
+      status: "completed",
+      events: traceResult.events,
+    },
+  },
+});
+```
+
+- [ ] **Step 2: Set active session when switching to agent tab**
+
+When the agent tab is selected and there's a task for the current email, set the active session ID:
+
+```typescript
+// In the agent tab display logic, when a task exists:
+useEffect(() => {
+  const task = useAppStore.getState().agentTasks[displayAgentKey];
+  if (task && sidebarTab === "agent") {
+    useAppStore.getState().setActiveSessionId(task.taskId);
+  }
+}, [displayAgentKey, sidebarTab]);
+```
+
+- [ ] **Step 3: Run type check**
+
+Run: `npx tsc --noEmit`
+Expected: PASS
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/renderer/components/EmailPreviewSidebar.tsx
+git commit -m "feat(agent): wire session state into EmailPreviewSidebar trace loading"
+```
+
+---
+
+### Task 9: Update `AgentCommandPalette.tsx` for Session Flow
+
+**Files:**
+- Modify: `src/renderer/components/AgentCommandPalette.tsx`
+
+- [ ] **Step 1: Create session when launching from command palette**
+
+In the `handleSubmit` function (around line 268), after the existing `startAgentTask` call, also create a session:
+
+```typescript
+// After startAgentTask(taskId, taskKey, providerIds, prompt, context):
+const now = Date.now();
+useAppStore.getState().createSession({
+  id: taskId,
+  title: prompt.length > 40 ? prompt.slice(0, 40).replace(/\s+\S*$/, "") + "..." : prompt,
+  emailId: selectedEmailId || null,
+  threadId: selectedThreadId || null,
+  accountId: currentAccountId || "",
+  providerIds,
+  createdAt: now,
+  updatedAt: now,
+  status: "active",
+  runs: Object.fromEntries(
+    providerIds.map((pid) => [pid, { status: "running" as const, events: [] }])
+  ),
+});
+```
+
+- [ ] **Step 2: Run type check**
+
+Run: `npx tsc --noEmit`
+Expected: PASS
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/renderer/components/AgentCommandPalette.tsx
+git commit -m "feat(agent): create session from command palette launches"
+```
+
+---
+
+### Task 10: Update `AgentsSidebar.tsx` to Pull from Sessions
+
+**Files:**
+- Modify: `src/renderer/components/AgentsSidebar.tsx`
+
+- [ ] **Step 1: Use session list for recent tasks**
+
+In the recent tasks section of `AgentsSidebar.tsx`, replace the `agentTaskHistory` usage with `sessionList`:
+
+```typescript
+// Replace:
+// const taskHistory = useAppStore((s) => s.agentTaskHistory);
+// With:
+const sessionList = useAppStore((s) => s.sessionList);
+
+// Then in the JSX, map sessionList instead of taskHistory:
+// Each session summary has: id, title, status, updatedAt, emailId
+```
+
+Map the session fields to the existing display format — `title` → task label, `status` → icon, `updatedAt` → relative time.
+
+- [ ] **Step 2: Run type check**
+
+Run: `npx tsc --noEmit`
+Expected: PASS
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/renderer/components/AgentsSidebar.tsx
+git commit -m "feat(agent): AgentsSidebar reads from session list instead of task history"
+```
+
+---
+
+### Task 11: Live Thread Context — Watch Navigation Changes
+
+**Files:**
+- Modify: `src/renderer/store/index.ts`
+- Modify: `src/renderer/App.tsx`
+
+- [ ] **Step 1: Track `viewedThreadId` in store on email selection**
+
+In `src/renderer/store/index.ts`, in the `setSelectedEmail` action (or wherever `selectedEmailId` is set), also update `viewedThreadId`:
+
+```typescript
+// In setSelectedEmail or similar:
+setViewedThreadId: (threadId) => set({ viewedThreadId: threadId }),
+```
+
+- [ ] **Step 2: Sync thread ID in App.tsx**
+
+In `src/renderer/App.tsx`, add an effect that keeps `viewedThreadId` in sync with the selected email:
+
+```typescript
+// In the main App component:
+const selectedThreadId = useAppStore((s) => s.selectedThreadId);
+const setViewedThreadId = useAppStore((s) => s.setViewedThreadId);
+
+useEffect(() => {
+  setViewedThreadId(selectedThreadId || null);
+}, [selectedThreadId, setViewedThreadId]);
+```
+
+This is deliberately simple — the context injection happens lazily in `AgentTabContent.handleSend()` (Task 7), which reads the current `selectedThreadId` and builds the context block at send time. No streaming or real-time push needed.
+
+- [ ] **Step 3: Run type check**
+
+Run: `npx tsc --noEmit`
+Expected: PASS
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/renderer/store/index.ts src/renderer/App.tsx
+git commit -m "feat(agent): track viewed thread ID for live context injection"
+```
+
+---
+
+### Task 12: Integration Testing & Smoke Test
+
+**Files:**
+- Modify: `tests/unit/agent-sessions-db.spec.ts` (already created in Task 2)
+
+- [ ] **Step 1: Run full type check**
+
+Run: `npx tsc --noEmit`
+Expected: PASS with no errors
+
+- [ ] **Step 2: Run linter**
+
+Run: `npm run lint`
+Expected: PASS (or only pre-existing warnings)
+
+- [ ] **Step 3: Run unit tests**
+
+Run: `npm run test:unit`
+Expected: All existing tests pass + new session DB tests pass
+
+- [ ] **Step 4: Run full test suite**
+
+Run: `npm test`
+Expected: All tests pass
+
+- [ ] **Step 5: Manual smoke test**
+
+Run: `npm install && npm run dev`
+
+Verify:
+1. Agent tab shows session dropdown at top with "No active chat"
+2. Typing in the input and pressing Cmd+Enter creates a new session
+3. Agent responses appear as chat bubbles (left-aligned, gray)
+4. User messages appear as bubbles (right-aligned, blue)
+5. Tool calls collapse into "▸ Used N tools" line
+6. Session dropdown shows the new session
+7. Switching emails updates the ThreadBar
+8. Starting a new chat clears the view
+9. Previous sessions appear in dropdown and can be resumed
+10. Typing indicator shows while agent is processing
+
+- [ ] **Step 6: Commit any fixes from smoke testing**
+
+```bash
+git add -A
+git commit -m "fix(agent): smoke test fixes for chat UI"
+```
+
+---
+
+### Task 13: Cleanup & Final Commit
+
+- [ ] **Step 1: Remove dead code**
+
+Check if any old `EventTimeline` rendering code in `AgentPanel.tsx` is now unused. Remove it if the new chat UI fully replaces it. Keep `SubAgentBlock` and `SqlHighlighter` if they're still referenced by `CollapsedToolCalls` or expanded tool views.
+
+- [ ] **Step 2: Run format check**
+
+Run: `npm run format:check`
+If failures: `npx prettier --write src/`
+
+- [ ] **Step 3: Final type check + lint + test**
+
+Run: `npx tsc --noEmit && npm run lint && npm test`
+Expected: All pass
+
+- [ ] **Step 4: Commit cleanup**
+
+```bash
+git add -A
+git commit -m "refactor(agent): remove dead timeline code, format cleanup"
+```
diff --git a/docs/superpowers/plans/2026-04-03-agent-panel-restore.md b/docs/superpowers/plans/2026-04-03-agent-panel-restore.md
new file mode 100644
index 00000000..b5c0148b
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-03-agent-panel-restore.md
@@ -0,0 +1,371 @@
+# Agent Panel Restore — Address Owner Feedback
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Restore the original EventTimeline-based agent rendering that ankitvgupta requires, while keeping the solid backend session infrastructure for future non-email agent runs.
+
+**Architecture:** Revert the renderer-side AgentPanel, AgentsSidebar, and EmailPreviewSidebar to their pre-branch versions (which have rich rendering: SubAgentBlock, ToolCallEvent with SQL highlighting, TextBlock with remarkGfm). Keep all backend changes (agent_sessions DB table, IPC handlers, coordinator lifecycle). Fix all review bot issues (cancel session sync, sessionList staleness, error handling).
+
+**Tech Stack:** React, TypeScript, Zustand, SQLite, Electron IPC
+
+---
+
+## Context: Why This Plan Exists
+
+The PR owner (ankitvgupta) rejected the current UX direction with these specific complaints:
+1. External agent calls (e.g. OpenClaw) no longer render nicely inline — the old `SubAgentBlock` with recursive `EventTimeline` was replaced by `CollapsedToolCalls` which just shows "Used N tools"
+2. Table formatting breaks — the old `TextBlock` used `ReactMarkdown + remarkGfm`; the new `ChatMessage` may not include `remarkGfm`
+3. Agent traces are no longer tightly tied to each email — this is a key design element he won't change
+4. SessionDropdown per-email doesn't make sense — for emails, follow-ups should append to the existing trace
+5. UX changes too much overall
+
+The strategy: restore old rendering, keep backend infrastructure (it's solid and useful for future non-email agent run improvements).
+
+## File Structure
+
+| File | Action | Description |
+|------|--------|-------------|
+| `src/renderer/components/AgentPanel.tsx` | **Restore** from merge base | Brings back EventTimeline, TextBlock, ToolCallEvent, SubAgentBlock, ErrorBlock, handleFollowUp, handleAuth, handleRetry, handleRegenerate |
+| `src/renderer/components/AgentPanel/` | **Delete** directory | ChatMessage, CollapsedToolCalls, TypingIndicator, ThreadBar, ChatInput, SessionDropdown, index.ts — all unused after restore |
+| `src/renderer/components/AgentsSidebar.tsx` | **Restore** from merge base | Brings back TaskHistoryRow instead of SessionRow, reads agentTaskHistory instead of sessionList |
+| `src/renderer/components/EmailPreviewSidebar.tsx` | **Restore** from merge base | Restores tight email-agent binding, removes session-related effects |
+| `src/renderer/store/index.ts` | **Edit** | Fix cancelAgentTask to update sessions, fix appendAgentEvent to sync sessionList, fix loadSessionList error handling |
+| `src/renderer/App.tsx` | **Edit** | Remove accidental blank lines left by viewedThreadId removal |
+
+### Files NOT touched (kept from this branch)
+
+| File | Why kept |
+|------|----------|
+| `src/main/db/index.ts` | agent_sessions table, migration v2, CRUD — solid backend infrastructure |
+| `src/main/db/schema.ts` | agent_sessions DDL in base schema |
+| `src/main/ipc/agent.ipc.ts` | Session IPC handlers — will be useful for non-email runs |
+| `src/main/agents/agent-coordinator.ts` | Session lifecycle hooks — creates/updates session rows alongside tasks |
+| `src/preload/index.ts` | Session preload bridge methods |
+| `src/shared/agent-types.ts` | AgentSession, AgentSessionSummary types |
+| `src/renderer/components/AgentCommandPalette.tsx` | Session creation on command palette launch |
+| `tests/unit/agent-sessions-db.spec.ts` | Unit tests for session CRUD |
+
+---
+
+### Task 1: Restore AgentPanel.tsx from merge base
+
+**Files:**
+- Restore: `src/renderer/components/AgentPanel.tsx`
+
+- [ ] **Step 1: Restore the old file**
+
+```bash
+MERGE_BASE=$(git merge-base origin/main HEAD)
+git show ${MERGE_BASE}:src/renderer/components/AgentPanel.tsx > src/renderer/components/AgentPanel.tsx
+```
+
+- [ ] **Step 2: Verify the restore**
+
+The restored file should be ~1046 lines and contain:
+- `TextBlock` using `ReactMarkdown` with `remarkGfm`
+- `ToolCallEvent` with `SqlHighlight`, expandable input/result, `ToolIcon`
+- `SubAgentBlock` with recursive `EventTimeline`
+- `ErrorBlock` handling `AGENT_AUTH_REQUIRED`, `OPENCLAW_NOT_CONFIGURED`
+- `EventTimeline` with sub-agent wrapper detection
+- `buildConversationHistory` for stateless follow-ups
+- `AgentTabContent` using `agentTasks[emailId]` (not sessions)
+
+```bash
+head -10 src/renderer/components/AgentPanel.tsx
+# Should show: import ReactMarkdown from "react-markdown"; import remarkGfm...
+wc -l src/renderer/components/AgentPanel.tsx
+# Should be ~1046
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/renderer/components/AgentPanel.tsx
+git commit -m "revert(agent): restore EventTimeline rendering per owner feedback
+
+Restores TextBlock (remarkGfm), ToolCallEvent (SQL highlighting),
+SubAgentBlock (recursive nesting), ErrorBlock, and the full
+EventTimeline-based agent panel that renders inline tool calls
+and external agent calls properly."
+```
+
+---
+
+### Task 2: Delete unused AgentPanel/ sub-components
+
+**Files:**
+- Delete: `src/renderer/components/AgentPanel/` (entire directory)
+
+- [ ] **Step 1: Delete the directory**
+
+```bash
+rm -rf src/renderer/components/AgentPanel/
+```
+
+- [ ] **Step 2: Verify no remaining imports**
+
+```bash
+grep -r "AgentPanel/" src/renderer/ --include="*.tsx" --include="*.ts"
+# Should return nothing (the restored AgentPanel.tsx doesn't import from AgentPanel/)
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add -A src/renderer/components/AgentPanel/
+git commit -m "chore: remove unused chat bubble sub-components
+
+These were part of the chat-bubble UI that is being reverted.
+The restored EventTimeline renders everything inline."
+```
+
+---
+
+### Task 3: Restore AgentsSidebar.tsx from merge base
+
+**Files:**
+- Restore: `src/renderer/components/AgentsSidebar.tsx`
+
+- [ ] **Step 1: Restore the old file**
+
+```bash
+MERGE_BASE=$(git merge-base origin/main HEAD)
+git show ${MERGE_BASE}:src/renderer/components/AgentsSidebar.tsx > src/renderer/components/AgentsSidebar.tsx
+```
+
+- [ ] **Step 2: Verify**
+
+The restored file should use `TaskHistoryRow` and read from `agentTaskHistory` (not `sessionList` or `SessionRow`).
+
+```bash
+grep "TaskHistoryRow\|agentTaskHistory" src/renderer/components/AgentsSidebar.tsx
+# Should find both
+grep "SessionRow\|sessionList" src/renderer/components/AgentsSidebar.tsx
+# Should find nothing
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/renderer/components/AgentsSidebar.tsx
+git commit -m "revert(agent): restore task history in AgentsSidebar"
+```
+
+---
+
+### Task 4: Restore EmailPreviewSidebar.tsx from merge base
+
+**Files:**
+- Restore: `src/renderer/components/EmailPreviewSidebar.tsx`
+
+- [ ] **Step 1: Restore the old file**
+
+```bash
+MERGE_BASE=$(git merge-base origin/main HEAD)
+git show ${MERGE_BASE}:src/renderer/components/EmailPreviewSidebar.tsx > src/renderer/components/EmailPreviewSidebar.tsx
+```
+
+- [ ] **Step 2: Verify**
+
+The restored file should NOT reference `createSession`, `setActiveSessionId`, or `sessionList`. It SHOULD have the tight email-agent binding with `frozenAgentKeyRef` and the agent trace replay logic.
+
+```bash
+grep "createSession\|setActiveSessionId\|sessionList" src/renderer/components/EmailPreviewSidebar.tsx
+# Should find nothing
+grep "frozenAgentKeyRef\|replayAgentTrace" src/renderer/components/EmailPreviewSidebar.tsx
+# Should find both
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/renderer/components/EmailPreviewSidebar.tsx
+git commit -m "revert(agent): restore tight email-agent binding in sidebar"
+```
+
+---
+
+### Task 5: Fix store issues from review bots
+
+**Files:**
+- Modify: `src/renderer/store/index.ts`
+
+Three fixes needed:
+1. **cancelAgentTask doesn't update session status** (Devin P0) — When cancelling, also update the session in `agentSessions` and `sessionList`
+2. **appendAgentEvent doesn't update sessionList** (Devin P0) — When session status changes, also update the corresponding entry in `sessionList`
+3. **loadSessionList doesn't handle errors** (Greptile P2) — Add console.warn on failure
+
+- [ ] **Step 1: Fix cancelAgentTask to update session status**
+
+In `cancelAgentTask`, after updating `agentTasks`, also update the session if one exists:
+
+```typescript
+// In cancelAgentTask, after the existing return object, add session update:
+cancelAgentTask: (taskId) =>
+  set((state) => {
+    const emailId = state.agentTaskIdMap[taskId];
+    if (!emailId) return {};
+
+    const task = state.agentTasks[emailId];
+    if (!task || task.status === "cancelled" || task.status === "completed") return {};
+
+    const entry: AgentTaskHistoryEntry = {
+      taskId: task.taskId,
+      providerIds: task.providerIds,
+      prompt: task.prompt,
+      timestamp: Date.now(),
+      status: "cancelled",
+    };
+
+    // Also update session if one exists
+    const session = state.agentSessions[taskId];
+    const sessionUpdates = session
+      ? {
+          agentSessions: {
+            ...state.agentSessions,
+            [taskId]: { ...session, status: "cancelled" as const, updatedAt: Date.now() },
+          },
+          sessionList: state.sessionList.map((s) =>
+            s.id === taskId ? { ...s, status: "cancelled" as const, updatedAt: Date.now() } : s,
+          ),
+        }
+      : {};
+
+    return {
+      agentTasks: {
+        ...state.agentTasks,
+        [emailId]: { ...task, status: "cancelled" },
+      },
+      agentTaskHistory: [...state.agentTaskHistory, entry],
+      ...sessionUpdates,
+    };
+  }),
+```
+
+- [ ] **Step 2: Fix appendAgentEvent to update sessionList**
+
+At the end of the session update block in `appendAgentEvent`, include `sessionList` in the return:
+
+```typescript
+// In the session update return block, add sessionList sync:
+return {
+  ...newAgentTasksState,
+  agentSessions: {
+    ...state.agentSessions,
+    [taskId]: {
+      ...session,
+      status: sessionStatus,
+      runs: updatedSessionRuns,
+      updatedAt: Date.now(),
+    },
+  },
+  sessionList: state.sessionList.map((s) =>
+    s.id === taskId
+      ? { ...s, status: sessionStatus, updatedAt: Date.now() }
+      : s,
+  ),
+};
+```
+
+- [ ] **Step 3: Fix loadSessionList error handling**
+
+```typescript
+loadSessionList: async (accountId) => {
+  const result = await window.api.agent.listSessions(accountId);
+  if (result && result.success && result.data) {
+    set({ sessionList: result.data });
+  } else if (result && !result.success) {
+    console.warn("[store] Failed to load session list:", result.error);
+  }
+},
+```
+
+- [ ] **Step 4: Run type checker**
+
+```bash
+npx tsc --noEmit
+```
+
+Expected: No errors.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/renderer/store/index.ts
+git commit -m "fix(agent): cancel updates session status, sessionList stays in sync
+
+- cancelAgentTask now updates agentSessions and sessionList
+- appendAgentEvent syncs sessionList when session status changes
+- loadSessionList logs errors instead of silently failing"
+```
+
+---
+
+### Task 6: Fix App.tsx blank lines
+
+**Files:**
+- Modify: `src/renderer/App.tsx`
+
+- [ ] **Step 1: Remove accidental blank lines**
+
+The viewedThreadId removal left extra blank lines around line 678. Remove them so there's at most one blank line between the previous `useEffect` and the next one.
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/renderer/App.tsx
+git commit -m "style: remove accidental blank lines in App.tsx"
+```
+
+---
+
+### Task 7: Type check and test
+
+- [ ] **Step 1: Type check**
+
+```bash
+npx tsc --noEmit
+```
+
+Expected: Clean — no errors. If there are errors, they're likely:
+- Missing imports in restored files (unlikely since they're from the same codebase)
+- Store interface changes (the restored components use `agentTasks`/`agentTaskHistory` which still exist)
+
+- [ ] **Step 2: Run unit tests**
+
+```bash
+npm run test:unit
+```
+
+If the better-sqlite3 rebuild fails (environment issue), verify that at minimum:
+- `npx tsc --noEmit` passes
+- No import errors
+- The restored files match the merge base exactly (except for targeted fixes)
+
+- [ ] **Step 3: Run lint and format check**
+
+```bash
+npm run lint
+npm run format:check
+```
+
+Fix any issues before committing.
+
+---
+
+### Task 8: Push and update PR
+
+- [ ] **Step 1: Push**
+
+```bash
+git push
+```
+
+- [ ] **Step 2: Post a comment on the PR summarizing the changes**
+
+Use `gh pr comment` to explain:
+- Restored EventTimeline rendering (TextBlock with remarkGfm, ToolCallEvent with SQL highlighting, SubAgentBlock with recursive nesting)
+- Restored tight email-agent binding
+- Restored task history in sidebar
+- Kept backend session infrastructure for future non-email agent run improvements
+- Fixed all review bot issues (cancel session sync, sessionList staleness, error handling)
diff --git a/docs/superpowers/specs/2026-04-02-agent-chat-upgrade-design.md b/docs/superpowers/specs/2026-04-02-agent-chat-upgrade-design.md
new file mode 100644
index 00000000..ea6348d1
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-02-agent-chat-upgrade-design.md
@@ -0,0 +1,317 @@
+# Agent Chat Upgrade: Multi-Session, Live Thread Context, UI Redesign
+
+## Summary
+
+Transform the Agent Chat from a single-session-per-email timeline into a multi-session chat interface with persistent session history, live email thread context awareness, and a polished chat UI within the existing 320px sidebar.
+
+## Goals
+
+1. **Multi-session**: Users can have multiple independent chat sessions per email, plus global sessions. All sessions are browsable and resumable from a session dropdown within the Agent tab.
+2. **Live thread context**: The agent automatically knows which email thread the user is viewing. Thread content is injected into the conversation when the user sends a message, so the agent always has current context without manual passing.
+3. **UI redesign**: Replace the flat event timeline with a proper chat interface — message bubbles, collapsed tool calls, typing indicators, and a better input area.
+
+## Non-Goals
+
+- Pop-out / resizable chat panel (future enhancement)
+- Changes to the Agents Sidebar (left panel) — it keeps its current role
+- Changes to agent providers, orchestration, or tool system
+- Virtual scrolling (overkill for 320px sidebar)
+
+---
+
+## Design
+
+### 1. Data Model
+
+#### New type: `AgentSession`
+
+```typescript
+interface AgentSession {
+  id: string;                              // UUID
+  title: string;                           // Auto-generated from first prompt, editable
+  emailId: string | null;                  // null for global sessions
+  threadId: string | null;                 // thread the session was viewing at creation
+  accountId: string;
+  providerIds: string[];
+  createdAt: number;                       // epoch ms
+  updatedAt: number;                       // epoch ms, updated on every new message
+  status: "active" | "completed" | "failed" | "cancelled";
+  runs: Record<string, AgentProviderRun>;  // reuses existing type, keyed by providerId
+}
+
+interface AgentSessionSummary {
+  id: string;
+  title: string;
+  status: AgentSession["status"];
+  updatedAt: number;
+  emailId: string | null;
+}
+```
+
+#### DB table: `agent_sessions`
+
+```sql
+CREATE TABLE agent_sessions (
+  id TEXT PRIMARY KEY,
+  title TEXT NOT NULL,
+  email_id TEXT,
+  thread_id TEXT,
+  account_id TEXT NOT NULL,
+  provider_ids TEXT NOT NULL,        -- JSON array
+  created_at INTEGER NOT NULL,
+  updated_at INTEGER NOT NULL,
+  status TEXT NOT NULL DEFAULT 'active'
+);
+CREATE INDEX idx_agent_sessions_account ON agent_sessions(account_id);
+CREATE INDEX idx_agent_sessions_email ON agent_sessions(email_id);
+CREATE INDEX idx_agent_sessions_updated ON agent_sessions(updated_at DESC);
+```
+
+The existing `agent_conversation_mirror` table continues to store event traces. Its `local_task_id` column maps to `agent_sessions.id` going forward.
+
+#### Store changes
+
+```typescript
+// Replace
+agentTasks: Record<string, AgentTaskInfo>;        // emailId → task
+agentTaskIdMap: Record<string, string>;            // taskId → emailId
+
+// With
+agentSessions: Record<string, AgentSession>;       // sessionId → session
+activeSessionId: string | null;                     // currently displayed session
+sessionList: AgentSessionSummary[];                 // for the dropdown, sorted by updatedAt desc
+
+// Keep (backward compat during migration)
+agentTaskHistory: AgentTaskHistoryEntry[];
+```
+
+#### Session title generation
+
+Auto-generated from the first user prompt:
+- Truncate to ~40 chars at a word boundary
+- Append "..." if truncated
+- User can rename via the session dropdown (click on title → inline edit)
+
+### 2. Live Thread Context
+
+#### Mechanism
+
+The renderer watches `selectedEmailId` and `selectedThreadId` in the Zustand store. When the user sends a message in an agent session:
+
+1. Fetch all messages in the currently viewed thread via `sync:get-thread-emails` IPC (existing)
+2. Build a structured context block:
+   ```
+   [Currently viewing thread: "Re: Q2 Planning"]
+   From: alice@example.com, 3 messages in thread
+   ---
+   [1] From: alice@example.com | Apr 1, 2026
+   Hey, can we meet Thursday to discuss Q2?
+
+   [2] From: you | Apr 1, 2026
+   Sure, what time works?
+
+   [3] From: alice@example.com | Apr 2, 2026
+   How about 2pm?
+   ```
+3. Prepend this context block to the user's message as a system context section
+4. The context is **lazy** — only fetched when the user actually sends a message, not on every navigation
+5. If the thread hasn't changed since the last message, skip re-injection to avoid redundancy
+
+#### Context change indicator
+
+When the viewed thread changes while a session is active, show a subtle indicator in the chat:
+- A small divider line: `· Viewing: "New Subject…" ·`
+- This is purely visual — the actual context injection happens on next message send
+
+#### AgentContext changes
+
+Add to the existing `AgentContext` type:
+
+```typescript
+interface AgentContext {
+  // ... existing fields ...
+  currentThreadMessages?: ThreadContextMessage[];  // full thread for context injection
+}
+
+interface ThreadContextMessage {
+  from: string;
+  date: string;
+  body: string;       // plain text, stripped HTML
+  isFromUser: boolean;
+}
+```
+
+### 3. Chat UI Redesign
+
+#### Layout
+
+```
+┌──────────────────────────┐
+│ ▾ "Draft reply to Ali…"  │  Session dropdown
+│   + New Chat              │
+├──────────────────────────┤
+│                          │
+│  ┌────────────────────┐  │  Agent bubble (left, gray bg)
+│  │ I'll draft a reply │  │
+│  │ to Alice's email.  │  │
+│  │ ▸ Used 2 tools     │  │  Collapsed tool summary
+│  └────────────────────┘  │
+│                          │
+│         ┌────────────┐   │  User bubble (right, accent bg)
+│         │ Make it    │   │
+│         │ shorter    │   │
+│         └────────────┘   │
+│                          │
+│  ┌────────────────────┐  │
+│  │ Here's a shorter   │  │
+│  │ version: …         │  │
+│  └────────────────────┘  │
+│                          │
+│  · Viewing: "Q2 Plan…" · │  Context change indicator
+│                          │
+├──────────────────────────┤
+│ 📎 Re: Q2 Planning       │  Current thread bar
+├──────────────────────────┤
+│ [Ask about this thread…] │  Input textarea
+│                   [↑]    │  Send button
+└──────────────────────────┘
+```
+
+#### Component breakdown
+
+**SessionDropdown** — New component at top of Agent tab:
+- Shows current session title (truncated with ellipsis)
+- Click to expand dropdown listing all sessions for current account
+- Sessions grouped: "Active" (running/active status) then "Recent" (completed/failed/cancelled)
+- Each item shows: title, relative timestamp, status dot (green=active, gray=completed, red=failed)
+- "New Chat" button at top of dropdown
+- Click session to switch `activeSessionId`
+- Click title text to rename inline
+
+**ChatMessage** — New component replacing inline event rendering:
+- Two variants: `user` (right-aligned, accent background) and `agent` (left-aligned, gray background)
+- Agent messages render markdown (reuse existing markdown rendering)
+- Streaming text shows with a blinking cursor
+
+**CollapsedToolCalls** — New component for tool call groups:
+- Between agent text segments, consecutive tool calls collapse into "▸ Used N tools"
+- Click to expand and show tool name, input summary, result summary
+- Errors and confirmation requests remain always-visible (not collapsed)
+- Pending confirmations show inline approve/deny buttons as before
+
+**ContextIndicator** — Small divider component:
+- Shows when the viewed thread changes: `· Viewing: "Subject…" ·`
+- Muted text, centered, small font
+
+**ThreadBar** — Above the input area:
+- Shows the currently viewed thread subject (or "No thread selected")
+- Small paperclip icon prefix
+- Truncated with ellipsis
+- Clicking scrolls to / selects that email in the email list
+
+**ChatInput** — Improved input area:
+- Multi-line textarea (min 1 row, max 4 rows, auto-grows)
+- Placeholder: "Ask about this thread…" (when thread selected) or "Start a conversation…" (no thread)
+- Cmd+Enter to send (primary), Enter for newline
+- Send button (arrow up icon) appears when input is non-empty
+- Disabled state with "Thinking…" while agent is responding
+
+**TypingIndicator** — Replaces status bar:
+- Three-dot animation in an agent-style bubble at the bottom of the message list
+- Shows while agent is processing (between first event and done/error)
+
+#### Styling
+
+- Message bubbles: rounded corners (12px), padding 8px 12px
+- User bubbles: `bg-blue-500 text-white` (or app accent color)
+- Agent bubbles: `bg-gray-100 text-gray-900` (light mode), `bg-gray-800 text-gray-100` (dark mode)
+- Tool call collapsed line: `text-xs text-gray-500`, monospace icon
+- Session dropdown: standard dropdown styling, max-height 300px with scroll
+- All existing Tailwind CSS patterns in the codebase
+
+### 4. Session Lifecycle
+
+#### Creating a session
+
+1. User types in the chat input and presses send (no command palette needed for basic usage)
+2. If no active session for this context → create new `AgentSession` with auto-generated title
+3. If active session exists → append as follow-up message
+4. Command palette still works for structured actions — creates a session the same way
+
+#### Switching sessions
+
+1. Click session in dropdown → set `activeSessionId`
+2. Load events from `agent_conversation_mirror` if not already in memory
+3. Display the session's chat history
+4. Input placeholder updates based on session's email context vs current view
+
+#### Resuming sessions
+
+1. Sessions with status "active" or "completed" can receive follow-up messages
+2. On follow-up, the session's `updatedAt` is bumped
+3. If status was "completed", it transitions back to "active"
+4. Thread context is re-injected based on the **currently viewed** thread (not the original)
+
+#### Session cleanup
+
+- No auto-deletion — sessions persist until manually cleared
+- Future: add a "Clear all sessions" option in Agents Sidebar settings
+
+### 5. Migration
+
+On first launch after upgrade:
+
+1. Migration reads all rows from `agent_conversation_mirror`
+2. For each unique `local_task_id`, creates an `agent_sessions` row:
+   - `id` = existing `local_task_id`
+   - `title` = first user message text (truncated) or "Untitled session"
+   - `email_id`, `thread_id`, `account_id` = extracted from stored events context
+   - `provider_ids` = from `provider_id` column
+   - `status` = "completed" (all migrated sessions are historical)
+   - Timestamps from existing data
+3. No data loss — event traces remain in `agent_conversation_mirror` unchanged
+
+### 6. IPC Changes
+
+**New handlers:**
+- `agent:list-sessions` — returns `AgentSessionSummary[]` for current account, sorted by `updatedAt` desc, limit 50
+- `agent:get-session` — returns full `AgentSession` by ID
+- `agent:rename-session` — updates session title
+- `agent:delete-session` — deletes session and its traces
+
+**Modified handlers:**
+- `agent:run` — accepts `sessionId` parameter. If provided, appends to existing session. If not, creates new session and returns its ID.
+- `agent:get-trace` — works with session IDs (backward compatible since old task IDs become session IDs)
+
+**New events:**
+- `agent:session-updated` — broadcast when session status/title changes
+
+### 7. Testing Strategy
+
+- **Unit tests**: Session CRUD in DB, title generation, context block building, migration logic
+- **E2E tests**: Create session → send message → switch thread → send follow-up (verify context injection) → switch sessions → verify history loads
+- **Integration tests**: IPC round-trip for session lifecycle
+
+---
+
+## File Impact
+
+| File | Change |
+|------|--------|
+| `src/shared/agent-types.ts` | Add `AgentSession`, `AgentSessionSummary`, `ThreadContextMessage` types |
+| `src/main/db/schema.ts` | Add `agent_sessions` table |
+| `src/main/db/index.ts` | Add migration, session CRUD functions |
+| `src/main/ipc/agent.ipc.ts` | Add session IPC handlers, modify `agent:run` |
+| `src/main/agents/agent-coordinator.ts` | Session creation/update on task lifecycle |
+| `src/preload/index.ts` | Expose new session IPC methods |
+| `src/renderer/store/index.ts` | Replace task state with session state |
+| `src/renderer/components/AgentPanel.tsx` | Full rewrite → chat UI with message bubbles |
+| `src/renderer/components/AgentPanel/SessionDropdown.tsx` | New component |
+| `src/renderer/components/AgentPanel/ChatMessage.tsx` | New component |
+| `src/renderer/components/AgentPanel/CollapsedToolCalls.tsx` | New component |
+| `src/renderer/components/AgentPanel/ChatInput.tsx` | New component |
+| `src/renderer/components/AgentPanel/ContextIndicator.tsx` | New component |
+| `src/renderer/components/AgentPanel/ThreadBar.tsx` | New component |
+| `src/renderer/components/AgentCommandPalette.tsx` | Use session-based flow |
+| `src/renderer/components/EmailPreviewSidebar.tsx` | Update to use session state |
+| `src/renderer/components/AgentsSidebar.tsx` | Minor: pull history from sessions |
diff --git a/package-lock.json b/package-lock.json
index f34e8673..13062bb6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -64,7 +64,7 @@
         "@typescript-eslint/parser": "^8.57.2",
         "@vitejs/plugin-react": "^4.3.4",
         "autoprefixer": "^10.4.20",
-        "electron": "^34.0.0",
+        "electron": "^34.5.8",
         "electron-builder": "^25.1.8",
         "electron-vite": "^3.0.0",
         "eslint": "^10.1.0",
@@ -386,7 +386,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -707,7 +706,6 @@
       "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -1658,7 +1656,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
       "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@floating-ui/core": "^1.7.5",
         "@floating-ui/utils": "^0.2.11"
@@ -2519,7 +2516,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.1.tgz",
       "integrity": "sha512-gLyJlPHPZYdAk1JENA9LeHejZe1Ti77/pTeFm/nMXmQH/HFZlcS/O2XJB+L8fkbrNSqhdtlvjBVjxwUYanNH5Q==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=8.0.0"
       }
@@ -3341,7 +3337,6 @@
       "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.21.0.tgz",
       "integrity": "sha512-IfnQiuEeabDSPr1C/zHFTbnvlTf5z0DE/d/xz4C6bkL4ZBDJ3rr99h2qsaV0l8F+kbNswZMlQdM8rxNlMy95fQ==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -3577,7 +3572,6 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.21.0.tgz",
       "integrity": "sha512-KeBlEtLrGce2d3dgL89hmwWEtREuzlW4XY5bYWpKNvCbFqvdSb3n7vkdkw32YclZmMWxAcABgW6ucCStkE0rsQ==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -3709,7 +3703,6 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.21.0.tgz",
       "integrity": "sha512-MN1uh5PmHT1F2BNsbc21MIS0AMFFA73oODlp/4ckpBR4o5AxRwV+8f43Cd52UL4MgMkKj/A+QfZ7iK9IDb0h5A==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -3724,7 +3717,6 @@
       "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.21.0.tgz",
       "integrity": "sha512-I3sNo7oMMsR6FFz1ecvPb9uCF0VQuS2WV67j8Io2M7DJicRWCE/GM5DaiYjTeWBbnByk6BuG0txoJATAqPVliQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "prosemirror-changeset": "^2.3.0",
         "prosemirror-collab": "^1.3.1",
@@ -4081,7 +4073,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz",
       "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -4092,7 +4083,6 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -4191,7 +4181,6 @@
       "integrity": "sha512-rLoGZIf9afaRBYsPUMtvkDWykwXwUPL60HebR4JgTI8mxfFe2cQTu3AGitANp4b9B2QlVru6WzjgB2IzJKiCSA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.58.0",
         "@typescript-eslint/types": "8.58.0",
@@ -4460,7 +4449,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4725,6 +4713,7 @@
       "integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "archiver-utils": "^2.1.0",
         "async": "^3.2.4",
@@ -4744,6 +4733,7 @@
       "integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "glob": "^7.1.4",
         "graceful-fs": "^4.2.0",
@@ -4766,6 +4756,7 @@
       "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -4781,7 +4772,8 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/archiver-utils/node_modules/string_decoder": {
       "version": "1.1.1",
@@ -4789,6 +4781,7 @@
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "safe-buffer": "~5.1.0"
       }
@@ -5149,7 +5142,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -5826,6 +5818,7 @@
       "integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "buffer-crc32": "^0.2.13",
         "crc32-stream": "^4.0.2",
@@ -6072,6 +6065,7 @@
       "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "crc32": "bin/crc32.njs"
       },
@@ -6085,6 +6079,7 @@
       "integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "crc-32": "^1.2.0",
         "readable-stream": "^3.4.0"
@@ -6422,7 +6417,6 @@
       "integrity": "sha512-NoXo6Liy2heSklTI5OIZbCgXC1RzrDQsZkeEwXhdOro3FT1VBOvbubvscdPnjVuQ4AMwwv61oaH96AbiYg9EnQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "app-builder-lib": "25.1.8",
         "builder-util": "25.1.7",
@@ -6637,7 +6631,6 @@
       "integrity": "sha512-vxLD65mabTzYmEVa9KceMHM0+zO+vqgrhcyNVlmTd0IGV5J7XZ8v/qElm0o4YQ4wPeq7olZkUjZkBQQEdr23/g==",
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@electron/get": "^2.0.0",
         "@types/node": "^20.9.0",
@@ -6682,6 +6675,7 @@
       "integrity": "sha512-2ntkJ+9+0GFP6nAISiMabKt6eqBB0kX1QqHNWFWAXgi0VULKGisM46luRFpIBiU3u/TDmhZMM8tzvo2Abn3ayg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "app-builder-lib": "25.1.8",
         "archiver": "^5.3.1",
@@ -6695,6 +6689,7 @@
       "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
@@ -6710,6 +6705,7 @@
       "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "universalify": "^2.0.0"
       },
@@ -6723,6 +6719,7 @@
       "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 10.0.0"
       }
@@ -7135,7 +7132,6 @@
       "integrity": "sha512-S9jlY/ELKEUwwQnqWDO+f+m6sercqOPSqXM5Go94l7DOmxHVDgmSFGWEzeE/gwgTAr0W103BWt0QLe/7mabIvA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.2",
@@ -7478,7 +7474,6 @@
       "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
       "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.1",
@@ -8495,7 +8490,6 @@
       "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.9.tgz",
       "integrity": "sha512-wy3T8Zm2bsEvxKZM5w21VdHDDcwVS1yUFFY6i8UobSsKfFceT7TOwhbhfKsDyx7tYQlmRM5FLpIuYvNFyjctiA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
@@ -8953,7 +8947,8 @@
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
       "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/isbinaryfile": {
       "version": "5.0.7",
@@ -9014,7 +9009,6 @@
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -9186,6 +9180,7 @@
       "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "readable-stream": "^2.0.5"
       },
@@ -9199,6 +9194,7 @@
       "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -9214,7 +9210,8 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lazystream/node_modules/string_decoder": {
       "version": "1.1.1",
@@ -9222,6 +9219,7 @@
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "safe-buffer": "~5.1.0"
       }
@@ -9300,14 +9298,16 @@
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
       "integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.difference": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
       "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.escaperegexp": {
       "version": "4.1.2",
@@ -9320,7 +9320,8 @@
       "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
       "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.isequal": {
       "version": "4.5.0",
@@ -9334,14 +9335,16 @@
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
       "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.union": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
       "integrity": "sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/log-symbols": {
       "version": "4.1.0",
@@ -11548,7 +11551,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -11781,7 +11783,8 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/process-warning": {
       "version": "5.0.0",
@@ -11951,7 +11954,6 @@
       "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.4.tgz",
       "integrity": "sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "orderedmap": "^2.0.0"
       }
@@ -11981,7 +11983,6 @@
       "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz",
       "integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "prosemirror-model": "^1.0.0",
         "prosemirror-transform": "^1.0.0",
@@ -12030,7 +12031,6 @@
       "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.41.7.tgz",
       "integrity": "sha512-jUwKNCEIGiqdvhlS91/2QAg21e4dfU5bH2iwmSDQeosXJgKF7smG0YSplOWK0cjSNgIqXe7VXqo7EIfUFJdt3w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "prosemirror-model": "^1.20.0",
         "prosemirror-state": "^1.0.0",
@@ -12223,7 +12223,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -12236,7 +12235,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -12325,6 +12323,7 @@
       "integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "minimatch": "^5.1.0"
       }
@@ -12334,7 +12333,8 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/readdir-glob/node_modules/brace-expansion": {
       "version": "2.0.3",
@@ -12342,6 +12342,7 @@
       "integrity": "sha512-MCV/fYJEbqx68aE58kv2cA/kiky1G8vux3OR6/jbS+jIMe/6fJWa0DTzJU7dqijOWYwHi1t29FlfYI9uytqlpA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -12352,6 +12353,7 @@
       "integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
       "dev": true,
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -13440,7 +13442,6 @@
       "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -13674,7 +13675,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13828,7 +13828,6 @@
       "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "~0.27.0",
         "get-tsconfig": "^4.7.5"
@@ -14399,7 +14398,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -14713,7 +14711,6 @@
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -14822,7 +14819,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -15034,6 +15030,7 @@
       "integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "archiver-utils": "^3.0.4",
         "compress-commons": "^4.1.2",
@@ -15049,6 +15046,7 @@
       "integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "glob": "^7.2.3",
         "graceful-fs": "^4.2.0",
@@ -15070,7 +15068,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index 7bd50485..f22859cb 100644
--- a/package.json
+++ b/package.json
@@ -87,11 +87,11 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/semver": "^7.7.1",
-    "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.20",
     "@typescript-eslint/eslint-plugin": "^8.57.2",
     "@typescript-eslint/parser": "^8.57.2",
-    "electron": "^34.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "electron": "^34.5.8",
     "electron-builder": "^25.1.8",
     "electron-vite": "^3.0.0",
     "eslint": "^10.1.0",
diff --git a/src/main/agents/agent-coordinator.ts b/src/main/agents/agent-coordinator.ts
index aeb17b62..a628c4e0 100644
--- a/src/main/agents/agent-coordinator.ts
+++ b/src/main/agents/agent-coordinator.ts
@@ -348,6 +348,26 @@ export class AgentCoordinator {
     // Initialize event accumulator for this task
     this.taskEvents.set(taskId, []);
 
+    // Create session in DB
+    const now = Date.now();
+    const sessionRow: db.AgentSessionRow = {
+      id: taskId,
+      title:
+        (prompt.length > 40 ? prompt.slice(0, 40).replace(/\s+\S*$/, "") : prompt) || "Untitled",
+      email_id: context.currentEmailId || null,
+      thread_id: context.currentThreadId || null,
+      account_id: context.accountId,
+      provider_ids: JSON.stringify(providerIds),
+      created_at: now,
+      updated_at: now,
+      status: "active",
+    };
+    try {
+      db.saveAgentSession(sessionRow);
+    } catch (err) {
+      log.error({ err, taskId }, "Failed to save agent session");
+    }
+
     // Forward events from port1 to the renderer via IPC
     port1.on("message", (event) => {
       const agentEvent = event.data as ScopedAgentEvent;
@@ -371,9 +391,17 @@ export class AgentCoordinator {
           agentEvent.state === "failed" ||
           agentEvent.state === "cancelled")
       ) {
-        this.persistTaskEvents(taskId, agentEvent.state);
+        const state = agentEvent.state;
+        this.persistTaskEvents(taskId, state);
+        const terminalStatus =
+          state === "completed" ? "completed" : state === "cancelled" ? "cancelled" : "failed";
+        try {
+          db.updateAgentSessionStatus(taskId, terminalStatus);
+        } catch (err) {
+          log.error({ err, taskId, terminalStatus }, "Failed to update agent session status");
+        }
         this.closePort(taskId);
-        this.resolveTaskCompletion(taskId, agentEvent.state);
+        this.resolveTaskCompletion(taskId, state);
       }
     });
     port1.start();
@@ -435,6 +463,11 @@ export class AgentCoordinator {
     // Persist partial trace before closing port — the worker's "cancelled" event
     // won't arrive after closePort() kills the message handler.
     this.persistTaskEvents(taskId, "cancelled");
+    try {
+      db.updateAgentSessionStatus(taskId, "cancelled");
+    } catch (err) {
+      log.error({ err, taskId }, "Failed to update agent session status on cancel");
+    }
     this.closePort(taskId);
     this.resolveTaskCompletion(taskId, "cancelled");
   }
diff --git a/src/main/db/index.ts b/src/main/db/index.ts
index a47a2a14..f700e285 100644
--- a/src/main/db/index.ts
+++ b/src/main/db/index.ts
@@ -16,6 +16,7 @@ import type {
   DraftMemory,
 } from "../../shared/types";
 import { createLogger } from "../services/logger";
+import type { AgentSession } from "../../shared/agent-types";
 
 const log = createLogger("db");
 
@@ -393,6 +394,31 @@ const NUMBERED_MIGRATIONS: Migration[] = [
       `);
     },
   },
+  {
+    version: 2,
+    name: "add_agent_sessions_table",
+    up: (db) => {
+      db.exec(`
+        CREATE TABLE IF NOT EXISTS agent_sessions (
+          id TEXT PRIMARY KEY,
+          title TEXT NOT NULL,
+          email_id TEXT,
+          thread_id TEXT,
+          account_id TEXT NOT NULL,
+          provider_ids TEXT NOT NULL,
+          created_at INTEGER NOT NULL,
+          updated_at INTEGER NOT NULL,
+          status TEXT NOT NULL DEFAULT 'active'
+        );
+        CREATE INDEX IF NOT EXISTS idx_agent_sessions_account ON agent_sessions(account_id);
+        CREATE INDEX IF NOT EXISTS idx_agent_sessions_email ON agent_sessions(email_id);
+        CREATE INDEX IF NOT EXISTS idx_agent_sessions_updated ON agent_sessions(updated_at DESC);
+      `);
+      // Note: existing traces in agent_conversation_mirror are NOT migrated to sessions.
+      // They remain accessible via the existing replayAgentTrace path. New sessions are
+      // created by the coordinator going forward.
+    },
+  },
 ];
 
 function runNumberedMigrations(db: DatabaseInstance): void {
@@ -4253,3 +4279,83 @@ export function listConversationMirrors(providerId?: string): ConversationMirror
     updatedAt: row.updatedAt as string,
   }));
 }
+
+// ---------------------------------------------------------------------------
+// Agent Sessions
+// ---------------------------------------------------------------------------
+
+export interface AgentSessionRow {
+  id: string;
+  title: string;
+  email_id: string | null;
+  thread_id: string | null;
+  account_id: string;
+  provider_ids: string; // JSON array
+  created_at: number;
+  updated_at: number;
+  status: AgentSession["status"];
+}
+
+export function saveAgentSession(session: AgentSessionRow): void {
+  getDatabase()
+    .prepare(
+      `INSERT OR REPLACE INTO agent_sessions
+       (id, title, email_id, thread_id, account_id, provider_ids, created_at, updated_at, status)
+       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+    )
+    .run(
+      session.id,
+      session.title,
+      session.email_id,
+      session.thread_id,
+      session.account_id,
+      session.provider_ids,
+      session.created_at,
+      session.updated_at,
+      session.status,
+    );
+}
+
+export function getAgentSession(sessionId: string): AgentSessionRow | null {
+  return (
+    (getDatabase().prepare("SELECT * FROM agent_sessions WHERE id = ?").get(sessionId) as
+      | AgentSessionRow
+      | undefined) ?? null
+  );
+}
+
+export function listAgentSessions(accountId: string, limit = 50): AgentSessionRow[] {
+  return getDatabase()
+    .prepare("SELECT * FROM agent_sessions WHERE account_id = ? ORDER BY updated_at DESC LIMIT ?")
+    .all(accountId, limit) as AgentSessionRow[];
+}
+
+export function listAgentSessionsForEmail(emailId: string): AgentSessionRow[] {
+  return getDatabase()
+    .prepare("SELECT * FROM agent_sessions WHERE email_id = ? ORDER BY updated_at DESC")
+    .all(emailId) as AgentSessionRow[];
+}
+
+export function updateAgentSessionStatus(
+  sessionId: string,
+  status: AgentSession["status"],
+  updatedAt = Date.now(),
+): void {
+  getDatabase()
+    .prepare("UPDATE agent_sessions SET status = ?, updated_at = ? WHERE id = ?")
+    .run(status, updatedAt, sessionId);
+}
+
+export function updateAgentSessionTitle(sessionId: string, title: string): void {
+  getDatabase()
+    .prepare("UPDATE agent_sessions SET title = ?, updated_at = ? WHERE id = ?")
+    .run(title, Date.now(), sessionId);
+}
+
+export function deleteAgentSession(sessionId: string): void {
+  const db = getDatabase();
+  db.transaction(() => {
+    db.prepare("DELETE FROM agent_sessions WHERE id = ?").run(sessionId);
+    db.prepare("DELETE FROM agent_conversation_mirror WHERE local_task_id = ?").run(sessionId);
+  })();
+}
diff --git a/src/main/db/schema.ts b/src/main/db/schema.ts
index 89c51cb7..7cc67952 100644
--- a/src/main/db/schema.ts
+++ b/src/main/db/schema.ts
@@ -355,6 +355,22 @@ CREATE INDEX IF NOT EXISTS idx_memories_account ON memories(account_id);
 CREATE INDEX IF NOT EXISTS idx_memories_scope ON memories(scope, scope_value);
 CREATE INDEX IF NOT EXISTS idx_emails_message_id ON emails(message_id);
 CREATE INDEX IF NOT EXISTS idx_emails_in_reply_to ON emails(in_reply_to);
+
+-- Agent chat sessions — persistent multi-session support
+CREATE TABLE IF NOT EXISTS agent_sessions (
+  id TEXT PRIMARY KEY,
+  title TEXT NOT NULL,
+  email_id TEXT,
+  thread_id TEXT,
+  account_id TEXT NOT NULL,
+  provider_ids TEXT NOT NULL,
+  created_at INTEGER NOT NULL,
+  updated_at INTEGER NOT NULL,
+  status TEXT NOT NULL DEFAULT 'active'
+);
+CREATE INDEX IF NOT EXISTS idx_agent_sessions_account ON agent_sessions(account_id);
+CREATE INDEX IF NOT EXISTS idx_agent_sessions_email ON agent_sessions(email_id);
+CREATE INDEX IF NOT EXISTS idx_agent_sessions_updated ON agent_sessions(updated_at DESC);
 `;
 
 // FTS5 full-text search schema (separate because SQLite can't IF NOT EXISTS for virtual tables)
diff --git a/src/main/ipc/agent.ipc.ts b/src/main/ipc/agent.ipc.ts
index 8c52c2ae..b038cfb5 100644
--- a/src/main/ipc/agent.ipc.ts
+++ b/src/main/ipc/agent.ipc.ts
@@ -3,10 +3,20 @@ import { execFile, execFileSync } from "child_process";
 import { agentCoordinator } from "../agents/agent-coordinator";
 import { authenticateProvider } from "../agents/private-providers-main";
 import { getModelIdForFeature } from "./settings.ipc";
-import { getAgentTrace } from "../db";
+import {
+  getAgentTrace,
+  getAgentSession,
+  listAgentSessions,
+  listAgentSessionsForEmail,
+  updateAgentSessionTitle,
+  deleteAgentSession,
+} from "../db";
 import type { AgentContext } from "../agents/types";
 import type { ScopedAgentEvent } from "../agents/types";
 import type { IpcResponse } from "../../shared/types";
+import { createLogger } from "../services/logger";
+
+const log = createLogger("agent-ipc");
 
 /** Check if `claude` CLI is available on PATH. Cached after first check. */
 let claudeCliAvailable: boolean | null = null;
@@ -263,4 +273,109 @@ export function registerAgentIpc(): void {
       }
     },
   );
+
+  ipcMain.handle(
+    "agent:list-sessions",
+    async (_, { accountId, emailId }: { accountId: string; emailId?: string }) => {
+      try {
+        const rows = emailId ? listAgentSessionsForEmail(emailId) : listAgentSessions(accountId);
+        // Filter by accountId to enforce ownership even when querying by emailId
+        const owned = rows.filter((r) => r.account_id === accountId);
+        const summaries = owned.map((r) => ({
+          id: r.id,
+          title: r.title,
+          status: r.status,
+          updatedAt: r.updated_at,
+          emailId: r.email_id,
+        }));
+        return { success: true, data: summaries };
+      } catch (err) {
+        log.error({ err }, "Failed to list agent sessions");
+        return { success: false, error: String(err) };
+      }
+    },
+  );
+
+  ipcMain.handle(
+    "agent:get-session",
+    async (_, { sessionId, accountId }: { sessionId: string; accountId?: string }) => {
+      try {
+        const row = getAgentSession(sessionId);
+        if (!row) return { success: false, error: "Session not found" };
+        // Ownership check: if accountId provided, verify it matches
+        if (accountId && row.account_id !== accountId) {
+          return { success: false, error: "Session not found" };
+        }
+        let providerIds: string[];
+        try {
+          providerIds = JSON.parse(row.provider_ids);
+        } catch {
+          log.warn({ sessionId }, "Malformed provider_ids in session row");
+          providerIds = [];
+        }
+        return {
+          success: true,
+          data: {
+            id: row.id,
+            title: row.title,
+            emailId: row.email_id,
+            threadId: row.thread_id,
+            accountId: row.account_id,
+            providerIds,
+            createdAt: row.created_at,
+            updatedAt: row.updated_at,
+            status: row.status,
+          },
+        };
+      } catch (err) {
+        log.error({ err }, "Failed to get agent session");
+        return { success: false, error: String(err) };
+      }
+    },
+  );
+
+  ipcMain.handle(
+    "agent:rename-session",
+    async (
+      _,
+      { sessionId, title, accountId }: { sessionId: string; title: string; accountId?: string },
+    ) => {
+      try {
+        // Ownership check
+        if (accountId) {
+          const row = getAgentSession(sessionId);
+          if (!row || row.account_id !== accountId) {
+            return { success: false, error: "Session not found" };
+          }
+        }
+        const trimmed = title.trim();
+        if (!trimmed) return { success: false, error: "Title cannot be empty" };
+        updateAgentSessionTitle(sessionId, trimmed);
+        return { success: true, data: null };
+      } catch (err) {
+        log.error({ err }, "Failed to rename agent session");
+        return { success: false, error: String(err) };
+      }
+    },
+  );
+
+  ipcMain.handle(
+    "agent:delete-session",
+    async (_, { sessionId, accountId }: { sessionId: string; accountId?: string }) => {
+      try {
+        // Ownership check
+        if (accountId) {
+          const row = getAgentSession(sessionId);
+          if (!row || row.account_id !== accountId) {
+            return { success: false, error: "Session not found" };
+          }
+        }
+        deleteAgentSession(sessionId);
+        return { success: true, data: null };
+      } catch (err) {
+        log.error({ err }, "Failed to delete agent session");
+        return { success: false, error: String(err) };
+      }
+    },
+  );
 }
diff --git a/src/preload/index.ts b/src/preload/index.ts
index ce0868af..3507acba 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -881,6 +881,12 @@ const api = {
       ipcRenderer.invoke("agent:get-trace", { taskId }),
     claudeAuthStatus: (): Promise<unknown> => ipcRenderer.invoke("agent:claude-auth-status"),
     claudeLogin: (): Promise<unknown> => ipcRenderer.invoke("agent:claude-login"),
+    listSessions(accountId: string, emailId?: string): Promise<unknown> {
+      return ipcRenderer.invoke("agent:list-sessions", { accountId, emailId });
+    },
+    getSession(sessionId: string): Promise<unknown> {
+      return ipcRenderer.invoke("agent:get-session", { sessionId });
+    },
     onEvent: (callback: (data: unknown) => void): void => {
       ipcRenderer.on("agent:event", (_: Electron.IpcRendererEvent, data: unknown) =>
         callback(data),
diff --git a/src/renderer/components/AgentCommandPalette.tsx b/src/renderer/components/AgentCommandPalette.tsx
index 573f66e8..babdb9c8 100644
--- a/src/renderer/components/AgentCommandPalette.tsx
+++ b/src/renderer/components/AgentCommandPalette.tsx
@@ -154,9 +154,6 @@ function fuzzyMatch(text: string, query: string): boolean {
   return words.every((w) => lowerText.includes(w));
 }
 
-/** Sentinel key used in the store for agent tasks that aren't tied to any specific email. */
-export const GLOBAL_AGENT_KEY = "__global__";
-
 interface AgentCommandPaletteProps {
   isOpen: boolean;
   onClose: () => void;
@@ -300,14 +297,39 @@ export function AgentCommandPalette({ isOpen, onClose }: AgentCommandPaletteProp
         context.emailBody =
           selectedDraft.bodyText || stripHtml(selectedDraft.bodyHtml) || undefined;
       } else {
-        taskKey = GLOBAL_AGENT_KEY;
-        setGlobalAgentTaskKey(GLOBAL_AGENT_KEY);
+        // Use a unique key per non-email run so multiple can coexist in agentTasks
+        const globalTaskId = crypto.randomUUID();
+        taskKey = globalTaskId;
+        setGlobalAgentTaskKey(taskKey);
       }
 
       // Generate taskId on the frontend so the store mapping is populated
       // before any backend events arrive (avoids race condition).
-      const taskId = crypto.randomUUID();
+      // For non-email runs, taskId === taskKey (both are the UUID).
+      const taskId =
+        taskKey.startsWith("draft:") || selectedEmailId ? crypto.randomUUID() : taskKey;
       startAgentTask(taskId, taskKey, effectiveProviderIds, effectivePrompt, context);
+
+      // Create a session record so the command palette launch is tracked in session history
+      const now = Date.now();
+      useAppStore.getState().createSession({
+        id: taskId,
+        title:
+          effectivePrompt.length > 40
+            ? effectivePrompt.slice(0, 40).replace(/\s+\S*$/, "") + "..."
+            : effectivePrompt,
+        emailId: selectedEmailId || null,
+        threadId: selectedThreadId || null,
+        accountId: currentAccountId || "",
+        providerIds: effectiveProviderIds,
+        createdAt: now,
+        updatedAt: now,
+        status: "active",
+        runs: Object.fromEntries(
+          effectiveProviderIds.map((pid) => [pid, { status: "running" as const, events: [] }]),
+        ),
+      });
+
       trackEvent("agent_run_started", {
         source: "manual",
         provider_count: effectiveProviderIds.length,
@@ -331,6 +353,8 @@ export function AgentCommandPalette({ isOpen, onClose }: AgentCommandPaletteProp
           message: result.error ?? "Failed to start agent task",
           providerId: effectiveProviderIds[0],
         });
+        // Clean up the optimistically-created session so it doesn't linger as 'active'
+        store.updateSessionInStore(taskId, { status: "failed" });
       }
     },
     [
diff --git a/src/renderer/components/EmailPreviewSidebar.tsx b/src/renderer/components/EmailPreviewSidebar.tsx
index f3738674..0f7218b6 100644
--- a/src/renderer/components/EmailPreviewSidebar.tsx
+++ b/src/renderer/components/EmailPreviewSidebar.tsx
@@ -2,7 +2,7 @@ import { memo, useMemo, useEffect, useRef } from "react";
 import { useAppStore } from "../store";
 import { useExtensionPanels, ExtensionPanelSlot } from "../extensions";
 import { AgentTabContent } from "./AgentPanel";
-import type { ScopedAgentEvent } from "../../shared/agent-types";
+import type { ScopedAgentEvent, AgentSessionSummary } from "../../shared/agent-types";
 
 // SVG icon components for sidebar tabs
 function PersonIcon({ active }: { active: boolean }) {
@@ -82,6 +82,56 @@ const TAB_LABELS: Record<SidebarTab, string> = {
   agent: "Agent",
 };
 
+/** Horizontal pill bar for switching between non-email agent sessions */
+function GlobalSessionBar({
+  sessions,
+  activeKey,
+  onSelect,
+  onNew,
+}: {
+  sessions: AgentSessionSummary[];
+  activeKey: string | null;
+  onSelect: (sessionId: string) => void;
+  onNew: () => void;
+}) {
+  // Show most recent 6 sessions, with the active one always visible
+  const visible = sessions.slice(0, 6);
+
+  return (
+    <div className="flex items-center gap-1.5 px-3 py-2 border-b border-gray-200 dark:border-gray-700 overflow-x-auto flex-shrink-0">
+      {visible.map((s) => (
+        <button
+          key={s.id}
+          onClick={() => onSelect(s.id)}
+          className={`flex-shrink-0 px-2.5 py-1 text-xs rounded-full truncate max-w-[140px] transition-colors ${
+            s.id === activeKey
+              ? "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 font-medium"
+              : "bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600"
+          }`}
+          title={s.title}
+        >
+          {s.title}
+        </button>
+      ))}
+      <button
+        onClick={onNew}
+        className="flex-shrink-0 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700 text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+        title="New agent task (Cmd+J)"
+      >
+        <svg
+          className="w-3.5 h-3.5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          strokeWidth={2}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+        </svg>
+      </button>
+    </div>
+  );
+}
+
 // memo: prevents parent (App) re-renders from cascading into the sidebar.
 // The sidebar reads all state from Zustand hooks, so parent-triggered re-renders
 // are always wasted work — especially expensive when EventTimeline has hundreds of events.
@@ -95,10 +145,22 @@ export const EmailPreviewSidebar = memo(function EmailPreviewSidebar() {
   const availableTabs = useAppStore((s) => s.availableSidebarTabs);
   const setAvailableTabs = useAppStore((s) => s.setAvailableSidebarTabs);
   const globalAgentTaskKey = useAppStore((s) => s.globalAgentTaskKey);
+  const setGlobalAgentTaskKey = useAppStore((s) => s.setGlobalAgentTaskKey);
+  const sessionList = useAppStore((s) => s.sessionList);
+  const currentAccountId = useAppStore((s) => s.currentAccountId);
+  const loadSessionList = useAppStore((s) => s.loadSessionList);
+  const replayAgentTrace = useAppStore((s) => s.replayAgentTrace);
+  const setAgentPaletteOpen = useAppStore((s) => s.setAgentPaletteOpen);
   // Draft task key for agent tab — drafts use `draft:${id}` as their task key
   const draftTaskKey = selectedDraftId ? `draft:${selectedDraftId}` : null;
   const selectedEmail = emails.find((e) => e.id === selectedEmailId);
 
+  // Non-email sessions for the GlobalSessionBar
+  const globalSessions = useMemo(
+    () => sessionList.filter((s) => s.emailId === null),
+    [sessionList],
+  );
+
   // Whether the selected email has a persisted agent trace (even if not yet loaded into memory)
   const hasPersistedTrace = Boolean(selectedEmail?.draft?.agentTaskId);
 
@@ -225,7 +287,6 @@ export const EmailPreviewSidebar = memo(function EmailPreviewSidebar() {
   // Debounced to avoid blocking j/k navigation — traces can be very large
   // (100MB+) and IPC deserialization blocks the main thread.
   const loadedTraceRef = useRef<string | null>(null);
-  const replayAgentTrace = useAppStore((s) => s.replayAgentTrace);
   // Derive primitive values so the effect doesn't re-run on every store mutation
   const selectedEmailIdForTrace = selectedEmail?.id;
   const selectedEmailAgentTaskId = selectedEmail?.draft?.agentTaskId;
@@ -286,17 +347,63 @@ export const EmailPreviewSidebar = memo(function EmailPreviewSidebar() {
     return () => clearTimeout(timeoutId);
   }, [selectedEmailIdForTrace, selectedEmailAgentTaskId, hasAgentTask, replayAgentTrace]);
 
+  // Load session list when no email is selected (for the GlobalSessionBar)
+  useEffect(() => {
+    if (!selectedEmailId && currentAccountId) {
+      loadSessionList(currentAccountId);
+    }
+  }, [selectedEmailId, currentAccountId, loadSessionList]);
+
+  // Load trace from DB when switching to a historical global session that isn't in memory
+  useEffect(() => {
+    if (selectedEmailId || !globalAgentTaskKey) return;
+    const hasTask = useAppStore.getState().agentTasks[globalAgentTaskKey];
+    if (hasTask) return;
+
+    const api = window.api as unknown as {
+      agent: {
+        getTrace: (
+          taskId: string,
+        ) => Promise<{ success: boolean; data?: { events: ScopedAgentEvent[] } }>;
+        getSession: (
+          sessionId: string,
+        ) => Promise<{ success: boolean; data?: { providerIds: string[] } }>;
+      };
+    };
+
+    const sessionId = globalAgentTaskKey;
+    const timeoutId = setTimeout(() => {
+      // Load both session metadata (for providerIds) and trace data in parallel
+      Promise.all([api.agent.getSession(sessionId), api.agent.getTrace(sessionId)])
+        .then(([sessionResult, traceResult]) => {
+          // Guard: user may have switched away
+          if (useAppStore.getState().globalAgentTaskKey !== sessionId) return;
+          if (!traceResult.success || !traceResult.data?.events?.length) return;
+          const providerIds =
+            sessionResult.success && sessionResult.data?.providerIds?.length
+              ? sessionResult.data.providerIds
+              : ["claude"];
+          replayAgentTrace(
+            sessionId,
+            sessionId, // Use sessionId as the task key for non-email runs
+            providerIds,
+            "",
+            { accountId: currentAccountId || "", userEmail: "" },
+            traceResult.data.events,
+          );
+        })
+        .catch((err: unknown) => {
+          console.error("[EmailPreviewSidebar] Failed to load global session trace:", err);
+        });
+    }, 300);
+
+    return () => clearTimeout(timeoutId);
+  }, [globalAgentTaskKey, selectedEmailId, currentAccountId, replayAgentTrace]);
+
   // No email selected — show agent panel if a draft or global task is active, otherwise empty state
   if (!selectedEmail || !latestEmail) {
-    if (agentTaskKey && hasAgentTask) {
-      return (
-        <div className="w-80 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 flex flex-col overflow-hidden">
-          <AgentTabContent emailId={agentTaskKey} />
-        </div>
-      );
-    }
     // Draft is selected but no agent task yet — show prompt hint
-    if (selectedDraftId) {
+    if (selectedDraftId && !hasAgentTask) {
       return (
         <div className="w-80 bg-gray-50 dark:bg-gray-800/50 border-l border-gray-200 dark:border-gray-700 flex items-center justify-center">
           <div className="text-center px-6">
@@ -312,11 +419,50 @@ export const EmailPreviewSidebar = memo(function EmailPreviewSidebar() {
         </div>
       );
     }
+
+    // Show global sessions bar + active task, or empty state
+    const showSessionBar = globalSessions.length > 0 || hasAgentTask;
+
+    if (showSessionBar) {
+      return (
+        <div className="w-80 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 flex flex-col overflow-hidden">
+          {globalSessions.length > 0 && (
+            <GlobalSessionBar
+              sessions={globalSessions}
+              activeKey={globalAgentTaskKey}
+              onSelect={(sessionId) => setGlobalAgentTaskKey(sessionId)}
+              onNew={() => setAgentPaletteOpen(true)}
+            />
+          )}
+          {agentTaskKey && hasAgentTask ? (
+            <AgentTabContent emailId={agentTaskKey} />
+          ) : (
+            <div className="flex-1 flex flex-col items-center justify-center text-sm text-gray-400 dark:text-gray-500 p-4 gap-2">
+              <span>Select a session above or start a new one</span>
+              <p className="text-xs">
+                Press{" "}
+                <kbd className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-gray-600 dark:text-gray-400 font-mono text-xs">
+                  Cmd+J
+                </kbd>{" "}
+                to start an agent task
+              </p>
+            </div>
+          )}
+        </div>
+      );
+    }
+
     return (
       <div className="w-80 bg-gray-50 dark:bg-gray-800/50 border-l border-gray-200 dark:border-gray-700 flex items-center justify-center">
         <div className="text-center px-6">
-          <p className="text-gray-400 dark:text-gray-500 text-sm">Select an email to see details</p>
-          <p className="text-gray-300 text-xs mt-1">Use j/k to navigate, Cmd+J for agent</p>
+          <p className="text-gray-400 dark:text-gray-500 text-sm">
+            Press{" "}
+            <kbd className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-gray-600 dark:text-gray-400 font-mono text-xs">
+              Cmd+J
+            </kbd>{" "}
+            to start an agent task
+          </p>
+          <p className="text-gray-300 text-xs mt-1">Or select an email with j/k</p>
         </div>
       </div>
     );
diff --git a/src/renderer/store/index.ts b/src/renderer/store/index.ts
index 48063089..c5adf516 100644
--- a/src/renderer/store/index.ts
+++ b/src/renderer/store/index.ts
@@ -22,6 +22,8 @@ import type {
   AgentTaskHistoryEntry,
   ScopedAgentEvent,
   AgentContext,
+  AgentSession,
+  AgentSessionSummary,
 } from "../../shared/agent-types";
 
 export type SettingsTab =
@@ -311,6 +313,10 @@ interface AppState {
   agentTaskHistory: AgentTaskHistoryEntry[];
   globalAgentTaskKey: string | null; // non-null when a non-email agent task is active
 
+  // Session-based agent state (new)
+  agentSessions: Record<string, AgentSession>;
+  sessionList: AgentSessionSummary[];
+
   // Local drafts state (new emails composed by agent or user, not tied to threads)
   localDrafts: LocalDraft[];
   selectedDraftId: string | null;
@@ -516,6 +522,11 @@ interface AppState {
 
   // Mark-as-read action (imperative — call from Enter/click handlers directly)
   markThreadAsRead: (threadId: string) => void;
+
+  // Session actions
+  loadSessionList: (accountId: string) => Promise<void>;
+  createSession: (session: AgentSession) => void;
+  updateSessionInStore: (sessionId: string, updates: Partial<AgentSession>) => void;
 }
 
 export const useAppStore = create<AppState>((set, get) => ({
@@ -646,6 +657,10 @@ export const useAppStore = create<AppState>((set, get) => ({
   agentTaskHistory: [],
   globalAgentTaskKey: null,
 
+  // Session-based agent state (new)
+  agentSessions: {},
+  sessionList: [],
+
   // Local drafts
   localDrafts: [],
   selectedDraftId: null,
@@ -1365,12 +1380,88 @@ export const useAppStore = create<AppState>((set, get) => ({
         taskStatus = "pending_approval";
       }
 
-      return {
+      const newAgentTasksState = {
         agentTasks: {
           ...state.agentTasks,
           [emailId]: { ...task, runs: updatedRuns, status: taskStatus },
         },
       };
+
+      // Also update session if one exists with the same taskId
+      const session = state.agentSessions[taskId];
+      if (!session) return newAgentTasksState;
+
+      const sessionProviderId = event.providerId || session.providerIds[0] || "unknown";
+      const existingRun = session.runs[sessionProviderId] || {
+        status: "running" as const,
+        events: [],
+      };
+      const updatedSessionRun: AgentProviderRun = {
+        ...existingRun,
+        events: [...existingRun.events, event],
+      };
+
+      // Mirror the same event-type handling as the legacy task path
+      if (!event.nestedRunId) {
+        if (event.type === "confirmation_required") {
+          updatedSessionRun.pendingConfirmation = {
+            toolCallId: event.toolCallId,
+            toolName: event.toolName,
+            description: event.description,
+            input: event.input,
+          };
+          updatedSessionRun.status = "pending_approval";
+        } else if (event.type === "state") {
+          updatedSessionRun.status = event.state;
+          if (event.state !== "pending_approval") {
+            updatedSessionRun.pendingConfirmation = undefined;
+          }
+        } else if (event.type === "error") {
+          updatedSessionRun.status = "failed";
+        } else if (event.type === "done") {
+          updatedSessionRun.status = "completed";
+        }
+      }
+
+      if (event.providerConversationId) {
+        updatedSessionRun.providerConversationId = event.providerConversationId;
+      }
+
+      const updatedSessionRuns = { ...session.runs, [sessionProviderId]: updatedSessionRun };
+
+      // Derive overall session status from all runs
+      const allSessionRuns = Object.values(updatedSessionRuns);
+      let sessionStatus = session.status;
+      if (allSessionRuns.every((r) => r.status === "completed")) {
+        sessionStatus = "completed";
+      } else if (allSessionRuns.some((r) => r.status === "failed")) {
+        sessionStatus = "failed";
+      } else if (allSessionRuns.some((r) => r.status === "pending_approval")) {
+        // Keep as active — pending_approval is a sub-state of active for sessions
+        sessionStatus = "active";
+      }
+
+      const sessionStatusChanged = sessionStatus !== session.status;
+      return {
+        ...newAgentTasksState,
+        agentSessions: {
+          ...state.agentSessions,
+          [taskId]: {
+            ...session,
+            status: sessionStatus,
+            runs: updatedSessionRuns,
+            updatedAt: Date.now(),
+          },
+        },
+        // Only rebuild sessionList when session status actually changes
+        ...(sessionStatusChanged
+          ? {
+              sessionList: state.sessionList.map((s) =>
+                s.id === taskId ? { ...s, status: sessionStatus, updatedAt: Date.now() } : s,
+              ),
+            }
+          : {}),
+      };
     }),
 
   replayAgentTrace: (taskId, emailId, providerIds, prompt, context, events) =>
@@ -1509,12 +1600,27 @@ export const useAppStore = create<AppState>((set, get) => ({
         timestamp: Date.now(),
         status: "cancelled",
       };
+      // Also update session if one exists
+      const session = state.agentSessions[taskId];
+      const sessionUpdates = session
+        ? {
+            agentSessions: {
+              ...state.agentSessions,
+              [taskId]: { ...session, status: "cancelled" as const, updatedAt: Date.now() },
+            },
+            sessionList: state.sessionList.map((s) =>
+              s.id === taskId ? { ...s, status: "cancelled" as const, updatedAt: Date.now() } : s,
+            ),
+          }
+        : {};
+
       return {
         agentTasks: {
           ...state.agentTasks,
           [emailId]: { ...task, status: "cancelled" },
         },
         agentTaskHistory: [...state.agentTaskHistory, entry],
+        ...sessionUpdates,
         // Keep globalAgentTaskKey so the user can return to the cancelled task
       };
     }),
@@ -1598,6 +1704,46 @@ export const useAppStore = create<AppState>((set, get) => ({
       });
     }
   },
+
+  // Session actions
+  loadSessionList: async (accountId) => {
+    const result = await window.api.agent.listSessions(accountId);
+    if (result && result.success && result.data) {
+      set({ sessionList: result.data });
+    } else if (result && !result.success) {
+      console.warn("[store] Failed to load session list:", result.error);
+    }
+  },
+
+  createSession: (session) =>
+    set((state) => ({
+      agentSessions: { ...state.agentSessions, [session.id]: session },
+      sessionList: [
+        {
+          id: session.id,
+          title: session.title,
+          status: session.status,
+          updatedAt: session.updatedAt,
+          emailId: session.emailId,
+        },
+        ...state.sessionList,
+      ],
+    })),
+
+  updateSessionInStore: (sessionId, updates) =>
+    set((state) => {
+      const existing = state.agentSessions[sessionId];
+      if (!existing) return state;
+      const updated = { ...existing, ...updates, updatedAt: Date.now() };
+      return {
+        agentSessions: { ...state.agentSessions, [sessionId]: updated },
+        sessionList: state.sessionList.map((s) =>
+          s.id === sessionId
+            ? { ...s, title: updated.title, status: updated.status, updatedAt: updated.updatedAt }
+            : s,
+        ),
+      };
+    }),
 }));
 
 // Expose store for E2E tests
diff --git a/src/shared/agent-types.ts b/src/shared/agent-types.ts
index e74b2167..78edd5ad 100644
--- a/src/shared/agent-types.ts
+++ b/src/shared/agent-types.ts
@@ -124,3 +124,25 @@ export interface RemoteConversationView {
   lastSyncedAt: number;
   messages: ScopedAgentEvent[];
 }
+
+/** A persistent agent chat session, decoupled from email lifecycle */
+export interface AgentSession {
+  id: string;
+  title: string;
+  emailId: string | null;
+  threadId: string | null;
+  accountId: string;
+  providerIds: string[];
+  createdAt: number;
+  updatedAt: number;
+  status: "active" | "completed" | "failed" | "cancelled";
+  runs: Record<string, AgentProviderRun>;
+}
+
+export interface AgentSessionSummary {
+  id: string;
+  title: string;
+  status: AgentSession["status"];
+  updatedAt: number;
+  emailId: string | null;
+}
diff --git a/tests/unit/agent-sessions-db.spec.ts b/tests/unit/agent-sessions-db.spec.ts
new file mode 100644
index 00000000..dca2c295
--- /dev/null
+++ b/tests/unit/agent-sessions-db.spec.ts
@@ -0,0 +1,75 @@
+import { test, expect } from "@playwright/test";
+import Database from "better-sqlite3";
+
+function createTestDb(): Database.Database {
+  const db = new Database(":memory:");
+  db.pragma("journal_mode = WAL");
+  return db;
+}
+
+const AGENT_SESSIONS_DDL = `
+  CREATE TABLE IF NOT EXISTS agent_sessions (
+    id TEXT PRIMARY KEY,
+    title TEXT NOT NULL,
+    email_id TEXT,
+    thread_id TEXT,
+    account_id TEXT NOT NULL,
+    provider_ids TEXT NOT NULL,
+    created_at INTEGER NOT NULL,
+    updated_at INTEGER NOT NULL,
+    status TEXT NOT NULL DEFAULT 'active'
+  );
+  CREATE INDEX IF NOT EXISTS idx_agent_sessions_account ON agent_sessions(account_id);
+  CREATE INDEX IF NOT EXISTS idx_agent_sessions_email ON agent_sessions(email_id);
+  CREATE INDEX IF NOT EXISTS idx_agent_sessions_updated ON agent_sessions(updated_at DESC);
+`;
+
+test.describe("agent_sessions table", () => {
+  test("creates table and inserts/reads sessions", () => {
+    const db = createTestDb();
+    db.exec(AGENT_SESSIONS_DDL);
+    const now = Date.now();
+    db.prepare(`
+      INSERT INTO agent_sessions (id, title, email_id, thread_id, account_id, provider_ids, created_at, updated_at, status)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+    `).run("sess-1", "Draft reply", "email-1", "thread-1", "acct-1", '["claude"]', now, now, "active");
+    const row = db.prepare("SELECT * FROM agent_sessions WHERE id = ?").get("sess-1") as Record<string, unknown>;
+    expect(row).toBeTruthy();
+    expect(row.title).toBe("Draft reply");
+    expect(row.email_id).toBe("email-1");
+    expect(row.status).toBe("active");
+    expect(JSON.parse(row.provider_ids as string)).toEqual(["claude"]);
+  });
+
+  test("lists sessions ordered by updated_at desc", () => {
+    const db = createTestDb();
+    db.exec(AGENT_SESSIONS_DDL);
+    const now = Date.now();
+    db.prepare(`INSERT INTO agent_sessions (id, title, account_id, provider_ids, created_at, updated_at, status) VALUES (?, ?, ?, ?, ?, ?, ?)`).run("sess-old", "Old", "acct-1", '["claude"]', now - 2000, now - 2000, "completed");
+    db.prepare(`INSERT INTO agent_sessions (id, title, account_id, provider_ids, created_at, updated_at, status) VALUES (?, ?, ?, ?, ?, ?, ?)`).run("sess-new", "New", "acct-1", '["claude"]', now, now, "active");
+    const rows = db.prepare("SELECT id FROM agent_sessions WHERE account_id = ? ORDER BY updated_at DESC").all("acct-1") as Array<{ id: string }>;
+    expect(rows.map((r) => r.id)).toEqual(["sess-new", "sess-old"]);
+  });
+
+  test("updates session status and updated_at", () => {
+    const db = createTestDb();
+    db.exec(AGENT_SESSIONS_DDL);
+    const now = Date.now();
+    db.prepare(`INSERT INTO agent_sessions (id, title, account_id, provider_ids, created_at, updated_at, status) VALUES (?, ?, ?, ?, ?, ?, ?)`).run("sess-1", "Test", "acct-1", '["claude"]', now, now, "active");
+    const later = now + 5000;
+    db.prepare("UPDATE agent_sessions SET status = ?, updated_at = ? WHERE id = ?").run("completed", later, "sess-1");
+    const row = db.prepare("SELECT status, updated_at FROM agent_sessions WHERE id = ?").get("sess-1") as { status: string; updated_at: number };
+    expect(row.status).toBe("completed");
+    expect(row.updated_at).toBe(later);
+  });
+
+  test("deletes session", () => {
+    const db = createTestDb();
+    db.exec(AGENT_SESSIONS_DDL);
+    const now = Date.now();
+    db.prepare(`INSERT INTO agent_sessions (id, title, account_id, provider_ids, created_at, updated_at, status) VALUES (?, ?, ?, ?, ?, ?, ?)`).run("sess-1", "Delete me", "acct-1", '["claude"]', now, now, "active");
+    db.prepare("DELETE FROM agent_sessions WHERE id = ?").run("sess-1");
+    const row = db.prepare("SELECT * FROM agent_sessions WHERE id = ?").get("sess-1");
+    expect(row).toBeUndefined();
+  });
+});