diff --git a/src/__tests__/unit/app/org/components/ControlPanelList.test.tsx b/src/__tests__/unit/app/org/components/ControlPanelList.test.tsx
new file mode 100644
index 0000000000..f530f80c9f
--- /dev/null
+++ b/src/__tests__/unit/app/org/components/ControlPanelList.test.tsx
@@ -0,0 +1,222 @@
+// @vitest-environment jsdom
+/**
+ * RTL tests for the control-panel left bar: empty-state copy when Archive
+ * is populated vs empty, archive/restore actions that stop row click-through,
+ * and keyboard-reachable Archive rows only while the section is expanded.
+ */
+import React from "react";
+import { describe, expect, test, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { ControlPanelList } from "@/app/org/[githubLogin]/_components/control-panel/ControlPanelList";
+import type { ControlPanelListProps } from "@/app/org/[githubLogin]/_components/control-panel/ControlPanelList";
+import type { ControlPanelItem } from "@/types/control-panel";
+import type { ControlPanelGroup, ControlPanelRow } from "@/services/orgs/control-panel-state";
+
+// jsdom does not implement scrollIntoView; ControlPanelList scrolls the cursor row into view.
+window.HTMLElement.prototype.scrollIntoView = vi.fn();
+
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({
+      children,
+      layout: _layout,
+      layoutDependency: _layoutDependency,
+      layoutScroll: _layoutScroll,
+      transition: _transition,
+      ...rest
+    }: {
+      children?: React.ReactNode;
+      layout?: unknown;
+      layoutDependency?: unknown;
+      layoutScroll?: unknown;
+      transition?: unknown;
+    }) => React.createElement("div", rest, children),
+  },
+}));
+
+vi.mock("@/components/ui/tooltip", () => ({
+  Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  TooltipContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  TooltipProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  TooltipTrigger: ({ children, asChild }: { children: React.ReactNode; asChild?: boolean }) =>
+    asChild ? <>{children}</> : <span>{children}</span>,
+}));
+
+// kbd.tsx uses `React.ComponentProps` / JSX without importing React, which
+// blows up under vitest's transform. The footer shortcuts are not under test.
+vi.mock("@/components/ui/kbd", () => ({
+  Kbd: ({ children }: { children?: React.ReactNode }) => <kbd>{children}</kbd>,
+  KbdGroup: ({ children }: { children?: React.ReactNode }) => <span>{children}</span>,
+}));
+
+function makeItem(overrides: Partial<ControlPanelItem>): ControlPanelItem {
+  const id = overrides.id ?? "x";
+  const kind = overrides.kind ?? "chat";
+  return {
+    key: `${kind}:${id}`,
+    kind,
+    id,
+    title: overrides.title ?? "Chat",
+    workspaceSlug: null,
+    workspaceId: null,
+    workspaceName: null,
+    lastActivityAt: "2026-09-04T10:00:00.000Z",
+    sinceYou: "",
+    state: "none",
+    unread: false,
+    ...overrides,
+  };
+}
+
+function emptyProps(overrides: Partial<ControlPanelListProps> = {}): ControlPanelListProps {
+  return {
+    groups: [],
+    totalCount: 0,
+    loading: false,
+    query: "",
+    onQueryChange: vi.fn(),
+    expandedKeys: new Set(),
+    onToggleExpanded: vi.fn(),
+    cursorKey: null,
+    focusedKey: null,
+    onOpen: vi.fn(),
+    remaining: 0,
+    onShowMore: vi.fn(),
+    archivedRows: [],
+    archivedExpanded: false,
+    onToggleArchived: vi.fn(),
+    onArchive: vi.fn(),
+    onRestore: vi.fn(),
+    ...overrides,
+  };
+}
+
+function chatRow(item: ControlPanelItem, extra: Partial<ControlPanelRow> = {}): ControlPanelRow {
+  return { item, depth: 0, childCount: 0, latestAt: item.lastActivityAt, ...extra };
+}
+
+describe("ControlPanelList empty states", () => {
+  test("both empty shows the whole-column empty copy", () => {
+    render(<ControlPanelList {...emptyProps()} />);
+    expect(screen.getByText("Nothing yet. Start a Jamie chat and it lands here.")).toBeInTheDocument();
+    expect(screen.queryByTestId("control-panel-archive")).not.toBeInTheDocument();
+  });
+
+  test("active empty + Archive populated does not show Nothing yet, and still renders Archive", () => {
+    const archived = makeItem({ id: "archived-1", title: "Finished kickoff", archivedAt: "2026-09-03T00:00:00.000Z" });
+    render(
+      <ControlPanelList
+        {...emptyProps({
+          totalCount: 0,
+          archivedRows: [chatRow(archived)],
+          archivedExpanded: true,
+        })}
+      />,
+    );
+    expect(screen.queryByText("Nothing yet. Start a Jamie chat and it lands here.")).not.toBeInTheDocument();
+    expect(screen.getByTestId("control-panel-archive")).toBeInTheDocument();
+    expect(screen.getByText("Finished kickoff")).toBeInTheDocument();
+  });
+
+  test("empty Archive section shows short empty copy when expanded", () => {
+    const active = makeItem({ id: "c1", title: "Live chat" });
+    const groups: ControlPanelGroup[] = [
+      { key: "2026-09-04", label: "Today", rows: [chatRow(active)] },
+    ];
+    render(
+      <ControlPanelList
+        {...emptyProps({
+          groups,
+          totalCount: 1,
+          archivedRows: [],
+          archivedExpanded: true,
+        })}
+      />,
+    );
+    expect(screen.getByText("No archived chats")).toBeInTheDocument();
+  });
+});
+
+describe("ControlPanelList archive actions", () => {
+  test("Archive action stops propagation and does not call onOpen", () => {
+    const active = makeItem({ id: "c1", title: "Live chat" });
+    const onOpen = vi.fn();
+    const onArchive = vi.fn();
+    const groups: ControlPanelGroup[] = [
+      { key: "2026-09-04", label: "Today", rows: [chatRow(active)] },
+    ];
+    render(
+      <ControlPanelList
+        {...emptyProps({
+          groups,
+          totalCount: 1,
+          onOpen,
+          onArchive,
+        })}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Archive" }));
+    expect(onArchive).toHaveBeenCalledTimes(1);
+    expect(onArchive).toHaveBeenCalledWith(expect.objectContaining({ id: "c1" }));
+    expect(onOpen).not.toHaveBeenCalled();
+  });
+
+  test("Restore action stops propagation and does not call onOpen", () => {
+    const archived = makeItem({ id: "a1", title: "Old chat", archivedAt: "2026-09-03T00:00:00.000Z" });
+    const onOpen = vi.fn();
+    const onRestore = vi.fn();
+    render(
+      <ControlPanelList
+        {...emptyProps({
+          archivedRows: [chatRow(archived)],
+          archivedExpanded: true,
+          onOpen,
+          onRestore,
+        })}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Restore" }));
+    expect(onRestore).toHaveBeenCalledTimes(1);
+    expect(onRestore).toHaveBeenCalledWith(expect.objectContaining({ id: "a1" }));
+    expect(onOpen).not.toHaveBeenCalled();
+  });
+});
+
+describe("ControlPanelList archive keyboard rows", () => {
+  test("collapsed Archive does not render archived chat rows", () => {
+    const archived = makeItem({ id: "a1", title: "Old chat", archivedAt: "2026-09-03T00:00:00.000Z" });
+    const active = makeItem({ id: "c1", title: "Live chat" });
+    render(
+      <ControlPanelList
+        {...emptyProps({
+          groups: [{ key: "2026-09-04", label: "Today", rows: [chatRow(active)] }],
+          totalCount: 1,
+          archivedRows: [chatRow(archived)],
+          archivedExpanded: false,
+        })}
+      />,
+    );
+    expect(screen.getByText("Live chat")).toBeInTheDocument();
+    expect(screen.queryByText("Old chat")).not.toBeInTheDocument();
+    expect(document.querySelector('[data-panel-key="chat:a1"]')).toBeNull();
+  });
+
+  test("expanded Archive renders archived rows that Enter can open via onOpen", () => {
+    const archived = makeItem({ id: "a1", title: "Old chat", archivedAt: "2026-09-03T00:00:00.000Z" });
+    const onOpen = vi.fn();
+    render(
+      <ControlPanelList
+        {...emptyProps({
+          archivedRows: [chatRow(archived)],
+          archivedExpanded: true,
+          cursorKey: "chat:a1",
+          onOpen,
+        })}
+      />,
+    );
+    const row = document.querySelector('[data-panel-key="chat:a1"]') as HTMLElement;
+    expect(row).not.toBeNull();
+    fireEvent.keyDown(row, { key: "Enter" });
+    expect(onOpen).toHaveBeenCalledWith(expect.objectContaining({ id: "a1" }));
+  });
+});
diff --git a/src/__tests__/unit/canvas/CanvasHistoryPopover.test.tsx b/src/__tests__/unit/canvas/CanvasHistoryPopover.test.tsx
index b550b90ca1..d29b638c16 100644
--- a/src/__tests__/unit/canvas/CanvasHistoryPopover.test.tsx
+++ b/src/__tests__/unit/canvas/CanvasHistoryPopover.test.tsx
@@ -225,6 +225,27 @@ describe("CanvasHistoryPopover", () => {
     });
   });
 
+  it("only ever renders the conversations the history endpoint returns (active-only)", async () => {
+    // The GET /chat/conversations list filters archivedAt: null server-side.
+    // The popover must not invent archived rows or request ?archived=1.
+    global.fetch = buildFetch(mockItems, {});
+
+    render(<CanvasHistoryPopover githubLogin="my-org" />);
+    fireEvent.click(screen.getByTestId("popover-trigger"));
+
+    await waitFor(() => {
+      expect(screen.getByText("Planning session")).toBeInTheDocument();
+    });
+
+    expect(global.fetch).toHaveBeenCalledWith(
+      expect.stringContaining("/api/orgs/my-org/chat/conversations?limit=10"),
+    );
+    const urls = (global.fetch as ReturnType<typeof vi.fn>).mock.calls.map((c) => String(c[0]));
+    expect(urls.some((u) => u.includes("archived="))).toBe(false);
+    expect(screen.queryByText("Archive")).not.toBeInTheDocument();
+    expect(screen.getByText("What are the key milestones?")).toBeInTheDocument();
+  });
+
   it("calls startConversation with ephemeralSeedCount=messages.length and the server id on item click", async () => {
     global.fetch = buildFetch(mockItems, { "conv-a": mockConversationDetail });
 
diff --git a/src/__tests__/unit/services/control-panel-state.test.ts b/src/__tests__/unit/services/control-panel-state.test.ts
index e1b51ea64b..b279923e60 100644
--- a/src/__tests__/unit/services/control-panel-state.test.ts
+++ b/src/__tests__/unit/services/control-panel-state.test.ts
@@ -16,12 +16,17 @@ import { describe, expect, test } from "vitest";
 import type { ControlPanelItem } from "@/types/control-panel";
 import {
   activeChatItem,
+  buildArchivedRows,
   buildControlPanelGroups,
   derivePlanState,
   matchesControlPanelQuery,
+  moveChatToActive,
+  moveChatToArchive,
   overlayActiveChat,
   previewLine,
+  resolveControlPanelLists,
   sortControlPanelItems,
+  visibleControlPanelItems,
 } from "@/services/orgs/control-panel-state";
 
 const noMessage = null;
@@ -350,3 +355,120 @@ describe("buildControlPanelGroups", () => {
     expect(groups[0].label).toBe("December 20, 2025");
   });
 });
+
+describe("archive move and on-stage gating", () => {
+  const startedAt = "2026-09-04T09:00:00.000Z";
+  const archivedAt = "2026-09-04T12:00:00.000Z";
+  const chat = makeItem({ kind: "chat", id: "c1", title: "Kickoff", lastActivityAt: startedAt });
+  const plan = makeItem({
+    kind: "plan",
+    id: "p1",
+    title: "Spawned",
+    parentChatId: "c1",
+    lastActivityAt: "2026-09-04T10:00:00.000Z",
+  });
+  const other = makeItem({ kind: "chat", id: "c2", title: "Other", lastActivityAt: startedAt });
+  const snapshot = {
+    localId: "local-1",
+    serverId: "c1",
+    lastMessageAt: "2026-09-04T11:00:00.000Z",
+    lastReply: "Done.",
+    hasMessages: true,
+    isStreaming: false,
+  };
+
+  test("moveChatToArchive takes nested plans with the chat and inserts them at the top of Archive", () => {
+    const moved = moveChatToArchive([chat, plan, other], [], "c1", archivedAt);
+    expect(moved.items.map((i) => i.id)).toEqual(["c2"]);
+    expect(moved.archivedItems.map((i) => i.id)).toEqual(["c1", "p1"]);
+    expect(moved.archivedItems[0].archivedAt).toBe(archivedAt);
+    expect(moved.items.some((i) => i.id === "p1")).toBe(false);
+  });
+
+  test("moveChatToActive restores the chat and its plans to the top of Active", () => {
+    const archived = moveChatToArchive([chat, plan, other], [], "c1", archivedAt);
+    const restored = moveChatToActive(archived.items, archived.archivedItems, "c1");
+    expect(restored.items.map((i) => i.id)).toEqual(["c1", "p1", "c2"]);
+    expect(restored.archivedItems).toEqual([]);
+    expect(restored.items[0].archivedAt).toBeNull();
+  });
+
+  test("an archived on-stage chat is not injected into active displayItems; nested plans stay in Archive", () => {
+    const archived = moveChatToArchive([chat, plan, other], [], "c1", archivedAt);
+    const resolved = resolveControlPanelLists(archived.items, archived.archivedItems, snapshot, {
+      chatOnStage: true,
+      startedAt,
+      titleForNew: "Kickoff",
+    });
+    expect(resolved.displayItems.map((i) => i.id)).toEqual(["c2"]);
+    expect(resolved.displayArchivedItems.map((i) => i.id)).toEqual(["c1", "p1"]);
+    expect(resolved.displayArchivedItems[0]).toMatchObject({
+      id: "c1",
+      unread: false,
+      lastActivityAt: snapshot.lastMessageAt,
+    });
+    const groups = buildControlPanelGroups(resolved.displayItems);
+    expect(groups.flatMap((g) => g.rows).map((r) => r.item.id)).toEqual(["c2"]);
+  });
+
+  test("a brand-new on-stage chat not in either list is prepended into Active", () => {
+    const fresh = {
+      localId: "local-new",
+      serverId: null,
+      lastMessageAt: null,
+      lastReply: null,
+      hasMessages: false,
+      isStreaming: false,
+    };
+    const resolved = resolveControlPanelLists([other], [], fresh, {
+      chatOnStage: true,
+      startedAt,
+      titleForNew: "New chat",
+    });
+    expect(resolved.displayItems[0]).toMatchObject({ key: "chat:local-new", title: "New chat" });
+    expect(resolved.displayItems.map((i) => i.id)).toEqual(["local-new", "c2"]);
+    expect(resolved.displayArchivedItems).toEqual([]);
+  });
+
+  test("buildArchivedRows is a flat archivedAt-desc list with plans nested under their parent, not day-grouped", () => {
+    const older = makeItem({
+      kind: "chat",
+      id: "c-old",
+      title: "Older",
+      archivedAt: "2026-09-01T00:00:00.000Z",
+      lastActivityAt: "2026-09-04T18:00:00.000Z",
+    });
+    const newer = makeItem({
+      kind: "chat",
+      id: "c-new",
+      title: "Newer",
+      archivedAt: "2026-09-03T00:00:00.000Z",
+      lastActivityAt: "2026-09-02T00:00:00.000Z",
+    });
+    const nested = makeItem({
+      kind: "plan",
+      id: "p-old",
+      parentChatId: "c-old",
+      lastActivityAt: "2026-09-04T19:00:00.000Z",
+    });
+    const rows = buildArchivedRows([older, nested, newer]);
+    expect(rows.map((r) => [r.item.id, r.depth])).toEqual([
+      ["c-new", 0],
+      ["c-old", 0],
+      ["p-old", 1],
+    ]);
+    expect(rows[1].childCount).toBe(1);
+    expect(rows[2].parentKey).toBe("chat:c-old");
+  });
+
+  test("visibleControlPanelItems appends Archive rows only when the section is expanded", () => {
+    const groups = buildControlPanelGroups([other]);
+    const rows = buildArchivedRows([{ ...chat, archivedAt }, plan]);
+    const collapsed = visibleControlPanelItems(groups, rows, new Set(), false);
+    expect(collapsed.map((i) => i.id)).toEqual(["c2"]);
+    const expanded = visibleControlPanelItems(groups, rows, new Set(), true);
+    expect(expanded.map((i) => i.id)).toEqual(["c2", "c1"]);
+    const withPlans = visibleControlPanelItems(groups, rows, new Set(["chat:c1"]), true);
+    expect(withPlans.map((i) => i.id)).toEqual(["c2", "c1", "p1"]);
+  });
+});
diff --git a/src/app/org/[githubLogin]/_components/control-panel/ControlPanelList.tsx b/src/app/org/[githubLogin]/_components/control-panel/ControlPanelList.tsx
index 3e46c9e11a..be8f1c3a0e 100644
--- a/src/app/org/[githubLogin]/_components/control-panel/ControlPanelList.tsx
+++ b/src/app/org/[githubLogin]/_components/control-panel/ControlPanelList.tsx
@@ -2,14 +2,24 @@
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { motion } from "framer-motion";
-import { ChevronDown, ChevronRight, FileText, Loader2, MessageCircle, Search, X } from "lucide-react";
+import {
+  Archive,
+  ArchiveRestore,
+  ChevronDown,
+  ChevronRight,
+  FileText,
+  Loader2,
+  MessageCircle,
+  Search,
+  X,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Kbd } from "@/components/ui/kbd";
 import { jamieName } from "@/lib/constants/jamie";
 import { formatAge } from "@/lib/date-utils";
 import { cn } from "@/lib/utils";
 import type { ControlPanelItem, ControlPanelItemKind, ControlPanelItemState } from "@/types/control-panel";
-import { NEEDS_YOU_STATES, type ControlPanelGroup } from "@/services/orgs/control-panel-state";
+import { NEEDS_YOU_STATES, type ControlPanelGroup, type ControlPanelRow } from "@/services/orgs/control-panel-state";
 import { ActionTip } from "../ActionTip";
 import { CONTROL_PANEL_PAGE } from "./useControlPanelItems";
 
@@ -113,6 +123,157 @@ export interface ControlPanelListProps {
   /** Chats the user has beyond the ones listed. */
   remaining: number;
   onShowMore: () => void;
+  /** Flat archived chats (plans nested under their parent). Outside day grouping. */
+  archivedRows: ControlPanelRow[];
+  archivedExpanded: boolean;
+  onToggleArchived: () => void;
+  onArchive: (item: ControlPanelItem) => void;
+  onRestore: (item: ControlPanelItem) => void;
+}
+
+function PanelRow({
+  item,
+  depth,
+  parentKey,
+  childCount,
+  latestAt,
+  lastChild,
+  expandedKeys,
+  onToggleExpanded,
+  cursorKey,
+  focusedKey,
+  onOpen,
+  rowOrder,
+  action,
+}: {
+  item: ControlPanelItem;
+  depth: number;
+  parentKey?: string;
+  childCount?: number;
+  latestAt: string;
+  lastChild: boolean;
+  expandedKeys: ReadonlySet<string>;
+  onToggleExpanded: (key: string) => void;
+  cursorKey: string | null;
+  focusedKey: string | null;
+  onOpen: (item: ControlPanelItem) => void;
+  rowOrder: string;
+  action?: { label: string; Icon: typeof Archive; onClick: (item: ControlPanelItem) => void };
+}) {
+  if (parentKey && !expandedKeys.has(parentKey)) return null;
+  const { Icon, className: kindClass } = KIND[item.kind];
+  const ActionIcon = action?.Icon;
+  const focused = item.key === focusedKey;
+  const cursor = item.key === cursorKey;
+  const collapsible = (childCount ?? 0) > 0;
+  const collapsed = collapsible && !expandedKeys.has(item.key);
+  const meta = [item.workspaceName, item.sinceYou].filter(Boolean).join(" · ");
+  return (
+    <motion.div
+      key={item.key}
+      layout="position"
+      layoutDependency={rowOrder}
+      transition={ROW_MOVE}
+      role="button"
+      tabIndex={0}
+      data-panel-key={item.key}
+      onClick={() => onOpen(item)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onOpen(item);
+        }
+      }}
+      aria-current={focused ? "true" : undefined}
+      style={{ paddingLeft: depth > 0 ? PLAN_ROW_PAD : CHAT_ROW_PAD }}
+      className={cn(
+        "group relative flex w-full cursor-pointer items-start gap-2 border-b py-2.5 pr-3 text-left outline-none transition-colors",
+        focused ? "bg-muted" : "hover:bg-muted/60",
+        cursor && "ring-1 ring-inset ring-ring",
+      )}
+    >
+      {/* The tree: a stem from an open chat's icon, a guide down its plans, a tick into each. */}
+      {collapsible && !collapsed && (
+        <span aria-hidden className="absolute bottom-0 w-px bg-border" style={{ left: GUIDE_LEFT, top: STEM_TOP }} />
+      )}
+      {depth > 0 && (
+        <>
+          <span
+            aria-hidden
+            className="absolute top-0 w-px bg-border"
+            style={{ left: GUIDE_LEFT, ...(lastChild ? { height: ICON_CENTER_TOP } : { bottom: 0 }) }}
+          />
+          <span
+            aria-hidden
+            className="absolute h-px bg-border"
+            style={{ left: GUIDE_LEFT, width: PLAN_ROW_PAD - GUIDE_LEFT - 6, top: ICON_CENTER_TOP }}
+          />
+        </>
+      )}
+      {collapsible ? (
+        <button
+          type="button"
+          aria-label={collapsed ? "Show plans" : "Hide plans"}
+          aria-expanded={!collapsed}
+          onClick={(e) => {
+            e.stopPropagation();
+            onToggleExpanded(item.key);
+          }}
+          className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          {collapsed ? <ChevronRight className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
+        </button>
+      ) : (
+        depth === 0 && <span className="w-4 shrink-0" aria-hidden />
+      )}
+      {/* Every chat row reserves the same slot for the count, so titles line up. */}
+      {depth === 0 && (
+        <span
+          className="mt-0.5 w-3 shrink-0 text-[10px] tabular-nums leading-4 text-muted-foreground"
+          title={collapsed ? `${childCount} plans` : undefined}
+        >
+          {collapsed ? childCount : ""}
+        </span>
+      )}
+      <Icon className={cn("mt-0.5 shrink-0", depth > 0 ? "h-3.5 w-3.5" : "h-4 w-4", kindClass)} />
+      <div className="min-w-0 flex-1">
+        <div
+          className={cn(
+            "truncate",
+            depth > 0 ? "text-[13px]" : "text-sm",
+            (item.unread || focused) && "font-semibold",
+          )}
+        >
+          {item.title}
+        </div>
+        <div className="truncate text-xs text-muted-foreground">{meta}</div>
+      </div>
+      <div className="flex shrink-0 items-start gap-1">
+        {item.kind === "chat" && action && ActionIcon && (
+          <ActionTip label={action.label}>
+            <button
+              type="button"
+              aria-label={action.label}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                action.onClick(item);
+              }}
+              className="mt-0.5 flex h-5 w-5 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-muted hover:text-foreground group-hover:opacity-100 group-focus-within:opacity-100 focus:opacity-100"
+            >
+              <ActionIcon className="h-3.5 w-3.5" />
+            </button>
+          </ActionTip>
+        )}
+        <div className="flex w-14 shrink-0 flex-col items-end gap-1.5">
+          <span className="text-xs tabular-nums text-muted-foreground">
+            {formatAge(Date.now() - Date.parse(latestAt))}
+          </span>
+          <StateDot state={item.state} />
+        </div>
+      </div>
+    </motion.div>
+  );
 }
 
 /**
@@ -120,7 +281,8 @@ export interface ControlPanelListProps {
  * from a chat nested under it (collapsed until opened), all grouped by the day of
  * their newest activity. One row per thread with a "since you" line, a
  * time column and a state dot; a "Show N more" at the end when the org
- * has more chats than are listed. New chat lives in the chat's own
+ * has more chats than are listed. Archived chats live in a flat section
+ * at the bottom, outside day grouping. New chat lives in the chat's own
  * actions in the bar across the divider (`n` here does the same).
  */
 export function ControlPanelList({
@@ -136,6 +298,11 @@ export function ControlPanelList({
   onOpen,
   remaining,
   onShowMore,
+  archivedRows,
+  archivedExpanded,
+  onToggleArchived,
+  onArchive,
+  onRestore,
 }: ControlPanelListProps) {
   const [searchOpen, setSearchOpen] = useState(false);
   const searchInputRef = useRef<HTMLInputElement | null>(null);
@@ -144,8 +311,20 @@ export function ControlPanelList({
     () => groups.flatMap((g) => g.rows).find((r) => !(r.parentKey && !expandedKeys.has(r.parentKey))),
     [groups, expandedKeys],
   );
+  const archivedChatCount = useMemo(
+    () => archivedRows.filter((r) => r.item.kind === "chat").length,
+    [archivedRows],
+  );
+  const bothEmpty = totalCount === 0 && archivedChatCount === 0;
   // Rows only move when their order does; framer measures them only then.
-  const rowOrder = useMemo(() => groups.flatMap((g) => g.rows.map((r) => r.item.key)).join("|"), [groups]);
+  const rowOrder = useMemo(
+    () =>
+      [
+        ...groups.flatMap((g) => g.rows.map((r) => r.item.key)),
+        ...archivedRows.map((r) => r.item.key),
+      ].join("|"),
+    [groups, archivedRows],
+  );
 
   // Real DOM focus follows the keyboard cursor, so the browser's own
   // focus ring never lingers on the last clicked row — unless the user
@@ -170,6 +349,15 @@ export function ControlPanelList({
     setSearchOpen(false);
   };
 
+  const rowProps = {
+    expandedKeys,
+    onToggleExpanded,
+    cursorKey,
+    focusedKey,
+    onOpen,
+    rowOrder,
+  };
+
   return (
     <aside className="flex h-full w-full flex-col bg-background">
       <div className="flex h-11 shrink-0 items-center justify-end border-b px-3">
@@ -220,139 +408,92 @@ export function ControlPanelList({
 
       <div className="relative min-h-0 flex-1">
         <motion.div layoutScroll className="h-full overflow-y-auto pb-8">
-          {loading && totalCount === 0 ? (
+          {loading && bothEmpty ? (
             <div className="flex items-center justify-center py-10 text-muted-foreground">
               <Loader2 className="h-4 w-4 animate-spin" />
             </div>
-          ) : !firstVisible ? (
+          ) : bothEmpty ? (
             <p className="px-4 py-8 text-center text-sm text-muted-foreground">
-              {totalCount === 0
-                ? `Nothing yet. Start a ${jamieName} chat and it lands here.`
-                : "No chats or plans match."}
+              {`Nothing yet. Start a ${jamieName} chat and it lands here.`}
             </p>
           ) : (
-            groups.flatMap((group) => [
-              <h3
-                key={`day:${group.key}`}
-                className="sticky top-0 z-10 border-b bg-background/95 px-3 pb-1 pt-2.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground backdrop-blur"
-              >
-                {group.label}
-              </h3>,
-              ...group.rows.map(({ item, depth, parentKey, childCount, latestAt }, i) => {
-                if (parentKey && !expandedKeys.has(parentKey)) return null;
-                const { Icon, className: kindClass } = KIND[item.kind];
-                const focused = item.key === focusedKey;
-                const cursor = item.key === cursorKey;
-                const collapsible = (childCount ?? 0) > 0;
-                const collapsed = collapsible && !expandedKeys.has(item.key);
-                const lastChild = group.rows[i + 1]?.parentKey !== parentKey;
-                const meta = [item.workspaceName, item.sinceYou].filter(Boolean).join(" · ");
-                return (
-                  <motion.div
-                    key={item.key}
-                    layout="position"
-                    layoutDependency={rowOrder}
-                    transition={ROW_MOVE}
-                    role="button"
-                    tabIndex={0}
-                    data-panel-key={item.key}
-                    onClick={() => onOpen(item)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        onOpen(item);
-                      }
-                    }}
-                    aria-current={focused ? "true" : undefined}
-                    style={{ paddingLeft: depth > 0 ? PLAN_ROW_PAD : CHAT_ROW_PAD }}
-                    className={cn(
-                      "relative flex w-full cursor-pointer items-start gap-2 border-b py-2.5 pr-3 text-left outline-none transition-colors",
-                      focused ? "bg-muted" : "hover:bg-muted/60",
-                      cursor && "ring-1 ring-inset ring-ring",
-                    )}
+            <>
+              {!firstVisible && totalCount > 0 ? (
+                <p className="px-4 py-8 text-center text-sm text-muted-foreground">No chats or plans match.</p>
+              ) : firstVisible ? (
+                groups.flatMap((group) => [
+                  <h3
+                    key={`day:${group.key}`}
+                    className="sticky top-0 z-10 border-b bg-background/95 px-3 pb-1 pt-2.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground backdrop-blur"
                   >
-                    {/* The tree: a stem from an open chat's icon, a guide down its plans, a tick into each. */}
-                    {collapsible && !collapsed && (
-                      <span
-                        aria-hidden
-                        className="absolute bottom-0 w-px bg-border"
-                        style={{ left: GUIDE_LEFT, top: STEM_TOP }}
+                    {group.label}
+                  </h3>,
+                  ...group.rows.map(({ item, depth, parentKey, childCount, latestAt }, i) => (
+                    <PanelRow
+                      key={item.key}
+                      item={item}
+                      depth={depth}
+                      parentKey={parentKey}
+                      childCount={childCount}
+                      latestAt={latestAt}
+                      lastChild={group.rows[i + 1]?.parentKey !== parentKey}
+                      action={{ label: "Archive", Icon: Archive, onClick: onArchive }}
+                      {...rowProps}
+                    />
+                  )),
+                ])
+              ) : null}
+              {firstVisible && remaining > 0 && (
+                <button
+                  type="button"
+                  onClick={onShowMore}
+                  className="w-full px-3 py-2.5 text-center text-xs text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground"
+                >
+                  Show {Math.min(remaining, CONTROL_PANEL_PAGE)} more
+                </button>
+              )}
+
+              <section data-testid="control-panel-archive">
+                <button
+                  type="button"
+                  aria-expanded={archivedExpanded}
+                  aria-label={archivedExpanded ? "Hide archive" : "Show archive"}
+                  onClick={onToggleArchived}
+                  className="sticky top-0 z-10 flex w-full items-center gap-2 border-y bg-background/95 px-3 py-2 text-left text-[10px] font-medium uppercase tracking-wide text-muted-foreground backdrop-blur hover:text-foreground"
+                >
+                  {archivedExpanded ? (
+                    <ChevronDown className="h-3.5 w-3.5" />
+                  ) : (
+                    <ChevronRight className="h-3.5 w-3.5" />
+                  )}
+                  Archive
+                  {archivedChatCount > 0 && (
+                    <span className="tabular-nums text-muted-foreground/80">{archivedChatCount}</span>
+                  )}
+                </button>
+                {archivedExpanded &&
+                  (archivedChatCount === 0 ? (
+                    <p className="px-4 py-6 text-center text-sm text-muted-foreground">No archived chats</p>
+                  ) : (
+                    archivedRows.map(({ item, depth, parentKey, childCount, latestAt }, i) => (
+                      <PanelRow
+                        key={item.key}
+                        item={item}
+                        depth={depth}
+                        parentKey={parentKey}
+                        childCount={childCount}
+                        latestAt={latestAt}
+                        lastChild={archivedRows[i + 1]?.parentKey !== parentKey}
+                        action={{ label: "Restore", Icon: ArchiveRestore, onClick: onRestore }}
+                        {...rowProps}
                       />
-                    )}
-                    {depth > 0 && (
-                      <>
-                        <span
-                          aria-hidden
-                          className="absolute top-0 w-px bg-border"
-                          style={{ left: GUIDE_LEFT, ...(lastChild ? { height: ICON_CENTER_TOP } : { bottom: 0 }) }}
-                        />
-                        <span
-                          aria-hidden
-                          className="absolute h-px bg-border"
-                          style={{ left: GUIDE_LEFT, width: PLAN_ROW_PAD - GUIDE_LEFT - 6, top: ICON_CENTER_TOP }}
-                        />
-                      </>
-                    )}
-                    {collapsible ? (
-                      <button
-                        type="button"
-                        aria-label={collapsed ? "Show plans" : "Hide plans"}
-                        aria-expanded={!collapsed}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onToggleExpanded(item.key);
-                        }}
-                        className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground"
-                      >
-                        {collapsed ? <ChevronRight className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
-                      </button>
-                    ) : (
-                      depth === 0 && <span className="w-4 shrink-0" aria-hidden />
-                    )}
-                    {/* Every chat row reserves the same slot for the count, so titles line up. */}
-                    {depth === 0 && (
-                      <span
-                        className="mt-0.5 w-3 shrink-0 text-[10px] tabular-nums leading-4 text-muted-foreground"
-                        title={collapsed ? `${childCount} plans` : undefined}
-                      >
-                        {collapsed ? childCount : ""}
-                      </span>
-                    )}
-                    <Icon className={cn("mt-0.5 shrink-0", depth > 0 ? "h-3.5 w-3.5" : "h-4 w-4", kindClass)} />
-                    <div className="min-w-0 flex-1">
-                      <div
-                        className={cn(
-                          "truncate",
-                          depth > 0 ? "text-[13px]" : "text-sm",
-                          (item.unread || focused) && "font-semibold",
-                        )}
-                      >
-                        {item.title}
-                      </div>
-                      <div className="truncate text-xs text-muted-foreground">{meta}</div>
-                    </div>
-                    <div className="flex w-14 shrink-0 flex-col items-end gap-1.5">
-                      <span className="text-xs tabular-nums text-muted-foreground">
-                        {formatAge(Date.now() - Date.parse(latestAt))}
-                      </span>
-                      <StateDot state={item.state} />
-                    </div>
-                  </motion.div>
-                );
-              }),
-            ])
-          )}
-          {firstVisible && remaining > 0 && (
-            <button
-              type="button"
-              onClick={onShowMore}
-              className="w-full px-3 py-2.5 text-center text-xs text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground"
-            >
-              Show {Math.min(remaining, CONTROL_PANEL_PAGE)} more
-            </button>
+                    ))
+                  ))}
+              </section>
+            </>
           )}
         </motion.div>
-        {firstVisible && (
+        {(firstVisible || archivedChatCount > 0) && (
           <div
             aria-hidden
             className="pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-background to-transparent"
diff --git a/src/app/org/[githubLogin]/_components/control-panel/useControlPanel.ts b/src/app/org/[githubLogin]/_components/control-panel/useControlPanel.ts
index be0c74e20b..4fa3ce19ad 100644
--- a/src/app/org/[githubLogin]/_components/control-panel/useControlPanel.ts
+++ b/src/app/org/[githubLogin]/_components/control-panel/useControlPanel.ts
@@ -5,10 +5,11 @@ import { usePathname, useSearchParams } from "next/navigation";
 import { useShallow } from "zustand/react/shallow";
 import { generateTitle } from "@/lib/ai/conversationHelpers";
 import {
-  activeChatItem,
+  buildArchivedRows,
   buildControlPanelGroups,
   matchesControlPanelQuery,
-  overlayActiveChat,
+  resolveControlPanelLists,
+  visibleControlPanelItems,
   type ActiveChatSnapshot,
 } from "@/services/orgs/control-panel-state";
 import type { ControlPanelItem } from "@/types/control-panel";
@@ -51,13 +52,23 @@ export interface ControlPanelState {
 export function useControlPanel(githubLogin: string, enabled: boolean): ControlPanelState {
   const searchParams = useSearchParams();
   const pathname = usePathname();
-  const { items, remaining, loading, refetch, showMore } = useControlPanelItems(githubLogin, enabled);
+  const {
+    items,
+    archivedItems,
+    remaining,
+    loading,
+    refetch,
+    showMore,
+    archiveConversation,
+    restoreConversation,
+  } = useControlPanelItems(githubLogin, enabled);
 
   const [query, setQuery] = useState("");
   const [focus, setFocus] = useState<ControlPanelFocus>(() => focusFromParams(searchParams));
   const [cursorKey, setCursorKey] = useState<string | null>(null);
   // Chats start collapsed: the row is the chat, its plans open on demand.
   const [expandedKeys, setExpandedKeys] = useState<Set<string>>(() => new Set());
+  const [archivedExpanded, setArchivedExpanded] = useState(false);
   const toggleExpanded = useCallback((key: string) => {
     setExpandedKeys((prev) => {
       const next = new Set(prev);
@@ -66,6 +77,7 @@ export function useControlPanel(githubLogin: string, enabled: boolean): ControlP
       return next;
     });
   }, []);
+  const toggleArchived = useCallback(() => setArchivedExpanded((open) => !open), []);
 
   // Leaving the control panel puts the chat back on stage, so coming
   // back starts clean (the URL's `?plan=`/`?task=` go with it).
@@ -136,30 +148,33 @@ export function useControlPanel(githubLogin: string, enabled: boolean): ControlP
     if (prev.server === null && activeServerConversationId) void refetch();
   }, [enabled, activeLocalId, activeServerConversationId, changeFocus, refetch]);
 
-  // The chat on stage is always in the list, and the list already knows
+  // The chat on stage is always in a list, and the list already knows
   // what the store knows about it: a fresh chat has no server row until
   // its first turn lands, so until the server lists it the row is built
   // from the store; once listed, the server's row is brought up to date
   // (read, working while Jamie replies, a message the fetch missed).
+  // An archived on-stage chat stays in Archive — never re-prepended into
+  // Active after a poll drops it from `items`.
   const chatOnStage = focus.kind === "chat";
-  const displayItems = useMemo(() => {
-    if (!activeChat || !activeChatKey) return items;
-    const listed = items.some((item) => item.key === activeChatKey);
-    if (listed) {
-      return items.map((item) => (item.key === activeChatKey ? overlayActiveChat(item, activeChat) : item));
-    }
-    if (!activeChat.hasMessages && !chatOnStage) return items;
-    // The server titles a chat from its first user message.
-    const conv = useCanvasChatStore.getState().conversations[activeChat.localId];
-    const title = activeChat.hasMessages && conv ? generateTitle(conv.messages) : "New chat";
-    return [activeChatItem(activeChat, newChatStartedAtRef.current, title), ...items];
-  }, [items, activeChat, activeChatKey, chatOnStage]);
+  const { displayItems, displayArchivedItems } = useMemo(() => {
+    const conv = activeChat ? useCanvasChatStore.getState().conversations[activeChat.localId] : undefined;
+    const title = activeChat?.hasMessages && conv ? generateTitle(conv.messages) : "New chat";
+    return resolveControlPanelLists(items, archivedItems, activeChat, {
+      chatOnStage,
+      startedAt: newChatStartedAtRef.current,
+      titleForNew: title,
+    });
+  }, [items, archivedItems, activeChat, chatOnStage]);
 
   const focusedKey = focus.kind === "chat" ? activeChatKey : `${focus.kind}:${focus.id}`;
-  const focusedItem = useMemo(
-    () => (focusedKey ? (items.find((i) => i.key === focusedKey) ?? null) : null),
-    [items, focusedKey],
-  );
+  const focusedItem = useMemo(() => {
+    if (!focusedKey) return null;
+    return (
+      displayItems.find((i) => i.key === focusedKey) ??
+      displayArchivedItems.find((i) => i.key === focusedKey) ??
+      null
+    );
+  }, [displayItems, displayArchivedItems, focusedKey]);
 
   const openItem = useCallback(
     async (item: ControlPanelItem) => {
@@ -184,6 +199,7 @@ export function useControlPanel(githubLogin: string, enabled: boolean): ControlP
     () => buildControlPanelGroups(displayItems, (item) => matchesControlPanelQuery(item, query)),
     [displayItems, query],
   );
+  const archivedRows = useMemo(() => buildArchivedRows(displayArchivedItems), [displayArchivedItems]);
   // A search is asking to see matches, so every chat with a match opens;
   // otherwise what the user opened holds.
   const effectiveExpanded = useMemo(
@@ -194,13 +210,11 @@ export function useControlPanel(githubLogin: string, enabled: boolean): ControlP
     [query, groups, expandedKeys],
   );
 
-  // Rows the keyboard can land on: collapsed chats hide their plans.
+  // Rows the keyboard can land on: collapsed chats hide their plans;
+  // a collapsed Archive is skipped entirely.
   const visible = useMemo(
-    () =>
-      groups.flatMap((g) =>
-        g.rows.filter((r) => !(r.parentKey && !effectiveExpanded.has(r.parentKey))).map((r) => r.item),
-      ),
-    [groups, effectiveExpanded],
+    () => visibleControlPanelItems(groups, archivedRows, effectiveExpanded, archivedExpanded),
+    [groups, archivedRows, effectiveExpanded, archivedExpanded],
   );
 
   useEffect(() => {
@@ -224,6 +238,21 @@ export function useControlPanel(githubLogin: string, enabled: boolean): ControlP
   );
 
   const onOpen = useCallback((item: ControlPanelItem) => void openItem(item), [openItem]);
+  const onArchive = useCallback(
+    (item: ControlPanelItem) => {
+      if (item.kind !== "chat") return;
+      setArchivedExpanded(true);
+      void archiveConversation(item.id);
+    },
+    [archiveConversation],
+  );
+  const onRestore = useCallback(
+    (item: ControlPanelItem) => {
+      if (item.kind !== "chat") return;
+      void restoreConversation(item.id);
+    },
+    [restoreConversation],
+  );
 
   useEffect(() => {
     if (!enabled) return;
@@ -271,6 +300,11 @@ export function useControlPanel(githubLogin: string, enabled: boolean): ControlP
       onOpen,
       remaining,
       onShowMore: showMore,
+      archivedRows,
+      archivedExpanded,
+      onToggleArchived: toggleArchived,
+      onArchive,
+      onRestore,
     },
     stage: {
       focus,
diff --git a/src/app/org/[githubLogin]/_components/control-panel/useControlPanelItems.ts b/src/app/org/[githubLogin]/_components/control-panel/useControlPanelItems.ts
index 09fb010c49..56ce7a2505 100644
--- a/src/app/org/[githubLogin]/_components/control-panel/useControlPanelItems.ts
+++ b/src/app/org/[githubLogin]/_components/control-panel/useControlPanelItems.ts
@@ -1,6 +1,8 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { moveChatToActive, moveChatToArchive } from "@/services/orgs/control-panel-state";
 import type { ControlPanelItem, ControlPanelResponse } from "@/types/control-panel";
 
 const POLL_MS = 30_000;
@@ -13,37 +15,53 @@ export const CONTROL_PANEL_PAGE = 30;
  * grows; every refetch asks for everything shown so far. While disabled
  * (the canvas is showing) nothing is fetched and the last list is kept,
  * so coming back shows it at once.
+ *
+ * Archive rides the same fetch (`archivedItems` on the response). There
+ * is no second poll and no `?archived=1`. `remaining` / `showMore` stay
+ * wired to active chats only.
  */
 export function useControlPanelItems(
   githubLogin: string,
   enabled: boolean,
 ): {
   items: ControlPanelItem[];
+  archivedItems: ControlPanelItem[];
   /** Chats the user has in this org beyond the ones listed. */
   remaining: number;
   loading: boolean;
   refetch: () => Promise<void>;
   showMore: () => void;
+  archiveConversation: (id: string) => Promise<void>;
+  restoreConversation: (id: string) => Promise<void>;
 } {
   const [items, setItems] = useState<ControlPanelItem[]>([]);
+  const [archivedItems, setArchivedItems] = useState<ControlPanelItem[]>([]);
   const [remaining, setRemaining] = useState(0);
   const [loading, setLoading] = useState(true);
   const inFlightRef = useRef(false);
+  const genRef = useRef(0);
   const limitRef = useRef(CONTROL_PANEL_PAGE);
+  const itemsRef = useRef(items);
+  const archivedItemsRef = useRef(archivedItems);
+  itemsRef.current = items;
+  archivedItemsRef.current = archivedItems;
 
   const refetch = useCallback(async () => {
     if (!githubLogin || !enabled || inFlightRef.current) return;
+    const gen = ++genRef.current;
     inFlightRef.current = true;
     try {
       const res = await fetch(`/api/orgs/${githubLogin}/control-panel?limit=${limitRef.current}`);
       if (!res.ok) return;
       const data = (await res.json()) as ControlPanelResponse;
+      if (gen !== genRef.current) return;
       setItems(Array.isArray(data.items) ? data.items : []);
+      setArchivedItems(Array.isArray(data.archivedItems) ? data.archivedItems : []);
       setRemaining(Math.max(0, (data.chats?.total ?? 0) - (data.chats?.shown ?? 0)));
     } catch {
       // Keep the last good list; the next poll retries.
     } finally {
-      inFlightRef.current = false;
+      if (gen === genRef.current) inFlightRef.current = false;
       setLoading(false);
     }
   }, [githubLogin, enabled]);
@@ -65,5 +83,49 @@ export function useControlPanelItems(
     void refetch();
   }, [refetch]);
 
-  return { items, remaining, loading, refetch, showMore };
+  const postArchive = useCallback(
+    async (id: string, archived: boolean) => {
+      const prevItems = itemsRef.current;
+      const prevArchived = archivedItemsRef.current;
+      // Invalidate any in-flight poll so it cannot clobber the optimistic move.
+      genRef.current += 1;
+      inFlightRef.current = false;
+      const moved = archived
+        ? moveChatToArchive(prevItems, prevArchived, id, new Date().toISOString())
+        : moveChatToActive(prevItems, prevArchived, id);
+      setItems(moved.items);
+      setArchivedItems(moved.archivedItems);
+
+      try {
+        const res = await fetch(`/api/orgs/${githubLogin}/chat/conversations/${id}/archive`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ archived }),
+        });
+        if (!res.ok) throw new Error(archived ? "Failed to archive chat" : "Failed to restore chat");
+        await refetch();
+      } catch (error) {
+        setItems(prevItems);
+        setArchivedItems(prevArchived);
+        toast.error(archived ? "Failed to archive chat" : "Failed to restore chat", {
+          description: error instanceof Error ? error.message : "Unknown error",
+        });
+      }
+    },
+    [githubLogin, refetch],
+  );
+
+  const archiveConversation = useCallback((id: string) => postArchive(id, true), [postArchive]);
+  const restoreConversation = useCallback((id: string) => postArchive(id, false), [postArchive]);
+
+  return {
+    items,
+    archivedItems,
+    remaining,
+    loading,
+    refetch,
+    showMore,
+    archiveConversation,
+    restoreConversation,
+  };
 }
diff --git a/src/services/orgs/control-panel-state.ts b/src/services/orgs/control-panel-state.ts
index d31b1e4325..c87d387e5f 100644
--- a/src/services/orgs/control-panel-state.ts
+++ b/src/services/orgs/control-panel-state.ts
@@ -204,6 +204,159 @@ function dayLabel(date: Date, now: Date): string {
   });
 }
 
+/**
+ * Pull a chat and the plans nested under it out of a flat item list.
+ * Used by the optimistic archive/restore move so nested plans follow
+ * the parent instead of hanging in the other collection.
+ */
+export function takeChatFamily(
+  items: ControlPanelItem[],
+  chatId: string,
+): { family: ControlPanelItem[]; rest: ControlPanelItem[] } {
+  const family: ControlPanelItem[] = [];
+  const rest: ControlPanelItem[] = [];
+  for (const item of items) {
+    if ((item.kind === "chat" && item.id === chatId) || (item.kind === "plan" && item.parentChatId === chatId)) {
+      family.push(item);
+    } else {
+      rest.push(item);
+    }
+  }
+  return { family, rest };
+}
+
+function orderChatFamily(family: ControlPanelItem[]): ControlPanelItem[] {
+  const chat = family.find((item) => item.kind === "chat");
+  const plans = family.filter((item) => item.kind === "plan");
+  return chat ? [chat, ...plans] : family;
+}
+
+/**
+ * Optimistic archive: drop the chat and its nested plans from Active
+ * and insert them at the top of Archive (newest `archivedAt` first).
+ */
+export function moveChatToArchive(
+  items: ControlPanelItem[],
+  archivedItems: ControlPanelItem[],
+  chatId: string,
+  archivedAt: string,
+): { items: ControlPanelItem[]; archivedItems: ControlPanelItem[] } {
+  const { family, rest } = takeChatFamily(items, chatId);
+  if (family.length === 0) return { items, archivedItems };
+  const stamped = family.map((item) => (item.kind === "chat" ? { ...item, archivedAt } : item));
+  const { rest: archivedRest } = takeChatFamily(archivedItems, chatId);
+  return { items: rest, archivedItems: [...orderChatFamily(stamped), ...archivedRest] };
+}
+
+/**
+ * Optimistic restore: drop the chat and its nested plans from Archive
+ * and insert them at the top of Active.
+ */
+export function moveChatToActive(
+  items: ControlPanelItem[],
+  archivedItems: ControlPanelItem[],
+  chatId: string,
+): { items: ControlPanelItem[]; archivedItems: ControlPanelItem[] } {
+  const { family, rest } = takeChatFamily(archivedItems, chatId);
+  if (family.length === 0) return { items, archivedItems };
+  const stamped = family.map((item) => (item.kind === "chat" ? { ...item, archivedAt: null } : item));
+  const { rest: itemsRest } = takeChatFamily(items, chatId);
+  return { items: [...orderChatFamily(stamped), ...itemsRest], archivedItems: rest };
+}
+
+/**
+ * Place the on-stage chat into Active or Archive without re-injecting an
+ * archived chat into the active list. Overlay live store data onto whichever
+ * row already holds it; only a brand-new chat (in neither list) is prepended
+ * into Active.
+ */
+export function resolveControlPanelLists(
+  items: ControlPanelItem[],
+  archivedItems: ControlPanelItem[],
+  activeChat: ActiveChatSnapshot | null,
+  opts: { chatOnStage: boolean; startedAt: string; titleForNew: string },
+): { displayItems: ControlPanelItem[]; displayArchivedItems: ControlPanelItem[] } {
+  if (!activeChat) {
+    return { displayItems: items, displayArchivedItems: archivedItems };
+  }
+  const key = `chat:${activeChat.serverId ?? activeChat.localId}`;
+  if (items.some((item) => item.key === key)) {
+    return {
+      displayItems: items.map((item) => (item.key === key ? overlayActiveChat(item, activeChat) : item)),
+      displayArchivedItems: archivedItems,
+    };
+  }
+  if (archivedItems.some((item) => item.key === key)) {
+    return {
+      displayItems: items,
+      displayArchivedItems: archivedItems.map((item) =>
+        item.key === key ? overlayActiveChat(item, activeChat) : item,
+      ),
+    };
+  }
+  if (!activeChat.hasMessages && !opts.chatOnStage) {
+    return { displayItems: items, displayArchivedItems: archivedItems };
+  }
+  return {
+    displayItems: [activeChatItem(activeChat, opts.startedAt, opts.titleForNew), ...items],
+    displayArchivedItems: archivedItems,
+  };
+}
+
+/**
+ * Archive is a flat list of chats sorted by `archivedAt` desc, with each
+ * chat's plans nested directly beneath it. Do not run this through
+ * `buildControlPanelGroups` — that pipeline day-buckets rows and only
+ * nests a plan whose parent is in the same array.
+ */
+export function buildArchivedRows(items: ControlPanelItem[]): ControlPanelRow[] {
+  const chats = items.filter((item) => item.kind === "chat");
+  const chatIds = new Set(chats.map((item) => item.id));
+  const childrenByChat = new Map<string, ControlPanelItem[]>();
+  for (const item of items) {
+    if (item.kind === "plan" && item.parentChatId && chatIds.has(item.parentChatId)) {
+      const list = childrenByChat.get(item.parentChatId) ?? [];
+      list.push(item);
+      childrenByChat.set(item.parentChatId, list);
+    }
+  }
+  const sortedChats = [...chats].sort((a, b) => {
+    const byArchived = (b.archivedAt ?? "").localeCompare(a.archivedAt ?? "");
+    return byArchived !== 0 ? byArchived : b.lastActivityAt.localeCompare(a.lastActivityAt);
+  });
+  const rows: ControlPanelRow[] = [];
+  for (const chat of sortedChats) {
+    const children = sortControlPanelItems(childrenByChat.get(chat.id) ?? []);
+    rows.push({
+      item: chat,
+      depth: 0,
+      childCount: children.length,
+      latestAt: chat.archivedAt ?? chat.lastActivityAt,
+    });
+    for (const child of children) {
+      rows.push({ item: child, depth: 1, parentKey: chat.key, latestAt: child.lastActivityAt });
+    }
+  }
+  return rows;
+}
+
+/** Rows the keyboard can land on. Collapsed chats hide their plans; a collapsed Archive is skipped entirely. */
+export function visibleControlPanelItems(
+  groups: ControlPanelGroup[],
+  archivedRows: ControlPanelRow[],
+  expandedKeys: ReadonlySet<string>,
+  archivedExpanded: boolean,
+): ControlPanelItem[] {
+  const fromGroups = groups.flatMap((g) =>
+    g.rows.filter((r) => !(r.parentKey && !expandedKeys.has(r.parentKey))).map((r) => r.item),
+  );
+  if (!archivedExpanded) return fromGroups;
+  const fromArchive = archivedRows
+    .filter((r) => !(r.parentKey && !expandedKeys.has(r.parentKey)))
+    .map((r) => r.item);
+  return [...fromGroups, ...fromArchive];
+}
+
 /**
  * Turn the flat item list into the control panel's list: Jamie chats
  * are the rows, and the plans a chat spawned nest under it. A plan