diff --git a/AGENT_APPLICATIONS_PLAN.md b/AGENT_APPLICATIONS_PLAN.md
new file mode 100644
index 0000000000..90755f2680
--- /dev/null
+++ b/AGENT_APPLICATIONS_PLAN.md
@@ -0,0 +1,367 @@
+# Agent Applications — port plan & status
+
+> **TEMPORARY DOC — remove before merge.** This is the working plan for the
+> agent-console → posthog/code port (PR #2700). It exists so the plan travels
+> with the branch across sessions. Delete it before this PR is merged.
+
+## Goal
+
+Port the **agent-console** (deployed "agent applications") from
+posthog/posthog's `ass` branch into posthog/code, surfaced under
+`/code/agents`. The aim is **functional parity** with the console — every core
+capability an operator has in the console should exist in code. We are **not**
+porting the console's code; we re-implement each feature in code's layered
+architecture and visual style. Where it makes sense, deployed-agent
+conversations render through code's **native `ConversationView`** via an
+SSE→ACP adapter, so deployed-agent chat looks and behaves like a local session.
+
+The console source of truth lives at
+`products/agent_platform/services/agent-console` (Next.js) on the `ass` branch;
+the Django API it consumes lives at `products/agent_platform/backend`.
+
+## Information architecture
+
+`/code/agents` is a two-tab surface (shared chrome: `AgentsTabLayout`):
+
+- **Scouts** (`/code/agents/scouts`) — the existing scheduled-agent /
+  self-driving configuration (`ConfigureAgentsSection`). Unchanged in content.
+- **Applications** (`/code/agents/applications`) — deployed agent-platform
+  applications. This is where the entire console surface lands.
+
+`/code/agents` redirects to the Scouts tab. The tab bar lives only on the two
+list views; detail pages (a scout, an agent, a session) keep their own focused
+chrome.
+
+### Applications-tab IA (target)
+
+The console had top-level surfaces + per-agent sub-tabs. In code they all sit
+under the Applications tab:
+
+**Applications landing / fleet surfaces**
+- **Fleet overview** — stat strip (agents / live now / sessions·24h / spend·24h
+  / failures / pending approvals), **live-now panel** (cross-agent in-flight
+  sessions), recent activity, quick links.
+- **Agent list** — all deployed agents with per-agent inline stats; filter by
+  All / Live / Drafts / Archived.
+- **Global approvals queue** — fleet-wide inbox of approval-gated tool calls.
+- **Fleet analytics** — cross-agent `$ai_*` observability dashboard.
+
+> Billing (AI-gateway wallet / ledger) and the Registry (skills / custom tools
+> / native-tool catalog) are **out of scope here** — owned elsewhere.
+
+**Per-agent detail sub-tabs** (`/applications/{slug}/…`)
+- **Overview** — status, triggers, live revision, recent activity, observability
+  links.
+- **Sessions** — filterable session history → session detail (Conversation +
+  **Logs** panes).
+- **Approvals** — this agent's approval queue.
+- **Configuration** — spec explorer (model / instructions / triggers / tools /
+  skills / mcps / integrations / limits) + bundle file viewer + revisions.
+- **Secrets** — encrypted env management.
+- **Memory** — S3-backed file store + tables.
+- **Connections** — Slack setup + integrations.
+- **Observability** — per-agent observability **summary page**.
+
+## Architecture decisions
+
+- **Authoring is the Agent Builder's job; this surface renders.** Agents are
+  created and edited only through the Agent Builder (a meta-agent you chat
+  with), never through hand-built config forms. So the Applications surface is
+  **render-first**: it shows how an agent is configured (spec, revisions,
+  secrets, memory, connections) and exposes only **operational** mutations —
+  enable/disable an agent, and promote / freeze / archive a revision. There is
+  **no** spec editor, bundle file editor, trigger-config form, or secret-value
+  editor. (This retires most of the old M12 "authoring" milestone.)
+- **Functional parity, not code reuse.** Re-implement each console feature to
+  code's conventions (Inversify services, `useAuthenticatedQuery` hooks,
+  Tailwind/Radix, `@posthog/quill`). The console's React is a behavioral spec,
+  not a source to copy.
+- **Wire types** live in `@posthog/shared/agent-platform-types` (plain TS,
+  snake_case, no Zod — matches `inbox-types.ts`). Already covers applications,
+  stats, sessions, approvals, revisions, fleet, SSE events. Still **missing**
+  types for: memory files/tables, env keys, bundle/manifest, analytics
+  rollups, system-prompt render, validation, preview tokens.
+- **Reads** live on `PostHogAPIClient` (raw fetcher + cast, mirroring the
+  signals methods). UI calls via `useAuthenticatedQuery` hooks. The read methods
+  for apps / stats / sessions / approvals / revisions / fleet already exist.
+- **Mutations & lifecycle** (approve/reject, freeze/promote/archive/rollback,
+  set_env, memory CRUD, file writes, cron-fire, preview) are **not** trivial
+  passthroughs — they carry orchestration, optimistic state and cross-resource
+  effects (e.g. promote rewrites `live_revision`). These cross the threshold
+  into a **`@posthog/core` AgentApplications service** rather than living as raw
+  client methods. Decide per-feature; flag in each milestone.
+- **SSE→ACP mappers** are pure, unit-tested modules in
+  `packages/ui/src/features/agent-applications/chat/`. They translate each
+  agent_platform event into the equivalent ACP JSON-RPC message and let code's
+  existing `buildConversationItems` do the reduction — we do **not**
+  re-implement the console's `runnerReducer`.
+- **Analytics** read the team's own PostHog project `$ai_*` events via the
+  `/query/` HogQL endpoint on `PostHogAPIClient`, not a bespoke service.
+- Backend routes (`GET /api/projects/{teamId}/agent_applications/…`,
+  `/agent_fleet/…`) exist only on posthog/posthog's `ass` branch, not
+  production Cloud yet.
+
+## Feature parity map
+
+Status legend: **✅ done** · **🟡 API-ready** (client method/types exist, UI not
+built) · **⬜ missing** (needs types + client + UI) · **🔴 live** (needs SSE
+transport, blocked on the M-Live open question).
+
+| # | Feature | What it does | Backend | Status |
+|---|---------|--------------|---------|--------|
+| **Browsing & monitoring** ||||
+| 1 | Fleet overview / stat strip | Aggregate KPIs across all agents | `/query/` HogQL `$ai_*` | ✅ (analytics KPIs: spend/sessions/failure/p95 + trends + WoW deltas on the Applications overview; operational live-now/approvals counts dropped — see M6) |
+| 2 | Live-now panel | Cross-agent in-flight sessions, live state dots | `agent_fleet/live_sessions/` | ✅ (Applications-landing panel; see M6) |
+| 3 | Agent list + filters | All agents, per-agent inline stats, All/Live/Drafts/Archived | `agent_applications/`, `/query/` | ✅ list + inline stats / 🟡 filters |
+| 4 | Per-agent overview | Status, triggers, live revision, recent activity | `agent_applications/{slug}/` | ✅ |
+| 5 | Session list + filters | History; filter by state / revision / date; pagination | `…/sessions/?state=&revision_id=&…` | ✅ (state filter + load-more; date/revision filters pending) |
+| 6 | Session transcript | Stored transcript via native `ConversationView` | (mapper) | ✅ |
+| 7 | Session KPI strip + "fired by" | Per-session messages/tools/cost/duration/errors; cron badge | (in session detail) | ✅ |
+| 8 | **Session logs pane** | Structured log viewer, level filter + search | `…/sessions/{id}/logs/` | ✅ |
+| **Approvals** ||||
+| 9 | Per-agent approvals queue | List approval-gated tool calls, filter by state | `…/approvals/` | ✅ |
+| 10 | Global approvals queue | Fleet-wide approval inbox | `agent_fleet/approvals/` | ✅ (master/detail at `/code/agents/applications/approvals`; see M6) |
+| 11 | Approval detail + decide | Reasoning snapshot, proposed args, approve/reject + edit args + reason; embedded session | `…/approvals/{id}/decide/` | ✅ (master/detail) |
+| **Configuration & authoring** ||||
+| 12 | Spec explorer | Filesystem-style view of model/triggers/tools/skills/mcps/integrations/secrets/limits | revision `spec` JSONB | ✅ |
+| 13 | Bundle file viewer | Tree + read file (markdown/code/json), via reusable `FileExplorer` | `…/revisions/{id}/bundle/` | ✅ |
+| 14 | Revision list + lifecycle | picker (drives explorer) + freeze(ready) → promote(live) → archive | `…/revisions/`, `/freeze/`, `/promote/`, `/archive/` | ✅ |
+| 15 | Spec editing + validate | Edit spec on a draft, validate, render system prompt | `…/revisions/{id}/` PATCH | ~~retired~~ (Agent Builder authors) |
+| 16 | Bundle file editing | Write/delete files, bulk bundle upload | `…/revisions/{id}/file/` PUT/DELETE | ~~retired~~ (Agent Builder authors) |
+| 17 | Trigger config | chat / webhook / mcp / slack / cron + auth modes + endpoints/usage | revision `spec` | ✅ (view; editing retired) |
+| 18 | Cron fire (run-now) | Manually fire a cron out-of-band to test → jump to session | `…/revisions/{id}/cron/fire/` | ✅ |
+| **Secrets & env** ||||
+| 19 | Env / secrets management | List keys, set/rotate/clear per key (guarded), discover required secrets from spec | `…/env_keys/…` | ✅ |
+| **Memory** ||||
+| 20 | Memory file store | Tree + read file (markdown); create/update/delete | `…/memory/files/`, `/tree/`, `/by_path/` | 🟡 (read in progress; edit deferred) |
+| 21 | Memory search | BM25 full-text search (FileExplorer search mode) | `…/memory/search/?q=` | 🟡 (in progress) |
+| 22 | Memory tables | List tables + read rows | `…/memory/tables/…` | 🟡 (in progress) |
+| **Connections** ||||
+| 23 | Slack setup | Derived Slack app manifest + request URLs (under the slack trigger) | `…/revisions/{id}/slack_manifest/` | ✅ |
+| 24 | Integrations | PostHog integrations attached to an agent | (spec `integrations` + integ API) | ⬜ (view stub) |
+| **Observability & analytics** ||||
+| 25 | Per-agent observability summary | Rollup: spend, sessions, failure rate, p95 (+ trends/deltas), cost-by-model, tool reliability for this agent | `/query/` HogQL `$ai_*` | ✅ (Observability tab + KPIs on the Overview tab) |
+| 26 | Fleet analytics dashboard | Cross-agent KPIs + WoW deltas, spend/cost, tool reliability | `/query/` HogQL `$ai_*` | ✅ (blended into the Applications overview: KPI strip + per-agent row stats; cost-by-model + tool reliability on the per-agent tab) |
+| **Live & interactive** ||||
+| 27 | Live chat / streaming | SSE transport → ACP; send message; cancel; new/resume chats | ingress `/agents/{slug}/run\|send\|listen\|cancel` | ✅ (per-agent **Chat** preview tab — region-derived ingress, optimistic send, info banner, local recent-chats rail with transcript-rebuilding resume; commit `c0688cfa`) |
+| 28 | In-chat approvals | ACP tool-call permission prompts during a live turn | ingress + approvals | ✅ (inline card below the conversation in the chat preview; reuses the M5 decide path; see M-Live-InChat) |
+| 29 | Draft preview | Run a non-live draft revision live before promoting | `…/preview-proxy/…`, `/preview_token/` | 🔴 |
+| 30 | Agent Builder / "edit with AI" | Always-on dock chat with `agent-concierge` that drives UI (`focus_*`) + secrets (`set_secret`) + staged authoring; seed prompts from inline buttons | ingress + client tools | ✅ (global dock, page-context envelope + `get_context`, `focus_*` navigation, `set_secret` punch-out, edit-with-AI seeds; see M-Agent-Builder) |
+
+> **Out of scope (owned elsewhere):** billing (AI-gateway wallet + ledger) and
+> the registry (native tools / skill templates / custom tool templates).
+
+## Milestones
+
+### Done
+
+- [x] **M1** — IA scaffold: feature dir, routes, surfaced under `/code/agents`.
+- [x] **M2** — read surface: shared types, `PostHogAPIClient` methods (apps /
+  sessions / approvals / revisions / fleet), query hooks, list + per-agent
+  detail views.
+- [x] **M3** — SSE→ACP chat adapter:
+  - [x] M3a — typed `AgentSessionEvent` SSE union + transcript content types.
+  - [x] M3b — pure mappers (stored transcript + live SSE) → `AcpMessage[]`,
+    18 unit tests.
+  - [x] M3c — stored session transcripts render through `ConversationView`.
+- [x] **Tabs** — split Agents into Scouts + Applications tabs.
+
+### Done this session
+
+- [x] **M4 — Sessions & logs** (features 5, 7, 8) — filterable session list,
+  session-detail KPI strip + "fired by" cron badge, structured Logs pane.
+  Commit `0f15929f` (incl. the latent empty-conversation render fix).
+- [x] **M5 — Approvals** (features 9, 11) — per-agent approvals queue, decide
+  (approve/reject + edited args + reason). Commit `a2fa9115`, then reworked into
+  **master/detail with embedded session + refresh controls** (`a376b61b`). The
+  fleet-wide global approvals queue (feature 10) shipped later in M6 (`5bfeccef`).
+- [x] **M7 — Observability** (features 25, 26; also 1, 3) — agent observability
+  over the team's own `$ai_*` events via a `getAgentAnalytics()` HogQL rollup on
+  `PostHogAPIClient` (5 parallel `/query/` panels, pure unit-tested shaping in
+  `agent-analytics.ts`). Surfaced as: the **Applications overview** (KPI strip —
+  spend/sessions/failure/p95 with 14-day sparkline trends + WoW deltas — blended
+  on top of the agent list, with per-agent rollups merged into each row); the
+  per-agent **Overview** tab (same KPI strip + link to the Observability tab);
+  and a new per-agent **Observability** tab (KPIs + cost-by-model + tool
+  reliability). Each surface has a small "Open in AI observability" deep link.
+  Data layer committed in `aed89291`; UI in `0856ea5f`. **Design note:** there is
+  no separate fleet-analytics page — analytics is blended into the overview and
+  the per-agent tabs. This replaced the old operational fleet/agent stat strips
+  (live-now + pending-approvals counts) — those returned in M6 (`5bfeccef`).
+- [x] **Configuration explorer** (features 12, 13, 14, 17, 18, 23 + M8/M9) —
+  full-bleed filesystem explorer on a reusable `FileExplorer` primitive: a tree
+  (instructions · model · triggers · secrets · skills · tools · mcps ·
+  integrations · limits) + per-node detail panes + bundle viewer
+  (markdown/code/json), selection in `?node=`. Stage A shell `1e5c1b91`; Stage B
+  trigger richness — auth modes/blurbs, public warning, **Slack setup card**,
+  trigger endpoints + curl/MCP usage, **cron "Run now"**, missing-secret
+  warnings, MCP tools grid — `aed89291`; **M9 revision bar** (picker drives the
+  explorer via `?revision=` + freeze/promote/archive behind confirms) `55dbb1b8`.
+- [x] **M10 — Secrets** (feature 19) — set/rotate/**guarded clear** inline in the
+  secret detail (`env_keys` PUT/DELETE), status flips across the tree on success;
+  a set secret hides its input behind Rotate and Clear is a two-step confirm.
+  Commit `32e8749d`.
+- [x] **M11 — Memory** (features 20, 21, 22) — Memory tab on the reusable
+  `FileExplorer`: folder tree + read file (markdown, with description/tags), a
+  Files/Tables toggle, BM25 search mode, and a tables view (list + row grid).
+  Render-only; create/update/delete deferred. Commit `22caee62`.
+- [x] **M6 — Live-now & operational counts + global approvals queue** (features
+  2, 10; restoration of operational counts from feature 1) — parity work that
+  restored the operational signal the M7 analytics KPIs displaced. Two pieces:
+  - **Live-now panel** on the Applications landing — a compact list of
+    cross-agent in-flight sessions (state badge, agent name, trigger kind, turn
+    count, preview, started-ago), each row linking to the per-agent session
+    detail. Backed by `useAgentFleetLiveSessions` (5s poll) over
+    `client.listAgentFleetLiveSessions`. Joins `application_id → name/slug` from
+    the already-cached `useAgentApplications()` query — no extra requests beyond
+    the panel's own.
+  - **Fleet approvals queue** at `/code/agents/applications/approvals` —
+    master/detail mirroring the per-agent `AgentApprovalsPane` but cross-agent:
+    each row shows the agent it belongs to, the detail pane reuses
+    `AgentApprovalDetail` (passing the joined slug), and the filter chips share
+    a single `agentApprovalsFilters.ts` source of truth between the per-agent
+    and fleet panes. Backed by `useAgentFleetApprovals` (10s poll) over
+    `client.listAgentFleetApprovals`. Standalone route with its own focused
+    chrome (back link + title), matching how per-agent detail pages render.
+  - **Operational strip** on the landing: `X live now · Y pending approvals →`
+    above the analytics KPI strip. `Y` deep-links to the new approvals route and
+    flips amber when non-zero. Counts come from the same fleet hooks the live-now
+    panel uses, so the strip is "free" beyond the requests already in flight.
+  Commit `5bfeccef`.
+- [x] **M-Live (chat preview)** (feature 27) — per-agent **Chat** tab that runs a
+  live session against the agent's ingress and renders it through the native
+  `ConversationView`. **This resolved the M-Live "where does cloud-SSE transport
+  live" open question:** transport is a renderer-scoped UI hook (`useAgentChat`)
+  driving `run/send/cancel` + the `/listen` SSE loop via the api-client, mapped
+  to `AcpMessage[]` (`createAgentChatMapper`) into a new core `agentChatStore`;
+  no main-process/tRPC seam needed. Ingress is **region-derived**
+  (`resolveIngressBaseUrl`: dev → `localhost:3030` because the dev trycloudflare
+  tunnel buffers SSE; us/eu use `ingress_base_url`). QoL: `ConversationView` got
+  an optional `collapseMode` override (preview passes `"none"` so prose isn't
+  folded into a tool-call chip); the user message renders optimistically on send
+  (echo deduped); an info banner names the deployed revision; a local
+  recent-chats rail lists only chats started **here** (persisted per agent — not
+  the server session list), with new-chat + resume that rebuilds the transcript
+  from the stored session detail (`/listen` only tails, never replays) and
+  re-attaches the live stream for active sessions. Client tools: `toast` /
+  `get_context` resolve inline; `focus_*` / `set_secret` are wired by the Agent
+  Builder dock (`useAgentChat` takes an optional `clientTools` handler). Commit
+  `c0688cfa`.
+
+### Remaining (parity work)
+
+Reframed around the **render-first / Agent-Builder-authoring** principle above:
+config/revisions/secrets/memory are read surfaces with only operational
+controls. Ordered by core value.
+
+- [ ] **Enable / disable agent** — archive/unarchive the application (an
+  operational control deferred from M9; needs the destroy/restore endpoint).
+- [ ] ~~**M12 — Spec & bundle authoring**~~ — **retired.** Spec/bundle/trigger
+  editing is the Agent Builder's job; the render views live in M8, operational
+  lifecycle in M9.
+
+### Deferred
+
+- [ ] **M13 — Connections** (feature 24) — **deferred** (legacy idea). A separate
+  integrations view isn't needed right now: Slack setup (feature 23) already
+  ships under the slack trigger, and `spec.integrations` renders in the config
+  explorer.
+- [ ] **M-Live (remainder)** (feature 29) — the live transport itself shipped
+  (see "Done this session"); the **open transport question is resolved**
+  (renderer-hook + region-derived ingress). What's left on the live track:
+  - [ ] **Draft preview** (feature 29) — run a non-live **draft** revision live
+    before promoting, via the preview-proxy / short-lived `preview_token`
+    (`AgentChat` in the console mints/refreshes it on `preview_token_required`).
+    Lets the Agent Builder "test before promote".
+- [x] **M-Live-InChat — in-chat approvals** (feature 28) — when a live turn
+  proposes an approval-gated tool call, the chat preview now surfaces the
+  decision inline as a card between the conversation and the composer, and
+  parks the composer until decided. Detection is poll-based (2s
+  `useAgentChatPendingApproval` filtered to the chat's session id), since the
+  agent-runner emits no SSE event for "waiting on approval" — confirmed by
+  reading `AgentSessionEvent` (the `waiting` event is for
+  `@posthog/meta-ask-for-input`, not approvals). The decide path reuses the
+  M5 `useDecideAgentApproval` mutation unchanged; on success the same
+  `agentApplicationsKeys.approvals(...)` prefix invalidation clears the
+  pending-card hook, and the SSE follow-up resumes the conversation
+  naturally. The decision form was extracted from `AgentApprovalDetail` into
+  a presentational `AgentApprovalDecisionForm` reused by both surfaces. Wired
+  into both the per-agent **Chat** tab (`AgentChatPane`) and the **Agent
+  Builder dock** (`AgentBuilderDock`) — same `AgentChatSurface` underneath, so
+  the punch-out is consistent across surfaces.
+- [x] **M-Agent-Builder** (feature 30) — **shipped.** An always-on **right-hand
+  dock** ("Agent Builder") across all of `/code/agents` that chats with the
+  deployed `agent-concierge` (the meta-agent's slug is unchanged; only the
+  product/UI name is "Agent Builder"). It inspects/debugs agents and authors/edits
+  them via consent-gated **staged draft revisions** — the agent does the spec
+  edits server-side through its `@posthog/agent-applications-*` tools; code renders
+  the chat, drives the UI, and handles secrets. Reuses the live-chat stack
+  (`useAgentChat` / `agentChatStore` / mapper / `ConversationView` / region-derived
+  ingress). Lives in `features/agent-applications/agent-builder/`. All stages done:
+  - [x] **C1 — Dock shell.** Global resizable right rail in the `/code/agents`
+    layout (`AgentBuilderDockLayout`, react-resizable-panels + `autoSaveId`),
+    toggled via an edge affordance / hide button / **Cmd-Ctrl+I**; open + follow
+    mode persisted (`useAgentBuilderStore`). The core `agentChatStore` was
+    generalized to hold multiple chats keyed by `chatId` (dock `"agent-builder"` +
+    preview `"preview:<slug>"`); `useAgentChat` takes a `chatId`. Shared
+    `AgentChatSurface` extracted (now on the Quill `InputGroup` composer).
+  - [x] **C2 — Page-context registry.** `useSetAgentBuilderPage` wired in
+    `AgentDetailLayout`, `AgentsTabLayout`, and the session transcript; the context
+    is prepended as a stripped/deduped `[console-context]{…}` envelope on message
+    one and answers the `get_context` tool.
+  - [x] **C3 — `focus_*` UI-driving tools.** `useAgentBuilderClientTools` navigates
+    code's agent routes (`focus_tab/file/revision/spec_section/session`), gated by
+    the follow-mode toggle; `toast` wired.
+  - [x] **C4 — `set_secret` punch-out.** Interactive client tool: the server-side
+    tool returns `{queued, interactive}` and parks; the handler defers
+    (`{defer:true}`) and stores a `pendingSecret`; the dock renders
+    `AgentBuilderSecretForm` above the composer; on submit it `PUT`s the env key
+    straight to the API (raw value never reaches the agent) and posts the outcome
+    via `POST /send` (`sendAgentInteractiveToolResult` → `client_tool_result`
+    marker) to wake the parked session. Verified live: env_keys PUT 200 + the
+    session resumed confirming the set.
+  - [x] **C5 — "Edit with AI" seeds.** `EditWithAIButton` seeds the dock with a
+    prompt; an "Ask the agent builder about this agent" entry point on the agent
+    overview. (A "start fresh / continue" confirm dialog when a chat is already
+    active is a possible refinement — currently it sends into the active chat.)
+  - [ ] **Message-format deep dive (optional).** The acute issue — assistant prose
+    hidden inside a collapsed tool-call chip — is fixed via the `collapseMode`
+    override. A deeper side-by-side audit of our pi-ai conversation/part shape
+    vs. what `buildConversationItems` expects (turn bracketing, content-block
+    shapes) could still tighten `chat/conversationToAcp.ts` + `acpEnvelope.ts`
+    for pixel-faithful rendering.
+
+## What's demoable today (M1–M3 + tabs)
+
+Requires the app authenticated against a PostHog backend that has the
+`agent_platform` app deployed (i.e. the `ass` branch). Against production Cloud
+the data endpoints 404, so the data surfaces show error/empty states — the UI
+shell, tabs, and navigation still work.
+
+With a backend that has deployed agents + sessions:
+
+- `/code/agents` → **Scouts / Applications tabs**.
+- **Applications tab**: observability KPIs (spend / sessions / failure rate /
+  p95 with 14-day sparkline trends + WoW deltas) blended on top of the agent
+  list, with per-agent rollups on each row.
+- **Per-agent detail**: **Overview** (observability KPIs + recent sessions) and
+  an **Observability** tab (KPIs + cost-by-model + tool reliability), each with
+  an "Open in AI observability" deep link.
+- **Session transcript**: a stored session rendered read-only through code's
+  native chat UI (streaming text, thinking, tool calls + results).
+- **Chat preview** (chat-trigger agents): the per-agent **Chat** tab runs a live
+  session against the agent's ingress — send/cancel, optimistic echo, a
+  recent-chats rail with resume. (Try it against `agent-approval-demo`.)
+- **Operational strip + live-now panel** on the landing: "X live now · Y pending
+  approvals →"; click pending → fleet-wide approvals master/detail at
+  `/code/agents/applications/approvals`. Live-now lists cross-agent in-flight
+  sessions and links each row to the per-agent session detail.
+
+- **In-chat approvals** in the per-agent Chat tab: when the agent proposes an
+  approval-gated tool call, an inline card appears below the conversation with
+  the proposed args, approve / reject controls (with optional "approve with
+  edits" and a reason), and a deep link to the full Approvals tab. The composer
+  parks until decided; the SSE follow-up resumes the chat naturally.
+
+Not yet built: everything in the parity map still marked 🟡 / ⬜ / 🔴 — draft
+preview (feature 29). Authoring stays the Agent Builder's job.
diff --git a/apps/code/src/main/di/bindings.ts b/apps/code/src/main/di/bindings.ts
index 0ad4eccdd8..90b3b39cca 100644
--- a/apps/code/src/main/di/bindings.ts
+++ b/apps/code/src/main/di/bindings.ts
@@ -45,7 +45,9 @@ import type {
   SLACK_INTEGRATION_SERVICE,
 } from "@posthog/core/integrations/identifiers";
 import type { SlackIntegrationService } from "@posthog/core/integrations/slack";
+import type { ApprovalLinkService } from "@posthog/core/links/approval-link";
 import type {
+  APPROVAL_LINK_SERVICE,
   INBOX_LINK_SERVICE,
   NEW_TASK_LINK_SERVICE,
   SCOUT_LINK_SERVICE,
@@ -234,6 +236,7 @@ import type { WorkspaceServerService } from "../services/workspace-server/servic
 import type { rendererStore } from "../utils/store";
 import type {
   APP_LIFECYCLE_SERVICE as MAIN_APP_LIFECYCLE_SERVICE,
+  APPROVAL_LINK_SERVICE as MAIN_APPROVAL_LINK_SERVICE,
   ARCHIVE_REPOSITORY as MAIN_ARCHIVE_REPOSITORY,
   AUTH_PREFERENCE_REPOSITORY as MAIN_AUTH_PREFERENCE_REPOSITORY,
   AUTH_SERVICE as MAIN_AUTH_SERVICE,
@@ -401,10 +404,12 @@ export interface MainBindings {
   [MAIN_INBOX_LINK_SERVICE]: InboxLinkService;
   [MAIN_SCOUT_LINK_SERVICE]: ScoutLinkService;
   [MAIN_NEW_TASK_LINK_SERVICE]: NewTaskLinkService;
+  [MAIN_APPROVAL_LINK_SERVICE]: ApprovalLinkService;
   [TASK_LINK_SERVICE]: TaskLinkService;
   [INBOX_LINK_SERVICE]: InboxLinkService;
   [SCOUT_LINK_SERVICE]: ScoutLinkService;
   [NEW_TASK_LINK_SERVICE]: NewTaskLinkService;
+  [APPROVAL_LINK_SERVICE]: ApprovalLinkService;
 
   // Watcher registry
   [MAIN_WATCHER_REGISTRY_SERVICE]: WatcherRegistryService;
diff --git a/apps/code/src/main/di/container.ts b/apps/code/src/main/di/container.ts
index b1bc3cfaae..224454a293 100644
--- a/apps/code/src/main/di/container.ts
+++ b/apps/code/src/main/di/container.ts
@@ -47,7 +47,9 @@ import { GIT_DIFF_SOURCE } from "@posthog/core/git-pr/identifiers";
 import { handoffModule } from "@posthog/core/handoff/handoff.module";
 import { HANDOFF_HOST } from "@posthog/core/handoff/identifiers";
 import { integrationsModule } from "@posthog/core/integrations/integrations.module";
+import { ApprovalLinkService } from "@posthog/core/links/approval-link";
 import {
+  APPROVAL_LINK_SERVICE,
   INBOX_LINK_SERVICE,
   NEW_TASK_LINK_SERVICE,
   SCOUT_LINK_SERVICE,
@@ -246,6 +248,7 @@ import { rendererStore } from "../utils/store";
 import type { MainBindings } from "./bindings";
 import {
   APP_LIFECYCLE_SERVICE as MAIN_APP_LIFECYCLE_SERVICE,
+  APPROVAL_LINK_SERVICE as MAIN_APPROVAL_LINK_SERVICE,
   ARCHIVE_REPOSITORY as MAIN_ARCHIVE_REPOSITORY,
   AUTH_PREFERENCE_REPOSITORY as MAIN_AUTH_PREFERENCE_REPOSITORY,
   AUTH_SERVICE as MAIN_AUTH_SERVICE,
@@ -620,6 +623,10 @@ container.bind(MAIN_SCOUT_LINK_SERVICE).to(ScoutLinkService);
 container.bind(SCOUT_LINK_SERVICE).toService(MAIN_TOKENS.ScoutLinkService);
 container.bind(MAIN_NEW_TASK_LINK_SERVICE).to(NewTaskLinkService);
 container.bind(NEW_TASK_LINK_SERVICE).toService(MAIN_TOKENS.NewTaskLinkService);
+container.bind(MAIN_APPROVAL_LINK_SERVICE).to(ApprovalLinkService);
+container
+  .bind(APPROVAL_LINK_SERVICE)
+  .toService(MAIN_TOKENS.ApprovalLinkService);
 container.load(watcherRegistryModule);
 container
   .bind(MAIN_WATCHER_REGISTRY_SERVICE)
diff --git a/apps/code/src/main/di/tokens.ts b/apps/code/src/main/di/tokens.ts
index 80f0e6c773..e5de0d2eec 100644
--- a/apps/code/src/main/di/tokens.ts
+++ b/apps/code/src/main/di/tokens.ts
@@ -103,6 +103,9 @@ export const SCOUT_LINK_SERVICE = Symbol.for(
 export const NEW_TASK_LINK_SERVICE = Symbol.for(
   "posthog.host.main.new-task-link.service",
 );
+export const APPROVAL_LINK_SERVICE = Symbol.for(
+  "posthog.host.main.approval-link.service",
+);
 export const WATCHER_REGISTRY_SERVICE = Symbol.for(
   "posthog.host.main.watcher-registry.service",
 );
@@ -155,6 +158,7 @@ export const MAIN_TOKENS = Object.freeze({
   InboxLinkService: INBOX_LINK_SERVICE,
   ScoutLinkService: SCOUT_LINK_SERVICE,
   NewTaskLinkService: NEW_TASK_LINK_SERVICE,
+  ApprovalLinkService: APPROVAL_LINK_SERVICE,
   WatcherRegistryService: WATCHER_REGISTRY_SERVICE,
   ProvisioningService: PROVISIONING_SERVICE,
   WorkspaceService: WORKSPACE_SERVICE,
diff --git a/apps/code/src/main/index.ts b/apps/code/src/main/index.ts
index 4530152d9e..702ec0b536 100644
--- a/apps/code/src/main/index.ts
+++ b/apps/code/src/main/index.ts
@@ -22,6 +22,7 @@ import {
   SLACK_INTEGRATION_SERVICE,
 } from "@posthog/core/integrations/identifiers";
 import type { SlackIntegrationService } from "@posthog/core/integrations/slack";
+import type { ApprovalLinkService } from "@posthog/core/links/approval-link";
 import type { InboxLinkService } from "@posthog/core/links/inbox-link";
 import type { NewTaskLinkService } from "@posthog/core/links/new-task-link";
 import type { ScoutLinkService } from "@posthog/core/links/scout-link";
@@ -226,6 +227,7 @@ async function initializeServices(): Promise<void> {
   container.get<InboxLinkService>(MAIN_TOKENS.InboxLinkService);
   container.get<ScoutLinkService>(MAIN_TOKENS.ScoutLinkService);
   container.get<NewTaskLinkService>(MAIN_TOKENS.NewTaskLinkService);
+  container.get<ApprovalLinkService>(MAIN_TOKENS.ApprovalLinkService);
   container.get<GitHubIntegrationService>(GITHUB_INTEGRATION_SERVICE);
   container.get<SlackIntegrationService>(SLACK_INTEGRATION_SERVICE);
   container.get<ExternalAppsService>(MAIN_TOKENS.ExternalAppsService);
diff --git a/docs/DEEP-LINKS.md b/docs/DEEP-LINKS.md
index bf5aea1999..0e145f19ff 100644
--- a/docs/DEEP-LINKS.md
+++ b/docs/DEEP-LINKS.md
@@ -10,7 +10,7 @@ PostHog Code registers custom URL schemes so the desktop app can be opened with
 | Development | `posthog-code-dev://` |
 | Legacy (production only) | `twig://`, `array://` |
 
-All schemes route through the same dispatcher. The host portion of the URL selects the handler (`task`, `inbox`, `scout`, `new`, `plan`, `issue`, `callback`, `integration`, `slack-integration`, `mcp-oauth-complete`).
+All schemes route through the same dispatcher. The host portion of the URL selects the handler (`task`, `inbox`, `scout`, `approval`, `new`, `plan`, `issue`, `callback`, `integration`, `slack-integration`, `mcp-oauth-complete`).
 
 If the app is not running, the OS launches it and the link is queued until the renderer is ready. If the app is minimised, it is restored and focused before the link is handled.
 
@@ -116,6 +116,20 @@ posthog-code://scout/error-tracking
 posthog-code://scout/error-tracking?finding=abc123
 ```
 
+### `posthog-code://approval/<requestId>`
+
+Open the agent fleet approvals inbox focused on a specific tool-approval request.
+Emitted by the agent-runner on a gated tool call so non-PostHog-Code clients
+(Slack, MCP) can land on the approval; the request id alone resolves it.
+
+| Segment / Parameter | Required | Description |
+|---|---|---|
+| `<requestId>` | Yes | Agent tool-approval request id (e.g. `ar_...`). |
+
+```
+posthog-code://approval/ar_abc123
+```
+
 ## OAuth callback links
 
 These are issued by external services and consumed by the app. You should not need to construct them yourself, but they are documented for completeness.
@@ -180,6 +194,7 @@ In development the same payload is delivered to `http://localhost:8238/mcp-oauth
 | `task` | [packages/core/src/links/task-link.ts](../packages/core/src/links/task-link.ts) |
 | `inbox` | [packages/core/src/links/inbox-link.ts](../packages/core/src/links/inbox-link.ts) |
 | `scout` | [packages/core/src/links/scout-link.ts](../packages/core/src/links/scout-link.ts) |
+| `approval` | [packages/core/src/links/approval-link.ts](../packages/core/src/links/approval-link.ts) |
 | `new`, `plan`, `issue` | [packages/core/src/links/new-task-link.ts](../packages/core/src/links/new-task-link.ts) |
 | `callback` | [packages/core/src/oauth/oauth.ts](../packages/core/src/oauth/oauth.ts) |
 | `integration` | [packages/core/src/integrations/github.ts](../packages/core/src/integrations/github.ts) |
diff --git a/docs/LOCAL-DEVELOPMENT.md b/docs/LOCAL-DEVELOPMENT.md
index 15b4f94dc6..f8dfbd7972 100644
--- a/docs/LOCAL-DEVELOPMENT.md
+++ b/docs/LOCAL-DEVELOPMENT.md
@@ -95,6 +95,35 @@ Open devtools in the dev build and type:
 
 Source: `apps/code/src/renderer/features/inbox/devtools/inboxDemoConsole.ts`.
 
+## Feature flags in local dev
+
+Feature flags are read through posthog-js, configured by the `VITE_POSTHOG_*`
+vars in `.env`. By default these point at PostHog's internal analytics instance,
+so flags you create locally never resolve in the dev build (and flag-gated UI —
+e.g. the agent-platform surface behind the `agent-platform` flag — stays hidden).
+
+To point the flags/analytics client at your local PostHog so locally-synced
+flags take effect:
+
+```bash
+# In your PostHog repo: create + enable all frontend-defined flags locally
+python manage.py sync_feature_flags
+
+# In this repo: rewrite VITE_POSTHOG_* to your local instance, then restart dev
+pnpm posthog:local
+pnpm dev
+```
+
+`pnpm posthog:local` auto-reads the project API key from a sibling `../posthog`
+checkout (or pass it: `pnpm posthog:local phc_xxx`, or set `POSTHOG_DIR`). This
+only affects the analytics/flags client — the data API still uses the **Dev**
+region you pick at login.
+
+> One-off override without changing `.env`: the dev build exposes the client on
+> `window.posthog`, so you can run
+> `posthog.featureFlags.override({ "agent-platform": true })` in the renderer
+> console (clear with `posthog.featureFlags.override(false)`).
+
 ## Troubleshooting
 
 ### "Invalid client_id" error during OAuth
diff --git a/package.json b/package.json
index 3cc027e2f1..eb5dea2f51 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "dev:git": "pnpm --filter @posthog/git dev",
     "dev:code": "pnpm --filter code start",
     "app:cdp": "node scripts/electron-cdp.mjs",
+    "posthog:local": "node scripts/use-local-posthog.mjs",
     "build": "turbo build",
     "build:deps": "turbo build --filter=@posthog/code^...",
     "package": "turbo build && pnpm --filter code package",
diff --git a/packages/api-client/src/agent-analytics.test.ts b/packages/api-client/src/agent-analytics.test.ts
new file mode 100644
index 0000000000..e17d3b06d3
--- /dev/null
+++ b/packages/api-client/src/agent-analytics.test.ts
@@ -0,0 +1,155 @@
+import { describe, expect, it } from "vitest";
+import {
+  type AgentAnalyticsRaw,
+  buildAgentAnalyticsQueries,
+  EMPTY_AGENT_ANALYTICS,
+  type HogQLGrid,
+  shapeAgentAnalytics,
+} from "./agent-analytics";
+
+const grid = (results: unknown[][]): HogQLGrid => ({ results, columns: [] });
+
+// A 14-day daily series where every day is identical, so prior(7) === recent(7)
+// → zero deltas. Columns: [day, cost, sessions, errors, generations].
+function flatDaily(): unknown[][] {
+  return Array.from({ length: 14 }, (_, i) => [
+    `2026-06-${String(i + 1).padStart(2, "0")}T00:00:00`,
+    2, // cost
+    5, // sessions
+    1, // errors
+    10, // generations
+  ]);
+}
+
+describe("buildAgentAnalyticsQueries", () => {
+  it("scopes to agent-platform origin only when no application id", () => {
+    const q = buildAgentAnalyticsQueries();
+    expect(q.kpi).toContain("$ai_origin = 'agent_platform_runner'");
+    expect(q.kpi).not.toContain("$agent_application_id =");
+    expect(q.kpi).toContain("event = '$ai_generation'");
+    expect(q.toolErrors).toContain("event = '$ai_span'");
+  });
+
+  it("narrows to a single application id when given", () => {
+    const q = buildAgentAnalyticsQueries("app-uuid-123");
+    expect(q.kpi).toContain(
+      "properties.$agent_application_id = 'app-uuid-123'",
+    );
+    expect(q.byModel).toContain(
+      "properties.$agent_application_id = 'app-uuid-123'",
+    );
+  });
+});
+
+describe("shapeAgentAnalytics", () => {
+  it("returns an empty board for empty grids", () => {
+    const out = shapeAgentAnalytics({});
+    expect(out.empty).toBe(true);
+    expect(out.kpis).toEqual(EMPTY_AGENT_ANALYTICS.kpis);
+    expect(out.byAgent).toEqual([]);
+    expect(out.deltas).toEqual({
+      spend: null,
+      sessions: null,
+      failureRatePoints: null,
+    });
+  });
+
+  it("derives KPIs incl. failure rate from generations", () => {
+    const raw: Partial<AgentAnalyticsRaw> = {
+      // cost, sessions, errors, generations, p95
+      kpi: grid([[12.5, 8, 3, 12, 4.2]]),
+    };
+    const out = shapeAgentAnalytics(raw);
+    expect(out.kpis.spendUsd).toBe(12.5);
+    expect(out.kpis.sessions).toBe(8);
+    expect(out.kpis.failureRate).toBeCloseTo(3 / 12);
+    expect(out.kpis.p95LatencyS).toBe(4.2);
+    expect(out.empty).toBe(false);
+  });
+
+  it("coerces numeric strings (HogQL returns decimals as strings)", () => {
+    const out = shapeAgentAnalytics({
+      kpi: grid([["1.50", "4", "0", "4", "2"]]),
+    });
+    expect(out.kpis.spendUsd).toBe(1.5);
+    expect(out.kpis.sessions).toBe(4);
+    expect(out.kpis.failureRate).toBe(0);
+  });
+
+  it("builds a 14-day daily series with zero deltas for a flat trend", () => {
+    const out = shapeAgentAnalytics({ daily: grid(flatDaily()) });
+    expect(out.daily.labels).toHaveLength(14);
+    expect(out.daily.spend).toHaveLength(14);
+    expect(out.daily.failureRate.every((r) => r === 0.1)).toBe(true);
+    // prior 7 === recent 7 → 0% change, and failure-rate delta is 0pp.
+    expect(out.deltas.spend).toBe(0);
+    expect(out.deltas.sessions).toBe(0);
+    expect(out.deltas.failureRatePoints).toBe(0);
+  });
+
+  it("computes a positive spend delta when recent exceeds prior", () => {
+    // 7 days at cost 1, then 7 days at cost 3 → +200%.
+    const days = Array.from({ length: 14 }, (_, i) => [
+      `2026-06-${String(i + 1).padStart(2, "0")}T00:00:00`,
+      i < 7 ? 1 : 3,
+      1,
+      0,
+      1,
+    ]);
+    const out = shapeAgentAnalytics({ daily: grid(days) });
+    expect(out.deltas.spend).toBeCloseTo(200);
+  });
+
+  it("maps per-agent rows and resolves names via the id→name map", () => {
+    const raw: Partial<AgentAnalyticsRaw> = {
+      // agent_id, sessions, generations, cost, tokens, errors, p95
+      perAgent: grid([
+        ["11111111-2222-3333-4444-555566667777", 5, 10, 4, 2000, 2, 1.5],
+        ["aaaa", 1, 4, 0.5, 100, 0, 0.2],
+      ]),
+    };
+    const names = new Map([
+      ["11111111-2222-3333-4444-555566667777", "Support Bot"],
+    ]);
+    const out = shapeAgentAnalytics(raw, names);
+    expect(out.byAgent[0]).toMatchObject({
+      name: "Support Bot",
+      sessions: 5,
+      spendUsd: 4,
+      tokens: 2000,
+      p95LatencyS: 1.5,
+    });
+    expect(out.byAgent[0].failureRate).toBeCloseTo(2 / 10);
+    // Unknown id falls back to a short id.
+    expect(out.byAgent[1].name).toBe("aaaa");
+  });
+
+  it("maps model spend and tool error rates", () => {
+    const out = shapeAgentAnalytics({
+      byModel: grid([["claude-opus-4-8", 9.99, 42]]),
+      toolErrors: grid([
+        ["search", 20, 4],
+        ["fetch", 5, 0],
+      ]),
+    });
+    expect(out.byModel[0]).toEqual({
+      model: "claude-opus-4-8",
+      spendUsd: 9.99,
+      calls: 42,
+    });
+    expect(out.toolErrors[0].errorRate).toBeCloseTo(4 / 20);
+    expect(out.toolErrors[1].errorRate).toBe(0);
+  });
+
+  it("ignores non-array rows defensively", () => {
+    const out = shapeAgentAnalytics({
+      kpi: grid([[1, 1, 0, 1, 1]]),
+      perAgent: {
+        results: [null, "oops"] as unknown as unknown[][],
+        columns: [],
+      },
+    });
+    expect(out.byAgent).toEqual([]);
+    expect(out.empty).toBe(false);
+  });
+});
diff --git a/packages/api-client/src/agent-analytics.ts b/packages/api-client/src/agent-analytics.ts
new file mode 100644
index 0000000000..7e1afdb814
--- /dev/null
+++ b/packages/api-client/src/agent-analytics.ts
@@ -0,0 +1,260 @@
+// Agent observability analytics — rolls up the agents' `$ai_*` AI-observability
+// events (the runner captures them into the team's OWN PostHog project) into a
+// cross-agent / per-agent dashboard. Read-only HogQL via the `/query/` endpoint.
+//
+// Everything is scoped to `$ai_origin = 'agent_platform_runner'` so a team's
+// *other* LLM usage (their own posthog-ai apps) never bleeds into the agent
+// view. The runner stamps these props in `agent-shared`'s `analytics-sink`
+// (`$ai_origin`, `$agent_application_id`, `$ai_trace_id`, `$ai_total_cost_usd`,
+// `$ai_latency` in seconds, `$ai_is_error`, `$ai_model`, token counts; tool
+// spans carry `$ai_span_name`).
+//
+// The query builders + shaping are kept here (pure, unit-tested) so the client
+// method stays a thin "fire queries, shape result" passthrough.
+
+import type {
+  AgentAnalyticsData,
+  AgentAnalyticsModelRow,
+  AgentAnalyticsToolRow,
+} from "@posthog/shared/agent-platform-types";
+
+/** A raw HogQL `/query/` result grid: rows of cells plus column names. */
+export interface HogQLGrid {
+  results: unknown[][];
+  columns: string[];
+}
+
+/** The five panels' raw grids, keyed by panel. */
+export interface AgentAnalyticsRaw {
+  kpi: HogQLGrid;
+  daily: HogQLGrid;
+  perAgent: HogQLGrid;
+  byModel: HogQLGrid;
+  toolErrors: HogQLGrid;
+}
+
+/** Only the agents' own traffic — not the team's other LLM events. */
+const AGENT_ORIGIN = "properties.$ai_origin = 'agent_platform_runner'";
+
+/**
+ * Shared WHERE scope. `applicationId` (a trusted UUID from the agent record)
+ * narrows the board to a single agent for the per-agent Observability tab.
+ */
+function scope(applicationId?: string): string {
+  const agent = applicationId
+    ? ` AND properties.$agent_application_id = '${applicationId}'`
+    : "";
+  return `${AGENT_ORIGIN}${agent}`;
+}
+
+const kpiQuery = (id?: string): string => `
+SELECT
+  coalesce(sum(toFloat(properties.$ai_total_cost_usd)), 0) AS cost,
+  uniq(properties.$ai_trace_id) AS sessions,
+  countIf(toString(properties.$ai_is_error) = 'true') AS errors,
+  count() AS generations,
+  coalesce(quantile(0.95)(toFloat(properties.$ai_latency)), 0) AS p95
+FROM events
+WHERE event = '$ai_generation' AND ${scope(id)}
+  AND timestamp > now() - INTERVAL 7 DAY
+`;
+
+const dailyQuery = (id?: string): string => `
+SELECT
+  toStartOfDay(timestamp) AS day,
+  coalesce(sum(toFloat(properties.$ai_total_cost_usd)), 0) AS cost,
+  uniq(properties.$ai_trace_id) AS sessions,
+  countIf(toString(properties.$ai_is_error) = 'true') AS errors,
+  count() AS generations
+FROM events
+WHERE event = '$ai_generation' AND ${scope(id)}
+  AND timestamp > now() - INTERVAL 14 DAY
+GROUP BY day ORDER BY day
+`;
+
+const perAgentQuery = (id?: string): string => `
+SELECT
+  properties.$agent_application_id AS agent_id,
+  uniq(properties.$ai_trace_id) AS sessions,
+  count() AS generations,
+  coalesce(sum(toFloat(properties.$ai_total_cost_usd)), 0) AS cost,
+  coalesce(sum(toInt(properties.$ai_input_tokens)), 0)
+    + coalesce(sum(toInt(properties.$ai_output_tokens)), 0) AS tokens,
+  countIf(toString(properties.$ai_is_error) = 'true') AS errors,
+  coalesce(quantile(0.95)(toFloat(properties.$ai_latency)), 0) AS p95
+FROM events
+WHERE event = '$ai_generation' AND ${scope(id)}
+  AND timestamp > now() - INTERVAL 7 DAY AND notEmpty(properties.$agent_application_id)
+GROUP BY agent_id ORDER BY cost DESC LIMIT 50
+`;
+
+const byModelQuery = (id?: string): string => `
+SELECT
+  properties.$ai_model AS model,
+  coalesce(sum(toFloat(properties.$ai_total_cost_usd)), 0) AS cost,
+  count() AS calls
+FROM events
+WHERE event = '$ai_generation' AND ${scope(id)}
+  AND timestamp > now() - INTERVAL 7 DAY AND notEmpty(properties.$ai_model)
+GROUP BY model ORDER BY cost DESC LIMIT 8
+`;
+
+const toolErrorsQuery = (id?: string): string => `
+SELECT
+  properties.$ai_span_name AS tool,
+  count() AS calls,
+  countIf(toString(properties.$ai_is_error) = 'true') AS errors
+FROM events
+WHERE event = '$ai_span' AND ${scope(id)}
+  AND timestamp > now() - INTERVAL 7 DAY AND notEmpty(properties.$ai_span_name)
+GROUP BY tool ORDER BY errors DESC, calls DESC LIMIT 8
+`;
+
+/**
+ * Build the five panel queries. `applicationId` scopes them to a single agent
+ * (the per-agent Observability tab); omit it for the fleet-wide board.
+ */
+export function buildAgentAnalyticsQueries(applicationId?: string): {
+  kpi: string;
+  daily: string;
+  perAgent: string;
+  byModel: string;
+  toolErrors: string;
+} {
+  return {
+    kpi: kpiQuery(applicationId),
+    daily: dailyQuery(applicationId),
+    perAgent: perAgentQuery(applicationId),
+    byModel: byModelQuery(applicationId),
+    toolErrors: toolErrorsQuery(applicationId),
+  };
+}
+
+const EMPTY_GRID: HogQLGrid = { results: [], columns: [] };
+
+/** Zeroed placeholder rendered while the first load is in flight. */
+export const EMPTY_AGENT_ANALYTICS: AgentAnalyticsData = {
+  kpis: { spendUsd: 0, sessions: 0, failureRate: 0, p95LatencyS: 0 },
+  daily: { labels: [], spend: [], sessions: [], failureRate: [] },
+  deltas: { spend: null, sessions: null, failureRatePoints: null },
+  byAgent: [],
+  byModel: [],
+  toolErrors: [],
+  empty: true,
+};
+
+function num(v: unknown): number {
+  const n = typeof v === "number" ? v : Number(v);
+  return Number.isFinite(n) ? n : 0;
+}
+
+function pctChange(recent: number, prior: number): number | null {
+  if (prior <= 0) {
+    return null;
+  }
+  return ((recent - prior) / prior) * 100;
+}
+
+function shortId(id: string): string {
+  return id.split("-").at(-1)?.slice(0, 8) ?? id.slice(0, 8);
+}
+
+function formatDay(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) {
+    return iso.slice(5, 10);
+  }
+  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+
+/** Coerce a raw HogQL grid into rows of cells, dropping non-array rows. */
+function rows(grid: HogQLGrid | undefined): unknown[][] {
+  return (grid?.results ?? []).filter((r): r is unknown[] => Array.isArray(r));
+}
+
+/**
+ * Fold the five raw HogQL grids into the analytics dashboard shape. Pure: the
+ * caller fires the queries (and resolves `nameById` from the agent list).
+ */
+export function shapeAgentAnalytics(
+  raw: Partial<AgentAnalyticsRaw>,
+  nameById: Map<string, string> = new Map(),
+): AgentAnalyticsData {
+  // KPIs (single row): cost, sessions, errors, generations, p95
+  const k = rows(raw.kpi)[0] ?? [0, 0, 0, 0, 0];
+  const generations = num(k[3]);
+  const kpis = {
+    spendUsd: num(k[0]),
+    sessions: num(k[1]),
+    failureRate: generations > 0 ? num(k[2]) / generations : 0,
+    p95LatencyS: num(k[4]),
+  };
+
+  // Daily 14-day series → sparklines + prior-vs-recent deltas.
+  const dayRows = rows(raw.daily);
+  const labels = dayRows.map((r) => formatDay(String(r[0])));
+  const spend = dayRows.map((r) => num(r[1]));
+  const sessionsByDay = dayRows.map((r) => num(r[2]));
+  const errorsByDay = dayRows.map((r) => num(r[3]));
+  const genByDay = dayRows.map((r) => num(r[4]));
+  const failureRate = dayRows.map((_, i) =>
+    genByDay[i] > 0 ? errorsByDay[i] / genByDay[i] : 0,
+  );
+
+  const recent = (arr: number[]): number =>
+    arr.slice(-7).reduce((s, v) => s + v, 0);
+  const prior = (arr: number[]): number =>
+    arr.slice(0, Math.max(0, arr.length - 7)).reduce((s, v) => s + v, 0);
+  const recentGen = recent(genByDay);
+  const priorGen = prior(genByDay);
+  const recentRate = recentGen > 0 ? recent(errorsByDay) / recentGen : 0;
+  const priorRate = priorGen > 0 ? prior(errorsByDay) / priorGen : 0;
+  const deltas = {
+    spend: pctChange(recent(spend), prior(spend)),
+    sessions: pctChange(recent(sessionsByDay), prior(sessionsByDay)),
+    failureRatePoints: priorGen > 0 ? (recentRate - priorRate) * 100 : null,
+  };
+
+  const byAgent = rows(raw.perAgent).map((r) => {
+    const id = String(r[0]);
+    const gens = num(r[2]);
+    return {
+      id,
+      name: nameById.get(id) ?? shortId(id),
+      sessions: num(r[1]),
+      spendUsd: num(r[3]),
+      tokens: num(r[4]),
+      failureRate: gens > 0 ? num(r[5]) / gens : 0,
+      p95LatencyS: num(r[6]),
+    };
+  });
+
+  const byModel: AgentAnalyticsModelRow[] = rows(raw.byModel).map((r) => ({
+    model: String(r[0]),
+    spendUsd: num(r[1]),
+    calls: num(r[2]),
+  }));
+
+  const toolErrors: AgentAnalyticsToolRow[] = rows(raw.toolErrors).map((r) => {
+    const calls = num(r[1]);
+    const errors = num(r[2]);
+    return {
+      tool: String(r[0]),
+      calls,
+      errors,
+      errorRate: calls > 0 ? errors / calls : 0,
+    };
+  });
+
+  return {
+    kpis,
+    daily: { labels, spend, sessions: sessionsByDay, failureRate },
+    deltas,
+    byAgent,
+    byModel,
+    toolErrors,
+    empty: kpis.sessions === 0 && byAgent.length === 0 && generations === 0,
+  };
+}
+
+export { EMPTY_GRID };
diff --git a/packages/api-client/src/posthog-client.ts b/packages/api-client/src/posthog-client.ts
index e4e76e63eb..40d1e43da8 100644
--- a/packages/api-client/src/posthog-client.ts
+++ b/packages/api-client/src/posthog-client.ts
@@ -12,6 +12,28 @@ import {
   type DismissalReasonOptionValue,
   SEAT_PRODUCT_KEY,
 } from "@posthog/shared";
+import type {
+  AgentAnalyticsData,
+  AgentApplication,
+  AgentApplicationSessionDetail,
+  AgentApplicationSessionsListResponse,
+  AgentApprovalRequest,
+  AgentApprovalsListParams,
+  AgentFleetLiveSessionsResponse,
+  AgentMemoryFile,
+  AgentMemorySearchResult,
+  AgentMemoryTableHeader,
+  AgentMemoryTableRows,
+  AgentMemoryTreeNode,
+  AgentRevision,
+  AgentSessionEvent,
+  AgentSessionLogEntry,
+  AgentSessionLogsParams,
+  AgentSessionsListParams,
+  AgentSlackManifest,
+  BundleFile,
+  DecideApprovalRequest,
+} from "@posthog/shared/agent-platform-types";
 import type {
   ActionabilityJudgmentArtefact,
   AvailableSuggestedReviewer,
@@ -42,6 +64,11 @@ import type {
   Task,
   TaskRun,
 } from "@posthog/shared/domain-types";
+import {
+  buildAgentAnalyticsQueries,
+  type HogQLGrid,
+  shapeAgentAnalytics,
+} from "./agent-analytics";
 import { buildApiFetcher } from "./fetcher";
 import { createApiClient, type Schemas } from "./generated";
 import type { SpendAnalysisResponse } from "./spend-analysis";
@@ -3969,4 +3996,729 @@ export class PostHogAPIClient {
     }
     return (await response.json()) as LlmSkillFile;
   }
+
+  // --- Agent platform ------------------------------------------------------
+  // Deployed agents (`agent_platform` Django app). These routes aren't in the
+  // generated OpenAPI client, so they use the raw fetcher. Applications are
+  // addressable by UUID or slug in the `{idOrSlug}` segment.
+
+  private agentApplicationsPath(teamId: number): string {
+    return `/api/projects/${teamId}/agent_applications/`;
+  }
+
+  /** Lists non-archived agent applications for the current team. */
+  async listAgentApplications(): Promise<AgentApplication[]> {
+    const MAX_PAGES = 50;
+    const teamId = await this.getTeamId();
+    const all: AgentApplication[] = [];
+    let urlPath = `${this.agentApplicationsPath(teamId)}?limit=100`;
+    for (let i = 0; i < MAX_PAGES; i++) {
+      const url = new URL(`${this.api.baseUrl}${urlPath}`);
+      const response = await this.api.fetcher.fetch({
+        method: "get",
+        url,
+        path: urlPath,
+      });
+      const page = (await response.json()) as {
+        results?: AgentApplication[];
+        next?: string | null;
+      };
+      all.push(...(page.results ?? []));
+      if (!page.next) return all;
+      const nextUrl = new URL(page.next);
+      urlPath = `${nextUrl.pathname}${nextUrl.search}`;
+    }
+    return all;
+  }
+
+  /** Fetches a single agent application by UUID or slug; null if not found. */
+  async getAgentApplication(
+    idOrSlug: string,
+  ): Promise<AgentApplication | null> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    try {
+      const response = await this.api.fetcher.fetch({
+        method: "get",
+        url,
+        path,
+      });
+      return (await response.json()) as AgentApplication;
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : String(error);
+      if (msg.includes("[404]") || msg.includes("[403]")) {
+        return null;
+      }
+      throw error;
+    }
+  }
+
+  /** Lists sessions for an application (paginated, filterable by state). */
+  async listAgentApplicationSessions(
+    idOrSlug: string,
+    params?: AgentSessionsListParams,
+  ): Promise<AgentApplicationSessionsListResponse> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/sessions/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    if (params?.limit != null) {
+      url.searchParams.set("limit", String(params.limit));
+    }
+    if (params?.offset != null) {
+      url.searchParams.set("offset", String(params.offset));
+    }
+    if (params?.state?.length) {
+      url.searchParams.set("state", params.state.join(","));
+    }
+    if (params?.revision_id) {
+      url.searchParams.set("revision_id", params.revision_id);
+    }
+    if (params?.created_after) {
+      url.searchParams.set("created_after", params.created_after);
+    }
+    if (params?.created_before) {
+      url.searchParams.set("created_before", params.created_before);
+    }
+    const response = await this.api.fetcher.fetch({ method: "get", url, path });
+    const data = (await response.json()) as {
+      results?: AgentApplicationSessionsListResponse["results"];
+      count?: number;
+    };
+    return {
+      results: data.results ?? [],
+      count: data.count ?? data.results?.length ?? 0,
+    };
+  }
+
+  /** Full session detail incl. transcript; `lastN` trims to trailing messages. */
+  async getAgentApplicationSession(
+    idOrSlug: string,
+    sessionId: string,
+    lastN?: number,
+  ): Promise<AgentApplicationSessionDetail | null> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/sessions/${encodeURIComponent(sessionId)}/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    if (lastN != null) {
+      url.searchParams.set("last_n", String(lastN));
+    }
+    try {
+      const response = await this.api.fetcher.fetch({
+        method: "get",
+        url,
+        path,
+      });
+      return (await response.json()) as AgentApplicationSessionDetail;
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : String(error);
+      if (msg.includes("[404]") || msg.includes("[403]")) {
+        return null;
+      }
+      throw error;
+    }
+  }
+
+  /** Structured runtime logs for one session (ClickHouse log_entries). */
+  async getAgentApplicationSessionLogs(
+    idOrSlug: string,
+    sessionId: string,
+    params?: AgentSessionLogsParams,
+  ): Promise<AgentSessionLogEntry[]> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/sessions/${encodeURIComponent(sessionId)}/logs/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    if (params?.limit != null) {
+      url.searchParams.set("limit", String(params.limit));
+    }
+    if (params?.level?.length) {
+      url.searchParams.set("level", params.level.join(","));
+    }
+    if (params?.search) {
+      url.searchParams.set("search", params.search);
+    }
+    if (params?.after) {
+      url.searchParams.set("after", params.after);
+    }
+    if (params?.before) {
+      url.searchParams.set("before", params.before);
+    }
+    const response = await this.api.fetcher.fetch({ method: "get", url, path });
+    const data = (await response.json()) as {
+      results?: AgentSessionLogEntry[];
+    };
+    return data.results ?? [];
+  }
+
+  /** Lists tool-approval requests for an application (team-admin only). */
+  async listAgentApplicationApprovals(
+    idOrSlug: string,
+    params?: AgentApprovalsListParams,
+  ): Promise<AgentApprovalRequest[]> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/approvals/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    if (params?.state) {
+      url.searchParams.set("state", params.state);
+    }
+    if (params?.limit != null) {
+      url.searchParams.set("limit", String(params.limit));
+    }
+    if (params?.offset != null) {
+      url.searchParams.set("offset", String(params.offset));
+    }
+    const response = await this.api.fetcher.fetch({ method: "get", url, path });
+    const data = (await response.json()) as {
+      results?: AgentApprovalRequest[];
+    };
+    return data.results ?? [];
+  }
+
+  /** Approve or reject a queued tool-approval request. */
+  async decideAgentApproval(
+    idOrSlug: string,
+    approvalId: string,
+    body: DecideApprovalRequest,
+  ): Promise<AgentApprovalRequest> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/approvals/${encodeURIComponent(approvalId)}/decide/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    const response = await this.api.fetcher.fetch({
+      method: "post",
+      url,
+      path,
+      overrides: { body: JSON.stringify(body) },
+    });
+    return (await response.json()) as AgentApprovalRequest;
+  }
+
+  /** Lists revisions for an application (newest first, paginated). */
+  async listAgentRevisions(idOrSlug: string): Promise<AgentRevision[]> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/revisions/`;
+    const url = new URL(`${this.api.baseUrl}${path}?limit=100`);
+    const response = await this.api.fetcher.fetch({ method: "get", url, path });
+    const data = (await response.json()) as { results?: AgentRevision[] };
+    return data.results ?? [];
+  }
+
+  /** Fetches a single revision by id; null if not found. */
+  async getAgentRevision(
+    idOrSlug: string,
+    revisionId: string,
+  ): Promise<AgentRevision | null> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/revisions/${encodeURIComponent(revisionId)}/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    try {
+      const response = await this.api.fetcher.fetch({
+        method: "get",
+        url,
+        path,
+      });
+      return (await response.json()) as AgentRevision;
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : String(error);
+      if (msg.includes("[404]") || msg.includes("[403]")) {
+        return null;
+      }
+      throw error;
+    }
+  }
+
+  /** Run a revision lifecycle transition: freeze (draft→ready), promote
+   * (ready→live, demoting the old live), or archive. Returns the updated revision. */
+  async transitionAgentRevision(
+    idOrSlug: string,
+    revisionId: string,
+    action: "freeze" | "promote" | "archive",
+  ): Promise<AgentRevision> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/revisions/${encodeURIComponent(revisionId)}/${action}/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    const response = await this.api.fetcher.fetch({
+      method: "post",
+      url,
+      path,
+    });
+    return (await response.json()) as AgentRevision;
+  }
+
+  /**
+   * A revision's bundle, flattened to per-file rows. The server returns a typed
+   * `{ bundle: { agent_md, skills[], tools[] } }`; we expand it to the canonical
+   * file paths the explorer renders (agent.md, skills/<id>/SKILL.md,
+   * tools/<id>/source.ts, tools/<id>/schema.json).
+   */
+  async getAgentRevisionBundle(
+    idOrSlug: string,
+    revisionId: string,
+  ): Promise<BundleFile[]> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/revisions/${encodeURIComponent(revisionId)}/bundle/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    const response = await this.api.fetcher.fetch({ method: "get", url, path });
+    const data = (await response.json()) as {
+      bundle?: {
+        agent_md?: string;
+        skills?: { id: string; description?: string; body: string }[];
+        tools?: {
+          id: string;
+          description?: string;
+          args_schema?: Record<string, unknown>;
+          source: string;
+        }[];
+      };
+    };
+    const bundle = data.bundle ?? {};
+    const out: BundleFile[] = [];
+    if (bundle.agent_md !== undefined) {
+      out.push({
+        path: "agent.md",
+        content: bundle.agent_md,
+        language: "markdown",
+      });
+    }
+    for (const skill of bundle.skills ?? []) {
+      out.push({
+        path: `skills/${skill.id}/SKILL.md`,
+        content: skill.body,
+        language: "markdown",
+      });
+    }
+    for (const tool of bundle.tools ?? []) {
+      out.push({
+        path: `tools/${tool.id}/source.ts`,
+        content: tool.source,
+        language: "typescript",
+      });
+      out.push({
+        path: `tools/${tool.id}/schema.json`,
+        content: JSON.stringify(
+          { description: tool.description, args_schema: tool.args_schema },
+          null,
+          2,
+        ),
+        language: "json",
+      });
+    }
+    out.sort((a, b) => a.path.localeCompare(b.path));
+    return out;
+  }
+
+  /**
+   * The Slack app manifest derived from a revision's slack trigger + tools,
+   * plus the live Event/Interactivity request URLs and setup notes.
+   */
+  async getAgentSlackManifest(
+    idOrSlug: string,
+    revisionId: string,
+  ): Promise<AgentSlackManifest> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/revisions/${encodeURIComponent(revisionId)}/slack_manifest/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    const response = await this.api.fetcher.fetch({ method: "get", url, path });
+    return (await response.json()) as AgentSlackManifest;
+  }
+
+  /** Fire a cron trigger out-of-band; returns the created session id. */
+  async fireAgentCron(
+    idOrSlug: string,
+    revisionId: string,
+    cronName: string,
+    requestId?: string,
+  ): Promise<{ session_id: string }> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/revisions/${encodeURIComponent(revisionId)}/cron/fire/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    const response = await this.api.fetcher.fetch({
+      method: "post",
+      url,
+      path,
+      overrides: {
+        body: JSON.stringify({
+          cron_name: cronName,
+          ...(requestId ? { request_id: requestId } : {}),
+        }),
+      },
+    });
+    return (await response.json()) as { session_id: string };
+  }
+
+  /** The names of env keys currently set on an agent (values never returned). */
+  async listAgentEnvKeys(idOrSlug: string): Promise<string[]> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/env_keys/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    const response = await this.api.fetcher.fetch({ method: "get", url, path });
+    const data = (await response.json()) as {
+      keys?: string[];
+      results?: string[];
+    };
+    return data.keys ?? data.results ?? [];
+  }
+
+  /** Set or rotate one encrypted env key. The value is write-only. */
+  async setAgentEnvKey(
+    idOrSlug: string,
+    key: string,
+    value: string,
+  ): Promise<void> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/env_keys/${encodeURIComponent(key)}/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    await this.api.fetcher.fetch({
+      method: "put",
+      url,
+      path,
+      overrides: { body: JSON.stringify({ value }) },
+    });
+  }
+
+  /** Clear one encrypted env key. No-op server-side if it isn't set. */
+  async clearAgentEnvKey(idOrSlug: string, key: string): Promise<void> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/env_keys/${encodeURIComponent(key)}/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    await this.api.fetcher.fetch({ method: "delete", url, path });
+  }
+
+  private agentMemoryPath(teamId: number, idOrSlug: string): string {
+    return `${this.agentApplicationsPath(teamId)}${encodeURIComponent(idOrSlug)}/memory`;
+  }
+
+  /** Pre-aggregated folder tree of the agent's memory store. */
+  async getAgentMemoryTree(idOrSlug: string): Promise<AgentMemoryTreeNode> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentMemoryPath(teamId, idOrSlug)}/tree/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    const response = await this.api.fetcher.fetch({ method: "get", url, path });
+    const data = (await response.json()) as { root?: AgentMemoryTreeNode };
+    return data.root ?? { name: "root", type: "folder", children: [] };
+  }
+
+  /** Read one memory file (header + content). */
+  async readAgentMemoryFile(
+    idOrSlug: string,
+    filePath: string,
+  ): Promise<AgentMemoryFile> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentMemoryPath(teamId, idOrSlug)}/files/by_path/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    url.searchParams.set("path", filePath);
+    const response = await this.api.fetcher.fetch({ method: "get", url, path });
+    return (await response.json()) as AgentMemoryFile;
+  }
+
+  /** BM25 full-text search across the agent's memory. */
+  async searchAgentMemory(
+    idOrSlug: string,
+    query: string,
+    limit?: number,
+  ): Promise<AgentMemorySearchResult[]> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentMemoryPath(teamId, idOrSlug)}/search/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    url.searchParams.set("q", query);
+    if (limit != null) url.searchParams.set("limit", String(limit));
+    const response = await this.api.fetcher.fetch({ method: "get", url, path });
+    const data = (await response.json()) as {
+      results?: AgentMemorySearchResult[];
+    };
+    return data.results ?? [];
+  }
+
+  /** List the agent's JSONL reference tables. */
+  async listAgentMemoryTables(
+    idOrSlug: string,
+  ): Promise<AgentMemoryTableHeader[]> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentMemoryPath(teamId, idOrSlug)}/tables/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    const response = await this.api.fetcher.fetch({ method: "get", url, path });
+    const data = (await response.json()) as {
+      tables?: AgentMemoryTableHeader[];
+    };
+    return data.tables ?? [];
+  }
+
+  /** Read rows from one memory table. */
+  async readAgentMemoryTable(
+    idOrSlug: string,
+    name: string,
+    limit?: number,
+  ): Promise<AgentMemoryTableRows> {
+    const teamId = await this.getTeamId();
+    const path = `${this.agentMemoryPath(teamId, idOrSlug)}/tables/${encodeURIComponent(name)}/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    if (limit != null) url.searchParams.set("limit", String(limit));
+    const response = await this.api.fetcher.fetch({ method: "get", url, path });
+    return (await response.json()) as AgentMemoryTableRows;
+  }
+
+  // --- Live chat (agent-ingress) -------------------------------------------
+  // These hit the agent's ingress host (`ingress_base_url`, which already
+  // includes `/agents/<slug>`), not the PostHog API. The shared fetcher
+  // attaches the same bearer regardless of host, so no proxy is needed (unlike
+  // the console, which proxied only because browser EventSource can't set
+  // an Authorization header — `fetch` can).
+
+  /** Start a chat session; returns the new session id. */
+  async runAgentSession(
+    ingressBaseUrl: string,
+    message: string,
+  ): Promise<{ session_id: string; resumed?: boolean }> {
+    const url = new URL(`${ingressBaseUrl.replace(/\/$/, "")}/run`);
+    const response = await this.api.fetcher.fetch({
+      method: "post",
+      url,
+      path: url.pathname,
+      overrides: { body: JSON.stringify({ message }) },
+    });
+    return (await response.json()) as { session_id: string; resumed?: boolean };
+  }
+
+  /** Send a follow-up user message to an open session. */
+  async sendAgentMessage(
+    ingressBaseUrl: string,
+    sessionId: string,
+    message: string,
+  ): Promise<void> {
+    const url = new URL(`${ingressBaseUrl.replace(/\/$/, "")}/send`);
+    await this.api.fetcher.fetch({
+      method: "post",
+      url,
+      path: url.pathname,
+      overrides: { body: JSON.stringify({ session_id: sessionId, message }) },
+    });
+  }
+
+  /** Return a client-tool result to an open session. */
+  async sendAgentClientToolResult(
+    ingressBaseUrl: string,
+    sessionId: string,
+    callId: string,
+    outcome: { result?: unknown; error?: string },
+  ): Promise<void> {
+    const url = new URL(
+      `${ingressBaseUrl.replace(/\/$/, "")}/client_tool_result`,
+    );
+    await this.api.fetcher.fetch({
+      method: "post",
+      url,
+      path: url.pathname,
+      overrides: {
+        body: JSON.stringify({
+          session_id: sessionId,
+          call_id: callId,
+          ...outcome,
+        }),
+      },
+    });
+  }
+
+  /**
+   * Return an *interactive* client-tool outcome (e.g. `set_secret`). Unlike the
+   * sync `/client_tool_result` path, the server-side tool returned `queued` and
+   * parked the session; posting the outcome via `/send` (as a `client_tool_result`
+   * marker) wakes it on a fresh turn. Exactly one of `result` / `error` is set.
+   */
+  async sendAgentInteractiveToolResult(
+    ingressBaseUrl: string,
+    sessionId: string,
+    callId: string,
+    outcome: { result: Record<string, unknown> } | { error: string },
+  ): Promise<void> {
+    const url = new URL(`${ingressBaseUrl.replace(/\/$/, "")}/send`);
+    const clientToolResult =
+      "error" in outcome
+        ? { call_id: callId, error: outcome.error }
+        : { call_id: callId, result: outcome.result };
+    await this.api.fetcher.fetch({
+      method: "post",
+      url,
+      path: url.pathname,
+      overrides: {
+        body: JSON.stringify({
+          session_id: sessionId,
+          client_tool_result: clientToolResult,
+        }),
+      },
+    });
+  }
+
+  /** Cancel an open session (terminal). */
+  async cancelAgentSession(
+    ingressBaseUrl: string,
+    sessionId: string,
+  ): Promise<void> {
+    const url = new URL(`${ingressBaseUrl.replace(/\/$/, "")}/cancel`);
+    await this.api.fetcher.fetch({
+      method: "post",
+      url,
+      path: url.pathname,
+      overrides: { body: JSON.stringify({ session_id: sessionId }) },
+    });
+  }
+
+  /**
+   * Stream a session's SSE events as an async iterator. Reads the raw response
+   * body and parses `text/event-stream` frames into `AgentSessionEvent`s.
+   */
+  async *streamAgentSession(
+    ingressBaseUrl: string,
+    sessionId: string,
+    signal?: AbortSignal,
+  ): AsyncGenerator<AgentSessionEvent> {
+    const url = new URL(`${ingressBaseUrl.replace(/\/$/, "")}/listen`);
+    url.searchParams.set("session_id", sessionId);
+    // NB: only `signal` in overrides. Passing `headers` here would replace the
+    // fetcher's Authorization header (it spreads overrides over the built
+    // headers), which 401s the stream. /listen streams SSE without an explicit
+    // Accept header.
+    const response = await this.api.fetcher.fetch({
+      method: "get",
+      url,
+      path: url.pathname,
+      overrides: { signal },
+    });
+    if (!response.body) return;
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        // Frames are separated by a blank line.
+        let sep = buffer.indexOf("\n\n");
+        while (sep !== -1) {
+          const frame = buffer.slice(0, sep);
+          buffer = buffer.slice(sep + 2);
+          const data = frame
+            .split("\n")
+            .filter((line) => line.startsWith("data:"))
+            .map((line) => line.slice(5).trimStart())
+            .join("\n");
+          if (data) {
+            try {
+              yield JSON.parse(data) as AgentSessionEvent;
+            } catch {
+              // Skip unparseable frames (keep-alives, comments).
+            }
+          }
+          sep = buffer.indexOf("\n\n");
+        }
+      }
+    } finally {
+      reader.releaseLock();
+    }
+  }
+
+  /** Live (non-terminal) sessions across every agent on the team. */
+  async listAgentFleetLiveSessions(
+    limit?: number,
+  ): Promise<AgentFleetLiveSessionsResponse> {
+    const teamId = await this.getTeamId();
+    const path = `/api/projects/${teamId}/agent_fleet/live_sessions/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    if (limit != null) {
+      url.searchParams.set("limit", String(limit));
+    }
+    const response = await this.api.fetcher.fetch({ method: "get", url, path });
+    const data = (await response.json()) as {
+      results?: AgentFleetLiveSessionsResponse["results"];
+    };
+    return { results: data.results ?? [] };
+  }
+
+  /** All tool-approval requests across the team (team-admin only). */
+  async listAgentFleetApprovals(
+    params?: AgentApprovalsListParams,
+  ): Promise<AgentApprovalRequest[]> {
+    const teamId = await this.getTeamId();
+    const path = `/api/projects/${teamId}/agent_fleet/approvals/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    if (params?.state) {
+      url.searchParams.set("state", params.state);
+    }
+    if (params?.agent_id) {
+      url.searchParams.set("agent_id", params.agent_id);
+    }
+    if (params?.limit != null) {
+      url.searchParams.set("limit", String(params.limit));
+    }
+    if (params?.offset != null) {
+      url.searchParams.set("offset", String(params.offset));
+    }
+    const response = await this.api.fetcher.fetch({ method: "get", url, path });
+    const data = (await response.json()) as {
+      results?: AgentApprovalRequest[];
+    };
+    return data.results ?? [];
+  }
+
+  /**
+   * Runs a read-only HogQL query against the team's project and returns the raw
+   * result grid. Backs the agent observability rollups (`$ai_*` events the
+   * runner captures into this team's own project). The endpoint can answer 200
+   * with an `error` field; that's surfaced as a throw.
+   */
+  async runHogQLQuery(query: string): Promise<HogQLGrid> {
+    const teamId = await this.getTeamId();
+    const path = `/api/projects/${teamId}/query/`;
+    const url = new URL(`${this.api.baseUrl}${path}`);
+    const response = await this.api.fetcher.fetch({
+      method: "post",
+      url,
+      path,
+      overrides: {
+        body: JSON.stringify({ query: { kind: "HogQLQuery", query } }),
+      },
+    });
+    const data = (await response.json()) as {
+      results?: unknown[][];
+      columns?: string[];
+      error?: string | null;
+    };
+    if (data.error) {
+      throw new Error(data.error);
+    }
+    return { results: data.results ?? [], columns: data.columns ?? [] };
+  }
+
+  /**
+   * Agent observability rollup over the agents' `$ai_*` events — KPIs (spend,
+   * sessions, failure rate, p95), a 14-day daily trend + WoW deltas, and
+   * spend-by-agent / cost-by-model / tool-reliability breakdowns. Pass an
+   * `applicationId` (the agent's UUID) to scope it to a single agent; omit it
+   * for the fleet-wide board.
+   *
+   * The five panels are independent HogQL round-trips fired in parallel. The
+   * KPI query is the gate — a systemic failure (auth, bad query) rejects the
+   * whole call so the UI shows an error rather than a silently-empty board; the
+   * secondary panels degrade to empty individually. The fleet board also reads
+   * the agent list to label per-agent rows by name.
+   */
+  async getAgentAnalytics(applicationId?: string): Promise<AgentAnalyticsData> {
+    const queries = buildAgentAnalyticsQueries(applicationId);
+    const empty: HogQLGrid = { results: [], columns: [] };
+    const [agents, kpi, daily, perAgent, byModel, toolErrors] =
+      await Promise.all([
+        applicationId
+          ? Promise.resolve<AgentApplication[]>([])
+          : this.listAgentApplications().catch(() => [] as AgentApplication[]),
+        this.runHogQLQuery(queries.kpi),
+        this.runHogQLQuery(queries.daily).catch(() => empty),
+        this.runHogQLQuery(queries.perAgent).catch(() => empty),
+        this.runHogQLQuery(queries.byModel).catch(() => empty),
+        this.runHogQLQuery(queries.toolErrors).catch(() => empty),
+      ]);
+    const nameById = new Map(agents.map((a) => [a.id, a.name]));
+    return shapeAgentAnalytics(
+      { kpi, daily, perAgent, byModel, toolErrors },
+      nameById,
+    );
+  }
 }
diff --git a/packages/core/src/agent-chat/agentChatStore.ts b/packages/core/src/agent-chat/agentChatStore.ts
new file mode 100644
index 0000000000..9f4bbfca89
--- /dev/null
+++ b/packages/core/src/agent-chat/agentChatStore.ts
@@ -0,0 +1,88 @@
+import type { AcpMessage } from "@posthog/shared";
+import { createStore } from "zustand/vanilla";
+
+/**
+ * Domain state for deployed-agent live chats. Keyed by an opaque `chatId` so
+ * several chats can be live at once — e.g. the always-on agent builder dock
+ * (`"agent-builder"`) and a per-agent preview (`"preview:<slug>"`) side by side.
+ * The UI hook (`useAgentChat`) owns the transport (run/send/cancel + the SSE
+ * loop, via the api-client) and pumps mapped `AcpMessage`s in here; components
+ * read one chat by id and render it through `ConversationView`.
+ */
+
+export type AgentChatStatus =
+  | "idle"
+  | "starting"
+  | "streaming"
+  | "awaiting_input"
+  | "completed"
+  | "failed"
+  | "cancelled";
+
+export interface AgentChatState {
+  /** Which agent this chat targets (slug), or null when idle. */
+  agentKey: string | null;
+  sessionId: string | null;
+  status: AgentChatStatus;
+  /** Accumulated ACP messages (mapper output) for ConversationView. */
+  messages: AcpMessage[];
+  error: string | null;
+}
+
+export const EMPTY_CHAT: AgentChatState = {
+  agentKey: null,
+  sessionId: null,
+  status: "idle",
+  messages: [],
+  error: null,
+};
+
+interface AgentChatStore {
+  /** All live chats, keyed by `chatId`. */
+  chats: Record<string, AgentChatState>;
+
+  /** Reset `chatId` for a brand-new chat against `agentKey`. */
+  begin: (chatId: string, agentKey: string) => void;
+  setSessionId: (chatId: string, sessionId: string) => void;
+  setStatus: (chatId: string, status: AgentChatStatus) => void;
+  appendMessages: (chatId: string, messages: AcpMessage[]) => void;
+  setError: (chatId: string, error: string | null) => void;
+  reset: (chatId: string) => void;
+}
+
+export const agentChatStore = createStore<AgentChatStore>((set) => {
+  const patch = (
+    chatId: string,
+    next: Partial<AgentChatState>,
+  ): ((s: AgentChatStore) => AgentChatStore) => {
+    return (s) => ({
+      ...s,
+      chats: {
+        ...s.chats,
+        [chatId]: { ...(s.chats[chatId] ?? EMPTY_CHAT), ...next },
+      },
+    });
+  };
+
+  return {
+    chats: {},
+    begin: (chatId, agentKey) =>
+      set(patch(chatId, { ...EMPTY_CHAT, agentKey, status: "starting" })),
+    setSessionId: (chatId, sessionId) => set(patch(chatId, { sessionId })),
+    setStatus: (chatId, status) => set(patch(chatId, { status })),
+    appendMessages: (chatId, messages) =>
+      set((s) => {
+        if (messages.length === 0) return s;
+        const cur = s.chats[chatId] ?? EMPTY_CHAT;
+        return {
+          ...s,
+          chats: {
+            ...s.chats,
+            [chatId]: { ...cur, messages: [...cur.messages, ...messages] },
+          },
+        };
+      }),
+    setError: (chatId, error) => set(patch(chatId, { error })),
+    reset: (chatId) => set(patch(chatId, { ...EMPTY_CHAT })),
+  };
+});
diff --git a/packages/core/src/auth/auth.ts b/packages/core/src/auth/auth.ts
index 28045f2efe..bdfd59847e 100644
--- a/packages/core/src/auth/auth.ts
+++ b/packages/core/src/auth/auth.ts
@@ -555,17 +555,49 @@ export class AuthService extends TypedEventEmitter<AuthServiceEvents> {
     options: TokenResponseOptions,
   ): Promise<InMemorySession> {
     const scopedOrgIds = tokenResponse.scoped_organizations ?? [];
-    const { accountKey, currentOrgId } = await this.fetchUserContext(
-      tokenResponse.access_token,
-      options.cloudRegion,
+    const { accountKey, currentOrgId, currentOrgProjects } =
+      await this.fetchUserContext(
+        tokenResponse.access_token,
+        options.cloudRegion,
+      );
+    // If /api/users/@me/ already carried `organization.teams[]` for the
+    // current org, use that as a seed for the org map. This unblocks Local
+    // Development OAuth, where tokens are project-scoped and can't hit
+    // /api/organizations/{id}/ at all (returns 403 "API keys with scoped
+    // projects are only supported on project-based endpoints."), so the
+    // /organizations fetch in buildOrgProjectsMap would otherwise leave the
+    // map empty. Only seed when @me/ actually returned projects — otherwise
+    // we'd clobber previously-known data on refresh.
+    const seedMap: OrgProjectsMap = {
+      ...(this.session?.orgProjectsMap ?? {}),
+    };
+    const haveCurrentOrgFromMe = !!(
+      currentOrgId &&
+      currentOrgProjects &&
+      currentOrgProjects.projects.length > 0
     );
+    if (haveCurrentOrgFromMe && currentOrgId && currentOrgProjects) {
+      seedMap[currentOrgId] = currentOrgProjects;
+    }
+    // When the backend grants no scoped orgs but @me/ already gave us the
+    // current org's projects, skip the org fetch entirely (the seed has what
+    // we need). Without @me/ projects and without scoped orgs, fall through
+    // to the existing "do nothing" behavior so users with genuinely no orgs
+    // aren't paranoid-fetched.
+    const orgIdsToFetch =
+      scopedOrgIds.length > 0 ? scopedOrgIds : haveCurrentOrgFromMe ? [] : [];
     const { map: orgProjectsMap, incomplete: orgProjectsIncomplete } =
       await this.buildOrgProjectsMap(
         tokenResponse.access_token,
         options.cloudRegion,
-        scopedOrgIds,
-        this.session?.orgProjectsMap ?? {},
+        orgIdsToFetch,
+        seedMap,
       );
+    // Make sure the @me/-seeded org is in the final map even when no fetch
+    // ran (buildOrgProjectsMap only returns entries for orgIds it processed).
+    if (haveCurrentOrgFromMe && currentOrgId && !orgProjectsMap[currentOrgId]) {
+      orgProjectsMap[currentOrgId] = seedMap[currentOrgId];
+    }
     const lastPrefs = accountKey
       ? this.authPreference.get(accountKey, options.cloudRegion)
       : null;
@@ -806,7 +838,11 @@ export class AuthService extends TypedEventEmitter<AuthServiceEvents> {
   private async fetchUserContext(
     accessToken: string,
     cloudRegion: CloudRegion,
-  ): Promise<{ accountKey: string | null; currentOrgId: string | null }> {
+  ): Promise<{
+    accountKey: string | null;
+    currentOrgId: string | null;
+    currentOrgProjects: OrgProjects | null;
+  }> {
     try {
       const response = await this.executeAuthenticatedFetch(
         fetch,
@@ -816,14 +852,22 @@ export class AuthService extends TypedEventEmitter<AuthServiceEvents> {
       );
 
       if (!response.ok) {
-        return { accountKey: null, currentOrgId: null };
+        return {
+          accountKey: null,
+          currentOrgId: null,
+          currentOrgProjects: null,
+        };
       }
 
       const data = (await response.json().catch(() => ({}))) as {
         uuid?: unknown;
         distinct_id?: unknown;
         email?: unknown;
-        organization?: { id?: unknown } | null;
+        organization?: {
+          id?: unknown;
+          name?: unknown;
+          teams?: unknown;
+        } | null;
       };
 
       let accountKey: string | null = null;
@@ -842,10 +886,39 @@ export class AuthService extends TypedEventEmitter<AuthServiceEvents> {
       const currentOrgId =
         typeof orgId === "string" && orgId.length > 0 ? orgId : null;
 
-      return { accountKey, currentOrgId };
+      // @me/ returns the current org's `organization.teams[]` with the same
+      // {id, name} shape as /api/organizations/{id}/, so we can populate the
+      // org map from it. Lets the dev app work against project-scoped OAuth
+      // tokens (Local Development) where /api/organizations/{id}/ 403s.
+      let currentOrgProjects: OrgProjects | null = null;
+      if (currentOrgId) {
+        const teamsRaw = data.organization?.teams;
+        const orgName = data.organization?.name;
+        const projects = Array.isArray(teamsRaw)
+          ? teamsRaw
+              .map((t) => t as { id?: unknown; name?: unknown })
+              .filter(
+                (t) => typeof t.id === "number" && typeof t.name === "string",
+              )
+              .map((t) => ({ id: t.id as number, name: t.name as string }))
+          : [];
+        currentOrgProjects = {
+          orgName:
+            typeof orgName === "string" && orgName.length > 0
+              ? orgName
+              : "(unknown)",
+          projects,
+        };
+      }
+
+      return { accountKey, currentOrgId, currentOrgProjects };
     } catch (error) {
       this.logger.warn("Failed to resolve user context", { error });
-      return { accountKey: null, currentOrgId: null };
+      return {
+        accountKey: null,
+        currentOrgId: null,
+        currentOrgProjects: null,
+      };
     }
   }
   private requireSession(): InMemorySession {
diff --git a/packages/core/src/links/approval-link.test.ts b/packages/core/src/links/approval-link.test.ts
new file mode 100644
index 0000000000..ed5ef370e0
--- /dev/null
+++ b/packages/core/src/links/approval-link.test.ts
@@ -0,0 +1,148 @@
+import type {
+  DeepLinkHandler,
+  IDeepLinkRegistry,
+} from "@posthog/platform/deep-link";
+import type { IMainWindow } from "@posthog/platform/main-window";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  ApprovalLinkEvent,
+  type ApprovalLinkPayload,
+  ApprovalLinkService,
+} from "./approval-link";
+
+function makeLogger() {
+  const logger = {
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    debug: vi.fn(),
+    scope: vi.fn(() => logger),
+  };
+  return logger;
+}
+
+function makeDeepLinkService() {
+  const handlers = new Map<string, DeepLinkHandler>();
+  const service = {
+    registerHandler: vi.fn((key: string, handler: DeepLinkHandler) => {
+      handlers.set(key, handler);
+    }),
+    trigger: (key: string, path: string, search = "") => {
+      const handler = handlers.get(key);
+      if (!handler) throw new Error(`No handler for ${key}`);
+      return handler(path, new URLSearchParams(search));
+    },
+  };
+  return service as unknown as IDeepLinkRegistry & {
+    trigger: (key: string, path: string, search?: string) => boolean;
+  };
+}
+
+function makeMainWindow() {
+  return {
+    focus: vi.fn(),
+    restore: vi.fn(),
+    isMinimized: vi.fn().mockReturnValue(false),
+  } as unknown as IMainWindow & {
+    focus: ReturnType<typeof vi.fn>;
+    restore: ReturnType<typeof vi.fn>;
+    isMinimized: ReturnType<typeof vi.fn>;
+  };
+}
+
+describe("ApprovalLinkService", () => {
+  let deepLinkService: ReturnType<typeof makeDeepLinkService>;
+  let mainWindow: ReturnType<typeof makeMainWindow>;
+  let service: ApprovalLinkService;
+
+  beforeEach(() => {
+    deepLinkService = makeDeepLinkService();
+    mainWindow = makeMainWindow();
+    service = new ApprovalLinkService(
+      deepLinkService,
+      mainWindow,
+      makeLogger(),
+    );
+  });
+
+  it("registers an 'approval' handler on the DeepLinkService", () => {
+    expect(deepLinkService.registerHandler).toHaveBeenCalledWith(
+      "approval",
+      expect.any(Function),
+    );
+  });
+
+  it.each<{
+    name: string;
+    path: string;
+    expected: ApprovalLinkPayload;
+  }>([
+    {
+      name: "emits OpenApproval with the request id",
+      path: "ar_abc123",
+      expected: { requestId: "ar_abc123" },
+    },
+    {
+      name: "takes only the first path segment as the request id",
+      path: "ar_abc123/extra/segments",
+      expected: { requestId: "ar_abc123" },
+    },
+    {
+      name: "decodes a percent-encoded request id",
+      path: "ar_abc%2D123",
+      expected: { requestId: "ar_abc-123" },
+    },
+  ])("$name", ({ path, expected }) => {
+    const listener = vi.fn();
+    service.on(ApprovalLinkEvent.OpenApproval, listener);
+
+    const result = deepLinkService.trigger("approval", path);
+
+    expect(result).toBe(true);
+    expect(listener).toHaveBeenCalledWith(expected);
+  });
+
+  it("queues a pending deep link when no listener is attached", () => {
+    deepLinkService.trigger("approval", "ar_xyz789");
+
+    const pending = service.consumePendingDeepLink();
+    expect(pending).toEqual({ requestId: "ar_xyz789" });
+
+    // Draining clears it
+    expect(service.consumePendingDeepLink()).toBeNull();
+  });
+
+  it("returns false and does not emit when the path is empty", () => {
+    const listener = vi.fn();
+    service.on(ApprovalLinkEvent.OpenApproval, listener);
+
+    const result = deepLinkService.trigger("approval", "");
+
+    expect(result).toBe(false);
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it.each<{ name: string; minimized: boolean; expectRestore: boolean }>([
+    {
+      name: "focuses the main window on link arrival",
+      minimized: false,
+      expectRestore: false,
+    },
+    {
+      name: "restores then focuses the main window when it is minimized",
+      minimized: true,
+      expectRestore: true,
+    },
+  ])("$name", ({ minimized, expectRestore }) => {
+    mainWindow.isMinimized.mockReturnValue(minimized);
+
+    deepLinkService.trigger("approval", "ar_abc123");
+
+    expect(mainWindow.focus).toHaveBeenCalledTimes(1);
+    if (expectRestore) {
+      expect(mainWindow.restore).toHaveBeenCalledTimes(1);
+    } else {
+      expect(mainWindow.restore).not.toHaveBeenCalled();
+    }
+  });
+});
diff --git a/packages/core/src/links/approval-link.ts b/packages/core/src/links/approval-link.ts
new file mode 100644
index 0000000000..7cbf38b567
--- /dev/null
+++ b/packages/core/src/links/approval-link.ts
@@ -0,0 +1,108 @@
+import { ROOT_LOGGER, type RootLogger } from "@posthog/di/logger";
+import {
+  DEEP_LINK_SERVICE,
+  type IDeepLinkRegistry,
+} from "@posthog/platform/deep-link";
+import {
+  type IMainWindow,
+  MAIN_WINDOW_SERVICE,
+} from "@posthog/platform/main-window";
+import { TypedEventEmitter } from "@posthog/shared";
+import { inject, injectable } from "inversify";
+import type { LinkLogger } from "./identifiers";
+
+export const ApprovalLinkEvent = {
+  OpenApproval: "openApproval",
+} as const;
+
+export interface ApprovalLinkPayload {
+  /** Agent tool-approval request id to open in the fleet approvals inbox. */
+  requestId: string;
+}
+
+export interface ApprovalLinkEvents {
+  [ApprovalLinkEvent.OpenApproval]: ApprovalLinkPayload;
+}
+
+/**
+ * Handles agent approval deep links (`<scheme>://approval/{requestId}`, e.g.
+ * `posthog-code://approval/ar_...` in production and `posthog-code-dev://…` in
+ * local dev). The agent-runner emits these on a gated tool call so non-PostHog-Code
+ * clients (Slack, MCP) can open the approval in the desktop app. The request id
+ * alone resolves the approval in the fleet inbox, so the link carries nothing else.
+ *
+ * Mirrors `ScoutLinkService`: queues a link that arrived before the renderer was
+ * ready, and emits for links delivered while the app is already running.
+ */
+@injectable()
+export class ApprovalLinkService extends TypedEventEmitter<ApprovalLinkEvents> {
+  private pendingDeepLink: ApprovalLinkPayload | null = null;
+  private readonly log: LinkLogger;
+
+  constructor(
+    @inject(DEEP_LINK_SERVICE)
+    private readonly deepLinkService: IDeepLinkRegistry,
+    @inject(MAIN_WINDOW_SERVICE)
+    private readonly mainWindow: IMainWindow,
+    @inject(ROOT_LOGGER)
+    rootLogger: RootLogger,
+  ) {
+    super();
+    this.log = rootLogger.scope("approval-link-service");
+
+    this.deepLinkService.registerHandler("approval", (path) =>
+      this.handleApprovalLink(path),
+    );
+  }
+
+  private handleApprovalLink(path: string): boolean {
+    const requestId = decodeSegment(path.split("/")[0]);
+
+    if (!requestId) {
+      this.log.warn("Approval link missing request id");
+      return false;
+    }
+
+    const payload: ApprovalLinkPayload = { requestId };
+
+    const hasListeners = this.listenerCount(ApprovalLinkEvent.OpenApproval) > 0;
+
+    if (hasListeners) {
+      this.log.info(`Emitting approval link event: requestId=${requestId}`);
+      this.emit(ApprovalLinkEvent.OpenApproval, payload);
+    } else {
+      this.log.info(
+        `Queueing approval link (renderer not ready): requestId=${requestId}`,
+      );
+      this.pendingDeepLink = payload;
+    }
+
+    this.log.info("Deep link focusing window", { requestId });
+    if (this.mainWindow.isMinimized()) {
+      this.mainWindow.restore();
+    }
+    this.mainWindow.focus();
+
+    return true;
+  }
+
+  public consumePendingDeepLink(): ApprovalLinkPayload | null {
+    const pending = this.pendingDeepLink;
+    this.pendingDeepLink = null;
+    if (pending) {
+      this.log.info(
+        `Consumed pending approval link: requestId=${pending.requestId}`,
+      );
+    }
+    return pending;
+  }
+}
+
+function decodeSegment(segment: string | undefined): string {
+  if (!segment) return "";
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
+  }
+}
diff --git a/packages/core/src/links/identifiers.ts b/packages/core/src/links/identifiers.ts
index e6b67bc9f8..053e283004 100644
--- a/packages/core/src/links/identifiers.ts
+++ b/packages/core/src/links/identifiers.ts
@@ -11,3 +11,6 @@ export const SCOUT_LINK_SERVICE = Symbol.for("posthog.core.scoutLinkService");
 export const NEW_TASK_LINK_SERVICE = Symbol.for(
   "posthog.core.newTaskLinkService",
 );
+export const APPROVAL_LINK_SERVICE = Symbol.for(
+  "posthog.core.approvalLinkService",
+);
diff --git a/packages/host-router/src/routers/deep-link.router.ts b/packages/host-router/src/routers/deep-link.router.ts
index 96bb311317..64324ff5dd 100644
--- a/packages/host-router/src/routers/deep-link.router.ts
+++ b/packages/host-router/src/routers/deep-link.router.ts
@@ -1,4 +1,10 @@
 import {
+  ApprovalLinkEvent,
+  type ApprovalLinkPayload,
+  type ApprovalLinkService,
+} from "@posthog/core/links/approval-link";
+import {
+  APPROVAL_LINK_SERVICE,
   INBOX_LINK_SERVICE,
   NEW_TASK_LINK_SERVICE,
   SCOUT_LINK_SERVICE,
@@ -102,4 +108,24 @@ export const deepLinkRouter = router({
         .consumePendingLink();
     },
   ),
+
+  onOpenApproval: publicProcedure.subscription(async function* (opts) {
+    const service = opts.ctx.container.get<ApprovalLinkService>(
+      APPROVAL_LINK_SERVICE,
+    );
+    const iterable = service.toIterable(ApprovalLinkEvent.OpenApproval, {
+      signal: opts.signal,
+    });
+    for await (const data of iterable) {
+      yield data;
+    }
+  }),
+
+  getPendingApprovalLink: publicProcedure.query(
+    ({ ctx }): ApprovalLinkPayload | null => {
+      return ctx.container
+        .get<ApprovalLinkService>(APPROVAL_LINK_SERVICE)
+        .consumePendingDeepLink();
+    },
+  ),
 });
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 81656c5b26..3f0a2c8d02 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -12,6 +12,10 @@
       "types": "./dist/analytics-events.d.ts",
       "import": "./dist/analytics-events.js"
     },
+    "./agent-platform-types": {
+      "types": "./dist/agent-platform-types.d.ts",
+      "import": "./dist/agent-platform-types.js"
+    },
     "./domain-types": {
       "types": "./dist/domain-types.d.ts",
       "import": "./dist/domain-types.js"
diff --git a/packages/shared/src/agent-platform-types.ts b/packages/shared/src/agent-platform-types.ts
new file mode 100644
index 0000000000..d987f05a71
--- /dev/null
+++ b/packages/shared/src/agent-platform-types.ts
@@ -0,0 +1,621 @@
+// Domain types for the agent_platform product surface (deployed agents,
+// their revisions, sessions, approvals, and fleet rollups). These mirror the
+// PostHog Cloud REST serializers (Django app `agent_platform`) and are the wire
+// shapes returned by the corresponding PostHogAPIClient methods. Field names
+// stay snake_case to match the JSON exactly, as with the other shared wire
+// types (see inbox-types.ts).
+
+// --- Enums -----------------------------------------------------------------
+
+export type AgentSessionState =
+  | "queued"
+  | "running"
+  | "completed"
+  | "closed"
+  | "cancelled"
+  | "failed";
+
+export type AgentSessionPrincipalKind =
+  | "anonymous"
+  | "service"
+  | "internal"
+  | "shared_secret"
+  | "slack";
+
+export type AgentRevisionState = "draft" | "ready" | "live" | "archived";
+
+export type AgentApprovalRequestState =
+  | "queued"
+  | "approving"
+  | "dispatched"
+  | "dispatched_failed"
+  | "rejected"
+  | "expired";
+
+export type AgentApprovalDecision = "approve" | "reject";
+
+// --- Applications ----------------------------------------------------------
+
+/** Resolved creator (from `created_by_id`), or null if unset/deleted. */
+export interface AgentApplicationCreator {
+  id?: number;
+  first_name?: string;
+  email?: string;
+}
+
+export interface AgentApplication {
+  id: string;
+  team_id: number;
+  name: string;
+  /** Globally-unique URL identifier; server-minted unless explicitly allowed. */
+  slug?: string;
+  description?: string;
+  live_revision: string | null;
+  archived?: boolean;
+  archived_at: string | null;
+  created_by_id: number | null;
+  created_by: AgentApplicationCreator | null;
+  created_at: string;
+  updated_at: string;
+  /** Slack Event Subscriptions request URL; null without a public ingress URL. */
+  slack_events_url: string | null;
+  /** Slack Interactivity request URL; null without a public ingress URL. */
+  slack_interactivity_url: string | null;
+  /** Mode-aware base URL the agent's trigger routes hang off; null without ingress. */
+  ingress_base_url: string | null;
+}
+
+// --- Revisions -------------------------------------------------------------
+
+/**
+ * The agent spec carried on a revision. Fully typed elaboration (triggers,
+ * tools, mcps, skills, limits) lands with the config editor milestone; for now
+ * the known top-level fields are surfaced and the rest passes through.
+ */
+export interface AgentSpec {
+  model: string;
+  triggers?: unknown[];
+  tools?: unknown[];
+  mcps?: unknown[];
+  skills?: unknown[];
+  integrations?: string[];
+  secrets?: string[];
+  limits?: {
+    max_turns?: number;
+    max_tool_calls?: number;
+    max_wall_seconds?: number;
+  };
+  entrypoint?: string;
+  reasoning?: "minimal" | "low" | "medium" | "high" | "xhigh";
+  [key: string]: unknown;
+}
+
+export interface AgentRevision {
+  id: string;
+  application: string;
+  parent_revision?: string | null;
+  state: AgentRevisionState;
+  bundle_uri?: string;
+  bundle_sha256: string | null;
+  spec?: AgentSpec;
+  created_by_id: number | null;
+  created_by: AgentApplicationCreator | null;
+  created_at: string;
+  updated_at: string;
+}
+
+// --- Bundle files ----------------------------------------------------------
+// `…/revisions/{id}/bundle/` returns a typed bundle ({ agent_md, skills, tools });
+// the client flattens it into these per-file rows keyed by canonical path
+// (agent.md, skills/<id>/SKILL.md, tools/<id>/source.ts, tools/<id>/schema.json).
+
+export type BundleFileLanguage = "markdown" | "typescript" | "json" | "text";
+
+export interface BundleFile {
+  path: string;
+  content: string;
+  language: BundleFileLanguage;
+}
+
+// --- Slack setup -----------------------------------------------------------
+// `…/revisions/{id}/slack_manifest/` derives the Slack app manifest from the
+// revision's slack trigger + tools (scopes + event subscriptions computed).
+
+export interface AgentSlackManifest {
+  revision_id: string;
+  /** Opaque Slack app manifest JSON to paste into "create from manifest". */
+  manifest: Record<string, unknown>;
+  notes: string[];
+  events_url: string | null;
+  interactivity_url: string | null;
+}
+
+// --- Memory ----------------------------------------------------------------
+// The agent's S3-backed memory store: markdown files (`…/memory/…`) plus the
+// JSONL reference tables the @posthog/table-* tools write.
+
+export interface AgentMemoryHeader {
+  path: string;
+  description: string;
+  tags: string[];
+  created_at: string | null;
+  updated_at: string | null;
+}
+
+export interface AgentMemoryFile extends AgentMemoryHeader {
+  content: string;
+}
+
+/** Pre-aggregated folder tree from `…/memory/tree/`. */
+export interface AgentMemoryTreeNode {
+  name: string;
+  type: "folder" | "file";
+  path?: string;
+  description?: string;
+  tags?: string[];
+  children?: AgentMemoryTreeNode[];
+}
+
+export interface AgentMemorySearchResult {
+  path: string;
+  description: string;
+  tags: string[];
+  score: number;
+  snippet?: string | null;
+}
+
+export interface AgentMemoryTableHeader {
+  name: string;
+  size: number;
+}
+
+export interface AgentMemoryTableRows {
+  name: string;
+  total: number;
+  returned: number;
+  limit: number;
+  rows: Record<string, unknown>[];
+}
+
+// --- Sessions --------------------------------------------------------------
+
+export interface AgentSessionUsageTotal {
+  tokens_in: number;
+  tokens_out: number;
+  cache_read: number;
+  cache_write: number;
+  cost_input: number;
+  cost_output: number;
+  cost_cache_read: number;
+  cost_cache_write: number;
+  cost_total: number;
+}
+
+export interface AgentSessionPrincipal {
+  kind: AgentSessionPrincipalKind;
+  /** Stable principal id (PAT id, slack user id, …); absent for anonymous. */
+  id?: string;
+  team_id?: number;
+}
+
+/** Trigger-specific metadata stamped at session creation; shape varies by kind. */
+export type AgentSessionTriggerMetadata = Record<string, unknown>;
+
+export interface AgentSessionSummary {
+  id: string;
+  application_id: string;
+  revision_id: string;
+  state: AgentSessionState;
+  external_key: string | null;
+  trigger_metadata?: AgentSessionTriggerMetadata | null;
+  principal: AgentSessionPrincipal | null;
+  /** Count of messages in the conversation. */
+  turns: number;
+  /** Last assistant text (~120 chars); null before any assistant turn. */
+  preview: string | null;
+  usage_total: AgentSessionUsageTotal;
+  retry_count: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface AgentApplicationSessionsListResponse {
+  results: AgentSessionSummary[];
+  count: number;
+}
+
+// --- Conversation transcript (stored shape on a session) -------------------
+// The runtime persists pi-ai's `conversation` array. The SSE→ACP adapter and
+// the session-detail transcript both narrow these `content` parts at runtime.
+// Part shapes mirror what the agent-console apiClient narrows (text/thinking/
+// toolCall for assistants; text/image for users; text for tool results).
+
+export interface AgentTextPart {
+  type: "text";
+  text: string;
+}
+
+export interface AgentThinkingPart {
+  type: "thinking";
+  thinking: string;
+}
+
+export interface AgentImagePart {
+  type: "image";
+  [key: string]: unknown;
+}
+
+export interface AgentToolCallPart {
+  type: "toolCall";
+  id: string;
+  name: string;
+  arguments: Record<string, unknown>;
+}
+
+export type AgentAssistantContentPart =
+  | AgentTextPart
+  | AgentThinkingPart
+  | AgentToolCallPart;
+
+export type AgentUserContentPart = AgentTextPart | AgentImagePart;
+
+export interface AgentConversationUserMessage {
+  role: "user";
+  /** String shorthand, or an array of text/image parts. */
+  content: string | AgentUserContentPart[];
+  /** Epoch milliseconds. */
+  timestamp: number;
+}
+
+export interface AgentConversationAssistantMessage {
+  role: "assistant";
+  /** Array of text/thinking/toolCall parts. */
+  content: AgentAssistantContentPart[];
+  timestamp: number;
+  api?: string;
+  provider?: string;
+  model?: string;
+  usage?: Record<string, unknown>;
+  stopReason?: string;
+  errorMessage?: string;
+}
+
+export interface AgentConversationToolResultMessage {
+  /** Wire value is `toolResult` (NOT `tool`) — matches the runtime serializer. */
+  role: "toolResult";
+  toolCallId: string;
+  toolName: string;
+  /** Array of text parts (image parts are dropped on render). */
+  content: AgentTextPart[];
+  isError: boolean;
+  timestamp: number;
+}
+
+export type AgentConversationMessage =
+  | AgentConversationUserMessage
+  | AgentConversationAssistantMessage
+  | AgentConversationToolResultMessage;
+
+export interface AgentApplicationSessionDetail {
+  id: string;
+  application_id: string;
+  revision_id: string;
+  team_id: number;
+  state: AgentSessionState;
+  external_key: string | null;
+  trigger_metadata?: AgentSessionTriggerMetadata | null;
+  principal: AgentSessionPrincipal | null;
+  usage_total: AgentSessionUsageTotal;
+  conversation: AgentConversationMessage[];
+  /** Messages that arrived while a turn was in flight. */
+  pending_inputs: AgentConversationMessage[];
+  retry_count: number;
+  created_at: string;
+  updated_at: string;
+  /** True when `last_n` was supplied AND the full conversation exceeded it. */
+  conversation_trimmed: boolean;
+  /** Total messages in the untrimmed conversation; present only when trimmed. */
+  conversation_total_turns?: number;
+}
+
+// --- Session logs ----------------------------------------------------------
+// `…/sessions/{id}/logs/` returns rows from the shared ClickHouse `log_entries`
+// table via `fetch_log_entries` — the same flat shape hog_function logs use.
+
+export type AgentLogLevel = "DEBUG" | "LOG" | "INFO" | "WARN" | "ERROR";
+
+export interface AgentSessionLogEntry {
+  log_source_id: string;
+  instance_id: string;
+  /** ISO timestamp. */
+  timestamp: string;
+  /** One of AgentLogLevel, but server may emit other casings — keep it open. */
+  level: string;
+  message: string;
+}
+
+export interface AgentSessionLogsParams {
+  limit?: number;
+  /** Comma-separated levels server-side; pass an array, joined by the client. */
+  level?: AgentLogLevel[];
+  search?: string;
+  after?: string;
+  before?: string;
+}
+
+// --- Fleet -----------------------------------------------------------------
+
+export interface AgentFleetLiveSessionSummary {
+  id: string;
+  application_id: string;
+  revision_id: string;
+  team_id: number;
+  state: AgentSessionState;
+  external_key: string | null;
+  trigger_metadata?: AgentSessionTriggerMetadata | null;
+  principal: AgentSessionPrincipal | null;
+  turns: number;
+  preview: string | null;
+  usage_total: AgentSessionUsageTotal;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface AgentFleetLiveSessionsResponse {
+  results: AgentFleetLiveSessionSummary[];
+}
+
+// --- Approvals -------------------------------------------------------------
+
+export interface AgentApprovalRequest {
+  id: string;
+  session_id: string;
+  application_id: string;
+  team_id: number;
+  revision_id: string;
+  turn: number;
+  tool_call_id: string;
+  tool_name: string;
+  proposed_args: Record<string, unknown>;
+  decided_args: Record<string, unknown> | null;
+  assistant_message: Record<string, unknown>;
+  approver_scope: Record<string, unknown>;
+  state: AgentApprovalRequestState;
+  decision_by: string | null;
+  decision_at: string | null;
+  decision_reason: string | null;
+  dispatch_outcome: Record<string, unknown> | null;
+  created_at: string;
+  expires_at: string;
+}
+
+/** Body for POST …/approvals/{id}/decide/. */
+export interface DecideApprovalRequest {
+  decision: AgentApprovalDecision;
+  /** Honoured only when the tool's approval_policy.allow_edit is true. */
+  edited_args?: Record<string, unknown>;
+  reason?: string;
+}
+
+// --- Query params ----------------------------------------------------------
+
+export interface AgentSessionsListParams {
+  limit?: number;
+  offset?: number;
+  /** Comma-separated states accepted server-side; pass an array, joined by the client. */
+  state?: AgentSessionState[];
+  revision_id?: string;
+  created_after?: string;
+  created_before?: string;
+}
+
+export interface AgentApprovalsListParams {
+  state?: AgentApprovalRequestState;
+  agent_id?: string;
+  limit?: number;
+  offset?: number;
+}
+
+// --- Live session events (agent-ingress SSE stream) ------------------------
+// The chat trigger's `/listen` endpoint streams these as `text/event-stream`
+// JSON frames. The SSE→ACP adapter folds them into ACP messages the native
+// ConversationView renders. The `kind` discriminator and `data` payloads come
+// from `agent-ingress/src/triggers/chat.ts` + `agent-runner/src/loop/bus.ts`.
+
+interface AgentSessionEventBase {
+  session_id: string;
+  /** ISO timestamp the runner stamped on the frame. */
+  ts: string;
+}
+
+/** Session accepted and the runner started — `{ team_id, agent, rev }`. */
+export type AgentSessionStartedEvent = AgentSessionEventBase & {
+  kind: "session_started";
+  data: { team_id?: number; agent?: string; rev?: string };
+};
+
+/** Server-confirmed user message, echoed when drained from `pending_inputs`. */
+export type AgentUserMessageEvent = AgentSessionEventBase & {
+  kind: "user_message";
+  data: { text: string; timestamp?: string };
+};
+
+/** A new assistant turn began — `{ turn }` is the turn index. */
+export type AgentTurnStartedEvent = AgentSessionEventBase & {
+  kind: "turn_started";
+  data: { turn?: number };
+};
+
+/** Streaming assistant text fragment. */
+export type AgentAssistantTextDeltaEvent = AgentSessionEventBase & {
+  kind: "assistant_text_delta";
+  data: { turn?: number; text: string };
+};
+
+/** Streaming assistant thinking fragment. */
+export type AgentAssistantThinkingDeltaEvent = AgentSessionEventBase & {
+  kind: "assistant_thinking_delta";
+  data: { turn?: number; thinking: string };
+};
+
+/** A tool call appeared (name known, args still streaming). */
+export type AgentToolCallStartEvent = AgentSessionEventBase & {
+  kind: "tool_call_start";
+  data: { turn?: number; id: string; name: string };
+};
+
+/** Incremental tool-call args — string fragment or partial object. */
+export type AgentToolCallArgsDeltaEvent = AgentSessionEventBase & {
+  kind: "tool_call_args_delta";
+  data: { turn?: number; id: string; argsDelta: unknown };
+};
+
+/** Turn-end snapshot of the full assistant text (deltas already filled it). */
+export type AgentAssistantTextEvent = AgentSessionEventBase & {
+  kind: "assistant_text";
+  data: { text: string };
+};
+
+/** Canonical tool call with finalized args. */
+export type AgentToolCallEvent = AgentSessionEventBase & {
+  kind: "tool_call";
+  data: { id: string; name: string; args?: Record<string, unknown> };
+};
+
+/** Tool result — `ok` plus `output` on success, `error` on failure. */
+export type AgentToolResultEvent = AgentSessionEventBase & {
+  kind: "tool_result";
+  data: {
+    id: string;
+    tool?: string;
+    ok?: boolean;
+    output?: unknown;
+    error?: string;
+  };
+};
+
+/** Turn finished; session stays open for more input. */
+export type AgentCompletedEvent = AgentSessionEventBase & {
+  kind: "completed";
+  data: { turns?: number; summary?: unknown };
+};
+
+/** Session parked for a steering message (`@posthog/meta-ask-for-input`). */
+export type AgentWaitingEvent = AgentSessionEventBase & {
+  kind: "waiting";
+  data: { turns?: number; prompt?: string };
+};
+
+/** Terminal failure — `reason` is for owners/logs, not end users. */
+export type AgentFailedEvent = AgentSessionEventBase & {
+  kind: "failed";
+  data: { reason?: string; turns?: number };
+};
+
+/** Session sealed (terminal); no further `/send`s accepted. */
+export type AgentClosedEvent = AgentSessionEventBase & {
+  kind: "closed";
+  data: Record<string, unknown>;
+};
+
+/** Model invoked a client-fulfilled tool; the host runs it and posts back. */
+export type AgentClientToolCallEvent = AgentSessionEventBase & {
+  kind: "client_tool_call";
+  data: { call_id: string; tool_id: string; args?: Record<string, unknown> };
+};
+
+/** A client tool's outcome landed (sync POST or interactive `/send` wake). */
+export type AgentClientToolResultEvent = AgentSessionEventBase & {
+  kind: "client_tool_result";
+  data: { call_id: string; result?: unknown; error?: string };
+};
+
+export type AgentSessionEvent =
+  | AgentSessionStartedEvent
+  | AgentUserMessageEvent
+  | AgentTurnStartedEvent
+  | AgentAssistantTextDeltaEvent
+  | AgentAssistantThinkingDeltaEvent
+  | AgentToolCallStartEvent
+  | AgentToolCallArgsDeltaEvent
+  | AgentAssistantTextEvent
+  | AgentToolCallEvent
+  | AgentToolResultEvent
+  | AgentCompletedEvent
+  | AgentWaitingEvent
+  | AgentFailedEvent
+  | AgentClosedEvent
+  | AgentClientToolCallEvent
+  | AgentClientToolResultEvent;
+
+/** Discriminator values for {@link AgentSessionEvent}. */
+export type AgentSessionEventKind = AgentSessionEvent["kind"];
+
+// --- Observability / analytics --------------------------------------------
+// The runner captures `$ai_*` AI-observability events into the team's OWN
+// PostHog project (tagged `$ai_origin = 'agent_platform_runner'` and
+// `$agent_application_id`). The observability surface rolls those up via HogQL
+// (`/query/`) into the shapes below. These are the *derived* analytics shapes
+// the client produces from raw HogQL grids — not a backend wire serializer —
+// but they live here so the UI hooks can import them alongside the other
+// agent-platform types.
+
+export interface AgentAnalyticsKpis {
+  spendUsd: number;
+  sessions: number;
+  /** 0..1 — share of generations that errored. */
+  failureRate: number;
+  /** p95 model latency, seconds. */
+  p95LatencyS: number;
+}
+
+export interface AgentAnalyticsDaily {
+  /** Short date labels, oldest → newest (14 days). */
+  labels: string[];
+  spend: number[];
+  sessions: number[];
+  /** 0..1 per day. */
+  failureRate: number[];
+}
+
+export interface AgentAnalyticsDeltas {
+  /** Percent change vs the prior 7 days (e.g. 12 = +12%). `null` when undefined. */
+  spend: number | null;
+  sessions: number | null;
+  /** Change in failure rate, in percentage points. `null` when undefined. */
+  failureRatePoints: number | null;
+}
+
+export interface AgentAnalyticsAgentRow {
+  id: string;
+  name: string;
+  sessions: number;
+  spendUsd: number;
+  failureRate: number;
+  p95LatencyS: number;
+  tokens: number;
+}
+
+export interface AgentAnalyticsModelRow {
+  model: string;
+  spendUsd: number;
+  calls: number;
+}
+
+export interface AgentAnalyticsToolRow {
+  tool: string;
+  calls: number;
+  errors: number;
+  errorRate: number;
+}
+
+export interface AgentAnalyticsData {
+  kpis: AgentAnalyticsKpis;
+  daily: AgentAnalyticsDaily;
+  deltas: AgentAnalyticsDeltas;
+  byAgent: AgentAnalyticsAgentRow[];
+  byModel: AgentAnalyticsModelRow[];
+  toolErrors: AgentAnalyticsToolRow[];
+  /** True when there is no agent AI activity in the window — drives the empty state. */
+  empty: boolean;
+}
diff --git a/packages/shared/src/oauth.test.ts b/packages/shared/src/oauth.test.ts
index 0c94e061d4..b402d8c379 100644
--- a/packages/shared/src/oauth.test.ts
+++ b/packages/shared/src/oauth.test.ts
@@ -8,9 +8,10 @@ describe("OAUTH_SCOPES guard", () => {
       scopes: OAUTH_SCOPES,
     }).toMatchInlineSnapshot(`
       {
-        "scopeVersion": 5,
+        "scopeVersion": 6,
         "scopes": [
           "*",
+          "agent_approvals:write",
         ],
       }
     `);
diff --git a/packages/shared/src/oauth.ts b/packages/shared/src/oauth.ts
index b25eb5f6ac..002753c244 100644
--- a/packages/shared/src/oauth.ts
+++ b/packages/shared/src/oauth.ts
@@ -4,10 +4,17 @@ export const POSTHOG_US_CLIENT_ID = "HCWoE0aRFMYxIxFNTTwkOORn5LBjOt2GVDzwSw5W";
 export const POSTHOG_EU_CLIENT_ID = "AIvijgMS0dxKEmr5z6odvRd8Pkh5vts3nPTzgzU9";
 export const POSTHOG_DEV_CLIENT_ID = "DC5uRLVbGI02YQ82grxgnK6Qn12SXWpCqdPb60oZ";
 
-// Bump OAUTH_SCOPE_VERSION below whenever OAUTH_SCOPES changes to force re-authentication
-export const OAUTH_SCOPES = ["*"];
+// Bump OAUTH_SCOPE_VERSION below whenever OAUTH_SCOPES changes to force re-authentication.
+//
+// `agent_approvals:write` is enumerated alongside `*` because the Django decide
+// gate on `allow_agent_approver: false` approvals (see agent_platform's
+// presentation/views.py:approvals_decide) does not accept `*` as a substitute —
+// it's modeled on the same hardening as INTERNAL scopes (posthog/permissions.py).
+// Without the explicit scope, the in-chat approval card + the per-agent
+// Approvals tab 404 when deciding human-only approvals.
+export const OAUTH_SCOPES = ["*", "agent_approvals:write"];
 
-export const OAUTH_SCOPE_VERSION = 5;
+export const OAUTH_SCOPE_VERSION = 6;
 
 // Token refresh settings
 export const TOKEN_REFRESH_BUFFER_MS = 30 * 60 * 1000; // 30 minutes before expiry
diff --git a/packages/shared/tsup.config.ts b/packages/shared/tsup.config.ts
index f1685d8101..742102c8e1 100644
--- a/packages/shared/tsup.config.ts
+++ b/packages/shared/tsup.config.ts
@@ -3,6 +3,7 @@ import { defineConfig } from "tsup";
 export default defineConfig({
   entry: [
     "src/index.ts",
+    "src/agent-platform-types.ts",
     "src/analytics-events.ts",
     "src/constants.ts",
     "src/deeplink.ts",
diff --git a/packages/ui/src/features/agent-applications/agent-applications.module.ts b/packages/ui/src/features/agent-applications/agent-applications.module.ts
new file mode 100644
index 0000000000..a64f2448cc
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/agent-applications.module.ts
@@ -0,0 +1,9 @@
+import { ContainerModule } from "inversify";
+
+/**
+ * UI module for the agent-applications feature (deployed agent_platform
+ * agents). Currently holds no bindings — the chat/agent builder contributions and
+ * any view-state slices are added in later milestones. Registered in
+ * apps/code/src/renderer/desktop-contributions.ts once it binds a CONTRIBUTION.
+ */
+export const agentApplicationsUiModule = new ContainerModule(() => {});
diff --git a/packages/ui/src/features/agent-applications/agent-builder/AgentBuilderDock.tsx b/packages/ui/src/features/agent-applications/agent-builder/AgentBuilderDock.tsx
new file mode 100644
index 0000000000..d7408db794
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/agent-builder/AgentBuilderDock.tsx
@@ -0,0 +1,342 @@
+import {
+  ArrowRightIcon,
+  NavigationArrowIcon,
+  PlusIcon,
+  SidebarSimpleIcon,
+  SparkleIcon,
+} from "@phosphor-icons/react";
+import { useAuthenticatedClient } from "@posthog/ui/features/auth/authClient";
+import { Button } from "@posthog/ui/primitives/Button";
+import { Flex, Text, Tooltip } from "@radix-ui/themes";
+import { useEffect, useRef, useState } from "react";
+import { useAuthStateValue } from "../../auth/store";
+import { AgentChatPendingApprovalCard } from "../components/AgentChatPendingApprovalCard";
+import { AgentChatSurface } from "../components/AgentChatSurface";
+import { AgentDetailEmptyState } from "../components/AgentDetailLayout";
+import { useAgentApplication } from "../hooks/useAgentApplication";
+import { useAgentChat } from "../hooks/useAgentChat";
+import { useAgentChatPendingApproval } from "../hooks/useAgentChatPendingApproval";
+import { resolveIngressBaseUrl } from "../utils/ingress";
+import { AgentBuilderSecretForm } from "./AgentBuilderSecretForm";
+import { AgentBuilderSeedDialog } from "./AgentBuilderSeedDialog";
+import {
+  AGENT_BUILDER_CHAT_ID,
+  AGENT_BUILDER_SLUG,
+  type AgentBuilderPageContext,
+  useAgentBuilderStore,
+} from "./agentBuilderStore";
+import { suggestionsForPage } from "./agentBuilderSuggestions";
+import { useAgentBuilderClientTools } from "./useAgentBuilderClientTools";
+
+const CHAT_ID = AGENT_BUILDER_CHAT_ID;
+
+/** A rotating pool of composer placeholders — picked once per dock mount. */
+const BUILDER_PLACEHOLDERS = [
+  "Build me an agent that…",
+  "What should we build today?",
+  "Ask me to inspect, debug, or edit an agent…",
+  "Describe an agent and I'll wire it up…",
+  "Spin up a new agent, or fix an existing one…",
+  "What's broken? Let's debug a session…",
+  "Audit the fleet, tweak a prompt, ship an agent…",
+  "Tell me what to change…",
+];
+
+/** The "what am I looking at" object sent to the agent builder (envelope + get_context). */
+function buildAgentBuilderContext(
+  page: AgentBuilderPageContext,
+  followEnabled: boolean,
+  project: { id: number | null; name: string | null; orgId: string | null },
+): Record<string, unknown> {
+  const agent = "slug" in page ? page.slug : undefined;
+  const sessionId = page.kind === "agent-session" ? page.sessionId : undefined;
+  return {
+    page: page.kind,
+    agent,
+    session_id: sessionId,
+    follow_enabled: followEnabled,
+    // The project the user is currently in — the agent threads this into the
+    // `project_id` arg of every `@posthog/*` tool (it's tenant-neutral and acts
+    // on whatever project we report here).
+    project_id: project.id ?? undefined,
+    project_name: project.name ?? undefined,
+    org_id: project.orgId ?? undefined,
+    client: { kind: "posthog-code", version: "1" },
+  };
+}
+
+/**
+ * The agent builder chat — an always-on dock talking to the deployed
+ * `agent-concierge`. Streams through the shared `useAgentChat`/`AgentChatSurface`
+ * stack, prepends the current `/code/agents` page context to the first message,
+ * answers `get_context`, and lets the agent drive the UI via `focus_*`.
+ */
+export function AgentBuilderDock() {
+  const { data: application } = useAgentApplication(AGENT_BUILDER_SLUG);
+  const cloudRegion = useAuthStateValue((s) => s.cloudRegion);
+  const ingressBaseUrl = resolveIngressBaseUrl(
+    application?.ingress_base_url,
+    cloudRegion,
+  );
+
+  const client = useAuthenticatedClient();
+  const currentProjectId = useAuthStateValue((s) => s.currentProjectId);
+  const currentOrgId = useAuthStateValue((s) => s.currentOrgId);
+  const orgProjectsMap = useAuthStateValue((s) => s.orgProjectsMap);
+  const projectName =
+    currentOrgId != null && currentProjectId != null
+      ? (orgProjectsMap[currentOrgId]?.projects.find(
+          (p) => p.id === currentProjectId,
+        )?.name ?? null)
+      : null;
+  const page = useAgentBuilderStore((s) => s.page);
+  const followMode = useAgentBuilderStore((s) => s.followMode);
+  const setFollowMode = useAgentBuilderStore((s) => s.setFollowMode);
+  const setVisible = useAgentBuilderStore((s) => s.setVisible);
+  const seed = useAgentBuilderStore((s) => s.seed);
+  const consumeSeed = useAgentBuilderStore((s) => s.consumeSeed);
+  const pendingSecret = useAgentBuilderStore((s) => s.pendingSecret);
+  const setPendingSecret = useAgentBuilderStore((s) => s.setPendingSecret);
+  const [secretBusy, setSecretBusy] = useState(false);
+  const [placeholder] = useState(
+    () =>
+      BUILDER_PLACEHOLDERS[
+        Math.floor(Math.random() * BUILDER_PLACEHOLDERS.length)
+      ],
+  );
+
+  const clientTools = useAgentBuilderClientTools();
+  const chat = useAgentChat({
+    chatId: CHAT_ID,
+    agentSlug: AGENT_BUILDER_SLUG,
+    ingressBaseUrl,
+    contextProvider: () =>
+      buildAgentBuilderContext(page, followMode, {
+        id: currentProjectId,
+        name: projectName,
+        orgId: currentOrgId,
+      }),
+    clientTools,
+  });
+  const { data: pendingApproval } = useAgentChatPendingApproval(
+    AGENT_BUILDER_SLUG,
+    chat.sessionId,
+  );
+
+  // Resolve a pending set_secret: PUT the value straight to the env-keys API
+  // (never through the agent), then wake the parked session with the outcome.
+  async function submitSecret(value: string) {
+    if (!pendingSecret) return;
+    setSecretBusy(true);
+    try {
+      await client.setAgentEnvKey(
+        pendingSecret.agentSlug,
+        pendingSecret.secret,
+        value,
+      );
+      await chat.resolveInteractiveTool(pendingSecret.callId, {
+        result: {
+          key: pendingSecret.secret,
+          action: pendingSecret.mode ?? "set",
+        },
+      });
+      setPendingSecret(null);
+    } catch (err) {
+      await chat.resolveInteractiveTool(pendingSecret.callId, {
+        error: err instanceof Error ? err.message : "set_secret_failed",
+      });
+      setPendingSecret(null);
+    } finally {
+      setSecretBusy(false);
+    }
+  }
+
+  function cancelSecret() {
+    if (!pendingSecret) return;
+    void chat.resolveInteractiveTool(pendingSecret.callId, {
+      error: "user_cancelled",
+    });
+    setPendingSecret(null);
+  }
+
+  // Edit-with-AI hand-offs: send the seeded prompt once when a new seed lands.
+  // An empty dock starts immediately; if a chat is already in progress, confirm
+  // whether to start fresh or continue (so a deliberate "New agent" / "Edit with
+  // AI" doesn't silently wipe or append onto an unrelated conversation).
+  const lastSeedRef = useRef(0);
+  const [seedConfirm, setSeedConfirm] = useState<string | null>(null);
+  useEffect(() => {
+    if (!seed || seed.seq === lastSeedRef.current) return;
+    lastSeedRef.current = seed.seq;
+    consumeSeed(seed.seq);
+    if (chat.messages.length === 0) {
+      chat.send(seed.prompt);
+    } else {
+      setSeedConfirm(seed.prompt);
+    }
+  }, [seed, chat, consumeSeed]);
+
+  function seedStartFresh() {
+    if (!seedConfirm) return;
+    setPendingSecret(null);
+    chat.newChat();
+    chat.send(seedConfirm);
+    setSeedConfirm(null);
+  }
+  function seedContinue() {
+    if (!seedConfirm) return;
+    chat.send(seedConfirm);
+    setSeedConfirm(null);
+  }
+
+  return (
+    <Flex direction="column" className="h-full min-h-0 bg-background">
+      <Flex
+        align="center"
+        gap="2"
+        className="shrink-0 border-(--gray-5) border-b px-3 py-2"
+      >
+        <SparkleIcon size={15} weight="fill" className="text-(--accent-9)" />
+        <Text className="font-medium text-[13px] text-gray-12">
+          Agent Builder
+        </Text>
+        <Flex align="center" gap="2" className="ml-auto">
+          <Tooltip
+            content={
+              followMode
+                ? "Following — the agent builder can navigate your screen"
+                : "Paused — the agent builder won't navigate"
+            }
+          >
+            <Button
+              variant={followMode ? "soft" : "ghost"}
+              color={followMode ? undefined : "gray"}
+              size="1"
+              onClick={() => setFollowMode(!followMode)}
+            >
+              <NavigationArrowIcon
+                size={13}
+                weight={followMode ? "fill" : "regular"}
+              />
+            </Button>
+          </Tooltip>
+          <Tooltip content="New chat">
+            <Button
+              variant="ghost"
+              color="gray"
+              size="1"
+              onClick={() => {
+                setPendingSecret(null);
+                chat.newChat();
+              }}
+            >
+              <PlusIcon size={14} />
+            </Button>
+          </Tooltip>
+          <Tooltip content="Hide agent builder (⌘⇧I)">
+            <Button
+              variant="ghost"
+              color="gray"
+              size="1"
+              onClick={() => setVisible(false)}
+            >
+              <SidebarSimpleIcon size={14} />
+            </Button>
+          </Tooltip>
+        </Flex>
+      </Flex>
+
+      {!ingressBaseUrl ? (
+        <div className="p-4">
+          <AgentDetailEmptyState
+            title="Agent Builder unavailable"
+            description="The agent-concierge deployment has no reachable ingress in this environment."
+          />
+        </div>
+      ) : (
+        <AgentChatSurface
+          messages={chat.messages}
+          isStreaming={chat.isStreaming}
+          error={chat.error}
+          scrollX={false}
+          placeholder={placeholder}
+          emptyState={<AgentBuilderEmptyState page={page} onPick={chat.send} />}
+          emptyHint="Ask the agent builder to inspect, debug, or edit your agents. It can see what you're looking at and walk you there."
+          belowConversation={
+            pendingApproval ? (
+              <AgentChatPendingApprovalCard
+                idOrSlug={AGENT_BUILDER_SLUG}
+                approval={pendingApproval}
+              />
+            ) : null
+          }
+          aboveComposer={
+            pendingSecret ? (
+              <AgentBuilderSecretForm
+                pending={pendingSecret}
+                busy={secretBusy}
+                onSubmit={submitSecret}
+                onCancel={cancelSecret}
+              />
+            ) : null
+          }
+          composerDisabledReason={
+            pendingApproval ? "Waiting on your approval decision" : undefined
+          }
+          onSend={chat.send}
+          onCancel={chat.cancel}
+        />
+      )}
+
+      <AgentBuilderSeedDialog
+        open={seedConfirm != null}
+        prompt={seedConfirm ?? ""}
+        onStartFresh={seedStartFresh}
+        onContinue={seedContinue}
+        onCancel={() => setSeedConfirm(null)}
+      />
+    </Flex>
+  );
+}
+
+/** Empty-dock state: a short prompt plus page-aware starter suggestions. */
+function AgentBuilderEmptyState({
+  page,
+  onPick,
+}: {
+  page: AgentBuilderPageContext;
+  onPick: (prompt: string) => void;
+}) {
+  const suggestions = suggestionsForPage(page);
+  return (
+    <Flex direction="column" className="h-full min-h-0 justify-end gap-3 p-3">
+      <Text className="px-1 text-[12px] text-gray-10 leading-snug">
+        Ask the agent builder to inspect, debug, or edit your agents — it can
+        see what you're looking at and walk you there. Try:
+      </Text>
+      <Flex direction="column" className="gap-2.5">
+        {suggestions.map((s) => (
+          <button
+            key={s.label}
+            type="button"
+            onClick={() => onPick(s.prompt)}
+            className="group flex items-center gap-2 rounded-(--radius-3) border border-(--gray-5) bg-(--gray-2) px-3 py-2 text-left transition-colors hover:border-(--gray-7) hover:bg-(--gray-3)"
+          >
+            <SparkleIcon
+              size={13}
+              weight="fill"
+              className="shrink-0 text-(--accent-9)"
+            />
+            <span className="min-w-0 flex-1 truncate text-[12.5px] text-gray-12">
+              {s.label}
+            </span>
+            <ArrowRightIcon
+              size={12}
+              className="shrink-0 text-gray-8 transition-colors group-hover:text-gray-11"
+            />
+          </button>
+        ))}
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/agent-builder/AgentBuilderDockLayout.tsx b/packages/ui/src/features/agent-applications/agent-builder/AgentBuilderDockLayout.tsx
new file mode 100644
index 0000000000..f92599cb72
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/agent-builder/AgentBuilderDockLayout.tsx
@@ -0,0 +1,78 @@
+import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
+import { type ReactNode, useEffect } from "react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { AGENT_PLATFORM_FLAG } from "../featureFlag";
+import { AgentBuilderDock } from "./AgentBuilderDock";
+import { useAgentBuilderStore } from "./agentBuilderStore";
+
+/**
+ * Wraps the `/code/agents` content in a resizable split with the always-on
+ * agent builder dock pinned right. Gated behind the `agent-platform` flag — when
+ * disabled, the content renders unchanged with no dock or affordance. Hidden by
+ * default; toggled via the edge affordance, the dock's hide button, or
+ * Cmd/Ctrl+I. Panel sizes persist (`autoSaveId`).
+ */
+export function AgentBuilderDockLayout({ children }: { children: ReactNode }) {
+  const enabled = useFeatureFlag(AGENT_PLATFORM_FLAG);
+  const visible = useAgentBuilderStore((s) => s.visible);
+  const toggleVisible = useAgentBuilderStore((s) => s.toggleVisible);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e: KeyboardEvent) => {
+      // Cmd/Ctrl+Shift+I — Cmd+I alone is taken by the inbox.
+      if (!(e.metaKey || e.ctrlKey) || e.altKey || !e.shiftKey) return;
+      if (e.key.toLowerCase() !== "i") return;
+      const t = e.target as HTMLElement | null;
+      if (
+        t?.tagName === "INPUT" ||
+        t?.tagName === "TEXTAREA" ||
+        t?.isContentEditable
+      ) {
+        return;
+      }
+      e.preventDefault();
+      toggleVisible();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [enabled, toggleVisible]);
+
+  // Flag off → no agent builder anywhere in /code/agents.
+  if (!enabled) {
+    return <>{children}</>;
+  }
+
+  // Collapsed: render content unchanged. The open affordance lives in the
+  // agents page headers (AgentBuilderHeaderControls); Cmd/Ctrl+Shift+I toggles.
+  if (!visible) {
+    return <>{children}</>;
+  }
+
+  return (
+    <PanelGroup
+      direction="horizontal"
+      autoSaveId="agents-agent-builder-dock"
+      className="h-full min-h-0"
+    >
+      <Panel
+        order={1}
+        defaultSize={68}
+        minSize={40}
+        className="flex min-h-0 flex-col"
+      >
+        {children}
+      </Panel>
+      <PanelResizeHandle className="w-px bg-(--gray-5) transition-colors hover:bg-(--gray-7) data-[resize-handle-state=drag]:bg-(--accent-9)" />
+      <Panel
+        order={2}
+        defaultSize={32}
+        minSize={22}
+        maxSize={48}
+        className="flex min-h-0 flex-col"
+      >
+        <AgentBuilderDock />
+      </Panel>
+    </PanelGroup>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/agent-builder/AgentBuilderHeaderControls.tsx b/packages/ui/src/features/agent-applications/agent-builder/AgentBuilderHeaderControls.tsx
new file mode 100644
index 0000000000..6112ebc01c
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/agent-builder/AgentBuilderHeaderControls.tsx
@@ -0,0 +1,77 @@
+import { NavigationArrowIcon, SparkleIcon } from "@phosphor-icons/react";
+import { agentChatStore } from "@posthog/core/agent-chat/agentChatStore";
+import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
+import { Button } from "@posthog/ui/primitives/Button";
+import { Badge, Flex, Tooltip } from "@radix-ui/themes";
+import { useStore } from "zustand";
+import { AGENT_PLATFORM_FLAG } from "../featureFlag";
+import { headerActionForPage } from "./agentBuilderActions";
+import {
+  AGENT_BUILDER_CHAT_ID,
+  type AgentBuilderPageContext,
+  useAgentBuilderStore,
+} from "./agentBuilderStore";
+import { EditWithAIButton } from "./EditWithAIButton";
+
+/**
+ * The agents-header control cluster — identical across every agents view. Driven
+ * by the view's `context`, it renders:
+ *  - a "Following" indicator while the agent builder is mid-turn and follow mode
+ *    is on (so it's clear the builder is steering navigation),
+ *  - a contextual AI button (New agent / Explain this session / …),
+ *  - a "show" button that opens the dock, ONLY when it's hidden (the inverse of
+ *    the hide button inside the dock header).
+ * All buttons are small. Renders nothing unless the `agent-platform` flag is on.
+ */
+export function AgentBuilderHeaderControls({
+  context,
+}: {
+  context: AgentBuilderPageContext;
+}) {
+  const enabled = useFeatureFlag(AGENT_PLATFORM_FLAG);
+  const visible = useAgentBuilderStore((s) => s.visible);
+  const setVisible = useAgentBuilderStore((s) => s.setVisible);
+  const followMode = useAgentBuilderStore((s) => s.followMode);
+  const status = useStore(
+    agentChatStore,
+    (s) => s.chats[AGENT_BUILDER_CHAT_ID]?.status,
+  );
+
+  if (!enabled) return null;
+
+  const running = status === "streaming" || status === "starting";
+  const action = headerActionForPage(context);
+
+  return (
+    <Flex align="center" gap="2" className="shrink-0">
+      {running && followMode ? (
+        <Tooltip content="The agent builder is navigating this view">
+          <Badge color="purple" variant="soft" size="1">
+            <NavigationArrowIcon size={11} weight="fill" />
+            Following
+          </Badge>
+        </Tooltip>
+      ) : null}
+      {action ? (
+        <EditWithAIButton
+          prompt={action.prompt}
+          agentSlug={action.agentSlug}
+          label={action.label}
+          size="1"
+        />
+      ) : null}
+      {!visible ? (
+        <Tooltip content="Open the agent builder (⌘⇧I)">
+          <Button
+            variant="outline"
+            size="1"
+            onClick={() => setVisible(true)}
+            aria-label="Open agent builder"
+          >
+            <SparkleIcon size={14} weight="fill" />
+          </Button>
+        </Tooltip>
+      ) : null}
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/agent-builder/AgentBuilderSecretForm.tsx b/packages/ui/src/features/agent-applications/agent-builder/AgentBuilderSecretForm.tsx
new file mode 100644
index 0000000000..3d0da2dc2c
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/agent-builder/AgentBuilderSecretForm.tsx
@@ -0,0 +1,87 @@
+import { KeyIcon } from "@phosphor-icons/react";
+import { Button } from "@posthog/ui/primitives/Button";
+import { Flex, Text, TextField } from "@radix-ui/themes";
+import { type KeyboardEvent, useState } from "react";
+import type { PendingSecret } from "./agentBuilderStore";
+
+/**
+ * Inline punch-out for the agent builder's `set_secret` tool. The agent never sees
+ * the raw value: the form PUTs it straight to the env-keys API and only the
+ * `{ key, action }` outcome is posted back to wake the session. Shown above the
+ * dock composer while a secret is pending.
+ */
+export function AgentBuilderSecretForm({
+  pending,
+  busy,
+  onSubmit,
+  onCancel,
+}: {
+  pending: PendingSecret;
+  busy: boolean;
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+}) {
+  const [value, setValue] = useState("");
+  const action = pending.mode === "rotate" ? "Rotate" : "Set";
+
+  function submit() {
+    const trimmed = value.trim();
+    if (!trimmed || busy) return;
+    onSubmit(trimmed);
+  }
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      submit();
+    }
+  }
+
+  return (
+    <Flex
+      direction="column"
+      gap="2"
+      className="shrink-0 border-(--gray-5) border-t bg-(--gray-2) px-4 py-3"
+    >
+      <Flex align="center" gap="2">
+        <KeyIcon size={14} className="shrink-0 text-(--accent-9)" />
+        <Text className="font-medium text-[12.5px] text-gray-12">
+          {action} secret{" "}
+          <span className="font-mono text-(--accent-11)">{pending.secret}</span>
+        </Text>
+      </Flex>
+      {pending.purpose ? (
+        <Text className="text-[11.5px] text-gray-10 leading-snug">
+          {pending.purpose}
+        </Text>
+      ) : null}
+      <Text className="text-[11px] text-gray-9 leading-snug">
+        The value is sent straight to your agent's secrets — the agent builder
+        never sees it.
+      </Text>
+      <Flex align="center" gap="2">
+        <TextField.Root
+          type="password"
+          autoComplete="off"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={onKeyDown}
+          placeholder={`Value for ${pending.secret}`}
+          className="flex-1 text-[13px]"
+          autoFocus
+        />
+        <Button size="1" onClick={submit} disabled={!value.trim() || busy}>
+          {busy ? "Saving…" : action}
+        </Button>
+        <Button
+          variant="soft"
+          color="gray"
+          size="1"
+          onClick={onCancel}
+          disabled={busy}
+        >
+          Cancel
+        </Button>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/agent-builder/AgentBuilderSeedDialog.tsx b/packages/ui/src/features/agent-applications/agent-builder/AgentBuilderSeedDialog.tsx
new file mode 100644
index 0000000000..d069a04b1d
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/agent-builder/AgentBuilderSeedDialog.tsx
@@ -0,0 +1,58 @@
+import { SparkleIcon } from "@phosphor-icons/react";
+import { AlertDialog, Button, Flex, Text } from "@radix-ui/themes";
+
+/**
+ * Confirm dialog shown when an "Edit with AI" / "New agent" seed lands while an
+ * Agent Builder chat is already in progress: start a fresh chat for the seed, or
+ * send it into the current conversation. Mirrors the console's seed dialog.
+ */
+export function AgentBuilderSeedDialog({
+  open,
+  prompt,
+  onStartFresh,
+  onContinue,
+  onCancel,
+}: {
+  open: boolean;
+  prompt: string;
+  onStartFresh: () => void;
+  onContinue: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <AlertDialog.Root
+      open={open}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) onCancel();
+      }}
+    >
+      <AlertDialog.Content maxWidth="440px" size="2">
+        <AlertDialog.Title className="text-base">
+          <Flex align="center" gap="2">
+            <SparkleIcon size={16} weight="fill" color="var(--accent-9)" />
+            Start a new chat?
+          </Flex>
+        </AlertDialog.Title>
+        <AlertDialog.Description className="text-sm">
+          You have an Agent Builder chat in progress. Start a fresh chat for
+          this, or continue the current one?
+        </AlertDialog.Description>
+        <Text className="mt-3 line-clamp-3 block rounded-(--radius-2) border border-(--gray-5) bg-(--gray-2) px-3 py-2 text-[12.5px] text-gray-11 italic">
+          “{prompt}”
+        </Text>
+
+        <Flex justify="end" gap="2" mt="4">
+          <Button variant="soft" color="gray" size="1" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button variant="soft" size="1" onClick={onContinue}>
+            Continue current chat
+          </Button>
+          <Button variant="solid" size="1" onClick={onStartFresh}>
+            Start fresh
+          </Button>
+        </Flex>
+      </AlertDialog.Content>
+    </AlertDialog.Root>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/agent-builder/EditWithAIButton.tsx b/packages/ui/src/features/agent-applications/agent-builder/EditWithAIButton.tsx
new file mode 100644
index 0000000000..a23400bb7a
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/agent-builder/EditWithAIButton.tsx
@@ -0,0 +1,35 @@
+import { SparkleIcon } from "@phosphor-icons/react";
+import { Button } from "@posthog/ui/primitives/Button";
+import { useAgentBuilderStore } from "./agentBuilderStore";
+
+/**
+ * Opens the agent builder dock and seeds it with a prompt — the render surfaces'
+ * hand-off into authoring ("edit with AI"). The agent builder does the actual edits
+ * server-side via staged draft revisions; this just starts the conversation
+ * with the right context.
+ */
+export function EditWithAIButton({
+  prompt,
+  agentSlug,
+  label = "Ask the agent builder",
+  variant = "soft",
+  size = "1",
+}: {
+  prompt: string;
+  agentSlug?: string | null;
+  label?: string;
+  variant?: "soft" | "ghost" | "outline";
+  size?: "1" | "2";
+}) {
+  const startAgentBuilder = useAgentBuilderStore((s) => s.startAgentBuilder);
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={() => startAgentBuilder(prompt, agentSlug)}
+    >
+      <SparkleIcon size={14} weight="fill" />
+      {label}
+    </Button>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/agent-builder/agentBuilderActions.ts b/packages/ui/src/features/agent-applications/agent-builder/agentBuilderActions.ts
new file mode 100644
index 0000000000..f9cc0b4d43
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/agent-builder/agentBuilderActions.ts
@@ -0,0 +1,76 @@
+import type { AgentBuilderPageContext } from "./agentBuilderStore";
+
+export interface AgentBuilderAction {
+  /** Short button label, e.g. "New agent" / "Explain this session". */
+  label: string;
+  /** Seed prompt sent to the agent builder when clicked. */
+  prompt: string;
+  /** Subject agent for the context envelope (null for fleet-level actions). */
+  agentSlug: string | null;
+}
+
+/**
+ * The contextual agent-builder action for a given view — the AI button's
+ * content. Drives the abstract header controls so every agents view gets a
+ * button that fits what you're looking at. Returns null for views with no
+ * obvious action (just the show/following affordances remain).
+ */
+export function headerActionForPage(
+  page: AgentBuilderPageContext,
+): AgentBuilderAction | null {
+  switch (page.kind) {
+    case "agent-list":
+      return {
+        label: "New agent",
+        prompt:
+          "Help me create a new agent — walk me through what it should do, then set it up.",
+        agentSlug: null,
+      };
+    case "agent":
+      return {
+        label: "Ask about this agent",
+        prompt: "Explain what this agent does and how it's configured.",
+        agentSlug: page.slug,
+      };
+    case "agent-config":
+      return {
+        label: "Edit configuration",
+        prompt: "Help me change this agent's configuration.",
+        agentSlug: page.slug,
+      };
+    case "agent-sessions":
+      return {
+        label: "Review sessions",
+        prompt:
+          "Review this agent's recent sessions and surface anything notable.",
+        agentSlug: page.slug,
+      };
+    case "agent-session":
+      return {
+        label: "Explain this session",
+        prompt: "Explain what happened in this session, step by step.",
+        agentSlug: page.slug,
+      };
+    case "agent-approvals":
+      return {
+        label: "Review approvals",
+        prompt: "Review the pending approval requests for this agent.",
+        agentSlug: page.slug,
+      };
+    case "agent-memory":
+      return {
+        label: "Ask about memory",
+        prompt: "Summarize what's stored in this agent's memory.",
+        agentSlug: page.slug,
+      };
+    case "agent-observability":
+      return {
+        label: "Ask about performance",
+        prompt:
+          "Summarize this agent's spend, volume, and failure rate, and call out anything notable.",
+        agentSlug: page.slug,
+      };
+    default:
+      return null;
+  }
+}
diff --git a/packages/ui/src/features/agent-applications/agent-builder/agentBuilderStore.ts b/packages/ui/src/features/agent-applications/agent-builder/agentBuilderStore.ts
new file mode 100644
index 0000000000..f7ad682ddf
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/agent-builder/agentBuilderStore.ts
@@ -0,0 +1,105 @@
+import { electronStorage } from "@posthog/ui/shell/rendererStorage";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+/** The deployed meta-agent the agent builder dock always talks to. */
+export const AGENT_BUILDER_SLUG = "agent-concierge";
+
+/** Key for the agent builder's chat in the core `agentChatStore`. */
+export const AGENT_BUILDER_CHAT_ID = "agent-builder";
+
+/**
+ * What the user is currently looking at in `/code/agents`. Mirrors the console's
+ * `AgentBuilderPageContext` so the agent builder can resolve deictic references ("this
+ * agent", "this session") and drive the right `focus_*` target. Each route
+ * registers its context on mount via `useSetAgentBuilderPage`.
+ */
+export type AgentBuilderPageContext =
+  | { kind: "agent-list" }
+  | { kind: "scouts" }
+  | { kind: "agent"; slug: string }
+  | { kind: "agent-config"; slug: string; node?: string; revision?: string }
+  | { kind: "agent-sessions"; slug: string }
+  | { kind: "agent-session"; slug: string; sessionId: string }
+  | { kind: "agent-approvals"; slug: string; request?: string }
+  | { kind: "agent-memory"; slug: string }
+  | { kind: "agent-observability"; slug: string }
+  | { kind: "agent-chat"; slug: string }
+  | { kind: "unknown" };
+
+/** A pending "Edit with AI" hand-off: open the dock and send `prompt`. */
+export interface AgentBuilderSeed {
+  /** Monotonic id so a consumer can mark exactly one seed handled. */
+  seq: number;
+  prompt: string;
+  /** Agent the seed is about, for the context envelope. */
+  agentSlug: string | null;
+}
+
+/**
+ * An in-flight `set_secret` punch-out. The agent parked its turn; the dock
+ * renders a form for these, and on submit PUTs the key + wakes the session.
+ */
+export interface PendingSecret {
+  /** The parked tool call to resolve via `/send`. */
+  callId: string;
+  agentSlug: string;
+  /** Env key name, e.g. "ANTHROPIC_KEY". The value is never seen by the agent. */
+  secret: string;
+  mode?: "set" | "rotate";
+  purpose?: string;
+}
+
+interface AgentBuilderStore {
+  /** Dock open/closed (persisted). */
+  visible: boolean;
+  /** Whether the agent's `focus_*` tools may navigate the UI (persisted). */
+  followMode: boolean;
+  /** Current page context (ephemeral — re-registered per route). */
+  page: AgentBuilderPageContext;
+  /** Pending edit-with-AI hand-off (ephemeral). */
+  seed: AgentBuilderSeed | null;
+  /** In-flight set_secret punch-out the dock renders a form for (ephemeral). */
+  pendingSecret: PendingSecret | null;
+
+  toggleVisible: () => void;
+  setVisible: (visible: boolean) => void;
+  setFollowMode: (followMode: boolean) => void;
+  setPage: (page: AgentBuilderPageContext) => void;
+  /** Open the dock and queue a prompt to send. */
+  startAgentBuilder: (prompt: string, agentSlug?: string | null) => void;
+  /** Mark a seed handled (no-op if a newer seed has since replaced it). */
+  consumeSeed: (seq: number) => void;
+  setPendingSecret: (pending: PendingSecret | null) => void;
+}
+
+export const useAgentBuilderStore = create<AgentBuilderStore>()(
+  persist(
+    (set) => ({
+      visible: false,
+      followMode: true,
+      page: { kind: "unknown" },
+      seed: null,
+      pendingSecret: null,
+
+      toggleVisible: () => set((s) => ({ visible: !s.visible })),
+      setVisible: (visible) => set({ visible }),
+      setFollowMode: (followMode) => set({ followMode }),
+      setPage: (page) => set({ page }),
+      startAgentBuilder: (prompt, agentSlug = null) =>
+        set((s) => ({
+          visible: true,
+          seed: { seq: (s.seed?.seq ?? 0) + 1, prompt, agentSlug },
+        })),
+      consumeSeed: (seq) =>
+        set((s) => (s.seed?.seq === seq ? { seed: null } : s)),
+      setPendingSecret: (pendingSecret) => set({ pendingSecret }),
+    }),
+    {
+      name: "agent-builder-dock",
+      storage: electronStorage,
+      // Page + seed are ephemeral; only remember the user's layout prefs.
+      partialize: (s) => ({ visible: s.visible, followMode: s.followMode }),
+    },
+  ),
+);
diff --git a/packages/ui/src/features/agent-applications/agent-builder/agentBuilderSuggestions.ts b/packages/ui/src/features/agent-applications/agent-builder/agentBuilderSuggestions.ts
new file mode 100644
index 0000000000..3b201b3235
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/agent-builder/agentBuilderSuggestions.ts
@@ -0,0 +1,126 @@
+import type { AgentBuilderPageContext } from "./agentBuilderStore";
+
+export interface AgentBuilderSuggestion {
+  label: string;
+  prompt: string;
+}
+
+/**
+ * Starter prompts shown in the empty Agent Builder dock, tailored to what the
+ * user is looking at. The agent resolves "this agent"/"this session" from the
+ * page-context envelope, so prompts can stay deictic. Mirrors the old console's
+ * contextual suggestions.
+ */
+export function suggestionsForPage(
+  page: AgentBuilderPageContext,
+): AgentBuilderSuggestion[] {
+  switch (page.kind) {
+    case "agent-list":
+    case "scouts":
+    case "unknown":
+      return [
+        {
+          label: "Create a new agent",
+          prompt:
+            "Help me create a new agent — walk me through what it should do, then set it up.",
+        },
+        {
+          label: "What's changed in the last week?",
+          prompt:
+            "Summarize what's changed across my agents in the last week — new revisions, notable sessions, and any failures.",
+        },
+        {
+          label: "Audit my agents",
+          prompt:
+            "Audit all my agents and flag anything underperforming or misconfigured.",
+        },
+      ];
+    case "agent":
+      return [
+        {
+          label: "What does this agent do?",
+          prompt: "Explain what this agent does and how it's configured.",
+        },
+        {
+          label: "Is this agent healthy?",
+          prompt:
+            "Check this agent's recent sessions and tell me whether it's healthy.",
+        },
+        {
+          label: "Suggest improvements",
+          prompt: "Review this agent and suggest concrete improvements.",
+        },
+      ];
+    case "agent-config":
+      return [
+        {
+          label: "Explain this configuration",
+          prompt: "Walk me through this agent's configuration.",
+        },
+        {
+          label: "Edit the system prompt",
+          prompt: "I want to change this agent's system prompt.",
+        },
+        {
+          label: "Add a tool or skill",
+          prompt: "Help me add a tool or skill to this agent.",
+        },
+      ];
+    case "agent-sessions":
+      return [
+        {
+          label: "Any failing sessions?",
+          prompt:
+            "Look at this agent's recent sessions and surface any failures.",
+        },
+        {
+          label: "Summarize recent activity",
+          prompt: "Summarize this agent's recent session activity.",
+        },
+      ];
+    case "agent-session":
+      return [
+        {
+          label: "What happened here?",
+          prompt: "Explain what happened in this session, step by step.",
+        },
+        {
+          label: "Debug this session",
+          prompt: "Debug this session — what went wrong and how do I fix it?",
+        },
+      ];
+    case "agent-approvals":
+      return [
+        {
+          label: "Review pending approvals",
+          prompt: "Review the pending approval requests for this agent.",
+        },
+      ];
+    case "agent-memory":
+      return [
+        {
+          label: "What's in memory?",
+          prompt: "Summarize what's stored in this agent's memory.",
+        },
+      ];
+    case "agent-observability":
+      return [
+        {
+          label: "How is this agent performing?",
+          prompt:
+            "Summarize this agent's spend, volume, and failure rate, and call out anything notable.",
+        },
+      ];
+    default:
+      return [
+        {
+          label: "Create a new agent",
+          prompt: "Help me create a new agent.",
+        },
+        {
+          label: "What's changed in the last week?",
+          prompt: "Summarize what's changed across my agents in the last week.",
+        },
+      ];
+  }
+}
diff --git a/packages/ui/src/features/agent-applications/agent-builder/useAgentBuilderClientTools.ts b/packages/ui/src/features/agent-applications/agent-builder/useAgentBuilderClientTools.ts
new file mode 100644
index 0000000000..4a43c0433d
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/agent-builder/useAgentBuilderClientTools.ts
@@ -0,0 +1,142 @@
+import { useNavigate } from "@tanstack/react-router";
+import { useCallback, useRef } from "react";
+import type { ClientToolHandler } from "../hooks/useAgentChat";
+import { useAgentBuilderStore } from "./agentBuilderStore";
+
+/**
+ * The agent builder's UI-driving client tools. The agent calls these to steer the
+ * user's screen (`focus_*`, which navigate code's agent routes and report back
+ * `{ focused }`) and to set secrets (`set_secret`, an interactive punch-out:
+ * park the call and render a form — see the dock). Returning `null` defers to
+ * the built-in toast/get_context handlers.
+ *
+ * `focus_*` navigations are gated by follow-mode: when off, they report
+ * `{ focused: false, reason: "user_paused_follow" }` instead of moving the UI.
+ */
+export function useAgentBuilderClientTools(): ClientToolHandler {
+  const navigate = useNavigate();
+  const followMode = useAgentBuilderStore((s) => s.followMode);
+  const setPendingSecret = useAgentBuilderStore((s) => s.setPendingSecret);
+  const followRef = useRef(followMode);
+  followRef.current = followMode;
+
+  return useCallback(
+    (data) => {
+      const args = (data.args ?? {}) as Record<string, unknown>;
+      const str = (v: unknown) => (typeof v === "string" ? v : undefined);
+
+      // set_secret — interactive punch-out. Park the call (defer) and render a
+      // form; the dock PUTs the key and wakes the session on submit.
+      if (data.tool_id === "set_secret") {
+        const agentSlug = str(args.agent_slug);
+        const secret = str(args.secret);
+        if (!agentSlug) return { error: "missing_arg: agent_slug" };
+        if (!secret) return { error: "missing_arg: secret" };
+        const mode = args.mode === "rotate" ? "rotate" : "set";
+        setPendingSecret({
+          callId: data.call_id,
+          agentSlug,
+          secret,
+          mode,
+          purpose: str(args.purpose),
+        });
+        return { defer: true };
+      }
+
+      if (!data.tool_id.startsWith("focus_")) return null;
+      const slug = str(args.slug);
+      if (!followRef.current) {
+        return { result: { focused: false, reason: "user_paused_follow" } };
+      }
+      if (!slug) {
+        return { result: { focused: false, reason: "missing_slug" } };
+      }
+      const params = { idOrSlug: slug };
+
+      switch (data.tool_id) {
+        case "focus_tab": {
+          const tab = str(args.tab) ?? "overview";
+          switch (tab) {
+            case "configuration":
+              navigate({
+                to: "/code/agents/applications/$idOrSlug/configuration",
+                params,
+              });
+              break;
+            case "sessions":
+              navigate({
+                to: "/code/agents/applications/$idOrSlug/sessions",
+                params,
+              });
+              break;
+            case "memory":
+              navigate({
+                to: "/code/agents/applications/$idOrSlug/memory",
+                params,
+              });
+              break;
+            case "approvals":
+              navigate({
+                to: "/code/agents/applications/$idOrSlug/approvals",
+                params,
+              });
+              break;
+            case "observability":
+              navigate({
+                to: "/code/agents/applications/$idOrSlug/observability",
+                params,
+              });
+              break;
+            case "chat":
+              navigate({
+                to: "/code/agents/applications/$idOrSlug/chat",
+                params,
+              });
+              break;
+            default:
+              navigate({
+                to: "/code/agents/applications/$idOrSlug",
+                params,
+              });
+          }
+          return { result: { focused: true } };
+        }
+        case "focus_file":
+          navigate({
+            to: "/code/agents/applications/$idOrSlug/configuration",
+            params,
+            search: { node: str(args.path) },
+          });
+          return { result: { focused: true } };
+        case "focus_spec_section":
+          navigate({
+            to: "/code/agents/applications/$idOrSlug/configuration",
+            params,
+            search: { node: str(args.section) },
+          });
+          return { result: { focused: true } };
+        case "focus_revision":
+          navigate({
+            to: "/code/agents/applications/$idOrSlug/configuration",
+            params,
+            search: { revision: str(args.revisionId) },
+          });
+          return { result: { focused: true } };
+        case "focus_session": {
+          const sessionId = str(args.sessionId);
+          if (!sessionId) {
+            return { result: { focused: false, reason: "missing_session_id" } };
+          }
+          navigate({
+            to: "/code/agents/applications/$idOrSlug/sessions/$sessionId",
+            params: { idOrSlug: slug, sessionId },
+          });
+          return { result: { focused: true } };
+        }
+        default:
+          return { result: { focused: false, reason: "unknown_focus_target" } };
+      }
+    },
+    [navigate, setPendingSecret],
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/agent-builder/useSetAgentBuilderPage.ts b/packages/ui/src/features/agent-applications/agent-builder/useSetAgentBuilderPage.ts
new file mode 100644
index 0000000000..76dbe9d563
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/agent-builder/useSetAgentBuilderPage.ts
@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import {
+  type AgentBuilderPageContext,
+  useAgentBuilderStore,
+} from "./agentBuilderStore";
+
+/**
+ * Registers what the user is currently looking at so the agent builder can resolve
+ * deictic references and drive the right `focus_*` target. Each `/code/agents`
+ * route calls this on mount. No cleanup: the next route overwrites the page, so
+ * the last-viewed context persists (the dock only reads it inside `/code/agents`).
+ */
+export function useSetAgentBuilderPage(page: AgentBuilderPageContext): void {
+  const setPage = useAgentBuilderStore((s) => s.setPage);
+  const key = JSON.stringify(page);
+  useEffect(() => {
+    setPage(JSON.parse(key) as AgentBuilderPageContext);
+  }, [key, setPage]);
+}
diff --git a/packages/ui/src/features/agent-applications/chat/acpEnvelope.ts b/packages/ui/src/features/agent-applications/chat/acpEnvelope.ts
new file mode 100644
index 0000000000..c4964695d4
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/chat/acpEnvelope.ts
@@ -0,0 +1,149 @@
+/**
+ * Pure constructors for the JSON-RPC `AcpMessage` envelopes that code's
+ * `buildConversationItems` reducer consumes.
+ *
+ * The agent_platform runtime speaks a different wire protocol (agent-ingress
+ * SSE frames + a stored pi-ai `conversation` array). Rather than re-implement
+ * the console's `runnerReducer`, we translate each agent_platform event into
+ * the equivalent ACP message and let code's existing builder do all the
+ * accumulation (streaming-text concatenation, tool-call merging, turn
+ * tracking). These helpers mint those messages.
+ *
+ * Mapping summary:
+ *   user message       → `session/prompt` request  → opens a turn + user bubble
+ *   assistant text     → `session/update` (agent_message_chunk)
+ *   assistant thinking → `session/update` (agent_thought_chunk)
+ *   tool call          → `session/update` (tool_call)
+ *   tool result        → `session/update` (tool_call_update)
+ *   turn end           → `_posthog/turn_complete` notification
+ */
+
+import type {
+  ContentBlock,
+  SessionUpdate,
+  ToolCallContent,
+  ToolCallStatus,
+} from "@agentclientprotocol/sdk";
+import { POSTHOG_NOTIFICATIONS } from "@posthog/agent/acp-extensions";
+import type { AcpMessage } from "@posthog/shared";
+
+/** A plain-text ACP content block. */
+export function textBlock(text: string): ContentBlock {
+  return { type: "text", text };
+}
+
+/** A tool-call content item wrapping plain text (rendered under the call). */
+export function textToolContent(text: string): ToolCallContent {
+  return { type: "content", content: { type: "text", text } };
+}
+
+/**
+ * A `session/prompt` JSON-RPC request. The builder keys a turn off the request
+ * `id` and renders the prompt text as the user bubble, so each user message
+ * needs a unique, monotonic id within the conversation.
+ */
+export function promptRequestMessage(
+  id: number,
+  text: string,
+  ts: number,
+): AcpMessage {
+  return {
+    type: "acp_message",
+    ts,
+    message: {
+      jsonrpc: "2.0",
+      id,
+      method: "session/prompt",
+      params: { prompt: [textBlock(text)] },
+    },
+  };
+}
+
+/** A `session/update` notification wrapping an ACP `SessionUpdate`. */
+export function sessionUpdateMessage(
+  update: SessionUpdate,
+  ts: number,
+): AcpMessage {
+  return {
+    type: "acp_message",
+    ts,
+    message: {
+      jsonrpc: "2.0",
+      method: "session/update",
+      params: { update },
+    },
+  };
+}
+
+/** A `_posthog/turn_complete` notification — closes the active turn. */
+export function turnCompleteMessage(
+  ts: number,
+  stopReason?: string,
+): AcpMessage {
+  return {
+    type: "acp_message",
+    ts,
+    message: {
+      jsonrpc: "2.0",
+      method: POSTHOG_NOTIFICATIONS.TURN_COMPLETE,
+      params: stopReason ? { stopReason } : {},
+    },
+  };
+}
+
+// --- SessionUpdate builders -------------------------------------------------
+
+/** Streaming/settled assistant text fragment. */
+export function agentTextUpdate(text: string): SessionUpdate {
+  return { sessionUpdate: "agent_message_chunk", content: textBlock(text) };
+}
+
+/** Assistant thinking/reasoning fragment. */
+export function agentThoughtUpdate(text: string): SessionUpdate {
+  return { sessionUpdate: "agent_thought_chunk", content: textBlock(text) };
+}
+
+/**
+ * A new tool call. Status is left to a later `tool_call_update` (from the
+ * tool result) so a call without a result reads as still-running rather than
+ * falsely completed.
+ */
+export function toolCallStartUpdate(
+  toolCallId: string,
+  title: string,
+  rawInput?: unknown,
+  status?: ToolCallStatus,
+): SessionUpdate {
+  return {
+    sessionUpdate: "tool_call",
+    toolCallId,
+    title,
+    ...(rawInput === undefined ? {} : { rawInput }),
+    ...(status ? { status } : {}),
+  };
+}
+
+/** Merge canonical args onto an existing tool call. */
+export function toolCallArgsUpdate(
+  toolCallId: string,
+  title: string,
+  rawInput: unknown,
+): SessionUpdate {
+  return { sessionUpdate: "tool_call_update", toolCallId, title, rawInput };
+}
+
+/** Finalize a tool call with its outcome (text body + completed/failed). */
+export function toolResultUpdate(
+  toolCallId: string,
+  text: string,
+  isError: boolean,
+  rawOutput?: unknown,
+): SessionUpdate {
+  return {
+    sessionUpdate: "tool_call_update",
+    toolCallId,
+    status: isError ? "failed" : "completed",
+    content: [textToolContent(text)],
+    ...(rawOutput === undefined ? {} : { rawOutput }),
+  };
+}
diff --git a/packages/ui/src/features/agent-applications/chat/chatHistoryStore.ts b/packages/ui/src/features/agent-applications/chat/chatHistoryStore.ts
new file mode 100644
index 0000000000..3473ef7c6d
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/chat/chatHistoryStore.ts
@@ -0,0 +1,56 @@
+import { electronStorage } from "@posthog/ui/shell/rendererStorage";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+/**
+ * Locally-persisted index of preview chats the user started against an agent
+ * *from this app*. These are the only sessions surfaced in the chat pane's
+ * rail — deliberately NOT the agent's full server session list, which can
+ * include real customer conversations. Keyed by agent slug; each entry is just
+ * enough to re-attach (`/listen` replays the transcript) and label the rail.
+ */
+export interface PreviewChatEntry {
+  sessionId: string;
+  /** First user message of the chat, for the rail label. */
+  title: string;
+  /** Epoch ms when the chat was started here. */
+  startedAt: number;
+}
+
+interface ChatHistoryState {
+  byAgent: Record<string, PreviewChatEntry[]>;
+  /** Record (or move-to-top) a preview chat the user started here. */
+  record: (agentKey: string, entry: PreviewChatEntry) => void;
+  remove: (agentKey: string, sessionId: string) => void;
+}
+
+/** Per-agent cap; preview chats are throwaway, so an old tail is fine to drop. */
+const MAX_PER_AGENT = 50;
+
+export const useChatHistoryStore = create<ChatHistoryState>()(
+  persist(
+    (set) => ({
+      byAgent: {},
+      record: (agentKey, entry) =>
+        set((s) => {
+          const existing = s.byAgent[agentKey] ?? [];
+          // Newest first, de-duped by sessionId, capped.
+          const next = [
+            entry,
+            ...existing.filter((e) => e.sessionId !== entry.sessionId),
+          ].slice(0, MAX_PER_AGENT);
+          return { byAgent: { ...s.byAgent, [agentKey]: next } };
+        }),
+      remove: (agentKey, sessionId) =>
+        set((s) => ({
+          byAgent: {
+            ...s.byAgent,
+            [agentKey]: (s.byAgent[agentKey] ?? []).filter(
+              (e) => e.sessionId !== sessionId,
+            ),
+          },
+        })),
+    }),
+    { name: "agent-preview-chats", storage: electronStorage },
+  ),
+);
diff --git a/packages/ui/src/features/agent-applications/chat/consoleContext.test.ts b/packages/ui/src/features/agent-applications/chat/consoleContext.test.ts
new file mode 100644
index 0000000000..d2482a0274
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/chat/consoleContext.test.ts
@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildConsoleContextEnvelope,
+  stripConsoleContext,
+} from "./consoleContext";
+
+describe("console context envelope", () => {
+  it("round-trips: strip removes a prepended envelope", () => {
+    const envelope = buildConsoleContextEnvelope({ page: "agent", agent: "x" });
+    const wire = `${envelope}\n\nHello there`;
+    expect(stripConsoleContext(wire)).toBe("Hello there");
+  });
+
+  it("leaves plain text untouched", () => {
+    expect(stripConsoleContext("just a message")).toBe("just a message");
+  });
+
+  it("only strips a leading envelope, not one mid-message", () => {
+    const text =
+      "please render [console-context]{}[/console-context] literally";
+    expect(stripConsoleContext(text)).toBe(text);
+  });
+
+  it("tolerates leading whitespace before the envelope", () => {
+    const wire = `  ${buildConsoleContextEnvelope({ page: "agent-list" })}\n\nhi`;
+    expect(stripConsoleContext(wire)).toBe("hi");
+  });
+
+  it("is a no-op when the closing delimiter is missing", () => {
+    const text = "[console-context]{oops";
+    expect(stripConsoleContext(text)).toBe(text);
+  });
+});
diff --git a/packages/ui/src/features/agent-applications/chat/consoleContext.ts b/packages/ui/src/features/agent-applications/chat/consoleContext.ts
new file mode 100644
index 0000000000..4ae9d0bb6a
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/chat/consoleContext.ts
@@ -0,0 +1,29 @@
+/**
+ * The agent builder's "what am I looking at" envelope. Mirrors the console: the
+ * current page context is prepended to the *first* user message of a session,
+ * delimited so the agent can resolve deictic references ("this agent", "this
+ * session") without asking — and so the client can strip it before display.
+ */
+
+const OPEN = "[console-context]";
+const CLOSE = "[/console-context]";
+
+/** Wrap a context object in the delimited envelope (prepended to msg one). */
+export function buildConsoleContextEnvelope(context: unknown): string {
+  return `${OPEN}\n${JSON.stringify(context)}\n${CLOSE}`;
+}
+
+/**
+ * Strip a leading console-context block (and the blank line after it) so the
+ * envelope never shows in the rendered transcript. No-op when absent.
+ */
+export function stripConsoleContext(text: string): string {
+  const start = text.indexOf(OPEN);
+  if (start === -1) return text;
+  const end = text.indexOf(CLOSE, start);
+  if (end === -1) return text;
+  const before = text.slice(0, start);
+  // Only strip a *leading* envelope (allow leading whitespace before it).
+  if (before.trim() !== "") return text;
+  return text.slice(end + CLOSE.length).replace(/^\s*\n/, "");
+}
diff --git a/packages/ui/src/features/agent-applications/chat/conversationToAcp.test.ts b/packages/ui/src/features/agent-applications/chat/conversationToAcp.test.ts
new file mode 100644
index 0000000000..fa6d7fc302
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/chat/conversationToAcp.test.ts
@@ -0,0 +1,184 @@
+import type {
+  SessionNotification,
+  SessionUpdate,
+} from "@agentclientprotocol/sdk";
+import type {
+  AcpMessage,
+  JsonRpcNotification,
+  JsonRpcRequest,
+} from "@posthog/shared";
+import type { AgentConversationMessage } from "@posthog/shared/agent-platform-types";
+import { describe, expect, it } from "vitest";
+import {
+  conversationToAcpMessages,
+  userMessageText,
+} from "./conversationToAcp";
+
+function methodOf(m: AcpMessage): string | undefined {
+  return "method" in m.message ? m.message.method : undefined;
+}
+
+function updateOf(m: AcpMessage): SessionUpdate {
+  const params = (m.message as JsonRpcNotification)
+    .params as SessionNotification;
+  return params.update;
+}
+
+describe("conversationToAcpMessages", () => {
+  it("maps a single user→assistant turn to prompt + text chunk + turn_complete", () => {
+    const convo: AgentConversationMessage[] = [
+      { role: "user", content: "hello there", timestamp: 1000 },
+      {
+        role: "assistant",
+        content: [{ type: "text", text: "hi back" }],
+        timestamp: 2000,
+      },
+    ];
+
+    const out = conversationToAcpMessages(convo);
+
+    expect(out.map(methodOf)).toEqual([
+      "session/prompt",
+      "session/update",
+      "_posthog/turn_complete",
+    ]);
+    const prompt = out[0].message as JsonRpcRequest<{
+      prompt: { type: string; text: string }[];
+    }>;
+    expect(prompt.id).toBe(1);
+    expect(prompt.params?.prompt[0]).toEqual({
+      type: "text",
+      text: "hello there",
+    });
+    expect(updateOf(out[1])).toEqual({
+      sessionUpdate: "agent_message_chunk",
+      content: { type: "text", text: "hi back" },
+    });
+  });
+
+  it("emits thinking as an agent_thought_chunk", () => {
+    const out = conversationToAcpMessages([
+      { role: "user", content: "think", timestamp: 1 },
+      {
+        role: "assistant",
+        content: [
+          { type: "thinking", thinking: "hmm" },
+          { type: "text", text: "answer" },
+        ],
+        timestamp: 2,
+      },
+    ]);
+    expect(updateOf(out[1])).toEqual({
+      sessionUpdate: "agent_thought_chunk",
+      content: { type: "text", text: "hmm" },
+    });
+    expect(updateOf(out[2]).sessionUpdate).toBe("agent_message_chunk");
+  });
+
+  it("maps a tool call + its result onto the same toolCallId", () => {
+    const out = conversationToAcpMessages([
+      { role: "user", content: "run it", timestamp: 1 },
+      {
+        role: "assistant",
+        content: [
+          {
+            type: "toolCall",
+            id: "call_1",
+            name: "@posthog/query",
+            arguments: { sql: "select 1" },
+          },
+        ],
+        timestamp: 2,
+      },
+      {
+        role: "toolResult",
+        toolCallId: "call_1",
+        toolName: "@posthog/query",
+        content: [{ type: "text", text: "42" }],
+        isError: false,
+        timestamp: 3,
+      },
+    ]);
+
+    const call = updateOf(out[1]);
+    expect(call).toMatchObject({
+      sessionUpdate: "tool_call",
+      toolCallId: "call_1",
+      title: "@posthog/query",
+      rawInput: { sql: "select 1" },
+    });
+    // No premature status on the call itself.
+    expect("status" in call).toBe(false);
+
+    const result = updateOf(out[2]);
+    expect(result).toMatchObject({
+      sessionUpdate: "tool_call_update",
+      toolCallId: "call_1",
+      status: "completed",
+      content: [{ type: "content", content: { type: "text", text: "42" } }],
+    });
+  });
+
+  it("marks an errored tool result as failed", () => {
+    const out = conversationToAcpMessages([
+      { role: "user", content: "x", timestamp: 1 },
+      {
+        role: "assistant",
+        content: [{ type: "toolCall", id: "c1", name: "t", arguments: {} }],
+        timestamp: 2,
+      },
+      {
+        role: "toolResult",
+        toolCallId: "c1",
+        toolName: "t",
+        content: [{ type: "text", text: "boom" }],
+        isError: true,
+        timestamp: 3,
+      },
+    ]);
+    expect(updateOf(out[2])).toMatchObject({ status: "failed" });
+  });
+
+  it("closes the prior turn before each new user prompt and gives unique ids", () => {
+    const out = conversationToAcpMessages([
+      { role: "user", content: "first", timestamp: 1 },
+      {
+        role: "assistant",
+        content: [{ type: "text", text: "a" }],
+        timestamp: 2,
+      },
+      { role: "user", content: "second", timestamp: 3 },
+      {
+        role: "assistant",
+        content: [{ type: "text", text: "b" }],
+        timestamp: 4,
+      },
+    ]);
+
+    expect(out.map(methodOf)).toEqual([
+      "session/prompt",
+      "session/update",
+      "_posthog/turn_complete",
+      "session/prompt",
+      "session/update",
+      "_posthog/turn_complete",
+    ]);
+    expect((out[0].message as JsonRpcRequest).id).toBe(1);
+    expect((out[3].message as JsonRpcRequest).id).toBe(2);
+  });
+
+  it("returns nothing for an empty conversation", () => {
+    expect(conversationToAcpMessages([])).toEqual([]);
+  });
+
+  it("flattens array-form user content", () => {
+    expect(
+      userMessageText([
+        { type: "text", text: "a" },
+        { type: "image", url: "x" },
+        { type: "text", text: "b" },
+      ]),
+    ).toBe("ab");
+    expect(userMessageText("plain")).toBe("plain");
+  });
+});
diff --git a/packages/ui/src/features/agent-applications/chat/conversationToAcp.ts b/packages/ui/src/features/agent-applications/chat/conversationToAcp.ts
new file mode 100644
index 0000000000..782316affb
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/chat/conversationToAcp.ts
@@ -0,0 +1,119 @@
+/**
+ * Maps a stored agent_platform conversation transcript (the pi-ai
+ * `conversation` array returned by the session-detail endpoint) into the
+ * `AcpMessage[]` that code's `ConversationView` renders.
+ *
+ * Pure and order-preserving. Tool results arrive as their own `toolResult`
+ * messages after the assistant turn that issued the call; we emit them as
+ * `tool_call_update`s keyed by `toolCallId`, and the builder attaches them to
+ * the matching call. Each `user` message opens a new turn, so we close the
+ * previous one with a `_posthog/turn_complete` first (and once more at the
+ * end) to bracket turns for duration/finalization.
+ */
+
+import type { AcpMessage } from "@posthog/shared";
+import type {
+  AgentAssistantContentPart,
+  AgentConversationMessage,
+  AgentUserContentPart,
+} from "@posthog/shared/agent-platform-types";
+import {
+  agentTextUpdate,
+  agentThoughtUpdate,
+  promptRequestMessage,
+  sessionUpdateMessage,
+  toolCallStartUpdate,
+  toolResultUpdate,
+  turnCompleteMessage,
+} from "./acpEnvelope";
+
+/** Flatten a user message's content (string shorthand or text/image parts). */
+export function userMessageText(
+  content: string | AgentUserContentPart[],
+): string {
+  if (typeof content === "string") {
+    return content;
+  }
+  return content
+    .map((part) => (part.type === "text" ? part.text : ""))
+    .join("");
+}
+
+/** Concatenate the text parts of a tool result's content. */
+function toolResultText(content: { type: "text"; text: string }[]): string {
+  return content.map((part) => part.text).join("");
+}
+
+function assistantPartToMessage(
+  part: AgentAssistantContentPart,
+  ts: number,
+): AcpMessage | null {
+  switch (part.type) {
+    case "text":
+      return sessionUpdateMessage(agentTextUpdate(part.text), ts);
+    case "thinking":
+      return sessionUpdateMessage(agentThoughtUpdate(part.thinking), ts);
+    case "toolCall":
+      return sessionUpdateMessage(
+        toolCallStartUpdate(part.id, part.name, part.arguments),
+        ts,
+      );
+    default:
+      return null;
+  }
+}
+
+export function conversationToAcpMessages(
+  messages: AgentConversationMessage[],
+): AcpMessage[] {
+  const out: AcpMessage[] = [];
+  let promptId = 0;
+  let turnOpen = false;
+  let lastTs = 0;
+
+  for (const message of messages) {
+    const ts = message.timestamp;
+    lastTs = ts;
+
+    if (message.role === "user") {
+      // A new user prompt starts a new turn — close the prior one first.
+      if (turnOpen) {
+        out.push(turnCompleteMessage(ts));
+        turnOpen = false;
+      }
+      promptId += 1;
+      out.push(
+        promptRequestMessage(promptId, userMessageText(message.content), ts),
+      );
+      turnOpen = true;
+      continue;
+    }
+
+    if (message.role === "assistant") {
+      for (const part of message.content) {
+        const acp = assistantPartToMessage(part, ts);
+        if (acp) {
+          out.push(acp);
+        }
+      }
+      continue;
+    }
+
+    // toolResult — finalize the matching tool call within the open turn.
+    out.push(
+      sessionUpdateMessage(
+        toolResultUpdate(
+          message.toolCallId,
+          toolResultText(message.content),
+          message.isError,
+        ),
+        ts,
+      ),
+    );
+  }
+
+  if (turnOpen) {
+    out.push(turnCompleteMessage(lastTs));
+  }
+  return out;
+}
diff --git a/packages/ui/src/features/agent-applications/chat/sessionEventToAcp.test.ts b/packages/ui/src/features/agent-applications/chat/sessionEventToAcp.test.ts
new file mode 100644
index 0000000000..a4b015d719
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/chat/sessionEventToAcp.test.ts
@@ -0,0 +1,201 @@
+import type {
+  SessionNotification,
+  SessionUpdate,
+} from "@agentclientprotocol/sdk";
+import type {
+  AcpMessage,
+  JsonRpcNotification,
+  JsonRpcRequest,
+} from "@posthog/shared";
+import type { AgentSessionEvent } from "@posthog/shared/agent-platform-types";
+import { describe, expect, it } from "vitest";
+import {
+  createAgentChatMapper,
+  sessionEventsToAcpMessages,
+} from "./sessionEventToAcp";
+
+const TS = "2024-01-01T00:00:00.000Z";
+
+function ev<K extends AgentSessionEvent["kind"]>(
+  kind: K,
+  data: Extract<AgentSessionEvent, { kind: K }>["data"],
+): AgentSessionEvent {
+  return { session_id: "s1", ts: TS, kind, data } as AgentSessionEvent;
+}
+
+function methodOf(m: AcpMessage): string | undefined {
+  return "method" in m.message ? m.message.method : undefined;
+}
+
+function updateOf(m: AcpMessage): SessionUpdate {
+  const params = (m.message as JsonRpcNotification)
+    .params as SessionNotification;
+  return params.update;
+}
+
+describe("createAgentChatMapper", () => {
+  it("maps user messages to prompt requests with monotonic ids", () => {
+    const mapper = createAgentChatMapper();
+    const first = mapper.apply(ev("user_message", { text: "hi" }));
+    const second = mapper.apply(ev("user_message", { text: "again" }));
+
+    expect(methodOf(first[0])).toBe("session/prompt");
+    expect((first[0].message as JsonRpcRequest).id).toBe(1);
+    expect((second[0].message as JsonRpcRequest).id).toBe(2);
+  });
+
+  it("drops empty user messages", () => {
+    const mapper = createAgentChatMapper();
+    expect(mapper.apply(ev("user_message", { text: "" }))).toEqual([]);
+  });
+
+  it("maps text and thinking deltas", () => {
+    const mapper = createAgentChatMapper();
+    expect(
+      updateOf(mapper.apply(ev("assistant_text_delta", { text: "a" }))[0]),
+    ).toEqual({
+      sessionUpdate: "agent_message_chunk",
+      content: { type: "text", text: "a" },
+    });
+    expect(
+      updateOf(
+        mapper.apply(ev("assistant_thinking_delta", { thinking: "t" }))[0],
+      ),
+    ).toEqual({
+      sessionUpdate: "agent_thought_chunk",
+      content: { type: "text", text: "t" },
+    });
+  });
+
+  it("emits tool_call on first sighting, tool_call_update on follow-up", () => {
+    const mapper = createAgentChatMapper();
+    const start = mapper.apply(
+      ev("tool_call_start", { id: "c1", name: "@posthog/query" }),
+    );
+    expect(updateOf(start[0])).toMatchObject({
+      sessionUpdate: "tool_call",
+      toolCallId: "c1",
+      title: "@posthog/query",
+      status: "in_progress",
+    });
+
+    // Canonical tool_call for an already-seen id → update (merges args).
+    const canonical = mapper.apply(
+      ev("tool_call", { id: "c1", name: "@posthog/query", args: { sql: "x" } }),
+    );
+    expect(updateOf(canonical[0])).toMatchObject({
+      sessionUpdate: "tool_call_update",
+      toolCallId: "c1",
+      rawInput: { sql: "x" },
+    });
+  });
+
+  it("emits tool_call when the canonical event is the first sighting", () => {
+    const mapper = createAgentChatMapper();
+    const out = mapper.apply(
+      ev("tool_call", { id: "c2", name: "t", args: { a: 1 } }),
+    );
+    expect(updateOf(out[0])).toMatchObject({
+      sessionUpdate: "tool_call",
+      toolCallId: "c2",
+      rawInput: { a: 1 },
+    });
+  });
+
+  it("maps a successful tool_result to a completed update", () => {
+    const mapper = createAgentChatMapper();
+    mapper.apply(ev("tool_call_start", { id: "c1", name: "t" }));
+    const out = mapper.apply(
+      ev("tool_result", { id: "c1", ok: true, output: { rows: 1 } }),
+    );
+    expect(updateOf(out[0])).toMatchObject({
+      sessionUpdate: "tool_call_update",
+      toolCallId: "c1",
+      status: "completed",
+    });
+  });
+
+  it("maps an errored tool_result to a failed update with the error text", () => {
+    const mapper = createAgentChatMapper();
+    mapper.apply(ev("tool_call_start", { id: "c1", name: "t" }));
+    const out = mapper.apply(
+      ev("tool_result", { id: "c1", ok: false, error: "boom" }),
+    );
+    const update = updateOf(out[0]);
+    expect(update).toMatchObject({ status: "failed" });
+    expect(JSON.stringify(update)).toContain("boom");
+  });
+
+  it("synthesizes a call for a tool_result with no prior start", () => {
+    const mapper = createAgentChatMapper();
+    const out = mapper.apply(
+      ev("tool_result", {
+        id: "orphan",
+        tool: "mystery",
+        ok: true,
+        output: "ok",
+      }),
+    );
+    expect(out).toHaveLength(2);
+    expect(updateOf(out[0])).toMatchObject({
+      sessionUpdate: "tool_call",
+      toolCallId: "orphan",
+    });
+    expect(updateOf(out[1])).toMatchObject({
+      sessionUpdate: "tool_call_update",
+      status: "completed",
+    });
+  });
+
+  it("drops streaming arg deltas, snapshots, and lifecycle frames", () => {
+    const mapper = createAgentChatMapper();
+    expect(mapper.apply(ev("session_started", {}))).toEqual([]);
+    expect(mapper.apply(ev("turn_started", { turn: 1 }))).toEqual([]);
+    expect(
+      mapper.apply(ev("tool_call_args_delta", { id: "c1", argsDelta: '{"a' })),
+    ).toEqual([]);
+    expect(mapper.apply(ev("assistant_text", { text: "full" }))).toEqual([]);
+    expect(mapper.apply(ev("closed", {}))).toEqual([]);
+  });
+
+  it("maps completed/waiting/failed to turn_complete", () => {
+    const mapper = createAgentChatMapper();
+    expect(methodOf(mapper.apply(ev("completed", {}))[0])).toBe(
+      "_posthog/turn_complete",
+    );
+    expect(methodOf(mapper.apply(ev("waiting", {}))[0])).toBe(
+      "_posthog/turn_complete",
+    );
+    const failed = mapper.apply(ev("failed", { reason: "x" }));
+    expect((failed[0].message as JsonRpcNotification).params).toEqual({
+      stopReason: "failed",
+    });
+  });
+
+  it("folds a full streaming turn end-to-end", () => {
+    const out = sessionEventsToAcpMessages([
+      ev("session_started", {}),
+      ev("user_message", { text: "hello" }),
+      ev("turn_started", { turn: 1 }),
+      ev("assistant_thinking_delta", { thinking: "let me" }),
+      ev("assistant_text_delta", { text: "Hi " }),
+      ev("assistant_text_delta", { text: "there" }),
+      ev("tool_call_start", { id: "c1", name: "@posthog/query" }),
+      ev("tool_call", { id: "c1", name: "@posthog/query", args: { sql: "1" } }),
+      ev("tool_result", { id: "c1", ok: true, output: "done" }),
+      ev("assistant_text", { text: "Hi there" }),
+      ev("completed", {}),
+    ]);
+
+    expect(out.map(methodOf)).toEqual([
+      "session/prompt",
+      "session/update", // thinking
+      "session/update", // text "Hi "
+      "session/update", // text "there"
+      "session/update", // tool_call
+      "session/update", // tool_call_update (args)
+      "session/update", // tool_call_update (result)
+      "_posthog/turn_complete",
+    ]);
+  });
+});
diff --git a/packages/ui/src/features/agent-applications/chat/sessionEventToAcp.ts b/packages/ui/src/features/agent-applications/chat/sessionEventToAcp.ts
new file mode 100644
index 0000000000..d35419033e
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/chat/sessionEventToAcp.ts
@@ -0,0 +1,222 @@
+/**
+ * Maps the live agent-ingress SSE stream (`AgentSessionEvent`) into the
+ * `AcpMessage[]` code's `ConversationView` renders, incrementally.
+ *
+ * Stateful by necessity: user messages need monotonic JSON-RPC request ids,
+ * and tool-call lifecycle events arrive by id and must be distinguished
+ * between "first sighting" (emit a `tool_call`) and "follow-up" (emit a
+ * `tool_call_update` the builder merges). A fresh mapper is created per
+ * session/stream.
+ *
+ * As with the stored-transcript mapper, code's `buildConversationItems` does
+ * all the accumulation — this only translates the wire shape. Streaming
+ * tool-call arg deltas (`tool_call_args_delta`) are intentionally dropped:
+ * the canonical `tool_call` event carries the full args a beat later, and
+ * rendering half-streamed JSON as `rawInput` reads worse than a brief gap.
+ */
+
+import type { AcpMessage } from "@posthog/shared";
+import type { AgentSessionEvent } from "@posthog/shared/agent-platform-types";
+import {
+  agentTextUpdate,
+  agentThoughtUpdate,
+  promptRequestMessage,
+  sessionUpdateMessage,
+  toolCallArgsUpdate,
+  toolCallStartUpdate,
+  toolResultUpdate,
+  turnCompleteMessage,
+} from "./acpEnvelope";
+import { stripConsoleContext } from "./consoleContext";
+
+function toEpochMs(iso: string): number {
+  const ms = Date.parse(iso);
+  return Number.isNaN(ms) ? 0 : ms;
+}
+
+/** Render a tool result's `output`/`error` payload as display text. */
+function outputText(value: unknown): string {
+  if (value == null) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+export interface AgentChatMapper {
+  /**
+   * Optimistically emit the user's just-sent message so it renders the instant
+   * they hit send, before the network round-trip. The stream echoes the same
+   * message back a beat later as a `user_message` event — that echo is swallowed
+   * (matched by text, FIFO) so it isn't rendered twice.
+   */
+  seedUserMessage(text: string, ts?: number): AcpMessage[];
+  /**
+   * Continue prompt (request) id numbering past `count` restored turns, so a
+   * follow-up message on a resumed chat doesn't collide with a turn rebuilt
+   * from the stored transcript.
+   */
+  setPromptIdBase(count: number): void;
+  /** Translate one SSE event into zero or more ACP messages. */
+  apply(event: AgentSessionEvent): AcpMessage[];
+}
+
+export function createAgentChatMapper(): AgentChatMapper {
+  let promptId = 0;
+  const seenToolCalls = new Set<string>();
+  // Texts shown optimistically and awaiting their echoed `user_message` frame.
+  const pendingOptimistic: string[] = [];
+
+  return {
+    seedUserMessage(text: string, ts?: number): AcpMessage[] {
+      if (!text) {
+        return [];
+      }
+      promptId += 1;
+      pendingOptimistic.push(text);
+      return [promptRequestMessage(promptId, text, ts ?? Date.now())];
+    },
+
+    setPromptIdBase(count: number): void {
+      promptId = Math.max(promptId, count);
+    },
+
+    apply(event: AgentSessionEvent): AcpMessage[] {
+      const ts = toEpochMs(event.ts);
+
+      switch (event.kind) {
+        case "user_message": {
+          if (!event.data.text) {
+            return [];
+          }
+          // The first message may carry a agent builder context envelope — strip it
+          // so it never shows in the transcript (and so dedup matches the clean
+          // optimistic text the composer rendered).
+          const text = stripConsoleContext(event.data.text);
+          // Already rendered optimistically on send — swallow the echo.
+          if (pendingOptimistic[0] === text) {
+            pendingOptimistic.shift();
+            return [];
+          }
+          promptId += 1;
+          return [promptRequestMessage(promptId, text, ts)];
+        }
+
+        case "assistant_text_delta":
+          return event.data.text
+            ? [sessionUpdateMessage(agentTextUpdate(event.data.text), ts)]
+            : [];
+
+        case "assistant_thinking_delta":
+          return event.data.thinking
+            ? [
+                sessionUpdateMessage(
+                  agentThoughtUpdate(event.data.thinking),
+                  ts,
+                ),
+              ]
+            : [];
+
+        case "tool_call_start": {
+          const { id, name } = event.data;
+          if (seenToolCalls.has(id)) {
+            return [];
+          }
+          seenToolCalls.add(id);
+          return [
+            sessionUpdateMessage(
+              toolCallStartUpdate(id, name, undefined, "in_progress"),
+              ts,
+            ),
+          ];
+        }
+
+        case "tool_call": {
+          const { id, name, args } = event.data;
+          if (seenToolCalls.has(id)) {
+            return [
+              sessionUpdateMessage(
+                toolCallArgsUpdate(id, name, args ?? {}),
+                ts,
+              ),
+            ];
+          }
+          seenToolCalls.add(id);
+          return [
+            sessionUpdateMessage(
+              toolCallStartUpdate(id, name, args ?? {}, "in_progress"),
+              ts,
+            ),
+          ];
+        }
+
+        case "tool_result": {
+          const { id, ok, output, error, tool } = event.data;
+          const isError = ok === false;
+          const text = isError ? (error ?? "tool failed") : outputText(output);
+          const messages: AcpMessage[] = [];
+          // Defensive: a result for a call we never saw start — synthesize the
+          // call so the builder has something to attach the result to.
+          if (!seenToolCalls.has(id)) {
+            seenToolCalls.add(id);
+            messages.push(
+              sessionUpdateMessage(toolCallStartUpdate(id, tool ?? "tool"), ts),
+            );
+          }
+          messages.push(
+            sessionUpdateMessage(
+              toolResultUpdate(id, text, isError, output),
+              ts,
+            ),
+          );
+          return messages;
+        }
+
+        case "client_tool_result": {
+          const { call_id, result, error } = event.data;
+          const isError = typeof error === "string";
+          const text = isError
+            ? (error ?? "client tool failed")
+            : outputText(result);
+          return [
+            sessionUpdateMessage(
+              toolResultUpdate(call_id, text, isError, result),
+              ts,
+            ),
+          ];
+        }
+
+        case "completed":
+          return [turnCompleteMessage(ts)];
+
+        case "waiting":
+          return [turnCompleteMessage(ts)];
+
+        case "failed":
+          return [turnCompleteMessage(ts, "failed")];
+
+        // Frames that carry no renderable transcript content. `turn_started`
+        // is implicit in the prompt request; `assistant_text` is a turn-end
+        // snapshot the deltas already produced; `tool_call_args_delta` is
+        // dropped (see file header); `client_tool_call` is handled by the
+        // host transport (M4); the rest are lifecycle bookkeeping.
+        default:
+          return [];
+      }
+    },
+  };
+}
+
+/** Fold a full event buffer through a fresh mapper — handy for replay/tests. */
+export function sessionEventsToAcpMessages(
+  events: AgentSessionEvent[],
+): AcpMessage[] {
+  const mapper = createAgentChatMapper();
+  return events.flatMap((event) => mapper.apply(event));
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentAnalyticsView.tsx b/packages/ui/src/features/agent-applications/components/AgentAnalyticsView.tsx
new file mode 100644
index 0000000000..ab0b63d4d0
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentAnalyticsView.tsx
@@ -0,0 +1,415 @@
+import {
+  ArrowDownIcon,
+  ArrowSquareOutIcon,
+  ArrowUpIcon,
+  ChartLineIcon,
+  WarningIcon,
+} from "@phosphor-icons/react";
+import {
+  BarChart,
+  type Series,
+  Sparkline,
+  useChartTheme,
+} from "@posthog/quill-charts";
+import type {
+  AgentAnalyticsData,
+  AgentAnalyticsModelRow,
+  AgentAnalyticsToolRow,
+} from "@posthog/shared/agent-platform-types";
+import { openExternalUrl } from "@posthog/ui/shell/openExternal";
+import { Flex, Text } from "@radix-ui/themes";
+import type { ReactNode } from "react";
+
+const usd = (v: number): string =>
+  v >= 100 ? `$${v.toFixed(0)}` : `$${v.toFixed(2)}`;
+const pct = (v: number): string => `${(v * 100).toFixed(1)}%`;
+const secs = (v: number): string => `${v.toFixed(v < 10 ? 1 : 0)}s`;
+const int = (v: number): string => v.toLocaleString();
+
+/**
+ * The agent observability dashboard: top-line KPIs with 14-day spark trends +
+ * WoW deltas plus charts. Pure presentation — `useAgentAnalytics` runs the
+ * HogQL and shapes the data; this renders one of loading / error / empty /
+ * populated.
+ *
+ * `scope` "overview" is the fleet board blended into the Applications landing
+ * (KPIs + spend-by-agent + cost-by-model; the agent list below carries the
+ * per-agent breakdown). "agent" is the per-agent Observability tab (KPIs +
+ * cost-by-model + tool reliability — spend-by-agent is meaningless for one).
+ */
+export function AgentAnalyticsView({
+  data,
+  title = "Observability",
+  subtitle = "Last 7 days · 14-day trend",
+  aiObservabilityUrl,
+  isLoading,
+  isError,
+  errorMessage,
+}: {
+  data: AgentAnalyticsData | undefined;
+  title?: string;
+  subtitle?: string;
+  /** Deep link into the team's AI observability product for trace-level depth. */
+  aiObservabilityUrl?: string | null;
+  isLoading?: boolean;
+  isError?: boolean;
+  errorMessage?: string | null;
+}) {
+  return (
+    <Flex direction="column" gap="5">
+      <Flex align="end" justify={title ? "between" : "end"} gap="3">
+        {title ? (
+          <Flex direction="column" gap="0.5">
+            <Text className="font-semibold text-[15px] text-gray-12 leading-tight">
+              {title}
+            </Text>
+            <Text className="text-[12px] text-gray-10">{subtitle}</Text>
+          </Flex>
+        ) : null}
+        {aiObservabilityUrl ? (
+          <button
+            type="button"
+            onClick={() => openExternalUrl(aiObservabilityUrl)}
+            className="inline-flex shrink-0 items-center gap-1 text-[12px] text-gray-11 no-underline hover:text-gray-12"
+          >
+            Open in AI observability
+            <ArrowSquareOutIcon size={12} />
+          </button>
+        ) : null}
+      </Flex>
+
+      {isLoading && !data ? (
+        <LoadingSkeleton />
+      ) : isError ? (
+        <ErrorState message={errorMessage} />
+      ) : !data || data.empty ? (
+        <EmptyState />
+      ) : (
+        <>
+          <AgentAnalyticsKpiStrip data={data} />
+          <Panel title="Cost by model">
+            <CostByModelChart rows={data.byModel} />
+          </Panel>
+          <Panel title="Tool reliability">
+            <ToolTable rows={data.toolErrors} />
+          </Panel>
+        </>
+      )}
+    </Flex>
+  );
+}
+
+/* ── KPIs ─────────────────────────────────────────────────────────── */
+
+/**
+ * The four top-line KPI tiles (spend / sessions / failure rate / p95) with
+ * 14-day spark trends + WoW deltas. Reused standalone on the per-agent Overview
+ * tab, where it owns its own loading / empty rendering.
+ */
+export function AgentAnalyticsKpiStrip({
+  data,
+  isLoading,
+}: {
+  data: AgentAnalyticsData | undefined;
+  isLoading?: boolean;
+}) {
+  if (isLoading && !data) {
+    return (
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        {[0, 1, 2, 3].map((i) => (
+          <Skel key={i} className="h-20" />
+        ))}
+      </div>
+    );
+  }
+  if (!data || data.empty) {
+    return <EmptyHint text="No AI activity in the last 7 days." />;
+  }
+  const { kpis, deltas, daily } = data;
+  return (
+    <Flex className="overflow-hidden rounded-(--radius-2) border border-border bg-(--color-panel-solid)">
+      <KpiTile
+        label="Spend · 7d"
+        value={usd(kpis.spendUsd)}
+        delta={deltas.spend}
+        goodDirection="down"
+        trend={daily.spend}
+      />
+      <KpiTile
+        label="Sessions · 7d"
+        value={int(kpis.sessions)}
+        delta={deltas.sessions}
+        goodDirection="up"
+        trend={daily.sessions}
+      />
+      <KpiTile
+        label="Failure rate · 7d"
+        value={pct(kpis.failureRate)}
+        delta={deltas.failureRatePoints}
+        deltaUnit="pp"
+        goodDirection="down"
+        attention={kpis.failureRate > 0}
+      />
+      <KpiTile label="p95 latency · 7d" value={secs(kpis.p95LatencyS)} last />
+    </Flex>
+  );
+}
+
+function KpiTile({
+  label,
+  value,
+  delta,
+  deltaUnit = "%",
+  goodDirection,
+  attention,
+  trend,
+  last,
+}: {
+  label: string;
+  value: string;
+  delta?: number | null;
+  deltaUnit?: "%" | "pp";
+  goodDirection?: "up" | "down";
+  attention?: boolean;
+  trend?: number[];
+  last?: boolean;
+}) {
+  const theme = useChartTheme();
+  const hasDelta =
+    delta != null && Number.isFinite(delta) && goodDirection != null;
+  const hasTrend = (trend?.length ?? 0) > 1;
+  return (
+    <Flex
+      direction="column"
+      gap="1"
+      className={`min-w-0 flex-1 px-4 py-3 ${last ? "" : "border-(--gray-5) border-r"}`}
+    >
+      <Text className="truncate text-[11px] text-gray-10 uppercase tracking-wide">
+        {label}
+      </Text>
+      <Flex align="baseline" gap="2">
+        <Text
+          className={`font-semibold text-[18px] tabular-nums leading-none ${
+            attention ? "text-(--amber-11)" : "text-gray-12"
+          }`}
+        >
+          {value}
+        </Text>
+        {hasDelta ? (
+          <DeltaChip
+            value={delta as number}
+            unit={deltaUnit}
+            goodDirection={goodDirection as "up" | "down"}
+          />
+        ) : null}
+      </Flex>
+      {hasTrend ? (
+        <div className="mt-1 h-6 w-full">
+          <Sparkline
+            data={trend as number[]}
+            theme={theme}
+            height={24}
+            fillOpacity={0.15}
+          />
+        </div>
+      ) : (
+        <Text className="text-[11px] text-gray-9">
+          {hasDelta ? "vs prior 7d" : " "}
+        </Text>
+      )}
+    </Flex>
+  );
+}
+
+function DeltaChip({
+  value,
+  unit,
+  goodDirection,
+}: {
+  value: number;
+  unit: "%" | "pp";
+  goodDirection: "up" | "down";
+}) {
+  const up = value >= 0;
+  const good = goodDirection === "up" ? up : !up;
+  const Arrow = up ? ArrowUpIcon : ArrowDownIcon;
+  const magnitude =
+    unit === "pp"
+      ? Math.abs(value).toFixed(1)
+      : String(Math.abs(Math.round(value)));
+  return (
+    <span
+      className={`inline-flex items-center gap-0.5 font-medium text-[11px] tabular-nums ${
+        good ? "text-(--green-11)" : "text-(--red-11)"
+      }`}
+    >
+      <Arrow size={11} />
+      {magnitude}
+      {unit}
+    </span>
+  );
+}
+
+/* ── Charts ───────────────────────────────────────────────────────── */
+
+function CostByModelChart({ rows }: { rows: AgentAnalyticsModelRow[] }) {
+  const theme = useChartTheme();
+  if (rows.length === 0) {
+    return <EmptyHint text="No model usage recorded yet." />;
+  }
+  const series: Series[] = [
+    { key: "cost", label: "Cost (USD)", data: rows.map((r) => r.spendUsd) },
+  ];
+  return (
+    <div className="h-56 w-full">
+      <BarChart
+        series={series}
+        labels={rows.map((r) => r.model)}
+        config={{
+          axisOrientation: "horizontal",
+          showGrid: false,
+          bars: { fitToHeight: true },
+        }}
+        theme={theme}
+      />
+    </div>
+  );
+}
+
+/* ── Tables ───────────────────────────────────────────────────────── */
+
+function ToolTable({ rows }: { rows: AgentAnalyticsToolRow[] }) {
+  if (rows.length === 0) {
+    return <EmptyHint text="No tool calls recorded yet." />;
+  }
+  return (
+    <table className="w-full text-[12px]">
+      <thead>
+        <tr className="border-(--gray-5) border-b text-left text-gray-10">
+          <Th className="text-left">Tool</Th>
+          <Th>Calls</Th>
+          <Th>Errors</Th>
+          <Th>Error rate</Th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((r) => (
+          <tr key={r.tool} className="border-(--gray-4) border-b last:border-0">
+            <td className="py-1.5 pr-2 font-mono text-gray-12">{r.tool}</td>
+            <Td>{int(r.calls)}</Td>
+            <Td>{int(r.errors)}</Td>
+            <Td>
+              <span
+                className={r.errorRate > 0 ? "text-(--red-11)" : "text-gray-12"}
+              >
+                {pct(r.errorRate)}
+              </span>
+            </Td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+/* ── Primitives ───────────────────────────────────────────────────── */
+
+function Panel({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <div className="overflow-hidden rounded-(--radius-2) border border-border bg-(--color-panel-solid)">
+      <div className="border-(--gray-5) border-b px-3 py-2">
+        <Text className="font-medium text-[11px] text-gray-10 uppercase tracking-wide">
+          {title}
+        </Text>
+      </div>
+      <div className="px-3 py-3">{children}</div>
+    </div>
+  );
+}
+
+function Th({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <th className={`py-1.5 pr-2 font-medium ${className ?? "text-right"}`}>
+      {children}
+    </th>
+  );
+}
+
+function Td({ children }: { children: ReactNode }) {
+  return (
+    <td className="py-1.5 pr-2 text-right text-gray-12 tabular-nums">
+      {children}
+    </td>
+  );
+}
+
+function EmptyHint({ text }: { text: string }) {
+  return <Text className="text-[12px] text-gray-10 italic">{text}</Text>;
+}
+
+function EmptyState() {
+  return (
+    <Flex
+      direction="column"
+      align="center"
+      gap="2"
+      className="rounded-(--radius-2) border border-(--gray-5) border-dashed py-16 text-center"
+    >
+      <ChartLineIcon size={24} className="text-gray-9" />
+      <Text className="font-medium text-[13px] text-gray-12">
+        No AI activity yet
+      </Text>
+      <Text className="max-w-sm text-[12px] text-gray-11 leading-snug">
+        Once your agents run, their model calls, tool spans, cost and latency
+        show up here — and in full detail in AI observability.
+      </Text>
+    </Flex>
+  );
+}
+
+function ErrorState({ message }: { message?: string | null }) {
+  return (
+    <Flex
+      direction="column"
+      align="center"
+      gap="2"
+      className="rounded-(--radius-2) border border-(--red-6) border-dashed py-16 text-center"
+    >
+      <WarningIcon size={24} className="text-(--red-11)" />
+      <Text className="font-medium text-[13px] text-gray-12">
+        Couldn't load analytics
+      </Text>
+      <Text className="max-w-md text-[12px] text-gray-11 leading-snug">
+        {message ?? "The query endpoint returned an error."}
+      </Text>
+    </Flex>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <Flex direction="column" gap="5">
+      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+        {[0, 1, 2, 3].map((i) => (
+          <Skel key={i} className="h-20" />
+        ))}
+      </div>
+      <Skel className="h-64" />
+      <Skel className="h-32" />
+    </Flex>
+  );
+}
+
+function Skel({ className }: { className?: string }) {
+  return (
+    <div
+      className={`animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2) ${className ?? ""}`}
+    />
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentApplicationDetailView.tsx b/packages/ui/src/features/agent-applications/components/AgentApplicationDetailView.tsx
new file mode 100644
index 0000000000..9ca31c8d7f
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentApplicationDetailView.tsx
@@ -0,0 +1,80 @@
+import { Flex, Text } from "@radix-ui/themes";
+import { Link } from "@tanstack/react-router";
+import { useAgentAnalytics } from "../hooks/useAgentAnalytics";
+import { useAgentApplication } from "../hooks/useAgentApplication";
+import { useAgentApplicationSessions } from "../hooks/useAgentApplicationSessions";
+import { AgentAnalyticsKpiStrip } from "./AgentAnalyticsView";
+import { AgentDetailEmptyState, AgentDetailLayout } from "./AgentDetailLayout";
+import { AgentSessionRow } from "./AgentSessionRow";
+
+/**
+ * Per-agent Overview pane: the top-level observability KPIs (spend / sessions /
+ * failure rate / p95 over the last 7 days, with trends + WoW deltas — the same
+ * metrics as the Observability tab) plus recent sessions. Rendered inside the
+ * shared {@link AgentDetailLayout} tab shell.
+ */
+export function AgentApplicationDetailView({ idOrSlug }: { idOrSlug: string }) {
+  const { data: application } = useAgentApplication(idOrSlug);
+  const { data: analytics, isLoading: analyticsLoading } = useAgentAnalytics(
+    application?.id,
+    "agent",
+  );
+  const { data: sessions, isLoading: sessionsLoading } =
+    useAgentApplicationSessions(idOrSlug, { limit: 25 });
+
+  return (
+    <AgentDetailLayout idOrSlug={idOrSlug} activeTab="overview">
+      <Flex direction="column" gap="6">
+        <section>
+          <Flex align="center" justify="between" className="mb-3">
+            <Text className="font-semibold text-[13px] text-gray-12">
+              Activity · last 7 days
+            </Text>
+            <Link
+              to="/code/agents/applications/$idOrSlug/observability"
+              params={{ idOrSlug }}
+              className="text-[12px] text-gray-11 no-underline hover:text-gray-12"
+            >
+              View observability →
+            </Link>
+          </Flex>
+          <AgentAnalyticsKpiStrip
+            data={analytics}
+            isLoading={analyticsLoading || !application}
+          />
+        </section>
+
+        <section>
+          <Text className="mb-3 block font-semibold text-[13px] text-gray-12">
+            Recent sessions
+          </Text>
+          {sessionsLoading ? (
+            <Flex direction="column" gap="2">
+              {[0, 1, 2].map((i) => (
+                <div
+                  key={i}
+                  className="h-[52px] animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2)"
+                />
+              ))}
+            </Flex>
+          ) : !sessions || sessions.results.length === 0 ? (
+            <AgentDetailEmptyState
+              title="No sessions yet"
+              description="Sessions this agent runs will appear here."
+            />
+          ) : (
+            <Flex direction="column" gap="2">
+              {sessions.results.map((session) => (
+                <AgentSessionRow
+                  key={session.id}
+                  session={session}
+                  idOrSlug={idOrSlug}
+                />
+              ))}
+            </Flex>
+          )}
+        </section>
+      </Flex>
+    </AgentDetailLayout>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentApplicationsListView.tsx b/packages/ui/src/features/agent-applications/components/AgentApplicationsListView.tsx
new file mode 100644
index 0000000000..11f38f5ae0
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentApplicationsListView.tsx
@@ -0,0 +1,256 @@
+import {
+  ArrowSquareOutIcon,
+  BroadcastIcon,
+  CaretRightIcon,
+  LockKeyIcon,
+  RobotIcon,
+} from "@phosphor-icons/react";
+import type {
+  AgentAnalyticsAgentRow,
+  AgentApplication,
+} from "@posthog/shared/agent-platform-types";
+import { AgentsTabLayout } from "@posthog/ui/features/agents/components/AgentsTabLayout";
+import { Badge } from "@posthog/ui/primitives/Badge";
+import { openExternalUrl } from "@posthog/ui/shell/openExternal";
+import { Flex, Text } from "@radix-ui/themes";
+import { Link } from "@tanstack/react-router";
+import { useMemo } from "react";
+import { useAuthStateValue } from "../../auth/store";
+import { useAgentAnalytics } from "../hooks/useAgentAnalytics";
+import { useAgentApplications } from "../hooks/useAgentApplications";
+import { useAgentFleetApprovals } from "../hooks/useAgentFleetApprovals";
+import { useAgentFleetLiveSessions } from "../hooks/useAgentFleetLiveSessions";
+import { formatSpendUsd } from "../utils/format";
+import { aiObservabilityTracesUrl } from "../utils/observabilityLinks";
+import { AgentAnalyticsKpiStrip } from "./AgentAnalyticsView";
+import { AgentDetailEmptyState } from "./AgentDetailLayout";
+import { AgentFleetLiveSessionsPanel } from "./AgentFleetLiveSessionsPanel";
+
+/**
+ * The Applications tab: the fleet observability KPIs (spend / sessions /
+ * failure rate / p95 over the team's `$ai_*` events) blended on top of the list
+ * of deployed agents. The per-agent rollups from the same analytics query are
+ * merged into each list row as inline stats, so one fetch powers both the KPI
+ * strip and the rows. Each row links to the per-agent detail view.
+ */
+export function AgentApplicationsListView() {
+  const region = useAuthStateValue((s) => s.cloudRegion);
+  const projectId = useAuthStateValue((s) => s.currentProjectId);
+
+  const {
+    data: applications,
+    isLoading,
+    isError,
+    error,
+  } = useAgentApplications();
+  const { data: analytics, isLoading: analyticsLoading } = useAgentAnalytics();
+  const { data: liveSessions } = useAgentFleetLiveSessions();
+  const { data: queuedApprovals } = useAgentFleetApprovals({ state: "queued" });
+  const aiObservabilityUrl = aiObservabilityTracesUrl(region, projectId);
+  const liveCount = liveSessions?.results.length ?? 0;
+  const pendingCount = queuedApprovals?.length ?? 0;
+
+  // Index the per-agent rollups by application id so each row can show its own
+  // sessions / spend / failure rate without a second request.
+  const statsById = useMemo(() => {
+    const map = new Map<string, AgentAnalyticsAgentRow>();
+    for (const row of analytics?.byAgent ?? []) {
+      map.set(row.id, row);
+    }
+    return map;
+  }, [analytics]);
+
+  return (
+    <AgentsTabLayout activeTab="applications">
+      <Flex direction="column" gap="5">
+        <OperationalStrip liveCount={liveCount} pendingCount={pendingCount} />
+
+        <section>
+          <Flex align="center" justify="between" className="mb-3">
+            <Text className="font-semibold text-[13px] text-gray-12">
+              Activity · last 7 days
+            </Text>
+            {aiObservabilityUrl ? (
+              <button
+                type="button"
+                onClick={() => openExternalUrl(aiObservabilityUrl)}
+                className="inline-flex items-center gap-1 text-[12px] text-gray-11 no-underline hover:text-gray-12"
+              >
+                Open in AI observability
+                <ArrowSquareOutIcon size={12} />
+              </button>
+            ) : null}
+          </Flex>
+          <AgentAnalyticsKpiStrip
+            data={analytics}
+            isLoading={analyticsLoading}
+          />
+        </section>
+
+        <AgentFleetLiveSessionsPanel />
+
+        <Flex direction="column" gap="2">
+          <Text className="text-[11px] text-gray-10 uppercase tracking-wide">
+            Agents
+          </Text>
+          {isLoading ? (
+            <ApplicationsSkeleton />
+          ) : isError ? (
+            <AgentDetailEmptyState
+              title="Couldn't load applications"
+              description={
+                error instanceof Error
+                  ? error.message
+                  : "The agent platform API returned an error."
+              }
+            />
+          ) : !applications || applications.length === 0 ? (
+            <AgentDetailEmptyState
+              title="No agents yet"
+              description="Deployed agents on the agent platform will show up here."
+            />
+          ) : (
+            applications.map((app) => (
+              <ApplicationRow
+                key={app.id}
+                application={app}
+                stats={statsById.get(app.id)}
+              />
+            ))
+          )}
+        </Flex>
+      </Flex>
+    </AgentsTabLayout>
+  );
+}
+
+function ApplicationRow({
+  application,
+  stats,
+}: {
+  application: AgentApplication;
+  stats?: AgentAnalyticsAgentRow;
+}) {
+  const isLive = application.live_revision != null;
+  return (
+    <Link
+      to="/code/agents/applications/$idOrSlug"
+      params={{ idOrSlug: application.slug ?? application.id }}
+      className="flex items-center justify-between gap-3 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-4 py-3.5 no-underline transition-colors duration-150 hover:border-(--gray-6) hover:bg-(--gray-2)"
+    >
+      <Flex align="center" gap="3" className="min-w-0">
+        <RobotIcon size={20} className="shrink-0 text-gray-11" />
+        <Flex direction="column" gap="0.5" className="min-w-0">
+          <Flex align="center" gap="2" className="min-w-0">
+            <Text className="truncate font-medium text-[13px] text-gray-12">
+              {application.name}
+            </Text>
+            <Badge color={isLive ? "green" : "gray"}>
+              {isLive ? "Live" : "Draft"}
+            </Badge>
+          </Flex>
+          <Text className="truncate text-[12px] text-gray-11 leading-snug">
+            {application.description?.trim()
+              ? application.description
+              : (application.slug ?? application.id)}
+          </Text>
+        </Flex>
+      </Flex>
+      <Flex align="center" gap="4" className="shrink-0">
+        {stats ? <RowStats stats={stats} /> : null}
+        <CaretRightIcon size={14} className="shrink-0 text-gray-10" />
+      </Flex>
+    </Link>
+  );
+}
+
+/** Inline 7-day rollups shown on an agent row, joined from the fleet query. */
+function RowStats({ stats }: { stats: AgentAnalyticsAgentRow }) {
+  return (
+    <Flex align="center" gap="4" className="hidden sm:flex">
+      <RowStat label="Sessions" value={stats.sessions.toLocaleString()} />
+      <RowStat label="Spend" value={formatSpendUsd(stats.spendUsd)} />
+      <RowStat
+        label="Fail rate"
+        value={`${(stats.failureRate * 100).toFixed(1)}%`}
+        attention={stats.failureRate > 0}
+      />
+    </Flex>
+  );
+}
+
+function RowStat({
+  label,
+  value,
+  attention,
+}: {
+  label: string;
+  value: string;
+  attention?: boolean;
+}) {
+  return (
+    <Flex direction="column" align="end" gap="0.5" className="shrink-0">
+      <Text
+        className={`font-medium text-[12px] tabular-nums ${
+          attention ? "text-(--red-11)" : "text-gray-12"
+        }`}
+      >
+        {value}
+      </Text>
+      <Text className="text-[10px] text-gray-10 uppercase tracking-wide">
+        {label}
+      </Text>
+    </Flex>
+  );
+}
+
+/**
+ * Operational counts strip — restores the "live now / pending approvals"
+ * signals the M7 analytics KPIs displaced. Live count anchors the live-now
+ * panel below; pending links to the fleet approvals queue.
+ */
+function OperationalStrip({
+  liveCount,
+  pendingCount,
+}: {
+  liveCount: number;
+  pendingCount: number;
+}) {
+  return (
+    <Flex align="center" gap="5" className="text-[12.5px]">
+      <div className="inline-flex items-center gap-1 text-gray-11">
+        <BroadcastIcon size={13} className="mr-1 text-gray-10" />
+        <Text className="font-medium text-gray-12 tabular-nums">
+          {liveCount}
+        </Text>
+        <Text>live now</Text>
+      </div>
+      <Link
+        to="/code/agents/applications/approvals"
+        className="inline-flex items-center gap-1 text-gray-11 no-underline hover:text-gray-12"
+      >
+        <LockKeyIcon size={13} className="mr-1 text-gray-10" />
+        <Text
+          className={`font-medium tabular-nums ${pendingCount > 0 ? "text-(--amber-11)" : "text-gray-12"}`}
+        >
+          {pendingCount}
+        </Text>
+        <Text>pending approval{pendingCount === 1 ? "" : "s"}</Text>
+        <CaretRightIcon size={11} className="text-gray-10" />
+      </Link>
+    </Flex>
+  );
+}
+
+function ApplicationsSkeleton() {
+  return (
+    <Flex direction="column" gap="2">
+      {[0, 1, 2].map((i) => (
+        <div
+          key={i}
+          className="h-[58px] animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2)"
+        />
+      ))}
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentApprovalDecisionForm.tsx b/packages/ui/src/features/agent-applications/components/AgentApprovalDecisionForm.tsx
new file mode 100644
index 0000000000..aa33a74832
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentApprovalDecisionForm.tsx
@@ -0,0 +1,120 @@
+import { CheckIcon, XIcon } from "@phosphor-icons/react";
+import type {
+  AgentApprovalRequest,
+  DecideApprovalRequest,
+} from "@posthog/shared/agent-platform-types";
+import { Button } from "@posthog/ui/primitives/Button";
+import { Checkbox, Flex, Text, TextArea } from "@radix-ui/themes";
+import { useState } from "react";
+
+/**
+ * Presentational approve/reject controls for a queued approval — proposed-args
+ * editor (when allowed), reason note, error surface, and the two action
+ * buttons. Owns its own UI state but takes the decision callback from the
+ * caller, so both the full `AgentApprovalDetail` (Approvals tab + Fleet route)
+ * and the inline `AgentChatPendingApprovalCard` (live chat preview) can wrap
+ * it with their own `useDecideAgentApproval` glue.
+ */
+export function AgentApprovalDecisionForm({
+  approval,
+  busy,
+  error,
+  onSubmit,
+}: {
+  approval: AgentApprovalRequest;
+  busy: boolean;
+  error: string | null;
+  onSubmit: (body: DecideApprovalRequest) => void;
+}) {
+  const allowEdit = approval.approver_scope?.allow_edit === true;
+  const [reason, setReason] = useState("");
+  const [editMode, setEditMode] = useState(false);
+  const [argsText, setArgsText] = useState(() =>
+    JSON.stringify(approval.proposed_args, null, 2),
+  );
+  const [parseError, setParseError] = useState<string | null>(null);
+
+  function submit(decision: "approve" | "reject") {
+    const body: DecideApprovalRequest = { decision };
+    if (reason.trim()) body.reason = reason.trim();
+    if (decision === "approve" && allowEdit && editMode) {
+      try {
+        body.edited_args = JSON.parse(argsText);
+      } catch (err) {
+        setParseError(err instanceof Error ? err.message : "Invalid JSON");
+        return;
+      }
+    }
+    setParseError(null);
+    onSubmit(body);
+  }
+
+  return (
+    <Flex direction="column" gap="3" className="mt-4">
+      {allowEdit ? (
+        <Text as="label" className="w-fit text-[12px] text-gray-11">
+          <Flex gap="2" align="center">
+            <Checkbox
+              size="1"
+              checked={editMode}
+              onCheckedChange={(c) => setEditMode(c === true)}
+            />
+            Approve with edits
+          </Flex>
+        </Text>
+      ) : null}
+
+      {allowEdit && editMode ? (
+        <div>
+          <TextArea
+            value={argsText}
+            onChange={(e) => setArgsText(e.target.value)}
+            rows={8}
+            className="text-[12px] [font-family:var(--font-mono)]"
+            spellCheck={false}
+          />
+          {parseError ? (
+            <Text className="mt-1 block text-(--red-11) text-[11px]">
+              {parseError}
+            </Text>
+          ) : null}
+        </div>
+      ) : null}
+
+      <TextArea
+        value={reason}
+        onChange={(e) => setReason(e.target.value)}
+        placeholder="Reason (optional)"
+        rows={2}
+        className="text-[12px]"
+      />
+
+      {error ? (
+        <Text className="text-(--red-11) text-[11px]">{error}</Text>
+      ) : null}
+
+      <Flex gap="2">
+        <Button
+          color="green"
+          size="2"
+          onClick={() => submit("approve")}
+          disabled={busy}
+          loading={busy}
+        >
+          <CheckIcon size={14} />
+          Approve
+        </Button>
+        <Button
+          color="red"
+          variant="soft"
+          size="2"
+          onClick={() => submit("reject")}
+          disabled={busy}
+        >
+          <XIcon size={14} />
+          Reject
+        </Button>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentApprovalDetail.tsx b/packages/ui/src/features/agent-applications/components/AgentApprovalDetail.tsx
new file mode 100644
index 0000000000..6b4fccdc4b
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentApprovalDetail.tsx
@@ -0,0 +1,247 @@
+import {
+  CheckCircleIcon,
+  LockKeyIcon,
+  WarningIcon,
+  XCircleIcon,
+  XIcon,
+} from "@phosphor-icons/react";
+import { formatRelativeTimeShort } from "@posthog/shared";
+import type { AgentApprovalRequest } from "@posthog/shared/agent-platform-types";
+import { Badge } from "@posthog/ui/primitives/Badge";
+import { CodeBlock } from "@posthog/ui/primitives/CodeBlock";
+import { Flex, IconButton, Text } from "@radix-ui/themes";
+import { useState } from "react";
+import { useDecideAgentApproval } from "../hooks/useDecideAgentApproval";
+import { approvalStateColor, approvalStateLabel } from "../utils/format";
+import { AgentApprovalDecisionForm } from "./AgentApprovalDecisionForm";
+import { AgentSessionDetailBody } from "./AgentSessionDetailBody";
+
+type Pane = "approval" | "session";
+
+/**
+ * Master-detail panel for a single approval. The **Approval** tab carries the
+ * proposed args + decision controls; the **Session** tab embeds the agent run
+ * that proposed the gated call (via {@link AgentSessionDetailBody}) so the
+ * approver can read the full context that led to it.
+ */
+export function AgentApprovalDetail({
+  idOrSlug,
+  approval,
+  onClose,
+}: {
+  idOrSlug: string;
+  approval: AgentApprovalRequest;
+  onClose: () => void;
+}) {
+  const [pane, setPane] = useState<Pane>("approval");
+  const isQueued = approval.state === "queued";
+
+  return (
+    <Flex direction="column" className="h-full min-h-0">
+      <Flex
+        direction="column"
+        gap="3"
+        className="shrink-0 border-(--gray-5) border-b px-5 pt-4"
+      >
+        <Flex align="start" justify="between" gap="3">
+          <Flex direction="column" gap="1" className="min-w-0">
+            <Flex align="center" gap="2" className="min-w-0">
+              <LockKeyIcon size={14} className="shrink-0 text-gray-10" />
+              <Text className="truncate font-semibold text-[14px] text-gray-12 [font-family:var(--font-mono)]">
+                {approval.tool_name}
+              </Text>
+              <Badge color={approvalStateColor(approval.state)}>
+                {approvalStateLabel(approval.state)}
+              </Badge>
+            </Flex>
+            <Text className="text-[11px] text-gray-10">
+              {isQueued
+                ? `expires ${formatRelativeTimeShort(approval.expires_at)}`
+                : `created ${formatRelativeTimeShort(approval.created_at)}`}
+            </Text>
+          </Flex>
+          <IconButton
+            size="1"
+            variant="ghost"
+            color="gray"
+            onClick={onClose}
+            aria-label="Close approval"
+          >
+            <XIcon size={15} />
+          </IconButton>
+        </Flex>
+
+        <Flex gap="1" className="-mb-px">
+          {(["approval", "session"] as const).map((p) => (
+            <button
+              key={p}
+              type="button"
+              onClick={() => setPane(p)}
+              className={`border-b-2 px-3 pb-2.5 text-[12.5px] capitalize ${
+                p === pane
+                  ? "border-(--accent-9) font-medium text-gray-12"
+                  : "border-transparent text-gray-11 hover:text-gray-12"
+              }`}
+            >
+              {p}
+            </button>
+          ))}
+        </Flex>
+      </Flex>
+
+      {pane === "approval" ? (
+        <div className="min-h-0 flex-1 overflow-auto px-5 py-4">
+          <ArgsSection
+            label="Proposed arguments"
+            args={approval.proposed_args}
+          />
+          {isQueued ? (
+            <DecisionForm idOrSlug={idOrSlug} approval={approval} />
+          ) : (
+            <DecidedOutcome approval={approval} />
+          )}
+        </div>
+      ) : (
+        <div className="min-h-0 flex-1">
+          <AgentSessionDetailBody
+            idOrSlug={idOrSlug}
+            sessionId={approval.session_id}
+          />
+        </div>
+      )}
+    </Flex>
+  );
+}
+
+function DecisionForm({
+  idOrSlug,
+  approval,
+}: {
+  idOrSlug: string;
+  approval: AgentApprovalRequest;
+}) {
+  const decide = useDecideAgentApproval(idOrSlug);
+  return (
+    <AgentApprovalDecisionForm
+      approval={approval}
+      busy={decide.isPending}
+      error={
+        decide.isError
+          ? decide.error instanceof Error
+            ? decide.error.message
+            : "Decision failed"
+          : null
+      }
+      onSubmit={(body) => decide.mutate({ approvalId: approval.id, body })}
+    />
+  );
+}
+
+function DecidedOutcome({ approval }: { approval: AgentApprovalRequest }) {
+  const dispatchError =
+    approval.dispatch_outcome &&
+    typeof approval.dispatch_outcome === "object" &&
+    "error" in approval.dispatch_outcome
+      ? String(approval.dispatch_outcome.error)
+      : null;
+  const banner = outcomeBanner(approval.state, !!dispatchError);
+
+  return (
+    <Flex direction="column" gap="3" className="mt-4">
+      <Flex
+        align="center"
+        gap="2"
+        className={`rounded-(--radius-2) border px-3 py-2 ${banner.classes}`}
+      >
+        <banner.Icon size={16} weight="fill" className={banner.iconClass} />
+        <Flex direction="column" gap="0.5" className="min-w-0">
+          <Text className="font-medium text-[12.5px] text-gray-12">
+            {banner.title}
+          </Text>
+          {approval.decision_at ? (
+            <Text className="text-[11px] text-gray-11">
+              {formatRelativeTimeShort(approval.decision_at)}
+              {approval.decision_by ? ` by ${approval.decision_by}` : ""}
+            </Text>
+          ) : null}
+        </Flex>
+      </Flex>
+      {approval.decision_reason ? (
+        <Text className="text-[12px] text-gray-11">
+          Reason: {approval.decision_reason}
+        </Text>
+      ) : null}
+      {approval.decided_args ? (
+        <ArgsSection label="Edited arguments" args={approval.decided_args} />
+      ) : null}
+      {dispatchError ? (
+        <Text className="text-(--red-11) text-[12px]">
+          Dispatch error: {dispatchError}
+        </Text>
+      ) : null}
+    </Flex>
+  );
+}
+
+function outcomeBanner(
+  state: AgentApprovalRequest["state"],
+  hasDispatchError: boolean,
+): {
+  title: string;
+  classes: string;
+  Icon: typeof CheckCircleIcon;
+  iconClass: string;
+} {
+  if (hasDispatchError || state === "dispatched_failed") {
+    return {
+      title: "Approved, but dispatch failed",
+      classes: "border-(--red-6) bg-(--red-2)",
+      Icon: WarningIcon,
+      iconClass: "text-(--red-11)",
+    };
+  }
+  if (state === "rejected") {
+    return {
+      title: "Rejected",
+      classes: "border-(--gray-6) bg-(--gray-2)",
+      Icon: XCircleIcon,
+      iconClass: "text-gray-11",
+    };
+  }
+  if (state === "expired") {
+    return {
+      title: "Expired before a decision",
+      classes: "border-(--amber-6) bg-(--amber-2)",
+      Icon: WarningIcon,
+      iconClass: "text-(--amber-11)",
+    };
+  }
+  return {
+    title: "Approved & dispatched",
+    classes: "border-(--green-6) bg-(--green-2)",
+    Icon: CheckCircleIcon,
+    iconClass: "text-(--green-11)",
+  };
+}
+
+export function ArgsSection({
+  label,
+  args,
+}: {
+  label: string;
+  args: Record<string, unknown>;
+}) {
+  const isEmpty = !args || Object.keys(args).length === 0;
+  return (
+    <Flex direction="column" gap="1.5">
+      <Text className="text-[11px] text-gray-10 uppercase tracking-wide">
+        {label}
+      </Text>
+      {isEmpty ? (
+        <Text className="text-[12px] text-gray-10">No arguments</Text>
+      ) : (
+        <CodeBlock>{JSON.stringify(args, null, 2)}</CodeBlock>
+      )}
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentApprovalsPane.tsx b/packages/ui/src/features/agent-applications/components/AgentApprovalsPane.tsx
new file mode 100644
index 0000000000..f07dd0708c
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentApprovalsPane.tsx
@@ -0,0 +1,180 @@
+import { LockKeyIcon } from "@phosphor-icons/react";
+import { formatRelativeTimeShort } from "@posthog/shared";
+import type { AgentApprovalRequest } from "@posthog/shared/agent-platform-types";
+import { Badge } from "@posthog/ui/primitives/Badge";
+import { Flex, Text } from "@radix-ui/themes";
+import { useMemo } from "react";
+import { useAgentApplicationApprovals } from "../hooks/useAgentApplicationApprovals";
+import { approvalStateColor, approvalStateLabel } from "../utils/format";
+import { AgentApprovalDetail } from "./AgentApprovalDetail";
+import { AgentDetailEmptyState, AgentDetailLayout } from "./AgentDetailLayout";
+import { APPROVAL_FILTERS, type ApprovalFilter } from "./agentApprovalsFilters";
+import { RefreshIndicator } from "./RefreshIndicator";
+
+export type { ApprovalFilter };
+
+/**
+ * Per-agent Approvals pane, master-detail: a filterable list on the left and,
+ * when a row is selected (URL `?request=<id>`), an {@link AgentApprovalDetail}
+ * panel on the right with the proposed args, decision controls, and the
+ * embedded session that proposed the gated call.
+ */
+export function AgentApprovalsPane({
+  idOrSlug,
+  selectedId,
+  onSelect,
+  filter,
+  onFilterChange,
+}: {
+  idOrSlug: string;
+  selectedId: string | null;
+  onSelect: (id: string | null) => void;
+  filter: ApprovalFilter;
+  onFilterChange: (f: ApprovalFilter) => void;
+}) {
+  const { data, isLoading, isError, isFetching, dataUpdatedAt, refetch } =
+    useAgentApplicationApprovals(
+      idOrSlug,
+      filter === "all" ? undefined : { state: filter },
+    );
+  const approvals = useMemo(() => data ?? [], [data]);
+  const selected = selectedId
+    ? (approvals.find((a) => a.id === selectedId) ?? null)
+    : null;
+
+  const filters = (
+    <Flex align="center" justify="between" gap="3">
+      <Flex gap="1.5" wrap="wrap">
+        {APPROVAL_FILTERS.map((f) => (
+          <button
+            key={f.id}
+            type="button"
+            onClick={() => onFilterChange(f.id)}
+            className={`rounded-full border px-3 py-1 text-[12px] ${
+              filter === f.id
+                ? "border-(--accent-7) bg-(--accent-3) text-gray-12"
+                : "border-border text-gray-11 hover:border-(--gray-7)"
+            }`}
+          >
+            {f.label}
+          </button>
+        ))}
+      </Flex>
+      <RefreshIndicator
+        updatedAt={dataUpdatedAt}
+        isFetching={isFetching}
+        onRefresh={() => void refetch()}
+        compact={!!selectedId}
+      />
+    </Flex>
+  );
+
+  const list = isLoading ? (
+    <Flex direction="column" gap="2">
+      {[0, 1, 2].map((i) => (
+        <div
+          key={i}
+          className="h-[60px] animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2)"
+        />
+      ))}
+    </Flex>
+  ) : isError ? (
+    <AgentDetailEmptyState
+      title="Couldn't load approvals"
+      description="The agent platform API returned an error. Approvals are team-admin only — you may not have access."
+    />
+  ) : approvals.length === 0 ? (
+    <AgentDetailEmptyState
+      title="Nothing here"
+      description={
+        filter === "queued"
+          ? "No tool calls are waiting for a decision."
+          : "No approval requests match this filter."
+      }
+    />
+  ) : (
+    <Flex direction="column" gap="2">
+      {approvals.map((approval) => (
+        <ApprovalRow
+          key={approval.id}
+          approval={approval}
+          selected={approval.id === selectedId}
+          onSelect={() => onSelect(approval.id)}
+        />
+      ))}
+    </Flex>
+  );
+
+  return (
+    <AgentDetailLayout idOrSlug={idOrSlug} activeTab="approvals" fill>
+      <Flex direction="column" className="h-full min-h-0">
+        <div className="shrink-0 px-5 pt-5 pb-3">{filters}</div>
+        {selected ? (
+          <div className="grid min-h-0 flex-1 grid-cols-[minmax(300px,380px)_minmax(0,1fr)] divide-x divide-(--gray-5) overflow-hidden border-(--gray-5) border-t">
+            <aside className="min-h-0 overflow-y-auto px-3 py-3">{list}</aside>
+            <main className="min-h-0 overflow-hidden">
+              <AgentApprovalDetail
+                idOrSlug={idOrSlug}
+                approval={selected}
+                onClose={() => onSelect(null)}
+              />
+            </main>
+          </div>
+        ) : (
+          <div className="min-h-0 flex-1 overflow-auto">
+            <div className="mx-auto max-w-4xl px-5 pb-6">{list}</div>
+          </div>
+        )}
+      </Flex>
+    </AgentDetailLayout>
+  );
+}
+
+function ApprovalRow({
+  approval,
+  selected,
+  onSelect,
+}: {
+  approval: AgentApprovalRequest;
+  selected: boolean;
+  onSelect: () => void;
+}) {
+  const isQueued = approval.state === "queued";
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={`flex w-full items-center gap-3 rounded-(--radius-2) border px-4 py-3 text-left ${
+        selected
+          ? "border-(--accent-7) bg-(--accent-3)"
+          : "border-border bg-(--color-panel-solid) hover:border-(--gray-7)"
+      }`}
+    >
+      <LockKeyIcon size={13} className="shrink-0 text-gray-10" />
+      <Flex direction="column" gap="1" className="min-w-0 flex-1">
+        <Flex align="center" gap="2" className="min-w-0">
+          <Badge color={approvalStateColor(approval.state)}>
+            {approvalStateLabel(approval.state)}
+          </Badge>
+          <Text className="truncate font-medium text-[12.5px] text-gray-12 [font-family:var(--font-mono)]">
+            {approval.tool_name}
+          </Text>
+        </Flex>
+        <Text className="truncate text-[11px] text-gray-10">
+          {summarizeArgs(approval.proposed_args)}
+        </Text>
+      </Flex>
+      <Text className="shrink-0 text-[11px] text-gray-10">
+        {isQueued
+          ? `expires ${formatRelativeTimeShort(approval.expires_at)}`
+          : formatRelativeTimeShort(approval.created_at)}
+      </Text>
+    </button>
+  );
+}
+
+function summarizeArgs(args: Record<string, unknown>): string {
+  if (!args || Object.keys(args).length === 0) return "No arguments";
+  const compact = JSON.stringify(args);
+  return compact.length > 140 ? `${compact.slice(0, 140)}…` : compact;
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentChatPane.tsx b/packages/ui/src/features/agent-applications/components/AgentChatPane.tsx
new file mode 100644
index 0000000000..9dd8b07589
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentChatPane.tsx
@@ -0,0 +1,254 @@
+import {
+  ChatCircleIcon,
+  InfoIcon,
+  PlusIcon,
+  TrashIcon,
+} from "@phosphor-icons/react";
+import type { CloudRegion } from "@posthog/shared";
+import { Button } from "@posthog/ui/primitives/Button";
+import { Flex, Text } from "@radix-ui/themes";
+import { useAuthStateValue } from "../../auth/store";
+import {
+  type PreviewChatEntry,
+  useChatHistoryStore,
+} from "../chat/chatHistoryStore";
+import { useAgentApplication } from "../hooks/useAgentApplication";
+import { useAgentChat } from "../hooks/useAgentChat";
+import { useAgentChatPendingApproval } from "../hooks/useAgentChatPendingApproval";
+import { useAgentRevision } from "../hooks/useAgentRevision";
+import { resolveIngressBaseUrl } from "../utils/ingress";
+import { AgentChatPendingApprovalCard } from "./AgentChatPendingApprovalCard";
+import { AgentChatSurface } from "./AgentChatSurface";
+import { AgentDetailEmptyState, AgentDetailLayout } from "./AgentDetailLayout";
+
+const EMPTY_CHATS: PreviewChatEntry[] = [];
+
+function rec(v: unknown): Record<string, unknown> {
+  return v && typeof v === "object" ? (v as Record<string, unknown>) : {};
+}
+
+/** Compact "x ago" for the rail, from an epoch-ms timestamp. */
+function relativeTime(ms: number): string {
+  const diff = Date.now() - ms;
+  const s = Math.floor(diff / 1000);
+  if (s < 60) return "just now";
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  return `${Math.floor(h / 24)}d ago`;
+}
+
+/**
+ * Live chat against a deployed agent (the console's "preview/test"). Streams the
+ * agent-ingress SSE through the native `ConversationView`. Only meaningful for
+ * agents that expose a chat trigger and have a public ingress URL.
+ *
+ * A left rail lists the preview chats the user started *here* (persisted
+ * locally — never the agent's full server session list, which can include real
+ * customer chats), and a banner makes clear this talks to the deployed revision.
+ */
+export function AgentChatPane({ idOrSlug }: { idOrSlug: string }) {
+  const { data: application } = useAgentApplication(idOrSlug);
+  const { data: revision } = useAgentRevision(
+    idOrSlug,
+    application?.live_revision ?? null,
+  );
+  const cloudRegion = useAuthStateValue((s) => s.cloudRegion);
+  const ingressBaseUrl = resolveIngressBaseUrl(
+    application?.ingress_base_url,
+    cloudRegion,
+  );
+  const hasChatTrigger = (revision?.spec?.triggers ?? []).some(
+    (t) => rec(t).type === "chat",
+  );
+  const chat = useAgentChat({
+    chatId: `preview:${idOrSlug}`,
+    agentSlug: idOrSlug,
+    ingressBaseUrl,
+    recordHistory: true,
+  });
+  const { data: pendingApproval } = useAgentChatPendingApproval(
+    idOrSlug,
+    chat.sessionId,
+  );
+  const chats = useChatHistoryStore((s) => s.byAgent[idOrSlug]) ?? EMPTY_CHATS;
+  const removeChat = useChatHistoryStore((s) => s.remove);
+
+  return (
+    <AgentDetailLayout idOrSlug={idOrSlug} activeTab="chat" fill>
+      {!ingressBaseUrl ? (
+        <div className="p-6">
+          <AgentDetailEmptyState
+            title="No ingress URL"
+            description="This deployment has no public ingress URL, so the agent can't be reached for a live chat."
+          />
+        </div>
+      ) : !hasChatTrigger ? (
+        <div className="p-6">
+          <AgentDetailEmptyState
+            title="No chat trigger"
+            description="This agent's live revision doesn't expose a chat trigger, so there's nothing to chat with. Add a chat trigger via the agent builder to test it here."
+          />
+        </div>
+      ) : (
+        <Flex className="h-full min-h-0">
+          <ChatHistoryRail
+            chats={chats}
+            activeSessionId={chat.sessionId}
+            onNewChat={chat.newChat}
+            onSelect={chat.resume}
+            onDelete={(sessionId) => removeChat(idOrSlug, sessionId)}
+          />
+          <Flex direction="column" className="min-w-0 flex-1">
+            <PreviewBanner
+              revisionId={application?.live_revision ?? null}
+              model={revision?.spec?.model}
+              region={cloudRegion}
+            />
+            <AgentChatSurface
+              messages={chat.messages}
+              isStreaming={chat.isStreaming}
+              error={chat.error}
+              emptyHint="Send a message to start a session and test this agent live."
+              belowConversation={
+                pendingApproval ? (
+                  <AgentChatPendingApprovalCard
+                    idOrSlug={idOrSlug}
+                    approval={pendingApproval}
+                  />
+                ) : null
+              }
+              composerDisabledReason={
+                pendingApproval
+                  ? "Waiting on your approval decision"
+                  : undefined
+              }
+              onSend={chat.send}
+              onCancel={chat.cancel}
+            />
+          </Flex>
+        </Flex>
+      )}
+    </AgentDetailLayout>
+  );
+}
+
+function PreviewBanner({
+  revisionId,
+  model,
+  region,
+}: {
+  revisionId: string | null;
+  model: string | undefined;
+  region: CloudRegion | null;
+}) {
+  return (
+    <Flex
+      align="center"
+      gap="2"
+      className="shrink-0 border-(--gray-5) border-b bg-(--gray-2) px-4 py-2"
+    >
+      <InfoIcon size={14} className="shrink-0 text-gray-10" />
+      <Text className="text-[12px] text-gray-11 leading-snug">
+        Live preview — messages run against the currently deployed revision.
+        Only chats you start here appear in the list.
+      </Text>
+      <Flex align="center" gap="2" className="ml-auto shrink-0">
+        {model ? (
+          <Text className="text-[11px] text-gray-10">{model}</Text>
+        ) : null}
+        {revisionId ? (
+          <Text
+            className="font-mono text-[11px] text-gray-10"
+            title={revisionId}
+          >
+            rev {revisionId.slice(0, 8)}
+          </Text>
+        ) : null}
+        {region ? (
+          <Text className="text-[11px] text-gray-10 uppercase">{region}</Text>
+        ) : null}
+      </Flex>
+    </Flex>
+  );
+}
+
+function ChatHistoryRail({
+  chats,
+  activeSessionId,
+  onNewChat,
+  onSelect,
+  onDelete,
+}: {
+  chats: PreviewChatEntry[];
+  activeSessionId: string | null;
+  onNewChat: () => void;
+  onSelect: (sessionId: string) => void;
+  onDelete: (sessionId: string) => void;
+}) {
+  return (
+    <Flex
+      direction="column"
+      className="w-56 shrink-0 border-(--gray-5) border-r"
+    >
+      <div className="shrink-0 p-2">
+        <Button
+          variant="soft"
+          color="gray"
+          size="1"
+          className="w-full justify-start"
+          onClick={onNewChat}
+        >
+          <PlusIcon size={13} />
+          New chat
+        </Button>
+      </div>
+      <div className="min-h-0 flex-1 overflow-auto px-2 pb-2">
+        {chats.length === 0 ? (
+          <Text className="block px-1 py-2 text-[11.5px] text-gray-9 leading-snug">
+            Chats you start here will show up in this list.
+          </Text>
+        ) : (
+          <Flex direction="column" gap="1">
+            {chats.map((c) => {
+              const active = c.sessionId === activeSessionId;
+              return (
+                <div key={c.sessionId} className="group relative">
+                  <button
+                    type="button"
+                    onClick={() => onSelect(c.sessionId)}
+                    className={`flex w-full items-start gap-2 rounded-(--radius-2) py-1.5 pr-7 pl-2 text-left ${
+                      active ? "bg-(--accent-3)" : "hover:bg-(--gray-3)"
+                    }`}
+                  >
+                    <ChatCircleIcon
+                      size={13}
+                      className="mt-0.5 shrink-0 text-gray-10"
+                    />
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate text-[12px] text-gray-12 leading-tight">
+                        {c.title || "Untitled chat"}
+                      </span>
+                      <span className="block text-[10.5px] text-gray-9">
+                        {relativeTime(c.startedAt)}
+                      </span>
+                    </span>
+                  </button>
+                  <button
+                    type="button"
+                    aria-label="Remove chat"
+                    onClick={() => onDelete(c.sessionId)}
+                    className="absolute top-1.5 right-1 rounded p-0.5 text-gray-9 opacity-0 hover:text-gray-12 group-hover:opacity-100"
+                  >
+                    <TrashIcon size={12} />
+                  </button>
+                </div>
+              );
+            })}
+          </Flex>
+        )}
+      </div>
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentChatPendingApprovalCard.tsx b/packages/ui/src/features/agent-applications/components/AgentChatPendingApprovalCard.tsx
new file mode 100644
index 0000000000..f192e18802
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentChatPendingApprovalCard.tsx
@@ -0,0 +1,72 @@
+import { ArrowSquareOutIcon, LockKeyIcon } from "@phosphor-icons/react";
+import { formatRelativeTimeShort } from "@posthog/shared";
+import type { AgentApprovalRequest } from "@posthog/shared/agent-platform-types";
+import { Badge } from "@posthog/ui/primitives/Badge";
+import { Flex, Text } from "@radix-ui/themes";
+import { Link } from "@tanstack/react-router";
+import { useDecideAgentApproval } from "../hooks/useDecideAgentApproval";
+import { approvalStateColor, approvalStateLabel } from "../utils/format";
+import { AgentApprovalDecisionForm } from "./AgentApprovalDecisionForm";
+import { ArgsSection } from "./AgentApprovalDetail";
+
+/**
+ * Inline pending-approval card surfaced in the live chat preview / agent
+ * builder dock. Renders between the conversation and the composer when the
+ * agent has paused on an approval-gated tool call; deciding here reuses the
+ * standard `useDecideAgentApproval` mutation, and the SSE follow-up resumes
+ * the chat naturally.
+ */
+export function AgentChatPendingApprovalCard({
+  idOrSlug,
+  approval,
+}: {
+  idOrSlug: string;
+  approval: AgentApprovalRequest;
+}) {
+  const decide = useDecideAgentApproval(idOrSlug);
+  return (
+    <div className="shrink-0 border-(--amber-6) border-t bg-(--amber-2) px-4 pt-3 pb-2">
+      <Flex align="start" justify="between" gap="3" className="mb-2">
+        <Flex direction="column" gap="1" className="min-w-0">
+          <Flex align="center" gap="2" className="min-w-0">
+            <LockKeyIcon size={13} className="shrink-0 text-(--amber-11)" />
+            <Text className="font-semibold text-[12.5px] text-gray-12">
+              Approval needed
+            </Text>
+            <Badge color={approvalStateColor(approval.state)}>
+              {approvalStateLabel(approval.state)}
+            </Badge>
+            <Text className="truncate font-medium text-[12.5px] text-gray-12 [font-family:var(--font-mono)]">
+              {approval.tool_name}
+            </Text>
+          </Flex>
+          <Text className="text-[11px] text-gray-10">
+            expires {formatRelativeTimeShort(approval.expires_at)}
+          </Text>
+        </Flex>
+        <Link
+          to="/code/agents/applications/$idOrSlug/approvals"
+          params={{ idOrSlug }}
+          search={{ request: approval.id }}
+          className="inline-flex shrink-0 items-center gap-1 text-[11.5px] text-gray-11 no-underline hover:text-gray-12"
+        >
+          Open in Approvals
+          <ArrowSquareOutIcon size={11} />
+        </Link>
+      </Flex>
+      <ArgsSection label="Proposed arguments" args={approval.proposed_args} />
+      <AgentApprovalDecisionForm
+        approval={approval}
+        busy={decide.isPending}
+        error={
+          decide.isError
+            ? decide.error instanceof Error
+              ? decide.error.message
+              : "Decision failed"
+            : null
+        }
+        onSubmit={(body) => decide.mutate({ approvalId: approval.id, body })}
+      />
+    </div>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentChatSurface.tsx b/packages/ui/src/features/agent-applications/components/AgentChatSurface.tsx
new file mode 100644
index 0000000000..675a63d322
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentChatSurface.tsx
@@ -0,0 +1,174 @@
+import { ArrowUp, Stop } from "@phosphor-icons/react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "@posthog/quill";
+import type { AcpMessage } from "@posthog/shared";
+import { ConversationView } from "@posthog/ui/features/sessions/components/ConversationView";
+import { Flex, Text, Tooltip } from "@radix-ui/themes";
+import { type KeyboardEvent, type ReactNode, useState } from "react";
+
+/**
+ * The conversation + composer half of a deployed-agent chat, shared by the
+ * per-agent preview pane and the agent builder dock. Renders the live ACP messages
+ * through the native `ConversationView` (collapse disabled so the agent's prose
+ * shows inline) and an auto-growing composer with Enter-to-send / Cancel that
+ * mirrors the main task chat's input shell.
+ */
+export function AgentChatSurface({
+  messages,
+  isStreaming,
+  error,
+  emptyHint,
+  emptyState,
+  aboveComposer,
+  belowConversation,
+  composerDisabledReason,
+  scrollX = true,
+  placeholder = "Message this agent…",
+  onSend,
+  onCancel,
+}: {
+  messages: AcpMessage[];
+  isStreaming: boolean;
+  error: string | null;
+  emptyHint: string;
+  /** Richer empty-state content (e.g. suggestions); falls back to `emptyHint`. */
+  emptyState?: ReactNode;
+  /** Optional content rendered between the transcript and the composer. */
+  aboveComposer?: ReactNode;
+  /** Optional content rendered between the transcript and `aboveComposer`,
+   * anchored to the conversation rather than the input. */
+  belowConversation?: ReactNode;
+  /** When set, the composer is disabled and this string is shown as a tooltip
+   * on the send button. Use when the chat is parked (e.g. waiting on an
+   * inline approval decision). */
+  composerDisabledReason?: string;
+  /** Allow horizontal scroll of the transcript (false in the narrow dock). */
+  scrollX?: boolean;
+  /** Composer placeholder. */
+  placeholder?: string;
+  onSend: (text: string) => void;
+  onCancel: () => void;
+}) {
+  return (
+    <Flex direction="column" className="min-h-0 flex-1">
+      <div className="flex min-h-0 flex-1 flex-col">
+        {messages.length === 0 ? (
+          (emptyState ?? (
+            <div className="flex h-full items-center justify-center px-6 text-center">
+              <Text className="max-w-sm text-[13px] text-gray-10 leading-snug">
+                {emptyHint}
+              </Text>
+            </div>
+          ))
+        ) : (
+          <ConversationView
+            events={messages}
+            isPromptPending={isStreaming}
+            collapseMode="none"
+            scrollX={scrollX}
+          />
+        )}
+      </div>
+      {belowConversation}
+      {error ? (
+        <Text className="shrink-0 px-4 pb-1 text-(--red-11) text-[12px]">
+          {error}
+        </Text>
+      ) : null}
+      {aboveComposer}
+      <Composer
+        isStreaming={isStreaming}
+        placeholder={placeholder}
+        disabledReason={composerDisabledReason}
+        onSend={onSend}
+        onCancel={onCancel}
+      />
+    </Flex>
+  );
+}
+
+function Composer({
+  isStreaming,
+  placeholder,
+  disabledReason,
+  onSend,
+  onCancel,
+}: {
+  isStreaming: boolean;
+  placeholder: string;
+  disabledReason?: string;
+  onSend: (text: string) => void;
+  onCancel: () => void;
+}) {
+  const [text, setText] = useState("");
+  const parked = !!disabledReason;
+
+  function submit() {
+    if (parked) return;
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    onSend(trimmed);
+    setText("");
+  }
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      submit();
+    }
+  }
+
+  const submitBlocked = parked || !text.trim();
+  const sendTooltip = parked
+    ? (disabledReason as string)
+    : submitBlocked
+      ? "Enter a message"
+      : "Send message";
+
+  return (
+    <div className="shrink-0 px-3 pt-2 pb-3">
+      <InputGroup className="h-auto cursor-text bg-card focus-within:ring-1 focus-within:ring-purple-9">
+        <InputGroupTextarea
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={onKeyDown}
+          placeholder={parked ? (disabledReason as string) : placeholder}
+          rows={1}
+          disabled={parked}
+          className="max-h-[160px] min-h-[40px] resize-none text-[14px] [field-sizing:content]"
+        />
+        <InputGroupAddon align="block-end" className="p-1">
+          <span className="ml-auto flex items-center gap-1">
+            {isStreaming ? (
+              <Tooltip content="Stop">
+                <InputGroupButton
+                  variant="destructive"
+                  size="icon-sm"
+                  onClick={onCancel}
+                  aria-label="Stop"
+                >
+                  <Stop size={14} weight="fill" />
+                </InputGroupButton>
+              </Tooltip>
+            ) : (
+              <Tooltip content={sendTooltip}>
+                <InputGroupButton
+                  variant="primary"
+                  size="icon-sm"
+                  onClick={submit}
+                  disabled={submitBlocked}
+                  aria-label="Send message"
+                >
+                  <ArrowUp size={14} weight="bold" />
+                </InputGroupButton>
+              </Tooltip>
+            )}
+          </span>
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentConfigurationPane.tsx b/packages/ui/src/features/agent-applications/components/AgentConfigurationPane.tsx
new file mode 100644
index 0000000000..c64c87bc6a
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentConfigurationPane.tsx
@@ -0,0 +1,1362 @@
+import {
+  ChatCircleIcon,
+  ChatTextIcon,
+  ClockIcon,
+  CodeIcon,
+  GaugeIcon,
+  GlobeIcon,
+  HardDrivesIcon,
+  InfoIcon,
+  KeyIcon,
+  LightningIcon,
+  LinkIcon,
+  LockKeyIcon,
+  PuzzlePieceIcon,
+  ScrollIcon,
+  SparkleIcon,
+  UserIcon,
+  WarningIcon,
+  WebhooksLogoIcon,
+  WrenchIcon,
+} from "@phosphor-icons/react";
+import type {
+  AgentSpec,
+  BundleFile,
+} from "@posthog/shared/agent-platform-types";
+import { MarkdownRenderer } from "@posthog/ui/features/editor/components/MarkdownRenderer";
+import { Badge } from "@posthog/ui/primitives/Badge";
+import { Button } from "@posthog/ui/primitives/Button";
+import { CodeBlock } from "@posthog/ui/primitives/CodeBlock";
+import { Flex, Text } from "@radix-ui/themes";
+import { type ReactNode, useMemo, useState } from "react";
+import { useAgentApplication } from "../hooks/useAgentApplication";
+import { useAgentEnvKeys } from "../hooks/useAgentEnvKeys";
+import { useAgentRevision } from "../hooks/useAgentRevision";
+import { useAgentRevisionBundle } from "../hooks/useAgentRevisionBundle";
+import { useAgentRevisions } from "../hooks/useAgentRevisions";
+import { triggerRequiredSecretsFor } from "../utils/triggerSecrets";
+import { AgentDetailEmptyState, AgentDetailLayout } from "./AgentDetailLayout";
+import { AgentRevisionBar } from "./AgentRevisionBar";
+import { CopyButton } from "./CopyButton";
+import { CronFireButton } from "./CronFireButton";
+import { FileExplorer, type FileTreeNode } from "./FileExplorer";
+import { SecretEditor } from "./SecretEditor";
+import { SlackSetupCard } from "./SlackSetupCard";
+
+// --- value readers (spec items are loosely typed on the wire) ---------------
+function rec(v: unknown): Record<string, unknown> {
+  return v && typeof v === "object" ? (v as Record<string, unknown>) : {};
+}
+function str(v: unknown): string | undefined {
+  return typeof v === "string" ? v : undefined;
+}
+function arr(v: unknown): unknown[] {
+  return Array.isArray(v) ? v : [];
+}
+
+const ICON = { size: 14, className: "shrink-0 text-gray-10" } as const;
+const USAGE_HOST = "https://<ingress-host>";
+
+/** Context threaded to every detail body. */
+interface Ctx {
+  idOrSlug: string;
+  revisionId: string;
+  ingressBaseUrl?: string;
+  setKeys: string[];
+  onSelect: (node: string) => void;
+  onOpenSession?: (sessionId: string) => void;
+}
+
+function triggerType(t: unknown): string {
+  return str(rec(t).type) ?? "trigger";
+}
+function triggerIcon(type: string): ReactNode {
+  switch (type) {
+    case "cron":
+      return <ClockIcon {...ICON} />;
+    case "slack":
+      return <ChatCircleIcon {...ICON} />;
+    case "webhook":
+      return <WebhooksLogoIcon {...ICON} />;
+    case "chat":
+      return <ChatTextIcon {...ICON} />;
+    case "mcp":
+      return <HardDrivesIcon {...ICON} />;
+    default:
+      return <GlobeIcon {...ICON} />;
+  }
+}
+function authModes(t: unknown): string[] {
+  const modes = rec(rec(t).auth).modes;
+  return (Array.isArray(modes) ? modes : []).map(
+    (m) => str(rec(m).type) ?? "?",
+  );
+}
+function isPublic(t: unknown): boolean {
+  return authModes(t).includes("public");
+}
+function toolId(t: unknown): string {
+  return str(rec(t).id) ?? "tool";
+}
+function toolIcon(kind: string | undefined): ReactNode {
+  if (kind === "client") return <UserIcon {...ICON} />;
+  if (kind === "custom") return <CodeIcon {...ICON} />;
+  return <SparkleIcon {...ICON} />;
+}
+function shortName(id: string): string {
+  const slash = id.lastIndexOf("/");
+  return slash >= 0 ? id.slice(slash + 1) : id;
+}
+function missingSecretsFor(t: unknown, setKeys: string[]): string[] {
+  return triggerRequiredSecretsFor(t)
+    .map((s) => s.key)
+    .filter((k) => !setKeys.includes(k));
+}
+function mcpMissingSecrets(m: unknown, setKeys: string[]): string[] {
+  return arr(rec(m).secrets)
+    .filter((s): s is string => typeof s === "string")
+    .filter((k) => !setKeys.includes(k));
+}
+
+function allSecretKeys(spec: AgentSpec, setKeys: string[]): string[] {
+  const set = new Set<string>(
+    arr(spec.secrets).filter((s): s is string => typeof s === "string"),
+  );
+  for (const t of arr(spec.triggers))
+    for (const s of triggerRequiredSecretsFor(t)) set.add(s.key);
+  for (const k of setKeys) set.add(k);
+  return [...set].sort();
+}
+
+function WarnBadge({ title }: { title: string }) {
+  return (
+    <span title={title}>
+      <WarningIcon size={13} className="text-amber-10" />
+    </span>
+  );
+}
+
+// --- tree -------------------------------------------------------------------
+
+function buildTree(spec: AgentSpec, setKeys: string[]): FileTreeNode {
+  // Order chosen for how operators read an agent: what it is, what starts it,
+  // what it needs, what it knows, what it can do.
+  const children: FileTreeNode[] = [
+    {
+      type: "file",
+      name: "instructions",
+      path: "cfg:instructions",
+      icon: <ScrollIcon {...ICON} />,
+    },
+    {
+      type: "file",
+      name: "model",
+      path: "cfg:model",
+      icon: <SparkleIcon {...ICON} />,
+    },
+  ];
+
+  const triggers = arr(spec.triggers);
+  if (triggers.length > 0) {
+    children.push({
+      type: "folder",
+      name: "triggers",
+      path: "cfg:triggers",
+      icon: <LightningIcon {...ICON} />,
+      children: triggers.map((t, i) => {
+        const type = triggerType(t);
+        const missing = missingSecretsFor(t, setKeys);
+        return {
+          type: "file" as const,
+          name: type,
+          path: `cfg:trigger/${i}`,
+          icon: triggerIcon(type),
+          trailing:
+            missing.length > 0 ? (
+              <WarnBadge title={`Needs secret(s): ${missing.join(", ")}`} />
+            ) : isPublic(t) ? (
+              <Badge color="amber">public</Badge>
+            ) : undefined,
+        };
+      }),
+    });
+  }
+
+  const secretKeys = allSecretKeys(spec, setKeys);
+  if (secretKeys.length > 0) {
+    children.push({
+      type: "folder",
+      name: "secrets",
+      path: "cfg:secrets",
+      icon: <KeyIcon {...ICON} />,
+      children: secretKeys.map((key) => ({
+        type: "file" as const,
+        name: key,
+        path: `cfg:secret/${key}`,
+        icon: <KeyIcon {...ICON} />,
+        trailing: setKeys.includes(key) ? undefined : (
+          <Badge color="amber">not set</Badge>
+        ),
+      })),
+    });
+  }
+
+  const skills = arr(spec.skills);
+  if (skills.length > 0) {
+    children.push({
+      type: "folder",
+      name: "skills",
+      path: "cfg:skills",
+      icon: <PuzzlePieceIcon {...ICON} />,
+      children: skills.map((s) => {
+        const r = rec(s);
+        const id = str(r.id) ?? str(r.path) ?? "skill";
+        return {
+          type: "file" as const,
+          name: id,
+          path: `cfg:skill/${id}`,
+          description: str(r.description),
+          icon: <PuzzlePieceIcon {...ICON} />,
+        };
+      }),
+    });
+  }
+
+  const tools = arr(spec.tools);
+  if (tools.length > 0) {
+    children.push({
+      type: "folder",
+      name: "tools",
+      path: "cfg:tools",
+      icon: <WrenchIcon {...ICON} />,
+      children: tools.map((t) => {
+        const r = rec(t);
+        const id = toolId(t);
+        return {
+          type: "file" as const,
+          name: shortName(id),
+          path: `cfg:tool/${id}`,
+          icon: toolIcon(str(r.kind)),
+          trailing:
+            r.requires_approval === true ? (
+              <LockKeyIcon size={11} className="text-amber-10" />
+            ) : undefined,
+        };
+      }),
+    });
+  }
+
+  const mcps = arr(spec.mcps);
+  if (mcps.length > 0) {
+    children.push({
+      type: "folder",
+      name: "mcps",
+      path: "cfg:mcps",
+      icon: <HardDrivesIcon {...ICON} />,
+      children: mcps.map((m) => {
+        const id = str(rec(m).id) ?? "mcp";
+        const missing = mcpMissingSecrets(m, setKeys);
+        return {
+          type: "file" as const,
+          name: id,
+          path: `cfg:mcp/${id}`,
+          icon: <HardDrivesIcon {...ICON} />,
+          trailing:
+            missing.length > 0 ? (
+              <WarnBadge title={`Needs secret(s): ${missing.join(", ")}`} />
+            ) : undefined,
+        };
+      }),
+    });
+  }
+
+  const integrations = arr(spec.integrations).filter(
+    (s): s is string => typeof s === "string",
+  );
+  if (integrations.length > 0) {
+    children.push({
+      type: "folder",
+      name: "integrations",
+      path: "cfg:integrations",
+      icon: <LinkIcon {...ICON} />,
+      children: integrations.map((name) => ({
+        type: "file" as const,
+        name,
+        path: `cfg:integration/${name}`,
+        icon: <LinkIcon {...ICON} />,
+      })),
+    });
+  }
+
+  children.push({
+    type: "file",
+    name: "limits",
+    path: "cfg:limits",
+    icon: <GaugeIcon {...ICON} />,
+  });
+
+  return { type: "folder", name: "root", children };
+}
+
+// --- pane -------------------------------------------------------------------
+
+export function AgentConfigurationPane({
+  idOrSlug,
+  selectedNode,
+  onSelectNode,
+  selectedRevisionId,
+  onSelectRevision,
+  onOpenSession,
+}: {
+  idOrSlug: string;
+  selectedNode: string | null;
+  onSelectNode: (node: string) => void;
+  /** Revision viewed in the explorer (URL `?revision=`); defaults to live. */
+  selectedRevisionId: string | null;
+  onSelectRevision: (revisionId: string) => void;
+  onOpenSession?: (sessionId: string) => void;
+}) {
+  const { data: application } = useAgentApplication(idOrSlug);
+  const { data: revisions } = useAgentRevisions(idOrSlug);
+
+  // The explorer shows the selected revision, falling back to live then newest.
+  const revisionId =
+    selectedRevisionId ??
+    application?.live_revision ??
+    revisions?.[0]?.id ??
+    null;
+
+  const { data: revision, isLoading } = useAgentRevision(idOrSlug, revisionId);
+  const { data: bundle } = useAgentRevisionBundle(idOrSlug, revisionId);
+  const { data: envKeys } = useAgentEnvKeys(idOrSlug);
+
+  const spec = revision?.spec ?? null;
+  const setKeys = useMemo(() => envKeys ?? [], [envKeys]);
+  const files = useMemo(() => bundle ?? [], [bundle]);
+  const tree = useMemo(
+    () => (spec ? buildTree(spec, setKeys) : null),
+    [spec, setKeys],
+  );
+  const node = selectedNode ?? "cfg:instructions";
+
+  const ctx: Ctx | null = revisionId
+    ? {
+        idOrSlug,
+        revisionId,
+        ingressBaseUrl: application?.ingress_base_url ?? undefined,
+        setKeys,
+        onSelect: onSelectNode,
+        onOpenSession,
+      }
+    : null;
+
+  const bar =
+    application && revisions && revisions.length > 0 ? (
+      <AgentRevisionBar
+        idOrSlug={idOrSlug}
+        agent={application}
+        revisions={revisions}
+        selectedRevisionId={revisionId}
+        onSelectRevision={onSelectRevision}
+      />
+    ) : null;
+
+  return (
+    <AgentDetailLayout idOrSlug={idOrSlug} activeTab="configuration" fill>
+      {!revisionId ? (
+        <div className="p-6">
+          <AgentDetailEmptyState
+            title="No revisions yet"
+            description="This agent has no revisions, so there's no configuration to show."
+          />
+        </div>
+      ) : !spec || !ctx ? (
+        <Flex direction="column" className="h-full min-h-0">
+          {bar}
+          <div className="p-6">
+            {isLoading ? (
+              <div className="h-40 animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2)" />
+            ) : (
+              <AgentDetailEmptyState
+                title="Couldn't load configuration"
+                description="This revision's spec could not be loaded."
+              />
+            )}
+          </div>
+        </Flex>
+      ) : (
+        <Flex direction="column" className="h-full min-h-0">
+          {bar}
+          <div className="min-h-0 flex-1">
+            <FileExplorer
+              tree={tree}
+              selectedPath={node}
+              onSelectPath={onSelectNode}
+              storageKey="agent-config-explorer"
+            >
+              <DetailPane node={node} spec={spec} files={files} ctx={ctx} />
+            </FileExplorer>
+          </div>
+        </Flex>
+      )}
+    </AgentDetailLayout>
+  );
+}
+
+// --- detail dispatch --------------------------------------------------------
+
+const SECTION_INFO: Record<string, string> = {
+  "cfg:model":
+    "The model every request goes to. `reasoning` sets the extended-thinking budget; limits cap a run's turns, tool calls and wall time.",
+  "cfg:instructions":
+    "The agent's entrypoint prompt (agent.md) — the always-on system instructions.",
+  "cfg:triggers": "What can start a session — chat, webhook, mcp, slack, cron.",
+  "cfg:tools": "The callable functions this agent has, by where they run.",
+  "cfg:skills":
+    "Markdown playbooks the agent loads on demand. Only the description is in the prompt until loaded.",
+  "cfg:mcps": "Remote MCP servers the agent connects to at session start.",
+  "cfg:integrations":
+    "Team-level integrations the agent reuses (configured once at the project level).",
+  "cfg:secrets": "Env keys this agent reads. Values are never shown.",
+  "cfg:limits": "Hard caps on a single run.",
+};
+
+function DetailPane({
+  node,
+  spec,
+  files,
+  ctx,
+}: {
+  node: string;
+  spec: AgentSpec;
+  files: BundleFile[];
+  ctx: Ctx;
+}) {
+  const [section, ...idParts] = node.replace(/^cfg:/, "").split("/");
+  const id = idParts.join("/");
+  const meta = nodeHeader(section, id, spec);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <DetailHeader
+        icon={meta.icon}
+        title={meta.title}
+        node={node}
+        info={SECTION_INFO[`cfg:${section}`]}
+      />
+      <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+        <DetailBody
+          section={section}
+          id={id}
+          spec={spec}
+          files={files}
+          ctx={ctx}
+        />
+      </div>
+    </div>
+  );
+}
+
+function nodeHeader(
+  section: string,
+  id: string,
+  spec: AgentSpec,
+): { icon: ReactNode; title: string } {
+  switch (section) {
+    case "model":
+      return { icon: <SparkleIcon {...ICON} />, title: "Model" };
+    case "instructions":
+      return { icon: <ScrollIcon {...ICON} />, title: "Instructions" };
+    case "triggers":
+      return { icon: <LightningIcon {...ICON} />, title: "Triggers" };
+    case "trigger": {
+      const type = triggerType(arr(spec.triggers)[Number(id)]);
+      return { icon: triggerIcon(type), title: `${type} trigger` };
+    }
+    case "tools":
+      return { icon: <WrenchIcon {...ICON} />, title: "Tools" };
+    case "tool":
+      return { icon: <WrenchIcon {...ICON} />, title: shortName(id) };
+    case "skills":
+      return { icon: <PuzzlePieceIcon {...ICON} />, title: "Skills" };
+    case "skill":
+      return { icon: <PuzzlePieceIcon {...ICON} />, title: id };
+    case "mcps":
+      return { icon: <HardDrivesIcon {...ICON} />, title: "MCP servers" };
+    case "mcp":
+      return { icon: <HardDrivesIcon {...ICON} />, title: id };
+    case "integrations":
+      return { icon: <LinkIcon {...ICON} />, title: "Integrations" };
+    case "integration":
+      return { icon: <LinkIcon {...ICON} />, title: id };
+    case "secrets":
+      return { icon: <KeyIcon {...ICON} />, title: "Secrets" };
+    case "secret":
+      return { icon: <KeyIcon {...ICON} />, title: id };
+    case "limits":
+      return { icon: <GaugeIcon {...ICON} />, title: "Limits" };
+    default:
+      return { icon: <SparkleIcon {...ICON} />, title: section };
+  }
+}
+
+function DetailHeader({
+  icon,
+  title,
+  node,
+  info,
+}: {
+  icon: ReactNode;
+  title: string;
+  node: string;
+  info?: string;
+}) {
+  const [showInfo, setShowInfo] = useState(false);
+  return (
+    <div className="shrink-0 border-(--gray-5) border-b px-5 py-3">
+      <Flex align="center" gap="2">
+        {icon}
+        <Text className="font-semibold text-[14px] text-gray-12">{title}</Text>
+        {info ? (
+          <button
+            type="button"
+            onClick={() => setShowInfo((s) => !s)}
+            className="text-gray-10 hover:text-gray-12"
+            aria-label="About this section"
+          >
+            <InfoIcon size={14} />
+          </button>
+        ) : null}
+        <span className="ml-auto truncate rounded-(--radius-1) border border-border bg-(--gray-2) px-1.5 py-0.5 text-[10.5px] text-gray-10 [font-family:var(--font-mono)]">
+          {node}
+        </span>
+      </Flex>
+      {showInfo && info ? (
+        <Text className="mt-2 block text-[12px] text-gray-11 leading-snug">
+          {info}
+        </Text>
+      ) : null}
+    </div>
+  );
+}
+
+function DetailBody({
+  section,
+  id,
+  spec,
+  files,
+  ctx,
+}: {
+  section: string;
+  id: string;
+  spec: AgentSpec;
+  files: BundleFile[];
+  ctx: Ctx;
+}) {
+  switch (section) {
+    case "model":
+      return <ModelBody spec={spec} />;
+    case "instructions":
+      return (
+        <BundleFileBody
+          file={byPath(files, "agent.md")}
+          emptyLabel="No agent.md in this revision."
+        />
+      );
+    case "triggers":
+      return <TriggersOverview spec={spec} ctx={ctx} />;
+    case "trigger":
+      return <TriggerBody trigger={arr(spec.triggers)[Number(id)]} ctx={ctx} />;
+    case "tools":
+      return <ToolsOverview spec={spec} ctx={ctx} />;
+    case "tool":
+      return (
+        <ToolBody tool={findById(arr(spec.tools), id)} files={files} id={id} />
+      );
+    case "skills":
+      return <SkillsOverview spec={spec} ctx={ctx} />;
+    case "skill":
+      return (
+        <SkillBody
+          skill={findById(arr(spec.skills), id)}
+          file={byPath(files, `skills/${id}/SKILL.md`)}
+        />
+      );
+    case "mcps":
+      return <McpsOverview spec={spec} ctx={ctx} />;
+    case "mcp":
+      return <McpBody mcp={findById(arr(spec.mcps), id)} ctx={ctx} />;
+    case "integrations":
+      return <IntegrationsOverview spec={spec} ctx={ctx} />;
+    case "integration":
+      return <IntegrationBody name={id} />;
+    case "secrets":
+      return <SecretsOverview spec={spec} ctx={ctx} />;
+    case "secret":
+      return (
+        <SecretBody
+          keyName={id}
+          setKeys={ctx.setKeys}
+          idOrSlug={ctx.idOrSlug}
+        />
+      );
+    case "limits":
+      return <LimitsBody spec={spec} />;
+    default:
+      return <Muted>Nothing to show.</Muted>;
+  }
+}
+
+function findById(items: unknown[], id: string): unknown {
+  return items.find((it) => str(rec(it).id) === id);
+}
+function byPath(files: BundleFile[], path: string): BundleFile | undefined {
+  return files.find((f) => f.path === path);
+}
+
+// --- bodies -----------------------------------------------------------------
+
+function ModelBody({ spec }: { spec: AgentSpec }) {
+  return (
+    <Flex direction="column" gap="2">
+      <Row label="model" value={spec.model ?? "not set"} mono />
+      <Row label="reasoning" value={spec.reasoning ?? "default"} />
+      {spec.entrypoint ? (
+        <Row label="entrypoint" value={spec.entrypoint} mono />
+      ) : null}
+    </Flex>
+  );
+}
+
+function LimitsBody({ spec }: { spec: AgentSpec }) {
+  const entries = Object.entries(spec.limits ?? {}).filter(
+    ([, v]) => v != null,
+  );
+  if (entries.length === 0) return <Muted>No limits configured.</Muted>;
+  return (
+    <Flex direction="column" gap="2">
+      {entries.map(([k, v]) => (
+        <Row key={k} label={k.replace(/_/g, " ")} value={String(v)} />
+      ))}
+    </Flex>
+  );
+}
+
+const TRIGGER_EXPLAINER: Record<string, string> = {
+  cron: "Fires on a schedule from the platform scheduler — no inbound endpoint, no inbound auth.",
+  slack:
+    "Responds to Slack mentions + thread replies for trusted workspaces. Auth is intrinsic — every request is verified by Slack request signature.",
+  webhook:
+    "A POST to the webhook endpoint starts a session — the raw JSON body becomes the first message. Callers satisfy one of the auth modes below.",
+  chat: "Interactive sessions over /run + /send. Every caller is authenticated per the auth modes below.",
+  mcp: "Exposes the agent as an MCP server over streamable-HTTP; clients authenticate per the auth modes below.",
+};
+
+const AUTH_MODE_BLURB: Record<string, string> = {
+  public:
+    "Anonymous — anyone can call. Explicitly acknowledged as public exposure.",
+  posthog:
+    "A PostHog credential (personal API key / OAuth) — end-user identity.",
+  jwt: "Signed JWT verified with a per-agent secret.",
+  shared_secret: "A shared secret sent in a named header (webhook-style).",
+  posthog_internal: "PostHog server-to-server internal token.",
+};
+
+const DECLARATIVE_TRIGGERS = new Set(["webhook", "chat", "mcp"]);
+
+const TRIGGER_ENDPOINTS: Record<
+  string,
+  { method: string; path: string; blurb: string }[]
+> = {
+  chat: [
+    { method: "POST", path: "/run", blurb: "start a session" },
+    { method: "POST", path: "/send", blurb: "send a follow-up" },
+    { method: "GET", path: "/listen", blurb: "stream events (SSE)" },
+  ],
+  webhook: [
+    {
+      method: "POST",
+      path: "/webhook",
+      blurb: "JSON body becomes the first message",
+    },
+  ],
+  mcp: [{ method: "POST", path: "/mcp", blurb: "HTTP MCP server" }],
+  slack: [
+    { method: "POST", path: "/slack/events", blurb: "Event Subscriptions URL" },
+    {
+      method: "POST",
+      path: "/slack/interactivity",
+      blurb: "Interactivity URL",
+    },
+  ],
+};
+
+function ingressBase(ctx: Ctx): string {
+  return (ctx.ingressBaseUrl ?? `${USAGE_HOST}/agents/${ctx.idOrSlug}`).replace(
+    /\/$/,
+    "",
+  );
+}
+
+function TriggersOverview({ spec, ctx }: { spec: AgentSpec; ctx: Ctx }) {
+  const triggers = arr(spec.triggers);
+  if (triggers.length === 0) return <Muted>No triggers configured.</Muted>;
+  const base = ingressBase(ctx);
+  const withEndpoints = triggers.filter(
+    (t) => TRIGGER_ENDPOINTS[triggerType(t)],
+  );
+  return (
+    <Flex direction="column" gap="4">
+      <Muted>What can start a session — {triggers.length} configured.</Muted>
+      <Flex direction="column" gap="2">
+        {triggers.map((t, i) => {
+          const type = triggerType(t);
+          const cfg = rec(rec(t).config);
+          const disc =
+            str(cfg.name) ?? str(cfg.path) ?? str(cfg.channel_id) ?? String(i);
+          const missing = missingSecretsFor(t, ctx.setKeys);
+          return (
+            <JumpRow
+              key={`${type}:${disc}`}
+              icon={triggerIcon(type)}
+              title={type}
+              subtitle={TRIGGER_EXPLAINER[type]}
+              trailing={
+                missing.length > 0 ? (
+                  <WarnBadge title={`Needs: ${missing.join(", ")}`} />
+                ) : isPublic(t) ? (
+                  <Badge color="amber">public</Badge>
+                ) : (
+                  <Badge color="gray">private</Badge>
+                )
+              }
+              onClick={() => ctx.onSelect(`cfg:trigger/${i}`)}
+            />
+          );
+        })}
+      </Flex>
+      {withEndpoints.length > 0 ? (
+        <div>
+          <Subhead>Endpoints</Subhead>
+          {!ctx.ingressBaseUrl ? (
+            <Muted>
+              No public ingress URL is configured — placeholder host shown.
+            </Muted>
+          ) : null}
+          <Flex direction="column" gap="1" className="mt-1.5">
+            {withEndpoints.flatMap((t) =>
+              (TRIGGER_ENDPOINTS[triggerType(t)] ?? []).map((ep) => {
+                const url = `${base}${ep.path}`;
+                return (
+                  <Flex
+                    key={`${triggerType(t)}${ep.path}`}
+                    align="center"
+                    gap="2"
+                    className="text-[11px]"
+                  >
+                    <span className="w-8 shrink-0 text-gray-10 [font-family:var(--font-mono)]">
+                      {ep.method}
+                    </span>
+                    <code className="min-w-0 flex-1 truncate text-gray-12 [font-family:var(--font-mono)]">
+                      {url}
+                    </code>
+                    <CopyButton text={url} />
+                  </Flex>
+                );
+              }),
+            )}
+          </Flex>
+        </div>
+      ) : null}
+    </Flex>
+  );
+}
+
+function TriggerBody({ trigger, ctx }: { trigger: unknown; ctx: Ctx }) {
+  const r = rec(trigger);
+  const type = triggerType(trigger);
+  const config = rec(r.config);
+  const modes = authModes(trigger);
+  const missing = missingSecretsFor(trigger, ctx.setKeys);
+  const cronName = type === "cron" ? str(config.name) : undefined;
+
+  return (
+    <Flex direction="column" gap="3">
+      {TRIGGER_EXPLAINER[type] ? (
+        <Muted>{TRIGGER_EXPLAINER[type]}</Muted>
+      ) : null}
+
+      <Flex direction="column" gap="2">
+        <Row label="type" value={type} mono />
+        {Object.entries(config).map(([k, v]) => (
+          <Row
+            key={k}
+            label={k.replace(/_/g, " ")}
+            value={typeof v === "string" ? v : JSON.stringify(v)}
+          />
+        ))}
+      </Flex>
+
+      {missing.length > 0 ? (
+        <Attention>
+          <Text className="text-[12px] text-gray-12">
+            Missing required secret{missing.length > 1 ? "s" : ""}:
+          </Text>
+          <Flex gap="1.5" wrap="wrap" className="mt-1.5">
+            {missing.map((key) => (
+              <Button
+                key={key}
+                size="1"
+                variant="soft"
+                color="amber"
+                onClick={() => ctx.onSelect(`cfg:secret/${key}`)}
+              >
+                Set {key}
+              </Button>
+            ))}
+          </Flex>
+        </Attention>
+      ) : null}
+
+      <div>
+        <Subhead>Auth</Subhead>
+        {DECLARATIVE_TRIGGERS.has(type) ? (
+          modes.length > 0 ? (
+            <Flex direction="column" gap="1.5" className="mt-1">
+              {modes.map((m) => (
+                <Flex key={m} align="baseline" gap="2">
+                  <Badge color={m === "public" ? "amber" : "gray"}>{m}</Badge>
+                  <Text className="text-[11.5px] text-gray-10">
+                    {AUTH_MODE_BLURB[m] ?? ""}
+                  </Text>
+                </Flex>
+              ))}
+            </Flex>
+          ) : (
+            <Muted>No auth modes configured.</Muted>
+          )
+        ) : (
+          <Muted>
+            Intrinsic — verified by the trigger's own protocol, not
+            configurable.
+          </Muted>
+        )}
+        {isPublic(trigger) ? (
+          <Attention tone="warn">
+            This trigger is public — it accepts anonymous, unauthenticated
+            callers.
+          </Attention>
+        ) : null}
+      </div>
+
+      {cronName ? (
+        <div>
+          <Subhead>Test</Subhead>
+          <CronFireButton
+            idOrSlug={ctx.idOrSlug}
+            revisionId={ctx.revisionId}
+            cronName={cronName}
+            onFired={(sessionId) => ctx.onOpenSession?.(sessionId)}
+          />
+        </div>
+      ) : null}
+
+      <TriggerUsage trigger={trigger} ctx={ctx} />
+
+      {type === "slack" ? (
+        <SlackSetupCard idOrSlug={ctx.idOrSlug} revisionId={ctx.revisionId} />
+      ) : null}
+    </Flex>
+  );
+}
+
+function authHeaderExample(modes: string[], trigger: unknown): string {
+  if (modes.includes("public") && modes.length === 1) return "";
+  if (modes.includes("shared_secret")) {
+    const m = (arr(rec(rec(trigger).auth).modes) as unknown[]).find(
+      (x) => str(rec(x).type) === "shared_secret",
+    );
+    const header = str(rec(m).header) ?? "X-Webhook-Secret";
+    return `  -H '${header}: <your-secret>' \\\n`;
+  }
+  if (modes.includes("posthog"))
+    return "  -H 'Authorization: Bearer <POSTHOG_API_KEY>' \\\n";
+  if (modes.includes("jwt"))
+    return "  -H 'Authorization: Bearer <SIGNED_JWT>' \\\n";
+  if (modes.includes("posthog_internal"))
+    return "  -H 'x-posthog-internal: <INTERNAL_SECRET>' \\\n";
+  return "";
+}
+
+function TriggerUsage({ trigger, ctx }: { trigger: unknown; ctx: Ctx }) {
+  const type = triggerType(trigger);
+  const base = ingressBase(ctx);
+  const modes = authModes(trigger);
+  const authHeader = authHeaderExample(modes, trigger);
+  let examples: { title: string; code: string }[] = [];
+  if (type === "webhook") {
+    examples = [
+      {
+        title: "Send a webhook",
+        code: `curl -X POST '${base}/webhook' \\\n${authHeader}  -H 'Content-Type: application/json' \\\n  -d '{"message":"hello"}'`,
+      },
+    ];
+  } else if (type === "chat") {
+    examples = [
+      {
+        title: "Start a session",
+        code: `curl -X POST '${base}/run' \\\n${authHeader}  -H 'Content-Type: application/json' \\\n  -d '{"message":"hello"}'`,
+      },
+    ];
+  } else if (type === "mcp") {
+    examples = [
+      {
+        title: "Add to an MCP client",
+        code: `claude mcp add --transport http ${ctx.idOrSlug} '${base}/mcp'`,
+      },
+    ];
+  }
+  if (examples.length === 0) return null;
+  return (
+    <div>
+      <Subhead>Usage</Subhead>
+      <Flex direction="column" gap="2" className="mt-1">
+        {examples.map((ex) => (
+          <div key={ex.title}>
+            <Text className="mb-1 block text-[11px] text-gray-10">
+              {ex.title}
+            </Text>
+            <CodeBlock>{ex.code}</CodeBlock>
+          </div>
+        ))}
+      </Flex>
+    </div>
+  );
+}
+
+function ToolsOverview({ spec, ctx }: { spec: AgentSpec; ctx: Ctx }) {
+  const tools = arr(spec.tools);
+  if (tools.length === 0) return <Muted>No tools.</Muted>;
+  const counts = tools.reduce<Record<string, number>>((acc, t) => {
+    const kind = str(rec(t).kind) ?? "native";
+    acc[kind] = (acc[kind] ?? 0) + 1;
+    return acc;
+  }, {});
+  return (
+    <Flex direction="column" gap="3">
+      <Muted>
+        {Object.entries(counts)
+          .map(([k, n]) => `${n} ${k}`)
+          .join(" · ")}
+      </Muted>
+      <Flex direction="column" gap="2">
+        {tools.map((t) => {
+          const r = rec(t);
+          const id = toolId(t);
+          return (
+            <JumpRow
+              key={id}
+              icon={toolIcon(str(r.kind))}
+              title={shortName(id)}
+              subtitle={str(r.description)}
+              trailing={
+                r.requires_approval === true ? (
+                  <Badge color="amber">approval</Badge>
+                ) : undefined
+              }
+              onClick={() => ctx.onSelect(`cfg:tool/${id}`)}
+            />
+          );
+        })}
+      </Flex>
+    </Flex>
+  );
+}
+
+function ToolBody({
+  tool,
+  files,
+  id,
+}: {
+  tool: unknown;
+  files: BundleFile[];
+  id: string;
+}) {
+  const r = rec(tool);
+  const kind = str(r.kind);
+  const source = byPath(files, `tools/${id}/source.ts`);
+  return (
+    <Flex direction="column" gap="2">
+      <Row label="id" value={id} mono />
+      {kind ? <Row label="kind" value={kind} /> : null}
+      <Row
+        label="approval"
+        value={
+          r.requires_approval === true
+            ? "required before each call"
+            : "not gated"
+        }
+      />
+      {str(r.description) ? (
+        <Text className="text-[12.5px] text-gray-11 leading-snug">
+          {str(r.description)}
+        </Text>
+      ) : null}
+      {source ? (
+        <div className="mt-2">
+          <Subhead>source · {source.path}</Subhead>
+          <BundleFileBody file={source} />
+        </div>
+      ) : null}
+    </Flex>
+  );
+}
+
+function SkillsOverview({ spec, ctx }: { spec: AgentSpec; ctx: Ctx }) {
+  const skills = arr(spec.skills);
+  if (skills.length === 0) return <Muted>No skills.</Muted>;
+  return (
+    <Flex direction="column" gap="3">
+      <Muted>
+        Markdown playbooks loaded on demand — {skills.length} here. Only the
+        description is in the prompt until a skill is loaded.
+      </Muted>
+      <Flex direction="column" gap="2">
+        {skills.map((s) => {
+          const r = rec(s);
+          const id = str(r.id) ?? str(r.path) ?? "skill";
+          return (
+            <JumpRow
+              key={id}
+              icon={<PuzzlePieceIcon {...ICON} />}
+              title={id}
+              subtitle={str(r.description)}
+              onClick={() => ctx.onSelect(`cfg:skill/${id}`)}
+            />
+          );
+        })}
+      </Flex>
+    </Flex>
+  );
+}
+
+function SkillBody({
+  skill,
+  file,
+}: {
+  skill: unknown;
+  file: BundleFile | undefined;
+}) {
+  const r = rec(skill);
+  return (
+    <Flex direction="column" gap="2">
+      <Row label="id" value={str(r.id) ?? "skill"} mono />
+      <Text className="text-[12.5px] text-gray-11 leading-snug">
+        {str(r.description) ?? "No description."}
+      </Text>
+      <div className="mt-2">
+        <Subhead>body · skills/{str(r.id)}/SKILL.md</Subhead>
+        <BundleFileBody
+          file={file}
+          emptyLabel="Body not in the loaded bundle."
+        />
+      </div>
+    </Flex>
+  );
+}
+
+function McpsOverview({ spec, ctx }: { spec: AgentSpec; ctx: Ctx }) {
+  const mcps = arr(spec.mcps);
+  if (mcps.length === 0) return <Muted>No MCP servers declared.</Muted>;
+  return (
+    <Flex direction="column" gap="2">
+      {mcps.map((m) => {
+        const r = rec(m);
+        const id = str(r.id) ?? "mcp";
+        const missing = mcpMissingSecrets(m, ctx.setKeys);
+        return (
+          <JumpRow
+            key={id}
+            icon={<HardDrivesIcon {...ICON} />}
+            title={id}
+            subtitle={str(r.url)}
+            trailing={
+              missing.length > 0 ? (
+                <WarnBadge title={`Needs: ${missing.join(", ")}`} />
+              ) : undefined
+            }
+            onClick={() => ctx.onSelect(`cfg:mcp/${id}`)}
+          />
+        );
+      })}
+    </Flex>
+  );
+}
+
+function McpBody({ mcp, ctx }: { mcp: unknown; ctx: Ctx }) {
+  const r = rec(mcp);
+  const tools = arr(r.tools);
+  const missing = mcpMissingSecrets(mcp, ctx.setKeys);
+  return (
+    <Flex direction="column" gap="3">
+      {str(r.url) ? (
+        <Row label="url" value={str(r.url) as string} mono />
+      ) : null}
+      {missing.length > 0 ? (
+        <Attention>
+          <Text className="text-[12px] text-gray-12">
+            Missing secret{missing.length > 1 ? "s" : ""}:
+          </Text>
+          <Flex gap="1.5" wrap="wrap" className="mt-1.5">
+            {missing.map((key) => (
+              <Button
+                key={key}
+                size="1"
+                variant="soft"
+                color="amber"
+                onClick={() => ctx.onSelect(`cfg:secret/${key}`)}
+              >
+                Set {key}
+              </Button>
+            ))}
+          </Flex>
+        </Attention>
+      ) : null}
+      <div>
+        <Subhead>Tools · {tools.length}</Subhead>
+        {tools.length === 0 ? (
+          <Muted>No tools selected from this server.</Muted>
+        ) : (
+          <div className="mt-1 grid grid-cols-1 gap-1.5 md:grid-cols-2">
+            {tools.map((t) => {
+              const name =
+                typeof t === "string" ? t : (str(rec(t).name) ?? "tool");
+              const approval =
+                typeof t === "object" && rec(t).requires_approval === true;
+              return (
+                <Flex
+                  key={name}
+                  align="center"
+                  gap="2"
+                  className="rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-3 py-2"
+                >
+                  <Text className="min-w-0 flex-1 truncate text-[12px] text-gray-12 [font-family:var(--font-mono)]">
+                    {name}
+                  </Text>
+                  {approval ? (
+                    <LockKeyIcon size={12} className="text-amber-10" />
+                  ) : null}
+                </Flex>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </Flex>
+  );
+}
+
+function IntegrationsOverview({ spec, ctx }: { spec: AgentSpec; ctx: Ctx }) {
+  const integrations = arr(spec.integrations).filter(
+    (s): s is string => typeof s === "string",
+  );
+  if (integrations.length === 0)
+    return <Muted>No integrations declared.</Muted>;
+  return (
+    <Flex direction="column" gap="2">
+      {integrations.map((name) => (
+        <JumpRow
+          key={name}
+          icon={<LinkIcon {...ICON} />}
+          title={name}
+          onClick={() => ctx.onSelect(`cfg:integration/${name}`)}
+        />
+      ))}
+    </Flex>
+  );
+}
+
+function IntegrationBody({ name }: { name: string }) {
+  return (
+    <Flex direction="column" gap="2">
+      <Row label="integration" value={name} />
+      <Muted>
+        The agent reuses the team's {name} connection. It's configured once at
+        the project level — there's no per-agent credential here.
+      </Muted>
+    </Flex>
+  );
+}
+
+function SecretsOverview({ spec, ctx }: { spec: AgentSpec; ctx: Ctx }) {
+  const keys = allSecretKeys(spec, ctx.setKeys);
+  if (keys.length === 0) return <Muted>No secrets declared.</Muted>;
+  return (
+    <Flex direction="column" gap="3">
+      <Muted>Env keys this agent reads. Values are never shown.</Muted>
+      <Flex direction="column" gap="2">
+        {keys.map((key) => (
+          <JumpRow
+            key={key}
+            icon={<KeyIcon {...ICON} />}
+            title={key}
+            mono
+            trailing={
+              ctx.setKeys.includes(key) ? (
+                <Badge color="green">set</Badge>
+              ) : (
+                <Badge color="amber">not set</Badge>
+              )
+            }
+            onClick={() => ctx.onSelect(`cfg:secret/${key}`)}
+          />
+        ))}
+      </Flex>
+    </Flex>
+  );
+}
+
+function SecretBody({
+  keyName,
+  setKeys,
+  idOrSlug,
+}: {
+  keyName: string;
+  setKeys: string[];
+  idOrSlug: string;
+}) {
+  const isSet = setKeys.includes(keyName);
+  return (
+    <Flex direction="column" gap="2">
+      <Row label="key" value={keyName} mono />
+      <Row
+        label="status"
+        value={isSet ? "set" : "not set"}
+        valueColor={isSet ? "var(--green-11)" : "var(--amber-11)"}
+      />
+      <SecretEditor idOrSlug={idOrSlug} keyName={keyName} isSet={isSet} />
+    </Flex>
+  );
+}
+
+function BundleFileBody({
+  file,
+  emptyLabel = "Not in the loaded bundle.",
+}: {
+  file: BundleFile | undefined;
+  emptyLabel?: string;
+}) {
+  if (!file) return <Muted>{emptyLabel}</Muted>;
+  if (file.language === "markdown") {
+    return (
+      <div className="text-[13px]">
+        <MarkdownRenderer content={file.content} />
+      </div>
+    );
+  }
+  return <CodeBlock>{file.content}</CodeBlock>;
+}
+
+// --- shared bits ------------------------------------------------------------
+
+function Row({
+  label,
+  value,
+  mono,
+  valueColor,
+}: {
+  label: string;
+  value: string;
+  mono?: boolean;
+  valueColor?: string;
+}) {
+  return (
+    <Flex
+      align="center"
+      justify="between"
+      gap="3"
+      className="rounded-(--radius-2) border border-border bg-(--gray-2) px-3 py-2"
+    >
+      <Text className="shrink-0 text-[11px] text-gray-10 uppercase tracking-wide">
+        {label}
+      </Text>
+      <Text
+        className={`truncate text-[12.5px] text-gray-12 ${mono ? "[font-family:var(--font-mono)]" : ""}`}
+        style={valueColor ? { color: valueColor } : undefined}
+      >
+        {value}
+      </Text>
+    </Flex>
+  );
+}
+
+function JumpRow({
+  icon,
+  title,
+  subtitle,
+  trailing,
+  mono,
+  onClick,
+}: {
+  icon: ReactNode;
+  title: string;
+  subtitle?: string;
+  trailing?: ReactNode;
+  mono?: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex w-full items-center gap-2.5 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-3 py-2.5 text-left hover:border-(--gray-7)"
+    >
+      {icon}
+      <Flex direction="column" gap="0.5" className="min-w-0 flex-1">
+        <Text
+          className={`truncate text-[12.5px] text-gray-12 ${mono ? "[font-family:var(--font-mono)]" : ""}`}
+        >
+          {title}
+        </Text>
+        {subtitle ? (
+          <Text className="truncate text-[11px] text-gray-10">{subtitle}</Text>
+        ) : null}
+      </Flex>
+      {trailing ? <span className="shrink-0">{trailing}</span> : null}
+    </button>
+  );
+}
+
+function Attention({
+  children,
+  tone = "default",
+}: {
+  children: ReactNode;
+  tone?: "default" | "warn";
+}) {
+  return (
+    <div
+      className={`rounded-(--radius-2) border px-3 py-2 ${
+        tone === "warn"
+          ? "border-(--amber-6) bg-(--amber-3)"
+          : "border-(--amber-6) bg-(--amber-2)"
+      }`}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Subhead({ children }: { children: ReactNode }) {
+  return (
+    <Text className="block text-[11px] text-gray-10 uppercase tracking-wide [font-family:var(--font-mono)]">
+      {children}
+    </Text>
+  );
+}
+
+function Muted({ children }: { children: ReactNode }) {
+  return (
+    <Text className="text-[12px] text-gray-10 leading-snug">{children}</Text>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentDetailLayout.tsx b/packages/ui/src/features/agent-applications/components/AgentDetailLayout.tsx
new file mode 100644
index 0000000000..9c902442b7
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentDetailLayout.tsx
@@ -0,0 +1,225 @@
+import { ArrowLeftIcon, RobotIcon } from "@phosphor-icons/react";
+import { useSetHeaderContent } from "@posthog/ui/hooks/useSetHeaderContent";
+import { Badge } from "@posthog/ui/primitives/Badge";
+import { Flex, Text } from "@radix-ui/themes";
+import { Link } from "@tanstack/react-router";
+import { type ReactNode, useMemo } from "react";
+import { AgentBuilderHeaderControls } from "../agent-builder/AgentBuilderHeaderControls";
+import type { AgentBuilderPageContext } from "../agent-builder/agentBuilderStore";
+import { useSetAgentBuilderPage } from "../agent-builder/useSetAgentBuilderPage";
+import { useAgentApplication } from "../hooks/useAgentApplication";
+
+/** Map a detail sub-tab to the agent builder page context for this agent. */
+function tabToAgentBuilderPage(
+  tab: AgentDetailTab,
+  slug: string,
+): AgentBuilderPageContext {
+  switch (tab) {
+    case "chat":
+      return { kind: "agent-chat", slug };
+    case "sessions":
+      return { kind: "agent-sessions", slug };
+    case "configuration":
+      return { kind: "agent-config", slug };
+    case "memory":
+      return { kind: "agent-memory", slug };
+    case "approvals":
+      return { kind: "agent-approvals", slug };
+    case "observability":
+      return { kind: "agent-observability", slug };
+    default:
+      return { kind: "agent", slug };
+  }
+}
+
+export type AgentDetailTab =
+  | "overview"
+  | "chat"
+  | "sessions"
+  | "configuration"
+  | "memory"
+  | "approvals"
+  | "observability";
+
+const TABS: { id: AgentDetailTab; label: string; to: string }[] = [
+  {
+    id: "overview",
+    label: "Overview",
+    to: "/code/agents/applications/$idOrSlug",
+  },
+  {
+    id: "configuration",
+    label: "Configuration",
+    to: "/code/agents/applications/$idOrSlug/configuration",
+  },
+  {
+    id: "sessions",
+    label: "Sessions",
+    to: "/code/agents/applications/$idOrSlug/sessions",
+  },
+  {
+    id: "memory",
+    label: "Memory",
+    to: "/code/agents/applications/$idOrSlug/memory",
+  },
+  {
+    id: "approvals",
+    label: "Approvals",
+    to: "/code/agents/applications/$idOrSlug/approvals",
+  },
+  {
+    id: "observability",
+    label: "Observability",
+    to: "/code/agents/applications/$idOrSlug/observability",
+  },
+  {
+    id: "chat",
+    label: "Chat",
+    to: "/code/agents/applications/$idOrSlug/chat",
+  },
+];
+
+/**
+ * Shared chrome for a single agent's detail panes: back link, title + state
+ * badge + description, and the sub-tab bar. Each pane (Overview, Approvals, …)
+ * renders its body as `children`; the layout owns the agent fetch and gates the
+ * body on it so every pane shows consistent loading/error states. The session
+ * transcript view deliberately does NOT use this layout — it keeps its own
+ * focused full-screen chrome.
+ */
+export function AgentDetailLayout({
+  idOrSlug,
+  activeTab,
+  children,
+  /**
+   * Fill mode: the content area becomes a full-height, full-width,
+   * non-scrolling flex child and the pane manages its own layout/scroll (for
+   * master-detail panes like Approvals). Default is a centered, padded,
+   * scrolling document column.
+   */
+  fill = false,
+}: {
+  idOrSlug: string;
+  activeTab: AgentDetailTab;
+  children: ReactNode;
+  fill?: boolean;
+}) {
+  const {
+    data: application,
+    isLoading,
+    isError,
+  } = useAgentApplication(idOrSlug);
+
+  const title = application?.name ?? idOrSlug;
+  const headerContent = useMemo(
+    () => (
+      <Flex align="center" gap="2" className="w-full min-w-0">
+        <RobotIcon size={12} className="shrink-0 text-gray-10" />
+        <Text
+          className="truncate whitespace-nowrap font-medium text-[13px]"
+          title={title}
+        >
+          {title}
+        </Text>
+      </Flex>
+    ),
+    [title],
+  );
+  useSetHeaderContent(headerContent);
+  const pageContext = tabToAgentBuilderPage(activeTab, idOrSlug);
+  useSetAgentBuilderPage(pageContext);
+
+  return (
+    <Flex direction="column" className="h-full min-h-0">
+      <Flex
+        direction="column"
+        gap="3"
+        className="cursor-default select-none border-(--gray-5) border-b px-6 pt-5"
+      >
+        <Link
+          to="/code/agents/applications"
+          className="flex w-fit items-center gap-1.5 text-[12px] text-gray-11 no-underline hover:text-gray-12"
+        >
+          <ArrowLeftIcon size={13} />
+          Applications
+        </Link>
+        <Flex align="center" gap="2" wrap="wrap">
+          <Text className="font-bold text-[22px] text-gray-12 leading-tight tracking-tight">
+            {title}
+          </Text>
+          {application ? (
+            <Badge color={application.live_revision ? "green" : "gray"}>
+              {application.live_revision ? "Live" : "Draft"}
+            </Badge>
+          ) : null}
+          <Flex align="center" className="ml-auto shrink-0">
+            <AgentBuilderHeaderControls context={pageContext} />
+          </Flex>
+        </Flex>
+        {application?.description?.trim() ? (
+          <Text className="max-w-3xl text-[12.5px] text-gray-11 leading-snug">
+            {application.description}
+          </Text>
+        ) : null}
+        <Flex gap="1" className="-mb-px">
+          {TABS.map((tab) => (
+            <Link
+              key={tab.id}
+              to={tab.to}
+              params={{ idOrSlug }}
+              className={`border-b-2 px-3 pb-2.5 text-[12.5px] no-underline ${
+                tab.id === activeTab
+                  ? "border-(--accent-9) font-medium text-gray-12"
+                  : "border-transparent text-gray-11 hover:text-gray-12"
+              }`}
+            >
+              {tab.label}
+            </Link>
+          ))}
+        </Flex>
+      </Flex>
+
+      {(() => {
+        const gated = isLoading ? (
+          <div className="h-24 animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2)" />
+        ) : isError || !application ? (
+          <AgentDetailEmptyState
+            title="Couldn't load this agent"
+            description="It may have been archived, or the agent platform API returned an error."
+          />
+        ) : (
+          children
+        );
+        return fill ? (
+          <div className="flex min-h-0 flex-1 flex-col">{gated}</div>
+        ) : (
+          <div className="min-h-0 flex-1 overflow-auto">
+            <div className="mx-auto max-w-4xl px-6 py-6">{gated}</div>
+          </div>
+        );
+      })()}
+    </Flex>
+  );
+}
+
+export function AgentDetailEmptyState({
+  title,
+  description,
+}: {
+  title: string;
+  description: ReactNode;
+}) {
+  return (
+    <Flex
+      direction="column"
+      align="center"
+      gap="1"
+      className="rounded-(--radius-2) border border-(--gray-5) border-dashed px-6 py-10 text-center"
+    >
+      <Text className="font-medium text-[13px] text-gray-12">{title}</Text>
+      <Text className="max-w-md text-[12px] text-gray-11 leading-snug">
+        {description}
+      </Text>
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentFleetApprovalsPane.tsx b/packages/ui/src/features/agent-applications/components/AgentFleetApprovalsPane.tsx
new file mode 100644
index 0000000000..30434d8711
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentFleetApprovalsPane.tsx
@@ -0,0 +1,235 @@
+import { ArrowLeftIcon, LockKeyIcon, RobotIcon } from "@phosphor-icons/react";
+import { formatRelativeTimeShort } from "@posthog/shared";
+import type {
+  AgentApplication,
+  AgentApprovalRequest,
+} from "@posthog/shared/agent-platform-types";
+import { useSetHeaderContent } from "@posthog/ui/hooks/useSetHeaderContent";
+import { Badge } from "@posthog/ui/primitives/Badge";
+import { Flex, Text } from "@radix-ui/themes";
+import { Link } from "@tanstack/react-router";
+import { useMemo } from "react";
+import { useSetAgentBuilderPage } from "../agent-builder/useSetAgentBuilderPage";
+import { useAgentApplications } from "../hooks/useAgentApplications";
+import { useAgentFleetApprovals } from "../hooks/useAgentFleetApprovals";
+import { approvalStateColor, approvalStateLabel } from "../utils/format";
+import { AgentApprovalDetail } from "./AgentApprovalDetail";
+import { AgentDetailEmptyState } from "./AgentDetailLayout";
+import { APPROVAL_FILTERS, type ApprovalFilter } from "./agentApprovalsFilters";
+import { RefreshIndicator } from "./RefreshIndicator";
+
+/**
+ * Fleet-wide approvals queue: a master/detail mirror of the per-agent
+ * `AgentApprovalsPane` but cross-agent. Each row shows the agent it belongs to
+ * (joined client-side with `useAgentApplications`) and the detail pane reuses
+ * `AgentApprovalDetail` once we resolve the application's `idOrSlug`. Owns its
+ * own chrome (back link + title) rather than nesting under the Scouts /
+ * Applications tab bar, matching how per-agent detail pages render.
+ */
+export function AgentFleetApprovalsPane({
+  selectedId,
+  onSelect,
+  filter,
+  onFilterChange,
+}: {
+  selectedId: string | null;
+  onSelect: (id: string | null) => void;
+  filter: ApprovalFilter;
+  onFilterChange: (f: ApprovalFilter) => void;
+}) {
+  const { data, isLoading, isError, isFetching, dataUpdatedAt, refetch } =
+    useAgentFleetApprovals(filter === "all" ? undefined : { state: filter });
+  const { data: applications } = useAgentApplications();
+
+  const approvals = useMemo(() => data ?? [], [data]);
+  const appsById = useMemo(() => {
+    const map = new Map<string, AgentApplication>();
+    for (const app of applications ?? []) {
+      map.set(app.id, app);
+    }
+    return map;
+  }, [applications]);
+
+  const selected = selectedId
+    ? (approvals.find((a) => a.id === selectedId) ?? null)
+    : null;
+  const selectedApp = selected ? appsById.get(selected.application_id) : null;
+  const selectedIdOrSlug = selectedApp?.slug ?? selectedApp?.id ?? null;
+
+  const headerContent = useMemo(
+    () => (
+      <Flex align="center" gap="2" className="w-full min-w-0">
+        <LockKeyIcon size={12} className="shrink-0 text-gray-10" />
+        <Text
+          className="truncate whitespace-nowrap font-medium text-[13px]"
+          title="Fleet approvals"
+        >
+          Fleet approvals
+        </Text>
+      </Flex>
+    ),
+    [],
+  );
+  useSetHeaderContent(headerContent);
+  useSetAgentBuilderPage({ kind: "agent-list" });
+
+  const filters = (
+    <Flex align="center" justify="between" gap="3">
+      <Flex gap="1.5" wrap="wrap">
+        {APPROVAL_FILTERS.map((f) => (
+          <button
+            key={f.id}
+            type="button"
+            onClick={() => onFilterChange(f.id)}
+            className={`rounded-full border px-3 py-1 text-[12px] ${
+              filter === f.id
+                ? "border-(--accent-7) bg-(--accent-3) text-gray-12"
+                : "border-border text-gray-11 hover:border-(--gray-7)"
+            }`}
+          >
+            {f.label}
+          </button>
+        ))}
+      </Flex>
+      <RefreshIndicator
+        updatedAt={dataUpdatedAt}
+        isFetching={isFetching}
+        onRefresh={() => void refetch()}
+        compact={!!selectedId}
+      />
+    </Flex>
+  );
+
+  const list = isLoading ? (
+    <Flex direction="column" gap="2">
+      {[0, 1, 2].map((i) => (
+        <div
+          key={i}
+          className="h-[60px] animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2)"
+        />
+      ))}
+    </Flex>
+  ) : isError ? (
+    <AgentDetailEmptyState
+      title="Couldn't load approvals"
+      description="The agent platform API returned an error. Fleet approvals are team-admin only — you may not have access."
+    />
+  ) : approvals.length === 0 ? (
+    <AgentDetailEmptyState
+      title="Nothing here"
+      description={
+        filter === "queued"
+          ? "No tool calls are waiting for a decision across the fleet."
+          : "No approval requests match this filter."
+      }
+    />
+  ) : (
+    <Flex direction="column" gap="2">
+      {approvals.map((approval) => (
+        <FleetApprovalRow
+          key={approval.id}
+          approval={approval}
+          application={appsById.get(approval.application_id)}
+          selected={approval.id === selectedId}
+          onSelect={() => onSelect(approval.id)}
+        />
+      ))}
+    </Flex>
+  );
+
+  return (
+    <Flex direction="column" className="h-full min-h-0">
+      <Flex
+        direction="column"
+        gap="3"
+        className="shrink-0 cursor-default select-none border-(--gray-5) border-b px-6 pt-5"
+      >
+        <Link
+          to="/code/agents/applications"
+          className="flex w-fit items-center gap-1.5 text-[12px] text-gray-11 no-underline hover:text-gray-12"
+        >
+          <ArrowLeftIcon size={13} />
+          Applications
+        </Link>
+        <Flex align="center" gap="2" wrap="wrap">
+          <Text className="font-bold text-[22px] text-gray-12 leading-tight tracking-tight">
+            Fleet approvals
+          </Text>
+        </Flex>
+        <Text className="max-w-3xl text-[12.5px] text-gray-11 leading-snug">
+          Tool calls across every deployed agent that are waiting on (or have
+          received) a human decision.
+        </Text>
+      </Flex>
+
+      <Flex direction="column" className="min-h-0 flex-1">
+        <div className="shrink-0 px-5 pt-5 pb-3">{filters}</div>
+        {selected && selectedIdOrSlug ? (
+          <div className="grid min-h-0 flex-1 grid-cols-[minmax(300px,380px)_minmax(0,1fr)] divide-x divide-(--gray-5) overflow-hidden border-(--gray-5) border-t">
+            <aside className="min-h-0 overflow-y-auto px-3 py-3">{list}</aside>
+            <main className="min-h-0 overflow-hidden">
+              <AgentApprovalDetail
+                idOrSlug={selectedIdOrSlug}
+                approval={selected}
+                onClose={() => onSelect(null)}
+              />
+            </main>
+          </div>
+        ) : (
+          <div className="min-h-0 flex-1 overflow-auto">
+            <div className="mx-auto max-w-4xl px-5 pb-6">{list}</div>
+          </div>
+        )}
+      </Flex>
+    </Flex>
+  );
+}
+
+function FleetApprovalRow({
+  approval,
+  application,
+  selected,
+  onSelect,
+}: {
+  approval: AgentApprovalRequest;
+  application: AgentApplication | undefined;
+  selected: boolean;
+  onSelect: () => void;
+}) {
+  const isQueued = approval.state === "queued";
+  const agentLabel =
+    application?.name ?? application?.slug ?? approval.application_id;
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={`flex w-full items-center gap-3 rounded-(--radius-2) border px-4 py-3 text-left ${
+        selected
+          ? "border-(--accent-7) bg-(--accent-3)"
+          : "border-border bg-(--color-panel-solid) hover:border-(--gray-7)"
+      }`}
+    >
+      <Flex direction="column" gap="1" className="min-w-0 flex-1">
+        <Flex align="center" gap="2" className="min-w-0">
+          <Badge color={approvalStateColor(approval.state)}>
+            {approvalStateLabel(approval.state)}
+          </Badge>
+          <Text className="truncate font-medium text-[12.5px] text-gray-12 [font-family:var(--font-mono)]">
+            {approval.tool_name}
+          </Text>
+        </Flex>
+        <Flex align="center" gap="1.5" className="min-w-0">
+          <RobotIcon size={11} className="shrink-0 text-gray-10" />
+          <Text className="truncate text-[11px] text-gray-11">
+            {agentLabel}
+          </Text>
+        </Flex>
+      </Flex>
+      <Text className="shrink-0 text-[11px] text-gray-10">
+        {isQueued
+          ? `expires ${formatRelativeTimeShort(approval.expires_at)}`
+          : formatRelativeTimeShort(approval.created_at)}
+      </Text>
+    </button>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentFleetLiveSessionsPanel.tsx b/packages/ui/src/features/agent-applications/components/AgentFleetLiveSessionsPanel.tsx
new file mode 100644
index 0000000000..ded04b28fd
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentFleetLiveSessionsPanel.tsx
@@ -0,0 +1,161 @@
+import { BroadcastIcon, CaretRightIcon } from "@phosphor-icons/react";
+import { formatRelativeTimeShort } from "@posthog/shared";
+import type {
+  AgentApplication,
+  AgentFleetLiveSessionSummary,
+  AgentSessionTriggerMetadata,
+} from "@posthog/shared/agent-platform-types";
+import { Badge } from "@posthog/ui/primitives/Badge";
+import { Flex, Text } from "@radix-ui/themes";
+import { Link } from "@tanstack/react-router";
+import { useMemo } from "react";
+import { useAgentApplications } from "../hooks/useAgentApplications";
+import { useAgentFleetLiveSessions } from "../hooks/useAgentFleetLiveSessions";
+import { sessionStateColor } from "../utils/format";
+import { RefreshIndicator } from "./RefreshIndicator";
+
+/**
+ * Cross-agent in-flight sessions, surfaced on the Applications landing. Lists
+ * non-terminal sessions across the fleet with state, agent, trigger, turn count
+ * and started-ago; clicking a row navigates to the per-agent session detail.
+ * Polls aggressively (see {@link useAgentFleetLiveSessions}) so the panel feels
+ * live without an SSE channel.
+ */
+export function AgentFleetLiveSessionsPanel() {
+  const { data, isLoading, isError, isFetching, dataUpdatedAt, refetch } =
+    useAgentFleetLiveSessions();
+  const { data: applications } = useAgentApplications();
+
+  const appsById = useMemo(() => {
+    const map = new Map<string, AgentApplication>();
+    for (const app of applications ?? []) {
+      map.set(app.id, app);
+    }
+    return map;
+  }, [applications]);
+
+  const sessions = data?.results ?? [];
+
+  return (
+    <section>
+      <Flex align="center" justify="between" className="mb-3">
+        <Flex align="center" gap="2">
+          <BroadcastIcon size={13} className="text-gray-11" />
+          <Text className="font-semibold text-[13px] text-gray-12">
+            Live now
+          </Text>
+          {sessions.length > 0 ? (
+            <Badge color="blue">{sessions.length}</Badge>
+          ) : null}
+        </Flex>
+        <RefreshIndicator
+          updatedAt={dataUpdatedAt}
+          isFetching={isFetching}
+          onRefresh={() => void refetch()}
+        />
+      </Flex>
+
+      {isLoading ? (
+        <Flex direction="column" gap="2">
+          {[0, 1].map((i) => (
+            <div
+              key={i}
+              className="h-[52px] animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2)"
+            />
+          ))}
+        </Flex>
+      ) : isError ? (
+        <EmptyTile
+          title="Couldn't load live sessions"
+          description="The agent platform API returned an error."
+        />
+      ) : sessions.length === 0 ? (
+        <EmptyTile
+          title="Nothing running"
+          description="In-flight agent sessions across the fleet will show up here."
+        />
+      ) : (
+        <Flex direction="column" gap="2">
+          {sessions.map((session) => (
+            <LiveSessionRow
+              key={session.id}
+              session={session}
+              application={appsById.get(session.application_id)}
+            />
+          ))}
+        </Flex>
+      )}
+    </section>
+  );
+}
+
+function LiveSessionRow({
+  session,
+  application,
+}: {
+  session: AgentFleetLiveSessionSummary;
+  application: AgentApplication | undefined;
+}) {
+  const agentLabel =
+    application?.name ?? application?.slug ?? session.application_id;
+  const idOrSlug =
+    application?.slug ?? application?.id ?? session.application_id;
+  const trigger = triggerLabel(session.trigger_metadata);
+  return (
+    <Link
+      to="/code/agents/applications/$idOrSlug/sessions/$sessionId"
+      params={{ idOrSlug, sessionId: session.id }}
+      className="flex items-center justify-between gap-3 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-4 py-3 no-underline transition-colors duration-150 hover:border-(--gray-6) hover:bg-(--gray-2)"
+    >
+      <Flex align="center" gap="3" className="min-w-0">
+        <Badge color={sessionStateColor(session.state)}>{session.state}</Badge>
+        <Flex direction="column" gap="0.5" className="min-w-0">
+          <Text className="truncate font-medium text-[12.5px] text-gray-12">
+            {agentLabel}
+          </Text>
+          <Text className="truncate text-[11px] text-gray-10">
+            {trigger ? `${trigger} · ` : ""}
+            {session.turns} turn{session.turns === 1 ? "" : "s"}
+            {session.preview ? ` · ${session.preview}` : ""}
+          </Text>
+        </Flex>
+      </Flex>
+      <Flex align="center" gap="3" className="shrink-0">
+        <Text className="text-[11px] text-gray-10">
+          {formatRelativeTimeShort(session.created_at)}
+        </Text>
+        <CaretRightIcon size={14} className="shrink-0 text-gray-10" />
+      </Flex>
+    </Link>
+  );
+}
+
+function triggerLabel(
+  meta: AgentSessionTriggerMetadata | null | undefined,
+): string | null {
+  if (!meta || typeof meta !== "object") return null;
+  const kind = (meta as { kind?: unknown }).kind;
+  return typeof kind === "string" ? kind : null;
+}
+
+function EmptyTile({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <Flex
+      direction="column"
+      align="center"
+      gap="1"
+      className="rounded-(--radius-2) border border-(--gray-5) border-dashed px-6 py-8 text-center"
+    >
+      <Text className="font-medium text-[12.5px] text-gray-12">{title}</Text>
+      <Text className="max-w-md text-[11.5px] text-gray-11 leading-snug">
+        {description}
+      </Text>
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentMemoryPane.tsx b/packages/ui/src/features/agent-applications/components/AgentMemoryPane.tsx
new file mode 100644
index 0000000000..d31cba7f43
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentMemoryPane.tsx
@@ -0,0 +1,300 @@
+import { formatRelativeTimeShort } from "@posthog/shared";
+import type { AgentMemoryTreeNode } from "@posthog/shared/agent-platform-types";
+import { MarkdownRenderer } from "@posthog/ui/features/editor/components/MarkdownRenderer";
+import { Badge } from "@posthog/ui/primitives/Badge";
+import { Flex, Text } from "@radix-ui/themes";
+import { useMemo, useState } from "react";
+import {
+  useAgentMemoryFile,
+  useAgentMemorySearch,
+  useAgentMemoryTable,
+  useAgentMemoryTables,
+  useAgentMemoryTree,
+} from "../hooks/useAgentMemory";
+import { AgentDetailLayout } from "./AgentDetailLayout";
+import { FileExplorer, type FileTreeNode } from "./FileExplorer";
+
+type View = "files" | "tables";
+
+/**
+ * Per-agent Memory pane: the agent's S3-backed memory store, browsed through the
+ * same reusable {@link FileExplorer} as the config bundle — a folder tree + read
+ * view with BM25 search, plus the JSONL reference tables. Render-only;
+ * create/update/delete is deferred (and operational, not authoring, if added).
+ */
+export function AgentMemoryPane({ idOrSlug }: { idOrSlug: string }) {
+  const [view, setView] = useState<View>("files");
+
+  return (
+    <AgentDetailLayout idOrSlug={idOrSlug} activeTab="memory" fill>
+      <Flex direction="column" className="h-full min-h-0">
+        <Flex gap="1" className="shrink-0 border-(--gray-5) border-b px-4 py-2">
+          {(["files", "tables"] as const).map((v) => (
+            <button
+              key={v}
+              type="button"
+              onClick={() => setView(v)}
+              className={`rounded-(--radius-2) px-3 py-1 text-[12px] capitalize ${
+                v === view
+                  ? "bg-(--accent-3) font-medium text-gray-12"
+                  : "text-gray-11 hover:bg-(--gray-3)"
+              }`}
+            >
+              {v}
+            </button>
+          ))}
+        </Flex>
+        <div className="min-h-0 flex-1">
+          {view === "files" ? (
+            <MemoryFiles idOrSlug={idOrSlug} />
+          ) : (
+            <MemoryTables idOrSlug={idOrSlug} />
+          )}
+        </div>
+      </Flex>
+    </AgentDetailLayout>
+  );
+}
+
+// --- files ------------------------------------------------------------------
+
+function toFileTree(node: AgentMemoryTreeNode): FileTreeNode {
+  return {
+    type: node.type,
+    name: node.name,
+    path: node.path,
+    description: node.description,
+    children: node.children?.map(toFileTree),
+  };
+}
+
+function MemoryFiles({ idOrSlug }: { idOrSlug: string }) {
+  const [selected, setSelected] = useState<string | null>(null);
+  const [query, setQuery] = useState("");
+  const { data: root, isLoading, isError } = useAgentMemoryTree(idOrSlug);
+  const search = useAgentMemorySearch(idOrSlug, query);
+
+  const tree = useMemo(() => (root ? toFileTree(root) : null), [root]);
+  const results = useMemo(
+    () =>
+      (search.data ?? []).map((r) => ({
+        path: r.path,
+        description: r.description,
+        snippet: r.snippet ?? undefined,
+        score: r.score,
+      })),
+    [search.data],
+  );
+
+  return (
+    <FileExplorer
+      tree={tree}
+      selectedPath={selected}
+      onSelectPath={setSelected}
+      loading={isLoading}
+      error={isError ? new Error("Couldn't load memory") : null}
+      emptyMessage="No memory files yet."
+      storageKey="agent-memory-explorer"
+      search={{
+        query,
+        onChange: setQuery,
+        results: query.trim() ? results : null,
+        loading: search.isLoading,
+        placeholder: "Search memory…",
+      }}
+    >
+      {selected ? (
+        <MemoryFileDetail idOrSlug={idOrSlug} path={selected} />
+      ) : (
+        <Centered>Select a memory file to read it.</Centered>
+      )}
+    </FileExplorer>
+  );
+}
+
+function MemoryFileDetail({
+  idOrSlug,
+  path,
+}: {
+  idOrSlug: string;
+  path: string;
+}) {
+  const { data: file, isLoading, isError } = useAgentMemoryFile(idOrSlug, path);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="shrink-0 border-(--gray-5) border-b px-5 py-3">
+        <Text className="block truncate font-medium text-[13px] text-gray-12 [font-family:var(--font-mono)]">
+          {path}
+        </Text>
+        {file ? (
+          <Flex align="center" gap="2" wrap="wrap" className="mt-1">
+            {file.tags.map((t) => (
+              <Badge key={t} color="gray">
+                {t}
+              </Badge>
+            ))}
+            {file.updated_at ? (
+              <Text className="text-[11px] text-gray-10">
+                updated {formatRelativeTimeShort(file.updated_at)}
+              </Text>
+            ) : null}
+          </Flex>
+        ) : null}
+        {file?.description ? (
+          <Text className="mt-1 block text-[12px] text-gray-11 leading-snug">
+            {file.description}
+          </Text>
+        ) : null}
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+        {isLoading ? (
+          <div className="h-40 animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2)" />
+        ) : isError || !file ? (
+          <Text className="text-[12px] text-gray-10">
+            Couldn't load this file.
+          </Text>
+        ) : (
+          <div className="text-[13px]">
+            <MarkdownRenderer content={file.content} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// --- tables -----------------------------------------------------------------
+
+function MemoryTables({ idOrSlug }: { idOrSlug: string }) {
+  const [selected, setSelected] = useState<string | null>(null);
+  const { data: tables, isLoading, isError } = useAgentMemoryTables(idOrSlug);
+
+  const tree = useMemo<FileTreeNode | null>(
+    () =>
+      tables
+        ? {
+            type: "folder",
+            name: "root",
+            children: tables.map((t) => ({
+              type: "file" as const,
+              name: t.name,
+              path: t.name,
+              description: `${t.size} row${t.size === 1 ? "" : "s"}`,
+            })),
+          }
+        : null,
+    [tables],
+  );
+
+  return (
+    <FileExplorer
+      tree={tree}
+      selectedPath={selected}
+      onSelectPath={setSelected}
+      loading={isLoading}
+      error={isError ? new Error("Couldn't load tables") : null}
+      emptyMessage="No tables yet."
+      storageKey="agent-memory-tables"
+    >
+      {selected ? (
+        <MemoryTableDetail idOrSlug={idOrSlug} name={selected} />
+      ) : (
+        <Centered>Select a table to read its rows.</Centered>
+      )}
+    </FileExplorer>
+  );
+}
+
+function MemoryTableDetail({
+  idOrSlug,
+  name,
+}: {
+  idOrSlug: string;
+  name: string;
+}) {
+  const { data, isLoading, isError } = useAgentMemoryTable(idOrSlug, name);
+  const columns = useMemo(() => {
+    const cols = new Set<string>();
+    for (const row of data?.rows ?? []) {
+      for (const k of Object.keys(row)) cols.add(k);
+    }
+    return [...cols];
+  }, [data]);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="shrink-0 border-(--gray-5) border-b px-5 py-3">
+        <Text className="block font-medium text-[13px] text-gray-12 [font-family:var(--font-mono)]">
+          {name}
+        </Text>
+        {data ? (
+          <Text className="text-[11px] text-gray-10">
+            showing {data.returned} of {data.total} rows
+          </Text>
+        ) : null}
+      </div>
+      <div className="min-h-0 flex-1 overflow-auto px-5 py-4">
+        {isLoading ? (
+          <div className="h-40 animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2)" />
+        ) : isError || !data ? (
+          <Text className="text-[12px] text-gray-10">
+            Couldn't load this table.
+          </Text>
+        ) : data.rows.length === 0 ? (
+          <Text className="text-[12px] text-gray-10">No rows.</Text>
+        ) : (
+          <div className="overflow-x-auto rounded-(--radius-2) border border-border">
+            <table className="w-full border-collapse text-[12px]">
+              <thead>
+                <tr className="border-(--gray-5) border-b bg-(--gray-2)">
+                  {columns.map((c) => (
+                    <th
+                      key={c}
+                      className="whitespace-nowrap px-3 py-2 text-left font-medium text-gray-11 [font-family:var(--font-mono)]"
+                    >
+                      {c}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {data.rows.map((row, i) => (
+                  <tr
+                    // biome-ignore lint/suspicious/noArrayIndexKey: table rows have no stable id
+                    key={i}
+                    className="border-(--gray-4) border-b last:border-0"
+                  >
+                    {columns.map((c) => (
+                      <td
+                        key={c}
+                        className="max-w-xs truncate px-3 py-1.5 text-gray-12"
+                        title={cellText(row[c])}
+                      >
+                        {cellText(row[c])}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function cellText(v: unknown): string {
+  if (v == null) return "";
+  if (typeof v === "object") return JSON.stringify(v);
+  return String(v);
+}
+
+function Centered({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-full items-center justify-center px-6 text-center text-[12px] text-gray-10">
+      {children}
+    </div>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentObservabilityPane.tsx b/packages/ui/src/features/agent-applications/components/AgentObservabilityPane.tsx
new file mode 100644
index 0000000000..4a54a02b04
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentObservabilityPane.tsx
@@ -0,0 +1,39 @@
+import { useAuthStateValue } from "../../auth/store";
+import { useAgentAnalytics } from "../hooks/useAgentAnalytics";
+import { useAgentApplication } from "../hooks/useAgentApplication";
+import { aiObservabilityTracesUrl } from "../utils/observabilityLinks";
+import { AgentAnalyticsView } from "./AgentAnalyticsView";
+import { AgentDetailLayout } from "./AgentDetailLayout";
+
+/**
+ * Per-agent Observability tab: the same rollups as the fleet analytics board,
+ * scoped to this one agent's `$ai_*` events (by `$agent_application_id`), plus
+ * a kick-out to the full AI observability product for trace-level depth.
+ *
+ * The analytics query keys on the application's UUID, so it waits for the
+ * agent to resolve from `idOrSlug` before firing.
+ */
+export function AgentObservabilityPane({ idOrSlug }: { idOrSlug: string }) {
+  const region = useAuthStateValue((s) => s.cloudRegion);
+  const projectId = useAuthStateValue((s) => s.currentProjectId);
+
+  const { data: application } = useAgentApplication(idOrSlug);
+  const { data, isLoading, isError, error } = useAgentAnalytics(
+    application?.id,
+    "agent",
+  );
+
+  return (
+    <AgentDetailLayout idOrSlug={idOrSlug} activeTab="observability">
+      <AgentAnalyticsView
+        data={data}
+        title="Observability"
+        subtitle={`${application?.name ?? "This agent"} · last 7 days (14-day trend)`}
+        aiObservabilityUrl={aiObservabilityTracesUrl(region, projectId)}
+        isLoading={isLoading || !application}
+        isError={isError}
+        errorMessage={error instanceof Error ? error.message : null}
+      />
+    </AgentDetailLayout>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentRevisionBar.tsx b/packages/ui/src/features/agent-applications/components/AgentRevisionBar.tsx
new file mode 100644
index 0000000000..c4077d50b3
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentRevisionBar.tsx
@@ -0,0 +1,313 @@
+import { CaretDownIcon } from "@phosphor-icons/react";
+import { formatRelativeTimeShort } from "@posthog/shared";
+import type {
+  AgentApplication,
+  AgentRevision,
+  AgentRevisionState,
+} from "@posthog/shared/agent-platform-types";
+import { Badge } from "@posthog/ui/primitives/Badge";
+import { Button } from "@posthog/ui/primitives/Button";
+import { AlertDialog, Flex, Popover, Text } from "@radix-ui/themes";
+import { useMemo, useState } from "react";
+import { useAgentRevisionLifecycle } from "../hooks/useAgentRevisionLifecycle";
+import { revisionStateColor } from "../utils/format";
+
+type LifecycleAction = "freeze" | "promote" | "archive";
+
+/** Last segment, first 8 chars — a stable short handle for a revision UUID. */
+function shortId(id: string): string {
+  return id.split("-").at(-1)?.slice(0, 8) ?? id.slice(0, 8);
+}
+
+function stateLabel(rev: AgentRevision, isLive: boolean): string {
+  return isLive ? "live" : rev.state;
+}
+
+const STATE_FILTERS: AgentRevisionState[] = [
+  "live",
+  "ready",
+  "draft",
+  "archived",
+];
+
+function lifecycleActionsFor(
+  state: AgentRevisionState,
+  isLive: boolean,
+  hasLiveRevision: boolean,
+): { label: string; action: LifecycleAction; destructive?: boolean }[] {
+  const out: {
+    label: string;
+    action: LifecycleAction;
+    destructive?: boolean;
+  }[] = [];
+  if (state === "draft") out.push({ label: "Freeze", action: "freeze" });
+  if (state === "ready")
+    out.push({ label: "Promote to live", action: "promote" });
+  if (state !== "archived" && !(isLive && hasLiveRevision))
+    out.push({ label: "Archive", action: "archive", destructive: true });
+  return out;
+}
+
+function dialogCopy(
+  action: LifecycleAction,
+  revision: AgentRevision,
+  agent: AgentApplication,
+): { title: string; description: string; confirmLabel: string } {
+  const id = shortId(revision.id);
+  if (action === "freeze") {
+    return {
+      title: `Freeze revision ${id}`,
+      description:
+        "Stamps the bundle and locks the spec — the revision moves from draft to ready and becomes immutable. Required before promoting to live.",
+      confirmLabel: "Freeze",
+    };
+  }
+  if (action === "promote") {
+    const replacing =
+      agent.live_revision && agent.live_revision !== revision.id;
+    return {
+      title: `Promote ${id} to live`,
+      description: replacing
+        ? `The current live revision will be archived and traffic switches to ${id} immediately.`
+        : `This becomes the live revision for ${agent.name}. Triggers start serving from it immediately.`,
+      confirmLabel: "Promote to live",
+    };
+  }
+  return {
+    title: `Archive revision ${id}`,
+    description:
+      revision.id === agent.live_revision
+        ? "This is the live revision — archiving it leaves the agent with no deployable version until another is promoted."
+        : "This revision will be hidden from the default list and can no longer be promoted.",
+    confirmLabel: "Archive",
+  };
+}
+
+/**
+ * The bar above the config explorer: a revision picker (state-filtered list)
+ * plus the operational lifecycle actions for the selected revision
+ * (freeze / promote / archive), each behind a confirm. Authoring a revision's
+ * contents is the agent builder's job — this only moves a revision through its
+ * lifecycle.
+ */
+export function AgentRevisionBar({
+  idOrSlug,
+  agent,
+  revisions,
+  selectedRevisionId,
+  onSelectRevision,
+}: {
+  idOrSlug: string;
+  agent: AgentApplication;
+  revisions: AgentRevision[];
+  selectedRevisionId: string | null;
+  onSelectRevision: (id: string) => void;
+}) {
+  const lifecycle = useAgentRevisionLifecycle(idOrSlug);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [filters, setFilters] = useState<Set<AgentRevisionState>>(
+    () => new Set<AgentRevisionState>(["live", "ready", "draft"]),
+  );
+  const [pending, setPending] = useState<{
+    action: LifecycleAction;
+    revision: AgentRevision;
+  } | null>(null);
+
+  const selected =
+    revisions.find((r) => r.id === selectedRevisionId) ?? revisions[0] ?? null;
+  const isLive = !!selected && selected.id === agent.live_revision;
+  const actions = selected
+    ? lifecycleActionsFor(selected.state, isLive, !!agent.live_revision)
+    : [];
+
+  const visible = useMemo(
+    () =>
+      [...revisions]
+        .sort(
+          (a, b) =>
+            new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime(),
+        )
+        .filter((r) =>
+          filters.has(r.id === agent.live_revision ? "live" : r.state),
+        ),
+    [revisions, filters, agent.live_revision],
+  );
+
+  function toggleFilter(f: AgentRevisionState) {
+    setFilters((prev) => {
+      const next = new Set(prev);
+      if (next.has(f)) next.delete(f);
+      else next.add(f);
+      return next;
+    });
+  }
+
+  if (!selected) return null;
+  const copy = pending
+    ? dialogCopy(pending.action, pending.revision, agent)
+    : null;
+
+  return (
+    <Flex
+      align="center"
+      justify="between"
+      gap="3"
+      className="shrink-0 border-(--gray-5) border-b px-4 py-2"
+    >
+      <Popover.Root open={pickerOpen} onOpenChange={setPickerOpen}>
+        <Popover.Trigger>
+          <button
+            type="button"
+            className="flex items-center gap-2 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-2.5 py-1.5 text-left hover:border-(--gray-7)"
+          >
+            <Badge color={revisionStateColor(selected.state)}>
+              {stateLabel(selected, isLive)}
+            </Badge>
+            <code className="text-[12px] text-gray-12 [font-family:var(--font-mono)]">
+              {shortId(selected.id)}
+            </code>
+            <Text className="text-[11px] text-gray-10">
+              {formatRelativeTimeShort(selected.updated_at)}
+            </Text>
+            <CaretDownIcon size={12} className="text-gray-10" />
+          </button>
+        </Popover.Trigger>
+        <Popover.Content size="1" width="320px" className="p-0">
+          <div className="border-(--gray-5) border-b px-2 py-2">
+            <Flex gap="1" wrap="wrap">
+              {STATE_FILTERS.map((f) => {
+                const active = filters.has(f);
+                return (
+                  <button
+                    key={f}
+                    type="button"
+                    onClick={() => toggleFilter(f)}
+                    aria-pressed={active}
+                    className={`rounded-full border px-2 py-0.5 text-[10.5px] uppercase tracking-wide ${
+                      active
+                        ? "border-(--accent-7) bg-(--accent-3) text-gray-12"
+                        : "border-border text-gray-10 hover:border-(--gray-7)"
+                    }`}
+                  >
+                    {f}
+                  </button>
+                );
+              })}
+            </Flex>
+          </div>
+          <ul className="max-h-72 divide-y divide-(--gray-4) overflow-auto">
+            {visible.length === 0 ? (
+              <li className="px-3 py-3 text-[12px] text-gray-10">
+                No matching revisions.
+              </li>
+            ) : (
+              visible.map((r) => {
+                const live = r.id === agent.live_revision;
+                return (
+                  <li key={r.id}>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        onSelectRevision(r.id);
+                        setPickerOpen(false);
+                      }}
+                      aria-current={r.id === selected.id ? "true" : undefined}
+                      className={`flex w-full items-start gap-2 px-3 py-2 text-left ${
+                        r.id === selected.id
+                          ? "bg-(--accent-3)"
+                          : "hover:bg-(--gray-3)"
+                      }`}
+                    >
+                      <Badge color={revisionStateColor(r.state)}>
+                        {stateLabel(r, live)}
+                      </Badge>
+                      <div className="min-w-0 flex-1">
+                        <code className="text-[11.5px] text-gray-12 [font-family:var(--font-mono)]">
+                          {shortId(r.id)}
+                        </code>
+                        <div className="text-[10.5px] text-gray-10">
+                          {formatRelativeTimeShort(r.updated_at)}
+                          {r.created_by?.first_name
+                            ? ` · ${r.created_by.first_name}`
+                            : ""}
+                        </div>
+                      </div>
+                    </button>
+                  </li>
+                );
+              })
+            )}
+          </ul>
+        </Popover.Content>
+      </Popover.Root>
+
+      {actions.length > 0 ? (
+        <Flex gap="2">
+          {actions.map((a) => (
+            <Button
+              key={a.action}
+              size="1"
+              variant="soft"
+              color={a.destructive ? "red" : "gray"}
+              onClick={() =>
+                setPending({ action: a.action, revision: selected })
+              }
+            >
+              {a.label}
+            </Button>
+          ))}
+        </Flex>
+      ) : null}
+
+      <AlertDialog.Root
+        open={!!pending}
+        onOpenChange={(open) => {
+          if (!open && !lifecycle.isPending) setPending(null);
+        }}
+      >
+        <AlertDialog.Content maxWidth="440px" size="2">
+          {copy && pending ? (
+            <>
+              <AlertDialog.Title className="text-base">
+                {copy.title}
+              </AlertDialog.Title>
+              <AlertDialog.Description size="2" className="text-gray-11">
+                {copy.description}
+              </AlertDialog.Description>
+              {lifecycle.isError ? (
+                <Text className="mt-2 block text-(--red-11) text-[12px]">
+                  {lifecycle.error?.message ?? "Action failed"}
+                </Text>
+              ) : null}
+              <Flex gap="3" mt="4" justify="end">
+                <Button
+                  variant="soft"
+                  color="gray"
+                  disabled={lifecycle.isPending}
+                  onClick={() => setPending(null)}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  color={pending.action === "archive" ? "red" : "green"}
+                  loading={lifecycle.isPending}
+                  onClick={() =>
+                    lifecycle.mutate(
+                      {
+                        revisionId: pending.revision.id,
+                        action: pending.action,
+                      },
+                      { onSuccess: () => setPending(null) },
+                    )
+                  }
+                >
+                  {copy.confirmLabel}
+                </Button>
+              </Flex>
+            </>
+          ) : null}
+        </AlertDialog.Content>
+      </AlertDialog.Root>
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentSessionDetailBody.tsx b/packages/ui/src/features/agent-applications/components/AgentSessionDetailBody.tsx
new file mode 100644
index 0000000000..39fa99c0b8
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentSessionDetailBody.tsx
@@ -0,0 +1,259 @@
+import type { AgentApplicationSessionDetail } from "@posthog/shared/agent-platform-types";
+import { ConversationView } from "@posthog/ui/features/sessions/components/ConversationView";
+import { Badge } from "@posthog/ui/primitives/Badge";
+import { Flex, Text } from "@radix-ui/themes";
+import { type ReactNode, useMemo, useState } from "react";
+import { conversationToAcpMessages } from "../chat/conversationToAcp";
+import { useAgentApplicationSession } from "../hooks/useAgentApplicationSession";
+import {
+  formatDuration,
+  formatSpendUsd,
+  sessionStateColor,
+} from "../utils/format";
+import { RefreshIndicator } from "./RefreshIndicator";
+import { SessionLogsView } from "./SessionLogsView";
+
+type DetailTab = "conversation" | "logs";
+
+interface SessionMetrics {
+  messages: number;
+  toolCalls: number;
+  errors: number;
+}
+
+function computeMetrics(
+  session: AgentApplicationSessionDetail,
+): SessionMetrics {
+  let toolCalls = 0;
+  let errors = 0;
+  for (const msg of session.conversation) {
+    if (msg.role === "assistant") {
+      for (const part of msg.content) {
+        if (part.type === "toolCall") toolCalls += 1;
+      }
+      if (msg.errorMessage) errors += 1;
+    } else if (msg.role === "toolResult" && msg.isError) {
+      errors += 1;
+    }
+  }
+  return {
+    messages: session.conversation_total_turns ?? session.conversation.length,
+    toolCalls,
+    errors,
+  };
+}
+
+/** Reads a cron "fired by" descriptor off trigger_metadata, if present. */
+function cronFiredBy(
+  meta: AgentApplicationSessionDetail["trigger_metadata"],
+): { cronName: string; schedule?: string } | null {
+  if (!meta || typeof meta !== "object") return null;
+  if ((meta as { kind?: unknown }).kind !== "cron") return null;
+  const cronName = (meta as { cron_name?: unknown }).cron_name;
+  if (typeof cronName !== "string") return null;
+  const schedule = (meta as { schedule?: unknown }).schedule;
+  return {
+    cronName,
+    schedule: typeof schedule === "string" ? schedule : undefined,
+  };
+}
+
+/**
+ * The session detail body: state/cron badges + KPI strip + a refresh control,
+ * with Conversation (read-only, through code's native `ConversationView`) and
+ * structured Logs tabs. Reused by the full-screen session route and embedded in
+ * the approval detail's Session tab. Owns no page chrome (no back link/title).
+ */
+export function AgentSessionDetailBody({
+  idOrSlug,
+  sessionId,
+}: {
+  idOrSlug: string;
+  sessionId: string;
+}) {
+  const {
+    data: session,
+    isLoading,
+    isError,
+    isFetching,
+    dataUpdatedAt,
+    refetch,
+  } = useAgentApplicationSession(idOrSlug, sessionId);
+  const [tab, setTab] = useState<DetailTab>("conversation");
+
+  const events = useMemo(
+    () => (session ? conversationToAcpMessages(session.conversation) : []),
+    [session],
+  );
+  const metrics = useMemo(
+    () => (session ? computeMetrics(session) : null),
+    [session],
+  );
+  const firedBy = session ? cronFiredBy(session.trigger_metadata) : null;
+
+  return (
+    <Flex direction="column" className="h-full min-h-0">
+      <Flex
+        direction="column"
+        gap="3"
+        className="shrink-0 cursor-default select-none border-(--gray-5) border-b px-6 pt-4"
+      >
+        <Flex align="center" justify="between" gap="2">
+          <Flex align="center" gap="2" wrap="wrap">
+            {session ? (
+              <Badge color={sessionStateColor(session.state)}>
+                {session.state}
+              </Badge>
+            ) : null}
+            {firedBy ? (
+              <Badge color="gray" title={firedBy.schedule}>
+                cron · {firedBy.cronName}
+              </Badge>
+            ) : null}
+            {session?.conversation_trimmed ? (
+              <Badge color="gray">
+                showing last {session.conversation.length} of{" "}
+                {session.conversation_total_turns ??
+                  session.conversation.length}
+              </Badge>
+            ) : null}
+          </Flex>
+          <RefreshIndicator
+            updatedAt={dataUpdatedAt}
+            isFetching={isFetching}
+            onRefresh={() => void refetch()}
+          />
+        </Flex>
+
+        {session && metrics ? (
+          <Flex gap="5" wrap="wrap" className="pb-1">
+            <MetricItem label="Messages" value={String(metrics.messages)} />
+            <MetricItem label="Tool calls" value={String(metrics.toolCalls)} />
+            <MetricItem
+              label="Cost"
+              value={formatSpendUsd(session.usage_total.cost_total)}
+            />
+            <MetricItem
+              label="Duration"
+              value={formatDuration(session.created_at, session.updated_at)}
+            />
+            <MetricItem
+              label="Errors"
+              value={String(metrics.errors)}
+              tone={metrics.errors > 0 ? "bad" : undefined}
+            />
+          </Flex>
+        ) : null}
+
+        <Flex gap="1" className="-mb-px">
+          {(["conversation", "logs"] as const).map((t) => (
+            <button
+              key={t}
+              type="button"
+              onClick={() => setTab(t)}
+              className={`border-b-2 px-3 pb-2.5 text-[12.5px] capitalize ${
+                t === tab
+                  ? "border-(--accent-9) font-medium text-gray-12"
+                  : "border-transparent text-gray-11 hover:text-gray-12"
+              }`}
+            >
+              {t}
+            </button>
+          ))}
+        </Flex>
+      </Flex>
+
+      {/* Flex column with a definite height: ConversationView's root is
+          `relative flex-1` with an absolutely-positioned VirtualizedList, so it
+          only gets height inside a flex column (matches prod SessionView). */}
+      <div className="flex min-h-0 flex-1 flex-col">
+        {isLoading ? (
+          <Centered>
+            <div className="h-24 w-full max-w-2xl animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2)" />
+          </Centered>
+        ) : isError || !session ? (
+          <Centered>
+            <EmptyState
+              title="Couldn't load this session"
+              description="It may have been purged, or the agent platform API returned an error."
+            />
+          </Centered>
+        ) : tab === "logs" ? (
+          // ConversationView owns its own scroll; the logs list does not.
+          <div className="h-full overflow-auto">
+            <SessionLogsView
+              idOrSlug={idOrSlug}
+              sessionId={sessionId}
+              startIso={session.created_at}
+              enabled={tab === "logs"}
+            />
+          </div>
+        ) : session.conversation.length === 0 ? (
+          <Centered>
+            <EmptyState
+              title="No messages yet"
+              description="This session hasn't produced any conversation turns."
+            />
+          </Centered>
+        ) : (
+          <ConversationView events={events} isPromptPending={null} />
+        )}
+      </div>
+    </Flex>
+  );
+}
+
+function MetricItem({
+  label,
+  value,
+  tone,
+}: {
+  label: string;
+  value: string;
+  tone?: "bad";
+}) {
+  return (
+    <Flex direction="column" gap="0.5">
+      <Text className="text-[10px] text-gray-10 uppercase tracking-wide">
+        {label}
+      </Text>
+      <Text
+        className={`font-semibold text-[14px] leading-none ${
+          tone === "bad" ? "text-(--red-11)" : "text-gray-12"
+        }`}
+      >
+        {value}
+      </Text>
+    </Flex>
+  );
+}
+
+function Centered({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex h-full items-center justify-center px-6 py-10">
+      {children}
+    </div>
+  );
+}
+
+function EmptyState({
+  title,
+  description,
+}: {
+  title: string;
+  description: ReactNode;
+}) {
+  return (
+    <Flex
+      direction="column"
+      align="center"
+      gap="1"
+      className="rounded-(--radius-2) border border-(--gray-5) border-dashed px-6 py-10 text-center"
+    >
+      <Text className="font-medium text-[13px] text-gray-12">{title}</Text>
+      <Text className="max-w-md text-[12px] text-gray-11 leading-snug">
+        {description}
+      </Text>
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentSessionRow.tsx b/packages/ui/src/features/agent-applications/components/AgentSessionRow.tsx
new file mode 100644
index 0000000000..574c731530
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentSessionRow.tsx
@@ -0,0 +1,58 @@
+import { formatRelativeTimeShort } from "@posthog/shared";
+import type {
+  AgentSessionPrincipal,
+  AgentSessionSummary,
+} from "@posthog/shared/agent-platform-types";
+import { Badge } from "@posthog/ui/primitives/Badge";
+import { Flex, Text } from "@radix-ui/themes";
+import { Link } from "@tanstack/react-router";
+import { formatSpendUsd, sessionStateColor } from "../utils/format";
+
+function principalLabel(principal: AgentSessionPrincipal | null): string {
+  if (!principal) return "anonymous";
+  return principal.kind;
+}
+
+/** A single session row linking to its transcript. Shared by Overview + Sessions. */
+export function AgentSessionRow({
+  session,
+  idOrSlug,
+}: {
+  session: AgentSessionSummary;
+  idOrSlug: string;
+}) {
+  return (
+    <Link
+      to="/code/agents/applications/$idOrSlug/sessions/$sessionId"
+      params={{ idOrSlug, sessionId: session.id }}
+      className="no-underline"
+    >
+      <Flex
+        align="center"
+        justify="between"
+        gap="3"
+        className="rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-4 py-3 hover:border-(--gray-7)"
+      >
+        <Flex direction="column" gap="1" className="min-w-0">
+          <Flex align="center" gap="2" className="min-w-0">
+            <Badge color={sessionStateColor(session.state)}>
+              {session.state}
+            </Badge>
+            <Text className="truncate text-[12.5px] text-gray-12">
+              {session.preview?.trim()
+                ? session.preview
+                : "No assistant output"}
+            </Text>
+          </Flex>
+          <Text className="truncate text-[11px] text-gray-10">
+            {principalLabel(session.principal)} · {session.turns} turns ·{" "}
+            {formatSpendUsd(session.usage_total.cost_total)}
+          </Text>
+        </Flex>
+        <Text className="shrink-0 text-[11px] text-gray-10">
+          {formatRelativeTimeShort(session.updated_at)}
+        </Text>
+      </Flex>
+    </Link>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentSessionTranscriptView.tsx b/packages/ui/src/features/agent-applications/components/AgentSessionTranscriptView.tsx
new file mode 100644
index 0000000000..55137b3324
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentSessionTranscriptView.tsx
@@ -0,0 +1,65 @@
+import { ArrowLeftIcon } from "@phosphor-icons/react";
+import { useSetHeaderContent } from "@posthog/ui/hooks/useSetHeaderContent";
+import { Flex, Text } from "@radix-ui/themes";
+import { Link } from "@tanstack/react-router";
+import { useMemo } from "react";
+import { AgentBuilderHeaderControls } from "../agent-builder/AgentBuilderHeaderControls";
+import { useSetAgentBuilderPage } from "../agent-builder/useSetAgentBuilderPage";
+import { AgentSessionDetailBody } from "./AgentSessionDetailBody";
+
+/**
+ * Full-screen session view: page chrome (back link + title) wrapping the shared
+ * {@link AgentSessionDetailBody} (KPI strip + Conversation/Logs tabs). The body
+ * renders the transcript read-only through code's native `ConversationView`.
+ */
+export function AgentSessionTranscriptView({
+  idOrSlug,
+  sessionId,
+}: {
+  idOrSlug: string;
+  sessionId: string;
+}) {
+  const headerContent = useMemo(
+    () => (
+      <Text className="truncate whitespace-nowrap font-medium text-[13px]">
+        Session
+      </Text>
+    ),
+    [],
+  );
+  useSetHeaderContent(headerContent);
+  const pageContext = {
+    kind: "agent-session" as const,
+    slug: idOrSlug,
+    sessionId,
+  };
+  useSetAgentBuilderPage(pageContext);
+
+  return (
+    <Flex direction="column" className="h-full min-h-0">
+      <Flex
+        direction="column"
+        gap="2"
+        className="shrink-0 cursor-default select-none px-6 pt-5 pb-3"
+      >
+        <Link
+          to="/code/agents/applications/$idOrSlug/sessions"
+          params={{ idOrSlug }}
+          className="flex w-fit items-center gap-1.5 text-[12px] text-gray-11 no-underline hover:text-gray-12"
+        >
+          <ArrowLeftIcon size={13} />
+          Sessions
+        </Link>
+        <Flex align="center" justify="between" gap="4">
+          <Text className="font-bold text-[18px] text-gray-12 leading-tight tracking-tight">
+            Session transcript
+          </Text>
+          <AgentBuilderHeaderControls context={pageContext} />
+        </Flex>
+      </Flex>
+      <div className="min-h-0 flex-1">
+        <AgentSessionDetailBody idOrSlug={idOrSlug} sessionId={sessionId} />
+      </div>
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/AgentSessionsPane.tsx b/packages/ui/src/features/agent-applications/components/AgentSessionsPane.tsx
new file mode 100644
index 0000000000..93f7c3d6d4
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/AgentSessionsPane.tsx
@@ -0,0 +1,122 @@
+import type { AgentSessionState } from "@posthog/shared/agent-platform-types";
+import { Button } from "@posthog/ui/primitives/Button";
+import { Flex, Text } from "@radix-ui/themes";
+import { useState } from "react";
+import { useAgentApplicationSessions } from "../hooks/useAgentApplicationSessions";
+import { AgentDetailEmptyState, AgentDetailLayout } from "./AgentDetailLayout";
+import { AgentSessionRow } from "./AgentSessionRow";
+import { RefreshIndicator } from "./RefreshIndicator";
+
+type Filter = AgentSessionState | "all";
+
+const FILTERS: { id: Filter; label: string }[] = [
+  { id: "all", label: "All" },
+  { id: "running", label: "Running" },
+  { id: "completed", label: "Completed" },
+  { id: "failed", label: "Failed" },
+  { id: "cancelled", label: "Cancelled" },
+  { id: "queued", label: "Queued" },
+];
+
+const PAGE = 25;
+
+/** Per-agent Sessions pane: full session history with a state filter + paging. */
+export function AgentSessionsPane({ idOrSlug }: { idOrSlug: string }) {
+  const [filter, setFilter] = useState<Filter>("all");
+  const [limit, setLimit] = useState(PAGE);
+
+  const { data, isLoading, isError, isFetching, dataUpdatedAt, refetch } =
+    useAgentApplicationSessions(idOrSlug, {
+      limit,
+      state: filter === "all" ? undefined : [filter],
+    });
+
+  const sessions = data?.results ?? [];
+  const total = data?.count ?? sessions.length;
+  const hasMore = sessions.length < total;
+
+  function changeFilter(next: Filter) {
+    setFilter(next);
+    setLimit(PAGE);
+  }
+
+  return (
+    <AgentDetailLayout idOrSlug={idOrSlug} activeTab="sessions">
+      <Flex direction="column" gap="4">
+        <Flex align="center" justify="between" gap="3">
+          <Flex gap="1.5" wrap="wrap">
+            {FILTERS.map((f) => (
+              <button
+                key={f.id}
+                type="button"
+                onClick={() => changeFilter(f.id)}
+                className={`rounded-full border px-3 py-1 text-[12px] ${
+                  filter === f.id
+                    ? "border-(--accent-7) bg-(--accent-3) text-gray-12"
+                    : "border-border text-gray-11 hover:border-(--gray-7)"
+                }`}
+              >
+                {f.label}
+              </button>
+            ))}
+          </Flex>
+          <RefreshIndicator
+            updatedAt={dataUpdatedAt}
+            isFetching={isFetching}
+            onRefresh={() => void refetch()}
+          />
+        </Flex>
+
+        {isLoading ? (
+          <Flex direction="column" gap="2">
+            {[0, 1, 2, 3].map((i) => (
+              <div
+                key={i}
+                className="h-[52px] animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2)"
+              />
+            ))}
+          </Flex>
+        ) : isError ? (
+          <AgentDetailEmptyState
+            title="Couldn't load sessions"
+            description="The agent platform API returned an error."
+          />
+        ) : sessions.length === 0 ? (
+          <AgentDetailEmptyState
+            title="No sessions"
+            description={
+              filter === "all"
+                ? "This agent hasn't run any sessions yet."
+                : "No sessions match this filter."
+            }
+          />
+        ) : (
+          <Flex direction="column" gap="2">
+            {sessions.map((session) => (
+              <AgentSessionRow
+                key={session.id}
+                session={session}
+                idOrSlug={idOrSlug}
+              />
+            ))}
+            <Flex align="center" justify="between" className="pt-1">
+              <Text className="text-[11px] text-gray-10">
+                Showing {sessions.length} of {total}
+              </Text>
+              {hasMore ? (
+                <Button
+                  variant="soft"
+                  size="1"
+                  onClick={() => setLimit((l) => l + PAGE)}
+                  loading={isFetching}
+                >
+                  Load more
+                </Button>
+              ) : null}
+            </Flex>
+          </Flex>
+        )}
+      </Flex>
+    </AgentDetailLayout>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/CopyButton.tsx b/packages/ui/src/features/agent-applications/components/CopyButton.tsx
new file mode 100644
index 0000000000..c40a87eca1
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/CopyButton.tsx
@@ -0,0 +1,39 @@
+import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+
+/** Copy-to-clipboard button with a transient check. Icon-only by default. */
+export function CopyButton({
+  text,
+  label = "Copy",
+  showLabel = false,
+}: {
+  text: string;
+  label?: string;
+  showLabel?: boolean;
+}) {
+  const [copied, setCopied] = useState(false);
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // Clipboard can be blocked (insecure context) — the text stays selectable.
+    }
+  }
+  return (
+    <button
+      type="button"
+      onClick={copy}
+      aria-label={label}
+      className="inline-flex shrink-0 cursor-pointer items-center gap-1 rounded-(--radius-1) border border-border bg-(--color-panel-solid) px-1.5 py-0.5 text-[11px] text-gray-11 transition-colors hover:bg-(--gray-3) hover:text-gray-12"
+    >
+      {copied ? (
+        <CheckIcon size={12} className="text-(--green-11)" />
+      ) : (
+        <CopyIcon size={12} />
+      )}
+      {showLabel ? (copied ? "Copied" : label) : null}
+    </button>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/CronFireButton.tsx b/packages/ui/src/features/agent-applications/components/CronFireButton.tsx
new file mode 100644
index 0000000000..0677cdb5db
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/CronFireButton.tsx
@@ -0,0 +1,49 @@
+import {
+  PlayIcon,
+  SpinnerIcon,
+  WarningCircleIcon,
+} from "@phosphor-icons/react";
+import { Button } from "@posthog/ui/primitives/Button";
+import { useFireAgentCron } from "../hooks/useFireAgentCron";
+
+/**
+ * "Run now" — fires a cron trigger out-of-band (not on its schedule) so an
+ * author can test it. On success, hands the created session id back so the
+ * caller can jump straight to the run.
+ */
+export function CronFireButton({
+  idOrSlug,
+  revisionId,
+  cronName,
+  onFired,
+}: {
+  idOrSlug: string;
+  revisionId: string;
+  cronName: string;
+  onFired?: (sessionId: string) => void;
+}) {
+  const fire = useFireAgentCron(idOrSlug, revisionId);
+  return (
+    <Button
+      size="1"
+      variant="soft"
+      color={fire.isError ? "red" : "gray"}
+      disabled={fire.isPending}
+      onClick={() =>
+        fire.mutate(
+          { cronName },
+          { onSuccess: (res) => onFired?.(res.session_id) },
+        )
+      }
+    >
+      {fire.isPending ? (
+        <SpinnerIcon size={13} className="animate-spin" />
+      ) : fire.isError ? (
+        <WarningCircleIcon size={13} />
+      ) : (
+        <PlayIcon size={13} />
+      )}
+      {fire.isPending ? "Firing…" : fire.isError ? "Failed" : "Run now"}
+    </Button>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/FileExplorer.tsx b/packages/ui/src/features/agent-applications/components/FileExplorer.tsx
new file mode 100644
index 0000000000..2c7268a2cf
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/FileExplorer.tsx
@@ -0,0 +1,361 @@
+import {
+  CaretDownIcon,
+  CaretRightIcon,
+  FileIcon,
+  FolderIcon,
+  FolderOpenIcon,
+  MagnifyingGlassIcon,
+} from "@phosphor-icons/react";
+import { type ReactNode, useMemo, useState } from "react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+
+export interface FileTreeNode {
+  type: "file" | "folder";
+  name: string;
+  /** Set on files (and optionally folders) — the click target for selection. */
+  path?: string;
+  /** One-line annotation under the name (e.g. a skill/memory description). */
+  description?: string;
+  /** Icon override for the row. Defaults to a generic file/folder icon. */
+  icon?: ReactNode;
+  /** Right-aligned slot (e.g. an approval lock or a "needs attention" badge). */
+  trailing?: ReactNode;
+  children?: FileTreeNode[];
+}
+
+export interface FileExplorerSearchResult {
+  path: string;
+  name?: string;
+  description?: string;
+  snippet?: string;
+  score?: number;
+}
+
+interface SearchConfig {
+  query: string;
+  onChange: (query: string) => void;
+  /** Non-null = results mode (flat list). Null/undefined = tree mode. */
+  results?: FileExplorerSearchResult[] | null;
+  placeholder?: string;
+  loading?: boolean;
+}
+
+export interface FileExplorerProps {
+  tree: FileTreeNode | null;
+  selectedPath: string | null;
+  onSelectPath: (path: string) => void;
+  /** Optional search input + flat results override (e.g. memory BM25 search). */
+  search?: SearchConfig;
+  /** Top-of-left-pane action (e.g. a "+ New" button). */
+  topAction?: ReactNode;
+  /** Right-pane content — the consumer renders whatever fits the selection. */
+  children: ReactNode;
+  emptyMessage?: string;
+  loading?: boolean;
+  error?: Error | null;
+  /**
+   * Distinct localStorage key per surface so the bundle tree and the memory
+   * tree persist their widths independently.
+   */
+  storageKey: string;
+}
+
+/**
+ * Generic two-pane file explorer: a collapsible folder tree (or flat search
+ * results) on the left, arbitrary `children` on the right. Selection is
+ * controlled so URL state + refetch stay with the consumer. The same wrapper
+ * backs the read-only config bundle and the editable memory surface, so the
+ * two feel identical to navigate. Ported from the agent-console's FileExplorer.
+ */
+export function FileExplorer({
+  tree,
+  selectedPath,
+  onSelectPath,
+  search,
+  topAction,
+  children,
+  emptyMessage = "No files yet.",
+  loading,
+  error,
+  storageKey,
+}: FileExplorerProps) {
+  const searching = !!search && search.query.trim().length > 0;
+
+  return (
+    <PanelGroup
+      direction="horizontal"
+      autoSaveId={storageKey}
+      className="h-full overflow-hidden bg-(--color-panel-solid)"
+    >
+      <Panel defaultSize={24} minSize={15} maxSize={42} order={1}>
+        <div className="flex h-full flex-col bg-(--gray-2)">
+          {search || topAction ? (
+            <div className="space-y-2 border-(--gray-5) border-b px-2 py-2">
+              {search ? (
+                <div className="relative">
+                  <MagnifyingGlassIcon
+                    size={12}
+                    className="-translate-y-1/2 pointer-events-none absolute top-1/2 left-2 text-gray-10"
+                  />
+                  <input
+                    type="search"
+                    value={search.query}
+                    onChange={(e) => search.onChange(e.currentTarget.value)}
+                    placeholder={search.placeholder ?? "Search…"}
+                    className="h-7 w-full rounded-(--radius-1) border border-border bg-(--color-panel-solid) pr-2 pl-7 text-[12px]"
+                  />
+                </div>
+              ) : null}
+              {topAction ? <div>{topAction}</div> : null}
+            </div>
+          ) : null}
+          <div className="min-h-0 flex-1 overflow-y-auto py-1.5">
+            {loading ? (
+              <div className="px-3 py-2 text-[12px] text-gray-10">Loading…</div>
+            ) : error ? (
+              <div className="px-3 py-2 text-(--red-11) text-[12px]">
+                {error.message}
+              </div>
+            ) : searching ? (
+              <SearchResultsList
+                results={search?.results ?? []}
+                loading={search?.loading}
+                selectedPath={selectedPath}
+                onSelectPath={onSelectPath}
+              />
+            ) : tree?.children && tree.children.length > 0 ? (
+              <TreeView
+                node={tree}
+                selected={selectedPath}
+                onSelect={onSelectPath}
+                depth={0}
+              />
+            ) : (
+              <div className="px-3 py-2 text-[12px] text-gray-10">
+                {emptyMessage}
+              </div>
+            )}
+          </div>
+        </div>
+      </Panel>
+      <PanelResizeHandle className="w-px bg-(--gray-5) transition-colors hover:bg-(--gray-7) data-[resize-handle-state=drag]:bg-(--accent-9)" />
+      <Panel order={2}>
+        <div className="flex h-full min-h-0 min-w-0 flex-col overflow-hidden">
+          {children}
+        </div>
+      </Panel>
+    </PanelGroup>
+  );
+}
+
+const ROW_SELECTED =
+  "bg-(--accent-3) font-medium text-gray-12 shadow-[inset_2px_0_0_0_var(--accent-9)]";
+const ROW_IDLE = "text-gray-11 hover:bg-(--gray-3) hover:text-gray-12";
+
+function subtreeContains(node: FileTreeNode, path: string | null): boolean {
+  if (!path) return false;
+  for (const child of node.children ?? []) {
+    if (child.path === path || subtreeContains(child, path)) return true;
+  }
+  return false;
+}
+
+function TreeView({
+  node,
+  selected,
+  onSelect,
+  depth,
+}: {
+  node: FileTreeNode;
+  selected: string | null;
+  onSelect: (path: string) => void;
+  depth: number;
+}) {
+  return (
+    <ul className="text-[12px]">
+      {(node.children ?? []).map((child) =>
+        child.type === "folder" ? (
+          <FolderRow
+            key={`d:${child.name}:${child.path ?? ""}`}
+            node={child}
+            selected={selected}
+            onSelect={onSelect}
+            depth={depth}
+          />
+        ) : (
+          <FileRow
+            key={`f:${child.path}`}
+            node={child}
+            selected={!!child.path && selected === child.path}
+            onSelect={onSelect}
+            depth={depth}
+          />
+        ),
+      )}
+    </ul>
+  );
+}
+
+function FolderRow({
+  node,
+  selected,
+  onSelect,
+  depth,
+}: {
+  node: FileTreeNode;
+  selected: string | null;
+  onSelect: (path: string) => void;
+  depth: number;
+}) {
+  const [open, setOpen] = useState(true);
+  const isSelected = !!node.path && selected === node.path;
+  const hasSelectedChild = useMemo(
+    () => subtreeContains(node, selected),
+    [node, selected],
+  );
+  // Auto-expand when the selection moves into a descendant. Reconciled during
+  // render (not in an effect) so the folder opens before paint.
+  const [prevHasSelectedChild, setPrevHasSelectedChild] =
+    useState(hasSelectedChild);
+  if (hasSelectedChild !== prevHasSelectedChild) {
+    setPrevHasSelectedChild(hasSelectedChild);
+    if (hasSelectedChild) setOpen(true);
+  }
+
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={() => {
+          setOpen((o) => !o);
+          if (node.path) onSelect(node.path);
+        }}
+        aria-current={isSelected ? "true" : undefined}
+        className={`flex w-full cursor-pointer items-center gap-1 px-2 py-1 text-left transition-colors ${isSelected ? ROW_SELECTED : ROW_IDLE}`}
+        style={{ paddingLeft: `${8 + depth * 12}px` }}
+      >
+        {open ? (
+          <CaretDownIcon size={11} className="shrink-0" />
+        ) : (
+          <CaretRightIcon size={11} className="shrink-0" />
+        )}
+        {node.icon ??
+          (open ? (
+            <FolderOpenIcon size={14} className="shrink-0" />
+          ) : (
+            <FolderIcon size={14} className="shrink-0" />
+          ))}
+        <span className="min-w-0 flex-1 truncate">{node.name}</span>
+        {node.trailing ? (
+          <span className="ml-auto shrink-0 pl-1">{node.trailing}</span>
+        ) : null}
+      </button>
+      {open && node.children && node.children.length > 0 ? (
+        <TreeView
+          node={{ type: "folder", name: node.name, children: node.children }}
+          selected={selected}
+          onSelect={onSelect}
+          depth={depth + 1}
+        />
+      ) : null}
+    </li>
+  );
+}
+
+function FileRow({
+  node,
+  selected,
+  onSelect,
+  depth,
+}: {
+  node: FileTreeNode;
+  selected: boolean;
+  onSelect: (path: string) => void;
+  depth: number;
+}) {
+  if (!node.path) return null;
+  const path = node.path;
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={() => onSelect(path)}
+        aria-current={selected ? "true" : undefined}
+        className={`flex w-full cursor-pointer items-start gap-1.5 px-2 py-1 text-left transition-colors ${selected ? ROW_SELECTED : ROW_IDLE}`}
+        style={{ paddingLeft: `${8 + depth * 12 + 16}px` }}
+      >
+        <span className="mt-px shrink-0">
+          {node.icon ?? <FileIcon size={14} className="shrink-0" />}
+        </span>
+        <span className="min-w-0 flex-1">
+          <span className="block truncate">{node.name}</span>
+          {node.description ? (
+            <span className="block truncate text-[10.5px] text-gray-9">
+              {node.description}
+            </span>
+          ) : null}
+        </span>
+        {node.trailing ? (
+          <span className="mt-px shrink-0 pl-1">{node.trailing}</span>
+        ) : null}
+      </button>
+    </li>
+  );
+}
+
+function SearchResultsList({
+  results,
+  loading,
+  selectedPath,
+  onSelectPath,
+}: {
+  results: FileExplorerSearchResult[];
+  loading?: boolean;
+  selectedPath: string | null;
+  onSelectPath: (path: string) => void;
+}) {
+  if (loading) {
+    return <div className="px-3 py-2 text-[12px] text-gray-10">Searching…</div>;
+  }
+  if (results.length === 0) {
+    return (
+      <div className="px-3 py-2 text-[12px] text-gray-10">No matches.</div>
+    );
+  }
+  return (
+    <ul className="space-y-0.5 px-1">
+      {results.map((r) => {
+        const isActive = selectedPath === r.path;
+        return (
+          <li key={r.path}>
+            <button
+              type="button"
+              onClick={() => onSelectPath(r.path)}
+              aria-current={isActive ? "true" : undefined}
+              className={`flex w-full cursor-pointer flex-col gap-0.5 rounded-(--radius-1) px-2 py-1 text-left text-[12px] transition-colors ${isActive ? ROW_SELECTED : ROW_IDLE}`}
+            >
+              <div className="flex items-center justify-between gap-2">
+                <span className="truncate font-medium">{r.name ?? r.path}</span>
+                {typeof r.score === "number" ? (
+                  <span className="shrink-0 text-[10px] text-gray-9">
+                    {r.score.toFixed(2)}
+                  </span>
+                ) : null}
+              </div>
+              {r.description ? (
+                <span className="truncate text-[10.5px] text-gray-10">
+                  {r.description}
+                </span>
+              ) : null}
+              {r.snippet ? (
+                <span className="truncate text-[10.5px] text-gray-9 italic">
+                  {r.snippet}
+                </span>
+              ) : null}
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/RefreshIndicator.tsx b/packages/ui/src/features/agent-applications/components/RefreshIndicator.tsx
new file mode 100644
index 0000000000..a39b324fc1
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/RefreshIndicator.tsx
@@ -0,0 +1,50 @@
+import { ArrowsClockwiseIcon } from "@phosphor-icons/react";
+import { formatRelativeTimeShort } from "@posthog/shared";
+import { IconButton, Text, Tooltip } from "@radix-ui/themes";
+
+/**
+ * "Updated Xs ago" label + a manual refresh button. Pairs with a react-query
+ * `refetchInterval` (which auto-polls and pauses when the tab is unfocused);
+ * this just surfaces freshness and a manual nudge. `updatedAt` is the query's
+ * `dataUpdatedAt` (epoch ms; 0 before the first load).
+ */
+export function RefreshIndicator({
+  updatedAt,
+  isFetching,
+  onRefresh,
+  compact = false,
+}: {
+  updatedAt: number;
+  isFetching: boolean;
+  onRefresh: () => void;
+  compact?: boolean;
+}) {
+  return (
+    <div className="flex items-center gap-1.5">
+      {!compact ? (
+        <Text className="text-[11px] text-gray-10">
+          {isFetching
+            ? "updating…"
+            : updatedAt
+              ? `updated ${formatRelativeTimeShort(updatedAt)}`
+              : ""}
+        </Text>
+      ) : null}
+      <Tooltip content="Refresh">
+        <IconButton
+          size="1"
+          variant="ghost"
+          color="gray"
+          onClick={onRefresh}
+          disabled={isFetching}
+          aria-label="Refresh"
+        >
+          <ArrowsClockwiseIcon
+            size={14}
+            className={isFetching ? "animate-spin" : undefined}
+          />
+        </IconButton>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/SecretEditor.tsx b/packages/ui/src/features/agent-applications/components/SecretEditor.tsx
new file mode 100644
index 0000000000..5ebcaa1568
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/SecretEditor.tsx
@@ -0,0 +1,179 @@
+import { CheckCircleIcon } from "@phosphor-icons/react";
+import { Button } from "@posthog/ui/primitives/Button";
+import { Flex, Text, TextField } from "@radix-ui/themes";
+import { useState } from "react";
+import { useAgentEnvKeyMutations } from "../hooks/useAgentEnvKeyMutations";
+
+/**
+ * Inline set/rotate/clear for one encrypted env key. The value is write-only —
+ * posted straight to `env_keys` PUT, never read back. On success the env-keys
+ * list refetches, flipping set/not-set status across the explorer.
+ *
+ * A set secret shows only its status + a Rotate affordance (the input stays
+ * hidden until you opt in) and Clear is a two-step confirm — clearing a live
+ * credential is destructive and must never be a single click.
+ */
+export function SecretEditor({
+  idOrSlug,
+  keyName,
+  isSet,
+}: {
+  idOrSlug: string;
+  keyName: string;
+  isSet: boolean;
+}) {
+  const { setKey, clearKey } = useAgentEnvKeyMutations(idOrSlug);
+  // For a set secret the input is hidden until the user chooses to rotate.
+  const [editing, setEditing] = useState(false);
+  const [value, setValue] = useState("");
+  const [confirmingClear, setConfirmingClear] = useState(false);
+  const [justSaved, setJustSaved] = useState(false);
+
+  const busy = setKey.isPending || clearKey.isPending;
+  const showInput = !isSet || editing;
+
+  function save() {
+    if (!value.trim()) return;
+    setKey.mutate(
+      { key: keyName, value },
+      {
+        onSuccess: () => {
+          setValue("");
+          setEditing(false);
+          setJustSaved(true);
+          setTimeout(() => setJustSaved(false), 2000);
+        },
+      },
+    );
+  }
+
+  function cancelEdit() {
+    setEditing(false);
+    setValue("");
+  }
+
+  function confirmClear() {
+    clearKey.mutate(
+      { key: keyName },
+      { onSettled: () => setConfirmingClear(false) },
+    );
+  }
+
+  return (
+    <Flex direction="column" gap="2" className="mt-2">
+      {showInput ? (
+        <>
+          <Text className="text-[11px] text-gray-10 uppercase tracking-wide">
+            {isSet ? "Rotate value" : "Set value"}
+          </Text>
+          <TextField.Root
+            type="password"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder="paste secret value"
+            autoComplete="off"
+            spellCheck={false}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") save();
+            }}
+          />
+          {isSet ? (
+            <Text className="text-[11px] text-gray-10">
+              A value is already set — saving will replace it.
+            </Text>
+          ) : null}
+          {setKey.isError ? (
+            <Text className="text-(--red-11) text-[11px]">
+              {setKey.error?.message ?? "Couldn't save"}
+            </Text>
+          ) : null}
+          <Flex align="center" gap="2">
+            <Button
+              size="1"
+              color="green"
+              onClick={save}
+              disabled={busy || !value.trim()}
+              loading={setKey.isPending}
+            >
+              {isSet ? "Save new value" : "Set"}
+            </Button>
+            {isSet ? (
+              <Button
+                size="1"
+                variant="soft"
+                color="gray"
+                onClick={cancelEdit}
+                disabled={busy}
+              >
+                Cancel
+              </Button>
+            ) : null}
+          </Flex>
+        </>
+      ) : confirmingClear ? (
+        <div className="rounded-(--radius-2) border border-(--red-6) bg-(--red-2) px-3 py-2.5">
+          <Text className="block text-[12px] text-gray-12">
+            Clear{" "}
+            <code className="[font-family:var(--font-mono)]">{keyName}</code>?
+            This deletes the stored value — the agent will stop being able to
+            read it until you set it again.
+          </Text>
+          {clearKey.isError ? (
+            <Text className="mt-1 block text-(--red-11) text-[11px]">
+              {clearKey.error?.message ?? "Couldn't clear"}
+            </Text>
+          ) : null}
+          <Flex gap="2" className="mt-2">
+            <Button
+              size="1"
+              color="red"
+              onClick={confirmClear}
+              disabled={busy}
+              loading={clearKey.isPending}
+            >
+              Yes, clear it
+            </Button>
+            <Button
+              size="1"
+              variant="soft"
+              color="gray"
+              onClick={() => setConfirmingClear(false)}
+              disabled={busy}
+            >
+              Cancel
+            </Button>
+          </Flex>
+        </div>
+      ) : (
+        <Flex align="center" gap="2">
+          <Button
+            size="1"
+            variant="soft"
+            color="gray"
+            onClick={() => setEditing(true)}
+          >
+            Rotate
+          </Button>
+          <Button
+            size="1"
+            variant="soft"
+            color="red"
+            onClick={() => setConfirmingClear(true)}
+          >
+            Clear
+          </Button>
+          {justSaved ? (
+            <Flex align="center" gap="1" className="text-(--green-11)">
+              <CheckCircleIcon size={14} />
+              <Text className="text-[12px]">Saved</Text>
+            </Flex>
+          ) : null}
+        </Flex>
+      )}
+      <Text className="text-[11px] text-gray-10 leading-snug">
+        The value is never shown again. It's encrypted at rest and only read by
+        the agent at runtime.
+      </Text>
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/SessionLogsView.tsx b/packages/ui/src/features/agent-applications/components/SessionLogsView.tsx
new file mode 100644
index 0000000000..8b77a45879
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/SessionLogsView.tsx
@@ -0,0 +1,143 @@
+import { formatRelativeTimeShort } from "@posthog/shared";
+import type { AgentSessionLogEntry } from "@posthog/shared/agent-platform-types";
+import { Flex, Text, TextField } from "@radix-ui/themes";
+import { useMemo, useState } from "react";
+import { useAgentApplicationSessionLogs } from "../hooks/useAgentApplicationSessionLogs";
+import { formatDuration, logLevelColor } from "../utils/format";
+
+type LevelFilter = "all" | "DEBUG" | "INFO" | "WARN" | "ERROR";
+
+const LEVELS: LevelFilter[] = ["all", "DEBUG", "INFO", "WARN", "ERROR"];
+
+/** Relative offset from session start ("+1.2s"), falling back to a clock label. */
+function offsetLabel(startIso: string, ts: string): string {
+  const d = formatDuration(startIso, ts);
+  return d === "—" ? formatRelativeTimeShort(ts) : `+${d}`;
+}
+
+/**
+ * Structured runtime log viewer for one session: level dot, offset from session
+ * start, message. Level + substring filtering is client-side over the fetched
+ * page (the API also filters server-side, but a page is small enough to scan).
+ */
+export function SessionLogsView({
+  idOrSlug,
+  sessionId,
+  startIso,
+  enabled,
+}: {
+  idOrSlug: string;
+  sessionId: string;
+  startIso: string;
+  enabled: boolean;
+}) {
+  const [level, setLevel] = useState<LevelFilter>("all");
+  const [search, setSearch] = useState("");
+
+  const { data, isLoading, isError } = useAgentApplicationSessionLogs(
+    idOrSlug,
+    sessionId,
+    { enabled, params: { limit: 200 } },
+  );
+
+  const filtered = useMemo(() => {
+    const entries = data ?? [];
+    const q = search.trim().toLowerCase();
+    return entries.filter((e) => {
+      if (level !== "all" && e.level.toUpperCase() !== level) return false;
+      if (q && !e.message.toLowerCase().includes(q)) return false;
+      return true;
+    });
+  }, [data, level, search]);
+
+  return (
+    <Flex direction="column" gap="3" className="mx-auto max-w-4xl px-6 py-5">
+      <Flex align="center" gap="3" wrap="wrap" justify="between">
+        <Flex gap="1.5" wrap="wrap">
+          {LEVELS.map((l) => (
+            <button
+              key={l}
+              type="button"
+              onClick={() => setLevel(l)}
+              className={`rounded-full border px-2.5 py-0.5 text-[11px] uppercase ${
+                level === l
+                  ? "border-(--accent-7) bg-(--accent-3) text-gray-12"
+                  : "border-border text-gray-11 hover:border-(--gray-7)"
+              }`}
+            >
+              {l === "all" ? "All" : l}
+            </button>
+          ))}
+        </Flex>
+        <TextField.Root
+          size="1"
+          placeholder="Search messages"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="w-48"
+        />
+      </Flex>
+
+      {isLoading ? (
+        <Flex direction="column" gap="1">
+          {[0, 1, 2, 3, 4].map((i) => (
+            <div
+              key={i}
+              className="h-6 animate-pulse rounded-(--radius-1) bg-(--gray-2)"
+            />
+          ))}
+        </Flex>
+      ) : isError ? (
+        <Text className="text-[12px] text-gray-11">
+          Couldn't load logs for this session.
+        </Text>
+      ) : filtered.length === 0 ? (
+        <Text className="text-[12px] text-gray-10">
+          {(data?.length ?? 0) === 0
+            ? "No logs recorded for this session."
+            : "No logs match the current filter."}
+        </Text>
+      ) : (
+        <div className="overflow-hidden rounded-(--radius-2) border border-border">
+          {filtered.map((entry, i) => (
+            <LogRow
+              key={`${entry.timestamp}-${i}`}
+              entry={entry}
+              startIso={startIso}
+              last={i === filtered.length - 1}
+            />
+          ))}
+        </div>
+      )}
+    </Flex>
+  );
+}
+
+function LogRow({
+  entry,
+  startIso,
+  last,
+}: {
+  entry: AgentSessionLogEntry;
+  startIso: string;
+  last: boolean;
+}) {
+  return (
+    <Flex
+      align="start"
+      gap="3"
+      className={`px-3 py-1.5 ${last ? "" : "border-(--gray-4) border-b"} hover:bg-(--gray-2)`}
+    >
+      <span
+        className="mt-1.5 size-1.5 shrink-0 rounded-full"
+        style={{ backgroundColor: logLevelColor(entry.level) }}
+      />
+      <Text className="w-14 shrink-0 text-[11px] text-gray-10 tabular-nums [font-family:var(--font-mono)]">
+        {offsetLabel(startIso, entry.timestamp)}
+      </Text>
+      <Text className="min-w-0 whitespace-pre-wrap break-words text-[12px] text-gray-12 [font-family:var(--font-mono)]">
+        {entry.message}
+      </Text>
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/SlackSetupCard.tsx b/packages/ui/src/features/agent-applications/components/SlackSetupCard.tsx
new file mode 100644
index 0000000000..8d87df7351
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/SlackSetupCard.tsx
@@ -0,0 +1,120 @@
+import { ArrowSquareOutIcon, ChatCircleIcon } from "@phosphor-icons/react";
+import { Flex, Text } from "@radix-ui/themes";
+import { useAgentSlackManifest } from "../hooks/useAgentSlackManifest";
+import { CopyButton } from "./CopyButton";
+
+/**
+ * Deterministic Slack app setup for a slack-triggered agent: the manifest the
+ * backend derives from the trigger + tools (scopes + event subscriptions
+ * computed), the "create from manifest" link, the live request URLs, and setup
+ * notes. Surfaced under the slack trigger's detail.
+ */
+export function SlackSetupCard({
+  idOrSlug,
+  revisionId,
+}: {
+  idOrSlug: string;
+  revisionId: string;
+}) {
+  const { data, isLoading, isError, error } = useAgentSlackManifest(
+    idOrSlug,
+    revisionId,
+  );
+  const manifestJson = data ? JSON.stringify(data.manifest, null, 2) : "";
+  const interactivity = data
+    ? (data.manifest as { settings?: { interactivity?: unknown } }).settings
+        ?.interactivity
+    : undefined;
+
+  return (
+    <section className="mt-3 overflow-hidden rounded-(--radius-2) border border-border">
+      <Flex
+        align="center"
+        gap="2"
+        className="border-(--gray-5) border-b bg-(--gray-2) px-4 py-1.5 text-[10.5px] text-gray-10 uppercase tracking-wide"
+      >
+        <ChatCircleIcon size={13} />
+        Slack app setup
+      </Flex>
+      {isLoading && !data ? (
+        <Text className="block px-4 py-3 text-[12px] text-gray-10">
+          Generating manifest…
+        </Text>
+      ) : isError ? (
+        <Text className="block px-4 py-3 text-[12px] text-gray-10">
+          Could not generate the Slack manifest: {error?.message}
+        </Text>
+      ) : data ? (
+        <Flex direction="column" gap="3" className="px-4 py-3">
+          <Text className="text-[11.5px] text-gray-10 leading-snug">
+            Paste this manifest into Slack to create the app with the right
+            scopes and event subscriptions already filled in — derived from this
+            agent's trigger config and tools.
+          </Text>
+          <Flex align="center" gap="2" wrap="wrap">
+            <a
+              href="https://api.slack.com/apps?new_app=1"
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex h-7 items-center gap-1.5 rounded-(--radius-2) bg-(--accent-9) px-2.5 font-medium text-[11.5px] text-white no-underline hover:opacity-90"
+            >
+              <ArrowSquareOutIcon size={12} />
+              Create Slack app from manifest
+            </a>
+            <CopyButton text={manifestJson} label="Copy manifest" showLabel />
+          </Flex>
+          <Text className="text-[11.5px] text-gray-10 leading-snug">
+            In Slack, choose “From an app manifest”, pick the workspace, then
+            paste the JSON below (use the JSON tab).
+          </Text>
+          <pre className="max-h-80 overflow-auto rounded-(--radius-2) border border-border bg-(--gray-2) p-2.5 text-[11px] leading-relaxed">
+            <code className="[font-family:var(--font-mono)]">
+              {manifestJson}
+            </code>
+          </pre>
+          <Flex direction="column" gap="1.5" className="text-[11.5px]">
+            <RequestUrlRow
+              label="Event Subscriptions Request URL"
+              url={data.events_url}
+            />
+            {interactivity ? (
+              <RequestUrlRow
+                label="Interactivity Request URL"
+                url={data.interactivity_url}
+              />
+            ) : null}
+          </Flex>
+          {data.notes.length > 0 ? (
+            <ul className="list-disc space-y-0.5 pl-4 text-[10.5px] text-gray-10">
+              {data.notes.map((note) => (
+                <li key={note}>{note}</li>
+              ))}
+            </ul>
+          ) : null}
+        </Flex>
+      ) : (
+        <Text className="block px-4 py-3 text-[12px] text-gray-10">
+          No manifest available.
+        </Text>
+      )}
+    </section>
+  );
+}
+
+function RequestUrlRow({ label, url }: { label: string; url: string | null }) {
+  return (
+    <Flex align="baseline" gap="2">
+      <Text className="shrink-0 text-gray-10">{label}:</Text>
+      {url ? (
+        <Flex align="center" gap="1.5" className="min-w-0">
+          <code className="truncate [font-family:var(--font-mono)]">{url}</code>
+          <CopyButton text={url} />
+        </Flex>
+      ) : (
+        <Text className="text-gray-9 italic">
+          not available (no public ingress URL configured)
+        </Text>
+      )}
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/components/agentApprovalsFilters.ts b/packages/ui/src/features/agent-applications/components/agentApprovalsFilters.ts
new file mode 100644
index 0000000000..0e49e5ac84
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/components/agentApprovalsFilters.ts
@@ -0,0 +1,11 @@
+import type { AgentApprovalRequestState } from "@posthog/shared/agent-platform-types";
+
+export type ApprovalFilter = AgentApprovalRequestState | "all";
+
+export const APPROVAL_FILTERS: { id: ApprovalFilter; label: string }[] = [
+  { id: "queued", label: "Queued" },
+  { id: "dispatched", label: "Approved" },
+  { id: "rejected", label: "Rejected" },
+  { id: "expired", label: "Expired" },
+  { id: "all", label: "All" },
+];
diff --git a/packages/ui/src/features/agent-applications/featureFlag.ts b/packages/ui/src/features/agent-applications/featureFlag.ts
new file mode 100644
index 0000000000..cf8edfb9b3
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/featureFlag.ts
@@ -0,0 +1,7 @@
+/**
+ * Gates the whole agent-platform surface in PostHog Code: the Applications tab
+ * content (list + per-agent detail) and the always-on Agent Builder dock. The
+ * Scouts tab is unaffected. Mirrors the `agent-platform` flag on the PostHog
+ * side (`FEATURE_FLAGS.AGENT_PLATFORM`). Hidden until GA.
+ */
+export const AGENT_PLATFORM_FLAG = "agent-platform";
diff --git a/packages/ui/src/features/agent-applications/hooks/agentApplicationsKeys.ts b/packages/ui/src/features/agent-applications/hooks/agentApplicationsKeys.ts
new file mode 100644
index 0000000000..95893ae3c0
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/agentApplicationsKeys.ts
@@ -0,0 +1,108 @@
+export const agentApplicationsKeys = {
+  list: (projectId: number | null) =>
+    ["agent-applications", "list", projectId] as const,
+  detail: (projectId: number | null, idOrSlug: string) =>
+    ["agent-applications", "detail", projectId, idOrSlug] as const,
+  sessions: (projectId: number | null, idOrSlug: string) =>
+    ["agent-applications", "sessions", projectId, idOrSlug] as const,
+  session: (projectId: number | null, idOrSlug: string, sessionId: string) =>
+    ["agent-applications", "session", projectId, idOrSlug, sessionId] as const,
+  sessionLogs: (
+    projectId: number | null,
+    idOrSlug: string,
+    sessionId: string,
+  ) =>
+    [
+      "agent-applications",
+      "session-logs",
+      projectId,
+      idOrSlug,
+      sessionId,
+    ] as const,
+  approvals: (projectId: number | null, idOrSlug: string, state?: string) =>
+    [
+      "agent-applications",
+      "approvals",
+      projectId,
+      idOrSlug,
+      state ?? "all",
+    ] as const,
+  /**
+   * Tight-poll cache for the in-chat pending-approval card. Lives under the
+   * same "approvals" prefix that `useDecideAgentApproval` invalidates, so a
+   * decide hits this hook too (clears the card optimistically).
+   */
+  chatPendingApproval: (
+    projectId: number | null,
+    idOrSlug: string,
+    sessionId: string | null,
+  ) =>
+    [
+      "agent-applications",
+      "approvals",
+      projectId,
+      idOrSlug,
+      "chat-pending",
+      sessionId,
+    ] as const,
+  revisions: (projectId: number | null, idOrSlug: string) =>
+    ["agent-applications", "revisions", projectId, idOrSlug] as const,
+  revision: (projectId: number | null, idOrSlug: string, revisionId: string) =>
+    [
+      "agent-applications",
+      "revision",
+      projectId,
+      idOrSlug,
+      revisionId,
+    ] as const,
+  bundle: (projectId: number | null, idOrSlug: string, revisionId: string) =>
+    ["agent-applications", "bundle", projectId, idOrSlug, revisionId] as const,
+  envKeys: (projectId: number | null, idOrSlug: string) =>
+    ["agent-applications", "env-keys", projectId, idOrSlug] as const,
+  slackManifest: (
+    projectId: number | null,
+    idOrSlug: string,
+    revisionId: string,
+  ) =>
+    [
+      "agent-applications",
+      "slack-manifest",
+      projectId,
+      idOrSlug,
+      revisionId,
+    ] as const,
+  memoryTree: (projectId: number | null, idOrSlug: string) =>
+    ["agent-applications", "memory-tree", projectId, idOrSlug] as const,
+  memoryFile: (projectId: number | null, idOrSlug: string, path: string) =>
+    ["agent-applications", "memory-file", projectId, idOrSlug, path] as const,
+  memorySearch: (projectId: number | null, idOrSlug: string, query: string) =>
+    [
+      "agent-applications",
+      "memory-search",
+      projectId,
+      idOrSlug,
+      query,
+    ] as const,
+  memoryTables: (projectId: number | null, idOrSlug: string) =>
+    ["agent-applications", "memory-tables", projectId, idOrSlug] as const,
+  memoryTable: (projectId: number | null, idOrSlug: string, name: string) =>
+    ["agent-applications", "memory-table", projectId, idOrSlug, name] as const,
+  fleetLiveSessions: (projectId: number | null) =>
+    ["agent-applications", "fleet", "live-sessions", projectId] as const,
+  fleetApprovals: (projectId: number | null, state?: string) =>
+    [
+      "agent-applications",
+      "fleet",
+      "approvals",
+      projectId,
+      state ?? "all",
+    ] as const,
+  /** `applicationId` is undefined for the fleet-wide board. */
+  analytics: (projectId: number | null, applicationId?: string) =>
+    [
+      "agent-applications",
+      "analytics",
+      projectId,
+      applicationId ?? "fleet",
+    ] as const,
+};
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentAnalytics.ts b/packages/ui/src/features/agent-applications/hooks/useAgentAnalytics.ts
new file mode 100644
index 0000000000..03144072eb
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentAnalytics.ts
@@ -0,0 +1,23 @@
+import type { AgentAnalyticsData } from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+/**
+ * Agent observability rollup over the team's own `$ai_*` events. Pass an
+ * `applicationId` (the agent's UUID) to scope the board to a single agent (the
+ * per-agent Observability tab); omit it for the fleet-wide analytics board.
+ *
+ * The fleet board is enabled as soon as a project is selected; the per-agent
+ * board waits for the resolved `applicationId` so it doesn't fetch an
+ * unscoped (whole-fleet) board for one agent's tab.
+ */
+export function useAgentAnalytics(applicationId?: string, scope?: "agent") {
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+  const enabled = !!projectId && (scope !== "agent" || !!applicationId);
+  return useAuthenticatedQuery<AgentAnalyticsData>(
+    agentApplicationsKeys.analytics(projectId, applicationId),
+    (client) => client.getAgentAnalytics(applicationId),
+    { enabled, staleTime: 30_000 },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentApplication.ts b/packages/ui/src/features/agent-applications/hooks/useAgentApplication.ts
new file mode 100644
index 0000000000..74a7951c41
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentApplication.ts
@@ -0,0 +1,14 @@
+import type { AgentApplication } from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+/** Fetches a single agent application by UUID or slug. */
+export function useAgentApplication(idOrSlug: string) {
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+  return useAuthenticatedQuery<AgentApplication | null>(
+    agentApplicationsKeys.detail(projectId, idOrSlug),
+    (client) => client.getAgentApplication(idOrSlug),
+    { enabled: !!projectId && !!idOrSlug, staleTime: 30_000 },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentApplicationApprovals.ts b/packages/ui/src/features/agent-applications/hooks/useAgentApplicationApprovals.ts
new file mode 100644
index 0000000000..b6a13824d2
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentApplicationApprovals.ts
@@ -0,0 +1,28 @@
+import type {
+  AgentApprovalRequest,
+  AgentApprovalsListParams,
+} from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+/**
+ * Lists tool-approval requests for one agent. Optionally filtered to a single
+ * state (the backend accepts one `state` value); omit for all states.
+ */
+export function useAgentApplicationApprovals(
+  idOrSlug: string,
+  params?: AgentApprovalsListParams,
+) {
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+  return useAuthenticatedQuery<AgentApprovalRequest[]>(
+    agentApplicationsKeys.approvals(projectId, idOrSlug, params?.state),
+    (client) => client.listAgentApplicationApprovals(idOrSlug, params),
+    {
+      enabled: !!projectId && !!idOrSlug,
+      staleTime: 10_000,
+      // Queued approvals change as agents run; poll while the tab is focused.
+      refetchInterval: 10_000,
+    },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentApplicationSession.ts b/packages/ui/src/features/agent-applications/hooks/useAgentApplicationSession.ts
new file mode 100644
index 0000000000..231785c35a
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentApplicationSession.ts
@@ -0,0 +1,34 @@
+import type { AgentApplicationSessionDetail } from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+const TERMINAL_STATES = new Set(["completed", "closed", "cancelled", "failed"]);
+
+/** Fetches one session's detail, including its stored conversation transcript. */
+export function useAgentApplicationSession(
+  idOrSlug: string,
+  sessionId: string,
+  lastN?: number,
+) {
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+  return useAuthenticatedQuery<AgentApplicationSessionDetail | null>(
+    [
+      ...agentApplicationsKeys.session(projectId, idOrSlug, sessionId),
+      lastN ?? null,
+    ],
+    (client) =>
+      projectId
+        ? client.getAgentApplicationSession(idOrSlug, sessionId, lastN)
+        : Promise.resolve(null),
+    {
+      enabled: !!projectId && !!idOrSlug && !!sessionId,
+      staleTime: 15_000,
+      // Poll only while the session is still active; terminal sessions are immutable.
+      refetchInterval: (query) =>
+        query.state.data && !TERMINAL_STATES.has(query.state.data.state)
+          ? 10_000
+          : false,
+    },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentApplicationSessionLogs.ts b/packages/ui/src/features/agent-applications/hooks/useAgentApplicationSessionLogs.ts
new file mode 100644
index 0000000000..9abb6feb75
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentApplicationSessionLogs.ts
@@ -0,0 +1,36 @@
+import type {
+  AgentSessionLogEntry,
+  AgentSessionLogsParams,
+} from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+/**
+ * Structured runtime logs for one session. `enabled` lets callers defer the
+ * fetch until the Logs tab is actually opened.
+ */
+export function useAgentApplicationSessionLogs(
+  idOrSlug: string,
+  sessionId: string,
+  options?: { enabled?: boolean; params?: AgentSessionLogsParams },
+) {
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+  return useAuthenticatedQuery<AgentSessionLogEntry[]>(
+    [
+      ...agentApplicationsKeys.sessionLogs(projectId, idOrSlug, sessionId),
+      options?.params ?? null,
+    ],
+    (client) =>
+      client.getAgentApplicationSessionLogs(
+        idOrSlug,
+        sessionId,
+        options?.params,
+      ),
+    {
+      enabled:
+        !!projectId && !!idOrSlug && !!sessionId && (options?.enabled ?? true),
+      staleTime: 10_000,
+    },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentApplicationSessions.ts b/packages/ui/src/features/agent-applications/hooks/useAgentApplicationSessions.ts
new file mode 100644
index 0000000000..3ddd77c6d7
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentApplicationSessions.ts
@@ -0,0 +1,30 @@
+import type {
+  AgentApplicationSessionsListResponse,
+  AgentSessionsListParams,
+} from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+const EMPTY: AgentApplicationSessionsListResponse = { results: [], count: 0 };
+
+/** Lists sessions for an agent application. */
+export function useAgentApplicationSessions(
+  idOrSlug: string,
+  params?: AgentSessionsListParams,
+) {
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+  return useAuthenticatedQuery<AgentApplicationSessionsListResponse>(
+    [...agentApplicationsKeys.sessions(projectId, idOrSlug), params ?? null],
+    (client) =>
+      projectId
+        ? client.listAgentApplicationSessions(idOrSlug, params)
+        : Promise.resolve(EMPTY),
+    {
+      enabled: !!projectId && !!idOrSlug,
+      staleTime: 15_000,
+      // Auto-poll; react-query pauses this while the tab is unfocused.
+      refetchInterval: 15_000,
+    },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentApplications.ts b/packages/ui/src/features/agent-applications/hooks/useAgentApplications.ts
new file mode 100644
index 0000000000..b6230d000d
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentApplications.ts
@@ -0,0 +1,15 @@
+import type { AgentApplication } from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+/** Lists the deployed agent applications for the current project. */
+export function useAgentApplications() {
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+  return useAuthenticatedQuery<AgentApplication[]>(
+    agentApplicationsKeys.list(projectId),
+    (client) =>
+      projectId ? client.listAgentApplications() : Promise.resolve([]),
+    { enabled: !!projectId, staleTime: 30_000 },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentChat.ts b/packages/ui/src/features/agent-applications/hooks/useAgentChat.ts
new file mode 100644
index 0000000000..34af4dc570
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentChat.ts
@@ -0,0 +1,411 @@
+import { agentChatStore } from "@posthog/core/agent-chat/agentChatStore";
+import type { AgentSessionEvent } from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedClient } from "@posthog/ui/features/auth/authClient";
+import { toast } from "@posthog/ui/primitives/toast";
+import { useCallback, useEffect, useRef } from "react";
+import { useStore } from "zustand";
+import { useChatHistoryStore } from "../chat/chatHistoryStore";
+import { buildConsoleContextEnvelope } from "../chat/consoleContext";
+import { conversationToAcpMessages } from "../chat/conversationToAcp";
+import {
+  type AgentChatMapper,
+  createAgentChatMapper,
+} from "../chat/sessionEventToAcp";
+
+type ClientToolCall = Extract<
+  AgentSessionEvent,
+  { kind: "client_tool_call" }
+>["data"];
+
+/**
+ * A client-tool result. `defer: true` means the call is interactive (e.g.
+ * `set_secret`): the handler opened a UI and will post the outcome itself via
+ * `resolveInteractiveTool`, so the dispatcher must NOT post a result now.
+ */
+export type ClientToolOutcome = {
+  result?: unknown;
+  error?: string;
+  defer?: boolean;
+};
+
+/**
+ * Resolves a client-tool call, or returns null to defer to the built-in
+ * handlers (toast / get_context). Used by the agent builder to drive the UI
+ * (focus_*) and the secret punch-out.
+ */
+export type ClientToolHandler = (
+  data: ClientToolCall,
+) => ClientToolOutcome | null | Promise<ClientToolOutcome | null>;
+
+/** Session states with no further activity to tail — render stored history only. */
+const TERMINAL_SESSION_STATES = new Set([
+  "completed",
+  "closed",
+  "cancelled",
+  "failed",
+]);
+
+export interface UseAgentChatOptions {
+  /** Opaque key isolating this chat in the store (e.g. "agent-builder", "preview:<slug>"). */
+  chatId: string;
+  /** Agent slug the chat targets (drives client-tool context + history). */
+  agentSlug: string;
+  ingressBaseUrl: string | null;
+  /** Index started sessions in the local recent-chats rail (preview only). */
+  recordHistory?: boolean;
+  /**
+   * Supplies the "what am I looking at" object. When set, it's prepended as a
+   * delimited envelope to the first message and answers the `get_context`
+   * client tool. AgentBuilder only.
+   */
+  contextProvider?: () => unknown;
+  /** AgentBuilder UI-driving tools (focus_*, set_secret); null → built-in handling. */
+  clientTools?: ClientToolHandler;
+}
+
+/**
+ * Drives a live chat against a deployed agent's ingress: starts/sends/cancels
+ * via the api-client, streams SSE through the M3 `createAgentChatMapper`, and
+ * pumps the resulting ACP messages into the core `agentChatStore` under `chatId`
+ * (so the agent builder dock and a per-agent preview coexist). Components read the
+ * chat by id and render through `ConversationView`.
+ *
+ * Transport lives here (the api-client is renderer/hook-scoped); state lives in
+ * core. Client tools are dispatched here — `toast`/`get_context` are handled;
+ * `focus_*`/`set_secret` degrade to `unhandled_client_tool` until the agent builder
+ * milestone wires UI-driving + the inline secret form.
+ */
+export function useAgentChat({
+  chatId,
+  agentSlug,
+  ingressBaseUrl,
+  recordHistory = false,
+  contextProvider,
+  clientTools,
+}: UseAgentChatOptions) {
+  const client = useAuthenticatedClient();
+  const chat = useStore(agentChatStore, (s) => s.chats[chatId]);
+  const recordChat = useChatHistoryStore((s) => s.record);
+  const mapperRef = useRef<AgentChatMapper>(createAgentChatMapper());
+  const abortRef = useRef<AbortController | null>(null);
+  const streamingRef = useRef(false);
+  // Latest provider/handler without re-creating the stream callbacks each render.
+  const contextProviderRef = useRef(contextProvider);
+  contextProviderRef.current = contextProvider;
+  const clientToolsRef = useRef(clientTools);
+  clientToolsRef.current = clientTools;
+  // Each stream attach bumps this; an aborted/superseded loop checks it before
+  // touching the store so a stale loop's terminal/finally can't clobber the new
+  // chat (matters when resuming or starting a new chat mid-stream).
+  const epochRef = useRef(0);
+
+  const dispatchClientTool = useCallback(
+    async (
+      data: Extract<AgentSessionEvent, { kind: "client_tool_call" }>["data"],
+      sessionId: string,
+    ) => {
+      if (!ingressBaseUrl) return;
+      // 1) agent builder handler (focus_*, set_secret), 2) get_context from the
+      // context provider, 3) built-in toast / unhandled fallback.
+      let outcome = (await clientToolsRef.current?.(data)) ?? null;
+      if (outcome == null && data.tool_id === "get_context") {
+        outcome = {
+          result: contextProviderRef.current?.() ?? {
+            agent: agentSlug,
+            client: "posthog-code",
+          },
+        };
+      }
+      if (outcome == null) outcome = handleClientTool(data, agentSlug);
+      // Interactive tools (set_secret) post their own outcome later via
+      // resolveInteractiveTool once the user submits the form.
+      if (outcome.defer) return;
+      try {
+        await client.sendAgentClientToolResult(
+          ingressBaseUrl,
+          sessionId,
+          data.call_id,
+          outcome,
+        );
+      } catch {
+        // Best-effort — the session will time the call out if this fails.
+      }
+    },
+    [client, ingressBaseUrl, agentSlug],
+  );
+
+  const runStream = useCallback(
+    async (sessionId: string) => {
+      if (!ingressBaseUrl) return;
+      // Supersede any in-flight stream (resume / new chat) and claim this epoch.
+      abortRef.current?.abort();
+      const epoch = ++epochRef.current;
+      const controller = new AbortController();
+      abortRef.current = controller;
+      streamingRef.current = true;
+      const store = agentChatStore.getState();
+      try {
+        for await (const event of client.streamAgentSession(
+          ingressBaseUrl,
+          sessionId,
+          controller.signal,
+        )) {
+          if (epochRef.current !== epoch) break;
+          store.appendMessages(chatId, mapperRef.current.apply(event));
+          if (event.kind === "client_tool_call") {
+            void dispatchClientTool(event.data, sessionId);
+          } else if (event.kind === "completed") {
+            store.setStatus(chatId, "completed");
+          } else if (event.kind === "waiting") {
+            store.setStatus(chatId, "awaiting_input");
+          } else if (event.kind === "failed") {
+            store.setStatus(chatId, "failed");
+            store.setError(
+              chatId,
+              event.data?.reason ?? "The agent run failed.",
+            );
+          }
+        }
+      } catch (err) {
+        if (epochRef.current === epoch && !controller.signal.aborted) {
+          store.setError(
+            chatId,
+            err instanceof Error ? err.message : "Stream dropped.",
+          );
+        }
+      } finally {
+        if (epochRef.current === epoch) {
+          streamingRef.current = false;
+          // Stream ended without a terminal frame mid-conversation → treat as
+          // awaiting input so the composer stays usable.
+          if (agentChatStore.getState().chats[chatId]?.status === "streaming") {
+            agentChatStore.getState().setStatus(chatId, "awaiting_input");
+          }
+        }
+      }
+    },
+    [client, ingressBaseUrl, chatId, dispatchClientTool],
+  );
+
+  const start = useCallback(
+    async (text: string) => {
+      if (!ingressBaseUrl) return;
+      mapperRef.current = createAgentChatMapper();
+      const s = agentChatStore.getState();
+      s.begin(chatId, agentSlug);
+      // Render the user's clean message immediately; the stream's echo (which
+      // includes the context envelope) is stripped + deduped by the mapper.
+      s.appendMessages(chatId, mapperRef.current.seedUserMessage(text));
+      const envelope = contextProviderRef.current?.();
+      const wireText = envelope
+        ? `${buildConsoleContextEnvelope(envelope)}\n\n${text}`
+        : text;
+      try {
+        const { session_id } = await client.runAgentSession(
+          ingressBaseUrl,
+          wireText,
+        );
+        agentChatStore.getState().setSessionId(chatId, session_id);
+        agentChatStore.getState().setStatus(chatId, "streaming");
+        // Index this chat locally so it shows in the rail — only sessions the
+        // user started here, never the agent's full (customer) session list.
+        if (recordHistory) {
+          recordChat(agentSlug, {
+            sessionId: session_id,
+            title: text.slice(0, 120),
+            startedAt: Date.now(),
+          });
+        }
+        void runStream(session_id);
+      } catch (err) {
+        agentChatStore.getState().setStatus(chatId, "failed");
+        agentChatStore
+          .getState()
+          .setError(
+            chatId,
+            err instanceof Error ? err.message : "Couldn't start chat.",
+          );
+      }
+    },
+    [
+      client,
+      ingressBaseUrl,
+      chatId,
+      agentSlug,
+      runStream,
+      recordHistory,
+      recordChat,
+    ],
+  );
+
+  const send = useCallback(
+    async (text: string) => {
+      const s = agentChatStore.getState();
+      const sessionId = s.chats[chatId]?.sessionId;
+      if (!ingressBaseUrl || !sessionId) return start(text);
+      // Render the user's message immediately; the stream's echo is deduped.
+      s.appendMessages(chatId, mapperRef.current.seedUserMessage(text));
+      s.setStatus(chatId, "streaming");
+      try {
+        await client.sendAgentMessage(ingressBaseUrl, sessionId, text);
+        if (!streamingRef.current) void runStream(sessionId);
+      } catch (err) {
+        s.setStatus(chatId, "failed");
+        s.setError(
+          chatId,
+          err instanceof Error ? err.message : "Couldn't send.",
+        );
+      }
+    },
+    [client, ingressBaseUrl, chatId, start, runStream],
+  );
+
+  const cancel = useCallback(async () => {
+    const s = agentChatStore.getState();
+    const sessionId = s.chats[chatId]?.sessionId;
+    abortRef.current?.abort();
+    s.setStatus(chatId, "cancelled");
+    if (ingressBaseUrl && sessionId) {
+      try {
+        await client.cancelAgentSession(ingressBaseUrl, sessionId);
+      } catch {
+        // Best-effort.
+      }
+    }
+  }, [client, ingressBaseUrl, chatId]);
+
+  // Resolve an interactive client tool (set_secret) once the user submits its
+  // form: post the outcome via `/send` (which wakes the parked session) and
+  // make sure the stream is attached to receive the resulting turn.
+  const resolveInteractiveTool = useCallback(
+    async (
+      callId: string,
+      outcome: { result: Record<string, unknown> } | { error: string },
+    ) => {
+      if (!ingressBaseUrl) return;
+      const sessionId = agentChatStore.getState().chats[chatId]?.sessionId;
+      if (!sessionId) return;
+      agentChatStore.getState().setStatus(chatId, "streaming");
+      try {
+        await client.sendAgentInteractiveToolResult(
+          ingressBaseUrl,
+          sessionId,
+          callId,
+          outcome,
+        );
+        if (!streamingRef.current) void runStream(sessionId);
+      } catch (err) {
+        agentChatStore.getState().setStatus(chatId, "awaiting_input");
+        agentChatStore
+          .getState()
+          .setError(
+            chatId,
+            err instanceof Error ? err.message : "Couldn't submit the secret.",
+          );
+      }
+    },
+    [client, ingressBaseUrl, chatId, runStream],
+  );
+
+  // Re-open a past preview chat. `/listen` only tails (it does not replay), so
+  // history is rebuilt from the stored transcript; a still-active session then
+  // attaches the live stream so the user can keep chatting where they left off.
+  const resume = useCallback(
+    async (sessionId: string) => {
+      if (
+        !ingressBaseUrl ||
+        agentChatStore.getState().chats[chatId]?.sessionId === sessionId
+      )
+        return;
+      abortRef.current?.abort();
+      epochRef.current += 1;
+      streamingRef.current = false;
+      mapperRef.current = createAgentChatMapper();
+      const s = agentChatStore.getState();
+      s.begin(chatId, agentSlug);
+      s.setSessionId(chatId, sessionId);
+      s.setStatus(chatId, "starting");
+      try {
+        const detail = await client.getAgentApplicationSession(
+          agentSlug,
+          sessionId,
+        );
+        // A newer resume/new-chat won the race while we were fetching.
+        if (agentChatStore.getState().chats[chatId]?.sessionId !== sessionId)
+          return;
+        const conversation = detail?.conversation ?? [];
+        agentChatStore
+          .getState()
+          .appendMessages(chatId, conversationToAcpMessages(conversation));
+        mapperRef.current.setPromptIdBase(
+          conversation.filter((m) => m.role === "user").length,
+        );
+        if (!detail || TERMINAL_SESSION_STATES.has(detail.state)) {
+          agentChatStore.getState().setStatus(chatId, "completed");
+        } else {
+          agentChatStore.getState().setStatus(chatId, "streaming");
+          void runStream(sessionId);
+        }
+      } catch (err) {
+        if (agentChatStore.getState().chats[chatId]?.sessionId !== sessionId)
+          return;
+        agentChatStore.getState().setStatus(chatId, "failed");
+        agentChatStore
+          .getState()
+          .setError(
+            chatId,
+            err instanceof Error ? err.message : "Couldn't load this chat.",
+          );
+      }
+    },
+    [client, ingressBaseUrl, chatId, agentSlug, runStream],
+  );
+
+  // Clear the surface for a brand-new chat; the next send starts a new session.
+  const newChat = useCallback(() => {
+    abortRef.current?.abort();
+    epochRef.current += 1;
+    streamingRef.current = false;
+    mapperRef.current = createAgentChatMapper();
+    agentChatStore.getState().reset(chatId);
+  }, [chatId]);
+
+  // Abort the stream when the consumer unmounts.
+  useEffect(() => () => abortRef.current?.abort(), []);
+
+  return {
+    messages: chat?.messages ?? [],
+    status: chat?.status ?? "idle",
+    error: chat?.error ?? null,
+    isStreaming: chat?.status === "streaming" || chat?.status === "starting",
+    hasSession: !!chat?.sessionId,
+    sessionId: chat?.sessionId ?? null,
+    send,
+    cancel,
+    resume,
+    newChat,
+    resolveInteractiveTool,
+  };
+}
+
+/** Resolve a client-tool call. Immediate tools only; the rest degrade. */
+function handleClientTool(
+  data: Extract<AgentSessionEvent, { kind: "client_tool_call" }>["data"],
+  agentSlug: string,
+): { result?: unknown; error?: string } {
+  switch (data.tool_id) {
+    case "toast": {
+      const args = (data.args ?? {}) as { message?: string; level?: string };
+      const message = args.message ?? "";
+      if (args.level === "error") toast.error(message);
+      else if (args.level === "warn") toast.warning(message);
+      else toast.info(message);
+      return { result: { shown: true } };
+    }
+    case "get_context":
+      return { result: { agent: agentSlug, client: "posthog-code" } };
+    default:
+      // focus_*, set_secret, … land with the agent builder milestone.
+      return { error: `unhandled_client_tool: ${data.tool_id}` };
+  }
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentChatPendingApproval.ts b/packages/ui/src/features/agent-applications/hooks/useAgentChatPendingApproval.ts
new file mode 100644
index 0000000000..5e0b005e74
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentChatPendingApproval.ts
@@ -0,0 +1,42 @@
+import type { AgentApprovalRequest } from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+/**
+ * The oldest queued approval for `sessionId` against this agent, or null.
+ * Drives the in-chat approval card in the live preview / agent builder dock:
+ * when the agent proposes an approval-gated tool call, the runner pauses
+ * silently (no SSE signal) — we poll the approvals endpoint and surface the
+ * decision inline.
+ *
+ * Tighter poll than {@link useAgentApplicationApprovals} (2s vs 10s) because
+ * this drives a live interaction; react-query pauses while the tab is
+ * unfocused. The cache key shares the `approvals` prefix that
+ * `useDecideAgentApproval` invalidates, so a decide clears the card
+ * immediately and the runner's SSE follow-up resumes the chat.
+ */
+export function useAgentChatPendingApproval(
+  idOrSlug: string,
+  sessionId: string | null,
+) {
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+  return useAuthenticatedQuery<AgentApprovalRequest | null>(
+    agentApplicationsKeys.chatPendingApproval(projectId, idOrSlug, sessionId),
+    async (client) => {
+      if (!sessionId) return null;
+      const results = await client.listAgentApplicationApprovals(idOrSlug, {
+        state: "queued",
+      });
+      const forSession = results.filter((r) => r.session_id === sessionId);
+      if (forSession.length === 0) return null;
+      forSession.sort((a, b) => a.created_at.localeCompare(b.created_at));
+      return forSession[0] ?? null;
+    },
+    {
+      enabled: !!projectId && !!idOrSlug && !!sessionId,
+      staleTime: 2_000,
+      refetchInterval: 2_000,
+    },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentEnvKeyMutations.ts b/packages/ui/src/features/agent-applications/hooks/useAgentEnvKeyMutations.ts
new file mode 100644
index 0000000000..0348f57ba1
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentEnvKeyMutations.ts
@@ -0,0 +1,30 @@
+import { useAuthenticatedClient } from "@posthog/ui/features/auth/authClient";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+/**
+ * Set/rotate and clear one agent env key. Both invalidate the env-keys list so
+ * set/not-set status (tree badges, secret detail) reflects the change.
+ */
+export function useAgentEnvKeyMutations(idOrSlug: string) {
+  const client = useAuthenticatedClient();
+  const queryClient = useQueryClient();
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+
+  const invalidate = () =>
+    queryClient.invalidateQueries({
+      queryKey: agentApplicationsKeys.envKeys(projectId, idOrSlug),
+    });
+
+  const setKey = useMutation<void, Error, { key: string; value: string }>({
+    mutationFn: ({ key, value }) => client.setAgentEnvKey(idOrSlug, key, value),
+    onSuccess: () => void invalidate(),
+  });
+  const clearKey = useMutation<void, Error, { key: string }>({
+    mutationFn: ({ key }) => client.clearAgentEnvKey(idOrSlug, key),
+    onSuccess: () => void invalidate(),
+  });
+
+  return { setKey, clearKey };
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentEnvKeys.ts b/packages/ui/src/features/agent-applications/hooks/useAgentEnvKeys.ts
new file mode 100644
index 0000000000..f2b524d281
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentEnvKeys.ts
@@ -0,0 +1,13 @@
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+/** Names of env keys currently set on an agent (values are never returned). */
+export function useAgentEnvKeys(idOrSlug: string) {
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+  return useAuthenticatedQuery<string[]>(
+    agentApplicationsKeys.envKeys(projectId, idOrSlug),
+    (client) => client.listAgentEnvKeys(idOrSlug),
+    { enabled: !!projectId && !!idOrSlug, staleTime: 15_000 },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentFleetApprovals.ts b/packages/ui/src/features/agent-applications/hooks/useAgentFleetApprovals.ts
new file mode 100644
index 0000000000..feb4eeab27
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentFleetApprovals.ts
@@ -0,0 +1,24 @@
+import type {
+  AgentApprovalRequest,
+  AgentApprovalsListParams,
+} from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+/**
+ * Fleet-wide tool-approval requests across every agent on the team
+ * (team-admin only). Optionally filtered to a single state; omit for all.
+ */
+export function useAgentFleetApprovals(params?: AgentApprovalsListParams) {
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+  return useAuthenticatedQuery<AgentApprovalRequest[]>(
+    agentApplicationsKeys.fleetApprovals(projectId, params?.state),
+    (client) => client.listAgentFleetApprovals(params),
+    {
+      enabled: !!projectId,
+      staleTime: 10_000,
+      refetchInterval: 10_000,
+    },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentFleetLiveSessions.ts b/packages/ui/src/features/agent-applications/hooks/useAgentFleetLiveSessions.ts
new file mode 100644
index 0000000000..4e2f57997d
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentFleetLiveSessions.ts
@@ -0,0 +1,26 @@
+import type { AgentFleetLiveSessionsResponse } from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+const EMPTY: AgentFleetLiveSessionsResponse = { results: [] };
+
+/**
+ * Cross-agent live (non-terminal) sessions. Polls aggressively (5s) since live
+ * sessions move fast; react-query pauses when the tab is unfocused.
+ */
+export function useAgentFleetLiveSessions(limit?: number) {
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+  return useAuthenticatedQuery<AgentFleetLiveSessionsResponse>(
+    [...agentApplicationsKeys.fleetLiveSessions(projectId), limit ?? null],
+    (client) =>
+      projectId
+        ? client.listAgentFleetLiveSessions(limit)
+        : Promise.resolve(EMPTY),
+    {
+      enabled: !!projectId,
+      staleTime: 5_000,
+      refetchInterval: 5_000,
+    },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentMemory.ts b/packages/ui/src/features/agent-applications/hooks/useAgentMemory.ts
new file mode 100644
index 0000000000..72d6064d19
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentMemory.ts
@@ -0,0 +1,71 @@
+import type {
+  AgentMemoryFile,
+  AgentMemorySearchResult,
+  AgentMemoryTableHeader,
+  AgentMemoryTableRows,
+  AgentMemoryTreeNode,
+} from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+/** The agent's memory folder tree. */
+export function useAgentMemoryTree(idOrSlug: string) {
+  const projectId = useAuthStateValue((s) => s.currentProjectId);
+  return useAuthenticatedQuery<AgentMemoryTreeNode | null>(
+    agentApplicationsKeys.memoryTree(projectId, idOrSlug),
+    (client) => client.getAgentMemoryTree(idOrSlug),
+    { enabled: !!projectId && !!idOrSlug, staleTime: 15_000 },
+  );
+}
+
+/** One memory file's header + content. Fetches only when `path` is set. */
+export function useAgentMemoryFile(
+  idOrSlug: string,
+  path: string | null | undefined,
+) {
+  const projectId = useAuthStateValue((s) => s.currentProjectId);
+  return useAuthenticatedQuery<AgentMemoryFile | null>(
+    agentApplicationsKeys.memoryFile(projectId, idOrSlug, path ?? ""),
+    (client) =>
+      path ? client.readAgentMemoryFile(idOrSlug, path) : Promise.resolve(null),
+    { enabled: !!projectId && !!idOrSlug && !!path, staleTime: 15_000 },
+  );
+}
+
+/** BM25 search. Fetches only when `query` is non-empty. */
+export function useAgentMemorySearch(idOrSlug: string, query: string) {
+  const projectId = useAuthStateValue((s) => s.currentProjectId);
+  const q = query.trim();
+  return useAuthenticatedQuery<AgentMemorySearchResult[]>(
+    agentApplicationsKeys.memorySearch(projectId, idOrSlug, q),
+    (client) => client.searchAgentMemory(idOrSlug, q, 50),
+    { enabled: !!projectId && !!idOrSlug && q.length > 0, staleTime: 10_000 },
+  );
+}
+
+/** The agent's memory tables. */
+export function useAgentMemoryTables(idOrSlug: string) {
+  const projectId = useAuthStateValue((s) => s.currentProjectId);
+  return useAuthenticatedQuery<AgentMemoryTableHeader[]>(
+    agentApplicationsKeys.memoryTables(projectId, idOrSlug),
+    (client) => client.listAgentMemoryTables(idOrSlug),
+    { enabled: !!projectId && !!idOrSlug, staleTime: 15_000 },
+  );
+}
+
+/** Rows from one memory table. Fetches only when `name` is set. */
+export function useAgentMemoryTable(
+  idOrSlug: string,
+  name: string | null | undefined,
+) {
+  const projectId = useAuthStateValue((s) => s.currentProjectId);
+  return useAuthenticatedQuery<AgentMemoryTableRows | null>(
+    agentApplicationsKeys.memoryTable(projectId, idOrSlug, name ?? ""),
+    (client) =>
+      name
+        ? client.readAgentMemoryTable(idOrSlug, name, 100)
+        : Promise.resolve(null),
+    { enabled: !!projectId && !!idOrSlug && !!name, staleTime: 15_000 },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentRevision.ts b/packages/ui/src/features/agent-applications/hooks/useAgentRevision.ts
new file mode 100644
index 0000000000..a9b00aad1a
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentRevision.ts
@@ -0,0 +1,20 @@
+import type { AgentRevision } from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+/** Fetches a single revision (carries the agent `spec`). */
+export function useAgentRevision(
+  idOrSlug: string,
+  revisionId: string | null | undefined,
+) {
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+  return useAuthenticatedQuery<AgentRevision | null>(
+    agentApplicationsKeys.revision(projectId, idOrSlug, revisionId ?? ""),
+    (client) =>
+      revisionId
+        ? client.getAgentRevision(idOrSlug, revisionId)
+        : Promise.resolve(null),
+    { enabled: !!projectId && !!idOrSlug && !!revisionId, staleTime: 30_000 },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentRevisionBundle.ts b/packages/ui/src/features/agent-applications/hooks/useAgentRevisionBundle.ts
new file mode 100644
index 0000000000..fc5507db3b
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentRevisionBundle.ts
@@ -0,0 +1,20 @@
+import type { BundleFile } from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+/** A revision's bundle files (agent.md, skill bodies, tool sources + schemas). */
+export function useAgentRevisionBundle(
+  idOrSlug: string,
+  revisionId: string | null | undefined,
+) {
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+  return useAuthenticatedQuery<BundleFile[]>(
+    agentApplicationsKeys.bundle(projectId, idOrSlug, revisionId ?? ""),
+    (client) =>
+      revisionId
+        ? client.getAgentRevisionBundle(idOrSlug, revisionId)
+        : Promise.resolve([]),
+    { enabled: !!projectId && !!idOrSlug && !!revisionId, staleTime: 30_000 },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentRevisionLifecycle.ts b/packages/ui/src/features/agent-applications/hooks/useAgentRevisionLifecycle.ts
new file mode 100644
index 0000000000..160cf65a36
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentRevisionLifecycle.ts
@@ -0,0 +1,37 @@
+import type { AgentRevision } from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedClient } from "@posthog/ui/features/auth/authClient";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+type LifecycleAction = "freeze" | "promote" | "archive";
+
+/**
+ * Run a revision lifecycle transition (freeze / promote / archive). Promote
+ * rewrites the application's live_revision and demotes the old live, so on
+ * success we invalidate the application detail, the revisions list, and the
+ * per-revision + bundle caches.
+ */
+export function useAgentRevisionLifecycle(idOrSlug: string) {
+  const client = useAuthenticatedClient();
+  const queryClient = useQueryClient();
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+
+  return useMutation<
+    AgentRevision,
+    Error,
+    { revisionId: string; action: LifecycleAction }
+  >({
+    mutationFn: ({ revisionId, action }) =>
+      client.transitionAgentRevision(idOrSlug, revisionId, action),
+    onSuccess: () => {
+      for (const key of [
+        agentApplicationsKeys.detail(projectId, idOrSlug),
+        agentApplicationsKeys.revisions(projectId, idOrSlug),
+        ["agent-applications", "revision", projectId, idOrSlug],
+      ]) {
+        void queryClient.invalidateQueries({ queryKey: key });
+      }
+    },
+  });
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentRevisions.ts b/packages/ui/src/features/agent-applications/hooks/useAgentRevisions.ts
new file mode 100644
index 0000000000..48eef49459
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentRevisions.ts
@@ -0,0 +1,14 @@
+import type { AgentRevision } from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+/** All revisions for an agent (newest first), for the revision picker. */
+export function useAgentRevisions(idOrSlug: string) {
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+  return useAuthenticatedQuery<AgentRevision[]>(
+    agentApplicationsKeys.revisions(projectId, idOrSlug),
+    (client) => client.listAgentRevisions(idOrSlug),
+    { enabled: !!projectId && !!idOrSlug, staleTime: 30_000 },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useAgentSlackManifest.ts b/packages/ui/src/features/agent-applications/hooks/useAgentSlackManifest.ts
new file mode 100644
index 0000000000..688c40617b
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useAgentSlackManifest.ts
@@ -0,0 +1,24 @@
+import type { AgentSlackManifest } from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+import { useAuthStateValue } from "../../auth/store";
+import { agentApplicationsKeys } from "./agentApplicationsKeys";
+
+/** The Slack app manifest for a revision. `enabled` defers until the card shows. */
+export function useAgentSlackManifest(
+  idOrSlug: string,
+  revisionId: string | null | undefined,
+  enabled = true,
+) {
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+  return useAuthenticatedQuery<AgentSlackManifest | null>(
+    agentApplicationsKeys.slackManifest(projectId, idOrSlug, revisionId ?? ""),
+    (client) =>
+      revisionId
+        ? client.getAgentSlackManifest(idOrSlug, revisionId)
+        : Promise.resolve(null),
+    {
+      enabled: !!projectId && !!idOrSlug && !!revisionId && enabled,
+      staleTime: 60_000,
+    },
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useApprovalDeepLink.ts b/packages/ui/src/features/agent-applications/hooks/useApprovalDeepLink.ts
new file mode 100644
index 0000000000..cda7ad2723
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useApprovalDeepLink.ts
@@ -0,0 +1,56 @@
+import { useHostTRPC } from "@posthog/host-router/react";
+import { useAuthStateValue } from "@posthog/ui/features/auth/store";
+import { navigateToApproval } from "@posthog/ui/router/navigationBridge";
+import { logger } from "@posthog/ui/shell/logger";
+import { useQuery } from "@tanstack/react-query";
+import { useSubscription } from "@trpc/tanstack-react-query";
+import { useCallback, useEffect } from "react";
+
+const log = logger.scope("approval-deep-link");
+
+/**
+ * Hook that handles agent approval deep links (`<scheme>://approval/{requestId}`,
+ * e.g. `posthog-code://approval/ar_...` in production and `posthog-code-dev://…`
+ * in local dev) and opens the fleet approvals inbox focused on that request. The
+ * agent-runner emits these on a gated tool call so non-PostHog-Code clients
+ * (Slack, MCP) can land on the approval.
+ *
+ * Mirrors `useScoutDeepLink`: drains any link that arrived before the renderer
+ * was ready (the main process clears its pending entry on read) and also
+ * subscribes for links delivered while the app is already running.
+ */
+export function useApprovalDeepLink() {
+  const trpcReact = useHostTRPC();
+  const isAuthenticated = useAuthStateValue(
+    (s) => s.status === "authenticated",
+  );
+
+  const pendingDeepLink = useQuery(
+    trpcReact.deepLink.getPendingApprovalLink.queryOptions(undefined, {
+      enabled: isAuthenticated,
+      // Drain once per session – the main process clears its pending entry on read.
+      staleTime: Number.POSITIVE_INFINITY,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    }),
+  );
+
+  const openApproval = useCallback((requestId: string) => {
+    log.info(`Opening approval from deep link: requestId=${requestId}`);
+    navigateToApproval(requestId);
+  }, []);
+
+  useEffect(() => {
+    if (pendingDeepLink.data?.requestId) {
+      openApproval(pendingDeepLink.data.requestId);
+    }
+  }, [pendingDeepLink.data, openApproval]);
+
+  useSubscription(
+    trpcReact.deepLink.onOpenApproval.subscriptionOptions(undefined, {
+      onData: (data) => {
+        if (data?.requestId) openApproval(data.requestId);
+      },
+    }),
+  );
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useDecideAgentApproval.ts b/packages/ui/src/features/agent-applications/hooks/useDecideAgentApproval.ts
new file mode 100644
index 0000000000..bba0466149
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useDecideAgentApproval.ts
@@ -0,0 +1,51 @@
+import type {
+  AgentApprovalRequest,
+  DecideApprovalRequest,
+} from "@posthog/shared/agent-platform-types";
+import { useAuthenticatedClient } from "@posthog/ui/features/auth/authClient";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { useAuthStateValue } from "../../auth/store";
+
+interface DecideArgs {
+  approvalId: string;
+  body: DecideApprovalRequest;
+}
+
+/**
+ * Approve or reject a queued tool-approval request. On success, refetches the
+ * agent's approval lists (all state filters) so the row reflects its outcome,
+ * and fires a toast so the caller doesn't have to add post-decide UX.
+ */
+export function useDecideAgentApproval(idOrSlug: string) {
+  const client = useAuthenticatedClient();
+  const queryClient = useQueryClient();
+  const projectId = useAuthStateValue((state) => state.currentProjectId);
+
+  return useMutation<AgentApprovalRequest, Error, DecideArgs>({
+    mutationFn: ({ approvalId, body }) =>
+      client.decideAgentApproval(idOrSlug, approvalId, body),
+    onSuccess: (_data, { body }) => {
+      void queryClient.invalidateQueries({
+        queryKey: ["agent-applications", "approvals", projectId, idOrSlug],
+      });
+      if (body.decision === "approve") {
+        toast.success("Approved", {
+          description:
+            body.edited_args !== undefined
+              ? "Dispatched with edited arguments."
+              : "Dispatched to the agent.",
+        });
+      } else {
+        toast.success("Rejected", {
+          description: "The agent will see the rejection.",
+        });
+      }
+    },
+    onError: (err) => {
+      toast.error("Decision failed", {
+        description: err instanceof Error ? err.message : undefined,
+      });
+    },
+  });
+}
diff --git a/packages/ui/src/features/agent-applications/hooks/useFireAgentCron.ts b/packages/ui/src/features/agent-applications/hooks/useFireAgentCron.ts
new file mode 100644
index 0000000000..a3e5dca452
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/hooks/useFireAgentCron.ts
@@ -0,0 +1,14 @@
+import { useAuthenticatedClient } from "@posthog/ui/features/auth/authClient";
+import { useMutation } from "@tanstack/react-query";
+
+/**
+ * Fires a cron trigger out-of-band. Returns the created session id so the caller
+ * can jump straight to the run it kicked off.
+ */
+export function useFireAgentCron(idOrSlug: string, revisionId: string) {
+  const client = useAuthenticatedClient();
+  return useMutation<{ session_id: string }, Error, { cronName: string }>({
+    mutationFn: ({ cronName }) =>
+      client.fireAgentCron(idOrSlug, revisionId, cronName),
+  });
+}
diff --git a/packages/ui/src/features/agent-applications/utils/format.ts b/packages/ui/src/features/agent-applications/utils/format.ts
new file mode 100644
index 0000000000..92d9d96c57
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/utils/format.ts
@@ -0,0 +1,114 @@
+import type {
+  AgentApprovalRequestState,
+  AgentRevisionState,
+  AgentSessionState,
+} from "@posthog/shared/agent-platform-types";
+
+/** Formats a USD spend value for the fleet / agent stat strips. */
+export function formatSpendUsd(value: number | null | undefined): string {
+  if (value == null) return "$0";
+  if (value === 0) return "$0";
+  if (value < 0.01) return "<$0.01";
+  return `$${value.toLocaleString(undefined, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })}`;
+}
+
+/** Radix Badge colour for a session lifecycle state. */
+export function sessionStateColor(
+  state: AgentSessionState,
+): "green" | "blue" | "gray" | "red" | "amber" {
+  switch (state) {
+    case "running":
+      return "blue";
+    case "queued":
+      return "amber";
+    case "completed":
+    case "closed":
+      return "green";
+    case "failed":
+      return "red";
+    case "cancelled":
+      return "gray";
+    default:
+      return "gray";
+  }
+}
+
+/** Radix Badge colour for a tool-approval request state. */
+export function approvalStateColor(
+  state: AgentApprovalRequestState,
+): "green" | "blue" | "gray" | "red" | "amber" {
+  switch (state) {
+    case "queued":
+      return "amber";
+    case "approving":
+      return "blue";
+    case "dispatched":
+      return "green";
+    case "dispatched_failed":
+    case "rejected":
+      return "red";
+    default:
+      return "gray";
+  }
+}
+
+/** Human label for a tool-approval request state. */
+export function approvalStateLabel(state: AgentApprovalRequestState): string {
+  switch (state) {
+    case "dispatched":
+      return "approved";
+    case "dispatched_failed":
+      return "dispatch failed";
+    default:
+      return state;
+  }
+}
+
+/** Dot/text colour CSS var for a log level. */
+export function logLevelColor(level: string): string {
+  switch (level.toUpperCase()) {
+    case "ERROR":
+    case "FATAL":
+      return "var(--red-9)";
+    case "WARN":
+    case "WARNING":
+      return "var(--amber-9)";
+    case "INFO":
+      return "var(--blue-9)";
+    case "DEBUG":
+      return "var(--gray-7)";
+    default:
+      return "var(--gray-9)";
+  }
+}
+
+/** Compact elapsed time between two ISO timestamps (e.g. "1.2s", "3m 4s"). */
+export function formatDuration(startIso: string, endIso: string): string {
+  const ms = new Date(endIso).getTime() - new Date(startIso).getTime();
+  if (!Number.isFinite(ms) || ms < 0) return "—";
+  const s = ms / 1000;
+  if (s < 1) return `${Math.round(ms)}ms`;
+  if (s < 60) return `${s.toFixed(1)}s`;
+  const m = Math.floor(s / 60);
+  const rem = Math.round(s % 60);
+  return `${m}m ${rem}s`;
+}
+
+/** Radix Badge colour for a revision lifecycle state. */
+export function revisionStateColor(
+  state: AgentRevisionState,
+): "green" | "blue" | "gray" | "amber" {
+  switch (state) {
+    case "live":
+      return "green";
+    case "ready":
+      return "blue";
+    case "draft":
+      return "amber";
+    default:
+      return "gray";
+  }
+}
diff --git a/packages/ui/src/features/agent-applications/utils/ingress.ts b/packages/ui/src/features/agent-applications/utils/ingress.ts
new file mode 100644
index 0000000000..67da458481
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/utils/ingress.ts
@@ -0,0 +1,25 @@
+import type { CloudRegion } from "@posthog/shared";
+
+/**
+ * Resolve the agent-ingress base URL for live (streaming) calls, derived per
+ * region the same way the PostHog API base is (`getCloudUrlFromRegion`).
+ *
+ * In `dev` the backend hands out a trycloudflare quick-tunnel URL in
+ * `ingress_base_url`, and those tunnels BUFFER SSE — so `/listen` never streams
+ * incrementally through them. The local agent-ingress (localhost:3030) streams
+ * fine, so for `dev` we keep the record's `/agents/<slug>` path but point the
+ * origin at the local ingress. us/eu ingress URLs stream natively, so their
+ * (region-correct) `ingress_base_url` is used as-is.
+ */
+const LOCAL_INGRESS_ORIGIN = "http://localhost:3030";
+
+export function resolveIngressBaseUrl(
+  ingressBaseUrl: string | null | undefined,
+  region: CloudRegion | null,
+): string | null {
+  if (!ingressBaseUrl) return null;
+  if (region === "dev") {
+    return ingressBaseUrl.replace(/^https?:\/\/[^/]+/, LOCAL_INGRESS_ORIGIN);
+  }
+  return ingressBaseUrl;
+}
diff --git a/packages/ui/src/features/agent-applications/utils/observabilityLinks.ts b/packages/ui/src/features/agent-applications/utils/observabilityLinks.ts
new file mode 100644
index 0000000000..016945d81a
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/utils/observabilityLinks.ts
@@ -0,0 +1,18 @@
+import { type CloudRegion, getCloudUrlFromRegion } from "@posthog/shared";
+
+/**
+ * Deep link into the team's own AI observability product. The runner captures
+ * the agents' `$ai_*` events into that project, so the trace / generation /
+ * cost detail lives there; the observability surface shows lightweight rollups
+ * inline and links out here for depth. Returns null until region + project are
+ * both known.
+ */
+export function aiObservabilityTracesUrl(
+  region: CloudRegion | null,
+  projectId: number | null,
+): string | null {
+  if (!region || projectId == null) {
+    return null;
+  }
+  return `${getCloudUrlFromRegion(region)}/project/${projectId}/ai-observability/traces`;
+}
diff --git a/packages/ui/src/features/agent-applications/utils/triggerSecrets.ts b/packages/ui/src/features/agent-applications/utils/triggerSecrets.ts
new file mode 100644
index 0000000000..2944de5820
--- /dev/null
+++ b/packages/ui/src/features/agent-applications/utils/triggerSecrets.ts
@@ -0,0 +1,108 @@
+import type { AgentSpec } from "@posthog/shared/agent-platform-types";
+
+/**
+ * Secrets a trigger needs in encrypted_env, derived from the spec. Mirrors the
+ * agent-console `triggerSecrets.ts` (itself a mirror of the agent-shared +
+ * Django `spec_schema` source). Used to surface "missing secret" warnings on
+ * triggers/mcps alongside the spec's top-level `secrets[]`.
+ */
+
+export const SLACK_SIGNING_SECRET_KEY = "SLACK_SIGNING_SECRET";
+export const SLACK_BOT_TOKEN_KEY = "SLACK_BOT_TOKEN";
+
+export interface DerivedTriggerSecret {
+  key: string;
+  label: string;
+  description: string;
+  /** Which trigger type contributed this requirement. */
+  trigger: string;
+}
+
+function rec(v: unknown): Record<string, unknown> {
+  return v && typeof v === "object" ? (v as Record<string, unknown>) : {};
+}
+function str(v: unknown): string | undefined {
+  return typeof v === "string" ? v : undefined;
+}
+
+const SLACK_SECRETS: Omit<DerivedTriggerSecret, "trigger">[] = [
+  {
+    key: SLACK_SIGNING_SECRET_KEY,
+    label: "Slack signing secret",
+    description:
+      "Your Slack app's signing secret (Settings → Basic Information). Verifies inbound Slack event signatures.",
+  },
+  {
+    key: SLACK_BOT_TOKEN_KEY,
+    label: "Slack bot user OAuth token",
+    description:
+      "Your Slack app's bot token (xoxb-…), from Settings → Install App. Used by native Slack tools.",
+  },
+];
+
+/** A secret referenced by a webhook/jwt auth mode, or null. */
+function authModeSecret(
+  mode: unknown,
+): Omit<DerivedTriggerSecret, "trigger"> | null {
+  const m = rec(mode);
+  if (m.type === "shared_secret" && str(m.secret_ref)) {
+    return {
+      key: str(m.secret_ref) as string,
+      label: "Webhook shared secret",
+      description: `Expected value for the \`${str(m.header) ?? ""}\` header. Callers must send this exact secret.`,
+    };
+  }
+  if (m.type === "jwt" && str(m.issuer_secret_ref)) {
+    return {
+      key: str(m.issuer_secret_ref) as string,
+      label: "JWT signing secret",
+      description: "HMAC secret used to verify inbound JWT signatures.",
+    };
+  }
+  return null;
+}
+
+/** Required secrets for a single trigger (slack keys + its auth-mode secrets). */
+export function triggerRequiredSecretsFor(
+  trigger: unknown,
+): Omit<DerivedTriggerSecret, "trigger">[] {
+  const type = str(rec(trigger).type) ?? "trigger";
+  const out: Omit<DerivedTriggerSecret, "trigger">[] = [];
+  if (type === "slack") out.push(...SLACK_SECRETS);
+  const modes = rec(rec(trigger).auth).modes;
+  for (const mode of Array.isArray(modes) ? modes : []) {
+    const s = authModeSecret(mode);
+    if (s) out.push(s);
+  }
+  return out;
+}
+
+/** Per-trigger required secrets, deduped by key (first trigger wins). */
+export function getTriggerRequiredSecrets(
+  spec: AgentSpec,
+): DerivedTriggerSecret[] {
+  const triggers = Array.isArray(spec.triggers) ? spec.triggers : [];
+  const seen = new Set<string>();
+  const out: DerivedTriggerSecret[] = [];
+  const add = (
+    s: Omit<DerivedTriggerSecret, "trigger">,
+    trigger: string,
+  ): void => {
+    if (seen.has(s.key)) return;
+    seen.add(s.key);
+    out.push({ ...s, trigger });
+  };
+  for (const t of triggers) {
+    const type = str(rec(t).type) ?? "trigger";
+    if (type === "slack") {
+      for (const s of SLACK_SECRETS) add(s, type);
+    }
+    for (const mode of Array.isArray(rec(rec(t).auth).modes)
+      ? (rec(rec(t).auth).modes as unknown[])
+      : []) {
+      const s = authModeSecret(mode);
+      if (s) add(s, type);
+    }
+  }
+  return out;
+}
diff --git a/packages/ui/src/features/agents/components/AgentsTabLayout.tsx b/packages/ui/src/features/agents/components/AgentsTabLayout.tsx
new file mode 100644
index 0000000000..bbf98a66a1
--- /dev/null
+++ b/packages/ui/src/features/agents/components/AgentsTabLayout.tsx
@@ -0,0 +1,116 @@
+import { RobotIcon } from "@phosphor-icons/react";
+import { AgentBuilderHeaderControls } from "@posthog/ui/features/agent-applications/agent-builder/AgentBuilderHeaderControls";
+import type { AgentBuilderPageContext } from "@posthog/ui/features/agent-applications/agent-builder/agentBuilderStore";
+import { useSetAgentBuilderPage } from "@posthog/ui/features/agent-applications/agent-builder/useSetAgentBuilderPage";
+import { AGENT_PLATFORM_FLAG } from "@posthog/ui/features/agent-applications/featureFlag";
+import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
+import { useSetHeaderContent } from "@posthog/ui/hooks/useSetHeaderContent";
+import { Flex, Text } from "@radix-ui/themes";
+import { Link } from "@tanstack/react-router";
+import { type ReactNode, useMemo } from "react";
+
+export type AgentsTab = "scouts" | "applications";
+
+/** Per-tab header copy so the chrome describes what you're actually looking at. */
+const TAB_DESCRIPTION: Record<AgentsTab, string> = {
+  scouts:
+    "Self-driving agents that watch your project and surface work for review — enroll in the canonical fleet or author your own.",
+  applications:
+    "Your deployed agents — browse their sessions, approvals, configuration and revisions, or build and edit them with the Agent Builder.",
+};
+
+/**
+ * Shared chrome for the two top-level Agents tabs. Each tab view renders its
+ * own content inside this layout and declares which tab is active, so the
+ * header + tab bar stay identical across Scouts and Applications while detail
+ * pages (a scout, an agent, a session) keep their own focused chrome.
+ */
+export function AgentsTabLayout({
+  activeTab,
+  children,
+}: {
+  activeTab: AgentsTab;
+  children: ReactNode;
+}) {
+  const headerContent = useMemo(
+    () => (
+      <Flex align="center" gap="2" className="w-full min-w-0">
+        <RobotIcon size={12} className="shrink-0 text-gray-10" />
+        <Text
+          className="truncate whitespace-nowrap font-medium text-[13px]"
+          title="Agents"
+        >
+          Agents
+        </Text>
+      </Flex>
+    ),
+    [],
+  );
+  useSetHeaderContent(headerContent);
+  const pageContext: AgentBuilderPageContext =
+    activeTab === "applications" ? { kind: "agent-list" } : { kind: "scouts" };
+  useSetAgentBuilderPage(pageContext);
+  // The Applications tab is gated behind the agent-platform flag.
+  const applicationsEnabled = useFeatureFlag(AGENT_PLATFORM_FLAG);
+
+  return (
+    <Flex direction="column" className="h-full min-h-0">
+      <div className="cursor-default select-none border-(--gray-5) border-b px-6 pt-5">
+        <Flex align="start" justify="between" gap="4" className="pb-3.5">
+          <Flex direction="column" gap="0.5">
+            <Text className="font-bold text-[22px] text-gray-12 leading-tight tracking-tight">
+              Agents
+            </Text>
+            <Text className="max-w-3xl text-[12.5px] text-gray-11 leading-snug">
+              {applicationsEnabled
+                ? TAB_DESCRIPTION[activeTab]
+                : "Design, schedule, and deploy the agents that work on your product."}
+            </Text>
+          </Flex>
+          <AgentBuilderHeaderControls context={pageContext} />
+        </Flex>
+        <Flex gap="5" align="center">
+          <TabLink
+            to="/code/agents/scouts"
+            label="Scouts"
+            active={activeTab === "scouts"}
+          />
+          {applicationsEnabled ? (
+            <TabLink
+              to="/code/agents/applications"
+              label="Applications"
+              active={activeTab === "applications"}
+            />
+          ) : null}
+        </Flex>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-auto">
+        <div className="mx-auto max-w-4xl px-6 py-6">{children}</div>
+      </div>
+    </Flex>
+  );
+}
+
+function TabLink({
+  to,
+  label,
+  active,
+}: {
+  to: string;
+  label: string;
+  active: boolean;
+}) {
+  return (
+    <Link
+      to={to}
+      className={`-mb-px border-b-2 px-0.5 pb-2.5 text-[13px] no-underline transition-colors ${
+        active
+          ? "border-(--accent-9) font-medium text-gray-12"
+          : "border-transparent text-gray-11 hover:text-gray-12"
+      }`}
+    >
+      {label}
+    </Link>
+  );
+}
diff --git a/packages/ui/src/features/agents/components/AgentsView.tsx b/packages/ui/src/features/agents/components/AgentsView.tsx
index 83deedf8c9..2ac39fd4a6 100644
--- a/packages/ui/src/features/agents/components/AgentsView.tsx
+++ b/packages/ui/src/features/agents/components/AgentsView.tsx
@@ -1,48 +1,15 @@
-import { RobotIcon } from "@phosphor-icons/react";
 import { ConfigureAgentsSection } from "@posthog/ui/features/inbox/components/ConfigureAgentsSection";
-import { useSetHeaderContent } from "@posthog/ui/hooks/useSetHeaderContent";
-import { Flex, Text } from "@radix-ui/themes";
-import { useMemo } from "react";
+import { AgentsTabLayout } from "./AgentsTabLayout";
 
+/**
+ * The Scouts tab: the scheduled-agent / self-driving configuration that has
+ * always lived under Agents. Deployed agent applications get their own tab
+ * (see {@link AgentApplicationsListView}).
+ */
 export function AgentsView() {
-  const headerContent = useMemo(
-    () => (
-      <Flex align="center" gap="2" className="w-full min-w-0">
-        <RobotIcon size={12} className="shrink-0 text-gray-10" />
-        <Text
-          className="truncate whitespace-nowrap font-medium text-[13px]"
-          title="Agents"
-        >
-          Agents
-        </Text>
-      </Flex>
-    ),
-    [],
-  );
-
-  useSetHeaderContent(headerContent);
-
   return (
-    <Flex direction="column" className="h-full min-h-0">
-      <Flex
-        direction="column"
-        gap="0.5"
-        className="cursor-default select-none border-(--gray-5) border-b px-6 pt-5 pb-5"
-      >
-        <Text className="font-bold text-[22px] text-gray-12 leading-tight tracking-tight">
-          Agents
-        </Text>
-        <Text className="max-w-3xl text-[12.5px] text-gray-11 leading-snug">
-          Set up the agents that watch your product – which sources they read,
-          which repos they ship to, who they loop in.
-        </Text>
-      </Flex>
-
-      <div className="min-h-0 flex-1 overflow-auto">
-        <div className="mx-auto max-w-4xl px-6 py-6">
-          <ConfigureAgentsSection />
-        </div>
-      </div>
-    </Flex>
+    <AgentsTabLayout activeTab="scouts">
+      <ConfigureAgentsSection />
+    </AgentsTabLayout>
   );
 }
diff --git a/packages/ui/src/features/sessions/components/ConversationView.tsx b/packages/ui/src/features/sessions/components/ConversationView.tsx
index 7ff2371aca..5e7555281e 100644
--- a/packages/ui/src/features/sessions/components/ConversationView.tsx
+++ b/packages/ui/src/features/sessions/components/ConversationView.tsx
@@ -22,6 +22,7 @@ import {
   type ThreadGrouping,
   type ThreadRow,
 } from "@posthog/ui/features/sessions/components/new-thread/buildThreadGroups";
+import type { CollapseMode } from "@posthog/ui/features/sessions/components/new-thread/conversationThreadConfig";
 import { ToolCallGroupChip } from "@posthog/ui/features/sessions/components/new-thread/ToolCallGroupChip";
 import { SessionFooter } from "@posthog/ui/features/sessions/components/SessionFooter";
 import { QueuedMessageView } from "@posthog/ui/features/sessions/components/session-update/QueuedMessageView";
@@ -73,6 +74,18 @@ interface ConversationViewProps {
   task?: Task;
   slackThreadUrl?: string;
   compact?: boolean;
+  /**
+   * Override the global collapse setting for this view. Used by surfaces like
+   * the live-agent chat preview, where folding the agent's prose into a tool
+   * chip hides the response — they pass `"none"` to render everything inline.
+   */
+  collapseMode?: CollapseMode;
+  /**
+   * Allow horizontal scrolling of the transcript viewport. Defaults to true.
+   * Narrow surfaces (the Agent Builder dock) pass false to avoid a horizontal
+   * scrollbar from off-edge content; nested code blocks keep their own scroll.
+   */
+  scrollX?: boolean;
 }
 
 export function ConversationView({
@@ -84,6 +97,8 @@ export function ConversationView({
   task,
   slackThreadUrl,
   compact = false,
+  collapseMode: collapseModeProp,
+  scrollX = true,
 }: ConversationViewProps) {
   const diffWorkerFactory = useService<DiffWorkerFactory>(DIFF_WORKER_FACTORY);
   const diffsPoolOptions = useMemo(
@@ -100,7 +115,10 @@ export function ConversationView({
   const debugLogsCloudRuns = useSettingsStore((s) => s.debugLogsCloudRuns);
   const showDebugLogs = debugLogsCloudRuns;
 
-  const collapseMode = useSettingsStore((s) => s.conversationCollapseMode);
+  const collapseModeSetting = useSettingsStore(
+    (s) => s.conversationCollapseMode,
+  );
+  const collapseMode = collapseModeProp ?? collapseModeSetting;
   const groupOverrides = useGroupOverrides();
   const sessionViewActions = useSessionViewActions();
 
@@ -387,6 +405,7 @@ export function ConversationView({
             itemClassName="mx-auto px-2 py-1.5"
             itemStyle={{ maxWidth: CHAT_CONTENT_MAX_WIDTH }}
             footer={footer}
+            scrollX={scrollX}
           />
         </SessionTaskIdProvider>
         {showScrollButton && (
diff --git a/packages/ui/src/features/sessions/components/VirtualizedList.tsx b/packages/ui/src/features/sessions/components/VirtualizedList.tsx
index fcf6ffcdc9..1af7e529bb 100644
--- a/packages/ui/src/features/sessions/components/VirtualizedList.tsx
+++ b/packages/ui/src/features/sessions/components/VirtualizedList.tsx
@@ -22,6 +22,13 @@ interface VirtualizedListProps<T> {
   footer?: ReactNode;
   onScrollStateChange?: (isAtBottom: boolean) => void;
   keepMounted?: readonly number[];
+  /**
+   * Allow horizontal scrolling of the list viewport. Defaults to true. Narrow
+   * surfaces (e.g. the Agent Builder dock) pass false so off-edge content like
+   * a message's hover action can't produce a horizontal scrollbar; nested
+   * scrollers (code blocks) keep their own overflow.
+   */
+  scrollX?: boolean;
 }
 
 export interface VirtualizedListHandle {
@@ -47,6 +54,7 @@ function VirtualizedListInner<T>(
     footer,
     onScrollStateChange,
     keepMounted,
+    scrollX = true,
   }: VirtualizedListProps<T>,
   ref: React.ForwardedRef<VirtualizedListHandle>,
 ) {
@@ -242,7 +250,7 @@ function VirtualizedListInner<T>(
       <div
         ref={parentRef}
         onScroll={handleScroll}
-        className="scroll-mask-8 flex-1 overflow-auto"
+        className={`scroll-mask-8 flex-1 overflow-y-auto ${scrollX ? "overflow-x-auto" : "overflow-x-hidden"}`}
         style={{ scrollbarGutter: "stable" }}
       >
         <div
diff --git a/packages/ui/src/router/navigationBridge.ts b/packages/ui/src/router/navigationBridge.ts
index 331b597bca..3295692166 100644
--- a/packages/ui/src/router/navigationBridge.ts
+++ b/packages/ui/src/router/navigationBridge.ts
@@ -76,6 +76,13 @@ export function navigateToAgents(): void {
   void getRouterOrNull()?.navigate({ to: "/code/agents" });
 }
 
+export function navigateToApproval(requestId: string): void {
+  void getRouterOrNull()?.navigate({
+    to: "/code/agents/applications/approvals",
+    search: { request: requestId },
+  });
+}
+
 export function navigateToArchived(): void {
   void getRouterOrNull()?.navigate({ to: "/code/archived" });
 }
diff --git a/packages/ui/src/router/routeTree.gen.ts b/packages/ui/src/router/routeTree.gen.ts
index e7ff3eca1b..b31bdf4628 100644
--- a/packages/ui/src/router/routeTree.gen.ts
+++ b/packages/ui/src/router/routeTree.gen.ts
@@ -34,9 +34,12 @@ import { Route as CodeInboxReportsRouteImport } from './routes/code/inbox/report
 import { Route as CodeInboxPullsRouteImport } from './routes/code/inbox/pulls'
 import { Route as CodeInboxAgentsRouteImport } from './routes/code/inbox/agents'
 import { Route as CodeAgentsScoutsRouteImport } from './routes/code/agents/scouts'
+import { Route as CodeAgentsApplicationsRouteImport } from './routes/code/agents/applications'
 import { Route as CodeInboxRunsIndexRouteImport } from './routes/code/inbox/runs.index'
 import { Route as CodeInboxReportsIndexRouteImport } from './routes/code/inbox/reports.index'
 import { Route as CodeInboxPullsIndexRouteImport } from './routes/code/inbox/pulls.index'
+import { Route as CodeAgentsScoutsIndexRouteImport } from './routes/code/agents/scouts.index'
+import { Route as CodeAgentsApplicationsIndexRouteImport } from './routes/code/agents/applications/index'
 import { Route as WebsiteChannelIdTasksTaskIdRouteImport } from './routes/website/$channelId/tasks/$taskId'
 import { Route as WebsiteChannelIdDashboardsDashboardIdRouteImport } from './routes/website/$channelId/dashboards/$dashboardId'
 import { Route as CodeTasksPendingKeyRouteImport } from './routes/code/tasks/pending.$key'
@@ -44,7 +47,17 @@ import { Route as CodeInboxRunsReportIdRouteImport } from './routes/code/inbox/r
 import { Route as CodeInboxReportsReportIdRouteImport } from './routes/code/inbox/reports.$reportId'
 import { Route as CodeInboxPullsReportIdRouteImport } from './routes/code/inbox/pulls.$reportId'
 import { Route as CodeAgentsScoutsSkillNameRouteImport } from './routes/code/agents/scouts.$skillName'
+import { Route as CodeAgentsApplicationsApprovalsRouteImport } from './routes/code/agents/applications/approvals'
+import { Route as CodeAgentsApplicationsIdOrSlugRouteImport } from './routes/code/agents/applications/$idOrSlug'
 import { Route as CodeAgentsScoutsSkillNameIndexRouteImport } from './routes/code/agents/scouts.$skillName.index'
+import { Route as CodeAgentsApplicationsIdOrSlugIndexRouteImport } from './routes/code/agents/applications/$idOrSlug/index'
+import { Route as CodeAgentsApplicationsIdOrSlugObservabilityRouteImport } from './routes/code/agents/applications/$idOrSlug/observability'
+import { Route as CodeAgentsApplicationsIdOrSlugMemoryRouteImport } from './routes/code/agents/applications/$idOrSlug/memory'
+import { Route as CodeAgentsApplicationsIdOrSlugConfigurationRouteImport } from './routes/code/agents/applications/$idOrSlug/configuration'
+import { Route as CodeAgentsApplicationsIdOrSlugChatRouteImport } from './routes/code/agents/applications/$idOrSlug/chat'
+import { Route as CodeAgentsApplicationsIdOrSlugApprovalsRouteImport } from './routes/code/agents/applications/$idOrSlug/approvals'
+import { Route as CodeAgentsApplicationsIdOrSlugSessionsIndexRouteImport } from './routes/code/agents/applications/$idOrSlug/sessions.index'
+import { Route as CodeAgentsApplicationsIdOrSlugSessionsSessionIdRouteImport } from './routes/code/agents/applications/$idOrSlug/sessions.$sessionId'
 
 const WebsiteRoute = WebsiteRouteImport.update({
   id: '/website',
@@ -171,6 +184,11 @@ const CodeAgentsScoutsRoute = CodeAgentsScoutsRouteImport.update({
   path: '/scouts',
   getParentRoute: () => CodeAgentsRoute,
 } as any)
+const CodeAgentsApplicationsRoute = CodeAgentsApplicationsRouteImport.update({
+  id: '/applications',
+  path: '/applications',
+  getParentRoute: () => CodeAgentsRoute,
+} as any)
 const CodeInboxRunsIndexRoute = CodeInboxRunsIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -186,6 +204,17 @@ const CodeInboxPullsIndexRoute = CodeInboxPullsIndexRouteImport.update({
   path: '/',
   getParentRoute: () => CodeInboxPullsRoute,
 } as any)
+const CodeAgentsScoutsIndexRoute = CodeAgentsScoutsIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => CodeAgentsScoutsRoute,
+} as any)
+const CodeAgentsApplicationsIndexRoute =
+  CodeAgentsApplicationsIndexRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () => CodeAgentsApplicationsRoute,
+  } as any)
 const WebsiteChannelIdTasksTaskIdRoute =
   WebsiteChannelIdTasksTaskIdRouteImport.update({
     id: '/$channelId/tasks/$taskId',
@@ -225,12 +254,72 @@ const CodeAgentsScoutsSkillNameRoute =
     path: '/$skillName',
     getParentRoute: () => CodeAgentsScoutsRoute,
   } as any)
+const CodeAgentsApplicationsApprovalsRoute =
+  CodeAgentsApplicationsApprovalsRouteImport.update({
+    id: '/approvals',
+    path: '/approvals',
+    getParentRoute: () => CodeAgentsApplicationsRoute,
+  } as any)
+const CodeAgentsApplicationsIdOrSlugRoute =
+  CodeAgentsApplicationsIdOrSlugRouteImport.update({
+    id: '/$idOrSlug',
+    path: '/$idOrSlug',
+    getParentRoute: () => CodeAgentsApplicationsRoute,
+  } as any)
 const CodeAgentsScoutsSkillNameIndexRoute =
   CodeAgentsScoutsSkillNameIndexRouteImport.update({
     id: '/',
     path: '/',
     getParentRoute: () => CodeAgentsScoutsSkillNameRoute,
   } as any)
+const CodeAgentsApplicationsIdOrSlugIndexRoute =
+  CodeAgentsApplicationsIdOrSlugIndexRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () => CodeAgentsApplicationsIdOrSlugRoute,
+  } as any)
+const CodeAgentsApplicationsIdOrSlugObservabilityRoute =
+  CodeAgentsApplicationsIdOrSlugObservabilityRouteImport.update({
+    id: '/observability',
+    path: '/observability',
+    getParentRoute: () => CodeAgentsApplicationsIdOrSlugRoute,
+  } as any)
+const CodeAgentsApplicationsIdOrSlugMemoryRoute =
+  CodeAgentsApplicationsIdOrSlugMemoryRouteImport.update({
+    id: '/memory',
+    path: '/memory',
+    getParentRoute: () => CodeAgentsApplicationsIdOrSlugRoute,
+  } as any)
+const CodeAgentsApplicationsIdOrSlugConfigurationRoute =
+  CodeAgentsApplicationsIdOrSlugConfigurationRouteImport.update({
+    id: '/configuration',
+    path: '/configuration',
+    getParentRoute: () => CodeAgentsApplicationsIdOrSlugRoute,
+  } as any)
+const CodeAgentsApplicationsIdOrSlugChatRoute =
+  CodeAgentsApplicationsIdOrSlugChatRouteImport.update({
+    id: '/chat',
+    path: '/chat',
+    getParentRoute: () => CodeAgentsApplicationsIdOrSlugRoute,
+  } as any)
+const CodeAgentsApplicationsIdOrSlugApprovalsRoute =
+  CodeAgentsApplicationsIdOrSlugApprovalsRouteImport.update({
+    id: '/approvals',
+    path: '/approvals',
+    getParentRoute: () => CodeAgentsApplicationsIdOrSlugRoute,
+  } as any)
+const CodeAgentsApplicationsIdOrSlugSessionsIndexRoute =
+  CodeAgentsApplicationsIdOrSlugSessionsIndexRouteImport.update({
+    id: '/sessions/',
+    path: '/sessions/',
+    getParentRoute: () => CodeAgentsApplicationsIdOrSlugRoute,
+  } as any)
+const CodeAgentsApplicationsIdOrSlugSessionsSessionIdRoute =
+  CodeAgentsApplicationsIdOrSlugSessionsSessionIdRouteImport.update({
+    id: '/sessions/$sessionId',
+    path: '/sessions/$sessionId',
+    getParentRoute: () => CodeAgentsApplicationsIdOrSlugRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
@@ -247,6 +336,7 @@ export interface FileRoutesByFullPath {
   '/code/': typeof CodeIndexRoute
   '/settings/': typeof SettingsIndexRoute
   '/website/': typeof WebsiteIndexRoute
+  '/code/agents/applications': typeof CodeAgentsApplicationsRouteWithChildren
   '/code/agents/scouts': typeof CodeAgentsScoutsRouteWithChildren
   '/code/inbox/agents': typeof CodeInboxAgentsRoute
   '/code/inbox/pulls': typeof CodeInboxPullsRouteWithChildren
@@ -258,6 +348,8 @@ export interface FileRoutesByFullPath {
   '/code/agents/': typeof CodeAgentsIndexRoute
   '/code/inbox/': typeof CodeInboxIndexRoute
   '/website/$channelId/': typeof WebsiteChannelIdIndexRoute
+  '/code/agents/applications/$idOrSlug': typeof CodeAgentsApplicationsIdOrSlugRouteWithChildren
+  '/code/agents/applications/approvals': typeof CodeAgentsApplicationsApprovalsRoute
   '/code/agents/scouts/$skillName': typeof CodeAgentsScoutsSkillNameRouteWithChildren
   '/code/inbox/pulls/$reportId': typeof CodeInboxPullsReportIdRoute
   '/code/inbox/reports/$reportId': typeof CodeInboxReportsReportIdRoute
@@ -265,10 +357,20 @@ export interface FileRoutesByFullPath {
   '/code/tasks/pending/$key': typeof CodeTasksPendingKeyRoute
   '/website/$channelId/dashboards/$dashboardId': typeof WebsiteChannelIdDashboardsDashboardIdRoute
   '/website/$channelId/tasks/$taskId': typeof WebsiteChannelIdTasksTaskIdRoute
+  '/code/agents/applications/': typeof CodeAgentsApplicationsIndexRoute
+  '/code/agents/scouts/': typeof CodeAgentsScoutsIndexRoute
   '/code/inbox/pulls/': typeof CodeInboxPullsIndexRoute
   '/code/inbox/reports/': typeof CodeInboxReportsIndexRoute
   '/code/inbox/runs/': typeof CodeInboxRunsIndexRoute
+  '/code/agents/applications/$idOrSlug/approvals': typeof CodeAgentsApplicationsIdOrSlugApprovalsRoute
+  '/code/agents/applications/$idOrSlug/chat': typeof CodeAgentsApplicationsIdOrSlugChatRoute
+  '/code/agents/applications/$idOrSlug/configuration': typeof CodeAgentsApplicationsIdOrSlugConfigurationRoute
+  '/code/agents/applications/$idOrSlug/memory': typeof CodeAgentsApplicationsIdOrSlugMemoryRoute
+  '/code/agents/applications/$idOrSlug/observability': typeof CodeAgentsApplicationsIdOrSlugObservabilityRoute
+  '/code/agents/applications/$idOrSlug/': typeof CodeAgentsApplicationsIdOrSlugIndexRoute
   '/code/agents/scouts/$skillName/': typeof CodeAgentsScoutsSkillNameIndexRoute
+  '/code/agents/applications/$idOrSlug/sessions/$sessionId': typeof CodeAgentsApplicationsIdOrSlugSessionsSessionIdRoute
+  '/code/agents/applications/$idOrSlug/sessions/': typeof CodeAgentsApplicationsIdOrSlugSessionsIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -282,7 +384,6 @@ export interface FileRoutesByTo {
   '/code': typeof CodeIndexRoute
   '/settings': typeof SettingsIndexRoute
   '/website': typeof WebsiteIndexRoute
-  '/code/agents/scouts': typeof CodeAgentsScoutsRouteWithChildren
   '/code/inbox/agents': typeof CodeInboxAgentsRoute
   '/code/tasks/$taskId': typeof CodeTasksTaskIdRoute
   '/website/$channelId/context': typeof WebsiteChannelIdContextRoute
@@ -290,16 +391,27 @@ export interface FileRoutesByTo {
   '/code/agents': typeof CodeAgentsIndexRoute
   '/code/inbox': typeof CodeInboxIndexRoute
   '/website/$channelId': typeof WebsiteChannelIdIndexRoute
+  '/code/agents/applications/approvals': typeof CodeAgentsApplicationsApprovalsRoute
   '/code/inbox/pulls/$reportId': typeof CodeInboxPullsReportIdRoute
   '/code/inbox/reports/$reportId': typeof CodeInboxReportsReportIdRoute
   '/code/inbox/runs/$reportId': typeof CodeInboxRunsReportIdRoute
   '/code/tasks/pending/$key': typeof CodeTasksPendingKeyRoute
   '/website/$channelId/dashboards/$dashboardId': typeof WebsiteChannelIdDashboardsDashboardIdRoute
   '/website/$channelId/tasks/$taskId': typeof WebsiteChannelIdTasksTaskIdRoute
+  '/code/agents/applications': typeof CodeAgentsApplicationsIndexRoute
+  '/code/agents/scouts': typeof CodeAgentsScoutsIndexRoute
   '/code/inbox/pulls': typeof CodeInboxPullsIndexRoute
   '/code/inbox/reports': typeof CodeInboxReportsIndexRoute
   '/code/inbox/runs': typeof CodeInboxRunsIndexRoute
+  '/code/agents/applications/$idOrSlug/approvals': typeof CodeAgentsApplicationsIdOrSlugApprovalsRoute
+  '/code/agents/applications/$idOrSlug/chat': typeof CodeAgentsApplicationsIdOrSlugChatRoute
+  '/code/agents/applications/$idOrSlug/configuration': typeof CodeAgentsApplicationsIdOrSlugConfigurationRoute
+  '/code/agents/applications/$idOrSlug/memory': typeof CodeAgentsApplicationsIdOrSlugMemoryRoute
+  '/code/agents/applications/$idOrSlug/observability': typeof CodeAgentsApplicationsIdOrSlugObservabilityRoute
+  '/code/agents/applications/$idOrSlug': typeof CodeAgentsApplicationsIdOrSlugIndexRoute
   '/code/agents/scouts/$skillName': typeof CodeAgentsScoutsSkillNameIndexRoute
+  '/code/agents/applications/$idOrSlug/sessions/$sessionId': typeof CodeAgentsApplicationsIdOrSlugSessionsSessionIdRoute
+  '/code/agents/applications/$idOrSlug/sessions': typeof CodeAgentsApplicationsIdOrSlugSessionsIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -317,6 +429,7 @@ export interface FileRoutesById {
   '/code/': typeof CodeIndexRoute
   '/settings/': typeof SettingsIndexRoute
   '/website/': typeof WebsiteIndexRoute
+  '/code/agents/applications': typeof CodeAgentsApplicationsRouteWithChildren
   '/code/agents/scouts': typeof CodeAgentsScoutsRouteWithChildren
   '/code/inbox/agents': typeof CodeInboxAgentsRoute
   '/code/inbox/pulls': typeof CodeInboxPullsRouteWithChildren
@@ -328,6 +441,8 @@ export interface FileRoutesById {
   '/code/agents/': typeof CodeAgentsIndexRoute
   '/code/inbox/': typeof CodeInboxIndexRoute
   '/website/$channelId/': typeof WebsiteChannelIdIndexRoute
+  '/code/agents/applications/$idOrSlug': typeof CodeAgentsApplicationsIdOrSlugRouteWithChildren
+  '/code/agents/applications/approvals': typeof CodeAgentsApplicationsApprovalsRoute
   '/code/agents/scouts/$skillName': typeof CodeAgentsScoutsSkillNameRouteWithChildren
   '/code/inbox/pulls/$reportId': typeof CodeInboxPullsReportIdRoute
   '/code/inbox/reports/$reportId': typeof CodeInboxReportsReportIdRoute
@@ -335,10 +450,20 @@ export interface FileRoutesById {
   '/code/tasks/pending/$key': typeof CodeTasksPendingKeyRoute
   '/website/$channelId/dashboards/$dashboardId': typeof WebsiteChannelIdDashboardsDashboardIdRoute
   '/website/$channelId/tasks/$taskId': typeof WebsiteChannelIdTasksTaskIdRoute
+  '/code/agents/applications/': typeof CodeAgentsApplicationsIndexRoute
+  '/code/agents/scouts/': typeof CodeAgentsScoutsIndexRoute
   '/code/inbox/pulls/': typeof CodeInboxPullsIndexRoute
   '/code/inbox/reports/': typeof CodeInboxReportsIndexRoute
   '/code/inbox/runs/': typeof CodeInboxRunsIndexRoute
+  '/code/agents/applications/$idOrSlug/approvals': typeof CodeAgentsApplicationsIdOrSlugApprovalsRoute
+  '/code/agents/applications/$idOrSlug/chat': typeof CodeAgentsApplicationsIdOrSlugChatRoute
+  '/code/agents/applications/$idOrSlug/configuration': typeof CodeAgentsApplicationsIdOrSlugConfigurationRoute
+  '/code/agents/applications/$idOrSlug/memory': typeof CodeAgentsApplicationsIdOrSlugMemoryRoute
+  '/code/agents/applications/$idOrSlug/observability': typeof CodeAgentsApplicationsIdOrSlugObservabilityRoute
+  '/code/agents/applications/$idOrSlug/': typeof CodeAgentsApplicationsIdOrSlugIndexRoute
   '/code/agents/scouts/$skillName/': typeof CodeAgentsScoutsSkillNameIndexRoute
+  '/code/agents/applications/$idOrSlug/sessions/$sessionId': typeof CodeAgentsApplicationsIdOrSlugSessionsSessionIdRoute
+  '/code/agents/applications/$idOrSlug/sessions/': typeof CodeAgentsApplicationsIdOrSlugSessionsIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -357,6 +482,7 @@ export interface FileRouteTypes {
     | '/code/'
     | '/settings/'
     | '/website/'
+    | '/code/agents/applications'
     | '/code/agents/scouts'
     | '/code/inbox/agents'
     | '/code/inbox/pulls'
@@ -368,6 +494,8 @@ export interface FileRouteTypes {
     | '/code/agents/'
     | '/code/inbox/'
     | '/website/$channelId/'
+    | '/code/agents/applications/$idOrSlug'
+    | '/code/agents/applications/approvals'
     | '/code/agents/scouts/$skillName'
     | '/code/inbox/pulls/$reportId'
     | '/code/inbox/reports/$reportId'
@@ -375,10 +503,20 @@ export interface FileRouteTypes {
     | '/code/tasks/pending/$key'
     | '/website/$channelId/dashboards/$dashboardId'
     | '/website/$channelId/tasks/$taskId'
+    | '/code/agents/applications/'
+    | '/code/agents/scouts/'
     | '/code/inbox/pulls/'
     | '/code/inbox/reports/'
     | '/code/inbox/runs/'
+    | '/code/agents/applications/$idOrSlug/approvals'
+    | '/code/agents/applications/$idOrSlug/chat'
+    | '/code/agents/applications/$idOrSlug/configuration'
+    | '/code/agents/applications/$idOrSlug/memory'
+    | '/code/agents/applications/$idOrSlug/observability'
+    | '/code/agents/applications/$idOrSlug/'
     | '/code/agents/scouts/$skillName/'
+    | '/code/agents/applications/$idOrSlug/sessions/$sessionId'
+    | '/code/agents/applications/$idOrSlug/sessions/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -392,7 +530,6 @@ export interface FileRouteTypes {
     | '/code'
     | '/settings'
     | '/website'
-    | '/code/agents/scouts'
     | '/code/inbox/agents'
     | '/code/tasks/$taskId'
     | '/website/$channelId/context'
@@ -400,16 +537,27 @@ export interface FileRouteTypes {
     | '/code/agents'
     | '/code/inbox'
     | '/website/$channelId'
+    | '/code/agents/applications/approvals'
     | '/code/inbox/pulls/$reportId'
     | '/code/inbox/reports/$reportId'
     | '/code/inbox/runs/$reportId'
     | '/code/tasks/pending/$key'
     | '/website/$channelId/dashboards/$dashboardId'
     | '/website/$channelId/tasks/$taskId'
+    | '/code/agents/applications'
+    | '/code/agents/scouts'
     | '/code/inbox/pulls'
     | '/code/inbox/reports'
     | '/code/inbox/runs'
+    | '/code/agents/applications/$idOrSlug/approvals'
+    | '/code/agents/applications/$idOrSlug/chat'
+    | '/code/agents/applications/$idOrSlug/configuration'
+    | '/code/agents/applications/$idOrSlug/memory'
+    | '/code/agents/applications/$idOrSlug/observability'
+    | '/code/agents/applications/$idOrSlug'
     | '/code/agents/scouts/$skillName'
+    | '/code/agents/applications/$idOrSlug/sessions/$sessionId'
+    | '/code/agents/applications/$idOrSlug/sessions'
   id:
     | '__root__'
     | '/'
@@ -426,6 +574,7 @@ export interface FileRouteTypes {
     | '/code/'
     | '/settings/'
     | '/website/'
+    | '/code/agents/applications'
     | '/code/agents/scouts'
     | '/code/inbox/agents'
     | '/code/inbox/pulls'
@@ -437,6 +586,8 @@ export interface FileRouteTypes {
     | '/code/agents/'
     | '/code/inbox/'
     | '/website/$channelId/'
+    | '/code/agents/applications/$idOrSlug'
+    | '/code/agents/applications/approvals'
     | '/code/agents/scouts/$skillName'
     | '/code/inbox/pulls/$reportId'
     | '/code/inbox/reports/$reportId'
@@ -444,10 +595,20 @@ export interface FileRouteTypes {
     | '/code/tasks/pending/$key'
     | '/website/$channelId/dashboards/$dashboardId'
     | '/website/$channelId/tasks/$taskId'
+    | '/code/agents/applications/'
+    | '/code/agents/scouts/'
     | '/code/inbox/pulls/'
     | '/code/inbox/reports/'
     | '/code/inbox/runs/'
+    | '/code/agents/applications/$idOrSlug/approvals'
+    | '/code/agents/applications/$idOrSlug/chat'
+    | '/code/agents/applications/$idOrSlug/configuration'
+    | '/code/agents/applications/$idOrSlug/memory'
+    | '/code/agents/applications/$idOrSlug/observability'
+    | '/code/agents/applications/$idOrSlug/'
     | '/code/agents/scouts/$skillName/'
+    | '/code/agents/applications/$idOrSlug/sessions/$sessionId'
+    | '/code/agents/applications/$idOrSlug/sessions/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -645,6 +806,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof CodeAgentsScoutsRouteImport
       parentRoute: typeof CodeAgentsRoute
     }
+    '/code/agents/applications': {
+      id: '/code/agents/applications'
+      path: '/applications'
+      fullPath: '/code/agents/applications'
+      preLoaderRoute: typeof CodeAgentsApplicationsRouteImport
+      parentRoute: typeof CodeAgentsRoute
+    }
     '/code/inbox/runs/': {
       id: '/code/inbox/runs/'
       path: '/'
@@ -666,6 +834,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof CodeInboxPullsIndexRouteImport
       parentRoute: typeof CodeInboxPullsRoute
     }
+    '/code/agents/scouts/': {
+      id: '/code/agents/scouts/'
+      path: '/'
+      fullPath: '/code/agents/scouts/'
+      preLoaderRoute: typeof CodeAgentsScoutsIndexRouteImport
+      parentRoute: typeof CodeAgentsScoutsRoute
+    }
+    '/code/agents/applications/': {
+      id: '/code/agents/applications/'
+      path: '/'
+      fullPath: '/code/agents/applications/'
+      preLoaderRoute: typeof CodeAgentsApplicationsIndexRouteImport
+      parentRoute: typeof CodeAgentsApplicationsRoute
+    }
     '/website/$channelId/tasks/$taskId': {
       id: '/website/$channelId/tasks/$taskId'
       path: '/$channelId/tasks/$taskId'
@@ -715,6 +897,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof CodeAgentsScoutsSkillNameRouteImport
       parentRoute: typeof CodeAgentsScoutsRoute
     }
+    '/code/agents/applications/approvals': {
+      id: '/code/agents/applications/approvals'
+      path: '/approvals'
+      fullPath: '/code/agents/applications/approvals'
+      preLoaderRoute: typeof CodeAgentsApplicationsApprovalsRouteImport
+      parentRoute: typeof CodeAgentsApplicationsRoute
+    }
+    '/code/agents/applications/$idOrSlug': {
+      id: '/code/agents/applications/$idOrSlug'
+      path: '/$idOrSlug'
+      fullPath: '/code/agents/applications/$idOrSlug'
+      preLoaderRoute: typeof CodeAgentsApplicationsIdOrSlugRouteImport
+      parentRoute: typeof CodeAgentsApplicationsRoute
+    }
     '/code/agents/scouts/$skillName/': {
       id: '/code/agents/scouts/$skillName/'
       path: '/'
@@ -722,6 +918,62 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof CodeAgentsScoutsSkillNameIndexRouteImport
       parentRoute: typeof CodeAgentsScoutsSkillNameRoute
     }
+    '/code/agents/applications/$idOrSlug/': {
+      id: '/code/agents/applications/$idOrSlug/'
+      path: '/'
+      fullPath: '/code/agents/applications/$idOrSlug/'
+      preLoaderRoute: typeof CodeAgentsApplicationsIdOrSlugIndexRouteImport
+      parentRoute: typeof CodeAgentsApplicationsIdOrSlugRoute
+    }
+    '/code/agents/applications/$idOrSlug/observability': {
+      id: '/code/agents/applications/$idOrSlug/observability'
+      path: '/observability'
+      fullPath: '/code/agents/applications/$idOrSlug/observability'
+      preLoaderRoute: typeof CodeAgentsApplicationsIdOrSlugObservabilityRouteImport
+      parentRoute: typeof CodeAgentsApplicationsIdOrSlugRoute
+    }
+    '/code/agents/applications/$idOrSlug/memory': {
+      id: '/code/agents/applications/$idOrSlug/memory'
+      path: '/memory'
+      fullPath: '/code/agents/applications/$idOrSlug/memory'
+      preLoaderRoute: typeof CodeAgentsApplicationsIdOrSlugMemoryRouteImport
+      parentRoute: typeof CodeAgentsApplicationsIdOrSlugRoute
+    }
+    '/code/agents/applications/$idOrSlug/configuration': {
+      id: '/code/agents/applications/$idOrSlug/configuration'
+      path: '/configuration'
+      fullPath: '/code/agents/applications/$idOrSlug/configuration'
+      preLoaderRoute: typeof CodeAgentsApplicationsIdOrSlugConfigurationRouteImport
+      parentRoute: typeof CodeAgentsApplicationsIdOrSlugRoute
+    }
+    '/code/agents/applications/$idOrSlug/chat': {
+      id: '/code/agents/applications/$idOrSlug/chat'
+      path: '/chat'
+      fullPath: '/code/agents/applications/$idOrSlug/chat'
+      preLoaderRoute: typeof CodeAgentsApplicationsIdOrSlugChatRouteImport
+      parentRoute: typeof CodeAgentsApplicationsIdOrSlugRoute
+    }
+    '/code/agents/applications/$idOrSlug/approvals': {
+      id: '/code/agents/applications/$idOrSlug/approvals'
+      path: '/approvals'
+      fullPath: '/code/agents/applications/$idOrSlug/approvals'
+      preLoaderRoute: typeof CodeAgentsApplicationsIdOrSlugApprovalsRouteImport
+      parentRoute: typeof CodeAgentsApplicationsIdOrSlugRoute
+    }
+    '/code/agents/applications/$idOrSlug/sessions/': {
+      id: '/code/agents/applications/$idOrSlug/sessions/'
+      path: '/sessions'
+      fullPath: '/code/agents/applications/$idOrSlug/sessions/'
+      preLoaderRoute: typeof CodeAgentsApplicationsIdOrSlugSessionsIndexRouteImport
+      parentRoute: typeof CodeAgentsApplicationsIdOrSlugRoute
+    }
+    '/code/agents/applications/$idOrSlug/sessions/$sessionId': {
+      id: '/code/agents/applications/$idOrSlug/sessions/$sessionId'
+      path: '/sessions/$sessionId'
+      fullPath: '/code/agents/applications/$idOrSlug/sessions/$sessionId'
+      preLoaderRoute: typeof CodeAgentsApplicationsIdOrSlugSessionsSessionIdRouteImport
+      parentRoute: typeof CodeAgentsApplicationsIdOrSlugRoute
+    }
   }
 }
 
@@ -747,6 +999,61 @@ const WebsiteRouteChildren: WebsiteRouteChildren = {
 const WebsiteRouteWithChildren =
   WebsiteRoute._addFileChildren(WebsiteRouteChildren)
 
+interface CodeAgentsApplicationsIdOrSlugRouteChildren {
+  CodeAgentsApplicationsIdOrSlugApprovalsRoute: typeof CodeAgentsApplicationsIdOrSlugApprovalsRoute
+  CodeAgentsApplicationsIdOrSlugChatRoute: typeof CodeAgentsApplicationsIdOrSlugChatRoute
+  CodeAgentsApplicationsIdOrSlugConfigurationRoute: typeof CodeAgentsApplicationsIdOrSlugConfigurationRoute
+  CodeAgentsApplicationsIdOrSlugMemoryRoute: typeof CodeAgentsApplicationsIdOrSlugMemoryRoute
+  CodeAgentsApplicationsIdOrSlugObservabilityRoute: typeof CodeAgentsApplicationsIdOrSlugObservabilityRoute
+  CodeAgentsApplicationsIdOrSlugIndexRoute: typeof CodeAgentsApplicationsIdOrSlugIndexRoute
+  CodeAgentsApplicationsIdOrSlugSessionsSessionIdRoute: typeof CodeAgentsApplicationsIdOrSlugSessionsSessionIdRoute
+  CodeAgentsApplicationsIdOrSlugSessionsIndexRoute: typeof CodeAgentsApplicationsIdOrSlugSessionsIndexRoute
+}
+
+const CodeAgentsApplicationsIdOrSlugRouteChildren: CodeAgentsApplicationsIdOrSlugRouteChildren =
+  {
+    CodeAgentsApplicationsIdOrSlugApprovalsRoute:
+      CodeAgentsApplicationsIdOrSlugApprovalsRoute,
+    CodeAgentsApplicationsIdOrSlugChatRoute:
+      CodeAgentsApplicationsIdOrSlugChatRoute,
+    CodeAgentsApplicationsIdOrSlugConfigurationRoute:
+      CodeAgentsApplicationsIdOrSlugConfigurationRoute,
+    CodeAgentsApplicationsIdOrSlugMemoryRoute:
+      CodeAgentsApplicationsIdOrSlugMemoryRoute,
+    CodeAgentsApplicationsIdOrSlugObservabilityRoute:
+      CodeAgentsApplicationsIdOrSlugObservabilityRoute,
+    CodeAgentsApplicationsIdOrSlugIndexRoute:
+      CodeAgentsApplicationsIdOrSlugIndexRoute,
+    CodeAgentsApplicationsIdOrSlugSessionsSessionIdRoute:
+      CodeAgentsApplicationsIdOrSlugSessionsSessionIdRoute,
+    CodeAgentsApplicationsIdOrSlugSessionsIndexRoute:
+      CodeAgentsApplicationsIdOrSlugSessionsIndexRoute,
+  }
+
+const CodeAgentsApplicationsIdOrSlugRouteWithChildren =
+  CodeAgentsApplicationsIdOrSlugRoute._addFileChildren(
+    CodeAgentsApplicationsIdOrSlugRouteChildren,
+  )
+
+interface CodeAgentsApplicationsRouteChildren {
+  CodeAgentsApplicationsIdOrSlugRoute: typeof CodeAgentsApplicationsIdOrSlugRouteWithChildren
+  CodeAgentsApplicationsApprovalsRoute: typeof CodeAgentsApplicationsApprovalsRoute
+  CodeAgentsApplicationsIndexRoute: typeof CodeAgentsApplicationsIndexRoute
+}
+
+const CodeAgentsApplicationsRouteChildren: CodeAgentsApplicationsRouteChildren =
+  {
+    CodeAgentsApplicationsIdOrSlugRoute:
+      CodeAgentsApplicationsIdOrSlugRouteWithChildren,
+    CodeAgentsApplicationsApprovalsRoute: CodeAgentsApplicationsApprovalsRoute,
+    CodeAgentsApplicationsIndexRoute: CodeAgentsApplicationsIndexRoute,
+  }
+
+const CodeAgentsApplicationsRouteWithChildren =
+  CodeAgentsApplicationsRoute._addFileChildren(
+    CodeAgentsApplicationsRouteChildren,
+  )
+
 interface CodeAgentsScoutsSkillNameRouteChildren {
   CodeAgentsScoutsSkillNameIndexRoute: typeof CodeAgentsScoutsSkillNameIndexRoute
 }
@@ -763,21 +1070,25 @@ const CodeAgentsScoutsSkillNameRouteWithChildren =
 
 interface CodeAgentsScoutsRouteChildren {
   CodeAgentsScoutsSkillNameRoute: typeof CodeAgentsScoutsSkillNameRouteWithChildren
+  CodeAgentsScoutsIndexRoute: typeof CodeAgentsScoutsIndexRoute
 }
 
 const CodeAgentsScoutsRouteChildren: CodeAgentsScoutsRouteChildren = {
   CodeAgentsScoutsSkillNameRoute: CodeAgentsScoutsSkillNameRouteWithChildren,
+  CodeAgentsScoutsIndexRoute: CodeAgentsScoutsIndexRoute,
 }
 
 const CodeAgentsScoutsRouteWithChildren =
   CodeAgentsScoutsRoute._addFileChildren(CodeAgentsScoutsRouteChildren)
 
 interface CodeAgentsRouteChildren {
+  CodeAgentsApplicationsRoute: typeof CodeAgentsApplicationsRouteWithChildren
   CodeAgentsScoutsRoute: typeof CodeAgentsScoutsRouteWithChildren
   CodeAgentsIndexRoute: typeof CodeAgentsIndexRoute
 }
 
 const CodeAgentsRouteChildren: CodeAgentsRouteChildren = {
+  CodeAgentsApplicationsRoute: CodeAgentsApplicationsRouteWithChildren,
   CodeAgentsScoutsRoute: CodeAgentsScoutsRouteWithChildren,
   CodeAgentsIndexRoute: CodeAgentsIndexRoute,
 }
diff --git a/packages/ui/src/router/routes/__root.tsx b/packages/ui/src/router/routes/__root.tsx
index 799c4df731..0d9c5d1acc 100644
--- a/packages/ui/src/router/routes/__root.tsx
+++ b/packages/ui/src/router/routes/__root.tsx
@@ -5,6 +5,7 @@ import {
   PROJECT_BLUEBIRD_FLAG,
   SYNC_CLOUD_TASKS_FLAG,
 } from "@posthog/shared";
+import { useApprovalDeepLink } from "@posthog/ui/features/agent-applications/hooks/useApprovalDeepLink";
 import { UsageLimitModal } from "@posthog/ui/features/billing/UsageLimitModal";
 import { AppNav } from "@posthog/ui/features/canvas/components/AppNav";
 import { ChannelsList } from "@posthog/ui/features/canvas/components/ChannelsList";
@@ -116,6 +117,7 @@ function RootLayout() {
   useTaskDeepLink();
   useInboxDeepLink();
   useScoutDeepLink();
+  useApprovalDeepLink();
   useSetupDiscovery();
   useNewTaskDeepLink();
 
diff --git a/packages/ui/src/router/routes/code/agents.tsx b/packages/ui/src/router/routes/code/agents.tsx
index f939a23a97..864701b44c 100644
--- a/packages/ui/src/router/routes/code/agents.tsx
+++ b/packages/ui/src/router/routes/code/agents.tsx
@@ -1,5 +1,14 @@
+import { AgentBuilderDockLayout } from "@posthog/ui/features/agent-applications/agent-builder/AgentBuilderDockLayout";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/code/agents")({
-  component: Outlet,
+  component: AgentsLayout,
 });
+
+function AgentsLayout() {
+  return (
+    <AgentBuilderDockLayout>
+      <Outlet />
+    </AgentBuilderDockLayout>
+  );
+}
diff --git a/packages/ui/src/router/routes/code/agents/applications.tsx b/packages/ui/src/router/routes/code/agents/applications.tsx
new file mode 100644
index 0000000000..0a3df8d4d8
--- /dev/null
+++ b/packages/ui/src/router/routes/code/agents/applications.tsx
@@ -0,0 +1,27 @@
+import { AGENT_PLATFORM_FLAG } from "@posthog/ui/features/agent-applications/featureFlag";
+import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
+import { Flex, Text } from "@radix-ui/themes";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/code/agents/applications")({
+  component: ApplicationsGate,
+});
+
+/**
+ * Gates the entire Applications surface (list + per-agent detail) behind the
+ * `agent-platform` flag. When disabled the tab is also hidden from the agents
+ * chrome; direct navigation here lands on this placeholder.
+ */
+function ApplicationsGate() {
+  const enabled = useFeatureFlag(AGENT_PLATFORM_FLAG);
+  if (!enabled) {
+    return (
+      <Flex align="center" justify="center" className="h-full min-h-0 p-6">
+        <Text className="max-w-sm text-center text-[13px] text-gray-10 leading-snug">
+          Agent applications aren't available yet.
+        </Text>
+      </Flex>
+    );
+  }
+  return <Outlet />;
+}
diff --git a/packages/ui/src/router/routes/code/agents/applications/$idOrSlug.tsx b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug.tsx
new file mode 100644
index 0000000000..1a2e3a3ca8
--- /dev/null
+++ b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/code/agents/applications/$idOrSlug")({
+  component: Outlet,
+});
diff --git a/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/approvals.tsx b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/approvals.tsx
new file mode 100644
index 0000000000..e8abd23fa2
--- /dev/null
+++ b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/approvals.tsx
@@ -0,0 +1,36 @@
+import {
+  AgentApprovalsPane,
+  type ApprovalFilter,
+} from "@posthog/ui/features/agent-applications/components/AgentApprovalsPane";
+import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+
+export const Route = createFileRoute(
+  "/code/agents/applications/$idOrSlug/approvals",
+)({
+  validateSearch: (search: Record<string, unknown>): { request?: string } => ({
+    request: typeof search.request === "string" ? search.request : undefined,
+  }),
+  component: AgentApprovalsRoute,
+});
+
+function AgentApprovalsRoute() {
+  const { idOrSlug } = Route.useParams();
+  const { request } = Route.useSearch();
+  const navigate = Route.useNavigate();
+  const [filter, setFilter] = useState<ApprovalFilter>("queued");
+
+  return (
+    <AgentApprovalsPane
+      idOrSlug={idOrSlug}
+      selectedId={request ?? null}
+      onSelect={(id) =>
+        navigate({
+          search: (prev) => ({ ...prev, request: id ?? undefined }),
+        })
+      }
+      filter={filter}
+      onFilterChange={setFilter}
+    />
+  );
+}
diff --git a/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/chat.tsx b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/chat.tsx
new file mode 100644
index 0000000000..279de69cf4
--- /dev/null
+++ b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/chat.tsx
@@ -0,0 +1,13 @@
+import { AgentChatPane } from "@posthog/ui/features/agent-applications/components/AgentChatPane";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute(
+  "/code/agents/applications/$idOrSlug/chat",
+)({
+  component: AgentChatRoute,
+});
+
+function AgentChatRoute() {
+  const { idOrSlug } = Route.useParams();
+  return <AgentChatPane idOrSlug={idOrSlug} />;
+}
diff --git a/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/configuration.tsx b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/configuration.tsx
new file mode 100644
index 0000000000..876947fd66
--- /dev/null
+++ b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/configuration.tsx
@@ -0,0 +1,40 @@
+import { AgentConfigurationPane } from "@posthog/ui/features/agent-applications/components/AgentConfigurationPane";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute(
+  "/code/agents/applications/$idOrSlug/configuration",
+)({
+  validateSearch: (
+    search: Record<string, unknown>,
+  ): { node?: string; revision?: string } => ({
+    node: typeof search.node === "string" ? search.node : undefined,
+    revision: typeof search.revision === "string" ? search.revision : undefined,
+  }),
+  component: AgentConfigurationRoute,
+});
+
+function AgentConfigurationRoute() {
+  const { idOrSlug } = Route.useParams();
+  const { node, revision } = Route.useSearch();
+  const navigate = Route.useNavigate();
+
+  return (
+    <AgentConfigurationPane
+      idOrSlug={idOrSlug}
+      selectedNode={node ?? null}
+      onSelectNode={(next) =>
+        navigate({ search: (prev) => ({ ...prev, node: next }) })
+      }
+      selectedRevisionId={revision ?? null}
+      onSelectRevision={(revisionId) =>
+        navigate({ search: (prev) => ({ ...prev, revision: revisionId }) })
+      }
+      onOpenSession={(sessionId) =>
+        navigate({
+          to: "/code/agents/applications/$idOrSlug/sessions/$sessionId",
+          params: { idOrSlug, sessionId },
+        })
+      }
+    />
+  );
+}
diff --git a/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/index.tsx b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/index.tsx
new file mode 100644
index 0000000000..1bf4568855
--- /dev/null
+++ b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/index.tsx
@@ -0,0 +1,11 @@
+import { AgentApplicationDetailView } from "@posthog/ui/features/agent-applications/components/AgentApplicationDetailView";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/code/agents/applications/$idOrSlug/")({
+  component: AgentApplicationDetailRoute,
+});
+
+function AgentApplicationDetailRoute() {
+  const { idOrSlug } = Route.useParams();
+  return <AgentApplicationDetailView idOrSlug={idOrSlug} />;
+}
diff --git a/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/memory.tsx b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/memory.tsx
new file mode 100644
index 0000000000..532e642ac8
--- /dev/null
+++ b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/memory.tsx
@@ -0,0 +1,13 @@
+import { AgentMemoryPane } from "@posthog/ui/features/agent-applications/components/AgentMemoryPane";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute(
+  "/code/agents/applications/$idOrSlug/memory",
+)({
+  component: AgentMemoryRoute,
+});
+
+function AgentMemoryRoute() {
+  const { idOrSlug } = Route.useParams();
+  return <AgentMemoryPane idOrSlug={idOrSlug} />;
+}
diff --git a/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/observability.tsx b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/observability.tsx
new file mode 100644
index 0000000000..366810ad55
--- /dev/null
+++ b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/observability.tsx
@@ -0,0 +1,13 @@
+import { AgentObservabilityPane } from "@posthog/ui/features/agent-applications/components/AgentObservabilityPane";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute(
+  "/code/agents/applications/$idOrSlug/observability",
+)({
+  component: AgentObservabilityRoute,
+});
+
+function AgentObservabilityRoute() {
+  const { idOrSlug } = Route.useParams();
+  return <AgentObservabilityPane idOrSlug={idOrSlug} />;
+}
diff --git a/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/sessions.$sessionId.tsx b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/sessions.$sessionId.tsx
new file mode 100644
index 0000000000..b4fbd0a872
--- /dev/null
+++ b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/sessions.$sessionId.tsx
@@ -0,0 +1,15 @@
+import { AgentSessionTranscriptView } from "@posthog/ui/features/agent-applications/components/AgentSessionTranscriptView";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute(
+  "/code/agents/applications/$idOrSlug/sessions/$sessionId",
+)({
+  component: AgentSessionRoute,
+});
+
+function AgentSessionRoute() {
+  const { idOrSlug, sessionId } = Route.useParams();
+  return (
+    <AgentSessionTranscriptView idOrSlug={idOrSlug} sessionId={sessionId} />
+  );
+}
diff --git a/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/sessions.index.tsx b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/sessions.index.tsx
new file mode 100644
index 0000000000..21fd1618a9
--- /dev/null
+++ b/packages/ui/src/router/routes/code/agents/applications/$idOrSlug/sessions.index.tsx
@@ -0,0 +1,13 @@
+import { AgentSessionsPane } from "@posthog/ui/features/agent-applications/components/AgentSessionsPane";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute(
+  "/code/agents/applications/$idOrSlug/sessions/",
+)({
+  component: AgentSessionsRoute,
+});
+
+function AgentSessionsRoute() {
+  const { idOrSlug } = Route.useParams();
+  return <AgentSessionsPane idOrSlug={idOrSlug} />;
+}
diff --git a/packages/ui/src/router/routes/code/agents/applications/approvals.tsx b/packages/ui/src/router/routes/code/agents/applications/approvals.tsx
new file mode 100644
index 0000000000..1618c9c72f
--- /dev/null
+++ b/packages/ui/src/router/routes/code/agents/applications/approvals.tsx
@@ -0,0 +1,30 @@
+import { AgentFleetApprovalsPane } from "@posthog/ui/features/agent-applications/components/AgentFleetApprovalsPane";
+import type { ApprovalFilter } from "@posthog/ui/features/agent-applications/components/agentApprovalsFilters";
+import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+
+export const Route = createFileRoute("/code/agents/applications/approvals")({
+  validateSearch: (search: Record<string, unknown>): { request?: string } => ({
+    request: typeof search.request === "string" ? search.request : undefined,
+  }),
+  component: AgentFleetApprovalsRoute,
+});
+
+function AgentFleetApprovalsRoute() {
+  const { request } = Route.useSearch();
+  const navigate = Route.useNavigate();
+  const [filter, setFilter] = useState<ApprovalFilter>("queued");
+
+  return (
+    <AgentFleetApprovalsPane
+      selectedId={request ?? null}
+      onSelect={(id) =>
+        navigate({
+          search: (prev) => ({ ...prev, request: id ?? undefined }),
+        })
+      }
+      filter={filter}
+      onFilterChange={setFilter}
+    />
+  );
+}
diff --git a/packages/ui/src/router/routes/code/agents/applications/index.tsx b/packages/ui/src/router/routes/code/agents/applications/index.tsx
new file mode 100644
index 0000000000..01ee652e95
--- /dev/null
+++ b/packages/ui/src/router/routes/code/agents/applications/index.tsx
@@ -0,0 +1,6 @@
+import { AgentApplicationsListView } from "@posthog/ui/features/agent-applications/components/AgentApplicationsListView";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/code/agents/applications/")({
+  component: AgentApplicationsListView,
+});
diff --git a/packages/ui/src/router/routes/code/agents/index.tsx b/packages/ui/src/router/routes/code/agents/index.tsx
index fdbb6fce39..32120558f2 100644
--- a/packages/ui/src/router/routes/code/agents/index.tsx
+++ b/packages/ui/src/router/routes/code/agents/index.tsx
@@ -1,6 +1,7 @@
-import { AgentsView } from "@posthog/ui/features/agents/components/AgentsView";
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/code/agents/")({
-  component: AgentsView,
+  beforeLoad: () => {
+    throw redirect({ to: "/code/agents/scouts" });
+  },
 });
diff --git a/packages/ui/src/router/routes/code/agents/scouts.index.tsx b/packages/ui/src/router/routes/code/agents/scouts.index.tsx
new file mode 100644
index 0000000000..f7d9a69b90
--- /dev/null
+++ b/packages/ui/src/router/routes/code/agents/scouts.index.tsx
@@ -0,0 +1,6 @@
+import { AgentsView } from "@posthog/ui/features/agents/components/AgentsView";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/code/agents/scouts/")({
+  component: AgentsView,
+});
diff --git a/packages/ui/src/shell/posthogAnalyticsImpl.ts b/packages/ui/src/shell/posthogAnalyticsImpl.ts
index e4ddbada6d..10d62b6da0 100644
--- a/packages/ui/src/shell/posthogAnalyticsImpl.ts
+++ b/packages/ui/src/shell/posthogAnalyticsImpl.ts
@@ -77,6 +77,14 @@ export function initializePostHog(sessionId?: string) {
 
   isInitialized = true;
 
+  // Dev-only: expose the posthog instance so flags can be toggled from the
+  // renderer console, e.g. `posthog.featureFlags.override({ "agent-platform": true })`
+  // (and `posthog.featureFlags.override(false)` to clear). The module build
+  // doesn't attach to window otherwise.
+  if (import.meta.env.DEV) {
+    (window as unknown as { posthog?: typeof posthog }).posthog = posthog;
+  }
+
   registerPersistentSuperProperties();
 
   for (const listener of pendingFlagListeners) {
diff --git a/scripts/use-local-posthog.mjs b/scripts/use-local-posthog.mjs
new file mode 100644
index 0000000000..f0f6baa5b2
--- /dev/null
+++ b/scripts/use-local-posthog.mjs
@@ -0,0 +1,111 @@
+#!/usr/bin/env node
+/**
+ * Point PostHog Code's analytics + feature-flag client at your LOCAL PostHog
+ * (localhost:8010) for dev. Code reads feature flags through posthog-js, which
+ * is configured by the `VITE_POSTHOG_*` vars in `.env` — by default these point
+ * at PostHog's internal analytics instance, so flags you sync locally (e.g.
+ * `manage.py sync_feature_flags` → `agent-platform`) never resolve in dev. This
+ * rewrites those vars to your local instance so synced flags take effect.
+ *
+ * Note: this is the analytics/flags client only — separate from the data API
+ * the app calls per logged-in region (the "Dev" region already points at
+ * localhost:8010; see docs/LOCAL-DEVELOPMENT.md).
+ *
+ * Usage:
+ *   node scripts/use-local-posthog.mjs                  # auto-fetch project key from ../posthog
+ *   node scripts/use-local-posthog.mjs phc_xxx          # pass the project key explicitly
+ *   LOCAL_POSTHOG_PROJECT_KEY=phc_xxx node scripts/use-local-posthog.mjs
+ *   POSTHOG_DIR=/path/to/posthog node scripts/use-local-posthog.mjs
+ *   LOCAL_POSTHOG_HOST=http://localhost:8010 node scripts/use-local-posthog.mjs
+ *
+ * Restart the dev server (`pnpm dev`) afterwards to pick up the new env.
+ */
+
+import { execFileSync } from "node:child_process";
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const envPath = join(repoRoot, ".env");
+const host = process.env.LOCAL_POSTHOG_HOST || "http://localhost:8010";
+
+function fail(message) {
+  console.error(`\n✗ ${message}\n`);
+  process.exit(1);
+}
+
+/** Project API key from arg/env, else read it from a local PostHog checkout. */
+function resolveProjectKey() {
+  const explicit = (
+    process.argv[2] || process.env.LOCAL_POSTHOG_PROJECT_KEY
+  )?.trim();
+  if (explicit) return explicit;
+
+  const posthogDir =
+    process.env.POSTHOG_DIR || resolve(repoRoot, "..", "posthog");
+  if (!existsSync(join(posthogDir, "manage.py"))) {
+    fail(
+      `No project key given and no PostHog checkout at ${posthogDir}.\n` +
+        `  • Pass it: node scripts/use-local-posthog.mjs <phc_token>\n` +
+        `  • Or point at your checkout: POSTHOG_DIR=/path/to/posthog node scripts/use-local-posthog.mjs\n` +
+        `  • Find the key at ${host} → Settings → Project → "Project API key".`,
+    );
+  }
+
+  const py =
+    "from posthog.models import Team; t=Team.objects.order_by('id').first(); print(t.api_token if t else '')";
+  // `flox activate` provides the Django env on PostHog's local setup; fall back
+  // to a bare `python` for other environments.
+  const attempts = [
+    ["flox", ["activate", "--", "python", "manage.py", "shell", "-c", py]],
+    ["python", ["manage.py", "shell", "-c", py]],
+  ];
+  for (const [cmd, args] of attempts) {
+    try {
+      const out = execFileSync(cmd, args, {
+        cwd: posthogDir,
+        encoding: "utf8",
+        stdio: ["ignore", "pipe", "ignore"],
+      });
+      const token = out
+        .split("\n")
+        .map((l) => l.trim())
+        .filter((l) => l.startsWith("phc_"))
+        .pop();
+      if (token) return token;
+    } catch {
+      // Try the next runner.
+    }
+  }
+  fail(
+    `Couldn't read the project key from ${posthogDir}.\n` +
+      `Pass it explicitly: node scripts/use-local-posthog.mjs <phc_token>`,
+  );
+}
+
+function upsertEnv(content, key, value) {
+  const line = `${key}=${value}`;
+  const re = new RegExp(`^${key}=.*$`, "m");
+  if (re.test(content)) return content.replace(re, line);
+  const prefix =
+    content === "" || content.endsWith("\n") ? content : `${content}\n`;
+  return `${prefix}${line}\n`;
+}
+
+const projectKey = resolveProjectKey();
+if (!projectKey.startsWith("phc_")) {
+  fail(`That doesn't look like a project key (expected phc_…): ${projectKey}`);
+}
+
+let env = existsSync(envPath) ? readFileSync(envPath, "utf8") : "";
+env = upsertEnv(env, "VITE_POSTHOG_API_HOST", host);
+env = upsertEnv(env, "VITE_POSTHOG_UI_HOST", host);
+env = upsertEnv(env, "VITE_POSTHOG_API_KEY", projectKey);
+writeFileSync(envPath, env);
+
+console.log(`✓ Pointed PostHog Code's flags/analytics at local PostHog.`);
+console.log(`  VITE_POSTHOG_API_HOST=${host}`);
+console.log(`  VITE_POSTHOG_UI_HOST=${host}`);
+console.log(`  VITE_POSTHOG_API_KEY=${projectKey.slice(0, 8)}… (project key)`);
+console.log(`\nRestart the dev server (pnpm dev) to pick up the new env.`);