From 6ee880ffc1388af2edf23d000878537d19bbd9bd Mon Sep 17 00:00:00 2001
From: 0x92 <0x92dev@gmail.com>
Date: Tue, 11 Aug 2026 11:42:28 +0200
Subject: [PATCH] Add Agent Fleet: a live grid of every agent pane
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Running several agents at once means switching sessions to find out which
one is waiting for an answer. This adds a top-level view that shows them
all at once, grouped by project, status or agent.

- Grid of tiles, one per agent pane, with status accent, branch and age
- Cheap ANSI-stripped snapshots by default; a tile becomes a real xterm on
  hover, or all of them with "All live"
- Type into a focused tile without leaving the grid, optionally expanding
  it to the agent's full screen
- Fold projects away, jump to the next blocked agent (N), move with the
  arrow keys, close a pane
- Extracts the screen-text selection shared with the RunPane CLI into
  services/panels/terminalScreenText.ts

The viewer renders at exactly the PTY's dimensions and never answers the
agent's terminal queries — both are load-bearing, and both are documented
where they are enforced.

Tests: fleetGrouping (14) covers grouping, ordering and pane labelling.
---
 AGENTS.md                                     | 145 +++-
 .../src/components/ProjectSessionList.tsx     |  40 +-
 frontend/src/components/SessionView.tsx       |   6 +
 frontend/src/components/Sidebar.tsx           |  30 +-
 frontend/src/components/fleet/FleetTile.tsx   | 360 ++++++++
 frontend/src/components/fleet/FleetView.tsx   | 778 ++++++++++++++++++
 frontend/src/hooks/useFleetTerminal.ts        | 529 ++++++++++++
 frontend/src/index.css                        |  12 +
 frontend/src/stores/navigationStore.ts        |  18 +-
 frontend/src/types/electron.d.ts              |   7 +
 frontend/src/utils/api.ts                     |  15 +
 frontend/src/utils/fleetGrouping.test.ts      | 148 ++++
 frontend/src/utils/fleetGrouping.ts           | 104 +++
 main/src/ipc/daemonRegistryBindings.test.ts   |  16 +
 main/src/ipc/fleet.ts                         | 195 +++++
 main/src/ipc/index.ts                         |   2 +
 main/src/ipc/runpane.ts                       |  65 +-
 main/src/preload.ts                           |   7 +
 .../src/services/panels/terminalScreenText.ts |  76 ++
 main/src/services/terminalPanelManager.ts     |  10 +
 shared/types/daemon.ts                        |   1 +
 shared/types/fleet.ts                         |  84 ++
 tests/electronApiMock.ts                      |  16 +
 23 files changed, 2599 insertions(+), 65 deletions(-)
 create mode 100644 frontend/src/components/fleet/FleetTile.tsx
 create mode 100644 frontend/src/components/fleet/FleetView.tsx
 create mode 100644 frontend/src/hooks/useFleetTerminal.ts
 create mode 100644 frontend/src/utils/fleetGrouping.test.ts
 create mode 100644 frontend/src/utils/fleetGrouping.ts
 create mode 100644 main/src/ipc/fleet.ts
 create mode 100644 main/src/services/panels/terminalScreenText.ts
 create mode 100644 shared/types/fleet.ts

diff --git a/AGENTS.md b/AGENTS.md
index 9847b339..d889ce3a 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -11,7 +11,149 @@
 - Package (examples): `pnpm build:mac`, `pnpm build:linux`.
 - Lint: `pnpm lint`; Type-check: `pnpm typecheck` (runs per package).
 - Tests (E2E): `pnpm test`, `pnpm test:ui`, CI configs in `playwright.ci*.config.ts`.
-- Main unit tests (if added): `pnpm --filter main test`, coverage: `pnpm --filter main run test:coverage`.
+- Main unit tests: `pnpm --filter main test` (Vitest), coverage: `pnpm --filter main run test:coverage`.
+- Frontend unit tests: `pnpm --filter frontend test` (Vitest).
+- New dependency → `pnpm run generate-notices` and commit `NOTICES`.
+
+## Architecture Invariants
+
+Read this section before writing code. Each item below is a place where the
+obvious change is silently incomplete.
+
+### Adding an IPC channel is a 7-file dance
+IPC handlers do **not** call `ipcMain.handle` directly. They register against
+`commandRegistry` and the file binds its channel list to `ipcMain` at the
+bottom (`main/src/ipc/git.ts` is the canonical example). A channel is not
+reachable until every step below is done; missing step 4 fails silently at
+runtime, missing step 7 fails loudly in CI.
+
+1. `main/src/ipc/<domain>.ts` — add the string to that file's
+   `DAEMON_*_CHANNELS` array **and** `commandRegistry.register(name, fn)`.
+   The array is what `commandRegistry.bindChannels(ipcMain, ...)` consumes.
+2. `main/src/ipc/index.ts` — only if you added a new `register*Handlers` file.
+3. `shared/types/daemon.ts` — `DAEMON_OWNED_CHANNEL_PREFIXES` /
+   `DAEMON_OWNED_EXACT_CHANNELS`. Skip only when an existing prefix
+   (`sessions:`, `panels:`, `projects:`, `terminal:`, …) already covers it.
+4. `main/src/preload.ts` — this file **duplicates** the daemon-owned lists
+   inline, because a sandboxed preload cannot require local modules. If you
+   touched step 3 you MUST mirror it here, or the channel bypasses the remote
+   daemon bridge and only works locally.
+5. `main/src/preload.ts` — add the method to the matching
+   `contextBridge.exposeInMainWorld('electronAPI', …)` group.
+6. `frontend/src/types/electron.d.ts` + `frontend/src/utils/api.ts` — typed
+   signature and `API.*` wrapper.
+7. `main/src/ipc/daemonRegistryBindings.test.ts` — the per-domain channel
+   arrays are asserted with `toEqual`. Adding a channel without updating this
+   file fails `pnpm --filter main test`.
+
+Also update `tests/electronApiMock.ts` when a Playwright spec exercises the flow.
+
+**Shortcut for panel-internal channels:** `window.electronAPI.invoke(channel, …)`
+is a generic passthrough (see `TerminalPanel.tsx` calling `terminal:getState`).
+It skips steps 5–6 — acceptable for internal plumbing, not for a public `API.*`
+surface.
+
+### `pnpm install` shadows the system `claude` binary
+`main` depends on `@anthropic-ai/claude-code`, so `pnpm install` writes a
+`claude` shim into `node_modules/.bin/`. Launching the app through a pnpm
+script puts that directory at the front of `PATH`, and every agent terminal the
+app spawns inherits it — so agents run the *bundled* Claude Code version rather
+than the user's installed one. A version skew there surfaces as
+`404 {"type":"not_found_error","message":"model: opus"}` or similar.
+
+Nothing needs the shim: `claudeCodeManager` resolves the executable via
+`findExecutableInPath('claude')` or the configured `claudeExecutablePath`, and
+the package itself is only imported as a library. After a fresh install, delete
+`node_modules/.bin/claude*` and `main/node_modules/.bin/claude*`.
+
+### On Windows, dev builds write to the *production* data directory
+`getAppDirectory()` auto-isolates to `~/.pane_dev` only when
+`__CFBundleIdentifier === 'com.dcouple.pane'` — a **macOS-only** environment
+variable. On Windows and Linux it falls through to `~/.pane`, so a dev run
+shares the installed app's database and sockets. Always launch dev builds with
+an explicit directory: `PANE_DIR=~/.pane_test pnpm dev`.
+
+### Secondary terminal views must match the PTY's dimensions
+Agent TUIs paint with absolute cursor positioning sized to the real PTY.
+Replaying that byte stream into a terminal of a different width wraps every
+line and each repaint pushes the viewport down — the console appears to scroll
+without end. A read-only viewer must create its xterm at the PTY's exact
+`cols`/`rows` (exposed on `TerminalPanelSnapshot`) and scale to fit with a CSS
+transform. Never use `FitAddon` for a secondary view.
+
+### Every git/shell read goes through `CommandRunner`
+`CommandRunner` transparently wraps commands for WSL and remote hosts. Never
+call `execSync`/`child_process` directly from a service. Obtain a runner from
+`sessionManager.getProjectContext(sessionId).commandRunner` or
+`getProjectContextByProjectId(projectId).commandRunner`. Both can return `null`
+for orphaned sessions or projects without sessions — return an error result,
+do not throw.
+
+### `main/src/database/migrations/*.sql` is dead code
+Nothing executes those files; `copy:assets` ships them to `dist` and they are
+ignored. Real schema lives in exactly two places:
+- `main/src/database/schema.sql` — executed statement-by-statement (split on
+  `;`) on every startup. Must be idempotent (`CREATE TABLE IF NOT EXISTS`), and
+  must never contain a `;` inside a comment or string literal. Prefer `--`
+  comments.
+- `DatabaseService.runMigrations()` in `main/src/database/database.ts` —
+  hand-written TypeScript using `PRAGMA table_info(...)` feature detection.
+  Column additions, index creation and backfills go here.
+
+For ad-hoc queries in a new service use `databaseService.getDb()` — the
+sanctioned escape hatch (see `main/src/services/scrollbackRetention.ts`) —
+rather than growing the ~5,000-line `database.ts` facade.
+
+### Navigation has no router
+`frontend/src/stores/navigationStore.ts` holds a single `activeView` enum. A
+new full-page view means touching four places:
+1. the `activeView` union — declared **twice** in that file (state interface and
+   `setActiveView` signature) — plus a `navigateToX()` action,
+2. the render switch in `frontend/src/components/SessionView.tsx`, near the
+   `pane-chat` branch,
+3. `frontend/src/components/Sidebar.tsx` — the **compact rail**,
+4. `frontend/src/components/ProjectSessionList.tsx` — the **expanded tree**.
+
+Sidebar entries live in two separate files; updating only one is the classic
+miss. `PaneChatView.tsx` is the reference implementation of a full-page view.
+
+### Adding a `ToolPanelType` is ~14 touchpoints
+`PanelContainer` (lazy import + switch), `PanelTabBar` (`getPanelIcon`,
+`typeOrder`, the create menu), `PanelTabStrip` (a **second, duplicated**
+`getPanelIcon`), `PanelLoadingFallback`, the `PanelGroupView` keep-alive list,
+`PANEL_CAPABILITIES` in `shared/types/panels.ts`, the `checkInitialized` switch
+in `main/src/ipc/panels.ts`, and a `panelManager.ensureXxxPanel` helper. Panels
+are keyed by `sessionId`; prefer a new `activeView` for anything that is not
+scoped to a single session.
+
+### Agents are terminal panels, not a panel type
+An "agent" is a `terminal` panel whose `customState.isCliPanel === true`, with
+`agentType: 'claude' | 'codex'`. `frontend/src/components/panels/cli/` is dead
+code. "Is it running?" is answered by the agent-status pipeline, **not**
+`Session.status`: `terminalPanelManager.pollAgentStatus` → `detectAgentState` →
+`panel:agentStatus` event → `App.tsx` listener → `usePanelStore.setAgentStatus`.
+Roll several panels up with `frontend/src/utils/agentStatus.ts`; read via
+`frontend/src/hooks/useAgentStatus.ts`. States: `blocked | working | idle | unknown`.
+
+### Terminals: WebGL and the shared texture atlas
+xterm instances that share font and theme **share a WebGL texture atlas**;
+clearing it from one corrupts the others (see the header comment in
+`frontend/src/components/panels/TerminalPanel.tsx`). Never call
+`clearTextureAtlas()`. Secondary or read-only terminal views must not load
+`WebglAddon` at all — Chromium also caps live WebGL contexts at ~16.
+`terminalPanelManager.setVisibility(panelId, visible, viewerId)` is refcounted
+per viewer: always pass a distinct, prefixed `viewerId`, and always release it
+on unmount.
+
+### Lint rules that will fail your PR
+- `@typescript-eslint/no-explicit-any` is an **error** in both packages. Parse
+  untrusted JSON as `unknown` and narrow with hand-written type guards.
+- The frontend enforces ~13 `jsx-a11y` rules as errors, notably
+  `click-events-have-key-events` and `no-static-element-interactions`. Never put
+  `onClick` on a `<div>` or an SVG element — wrap the row in
+  `<button type="button">` and mark decorative SVG `aria-hidden="true"`.
+- `no-console` is a warning in the frontend (`warn`/`error` allowed); console is
+  allowed in `main/`.
 
 ## Coding Style & Naming Conventions
 - Use TypeScript throughout; follow ESLint configs in `frontend/eslint.config.js` and `main/eslint.config.js`.
@@ -36,6 +178,7 @@
 
 ## Agent Notes (for automation)
 - Keep changes minimal and scoped; prefer small patches.
+- Before proposing a new dependency, check whether the repo already solves it. There is no chart library and no router by deliberate choice; charts are hand-rolled SVG under `frontend/src/components/ui/charts/` and navigation is a single `activeView` enum.
 - Update docs alongside code; do not alter build targets without discussion.
 - Use repository scripts (pnpm) and keep formatting consistent with existing files.
 - Always review the root `CLAUDE.md` before beginning any work. 
diff --git a/frontend/src/components/ProjectSessionList.tsx b/frontend/src/components/ProjectSessionList.tsx
index 79624d17..4f0a66a9 100644
--- a/frontend/src/components/ProjectSessionList.tsx
+++ b/frontend/src/components/ProjectSessionList.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, useCallback, useRef, useId } from 'react';
-import { ChevronDown, ChevronRight, Plus, FolderPlus, GitBranch, MoreHorizontal, Home, Archive, ArchiveRestore, Trash2, GitPullRequest, Pin, Monitor, MessageSquare } from 'lucide-react';
+import { ChevronDown, ChevronRight, Plus, FolderPlus, GitBranch, MoreHorizontal, Home, Archive, ArchiveRestore, Trash2, GitPullRequest, Pin, Monitor, MessageSquare, LayoutGrid } from 'lucide-react';
 import { SessionDetailTooltip } from './SessionDetailTooltip';
 import { useSessionStore } from '../stores/sessionStore';
 import { useNavigationStore } from '../stores/navigationStore';
@@ -81,6 +81,7 @@ export function ProjectSessionList({
   const navigateToPaneChat = useNavigationStore(s => s.navigateToPaneChat);
   const paneChatStatus = useSessionAgentDisplayStatus(PANE_CHAT_SESSION_ID);
   const navigateToProject = useNavigationStore(s => s.navigateToProject);
+  const navigateToFleet = useNavigationStore(s => s.navigateToFleet);
   const setSidebarNavigationScope = useNavigationStore(s => s.setSidebarNavigationScope);
   // Expansion state lives in the navigation store so the always-mounted
   // session hotkeys (useSessionNavigationHotkeys) see the same visible ordering
@@ -130,6 +131,12 @@ export function ProjectSessionList({
 
   const projectById = useMemo(() => createProjectById(projects), [projects]);
 
+  /** Agents across every session that are waiting on the user — the fleet's badge. */
+  const blockedAgentCount = useMemo(
+    () => Object.values(agentStatusByPanel).filter(state => state === 'blocked').length,
+    [agentStatusByPanel]
+  );
+
   const pinnedSessions = useMemo(() => {
     return getPinnedSessions(sessions, projectById);
   }, [sessions, projectById]);
@@ -314,6 +321,37 @@ export function ProjectSessionList({
           <AgentStatusDot status={paneChatStatus} size="sm" className="ml-auto" />
         </button>
 
+        <button
+          type="button"
+          data-testid="fleet-nav"
+          onClick={() => {
+            setSidebarNavigationScope('repositories');
+            navigateToFleet();
+          }}
+          className={cn(
+            SIDEBAR_ROW_BASE,
+            SIDEBAR_ROW_GAP,
+            SIDEBAR_ROW_PADDING,
+            'py-2 text-sm hover:bg-surface-hover hover:text-text-primary',
+            activeView === 'fleet'
+              ? 'bg-surface-hover text-text-primary'
+              : 'text-text-secondary',
+          )}
+        >
+          <LayoutGrid className="w-4 h-4" />
+          <span>Agent Fleet</span>
+          {/* Agents waiting on an answer are worth seeing without opening the grid. */}
+          {blockedAgentCount > 0 && (
+            <span
+              className="ml-auto flex items-center gap-1 rounded-full bg-status-error/15 px-1.5 text-[10px] font-medium tabular-nums text-status-error"
+              title={`${blockedAgentCount} ${blockedAgentCount === 1 ? 'agent needs' : 'agents need'} input`}
+            >
+              <AgentStatusDot status="blocked" size="sm" />
+              {blockedAgentCount}
+            </span>
+          )}
+        </button>
+
         {showRemoteDesktopLink && onRemoteDesktopClick && (
           <Tooltip content={remoteDesktopTooltip} side="right" className="block w-full">
             <button
diff --git a/frontend/src/components/SessionView.tsx b/frontend/src/components/SessionView.tsx
index fcc03f07..86670ae6 100644
--- a/frontend/src/components/SessionView.tsx
+++ b/frontend/src/components/SessionView.tsx
@@ -15,6 +15,7 @@ import { CommitMessageDialog } from './session/CommitMessageDialog';
 import { FolderArchiveDialog } from './session/FolderArchiveDialog';
 import { ConfirmDialog } from './ConfirmDialog';
 import { ProjectView } from './ProjectView';
+import { FleetView } from './fleet/FleetView';
 import { API } from '../utils/api';
 import { useResizable } from '../hooks/useResizable';
 import { useResizableHeight } from '../hooks/useResizableHeight';
@@ -1651,6 +1652,11 @@ export const SessionView = memo(() => {
   
   // Removed unused variables - now handled by panels
 
+  // Live grid of every agent pane — spans all projects.
+  if (activeView === 'fleet') {
+    return <FleetView />;
+  }
+
   // Show project view if navigation is set to project
   if (activeView === 'project' && activeProjectId) {
     if (isProjectLoading || !projectData) {
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index ef285cc1..3a61257b 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import { CreateSessionDialog } from './CreateSessionDialog';
 import { ProjectSessionList, ArchivedSessions } from './ProjectSessionList';
 import { ArchiveProgress } from './ArchiveProgress';
-import { ArrowUpDown, ChevronDown, ChevronRight, Cpu, FolderGit2, Home, Monitor, MoreHorizontal, PanelLeftClose, PanelLeftOpen, Pin, Settings as SettingsIcon, Plus, RefreshCw, MessageSquare } from 'lucide-react';
+import { ArrowUpDown, ChevronDown, ChevronRight, Cpu, FolderGit2, Home, Monitor, MoreHorizontal, PanelLeftClose, PanelLeftOpen, Pin, Settings as SettingsIcon, Plus, RefreshCw, MessageSquare, LayoutGrid } from 'lucide-react';
 import { SessionDetailTooltip } from './SessionDetailTooltip';
 import { usePaneLogo } from '../hooks/usePaneLogo';
 import { isMac } from '../utils/platformUtils';
@@ -380,10 +380,16 @@ export function Sidebar({ onAboutClick, onSettingsClick, onRemoteSettingsClick,
   const navigateToProject = useNavigationStore((state) => state.navigateToProject);
   const navigateToSessions = useNavigationStore((state) => state.navigateToSessions);
   const navigateToPaneChat = useNavigationStore((state) => state.navigateToPaneChat);
+  const navigateToFleet = useNavigationStore((state) => state.navigateToFleet);
   const paneChatStatus = useSessionAgentDisplayStatus(PANE_CHAT_SESSION_ID);
   const setSidebarNavigationScope = useNavigationStore((state) => state.setSidebarNavigationScope);
   const agentStatusByPanel = usePanelStore((state) => state.agentStatus);
   const agentPanelSessions = usePanelStore((state) => state.agentStatusSession);
+  /** Agents waiting on the user, anywhere — surfaced on the fleet rail button. */
+  const blockedAgentCount = useMemo(
+    () => Object.values(agentStatusByPanel).filter((state) => state === 'blocked').length,
+    [agentStatusByPanel]
+  );
   const unviewedBySession = usePanelStore((state) => state.unviewedCompletedActivity);
   useSessionNavigationHotkeys({ projects, sessionSortAscending });
 
@@ -493,6 +499,28 @@ export function Sidebar({ onAboutClick, onSettingsClick, onRemoteSettingsClick,
               </button>
             </Tooltip>
 
+            <Tooltip content="Agent Fleet" side="right">
+              <button
+                type="button"
+                data-testid="compact-fleet"
+                data-compact-rail-item
+                onClick={() => {
+                  setSidebarNavigationScope('repositories');
+                  navigateToFleet();
+                }}
+                aria-label={blockedAgentCount > 0
+                  ? `Agent Fleet — ${blockedAgentCount} waiting for input`
+                  : 'Agent Fleet'}
+                className={`${COMPACT_RAIL_BUTTON} ${activeView === 'fleet' ? COMPACT_RAIL_ACTIVE : COMPACT_RAIL_IDLE}`}
+              >
+                <LayoutGrid className="h-4 w-4" />
+                {/* Same affordance as Pane Chat above: an agent is waiting. */}
+                {blockedAgentCount > 0 && (
+                  <AgentStatusDot status="blocked" size="sm" className="absolute right-0 top-0" />
+                )}
+              </button>
+            </Tooltip>
+
             {showRemoteDesktopLink && (
               <Tooltip content={REMOTE_DESKTOP_TOOLTIP} side="right">
                 <button
diff --git a/frontend/src/components/fleet/FleetTile.tsx b/frontend/src/components/fleet/FleetTile.tsx
new file mode 100644
index 00000000..d0e29734
--- /dev/null
+++ b/frontend/src/components/fleet/FleetTile.tsx
@@ -0,0 +1,360 @@
+import { memo } from 'react';
+import { GitBranch, Keyboard, Minimize2, Radio, TerminalSquare, Trash2, X } from 'lucide-react';
+import { AgentStatusDot } from '../ui/AgentStatusDot';
+import { useFleetTerminal } from '../../hooks/useFleetTerminal';
+import { toAgentDisplayStatus } from '../../utils/agentStatus';
+import { describeFleetTile } from '../../utils/fleetGrouping';
+import type { AgentDisplayStatus } from '../../../../shared/types/agentStatus';
+import type { FleetTileModel } from '../../../../shared/types/fleet';
+
+/** Rendered row height of the live terminal: 12px font at 1.15 line height. */
+const ROW_PX = 14;
+/** Row height to aim for once focused, where legibility matters most. */
+const FOCUS_ROW_PX = 17;
+/** Ceiling so one very tall PTY can't push the rest of the grid off-screen. */
+const MAX_FOCUS_BODY_PX = 620;
+
+/** Left accent per state, so a wall of tiles is scannable at a glance. */
+const ACCENT: Record<AgentDisplayStatus, string> = {
+  blocked: 'bg-status-error',
+  working: 'bg-interactive',
+  done: 'bg-status-success',
+  idle: 'bg-border-secondary',
+  unknown: 'bg-border-secondary',
+};
+
+const STATUS_TEXT: Record<AgentDisplayStatus, string> = {
+  blocked: 'Needs input',
+  working: 'Working',
+  done: 'Done',
+  idle: 'Idle',
+  unknown: 'Not running',
+};
+
+function relativeTime(iso: string | null): string {
+  if (!iso) return '';
+  const ms = Date.now() - new Date(iso).getTime();
+  if (!Number.isFinite(ms) || ms < 0) return '';
+  const minutes = Math.floor(ms / 60_000);
+  if (minutes < 1) return 'just now';
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  return `${Math.floor(hours / 24)}d ago`;
+}
+
+function LiveTerminalSurface({
+  panelId,
+  cols,
+  rows,
+  isAlternateScreen,
+  height,
+  interactive,
+  fitWholeGrid,
+  sendEscape,
+  onEscapeExit,
+}: {
+  panelId: string;
+  cols: number | null;
+  rows: number | null;
+  isAlternateScreen: boolean;
+  height: number;
+  interactive: boolean;
+  /** Shrink the font until the agent's entire screen fits — expanded view. */
+  fitWholeGrid: boolean;
+  sendEscape: boolean;
+  onEscapeExit: () => void;
+}) {
+  const { wrapperRef, containerRef, error, focusTerminal, bottomOverflow, clippedRight } = useFleetTerminal({
+    panelId,
+    cols,
+    rows,
+    isAlternateScreen,
+    interactive,
+    matchPtyExactly: fitWholeGrid,
+    sendEscape,
+    onEscapeExit,
+  });
+
+  return (
+    <div
+      ref={wrapperRef}
+      aria-hidden={interactive ? undefined : 'true'}
+      // Pointer-down rather than click: a click on the tile's padding would
+      // otherwise leave the keyboard wherever it was, and typing would be lost.
+      onPointerDown={interactive ? focusTerminal : undefined}
+      className={`relative w-full overflow-hidden bg-[color:var(--color-terminal-bg,#0b0b10)] ${
+        interactive ? '' : 'pane-fleet-surface'
+      } ${fitWholeGrid ? 'p-1' : ''}`}
+      style={{ height }}
+    >
+      {/*
+        Bottom-anchored in every mode: the newest rows — and the prompt waiting
+        for an answer — are what a tile is for, so anything that does not fit is
+        lost off the top. `bottomOverflow` pushes the agent's empty trailing
+        rows out below the tile, so the space goes to content instead of blanks.
+      */}
+      <div
+        ref={containerRef}
+        className={fitWholeGrid ? 'absolute inset-x-1' : 'absolute inset-x-0'}
+        style={{ bottom: (fitWholeGrid ? 4 : 0) - bottomOverflow }}
+      />
+      {/*
+        The terminal is exactly as wide as the agent's PTY — anything wider than
+        the tile is cut off. A hard edge mid-word reads as a rendering fault, so
+        say it with a fade: text running into it is text there is more of.
+      */}
+      {clippedRight && (
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-[color:var(--color-terminal-bg,#0b0b10)] to-transparent"
+        />
+      )}
+      {error && (
+        <p className="absolute inset-x-1 bottom-1 truncate text-[9px] text-status-error">{error}</p>
+      )}
+    </div>
+  );
+}
+
+export interface FleetTileProps {
+  tile: FleetTileModel;
+  /** True when this tile is rendered as a live terminal rather than a snapshot. */
+  isLiveView: boolean;
+  onHoverStart: (panelId: string) => void;
+  onHoverEnd: (panelId: string) => void;
+  onOpen: (tile: FleetTileModel) => void;
+  /** Trailing lines shown in snapshot mode; scales with grid density. */
+  snapshotLines: number;
+  /** True while this tile's agent is open in the focus view. */
+  isFocused: boolean;
+  /**
+   * Whether taking the keyboard also enlarges the tile to the agent's full
+   * screen. Off, the tile keeps its grid size and is typed into where it sits.
+   */
+  expandWhenFocused: boolean;
+  /** Forward Escape to the agent instead of using it to leave typing mode. */
+  sendEscape: boolean;
+  /** Hand this tile the keyboard. */
+  onFocusAgent: (tile: FleetTileModel) => void;
+  /** Return the tile to preview size. */
+  onCollapse: () => void;
+  /** Ask to close this pane for good — the view confirms before acting. */
+  onClose: (tile: FleetTileModel) => void;
+  /** True while the grid's roving keyboard cursor is on this tile. */
+  isSelected: boolean;
+  /** Report this tile's element so the grid can scroll it into view. */
+  registerElement: (panelId: string, element: HTMLElement | null) => void;
+}
+
+/**
+ * One agent in the grid.
+ *
+ * Renders a cheap ANSI-stripped snapshot by default and a real read-only
+ * terminal when promoted, so a large grid costs one xterm instance rather than
+ * one per agent.
+ */
+export const FleetTile = memo(function FleetTile({
+  tile,
+  isLiveView,
+  onHoverStart,
+  onHoverEnd,
+  onOpen,
+  snapshotLines,
+  isFocused,
+  expandWhenFocused,
+  sendEscape,
+  onFocusAgent,
+  onCollapse,
+  onClose,
+  isSelected,
+  registerElement,
+}: FleetTileProps) {
+  const status = toAgentDisplayStatus(tile.agentState, false);
+  const agentLabel = tile.agentType === 'claude' ? 'Claude' : tile.agentType === 'codex' ? 'Codex' : 'Agent';
+  const snapshotText = tile.snapshot?.text ?? '';
+  const showLive = isLiveView && tile.isLive;
+  // Both bodies are laid out on the same row grid as the live terminal
+  // (12px font x 1.15 line height), so a tile shows whole lines rather than
+  // clipping one in half, and hovering never makes the grid jump.
+  const budgetRows = Math.max(snapshotLines, 6);
+  // A terminal shorter than the budget gets only the height it needs, instead
+  // of reserving blank space below it.
+  const ptyRows = tile.snapshot?.rows ?? 0;
+  const visibleRows = showLive && ptyRows > 0 ? Math.min(ptyRows, budgetRows) : budgetRows;
+  // Expanding is opt-in. On, the tile grows in place to show the agent's whole
+  // grid at a readable size; off, it is typed into exactly where it sits and
+  // the grid around it never reflows — the terminal fits itself to the tile
+  // instead, and the bottom rows carrying the prompt stay visible.
+  const isExpanded = isFocused && expandWhenFocused;
+  const bodyHeight = isExpanded
+    ? Math.min(Math.max(ptyRows, budgetRows) * FOCUS_ROW_PX, MAX_FOCUS_BODY_PX)
+    : visibleRows * ROW_PX;
+  const lastActivity = relativeTime(tile.snapshot?.lastActivityAt ?? null);
+  // Only worth showing when it says something the session name does not.
+  const branchLabel = tile.worktreeName && tile.worktreeName !== tile.sessionName
+    ? tile.worktreeName
+    : null;
+
+  return (
+    <article
+      ref={element => registerElement(tile.panelId, element)}
+      className={`group relative flex min-w-0 flex-col overflow-hidden rounded-md border bg-surface-secondary transition-colors ${
+        isFocused
+          ? 'border-interactive ring-1 ring-interactive/40'
+          : isSelected
+            ? 'border-interactive/70 ring-1 ring-interactive/20'
+            : showLive
+              ? 'border-interactive/50'
+              : 'border-border-primary hover:border-border-secondary'
+      }`}
+      // Expanded, the tile takes the whole grid row: the agent's terminal needs
+      // that width to stay both correct and readable.
+      style={isExpanded ? { gridColumn: '1 / -1' } : undefined}
+      onMouseEnter={() => onHoverStart(tile.panelId)}
+      onMouseLeave={() => onHoverEnd(tile.panelId)}
+    >
+      {/* Status accent */}
+      <span className={`absolute inset-y-0 left-0 w-0.5 ${ACCENT[status]}`} aria-hidden="true" />
+
+      <header className="flex flex-shrink-0 items-center gap-1.5 border-b border-border-primary py-1 pl-2.5 pr-2">
+        <AgentStatusDot status={status} size="sm" className="flex-shrink-0" />
+        <button
+          type="button"
+          onClick={() => onOpen(tile)}
+          onFocus={() => onHoverStart(tile.panelId)}
+          onBlur={() => onHoverEnd(tile.panelId)}
+          aria-label={`Open ${tile.sessionName} — ${agentLabel} — ${STATUS_TEXT[status]}`}
+          title={describeFleetTile(tile)}
+          className="min-w-0 flex-1 truncate rounded text-left text-[11px] font-medium leading-tight text-text-primary transition-colors hover:text-interactive focus:outline-none focus:ring-1 focus:ring-interactive"
+        >
+          {tile.sessionName}
+        </button>
+        {/*
+          Within a project the worktree is the session's real identity — three
+          sessions on "Super Forum" are only told apart by their branch.
+        */}
+        {branchLabel && (
+          <span
+            className="flex min-w-0 max-w-[45%] flex-shrink items-center gap-0.5 text-[9px] text-text-muted"
+            title={tile.worktreePath ?? branchLabel}
+          >
+            <GitBranch className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />
+            <span className="truncate">{branchLabel}</span>
+          </span>
+        )}
+        <span
+          className="flex-shrink-0 rounded-sm bg-surface-tertiary px-1 text-[9px] uppercase tracking-wide text-text-tertiary"
+          aria-hidden="true"
+        >
+          {agentLabel}
+        </span>
+        {isFocused && (
+          <button
+            type="button"
+            onClick={() => onCollapse()}
+            title={isExpanded ? 'Return this tile to preview size' : 'Stop sending keystrokes to this agent'}
+            className="flex flex-shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[9px] text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary"
+          >
+            {isExpanded
+              ? <Minimize2 className="h-2.5 w-2.5" aria-hidden="true" />
+              : <X className="h-2.5 w-2.5" aria-hidden="true" />}
+            {isExpanded ? 'Collapse' : 'Release'}
+          </button>
+        )}
+        {showLive
+          ? <Radio className="h-2.5 w-2.5 flex-shrink-0 text-interactive" aria-label="Live" />
+          : <TerminalSquare className="h-2.5 w-2.5 flex-shrink-0 text-text-muted" aria-hidden="true" />}
+        {/*
+          Closing a pane ends a process and drops its scrollback, so it stays
+          out of the way until the tile is hovered — and asks first.
+        */}
+        <button
+          type="button"
+          onClick={() => onClose(tile)}
+          aria-label={`Close ${tile.sessionName}`}
+          title="Close this pane"
+          className="flex-shrink-0 rounded p-0.5 text-text-muted opacity-0 transition-opacity hover:bg-status-error/15 hover:text-status-error focus-visible:opacity-100 group-hover:opacity-100"
+        >
+          <Trash2 className="h-2.5 w-2.5" aria-hidden="true" />
+        </button>
+      </header>
+
+      {showLive ? (
+        <LiveTerminalSurface
+          panelId={tile.panelId}
+          cols={tile.snapshot?.cols ?? null}
+          rows={tile.snapshot?.rows ?? null}
+          isAlternateScreen={tile.snapshot?.isAlternateScreen ?? false}
+          height={bodyHeight}
+          interactive={isFocused}
+          fitWholeGrid={isExpanded}
+          sendEscape={sendEscape}
+          onEscapeExit={onCollapse}
+        />
+      ) : (
+        <div
+          className="overflow-hidden bg-[color:var(--color-terminal-bg,#0b0b10)] px-1.5 py-1"
+          style={{ height: bodyHeight }}
+        >
+          {snapshotText ? (
+            <pre
+              aria-hidden="true"
+              className="h-full overflow-hidden whitespace-pre font-mono text-[11px] text-text-secondary"
+              style={{ lineHeight: `${ROW_PX}px` }}
+            >
+              {snapshotText}
+            </pre>
+          ) : (
+            <p className="pt-3 text-center text-[10px] text-text-muted">
+              {tile.isLive ? 'Waiting for output…' : 'Not running'}
+            </p>
+          )}
+        </div>
+      )}
+
+      {/*
+        Activation target over the preview — snapshot or read-only terminal
+        alike, so a running agent is one click from the keyboard and never
+        needs to be hovered into life first. Removed once focused, leaving the
+        terminal itself to receive every click and keystroke.
+      */}
+      {tile.isLive && !isFocused && (
+        <button
+          type="button"
+          onClick={() => onFocusAgent(tile)}
+          aria-label={`Interact with ${tile.sessionName}`}
+          title="Click to answer or type"
+          className="absolute inset-x-0 bottom-5 top-6 z-10 cursor-pointer focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-interactive"
+        >
+          <span className="sr-only">Interact with {tile.sessionName}</span>
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute bottom-1 right-1 flex items-center gap-1 rounded bg-surface-primary/85 px-1.5 py-0.5 text-[9px] text-text-secondary opacity-0 transition-opacity group-hover:opacity-100"
+          >
+            <Keyboard className="h-2.5 w-2.5" />
+            Click to answer
+          </span>
+        </button>
+      )}
+
+      <footer className="flex flex-shrink-0 items-center gap-1.5 border-t border-border-primary py-0.5 pl-2.5 pr-2 text-[9px] text-text-muted">
+        {isFocused ? (
+          <span className="flex items-center gap-1 font-medium text-interactive">
+            <Keyboard className="h-2.5 w-2.5" aria-hidden="true" />
+            {sendEscape
+              ? 'Typing goes to this agent — Escape is sent to it too'
+              : 'Typing goes to this agent — Escape leaves'}
+          </span>
+        ) : (
+          <span className="min-w-0 truncate">{tile.projectName}</span>
+        )}
+        <span className="ml-auto flex-shrink-0 whitespace-nowrap">
+          {tile.isLive ? (lastActivity || STATUS_TEXT[status]) : 'stopped'}
+        </span>
+      </footer>
+    </article>
+  );
+});
+
+export default FleetTile;
diff --git a/frontend/src/components/fleet/FleetView.tsx b/frontend/src/components/fleet/FleetView.tsx
new file mode 100644
index 00000000..cdf6fa33
--- /dev/null
+++ b/frontend/src/components/fleet/FleetView.tsx
@@ -0,0 +1,778 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ArrowRight, CheckSquare, ChevronDown, ChevronRight, LayoutGrid, Loader2,
+  RefreshCw, Settings2, Square,
+} from 'lucide-react';
+import { API } from '../../utils/api';
+import { panelApi } from '../../services/panelApi';
+import { usePanelStore } from '../../stores/panelStore';
+import { useSessionStore } from '../../stores/sessionStore';
+import { useNavigationStore } from '../../stores/navigationStore';
+import { describeFleetTile, groupFleetTiles } from '../../utils/fleetGrouping';
+import { AgentStatusDot } from '../ui/AgentStatusDot';
+import { Button } from '../ui/Button';
+import { Dropdown, type DropdownItem } from '../ui/Dropdown';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '../ui/Modal';
+import { FleetTile } from './FleetTile';
+import type {
+  FleetAgentPanel,
+  FleetDensity,
+  FleetGrouping,
+  FleetSnapshot,
+  FleetTileModel,
+} from '../../../../shared/types/fleet';
+import { MAX_FLEET_SNAPSHOT_PANELS } from '../../../../shared/types/fleet';
+
+/** Snapshot cadence. Fast enough to feel live, slow enough to stay cheap. */
+const POLL_INTERVAL_MS = 1500;
+/** Debounce before a hovered tile is promoted to a real terminal. */
+const PROMOTE_DELAY_MS = 250;
+
+const GROUPING_OPTIONS: Array<{ value: FleetGrouping; label: string }> = [
+  { value: 'project', label: 'Project' },
+  { value: 'status', label: 'Status' },
+  { value: 'agent', label: 'Agent' },
+  { value: 'none', label: 'None' },
+];
+
+const DENSITY_OPTIONS: FleetDensity[] = [1, 2, 3, 4];
+
+/**
+ * Above this many tiles, "all live" is refused: each live tile is a real xterm
+ * instance with its own output subscription, and the DOM renderer's cost grows
+ * linearly. Hover mode stays available at any count.
+ */
+const MAX_LIVE_ALL_TILES = 12;
+
+/** Lower density = larger tiles, so more of each terminal is worth fetching. */
+const LINES_BY_DENSITY: Record<FleetDensity, number> = { 1: 32, 2: 24, 3: 16, 4: 10 };
+
+/**
+ * View options that outlive a visit. Both answer "what does my fleet look
+ * like", which is a property of the user's workflow rather than of this
+ * session: whether answering an agent should enlarge its tile, and which
+ * project groups are folded away because nothing there needs attention today.
+ */
+const EXPAND_ON_FOCUS_KEY = 'pane.fleet.expandOnFocus';
+const COLLAPSED_GROUPS_KEY = 'pane.fleet.collapsedGroups';
+const SEND_ESCAPE_KEY = 'pane.fleet.sendEscape';
+const GROUPING_KEY = 'pane.fleet.grouping';
+const DENSITY_KEY = 'pane.fleet.density';
+
+function readStoredOption<T>(key: string, fallback: T): T {
+  try {
+    const raw = window.localStorage.getItem(key);
+    return raw === null ? fallback : (JSON.parse(raw) as T);
+  } catch {
+    // Corrupt or unavailable storage must never keep the view from rendering.
+    return fallback;
+  }
+}
+
+function writeStoredOption(key: string, value: unknown): void {
+  try {
+    window.localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+    // Quota or a locked-down profile — the option just stays session-only.
+  }
+}
+
+/**
+ * Live grid of every agent pane across every session and project.
+ *
+ * Tiles poll a batched, ANSI-stripped snapshot while this view is visible, and
+ * exactly one tile at a time is promoted to a real read-only terminal on hover
+ * or focus. That cap is deliberate: xterm instances sharing a font and theme
+ * share a WebGL texture atlas, and a grid of live terminals would exhaust
+ * Chromium's GL contexts (see `TerminalPanel`'s header comment).
+ */
+export function FleetView() {
+  const [agents, setAgents] = useState<FleetAgentPanel[]>([]);
+  const [snapshots, setSnapshots] = useState<Record<string, FleetSnapshot>>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [grouping, setGrouping] = useState<FleetGrouping>(
+    () => readStoredOption<FleetGrouping>(GROUPING_KEY, 'project')
+  );
+  const [density, setDensity] = useState<FleetDensity>(
+    () => readStoredOption<FleetDensity>(DENSITY_KEY, 3)
+  );
+  const [liveTileId, setLiveTileId] = useState<string | null>(null);
+  const [liveAll, setLiveAll] = useState(false);
+  /** Panel currently open in the full-size interactive view, if any. */
+  const [focusedPanelId, setFocusedPanelId] = useState<string | null>(null);
+  /** The grid's roving keyboard cursor — selection, not focus. */
+  const [selectedPanelId, setSelectedPanelId] = useState<string | null>(null);
+  /** Tile awaiting a close confirmation. */
+  const [pendingClose, setPendingClose] = useState<FleetTileModel | null>(null);
+  const [closing, setClosing] = useState(false);
+  /**
+   * Whether answering an agent enlarges its tile. Off, the tile keeps its size
+   * and simply takes the keyboard — better when the grid layout itself is the
+   * thing being watched.
+   */
+  const [expandOnFocus, setExpandOnFocus] = useState<boolean>(
+    () => readStoredOption(EXPAND_ON_FOCUS_KEY, true)
+  );
+  const [collapsedGroupKeys, setCollapsedGroupKeys] = useState<string[]>(
+    () => readStoredOption<string[]>(COLLAPSED_GROUPS_KEY, [])
+  );
+  /**
+   * Whether Escape reaches the agent. Off, it leaves typing mode instead —
+   * the usual intent in a grid, and unlike an interrupt it can be undone by
+   * clicking the tile again.
+   */
+  const [sendEscape, setSendEscape] = useState<boolean>(
+    () => readStoredOption(SEND_ESCAPE_KEY, false)
+  );
+
+  const promoteTimerRef = useRef<number | undefined>(undefined);
+  const inFlightRef = useRef(false);
+  /** Display order captured when a tile took the keyboard; see handleFocusAgent. */
+  const frozenOrderRef = useRef<{ groups: string[]; tiles: string[] } | null>(null);
+  /** Tile elements, so keyboard navigation can scroll a selection into view. */
+  const tileElementsRef = useRef(new Map<string, HTMLElement>());
+
+  const agentStatus = usePanelStore(state => state.agentStatus);
+  const setActiveSession = useSessionStore(state => state.setActiveSession);
+  const setActivePanelInStore = usePanelStore(state => state.setActivePanel);
+  const activeView = useNavigationStore(state => state.activeView);
+  const navigateToSessions = useNavigationStore(state => state.navigateToSessions);
+
+  const snapshotLines = LINES_BY_DENSITY[density];
+
+  const loadAgents = useCallback(async () => {
+    try {
+      const response = await API.fleet.listAgents();
+      if (!response.success || !response.data) {
+        throw new Error(response.error || 'Failed to list agents');
+      }
+      setAgents(response.data);
+      setError(null);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to list agents');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadAgents();
+  }, [loadAgents]);
+
+  // Agents appearing or disappearing shows up as agent-status churn; refresh
+  // the roster on it rather than polling the (heavier) list endpoint.
+  const agentStatusKeys = Object.keys(agentStatus).sort().join(',');
+  useEffect(() => {
+    void loadAgents();
+  }, [agentStatusKeys, loadAgents]);
+
+  const canLiveAll = agents.length <= MAX_LIVE_ALL_TILES;
+  const liveAllActive = liveAll && canLiveAll;
+
+  const tiles: FleetTileModel[] = useMemo(
+    () => agents.map(agent => ({
+      ...agent,
+      agentState: agentStatus[agent.panelId] ?? 'unknown',
+      snapshot: snapshots[agent.panelId] ?? null,
+    })),
+    [agents, agentStatus, snapshots]
+  );
+
+  const groups = useMemo(() => groupFleetTiles(tiles, grouping), [tiles, grouping]);
+
+  const collapsedGroups = useMemo(() => new Set(collapsedGroupKeys), [collapsedGroupKeys]);
+
+  /**
+   * `groups` in the order the user last saw them while typing.
+   *
+   * Content still updates — only the running order is pinned, and anything new
+   * lands at the end rather than shuffling what is already on screen.
+   */
+  const displayedGroups = useMemo(() => {
+    const frozen = focusedPanelId ? frozenOrderRef.current : null;
+    if (!frozen) return groups;
+
+    const rankOf = (order: string[], key: string) => {
+      const index = order.indexOf(key);
+      return index === -1 ? Number.MAX_SAFE_INTEGER : index;
+    };
+
+    return [...groups]
+      .sort((a, b) => rankOf(frozen.groups, a.key) - rankOf(frozen.groups, b.key))
+      .map(group => ({
+        ...group,
+        tiles: [...group.tiles].sort(
+          (a, b) => rankOf(frozen.tiles, a.panelId) - rankOf(frozen.tiles, b.panelId)
+        ),
+      }));
+  }, [groups, focusedPanelId]);
+
+  useEffect(() => writeStoredOption(EXPAND_ON_FOCUS_KEY, expandOnFocus), [expandOnFocus]);
+  useEffect(() => writeStoredOption(COLLAPSED_GROUPS_KEY, collapsedGroupKeys), [collapsedGroupKeys]);
+  useEffect(() => writeStoredOption(SEND_ESCAPE_KEY, sendEscape), [sendEscape]);
+  useEffect(() => writeStoredOption(GROUPING_KEY, grouping), [grouping]);
+  useEffect(() => writeStoredOption(DENSITY_KEY, density), [density]);
+
+  // A folded-away group costs nothing: its panels leave the snapshot batch, so
+  // the emulators behind them are never woken for a tile nobody can see.
+  const panelIds = useMemo(
+    () => groups
+      .filter(group => !collapsedGroups.has(group.key))
+      .flatMap(group => group.tiles.map(tile => tile.panelId))
+      .slice(0, MAX_FLEET_SNAPSHOT_PANELS),
+    [groups, collapsedGroups]
+  );
+  const panelIdsKey = panelIds.join(',');
+
+  // Poll snapshots only while this view is actually on screen. A background
+  // poll would keep every agent's emulator warm for nothing.
+  useEffect(() => {
+    if (activeView !== 'fleet' || panelIds.length === 0) return;
+
+    let cancelled = false;
+
+    const tick = async () => {
+      if (cancelled || inFlightRef.current) return;
+      if (document.visibilityState !== 'visible') return;
+      inFlightRef.current = true;
+      try {
+        const response = await API.fleet.snapshots({ panelIds, maxLines: snapshotLines });
+        if (cancelled || !response.success || !response.data) return;
+        const next: Record<string, FleetSnapshot> = {};
+        for (const snapshot of response.data.snapshots) next[snapshot.panelId] = snapshot;
+        setSnapshots(next);
+      } catch {
+        // A dropped poll is not worth surfacing; the next tick retries.
+      } finally {
+        inFlightRef.current = false;
+      }
+    };
+
+    void tick();
+    // With every tile live, snapshots only still matter for stopped panels and
+    // for PTY dimension changes, so the poll can back right off.
+    const timer = window.setInterval(() => { void tick(); }, liveAllActive ? POLL_INTERVAL_MS * 6 : POLL_INTERVAL_MS);
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+    };
+    // panelIdsKey stands in for panelIds so a re-render with the same ids does
+    // not restart the interval.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeView, panelIdsKey, snapshotLines, liveAllActive]);
+
+  const statusSummary = useMemo(() => ({
+    blocked: tiles.filter(tile => tile.agentState === 'blocked').length,
+    working: tiles.filter(tile => tile.agentState === 'working').length,
+  }), [tiles]);
+
+  // In "all live" mode hover is irrelevant — every tile is already live.
+  const handleHoverStart = useCallback((panelId: string) => {
+    if (liveAll) return;
+    // The focused tile is already live and owns the keyboard.
+    if (focusedPanelId === panelId) return;
+    window.clearTimeout(promoteTimerRef.current);
+    promoteTimerRef.current = window.setTimeout(() => setLiveTileId(panelId), PROMOTE_DELAY_MS);
+  }, [liveAll, focusedPanelId]);
+
+  const handleHoverEnd = useCallback((panelId: string) => {
+    if (liveAll) return;
+    // The focused tile keeps the keyboard even when the pointer leaves it.
+    if (focusedPanelId === panelId) return;
+    window.clearTimeout(promoteTimerRef.current);
+    setLiveTileId(current => (current === panelId ? null : current));
+  }, [liveAll, focusedPanelId]);
+
+  useEffect(() => () => window.clearTimeout(promoteTimerRef.current), []);
+
+  const handleFocusAgent = useCallback((tile: FleetTileModel) => {
+    window.clearTimeout(promoteTimerRef.current);
+    // Tiles are ordered by urgency, so answering an agent changes its state and
+    // re-sorts the grid underneath the pointer — the tile the user is typing
+    // into jumps to another column and back. Pin the running order for as long
+    // as someone is typing.
+    frozenOrderRef.current = {
+      groups: groups.map(group => group.key),
+      tiles: groups.flatMap(group => group.tiles.map(member => member.panelId)),
+    };
+    setFocusedPanelId(tile.panelId);
+    // Keep it live regardless of where the pointer goes: demoting to a
+    // snapshot mid-typing would drop the keyboard.
+    setLiveTileId(tile.panelId);
+  }, [groups]);
+
+  const handleCloseFocus = useCallback(() => {
+    frozenOrderRef.current = null;
+    setFocusedPanelId(null);
+  }, []);
+
+  /**
+   * Fold a group away, or bring it back.
+   *
+   * Hiding the group that holds the focused tile also releases the keyboard:
+   * an agent nobody can see must not keep receiving what the user types.
+   */
+  const handleToggleGroup = useCallback((groupKey: string) => {
+    const group = groups.find(candidate => candidate.key === groupKey);
+    const isCollapsing = !collapsedGroups.has(groupKey);
+
+    if (isCollapsing && group?.tiles.some(tile => tile.panelId === focusedPanelId)) {
+      setFocusedPanelId(null);
+      setLiveTileId(null);
+    }
+
+    setCollapsedGroupKeys(current => (
+      current.includes(groupKey)
+        ? current.filter(key => key !== groupKey)
+        : [...current, groupKey]
+    ));
+  }, [groups, collapsedGroups, focusedPanelId]);
+
+  // Track the live tile model so the focus view keeps seeing fresh snapshots
+  // (dimensions, status) as polls arrive.
+  const focusedTile = useMemo(
+    () => tiles.find(tile => tile.panelId === focusedPanelId) ?? null,
+    [tiles, focusedPanelId]
+  );
+
+  // A panel that disappears (session archived, agent stopped) must not leave a
+  // dialog attached to nothing.
+  useEffect(() => {
+    if (focusedPanelId && !focusedTile) setFocusedPanelId(null);
+  }, [focusedPanelId, focusedTile]);
+
+  // Drop the hover promotion when switching into all-live so the two modes
+  // never both own a terminal for the same panel.
+  useEffect(() => {
+    if (liveAllActive) setLiveTileId(null);
+  }, [liveAllActive]);
+
+  /**
+   * Open the agent this tile represents.
+   *
+   * The active panel is persisted *before* navigating: `SessionView` reloads a
+   * session's panels on activation and takes the active panel from the
+   * backend, which would otherwise immediately overwrite a client-only
+   * selection and land the user on whatever panel was last open.
+   */
+  const handleOpen = useCallback(async (tile: FleetTileModel) => {
+    setLiveTileId(null);
+    try {
+      await panelApi.setActivePanel(tile.sessionId, tile.panelId);
+    } catch {
+      // Fall through: the session still opens, just on its stored panel.
+    }
+    setActivePanelInStore(tile.sessionId, tile.panelId);
+    await setActiveSession(tile.sessionId);
+    navigateToSessions();
+  }, [setActiveSession, setActivePanelInStore, navigateToSessions]);
+
+  // --- Keyboard navigation ---
+
+  /** Every tile on screen, in reading order, ignoring folded groups. */
+  const visibleTiles = useMemo(
+    () => displayedGroups
+      .filter(group => grouping === 'none' || !collapsedGroups.has(group.key))
+      .flatMap(group => group.tiles),
+    [displayedGroups, grouping, collapsedGroups]
+  );
+
+  const registerTileElement = useCallback((panelId: string, element: HTMLElement | null) => {
+    if (element) tileElementsRef.current.set(panelId, element);
+    else tileElementsRef.current.delete(panelId);
+  }, []);
+
+  const revealTile = useCallback((panelId: string) => {
+    tileElementsRef.current.get(panelId)?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  }, []);
+
+  const selectTile = useCallback((panelId: string) => {
+    setSelectedPanelId(panelId);
+    revealTile(panelId);
+  }, [revealTile]);
+
+  /**
+   * Take the user to the next agent that is waiting on them.
+   *
+   * The whole point of the fleet is answering agents; without this, finding the
+   * one that is blocked means scanning a wall of tiles for a red dot.
+   */
+  const jumpToNextBlocked = useCallback(() => {
+    const blocked = visibleTiles.filter(tile => tile.agentState === 'blocked');
+    if (blocked.length === 0) return;
+
+    const anchor = focusedPanelId ?? selectedPanelId;
+    const currentIndex = blocked.findIndex(tile => tile.panelId === anchor);
+    const next = blocked[(currentIndex + 1) % blocked.length];
+
+    selectTile(next.panelId);
+    if (next.isLive) handleFocusAgent(next);
+  }, [visibleTiles, focusedPanelId, selectedPanelId, selectTile, handleFocusAgent]);
+
+  /**
+   * Arrows move a selection across the grid, Enter hands it the keyboard.
+   *
+   * Bound on the document rather than the grid so it works without clicking
+   * first, and disabled the moment a tile is focused — those keys belong to the
+   * agent then, and Escape is already spoken for.
+   */
+  useEffect(() => {
+    if (activeView !== 'fleet') return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (focusedPanelId || pendingClose) return;
+      if (event.ctrlKey || event.metaKey || event.altKey) return;
+
+      const target = event.target as HTMLElement | null;
+      if (target?.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target?.tagName ?? '')) return;
+      if (visibleTiles.length === 0) return;
+
+      if (event.key.toLowerCase() === 'n') {
+        event.preventDefault();
+        jumpToNextBlocked();
+        return;
+      }
+
+      const index = visibleTiles.findIndex(tile => tile.panelId === selectedPanelId);
+      const step = ({
+        ArrowRight: 1,
+        ArrowLeft: -1,
+        ArrowDown: density,
+        ArrowUp: -density,
+      } as Record<string, number | undefined>)[event.key];
+
+      if (step !== undefined) {
+        event.preventDefault();
+        // Nothing selected yet: the first arrow lands on the first tile.
+        const nextIndex = index === -1
+          ? 0
+          : Math.min(Math.max(index + step, 0), visibleTiles.length - 1);
+        selectTile(visibleTiles[nextIndex].panelId);
+        return;
+      }
+
+      if (event.key === 'Enter' && index !== -1) {
+        const tile = visibleTiles[index];
+        if (!tile.isLive) return;
+        event.preventDefault();
+        handleFocusAgent(tile);
+        return;
+      }
+
+      if (event.key === 'Escape' && selectedPanelId) {
+        event.preventDefault();
+        setSelectedPanelId(null);
+      }
+    };
+
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [
+    activeView, focusedPanelId, pendingClose, visibleTiles, selectedPanelId,
+    density, selectTile, handleFocusAgent, jumpToNextBlocked,
+  ]);
+
+  const viewOptionItems: DropdownItem[] = useMemo(() => [
+    {
+      id: 'expand-on-click',
+      label: 'Expand on click',
+      description: expandOnFocus
+        ? 'Clicking an agent enlarges its tile to the agent’s full screen'
+        : 'Tiles keep their size and simply take the keyboard',
+      icon: expandOnFocus ? CheckSquare : Square,
+      onClick: () => setExpandOnFocus(current => !current),
+    },
+    {
+      id: 'send-escape',
+      label: 'Send Escape',
+      description: sendEscape
+        ? 'Escape reaches the agent, as in its own terminal'
+        : 'Escape leaves typing mode and gives the keyboard back',
+      icon: sendEscape ? CheckSquare : Square,
+      onClick: () => setSendEscape(current => !current),
+    },
+    {
+      id: 'all-live',
+      label: 'All live',
+      description: canLiveAll
+        ? 'Render every agent as a live terminal instead of on hover'
+        : `Only available with ${MAX_LIVE_ALL_TILES} agents or fewer`,
+      icon: liveAllActive ? CheckSquare : Square,
+      disabled: !canLiveAll,
+      onClick: () => setLiveAll(current => !current),
+    },
+  ], [expandOnFocus, sendEscape, liveAllActive, canLiveAll]);
+
+  // --- Closing a pane ---
+
+  const handleConfirmClose = useCallback(async () => {
+    const tile = pendingClose;
+    if (!tile) return;
+
+    setClosing(true);
+    try {
+      await panelApi.deletePanel(tile.panelId);
+      if (focusedPanelId === tile.panelId) handleCloseFocus();
+      setLiveTileId(current => (current === tile.panelId ? null : current));
+      setSelectedPanelId(current => (current === tile.panelId ? null : current));
+      setPendingClose(null);
+      await loadAgents();
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to close the pane');
+      setPendingClose(null);
+    } finally {
+      setClosing(false);
+    }
+  }, [pendingClose, focusedPanelId, handleCloseFocus, loadAgents]);
+
+  return (
+    <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden bg-bg-primary">
+      <header className="flex flex-shrink-0 flex-wrap items-center gap-3 border-b border-border-primary bg-surface-secondary px-4 py-2">
+        <div className="flex items-center gap-2">
+          <LayoutGrid className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          <h1 className="text-sm font-medium text-text-primary">Agent fleet</h1>
+          <span className="text-[11px] text-text-tertiary">
+            {tiles.length} {tiles.length === 1 ? 'agent' : 'agents'}
+          </span>
+
+          {/*
+            At-a-glance roll-up, and the fastest way to act on it: the blocked
+            count is the button that takes you to the next waiting agent.
+          */}
+          {statusSummary.blocked > 0 && (
+            <button
+              type="button"
+              onClick={jumpToNextBlocked}
+              title="Go to the next agent waiting for you (N)"
+              className="flex items-center gap-1 rounded-full bg-status-error/15 px-2 py-px text-[10px] font-medium text-status-error transition-colors hover:bg-status-error/25 focus:outline-none focus-visible:ring-1 focus-visible:ring-status-error"
+            >
+              <AgentStatusDot status="blocked" size="sm" />
+              {statusSummary.blocked} need input
+              <ArrowRight className="h-2.5 w-2.5" aria-hidden="true" />
+            </button>
+          )}
+          {statusSummary.working > 0 && (
+            <span className="flex items-center gap-1 rounded-full bg-interactive/15 px-2 py-px text-[10px] font-medium text-interactive">
+              <AgentStatusDot status="working" size="sm" />
+              {statusSummary.working} working
+            </span>
+          )}
+        </div>
+
+        <div className="ml-auto flex flex-wrap items-center gap-4">
+          <fieldset className="flex items-center gap-1">
+            <legend className="sr-only">Group agents by</legend>
+            <span className="text-[10px] uppercase tracking-wider text-text-muted">Group</span>
+            {GROUPING_OPTIONS.map(option => (
+              <button
+                key={option.value}
+                type="button"
+                aria-pressed={grouping === option.value}
+                onClick={() => setGrouping(option.value)}
+                className={`rounded px-2 py-0.5 text-[11px] transition-colors ${
+                  grouping === option.value
+                    ? 'bg-interactive text-text-on-interactive'
+                    : 'text-text-secondary hover:bg-surface-hover'
+                }`}
+              >
+                {option.label}
+              </button>
+            ))}
+          </fieldset>
+
+          <fieldset className="flex items-center gap-1">
+            <legend className="sr-only">Tiles per row</legend>
+            <span className="text-[10px] uppercase tracking-wider text-text-muted">Columns</span>
+            {DENSITY_OPTIONS.map(option => (
+              <button
+                key={option}
+                type="button"
+                aria-pressed={density === option}
+                aria-label={`${option} tiles per row`}
+                onClick={() => setDensity(option)}
+                className={`rounded px-2 py-0.5 text-[11px] transition-colors ${
+                  density === option
+                    ? 'bg-interactive text-text-on-interactive'
+                    : 'text-text-secondary hover:bg-surface-hover'
+                }`}
+              >
+                {option}×
+              </button>
+            ))}
+          </fieldset>
+
+          {/*
+            Group and Columns are changed constantly and stay on the bar; these
+            three are set once and would otherwise crowd it out.
+          */}
+          <Dropdown
+            position="bottom-right"
+            width="lg"
+            closeOnSelect={false}
+            items={viewOptionItems}
+            trigger={
+              <button
+                type="button"
+                aria-label="View options"
+                title="View options"
+                className="rounded p-1 transition-colors hover:bg-surface-hover"
+              >
+                <Settings2 className="h-3.5 w-3.5 text-text-tertiary" aria-hidden="true" />
+              </button>
+            }
+          />
+
+          <button
+            type="button"
+            onClick={() => { void loadAgents(); }}
+            aria-label="Refresh agent list"
+            className="rounded p-1 transition-colors hover:bg-surface-hover"
+          >
+            <RefreshCw className="h-3.5 w-3.5 text-text-tertiary" aria-hidden="true" />
+          </button>
+        </div>
+      </header>
+
+      <div className="min-h-0 flex-1 overflow-auto p-3">
+        {loading ? (
+          <div className="flex items-center justify-center gap-2 py-10 text-xs text-text-tertiary">
+            <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+            Finding agents…
+          </div>
+        ) : error ? (
+          <div className="rounded border border-status-error/30 bg-status-error/10 p-4 text-sm text-status-error">
+            {error}
+          </div>
+        ) : tiles.length === 0 ? (
+          <div className="flex h-full items-center justify-center px-6 text-center text-sm text-text-secondary">
+            No agent panes yet. Start Claude or Codex in a session and it will appear here.
+          </div>
+        ) : (
+          displayedGroups.map(group => {
+            // Grouping "none" is one unlabelled bucket: no header, nothing to
+            // fold it into.
+            const isCollapsible = grouping !== 'none';
+            const isCollapsed = isCollapsible && collapsedGroups.has(group.key);
+            const blockedInGroup = group.tiles.filter(tile => tile.agentState === 'blocked').length;
+            const workingInGroup = group.tiles.filter(tile => tile.agentState === 'working').length;
+
+            return (
+              <section key={group.key} className="mb-5 last:mb-0">
+                {isCollapsible && (
+                  <h2 className="mb-2 flex items-center gap-2 text-[11px] font-medium uppercase tracking-wider text-text-tertiary">
+                    <button
+                      type="button"
+                      onClick={() => handleToggleGroup(group.key)}
+                      aria-expanded={!isCollapsed}
+                      title={isCollapsed ? `Show ${group.label}` : `Hide ${group.label}`}
+                      className="flex min-w-0 items-center gap-1.5 rounded px-1 py-0.5 transition-colors hover:bg-surface-hover hover:text-text-secondary focus:outline-none focus-visible:ring-1 focus-visible:ring-interactive"
+                    >
+                      {isCollapsed
+                        ? <ChevronRight className="h-3 w-3 flex-shrink-0" aria-hidden="true" />
+                        : <ChevronDown className="h-3 w-3 flex-shrink-0" aria-hidden="true" />}
+                      <span className="truncate">{group.label}</span>
+                      <span className="rounded-full bg-surface-tertiary px-1.5 text-[10px] tabular-nums text-text-muted">
+                        {group.tiles.length}
+                      </span>
+                    </button>
+                    {/*
+                      Counts rather than a bare total, so a folded group says
+                      exactly as much as an open one.
+                    */}
+                    {blockedInGroup > 0 && (
+                      <span className="flex items-center gap-1 rounded-full bg-status-error/15 px-2 py-px text-[10px] normal-case tracking-normal text-status-error">
+                        <AgentStatusDot status="blocked" size="sm" />
+                        {blockedInGroup} waiting
+                      </span>
+                    )}
+                    {workingInGroup > 0 && (
+                      <span className="flex items-center gap-1 rounded-full bg-interactive/15 px-2 py-px text-[10px] normal-case tracking-normal text-interactive">
+                        <AgentStatusDot status="working" size="sm" />
+                        {workingInGroup} working
+                      </span>
+                    )}
+                    <span className="h-px flex-1 bg-border-primary" aria-hidden="true" />
+                  </h2>
+                )}
+                {!isCollapsed && (
+                  <div
+                    className="grid items-start gap-2.5"
+                    style={{ gridTemplateColumns: `repeat(${density}, minmax(0, 1fr))` }}
+                  >
+                    {group.tiles.map(tile => (
+                      <FleetTile
+                        key={tile.panelId}
+                        tile={tile}
+                        // The focused tile stays live no matter where the pointer
+                        // goes: hovering a neighbour used to demote it back to a
+                        // snapshot mid-typing, taking the keyboard with it.
+                        isLiveView={liveAllActive || liveTileId === tile.panelId || focusedPanelId === tile.panelId}
+                        onHoverStart={handleHoverStart}
+                        onHoverEnd={handleHoverEnd}
+                        onOpen={(target) => { void handleOpen(target); }}
+                        snapshotLines={snapshotLines}
+                        isFocused={focusedPanelId === tile.panelId}
+                        expandWhenFocused={expandOnFocus}
+                        sendEscape={sendEscape}
+                        isSelected={selectedPanelId === tile.panelId}
+                        registerElement={registerTileElement}
+                        onFocusAgent={handleFocusAgent}
+                        onCollapse={handleCloseFocus}
+                        onClose={setPendingClose}
+                      />
+                    ))}
+                  </div>
+                )}
+              </section>
+            );
+          })
+        )}
+
+        {agents.length > MAX_FLEET_SNAPSHOT_PANELS && (
+          <p className="pt-2 text-[11px] text-text-muted">
+            Live previews are limited to the first {MAX_FLEET_SNAPSHOT_PANELS} agents.
+          </p>
+        )}
+      </div>
+
+      {/*
+        Closing kills the agent's process and drops its scrollback, and a stray
+        click on a small icon must not be able to do that silently.
+      */}
+      <Modal
+        isOpen={pendingClose !== null}
+        onClose={() => setPendingClose(null)}
+        size="sm"
+        ariaLabel="Close pane"
+        showCloseButton={false}
+      >
+        <ModalHeader
+          title="Close this pane?"
+          description={pendingClose ? describeFleetTile(pendingClose) : undefined}
+        />
+        <ModalBody>
+          <p className="text-sm text-text-secondary">
+            The agent process is stopped and this pane’s terminal history is deleted.
+            The session and its worktree stay untouched.
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="ghost" size="sm" onClick={() => setPendingClose(null)} disabled={closing}>
+            Cancel
+          </Button>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={() => { void handleConfirmClose(); }}
+            disabled={closing}
+          >
+            {closing ? 'Closing…' : 'Close pane'}
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </div>
+  );
+}
+
+export default FleetView;
diff --git a/frontend/src/hooks/useFleetTerminal.ts b/frontend/src/hooks/useFleetTerminal.ts
new file mode 100644
index 00000000..7ab9662b
--- /dev/null
+++ b/frontend/src/hooks/useFleetTerminal.ts
@@ -0,0 +1,529 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Terminal, type IDisposable } from '@xterm/xterm';
+import { getTerminalTheme } from '../utils/terminalTheme';
+import type { TerminalPanelState } from '../../../shared/types/panels';
+
+/**
+ * Read-only xterm for a fleet tile.
+ *
+ * A tile is roughly a fifth of the width the real terminal panel gets, so the
+ * whole job is fitting a wide PTY into a small box without lying about it.
+ * Three rules, each learned the hard way:
+ *
+ * 1. **Render exactly the PTY's columns — never fewer, never more.** Agent TUIs
+ *    paint with absolute cursor positioning sized to the real PTY. A narrower
+ *    viewer wraps every line and each repaint pushes the viewport down, so the
+ *    console scrolls forever. A *wider* one is just as wrong in the other
+ *    direction: lines that wrapped in the PTY arrive unwrapped, every later
+ *    partial redraw lands a row off, and the tile fills with text painted over
+ *    text. Matching exactly is the only correct width; what does not fit the
+ *    tile is clipped, and `clippedRight` says so.
+ * 2. **Height depends on which buffer the agent uses.** On the alternate
+ *    screen the frame *is* the PTY's height and its bottom rows carry the
+ *    prompt, so the terminal must be that tall and anchored to the bottom. In
+ *    the normal buffer output simply scrolls, the tail is what matters, and a
+ *    full-height grid would leave the visible bottom rows blank — which is
+ *    exactly why Codex tiles rendered empty.
+ * 3. **Fit by font size, not by scaling.** `transform: scale()` on a 120-column
+ *    terminal in a 400px tile yields a ~4px glyph. Choosing a font size so the
+ *    PTY's columns fit — clamped to a readable floor — shows far more and stays
+ *    legible.
+ * 4. **A tile must never answer the agent's terminal queries.** It is a second
+ *    view of a PTY the real panel already answers for; see
+ *    `suppressTerminalReplies`.
+ *
+ * Also unlike `TerminalPanel`: no `WebglAddon` (instances sharing a font+theme
+ * share a texture atlas, and Chromium caps live GL contexts at ~16), no
+ * `FitAddon`, `disableStdin`, and a `fleet:`-prefixed viewer id so the
+ * visibility refcount in `terminalPanelManager` stays correct.
+ */
+
+const VISIBILITY_REFRESH_MS = 60_000;
+/** Tiles show recent context only; a deep buffer would cost memory per tile. */
+const TILE_SCROLLBACK = 600;
+const LINE_HEIGHT = 1.2;
+/**
+ * Nerd Font last, as in the real panel: agent TUIs draw their frames and icons
+ * from that range, and without it those cells render as replacement boxes.
+ */
+const FONT_FAMILY = 'Menlo, Monaco, Consolas, "Liberation Mono", "Symbols Nerd Font Mono", monospace';
+/** Legibility floor and a ceiling that keeps tiles from looking oversized. */
+const MIN_FONT_SIZE = 9;
+const MAX_FONT_SIZE = 13;
+/** The focus view has room to breathe, so it may go a little larger. */
+const MAX_FOCUS_FONT_SIZE = 16;
+/** Fallbacks when a panel has no live PTY to report dimensions. */
+const DEFAULT_COLS = 80;
+const DEFAULT_ROWS = 24;
+const MAX_VIEWER_COLS = 400;
+const MIN_VIEWER_ROWS = 4;
+/** Ignore sub-column jitter so a resize doesn't rebuild the terminal. */
+const COLUMN_CHANGE_THRESHOLD = 2;
+const RESIZE_DEBOUNCE_MS = 200;
+
+const VIEWER_ID = getFleetViewerId();
+
+interface TerminalOutputPayload {
+  panelId?: string;
+  output?: string;
+}
+
+function getFleetViewerId(): string {
+  const storageKey = 'pane.fleet.terminalViewerId';
+  const existing = window.sessionStorage.getItem(storageKey);
+  if (existing) return existing;
+
+  const id = `fleet:${window.crypto?.randomUUID?.() ?? Date.now().toString(36)}`;
+  window.sessionStorage.setItem(storageKey, id);
+  return id;
+}
+
+function byteLength(value: string): number {
+  return new TextEncoder().encode(value).byteLength;
+}
+
+/**
+ * Width of a character cell relative to the font size, measured once offscreen.
+ *
+ * Geometry has to be known *before* the terminal is constructed: calling
+ * `terminal.resize()` after content has been written discards the
+ * alternate-screen buffer, which is where full-screen agent TUIs live — the
+ * tile then renders blank.
+ */
+let cachedCharRatio: number | null = null;
+
+function charWidthRatio(): number {
+  if (cachedCharRatio !== null) return cachedCharRatio;
+
+  const reference = 20;
+  const probe = document.createElement('span');
+  probe.style.cssText = `position:absolute;visibility:hidden;white-space:pre;font-family:${FONT_FAMILY};font-size:${reference}px;`;
+  probe.textContent = 'M'.repeat(100);
+  document.body.appendChild(probe);
+  const width = probe.getBoundingClientRect().width / 100;
+  probe.remove();
+
+  cachedCharRatio = width > 0 ? width / reference : 0.6;
+  return cachedCharRatio;
+}
+
+interface ViewerGeometry {
+  fontSize: number;
+  cols: number;
+  rows: number;
+}
+
+/** DEC private mode for focus in/out reporting. */
+const FOCUS_REPORTING_MODE = 1004;
+
+/**
+ * Keep the viewer from talking back to the agent.
+ *
+ * A tile is a *second* view of a PTY that already has one. Terminal queries —
+ * cursor position (`CSI 6 n`), device attributes (`CSI c`), version, window
+ * size — are answered by xterm through the very same `onData` stream that
+ * carries keystrokes, so an interactive tile would inject answers to questions
+ * the agent asked the *real* terminal. Codex places its inline viewport from
+ * the cursor-position report: a second, differently-positioned answer moves its
+ * idea of where the screen starts, and every redraw after that — including the
+ * highlighted row of an approval prompt — lands on the wrong lines. That is why
+ * a Codex pane looked frozen in the fleet while a Claude pane, which asks
+ * nothing, took input fine.
+ *
+ * Swallowing the queries (returning `true` marks them handled, so xterm's
+ * built-in reply never runs) leaves the real panel as the single voice on the
+ * PTY. Focus reporting goes the same way: a tile gaining focus is not the
+ * agent's terminal gaining focus.
+ */
+function suppressTerminalReplies(terminal: Terminal): IDisposable[] {
+  const swallow = () => true;
+  const swallowFocusReporting = (params: (number | number[])[]) =>
+    params.length === 1 && params[0] === FOCUS_REPORTING_MODE;
+
+  return [
+    terminal.parser.registerCsiHandler({ final: 'n' }, swallow),                     // DSR
+    terminal.parser.registerCsiHandler({ prefix: '?', final: 'n' }, swallow),        // DECDSR
+    terminal.parser.registerCsiHandler({ final: 'c' }, swallow),                     // DA1
+    terminal.parser.registerCsiHandler({ prefix: '>', final: 'c' }, swallow),        // DA2
+    terminal.parser.registerCsiHandler({ prefix: '=', final: 'c' }, swallow),        // DA3
+    terminal.parser.registerCsiHandler({ prefix: '>', final: 'q' }, swallow),        // XTVERSION
+    terminal.parser.registerCsiHandler({ final: 't' }, swallow),                     // window reports
+    terminal.parser.registerCsiHandler({ prefix: '?', intermediates: '$', final: 'p' }, swallow), // DECRQM
+    terminal.parser.registerCsiHandler({ prefix: '?', final: 'h' }, swallowFocusReporting),
+    terminal.parser.registerCsiHandler({ prefix: '?', final: 'l' }, swallowFocusReporting),
+  ];
+}
+
+/**
+ * Park the viewport on the last line that actually has content.
+ *
+ * `scrollToBottom()` lands on the true end of the buffer, which for an agent
+ * waiting on a decision is a run of blank rows below its prompt — the tile
+ * then looks like it scrolled the important part away. Finding the last
+ * non-empty row and putting it at the bottom keeps the question on screen.
+ */
+function scrollToLastContent(terminal: Terminal): void {
+  const buffer = terminal.buffer.active;
+  let lastContentLine = -1;
+
+  for (let i = buffer.length - 1; i >= 0; i--) {
+    const text = buffer.getLine(i)?.translateToString(true) ?? '';
+    if (text.trim().length > 0) {
+      lastContentLine = i;
+      break;
+    }
+  }
+
+  if (lastContentLine < 0) {
+    terminal.scrollToBottom();
+    return;
+  }
+
+  // Put that line on the last visible row.
+  terminal.scrollToLine(Math.max(0, lastContentLine - terminal.rows + 1));
+}
+
+/**
+ * Grid rows below the agent's last line of content.
+ *
+ * An agent's screen is usually taller than what it has drawn: Claude paints its
+ * question near the top of the PTY and leaves the rest of the rows empty.
+ * Scrolling cannot remove them — they are inside the viewport, not above it —
+ * so a tile that simply shows the bottom of the grid shows blank space, and the
+ * options the user is supposed to choose between are clipped off the top. The
+ * count returned here is how far the terminal must be pushed down (and out of
+ * the tile) for its content to end where the tile ends.
+ *
+ * The cursor row always counts as content: an empty prompt line the user is
+ * typing into must never be the thing that gets pushed out of sight.
+ */
+function trailingBlankRows(terminal: Terminal): number {
+  const buffer = terminal.buffer.active;
+  const bottom = buffer.viewportY + terminal.rows - 1;
+  const cursorRow = buffer.viewportY + buffer.cursorY;
+
+  for (let row = bottom; row > buffer.viewportY; row--) {
+    if (row <= cursorRow) return Math.max(0, bottom - cursorRow);
+    const text = buffer.getLine(row)?.translateToString(true) ?? '';
+    if (text.trim().length > 0) return bottom - row;
+  }
+
+  return 0;
+}
+
+/** Rendered height of one row, measured rather than recomputed from the font. */
+function measuredRowHeight(container: HTMLElement, terminal: Terminal): number {
+  const screen = container.querySelector('.xterm-screen') as HTMLElement | null;
+  if (screen && terminal.rows > 0 && screen.clientHeight > 0) {
+    return screen.clientHeight / terminal.rows;
+  }
+  return terminal.options.fontSize ? terminal.options.fontSize * LINE_HEIGHT : 0;
+}
+
+export interface UseFleetTerminalOptions {
+  panelId: string | null;
+  /** Live PTY dimensions — the reference the agent's output was drawn for. */
+  cols: number | null;
+  rows: number | null;
+  /** True when the agent is painting a full-screen TUI. */
+  isAlternateScreen: boolean;
+  /**
+   * Accept keystrokes and forward them to the real PTY. Enabled only for the
+   * tile the user has explicitly focused — typing into the wrong agent is not
+   * a recoverable mistake.
+   */
+  interactive?: boolean;
+  /**
+   * Reproduce the PTY's grid exactly — same columns *and* rows — and shrink the
+   * font until the whole thing fits the box.
+   *
+   * For the expanded focus view, where the point is to see the agent's entire
+   * screen at once. A tile that stays preview-sized instead keeps the preview's
+   * font and simply clips, which is what makes typing in place look like
+   * nothing changed.
+   */
+  matchPtyExactly?: boolean;
+  /**
+   * Forward Escape to the agent instead of treating it as "I am done typing
+   * here". Off by default: leaving a tile is the far more common intent, and an
+   * Escape that cannot be taken back is a bad default in a grid of agents.
+   */
+  sendEscape?: boolean;
+  /** Called when Escape is used to leave typing mode. */
+  onEscapeExit?: () => void;
+}
+
+export function useFleetTerminal({
+  panelId,
+  cols,
+  rows,
+  isAlternateScreen,
+  interactive = false,
+  matchPtyExactly = false,
+  sendEscape = false,
+  onEscapeExit,
+}: UseFleetTerminalOptions) {
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const terminalRef = useRef<Terminal | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  // Read inside the persistent onData handler so toggling interactivity does
+  // not tear the terminal down.
+  const interactiveRef = useRef(interactive);
+  interactiveRef.current = interactive;
+  const sendEscapeRef = useRef(sendEscape);
+  sendEscapeRef.current = sendEscape;
+  const escapeExitRef = useRef(onEscapeExit);
+  escapeExitRef.current = onEscapeExit;
+
+  /**
+   * Pixels the terminal is pushed below the tile so its content ends where the
+   * tile does. See `trailingBlankRows`.
+   */
+  const [bottomOverflow, setBottomOverflow] = useState(0);
+  /** True when the PTY is wider than the tile, so text is cut off on the right. */
+  const [clippedRight, setClippedRight] = useState(false);
+
+  // Dimensions are sticky: a poll that momentarily reports null (panel between
+  // states) must not tear the terminal down and rebuild it at a default size.
+  const lastDimsRef = useRef({ cols: DEFAULT_COLS, rows: DEFAULT_ROWS });
+  if (cols && cols > 0 && rows && rows > 0) {
+    lastDimsRef.current = { cols, rows };
+  }
+  const ptyCols = lastDimsRef.current.cols;
+  const ptyRows = lastDimsRef.current.rows;
+
+  const [geometry, setGeometry] = useState<ViewerGeometry>({
+    fontSize: MAX_FONT_SIZE,
+    cols: ptyCols,
+    rows: ptyRows,
+  });
+
+  const measure = useCallback((width: number, height: number): ViewerGeometry => {
+    const ratio = charWidthRatio();
+
+    if (matchPtyExactly) {
+      // Fit the whole grid — both axes — and let the font shrink to suit.
+      const byWidth = width / Math.max(ptyCols, 1) / ratio;
+      const byHeight = height / Math.max(ptyRows, 1) / LINE_HEIGHT;
+      const fontSize = Math.max(
+        Math.min(Math.floor(Math.min(byWidth, byHeight)), MAX_FOCUS_FONT_SIZE),
+        MIN_FONT_SIZE
+      );
+      return { fontSize, cols: ptyCols, rows: ptyRows };
+    }
+
+    // Largest font at which the PTY's full width still fits the tile, held
+    // between a legible floor and a sane ceiling.
+    const ideal = width / Math.max(ptyCols, 1) / ratio;
+    const fontSize = Math.round(Math.min(Math.max(ideal, MIN_FONT_SIZE), MAX_FONT_SIZE));
+
+    const rowHeight = fontSize * LINE_HEIGHT;
+    const fittingRows = Math.max(Math.floor(height / rowHeight), MIN_VIEWER_ROWS);
+
+    return {
+      fontSize,
+      // The PTY's width, exactly — see rule 1.
+      cols: Math.min(ptyCols, MAX_VIEWER_COLS),
+      // Full-screen frames need the PTY's height, and so does anything the user
+      // can type into: a TUI redrawing its selection list against more rows
+      // than the viewer has scatters those redraws. Only a scrolling agent
+      // nobody is typing to can settle for the rows the tile shows — and since
+      // the terminal is bottom-anchored, a taller grid still displays the same
+      // trailing lines.
+      rows: isAlternateScreen || interactive ? ptyRows : fittingRows,
+    };
+  }, [ptyCols, ptyRows, isAlternateScreen, interactive, matchPtyExactly]);
+
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+
+    const sync = () => {
+      const next = measure(wrapper.clientWidth, wrapper.clientHeight);
+      setGeometry(current => (
+        next.fontSize !== current.fontSize
+        || Math.abs(next.cols - current.cols) >= COLUMN_CHANGE_THRESHOLD
+        || Math.abs(next.rows - current.rows) >= 1
+          ? next
+          : current
+      ));
+    };
+    sync();
+
+    let debounce: number | undefined;
+    const observer = new ResizeObserver(() => {
+      window.clearTimeout(debounce);
+      debounce = window.setTimeout(sync, RESIZE_DEBOUNCE_MS);
+    });
+    observer.observe(wrapper);
+
+    return () => {
+      window.clearTimeout(debounce);
+      observer.disconnect();
+    };
+  }, [measure]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!panelId || !container) return;
+
+    // Geometry changes rebuild the terminal, and a rebuild that ignored the
+    // current interactivity would hand the user a fresh, mute terminal: the
+    // effect below only fires when `interactive` *changes*, which it does not
+    // during a rebuild. That is what made a focused tile stop accepting input
+    // the moment its tile resized.
+    const startsInteractive = interactiveRef.current;
+
+    const terminal = new Terminal({
+      allowProposedApi: true,
+      // No `convertEol`: a tile replays and then follows the same byte stream
+      // the real panel does, and rewriting bare LFs as CRLF shifts every line a
+      // TUI paints without one.
+      cursorBlink: startsInteractive,
+      disableStdin: !startsInteractive,
+      scrollOnUserInput: true,
+      // Sized correctly up front — never resized once content exists.
+      cols: geometry.cols,
+      rows: geometry.rows,
+      fontSize: geometry.fontSize,
+      lineHeight: LINE_HEIGHT,
+      fontFamily: FONT_FAMILY,
+      scrollback: TILE_SCROLLBACK,
+      // Agent TUIs paint their own backgrounds assuming a dark terminal. In a
+      // light theme that lands as dark-on-dark; this floor keeps it legible.
+      minimumContrastRatio: 4.5,
+      // The app's real terminal palette. A transparent background leaves cells
+      // the TUI never paints showing the tile's surface colour instead of the
+      // terminal's, which reads as a broken, patchy background.
+      theme: getTerminalTheme(),
+    });
+
+    terminal.open(container);
+    terminalRef.current = terminal;
+    const replySuppressors = suppressTerminalReplies(terminal);
+    if (startsInteractive) terminal.focus();
+
+    // Escape leaves typing mode by default; the agent only receives it when the
+    // user has explicitly asked for that. Handled here rather than on `onData`
+    // so xterm never writes the sequence in the first place.
+    terminal.attachCustomKeyEventHandler(event => {
+      if (event.key !== 'Escape' || !interactiveRef.current || sendEscapeRef.current) return true;
+      if (event.type === 'keydown') escapeExitRef.current?.();
+      return false;
+    });
+
+    let disposed = false;
+    /** True while the user is reading further up; suppresses auto-scroll. */
+    let pinnedByUser = false;
+
+    const syncOverflow = () => {
+      if (disposed) return;
+      const rowHeight = measuredRowHeight(container, terminal);
+      const overflow = Math.round(trailingBlankRows(terminal) * rowHeight);
+      setBottomOverflow(current => (current === overflow ? current : overflow));
+
+      const screen = container.querySelector('.xterm-screen') as HTMLElement | null;
+      const available = wrapperRef.current?.clientWidth ?? 0;
+      const clipped = Boolean(screen && available > 0 && screen.clientWidth > available + 1);
+      setClippedRight(current => (current === clipped ? current : clipped));
+    };
+
+    const scrollDisposable = terminal.onScroll(() => {
+      const buffer = terminal.buffer.active;
+      const atBottom = buffer.viewportY >= buffer.baseY - 1;
+      pinnedByUser = !atBottom;
+    });
+
+    // Keystrokes reach the real PTY only for the focused tile.
+    const inputDisposable = terminal.onData(data => {
+      if (!interactiveRef.current) return;
+      void window.electronAPI.invoke('terminal:input', panelId, data).catch(() => {});
+    });
+
+    const unsubscribe = window.electronAPI.events.onTerminalOutput((payload: unknown) => {
+      const data = payload as TerminalOutputPayload | undefined;
+      if (!data || data.panelId !== panelId || typeof data.output !== 'string') return;
+      terminal.write(data.output, () => {
+        if (disposed) return;
+        // Follow new output, but never yank the view away from someone who
+        // scrolled up to read.
+        if (!pinnedByUser) scrollToLastContent(terminal);
+        syncOverflow();
+      });
+      // Flow control is byte-counted per panel; a viewer that writes must ack.
+      void window.electronAPI.invoke('terminal:ack', panelId, byteLength(data.output)).catch(() => {});
+    });
+
+    // Main only treats a panel as visible while a viewer says so, and viewer
+    // entries go stale after a few minutes without a heartbeat.
+    const visibilityTimer = window.setInterval(() => {
+      void window.electronAPI.invoke('terminal:setVisibility', panelId, true, VIEWER_ID).catch(() => {});
+    }, VISIBILITY_REFRESH_MS);
+
+    const hydrate = async () => {
+      try {
+        const state = await window.electronAPI.invoke('terminal:getState', panelId) as TerminalPanelState | null;
+        if (disposed) return;
+        const restore = state?.serializedBuffer
+          ?? (typeof state?.scrollbackBuffer === 'string' ? state.scrollbackBuffer : '');
+        if (restore) {
+          terminal.write(restore, () => {
+            if (disposed) return;
+            scrollToLastContent(terminal);
+            syncOverflow();
+          });
+        }
+        await window.electronAPI.invoke('terminal:setVisibility', panelId, true, VIEWER_ID);
+        if (disposed) return;
+        setError(null);
+        // Hydration writes into the DOM the user just clicked; take the
+        // keyboard back afterwards so the first keystroke lands on the agent.
+        if (interactiveRef.current) terminal.focus();
+      } catch (err: unknown) {
+        if (!disposed) setError(err instanceof Error ? err.message : 'Could not attach to terminal');
+      }
+    };
+
+    void hydrate();
+
+    return () => {
+      disposed = true;
+      window.clearInterval(visibilityTimer);
+      unsubscribe();
+      inputDisposable.dispose();
+      scrollDisposable.dispose();
+      for (const suppressor of replySuppressors) suppressor.dispose();
+      void window.electronAPI.invoke('terminal:setVisibility', panelId, false, VIEWER_ID).catch(() => {});
+      // Never call clearTextureAtlas() here — it would poison other terminals.
+      terminal.dispose();
+      terminalRef.current = null;
+    };
+    // Geometry changes rebuild and re-hydrate rather than resizing a live
+    // terminal — see the note on charWidthRatio.
+  }, [panelId, geometry]);
+
+  // Toggling interactivity flips an option rather than rebuilding, so focusing
+  // a tile never costs a re-hydrate.
+  useEffect(() => {
+    const terminal = terminalRef.current;
+    if (!terminal) return;
+    terminal.options.disableStdin = !interactive;
+    terminal.options.cursorBlink = interactive;
+    if (interactive) terminal.focus();
+  }, [interactive]);
+
+  /**
+   * Hand the keyboard to this terminal.
+   *
+   * Clicks that land on the tile's padding — or on the chrome around the
+   * terminal — otherwise leave focus on whatever the user clicked last, and the
+   * keystrokes go nowhere.
+   */
+  const focusTerminal = useCallback(() => {
+    if (!interactiveRef.current) return;
+    terminalRef.current?.focus();
+  }, []);
+
+  return { wrapperRef, containerRef, error, focusTerminal, bottomOverflow, clippedRight };
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 328a51a8..e9022328 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -513,6 +513,18 @@ body.light-rounded {
   background-color: transparent !important;
 }
 
+/* Fleet tiles are read-only previews: no scrollbar, no text cursor, no
+   selection affordance — all of which read as chrome bugs at tile size. */
+.pane-fleet-surface .xterm .xterm-scrollable-element > .scrollbar {
+  display: none !important;
+}
+.pane-fleet-surface .xterm-viewport {
+  overflow: hidden !important;
+}
+.pane-fleet-surface .xterm {
+  cursor: default !important;
+}
+
 /* xterm v6 custom scrollbar — thin, matches app scrollbars */
 .xterm .xterm-scrollable-element > .scrollbar {
   width: 3px !important;
diff --git a/frontend/src/stores/navigationStore.ts b/frontend/src/stores/navigationStore.ts
index 9a26e153..2f30bdf0 100644
--- a/frontend/src/stores/navigationStore.ts
+++ b/frontend/src/stores/navigationStore.ts
@@ -10,8 +10,15 @@ let hasRegisteredInitialProjectIds = false;
 const toProjectIdArray = (projectIds: Set<number>): number[] =>
   Array.from(projectIds).sort((a, b) => a - b);
 
+/**
+ * Pane has no router — this enum is the whole navigation model. Adding a value
+ * here also requires a branch in `SessionView` and an entry in *both* sidebar
+ * components (`Sidebar` compact rail and `ProjectSessionList` expanded tree).
+ */
+export type ActiveView = 'sessions' | 'project' | 'pane-chat' | 'fleet';
+
 interface NavigationState {
-  activeView: 'sessions' | 'project' | 'pane-chat';
+  activeView: ActiveView;
   activeProjectId: number | null;
 
   // Sidebar collapse
@@ -37,11 +44,12 @@ interface NavigationState {
   setSidebarNavigationScope: (scope: SidebarNavigationScope) => void;
 
   // Actions
-  setActiveView: (view: 'sessions' | 'project' | 'pane-chat') => void;
+  setActiveView: (view: ActiveView) => void;
   setActiveProjectId: (projectId: number | null) => void;
   navigateToProject: (projectId: number) => void;
   navigateToSessions: () => void;
   navigateToPaneChat: () => void;
+  navigateToFleet: () => void;
 }
 
 export const useNavigationStore = create<NavigationState>((set, get) => ({
@@ -118,4 +126,10 @@ export const useNavigationStore = create<NavigationState>((set, get) => ({
     activeView: 'pane-chat',
     activeProjectId: null
   }),
+
+  // The fleet grid spans every project, so it clears the project scope.
+  navigateToFleet: () => set({
+    activeView: 'fleet',
+    activeProjectId: null
+  }),
 }));
diff --git a/frontend/src/types/electron.d.ts b/frontend/src/types/electron.d.ts
index 52281e2a..e12ce487 100644
--- a/frontend/src/types/electron.d.ts
+++ b/frontend/src/types/electron.d.ts
@@ -27,6 +27,7 @@ import type {
 import type { ToolPanel } from '../../../shared/types/panels';
 import type { PanelAgentStatusEvent } from '../../../shared/types/agentStatus';
 import type { PaneChatAgent, PaneChatState } from '../../../shared/types/paneChat';
+import type { FleetAgentPanel, FleetSnapshotRequest, FleetSnapshotResult } from '../../../shared/types/fleet';
 import type { CreateSessionRequest } from './session';
 import type { DetectedProjectConfig } from '../../../shared/types/projectConfig';
 import type { CloudVmState } from '../../../shared/types/cloud';
@@ -93,6 +94,12 @@ interface ElectronAPI {
     setAgent: (agent: PaneChatAgent) => Promise<IPCResponse<PaneChatState<Session>>>;
   };
 
+  // Fleet grid — every agent pane across all sessions
+  fleet: {
+    listAgents: (options?: { includeArchived?: boolean }) => Promise<IPCResponse<FleetAgentPanel[]>>;
+    snapshots: (request: FleetSnapshotRequest) => Promise<IPCResponse<FleetSnapshotResult>>;
+  };
+
   // Session management
   sessions: {
     getAll: () => Promise<IPCResponse>;
diff --git a/frontend/src/utils/api.ts b/frontend/src/utils/api.ts
index 6da34626..da442f72 100644
--- a/frontend/src/utils/api.ts
+++ b/frontend/src/utils/api.ts
@@ -4,6 +4,7 @@ import type { Project } from '../types/project';
 import type { UpdateConfigRequest } from '../types/config';
 import type { SessionCreationPreferences } from '../stores/sessionPreferencesStore';
 import type { PaneChatAgent, PaneChatState } from '../../../shared/types/paneChat';
+import type { FleetSnapshotRequest } from '../../../shared/types/fleet';
 import type {
   RemoteDaemonClientRecord,
   RemoteDaemonConnectionPair,
@@ -69,6 +70,20 @@ export class API {
     },
   };
 
+  // Fleet grid
+  static fleet = {
+    /** Every agent pane across all sessions and projects. */
+    async listAgents(options?: { includeArchived?: boolean }) {
+      if (!isElectron()) throw new Error('Electron API not available');
+      return window.electronAPI.fleet.listAgents(options);
+    },
+    /** Batched plain-text screen snapshots for the visible tiles. */
+    async snapshots(request: FleetSnapshotRequest) {
+      if (!isElectron()) throw new Error('Electron API not available');
+      return window.electronAPI.fleet.snapshots(request);
+    },
+  };
+
   // Session management
   static sessions = {
     async getAll() {
diff --git a/frontend/src/utils/fleetGrouping.test.ts b/frontend/src/utils/fleetGrouping.test.ts
new file mode 100644
index 00000000..b69e0b8f
--- /dev/null
+++ b/frontend/src/utils/fleetGrouping.test.ts
@@ -0,0 +1,148 @@
+import { describe, it, expect } from 'vitest';
+import { groupFleetTiles, compareFleetTiles, describeFleetTile } from './fleetGrouping';
+import type { FleetTileModel } from '../../../shared/types/fleet';
+import type { AgentState } from '../../../shared/types/agentStatus';
+
+function tile(overrides: Partial<FleetTileModel> & { panelId: string }): FleetTileModel {
+  return {
+    sessionId: `session-${overrides.panelId}`,
+    sessionName: 'Session',
+    sessionArchived: false,
+    projectId: 1,
+    projectName: 'Alpha',
+    worktreePath: '/repo/alpha',
+    worktreeName: 'alpha',
+    panelTitle: 'Terminal',
+    agentType: 'claude',
+    isLive: true,
+    agentState: 'idle' as AgentState,
+    snapshot: null,
+    ...overrides,
+  };
+}
+
+describe('describeFleetTile', () => {
+  it('names each level when they differ', () => {
+    expect(describeFleetTile({
+      projectName: 'Super Forum',
+      sessionName: 'security',
+      panelTitle: 'Terminal',
+    })).toBe('Super Forum / security / Terminal');
+  });
+
+  it('says a repeated name once — Pane Chat is project, session and panel', () => {
+    expect(describeFleetTile({
+      projectName: 'Pane Chat',
+      sessionName: 'Pane Chat',
+      panelTitle: 'Pane Chat',
+    })).toBe('Pane Chat');
+  });
+
+  it('treats a difference in case as a repeat', () => {
+    expect(describeFleetTile({
+      projectName: 'Pane',
+      sessionName: 'pane',
+      panelTitle: 'Terminal',
+    })).toBe('Pane / Terminal');
+  });
+
+  it('skips empty parts rather than leaving stray separators', () => {
+    expect(describeFleetTile({
+      projectName: '',
+      sessionName: 'security',
+      panelTitle: '  ',
+    })).toBe('security');
+  });
+});
+
+describe('compareFleetTiles', () => {
+  it('puts blocked agents before working, and working before idle', () => {
+    const sorted = [
+      tile({ panelId: 'c', agentState: 'idle' }),
+      tile({ panelId: 'a', agentState: 'blocked' }),
+      tile({ panelId: 'd', agentState: 'unknown' }),
+      tile({ panelId: 'b', agentState: 'working' }),
+    ].sort(compareFleetTiles);
+
+    expect(sorted.map(t => t.panelId)).toEqual(['a', 'b', 'c', 'd']);
+  });
+
+  it('falls back to project then session name within the same state', () => {
+    const sorted = [
+      tile({ panelId: '2', projectName: 'Beta', sessionName: 'x' }),
+      tile({ panelId: '1', projectName: 'Alpha', sessionName: 'z' }),
+      tile({ panelId: '3', projectName: 'Alpha', sessionName: 'a' }),
+    ].sort(compareFleetTiles);
+
+    expect(sorted.map(t => t.panelId)).toEqual(['3', '1', '2']);
+  });
+});
+
+describe('groupFleetTiles', () => {
+  it('returns no groups for no tiles', () => {
+    expect(groupFleetTiles([], 'project')).toEqual([]);
+    expect(groupFleetTiles([], 'none')).toEqual([]);
+  });
+
+  it('puts everything in one bucket when grouping is disabled', () => {
+    const groups = groupFleetTiles([tile({ panelId: 'a' }), tile({ panelId: 'b' })], 'none');
+    expect(groups).toHaveLength(1);
+    expect(groups[0].tiles).toHaveLength(2);
+  });
+
+  it('groups by project and labels buckets with the project name', () => {
+    const groups = groupFleetTiles([
+      tile({ panelId: 'a', projectId: 1, projectName: 'Alpha' }),
+      tile({ panelId: 'b', projectId: 2, projectName: 'Beta' }),
+      tile({ panelId: 'c', projectId: 1, projectName: 'Alpha' }),
+    ], 'project');
+
+    expect(groups).toHaveLength(2);
+    const alpha = groups.find(g => g.label === 'Alpha');
+    expect(alpha?.tiles).toHaveLength(2);
+  });
+
+  it('keeps sessions without a project in their own bucket', () => {
+    const groups = groupFleetTiles([
+      tile({ panelId: 'a', projectId: null, projectName: 'Unknown project' }),
+    ], 'project');
+
+    expect(groups).toHaveLength(1);
+    expect(groups[0].key).toBe('no-project');
+  });
+
+  it('orders groups by their most urgent member', () => {
+    const groups = groupFleetTiles([
+      tile({ panelId: 'a', projectId: 1, projectName: 'Alpha', agentState: 'idle' }),
+      tile({ panelId: 'b', projectId: 2, projectName: 'Beta', agentState: 'blocked' }),
+    ], 'project');
+
+    expect(groups.map(g => g.label)).toEqual(['Beta', 'Alpha']);
+  });
+
+  it('groups by status with human-readable labels', () => {
+    const groups = groupFleetTiles([
+      tile({ panelId: 'a', agentState: 'blocked' }),
+      tile({ panelId: 'b', agentState: 'working' }),
+    ], 'status');
+
+    expect(groups.map(g => g.label)).toEqual(['Needs input', 'Working']);
+  });
+
+  it('groups by agent type and buckets unknown agents together', () => {
+    const groups = groupFleetTiles([
+      tile({ panelId: 'a', agentType: 'claude' }),
+      tile({ panelId: 'b', agentType: 'codex' }),
+      tile({ panelId: 'c', agentType: null }),
+    ], 'agent');
+
+    expect(groups.map(g => g.label).sort()).toEqual(['Claude', 'Codex', 'Other agents']);
+  });
+
+  it('does not mutate the input array', () => {
+    const tiles = [tile({ panelId: 'b', agentState: 'idle' }), tile({ panelId: 'a', agentState: 'blocked' })];
+    const before = tiles.map(t => t.panelId);
+    groupFleetTiles(tiles, 'project');
+    expect(tiles.map(t => t.panelId)).toEqual(before);
+  });
+});
diff --git a/frontend/src/utils/fleetGrouping.ts b/frontend/src/utils/fleetGrouping.ts
new file mode 100644
index 00000000..75e5fc95
--- /dev/null
+++ b/frontend/src/utils/fleetGrouping.ts
@@ -0,0 +1,104 @@
+import type { AgentState } from '../../../shared/types/agentStatus';
+import type { FleetGroup, FleetGrouping, FleetTileModel } from '../../../shared/types/fleet';
+
+/**
+ * Sort weight for agent states — the panes that need a human come first, so
+ * the top-left of the grid is always the most urgent thing.
+ */
+const STATE_ORDER: Record<AgentState, number> = {
+  blocked: 0,
+  working: 1,
+  idle: 2,
+  unknown: 3,
+};
+
+const STATE_LABEL: Record<AgentState, string> = {
+  blocked: 'Needs input',
+  working: 'Working',
+  idle: 'Idle',
+  unknown: 'Not running',
+};
+
+export function compareFleetTiles(a: FleetTileModel, b: FleetTileModel): number {
+  const byState = STATE_ORDER[a.agentState] - STATE_ORDER[b.agentState];
+  if (byState !== 0) return byState;
+
+  const byProject = a.projectName.localeCompare(b.projectName);
+  if (byProject !== 0) return byProject;
+
+  const bySession = a.sessionName.localeCompare(b.sessionName);
+  if (bySession !== 0) return bySession;
+
+  return a.panelTitle.localeCompare(b.panelTitle);
+}
+
+/**
+ * Bucket tiles for display. Groups are ordered by their most urgent member so
+ * a project with a blocked agent floats above one that is merely idle.
+ */
+export function groupFleetTiles(tiles: FleetTileModel[], grouping: FleetGrouping): FleetGroup[] {
+  const sorted = [...tiles].sort(compareFleetTiles);
+
+  if (grouping === 'none') {
+    return sorted.length > 0 ? [{ key: 'all', label: 'All agents', tiles: sorted }] : [];
+  }
+
+  const buckets = new Map<string, FleetGroup>();
+
+  for (const tile of sorted) {
+    let key: string;
+    let label: string;
+
+    if (grouping === 'project') {
+      key = tile.projectId === null ? 'no-project' : `project-${tile.projectId}`;
+      label = tile.projectName;
+    } else if (grouping === 'status') {
+      key = `status-${tile.agentState}`;
+      label = STATE_LABEL[tile.agentState];
+    } else {
+      key = `agent-${tile.agentType ?? 'other'}`;
+      label = tile.agentType === 'claude'
+        ? 'Claude'
+        : tile.agentType === 'codex'
+          ? 'Codex'
+          : 'Other agents';
+    }
+
+    const bucket = buckets.get(key);
+    if (bucket) bucket.tiles.push(tile);
+    else buckets.set(key, { key, label, tiles: [tile] });
+  }
+
+  return [...buckets.values()].sort((a, b) => {
+    const urgency = STATE_ORDER[a.tiles[0].agentState] - STATE_ORDER[b.tiles[0].agentState];
+    if (urgency !== 0) return urgency;
+    return a.label.localeCompare(b.label);
+  });
+}
+
+/**
+ * Where a pane lives, written out once.
+ *
+ * Project, session and panel usually name three different things — "Super
+ * Forum / security / Terminal". Sometimes they name the same one: Pane Chat's
+ * session, project and panel are all called "Pane Chat", and spelling that out
+ * gave "Pane Chat / Pane Chat — Pane Chat". Repeating a name adds nothing, so
+ * each distinct one appears once.
+ */
+export function describeFleetTile(tile: Pick<FleetTileModel, 'projectName' | 'sessionName' | 'panelTitle'>): string {
+  const parts = [tile.projectName, tile.sessionName, tile.panelTitle]
+    .map(part => part?.trim())
+    .filter((part): part is string => Boolean(part));
+
+  const seen = new Set<string>();
+  return parts
+    .filter(part => {
+      const key = part.toLowerCase();
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    })
+    .join(' / ');
+}
+
+export { STATE_LABEL as FLEET_STATE_LABEL };
diff --git a/main/src/ipc/daemonRegistryBindings.test.ts b/main/src/ipc/daemonRegistryBindings.test.ts
index b2291bc3..73877e53 100644
--- a/main/src/ipc/daemonRegistryBindings.test.ts
+++ b/main/src/ipc/daemonRegistryBindings.test.ts
@@ -12,6 +12,7 @@ import { registerPromptHandlers } from './prompt';
 import { registerScriptHandlers } from './script';
 import { registerSessionHandlers } from './session';
 import { registerVoiceHandlers } from './voice';
+import { registerFleetHandlers } from './fleet';
 import type { AppServices } from './types';
 
 vi.mock('../index', () => ({
@@ -38,6 +39,11 @@ vi.mock('../services/scriptExecutionTracker', () => ({
   scriptExecutionTracker: {},
 }));
 
+const FLEET_CHANNELS = [
+  'fleet:list-agents',
+  'fleet:snapshots',
+] as const;
+
 const PROJECT_CHANNELS = [
   'projects:get-all',
   'projects:get-active',
@@ -360,6 +366,16 @@ describe('daemon registry IPC bindings', () => {
     expect(ipcMain.boundChannels.sort()).toEqual([...VOICE_CHANNELS].sort());
   });
 
+  it('binds daemon-owned fleet channels through the shared registry', () => {
+    const registry = new PaneCommandRegistry();
+    const ipcMain = createIpcMainStub();
+
+    registerFleetHandlers(ipcMain, createServicesStub(), registry);
+
+    expect(registry.listChannels()).toEqual([...FLEET_CHANNELS].sort());
+    expect(ipcMain.boundChannels.sort()).toEqual([...FLEET_CHANNELS].sort());
+  });
+
   it('binds daemon-owned prompt channels through the shared registry', () => {
     const registry = new PaneCommandRegistry();
     const ipcMain = createIpcMainStub();
diff --git a/main/src/ipc/fleet.ts b/main/src/ipc/fleet.ts
new file mode 100644
index 00000000..18029fb6
--- /dev/null
+++ b/main/src/ipc/fleet.ts
@@ -0,0 +1,195 @@
+import type { IpcMain } from 'electron';
+import type { AppServices } from './types';
+import type { PaneCommandRegistry } from '../daemon/commandRegistry';
+import { terminalPanelManager } from '../services/terminalPanelManager';
+import { panelManager } from '../services/panelManager';
+import {
+  boundSanitizedLines,
+  selectPanelScreenText,
+} from '../services/panels/terminalScreenText';
+import {
+  DEFAULT_FLEET_SNAPSHOT_LINES,
+  MAX_FLEET_SNAPSHOT_LINES,
+  MAX_FLEET_SNAPSHOT_PANELS,
+  type FleetAgentPanel,
+  type FleetAgentType,
+  type FleetSnapshot,
+  type FleetSnapshotRequest,
+  type FleetSnapshotResult,
+} from '../../../shared/types/fleet';
+import type { TerminalPanelState } from '../../../shared/types/panels';
+import { PANE_CHAT_SESSION_ID } from '../../../shared/types/paneChat';
+
+export const DAEMON_FLEET_CHANNELS = [
+  'fleet:list-agents',
+  'fleet:snapshots',
+] as const;
+
+/**
+ * Stale fleet viewers are swept on this cadence. Without it, a hard renderer
+ * kill would leave every hovered panel pinned "visible" forever, defeating the
+ * background output throttling in `terminalPanelManager`.
+ */
+const VIEWER_PRUNE_INTERVAL_MS = 60_000;
+const VIEWER_STALE_AFTER_MS = 180_000;
+const FLEET_VIEWER_PREFIX = 'fleet:';
+
+interface AgentPanelRow {
+  id: string;
+  session_id: string;
+  title: string | null;
+  agent_type: string | null;
+  session_name: string | null;
+  archived: number | null;
+  worktree_path: string | null;
+  worktree_name: string | null;
+  active_panel_id: string | null;
+  project_id: number | null;
+  project_name: string | null;
+}
+
+/**
+ * Pane Chat keeps one panel per agent — switching from Claude to Codex leaves
+ * the previous one in place — but only ever shows the active one. Listing both
+ * in the fleet showed two chats where the user has one.
+ */
+function isRedundantPaneChatPanel(row: AgentPanelRow): boolean {
+  return row.session_id === PANE_CHAT_SESSION_ID && row.id !== row.active_panel_id;
+}
+
+function toAgentType(value: string | null): FleetAgentType | null {
+  return value === 'claude' || value === 'codex' ? value : null;
+}
+
+export function registerFleetHandlers(
+  ipcMain: IpcMain,
+  { databaseService }: AppServices,
+  commandRegistry: PaneCommandRegistry,
+): void {
+  const pruneTimer = setInterval(() => {
+    terminalPanelManager.pruneVisibilityViewersByPrefix(FLEET_VIEWER_PREFIX, VIEWER_STALE_AFTER_MS);
+  }, VIEWER_PRUNE_INTERVAL_MS);
+  // Never hold the process open just to sweep viewers.
+  pruneTimer.unref?.();
+
+  /**
+   * Every agent pane across every session.
+   *
+   * Deliberately a narrow SQL projection rather than `getAllPanels()` — that
+   * deserialises each panel's `state` JSON, which carries the full scrollback
+   * buffer and can be tens of megabytes on a large install.
+   */
+  commandRegistry.register('fleet:list-agents', async (options?: { includeArchived?: boolean }) => {
+    try {
+      const rows = databaseService.getDb().prepare(`
+        SELECT
+          tp.id,
+          tp.session_id,
+          tp.title,
+          json_extract(tp.state, '$.customState.agentType') AS agent_type,
+          s.name    AS session_name,
+          s.archived,
+          s.worktree_path,
+          s.worktree_name,
+          s.active_panel_id,
+          s.project_id,
+          p.name    AS project_name
+        FROM tool_panels tp
+        JOIN sessions s ON s.id = tp.session_id
+        LEFT JOIN projects p ON p.id = s.project_id
+        WHERE tp.type = 'terminal'
+          AND json_extract(tp.state, '$.customState.isCliPanel') = 1
+        ORDER BY p.name, s.name, tp.created_at
+      `).all() as AgentPanelRow[];
+
+      const includeArchived = options?.includeArchived === true;
+
+      const agents: FleetAgentPanel[] = rows
+        .filter(row => (includeArchived || !row.archived) && !isRedundantPaneChatPanel(row))
+        .map(row => ({
+          panelId: row.id,
+          sessionId: row.session_id,
+          sessionName: row.session_name ?? 'Untitled session',
+          sessionArchived: Boolean(row.archived),
+          projectId: row.project_id,
+          // Pane Chat has no project; naming its group after itself beats
+          // filing it under "Unknown project".
+          projectName: row.project_name
+            ?? (row.session_id === PANE_CHAT_SESSION_ID ? 'Pane Chat' : 'Unknown project'),
+          worktreePath: row.worktree_path,
+          worktreeName: row.worktree_name,
+          panelTitle: row.title ?? 'Terminal',
+          agentType: toAgentType(row.agent_type),
+          isLive: terminalPanelManager.isTerminalInitialized(row.id),
+        }));
+
+      return { success: true, data: agents };
+    } catch (error) {
+      console.error('[Fleet] Failed to list agent panels:', error);
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to list agent panels',
+      };
+    }
+  });
+
+  /**
+   * Plain-text screen snapshots for a batch of panels.
+   *
+   * Snapshots are taken sequentially: each one awaits emulator idle, and doing
+   * 30+ of those in parallel spikes the main process.
+   */
+  commandRegistry.register('fleet:snapshots', async (request: FleetSnapshotRequest) => {
+    try {
+      const requestedIds = Array.isArray(request?.panelIds) ? request.panelIds : [];
+      const panelIds = requestedIds.slice(0, MAX_FLEET_SNAPSHOT_PANELS);
+      const maxLines = Math.min(
+        Math.max(Number(request?.maxLines) || DEFAULT_FLEET_SNAPSHOT_LINES, 1),
+        MAX_FLEET_SNAPSHOT_LINES
+      );
+
+      const snapshots: FleetSnapshot[] = [];
+      const missing: string[] = [];
+
+      for (const panelId of panelIds) {
+        const panel = panelManager.getPanel(panelId);
+        if (!panel) {
+          missing.push(panelId);
+          continue;
+        }
+
+        await terminalPanelManager.waitForTerminalState(panelId);
+        const liveSnapshot = terminalPanelManager.getTerminalSnapshot(panelId);
+        const customState = (panel.state.customState ?? {}) as TerminalPanelState;
+        const { rawText } = selectPanelScreenText(liveSnapshot, customState);
+        const bounded = boundSanitizedLines(rawText, maxLines);
+
+        snapshots.push({
+          panelId,
+          text: bounded.text,
+          lineCount: bounded.returnedLineCount,
+          isAlternateScreen: liveSnapshot?.isAlternateScreen ?? Boolean(customState.isAlternateScreen),
+          isLive: Boolean(liveSnapshot),
+          lastActivityAt: liveSnapshot?.lastActivityTime ?? customState.lastActivityTime ?? null,
+          cols: liveSnapshot?.cols ?? customState.dimensions?.cols ?? null,
+          rows: liveSnapshot?.rows ?? customState.dimensions?.rows ?? null,
+        });
+      }
+
+      const result: FleetSnapshotResult = {
+        snapshots,
+        missing,
+        capturedAt: new Date().toISOString(),
+      };
+      return { success: true, data: result };
+    } catch (error) {
+      console.error('[Fleet] Failed to capture snapshots:', error);
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to capture snapshots',
+      };
+    }
+  });
+
+  commandRegistry.bindChannels(ipcMain, DAEMON_FLEET_CHANNELS);
+}
diff --git a/main/src/ipc/index.ts b/main/src/ipc/index.ts
index b4c71c86..3c497120 100644
--- a/main/src/ipc/index.ts
+++ b/main/src/ipc/index.ts
@@ -26,6 +26,7 @@ import { registerResourceMonitorHandlers } from './resourceMonitor';
 import { registerOnboardingHandlers } from './onboarding';
 import { registerVoiceHandlers } from './voice';
 import { registerPaneChatHandlers } from './paneChat';
+import { registerFleetHandlers } from './fleet';
 import { createDaemonBridgeRouter, registerDaemonBridgeHandlers } from './daemon';
 import { registerPermissionHandlers } from './permissions';
 import { PaneCommandRegistry } from '../daemon/commandRegistry';
@@ -77,6 +78,7 @@ export function registerIpcHandlers(services: AppServices): PaneCommandRegistry
   registerResourceMonitorHandlers(ipcMain, services, commandRegistry);
   registerVoiceHandlers(ipcMain, services, commandRegistry);
   registerPaneChatHandlers(ipcMain, services, commandRegistry);
+  registerFleetHandlers(ipcMain, services, commandRegistry);
   registerOnboardingHandlers(ipcMain, services);
   registerDaemonBridgeHandlers(ipcMain, bridgeRouter);
 
diff --git a/main/src/ipc/runpane.ts b/main/src/ipc/runpane.ts
index 254e0a0c..54dde381 100644
--- a/main/src/ipc/runpane.ts
+++ b/main/src/ipc/runpane.ts
@@ -6,6 +6,11 @@ import type { AppServices } from './types';
 import type { PaneCommandRegistry } from '../daemon/commandRegistry';
 import { PathResolver } from '../utils/pathResolver';
 import { sanitizeTerminalOutput } from '../utils/terminalOutputSanitizer';
+import {
+  boundSanitizedLines,
+  normalizeScrollbackBuffer,
+  selectPanelScreenText,
+} from '../services/panels/terminalScreenText';
 import { panelManager } from '../services/panelManager';
 import { terminalPanelManager, type TerminalPanelSnapshot } from '../services/terminalPanelManager';
 import { ensureProjectAgentContext } from '../services/agentContextManager';
@@ -50,7 +55,6 @@ import type {
   RunpanePanelOutputResult,
   RunpanePanelScreenRequest,
   RunpanePanelScreenResult,
-  RunpanePanelScreenSource,
   RunpanePanelStateSummary,
   RunpanePanelSubmitComposerRequest,
   RunpanePanelSubmitComposerResult,
@@ -1045,39 +1049,6 @@ async function buildPanelScreenResult(panel: ToolPanel, limit: number): Promise<
   };
 }
 
-function selectPanelScreenText(
-  snapshot: TerminalPanelSnapshot | null,
-  customState: TerminalPanelState,
-): { source: RunpanePanelScreenSource; rawText: string } {
-  if (snapshot) {
-    if (snapshot.screenText !== undefined) {
-      return {
-        source: snapshot.isAlternateScreen ? 'alternateScreen' : 'scrollback',
-        rawText: snapshot.screenText,
-      };
-    }
-    if (snapshot.isAlternateScreen && snapshot.alternateScreenBuffer) {
-      return { source: 'alternateScreen', rawText: snapshot.alternateScreenBuffer };
-    }
-    if (snapshot.scrollbackBuffer) {
-      return { source: 'scrollback', rawText: snapshot.scrollbackBuffer };
-    }
-    return { source: 'empty', rawText: '' };
-  }
-
-  const persistedAlternate = customState.alternateScreenBuffer;
-  if (customState.isAlternateScreen && persistedAlternate) {
-    return { source: 'persistedOutput', rawText: persistedAlternate };
-  }
-
-  const persistedScrollback = normalizeScrollbackBuffer(customState.scrollbackBuffer);
-  if (persistedScrollback) {
-    return { source: 'persistedOutput', rawText: persistedScrollback };
-  }
-
-  return { source: 'empty', rawText: '' };
-}
-
 function panelStateSummary(
   panel: ToolPanel,
   snapshot: TerminalPanelSnapshot | null,
@@ -1103,32 +1074,6 @@ function getTerminalCustomState(panel: ToolPanel): TerminalPanelState {
   return (isRecord(panel.state.customState) ? panel.state.customState : {}) as TerminalPanelState;
 }
 
-function normalizeScrollbackBuffer(value: TerminalPanelState['scrollbackBuffer']): string {
-  if (typeof value === 'string') {
-    return value;
-  }
-  if (Array.isArray(value)) {
-    return value.join('\n');
-  }
-  return '';
-}
-
-function boundSanitizedLines(rawText: string, limit: number): { text: string; hasMore: boolean; returnedLineCount: number } {
-  const stripped = sanitizeTerminalOutput(rawText);
-  if (!stripped) {
-    return { text: '', hasMore: false, returnedLineCount: 0 };
-  }
-
-  const allLines = stripped.split('\n');
-  const hasMore = allLines.length > limit;
-  const lines = hasMore ? allLines.slice(-limit) : allLines;
-  return {
-    text: lines.join('\n'),
-    hasMore,
-    returnedLineCount: lines.length,
-  };
-}
-
 async function waitForPanel(panel: ToolPanel, request: RunpanePanelWaitRequest): Promise<RunpanePanelWaitResult> {
   const startedAt = Date.now();
   const timeoutMs = request.timeoutMs ?? DEFAULT_PANEL_WAIT_TIMEOUT_MS;
diff --git a/main/src/preload.ts b/main/src/preload.ts
index 4ce5c9ad..9934280c 100644
--- a/main/src/preload.ts
+++ b/main/src/preload.ts
@@ -125,6 +125,7 @@ interface UpdaterInfo {
 }
 
 const DAEMON_OWNED_CHANNEL_PREFIXES = [
+  'fleet:',
   'folders:',
   'logs:',
   'pane-chat:',
@@ -454,6 +455,12 @@ contextBridge.exposeInMainWorld('electronAPI', {
     setAgent: (agent: 'claude' | 'codex'): Promise<IPCResponse> => invokeIpc('pane-chat:set-agent', agent),
   },
 
+  // Fleet grid — live overview of every agent pane across all sessions
+  fleet: {
+    listAgents: (options?: { includeArchived?: boolean }): Promise<IPCResponse> => invokeIpc('fleet:list-agents', options),
+    snapshots: (request: { panelIds: string[]; maxLines?: number }): Promise<IPCResponse> => invokeIpc('fleet:snapshots', request),
+  },
+
   // Session management
   sessions: {
     getAll: (): Promise<IPCResponse> => invokeIpc('sessions:get-all'),
diff --git a/main/src/services/panels/terminalScreenText.ts b/main/src/services/panels/terminalScreenText.ts
new file mode 100644
index 00000000..49f27463
--- /dev/null
+++ b/main/src/services/panels/terminalScreenText.ts
@@ -0,0 +1,76 @@
+import { sanitizeTerminalOutput } from '../../utils/terminalOutputSanitizer';
+import type { TerminalPanelState } from '../../../../shared/types/panels';
+import type { TerminalPanelSnapshot } from '../terminalPanelManager';
+import type { RunpanePanelScreenSource } from '../../../../shared/types/runpaneOrchestration';
+
+/**
+ * Shared plain-text extraction for terminal panels.
+ *
+ * Two very different consumers need the same answer to "what does this
+ * terminal currently show as text?": the RunPane CLI (`panels screen`) and the
+ * fleet grid's snapshot tiles. Keeping one implementation means a fix to the
+ * alternate-screen / persisted-buffer precedence benefits both.
+ */
+
+export function normalizeScrollbackBuffer(value: TerminalPanelState['scrollbackBuffer']): string {
+  if (typeof value === 'string') return value;
+  if (Array.isArray(value)) return value.join('\n');
+  return '';
+}
+
+/**
+ * Pick the best available text for a panel, preferring the live emulator's
+ * viewport and falling back to persisted buffers for panels with no PTY.
+ */
+export function selectPanelScreenText(
+  snapshot: TerminalPanelSnapshot | null,
+  customState: TerminalPanelState,
+): { source: RunpanePanelScreenSource; rawText: string } {
+  if (snapshot) {
+    if (snapshot.screenText !== undefined) {
+      return {
+        source: snapshot.isAlternateScreen ? 'alternateScreen' : 'scrollback',
+        rawText: snapshot.screenText,
+      };
+    }
+    if (snapshot.isAlternateScreen && snapshot.alternateScreenBuffer) {
+      return { source: 'alternateScreen', rawText: snapshot.alternateScreenBuffer };
+    }
+    if (snapshot.scrollbackBuffer) {
+      return { source: 'scrollback', rawText: snapshot.scrollbackBuffer };
+    }
+    return { source: 'empty', rawText: '' };
+  }
+
+  const persistedAlternate = customState.alternateScreenBuffer;
+  if (customState.isAlternateScreen && persistedAlternate) {
+    return { source: 'persistedOutput', rawText: persistedAlternate };
+  }
+
+  const persistedScrollback = normalizeScrollbackBuffer(customState.scrollbackBuffer);
+  if (persistedScrollback) {
+    return { source: 'persistedOutput', rawText: persistedScrollback };
+  }
+
+  return { source: 'empty', rawText: '' };
+}
+
+/** Strip ANSI and keep at most the last `limit` lines. */
+export function boundSanitizedLines(
+  rawText: string,
+  limit: number,
+): { text: string; hasMore: boolean; returnedLineCount: number } {
+  const stripped = sanitizeTerminalOutput(rawText);
+  if (!stripped) {
+    return { text: '', hasMore: false, returnedLineCount: 0 };
+  }
+
+  const allLines = stripped.split('\n');
+  const hasMore = allLines.length > limit;
+  const lines = hasMore ? allLines.slice(-limit) : allLines;
+  return {
+    text: lines.join('\n'),
+    hasMore,
+    returnedLineCount: lines.length,
+  };
+}
diff --git a/main/src/services/terminalPanelManager.ts b/main/src/services/terminalPanelManager.ts
index 80d2025c..5f501ddd 100644
--- a/main/src/services/terminalPanelManager.ts
+++ b/main/src/services/terminalPanelManager.ts
@@ -67,6 +67,14 @@ export interface TerminalPanelSnapshot {
   isCliReady?: boolean;
   agentType?: CliAgentType;
   agentSessionId?: string;
+  /**
+   * Live PTY dimensions. A secondary viewer must render at exactly these
+   * dimensions: agent TUIs emit absolute cursor positioning, so replaying
+   * their output into a differently-sized terminal wraps every line and
+   * scrolls without end.
+   */
+  cols?: number;
+  rows?: number;
 }
 
 /**
@@ -1604,6 +1612,8 @@ export class TerminalPanelManager {
       isCliReady: customState.isCliReady,
       agentType,
       agentSessionId: customState.agentSessionId ?? terminal.codexAgentSessionId,
+      cols: terminal.pty?.cols,
+      rows: terminal.pty?.rows,
     };
   }
 
diff --git a/shared/types/daemon.ts b/shared/types/daemon.ts
index c3eac085..354a56b5 100644
--- a/shared/types/daemon.ts
+++ b/shared/types/daemon.ts
@@ -68,6 +68,7 @@ interface PaneDaemonResponseFrameCandidate {
 }
 
 export const DAEMON_OWNED_CHANNEL_PREFIXES = [
+  'fleet:',
   'folders:',
   'logs:',
   'panels:',
diff --git a/shared/types/fleet.ts b/shared/types/fleet.ts
new file mode 100644
index 00000000..81a44253
--- /dev/null
+++ b/shared/types/fleet.ts
@@ -0,0 +1,84 @@
+import type { AgentState } from './agentStatus';
+
+/**
+ * Types for the fleet grid — a live overview of every agent pane across all
+ * sessions and projects at once.
+ *
+ * An "agent" here is a terminal panel with `customState.isCliPanel === true`;
+ * Pane has no dedicated agent panel type.
+ */
+
+export type FleetAgentType = 'claude' | 'codex';
+
+export interface FleetAgentPanel {
+  panelId: string;
+  sessionId: string;
+  sessionName: string;
+  sessionArchived: boolean;
+  projectId: number | null;
+  projectName: string;
+  /** Absolute worktree path, used for the "by worktree" grouping. */
+  worktreePath: string | null;
+  /** Worktree/branch name — often the session's real identity in a project. */
+  worktreeName: string | null;
+  panelTitle: string;
+  agentType: FleetAgentType | null;
+  /** True when a PTY for this panel is alive in the main process right now. */
+  isLive: boolean;
+}
+
+export interface FleetSnapshot {
+  panelId: string;
+  /** ANSI-stripped text, at most `maxLines` trailing lines. */
+  text: string;
+  lineCount: number;
+  isAlternateScreen: boolean;
+  /** false when the panel has no live PTY and the text came from storage. */
+  isLive: boolean;
+  lastActivityAt: string | null;
+  /**
+   * Live PTY dimensions, when the terminal is running. A live tile must size
+   * its terminal to exactly these — agent TUIs use absolute cursor
+   * positioning, so a mismatched width wraps every line and scrolls forever.
+   */
+  cols: number | null;
+  rows: number | null;
+}
+
+export interface FleetSnapshotRequest {
+  panelIds: string[];
+  /** Trailing lines per tile. Defaults to 16. */
+  maxLines?: number;
+}
+
+export interface FleetSnapshotResult {
+  snapshots: FleetSnapshot[];
+  /** Requested ids that no longer exist — the client should drop these tiles. */
+  missing: string[];
+  capturedAt: string;
+}
+
+/**
+ * Snapshotting N emulators is sequential and each one awaits emulator idle, so
+ * the batch is capped to keep a single poll well under the refresh interval.
+ */
+export const MAX_FLEET_SNAPSHOT_PANELS = 64;
+export const MAX_FLEET_SNAPSHOT_LINES = 120;
+export const DEFAULT_FLEET_SNAPSHOT_LINES = 16;
+
+// --- Client-side view options ---
+
+export type FleetGrouping = 'project' | 'status' | 'agent' | 'none';
+/** Tiles per row. Lower density = larger tiles with more visible lines. */
+export type FleetDensity = 1 | 2 | 3 | 4;
+
+export interface FleetTileModel extends FleetAgentPanel {
+  agentState: AgentState;
+  snapshot: FleetSnapshot | null;
+}
+
+export interface FleetGroup {
+  key: string;
+  label: string;
+  tiles: FleetTileModel[];
+}
diff --git a/tests/electronApiMock.ts b/tests/electronApiMock.ts
index 3274df13..2f1885cd 100644
--- a/tests/electronApiMock.ts
+++ b/tests/electronApiMock.ts
@@ -28,6 +28,7 @@ type ElectronApiMockOptions = {
   }>;
   initialExecutions?: Array<Record<string, unknown>>;
   initialCombinedDiff?: Record<string, unknown> | null;
+  initialFleetAgents?: Array<Record<string, unknown>>;
   activeProjectId?: number | null;
   paneChatAgentChangeDelayMs?: number;
 };
@@ -415,6 +416,21 @@ export async function installElectronApiMock(page: Page, options: ElectronApiMoc
           return success(createPaneChatState());
         },
       }),
+      fleet: namespace({
+        listAgents: () => success(clone(mockOptions.initialFleetAgents ?? [])),
+        snapshots: (request: { panelIds?: string[] }) => success({
+          snapshots: (request?.panelIds ?? []).map((panelId) => ({
+            panelId,
+            text: `snapshot for ${panelId}`,
+            lineCount: 1,
+            isAlternateScreen: false,
+            isLive: true,
+            lastActivityAt: null,
+          })),
+          missing: [],
+          capturedAt: new Date(0).toISOString(),
+        }),
+      }),
       panels: namespace({
         getSessionPanels: (sessionId: string) => success(
           clone(mockPanels.filter((panel) => panel.sessionId === sessionId)),