From 61bcdc55c69ab6dde39d7247146c79acb2201339 Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Sun, 26 Apr 2026 19:26:09 -0300
Subject: [PATCH 1/4] feat: add agent session route

---
 web/src/components/app-sidebar.test.tsx       | 216 ++++-----------
 web/src/components/app-sidebar.tsx            | 253 +++---------------
 .../stories/app-sidebar.stories.tsx           |   2 -
 web/src/hooks/routes/use-agent-detail-page.ts |  80 ++++++
 web/src/hooks/routes/use-app-layout.test.tsx  |   8 +-
 web/src/hooks/routes/use-app-layout.ts        |   1 -
 web/src/hooks/use-sessions-by-agent.ts        |  33 ---
 web/src/routeTree.gen.ts                      |  52 ++++
 web/src/routes/-_app.test.tsx                 |   1 +
 web/src/routes/_app.tsx                       |  17 +-
 ...sx => -agents.$name.sessions.$id.test.tsx} |   6 +-
 .../routes/_app/agents.$name.sessions.$id.tsx | 140 ++++++++++
 web/src/routes/_app/agents.$name.tsx          |  91 +++++++
 web/src/routes/_app/session.$id.tsx           | 145 +++-------
 ...=> -agents.$name.sessions.$id.stories.tsx} |  20 +-
 .../_app/stories/-agents.$name.stories.tsx    | 183 +++++++++++++
 .../agent/components/agent-info-panel.tsx     |  69 +++++
 .../agent/components/agent-page-header.tsx    | 105 ++++++++
 .../agent/components/agent-sessions-list.tsx  | 177 ++++++++++++
 .../agent/components/agent-stats-grid.tsx     | 121 +++++++++
 .../stories/agent-info-panel.stories.tsx      |  68 +++++
 .../stories/agent-page-header.stories.tsx     | 104 +++++++
 .../stories/agent-sessions-list.stories.tsx   | 118 ++++++++
 .../stories/agent-stats-grid.stories.tsx      |  99 +++++++
 .../systems/agent/hooks/use-agent-sessions.ts |  51 ++++
 web/src/systems/agent/index.ts                |  12 +
 web/src/systems/agent/lib/session-status.ts   |  45 ++++
 .../contexts/session-create-context.tsx       |  20 ++
 .../hooks/use-session-create-dialog.test.tsx  |   4 +-
 .../hooks/use-session-create-dialog.ts        |   5 +-
 .../session/hooks/use-session-create.ts       |  14 +
 web/src/systems/session/index.ts              |   5 +
 .../components/task-run-detail-header.tsx     |   6 +-
 .../components/task-run-detail-panels.tsx     |   6 +-
 34 files changed, 1722 insertions(+), 555 deletions(-)
 create mode 100644 web/src/hooks/routes/use-agent-detail-page.ts
 delete mode 100644 web/src/hooks/use-sessions-by-agent.ts
 rename web/src/routes/_app/{-session.$id.test.tsx => -agents.$name.sessions.$id.test.tsx} (96%)
 create mode 100644 web/src/routes/_app/agents.$name.sessions.$id.tsx
 create mode 100644 web/src/routes/_app/agents.$name.tsx
 rename web/src/routes/_app/stories/{-session.stories.tsx => -agents.$name.sessions.$id.stories.tsx} (67%)
 create mode 100644 web/src/routes/_app/stories/-agents.$name.stories.tsx
 create mode 100644 web/src/systems/agent/components/agent-info-panel.tsx
 create mode 100644 web/src/systems/agent/components/agent-page-header.tsx
 create mode 100644 web/src/systems/agent/components/agent-sessions-list.tsx
 create mode 100644 web/src/systems/agent/components/agent-stats-grid.tsx
 create mode 100644 web/src/systems/agent/components/stories/agent-info-panel.stories.tsx
 create mode 100644 web/src/systems/agent/components/stories/agent-page-header.stories.tsx
 create mode 100644 web/src/systems/agent/components/stories/agent-sessions-list.stories.tsx
 create mode 100644 web/src/systems/agent/components/stories/agent-stats-grid.stories.tsx
 create mode 100644 web/src/systems/agent/hooks/use-agent-sessions.ts
 create mode 100644 web/src/systems/agent/lib/session-status.ts
 create mode 100644 web/src/systems/session/contexts/session-create-context.tsx
 create mode 100644 web/src/systems/session/hooks/use-session-create.ts

diff --git a/web/src/components/app-sidebar.test.tsx b/web/src/components/app-sidebar.test.tsx
index 2162b03e1..5a201c492 100644
--- a/web/src/components/app-sidebar.test.tsx
+++ b/web/src/components/app-sidebar.test.tsx
@@ -8,7 +8,6 @@ import { AppSidebar, type AppSidebarProps } from "@/components/app-sidebar";
 
 const onSelectWorkspace = vi.fn();
 const onCollapseChange = vi.fn();
-const onNewSession = vi.fn();
 const onAddWorkspace = vi.fn();
 let matchedRoute: Record<string, boolean> = {};
 let matchedRouteFuzzy: Record<string, boolean> = {};
@@ -84,10 +83,6 @@ function makeProps(overrides: Partial<AppSidebarProps> = {}): AppSidebarProps {
     agentsLoading: false,
     agentsError: false,
     sessions: [],
-    onNewSession,
-    isCreatingSession: false,
-    pendingSessionAgentName: null,
-    pendingSessionWorkspaceId: null,
     ...overrides,
   };
 }
@@ -98,7 +93,6 @@ describe("AppSidebar", () => {
     matchedRouteFuzzy = {};
     onSelectWorkspace.mockReset();
     onCollapseChange.mockReset();
-    onNewSession.mockReset();
     onAddWorkspace.mockReset();
   });
 
@@ -187,13 +181,26 @@ describe("AppSidebar", () => {
   });
 
   describe("Agent List", () => {
-    it("renders agents with session counts", () => {
+    it("renders each agent as a flat link to /agents/$name", () => {
       renderSidebar(
         makeProps({
           agents: [
             { name: "coder", provider: "claude", prompt: "code" },
             { name: "writer", provider: "openai", prompt: "write" },
           ],
+        })
+      );
+
+      const coderRow = screen.getByTestId("agent-row-coder");
+      const writerRow = screen.getByTestId("agent-row-writer");
+      expect(coderRow).toHaveAttribute("href", "/agents/coder");
+      expect(writerRow).toHaveAttribute("href", "/agents/writer");
+    });
+
+    it("does not render session counts, expand toggles, or new-session buttons in the sidebar", () => {
+      renderSidebar(
+        makeProps({
+          agents: [{ name: "coder", provider: "claude", prompt: "code" }],
           sessions: [
             {
               id: "s1",
@@ -206,13 +213,41 @@ describe("AppSidebar", () => {
               updated_at: "2026-04-06T10:00:00Z",
               created_at: "2026-04-06T10:00:00Z",
             },
+          ],
+        })
+      );
+
+      expect(screen.queryByTestId("new-session-coder")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("agent-trigger-coder")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("session-row-s1")).not.toBeInTheDocument();
+    });
+
+    it("shows a status dot only on agents that have at least one active session", () => {
+      renderSidebar(
+        makeProps({
+          agents: [
+            { name: "coder", provider: "claude", prompt: "code" },
+            { name: "writer", provider: "openai", prompt: "write" },
+          ],
+          sessions: [
             {
-              id: "s2",
-              name: "Session 2",
+              id: "s_active",
+              name: "Live",
               agent_name: "coder",
               provider: "claude",
               workspace_id: "ws_alpha",
               workspace_path: "/workspace/alpha",
+              state: "active",
+              updated_at: "2026-04-06T10:00:00Z",
+              created_at: "2026-04-06T10:00:00Z",
+            },
+            {
+              id: "s_done",
+              name: "Done",
+              agent_name: "writer",
+              provider: "openai",
+              workspace_id: "ws_alpha",
+              workspace_path: "/workspace/alpha",
               state: "stopped",
               updated_at: "2026-04-06T09:00:00Z",
               created_at: "2026-04-06T09:00:00Z",
@@ -221,166 +256,29 @@ describe("AppSidebar", () => {
         })
       );
 
-      expect(screen.getByText("coder")).toBeInTheDocument();
-      expect(screen.getByText("writer")).toBeInTheDocument();
-      expect(screen.getByText("2")).toBeInTheDocument();
-      expect(screen.getByText("0")).toBeInTheDocument();
-    });
-
-    it("shows bootstrap hint when no agents are loaded", () => {
-      renderSidebar(makeProps());
-      expect(screen.getByText("Run `agh install` to bootstrap AGH")).toBeInTheDocument();
-    });
-
-    it("shows the loading state when agents are loading", () => {
-      renderSidebar(makeProps({ agentsLoading: true, agents: undefined }));
-      expect(screen.getByText("Loading agents...")).toBeInTheDocument();
-    });
-
-    it("creates sessions via the agent's + button", () => {
-      renderSidebar(
-        makeProps({
-          agents: [{ name: "claude-agent", provider: "anthropic", prompt: "You are helpful." }],
-        })
-      );
-
-      fireEvent.click(screen.getByTestId("new-session-claude-agent"));
-      expect(onNewSession).toHaveBeenCalledWith("claude-agent");
+      expect(screen.getByTestId("agent-status-dot-coder")).toBeInTheDocument();
+      expect(screen.queryByTestId("agent-status-dot-writer")).not.toBeInTheDocument();
     });
 
-    it("disables the new-session button when no workspace is active", () => {
+    it("highlights the agent row whose route is active (fuzzy: covers nested session route)", () => {
+      matchedRouteFuzzy["/agents/$name"] = true;
       renderSidebar(
         makeProps({
-          activeWorkspace: undefined,
-          activeWorkspaceId: null,
-          agents: [{ name: "claude-agent", provider: "anthropic", prompt: "help" }],
+          agents: [{ name: "coder", provider: "claude", prompt: "code" }],
         })
       );
-
-      expect(screen.getByTestId("new-session-claude-agent")).toBeDisabled();
+      expect(screen.getByTestId("agent-row-coder")).toHaveAttribute("data-active", "true");
+      expect(screen.getByTestId("agent-active-coder")).toBeInTheDocument();
     });
 
-    it("shows a spinner and temporary starting row for the pending agent", () => {
-      renderSidebar(
-        makeProps({
-          agents: [
-            { name: "claude-agent", provider: "anthropic", prompt: "help" },
-            { name: "general", provider: "openai", prompt: "general" },
-          ],
-          isCreatingSession: true,
-          pendingSessionAgentName: "claude-agent",
-          pendingSessionWorkspaceId: "ws_alpha",
-        })
-      );
-
-      expect(screen.getByTestId("new-session-claude-agent")).toBeDisabled();
-      expect(screen.getByTestId("new-session-general")).toBeDisabled();
-      expect(screen.getByTestId("new-session-spinner-claude-agent")).toBeInTheDocument();
-      expect(screen.queryByTestId("new-session-spinner-general")).not.toBeInTheDocument();
-      expect(screen.getByTestId("pending-session-row-claude-agent")).toHaveTextContent(
-        "starting..."
-      );
+    it("shows bootstrap hint when no agents are loaded", () => {
+      renderSidebar(makeProps());
+      expect(screen.getByText("Run `agh install` to bootstrap AGH")).toBeInTheDocument();
     });
 
-    it("does not render the temporary row when the pending session belongs to another workspace", () => {
-      renderSidebar(
-        makeProps({
-          agents: [{ name: "claude-agent", provider: "anthropic", prompt: "help" }],
-          isCreatingSession: true,
-          pendingSessionAgentName: "claude-agent",
-          pendingSessionWorkspaceId: "ws_beta",
-        })
-      );
-
-      expect(screen.queryByTestId("pending-session-row-claude-agent")).not.toBeInTheDocument();
-    });
-
-    it("opens an agent group when sessions arrive after the initial render without Base UI warnings", () => {
-      const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => undefined);
-      const errorSpy = vi.spyOn(console, "error").mockImplementation(() => undefined);
-      try {
-        const agent = { name: "coder", provider: "claude", prompt: "code" };
-        const initialProps = makeProps({
-          agents: [agent],
-          sessions: [],
-        });
-        const { rerender } = render(
-          <UIProvider reducedMotion="always">
-            <AppSidebar {...initialProps} />
-          </UIProvider>
-        );
-
-        rerender(
-          <UIProvider reducedMotion="always">
-            <AppSidebar
-              {...makeProps({
-                agents: [agent],
-                sessions: [
-                  {
-                    id: "sess_new",
-                    name: "New session",
-                    agent_name: "coder",
-                    provider: "claude",
-                    workspace_id: "ws_alpha",
-                    workspace_path: "/workspace/alpha",
-                    state: "active",
-                    updated_at: "2026-04-06T11:00:00Z",
-                    created_at: "2026-04-06T11:00:00Z",
-                  },
-                ],
-              })}
-            />
-          </UIProvider>
-        );
-
-        expect(screen.getByRole("link", { name: "New session" })).toBeInTheDocument();
-        expect(warnSpy).not.toHaveBeenCalled();
-        expect(errorSpy).not.toHaveBeenCalled();
-      } finally {
-        warnSpy.mockRestore();
-        errorSpy.mockRestore();
-      }
-    });
-
-    it("returns to the derived closed state when agent sessions disappear", () => {
-      const agent = { name: "coder", provider: "claude", prompt: "code" };
-      const { rerender } = render(
-        <UIProvider reducedMotion="always">
-          <AppSidebar
-            {...makeProps({
-              agents: [agent],
-              sessions: [
-                {
-                  id: "sess_live",
-                  name: "Live session",
-                  agent_name: "coder",
-                  provider: "claude",
-                  workspace_id: "ws_alpha",
-                  workspace_path: "/workspace/alpha",
-                  state: "active",
-                  updated_at: "2026-04-06T11:00:00Z",
-                  created_at: "2026-04-06T11:00:00Z",
-                },
-              ],
-            })}
-          />
-        </UIProvider>
-      );
-
-      expect(screen.getByRole("link", { name: "Live session" })).toBeInTheDocument();
-
-      rerender(
-        <UIProvider reducedMotion="always">
-          <AppSidebar
-            {...makeProps({
-              agents: [agent],
-              sessions: [],
-            })}
-          />
-        </UIProvider>
-      );
-
-      expect(screen.queryByText("No sessions")).not.toBeInTheDocument();
+    it("shows the loading state when agents are loading", () => {
+      renderSidebar(makeProps({ agentsLoading: true, agents: undefined }));
+      expect(screen.getByText("Loading agents...")).toBeInTheDocument();
     });
   });
 
diff --git a/web/src/components/app-sidebar.tsx b/web/src/components/app-sidebar.tsx
index c36c09dc7..5eee3c451 100644
--- a/web/src/components/app-sidebar.tsx
+++ b/web/src/components/app-sidebar.tsx
@@ -1,10 +1,7 @@
-import { useState } from "react";
-
 import { Link, useMatchRoute } from "@tanstack/react-router";
 import {
   Book,
   Bot,
-  ChevronRight,
   Clock3,
   ListChecks,
   Loader2,
@@ -19,21 +16,16 @@ import {
 
 import {
   cn,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
   ConnectionIndicator,
   Logo,
   type ConnectionStatus,
   Sidebar,
   SidebarSectionLabel,
   StatusDot,
-  type StatusDotTone,
 } from "@agh/ui";
 
-import { useSessionsByAgent } from "@/hooks/use-sessions-by-agent";
 import { AgentIcon, type AgentPayload } from "@/systems/agent";
-import type { SessionPayload, SessionState } from "@/systems/session";
+import type { SessionPayload } from "@/systems/session";
 import type { WorkspacePayload } from "@/systems/workspace";
 
 interface RailSlotProps {
@@ -110,13 +102,6 @@ function HeaderSlot({ activeWorkspace }: HeaderSlotProps) {
   );
 }
 
-const SESSION_STATE_TONE: Record<SessionState, { tone: StatusDotTone; pulse: boolean }> = {
-  active: { tone: "success", pulse: false },
-  starting: { tone: "warning", pulse: true },
-  stopping: { tone: "neutral", pulse: true },
-  stopped: { tone: "neutral", pulse: false },
-};
-
 const NAV_ROW_CLASS =
   "relative flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-[13px] text-[color:var(--color-text-secondary)] transition-colors hover:bg-[color:var(--color-hover)] hover:text-[color:var(--color-text-primary)]";
 const ACTIVE_NAV_ROW_CLASS =
@@ -156,187 +141,57 @@ function NavItem({ to, icon: Icon, label, fuzzy }: NavItemProps) {
   );
 }
 
-interface SidebarSessionItemProps {
-  session: SessionPayload;
+interface AgentItemProps {
+  agent: AgentPayload;
+  hasActiveSession: boolean;
 }
 
-function SidebarSessionItem({ session }: SidebarSessionItemProps) {
+function AgentItem({ agent, hasActiveSession }: AgentItemProps) {
   const matchRoute = useMatchRoute();
-  const isActive = Boolean(matchRoute({ to: "/session/$id", params: { id: session.id } }));
-  const displayTitle = session.name || session.id.slice(0, 8);
-  const { tone, pulse } = SESSION_STATE_TONE[session.state];
+  const isActive = Boolean(
+    matchRoute({ to: "/agents/$name", params: { name: agent.name }, fuzzy: true })
+  );
 
   return (
     <Link
-      to="/session/$id"
-      params={{ id: session.id }}
-      data-testid={`session-row-${session.id}`}
+      to="/agents/$name"
+      params={{ name: agent.name }}
+      data-testid={`agent-row-${agent.name}`}
       data-active={isActive}
-      className={cn(
-        "relative flex items-center gap-2 rounded-[5px] px-2 py-1 text-[12px] text-[color:var(--color-text-secondary)] transition-colors hover:bg-[color:var(--color-hover)] hover:text-[color:var(--color-text-primary)]",
-        isActive &&
-          "bg-[color:var(--color-surface)] font-medium text-[color:var(--color-text-primary)]"
-      )}
+      className={cn(NAV_ROW_CLASS, isActive && ACTIVE_NAV_ROW_CLASS)}
     >
       {isActive && (
         <span
           aria-hidden="true"
-          className="absolute -left-3 top-1 bottom-1 w-[2px] rounded-r-[2px] bg-[color:var(--color-accent)]"
+          data-testid={`agent-active-${agent.name}`}
+          className={ACTIVE_NAV_INDICATOR_CLASS}
         />
       )}
-      <StatusDot tone={tone} pulse={pulse} size="sm" />
-      <span className="truncate">{displayTitle}</span>
+      <AgentIcon
+        provider={agent.provider}
+        className="size-3.5 shrink-0 text-[color:var(--color-text-tertiary)]"
+      />
+      <span className="truncate">{agent.name}</span>
+      {hasActiveSession ? (
+        <StatusDot
+          tone="success"
+          size="sm"
+          className="ml-auto"
+          data-testid={`agent-status-dot-${agent.name}`}
+        />
+      ) : null}
     </Link>
   );
 }
 
-interface PendingSidebarSessionItemProps {
-  agentName: string;
-}
-
-function PendingSidebarSessionItem({ agentName }: PendingSidebarSessionItemProps) {
-  return (
-    <div
-      role="status"
-      aria-live="polite"
-      aria-label={`Creating session for ${agentName}`}
-      data-testid={`pending-session-row-${agentName}`}
-      className={cn(
-        "flex items-center gap-2 rounded-md px-2 py-1 text-[12px]",
-        "text-[color:var(--color-text-tertiary)]"
-      )}
-    >
-      <StatusDot tone="warning" pulse size="sm" />
-      <span className="truncate font-mono text-[11px] lowercase tracking-[0.04em]">
-        starting...
-      </span>
-    </div>
-  );
-}
-
-interface AgentItemProps {
-  agent: AgentPayload;
-  sessions: SessionPayload[] | undefined;
-  onNewSession: (agentName: string) => void;
-  newSessionDisabled: boolean;
-  isPendingCreate: boolean;
-  showPendingSessionRow: boolean;
-}
-
-function AgentItem({
-  agent,
-  sessions,
-  onNewSession,
-  newSessionDisabled,
-  isPendingCreate,
-  showPendingSessionRow,
-}: AgentItemProps) {
-  const count = sessions?.length ?? 0;
-  const shouldAutoOpen = count > 0 || showPendingSessionRow;
-  const [openOverride, setOpenOverride] = useState<{
-    baseline: boolean;
-    value: boolean;
-  } | null>(null);
-  const open =
-    openOverride !== null && openOverride.baseline === shouldAutoOpen
-      ? openOverride.value
-      : shouldAutoOpen;
-
-  return (
-    <Collapsible
-      open={open}
-      onOpenChange={nextOpen => {
-        setOpenOverride(
-          nextOpen === shouldAutoOpen
-            ? null
-            : {
-                baseline: shouldAutoOpen,
-                value: nextOpen,
-              }
-        );
-      }}
-      className="group/agent"
-    >
-      <div className="relative flex items-center">
-        <CollapsibleTrigger
-          data-testid={`agent-trigger-${agent.name}`}
-          className="flex min-h-7 flex-1 items-center gap-1.5 rounded-md px-2 text-left text-[13px] text-[color:var(--color-text-primary)] transition-colors hover:bg-[color:var(--color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)]"
-        >
-          <ChevronRight
-            aria-hidden="true"
-            className="size-3 shrink-0 text-[color:var(--color-text-tertiary)] transition-transform group-data-[panel-open]/agent:rotate-90"
-          />
-          <AgentIcon
-            provider={agent.provider}
-            className="size-3.5 shrink-0 text-[color:var(--color-text-tertiary)]"
-          />
-          <span className="truncate">{agent.name}</span>
-          <span className="ml-auto font-mono text-[10px] text-[color:var(--color-text-tertiary)]">
-            {count}
-          </span>
-        </CollapsibleTrigger>
-        <button
-          type="button"
-          onClick={() => onNewSession(agent.name)}
-          disabled={newSessionDisabled}
-          aria-label={`New session for ${agent.name}`}
-          aria-busy={isPendingCreate}
-          data-pending={isPendingCreate}
-          data-testid={`new-session-${agent.name}`}
-          className="ml-1 inline-flex size-5 items-center justify-center rounded text-[color:var(--color-text-tertiary)] transition-colors hover:bg-[color:var(--color-hover)] hover:text-[color:var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)] disabled:pointer-events-none disabled:opacity-40"
-        >
-          {isPendingCreate ? (
-            <Loader2
-              aria-hidden="true"
-              data-testid={`new-session-spinner-${agent.name}`}
-              className="size-3 animate-spin"
-            />
-          ) : (
-            <Plus aria-hidden="true" className="size-3" />
-          )}
-        </button>
-      </div>
-      <CollapsibleContent>
-        <div className="ml-[18px] flex flex-col gap-0.5 border-l border-[color:var(--color-divider)] pl-2 pt-0.5">
-          {sessions && sessions.length > 0 ? (
-            sessions.map(session => <SidebarSessionItem key={session.id} session={session} />)
-          ) : !showPendingSessionRow ? (
-            <span className="px-2 py-1 text-[11px] text-[color:var(--color-text-tertiary)]">
-              No sessions
-            </span>
-          ) : null}
-          {showPendingSessionRow ? <PendingSidebarSessionItem agentName={agent.name} /> : null}
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-}
-
 interface AgentListProps {
-  activeWorkspaceId: string | null;
   agents: AgentPayload[] | undefined;
   agentsLoading: boolean;
   agentsError: boolean;
   sessions: SessionPayload[] | undefined;
-  onNewSession: (agentName: string) => void;
-  isCreatingSession: boolean;
-  pendingSessionAgentName: string | null;
-  pendingSessionWorkspaceId: string | null;
 }
 
-function AgentList({
-  activeWorkspaceId,
-  agents,
-  agentsLoading,
-  agentsError,
-  sessions,
-  onNewSession,
-  isCreatingSession,
-  pendingSessionAgentName,
-  pendingSessionWorkspaceId,
-}: AgentListProps) {
-  const sessionsByAgent = useSessionsByAgent(sessions);
-
+function AgentList({ agents, agentsLoading, agentsError, sessions }: AgentListProps) {
   if (agentsLoading) {
     return (
       <div
@@ -361,21 +216,20 @@ function AgentList({
     );
   }
 
+  const activeAgentNames = new Set<string>();
+  if (sessions) {
+    for (const session of sessions) {
+      if (session.state === "active") activeAgentNames.add(session.agent_name);
+    }
+  }
+
   return (
     <div className="flex flex-col gap-0.5">
       {agents.map(agent => (
         <AgentItem
           key={agent.name}
           agent={agent}
-          sessions={sessionsByAgent[agent.name]}
-          onNewSession={onNewSession}
-          newSessionDisabled={!activeWorkspaceId || isCreatingSession}
-          isPendingCreate={pendingSessionAgentName === agent.name}
-          showPendingSessionRow={
-            pendingSessionAgentName === agent.name &&
-            activeWorkspaceId !== null &&
-            activeWorkspaceId === pendingSessionWorkspaceId
-          }
+          hasActiveSession={activeAgentNames.has(agent.name)}
         />
       ))}
     </div>
@@ -393,41 +247,21 @@ const WORKSPACE_NAV_ITEMS: NavItemProps[] = [
 ];
 
 interface NavSlotProps {
-  activeWorkspaceId: string | null;
   agents: AgentPayload[] | undefined;
   agentsLoading: boolean;
   agentsError: boolean;
   sessions: SessionPayload[] | undefined;
-  onNewSession: (agentName: string) => void;
-  isCreatingSession: boolean;
-  pendingSessionAgentName: string | null;
-  pendingSessionWorkspaceId: string | null;
 }
 
-function NavSlot({
-  activeWorkspaceId,
-  agents,
-  agentsLoading,
-  agentsError,
-  sessions,
-  onNewSession,
-  isCreatingSession,
-  pendingSessionAgentName,
-  pendingSessionWorkspaceId,
-}: NavSlotProps) {
+function NavSlot({ agents, agentsLoading, agentsError, sessions }: NavSlotProps) {
   return (
     <div data-testid="sidebar-nav" className="flex flex-col gap-1 px-2 py-3">
       <SectionLabel>Agents</SectionLabel>
       <AgentList
-        activeWorkspaceId={activeWorkspaceId}
         agents={agents}
         agentsLoading={agentsLoading}
         agentsError={agentsError}
         sessions={sessions}
-        onNewSession={onNewSession}
-        isCreatingSession={isCreatingSession}
-        pendingSessionAgentName={pendingSessionAgentName}
-        pendingSessionWorkspaceId={pendingSessionWorkspaceId}
       />
 
       <SectionLabel className="mt-3">Workspace</SectionLabel>
@@ -513,10 +347,6 @@ export interface AppSidebarProps {
   agentsLoading: boolean;
   agentsError: boolean;
   sessions: SessionPayload[] | undefined;
-  onNewSession: (agentName: string) => void;
-  isCreatingSession: boolean;
-  pendingSessionAgentName: string | null;
-  pendingSessionWorkspaceId: string | null;
 }
 
 function AppSidebar({
@@ -533,10 +363,6 @@ function AppSidebar({
   agentsLoading,
   agentsError,
   sessions,
-  onNewSession,
-  isCreatingSession,
-  pendingSessionAgentName,
-  pendingSessionWorkspaceId,
 }: AppSidebarProps) {
   return (
     <Sidebar
@@ -555,15 +381,10 @@ function AppSidebar({
       header={<HeaderSlot activeWorkspace={activeWorkspace} />}
       nav={
         <NavSlot
-          activeWorkspaceId={activeWorkspaceId}
           agents={agents}
           agentsLoading={agentsLoading}
           agentsError={agentsError}
           sessions={sessions}
-          onNewSession={onNewSession}
-          isCreatingSession={isCreatingSession}
-          pendingSessionAgentName={pendingSessionAgentName}
-          pendingSessionWorkspaceId={pendingSessionWorkspaceId}
         />
       }
       footer={<FooterSlot connectionStatus={connectionStatus} health={health} />}
diff --git a/web/src/components/stories/app-sidebar.stories.tsx b/web/src/components/stories/app-sidebar.stories.tsx
index a40e8cede..3cff848c3 100644
--- a/web/src/components/stories/app-sidebar.stories.tsx
+++ b/web/src/components/stories/app-sidebar.stories.tsx
@@ -79,8 +79,6 @@ const meta: Meta<typeof AppSidebarHarness> = {
     agentsLoading: false,
     agentsError: false,
     sessions: sessionFixtures,
-    onNewSession: () => undefined,
-    isCreatingSession: false,
   },
 };
 
diff --git a/web/src/hooks/routes/use-agent-detail-page.ts b/web/src/hooks/routes/use-agent-detail-page.ts
new file mode 100644
index 000000000..78f4b943f
--- /dev/null
+++ b/web/src/hooks/routes/use-agent-detail-page.ts
@@ -0,0 +1,80 @@
+import { useCallback, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { agentKeys, useAgent, useAgentSessions, type AgentPayload } from "@/systems/agent";
+import {
+  sessionKeys,
+  useSessionCreate,
+  type SessionCreateContextValue,
+  type SessionPayload,
+} from "@/systems/session";
+import { useActiveWorkspace } from "@/systems/workspace";
+
+export interface UseAgentDetailPageResult {
+  agent: AgentPayload | undefined;
+  agentLoading: boolean;
+  agentError: Error | null;
+  sessions: SessionPayload[];
+  sessionsLoading: boolean;
+  sessionsError: boolean;
+  isRefreshing: boolean;
+  isCreatingForAgent: boolean;
+  newSessionDisabled: boolean;
+  sessionCreate: SessionCreateContextValue;
+  onRefresh: () => void;
+  onConfigure: () => void;
+  onNewSession: () => void;
+  onGoHome: () => void;
+}
+
+export function useAgentDetailPage(name: string): UseAgentDetailPageResult {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { activeWorkspaceId } = useActiveWorkspace();
+  const sessionCreate = useSessionCreate();
+  const { data: agent, isLoading: agentLoading, error: agentError } = useAgent(name);
+  const {
+    sessions,
+    isLoading: sessionsLoading,
+    isError: sessionsError,
+  } = useAgentSessions(activeWorkspaceId, name);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const onRefresh = useCallback(() => {
+    setIsRefreshing(true);
+    void Promise.all([
+      queryClient.invalidateQueries({ queryKey: sessionKeys.lists() }),
+      queryClient.invalidateQueries({ queryKey: agentKeys.all }),
+    ]).finally(() => setIsRefreshing(false));
+  }, [queryClient]);
+
+  const onConfigure = useCallback(() => {
+    void navigate({ to: "/settings" });
+  }, [navigate]);
+
+  const onNewSession = useCallback(() => {
+    sessionCreate.openForAgent(name);
+  }, [sessionCreate, name]);
+
+  const onGoHome = useCallback(() => {
+    void navigate({ to: "/" });
+  }, [navigate]);
+
+  return {
+    agent,
+    agentLoading,
+    agentError: (agentError as Error | null) ?? null,
+    sessions,
+    sessionsLoading,
+    sessionsError,
+    isRefreshing,
+    isCreatingForAgent: sessionCreate.isCreating && sessionCreate.pendingAgentName === name,
+    newSessionDisabled: !sessionCreate.hasActiveWorkspace,
+    sessionCreate,
+    onRefresh,
+    onConfigure,
+    onNewSession,
+    onGoHome,
+  };
+}
diff --git a/web/src/hooks/routes/use-app-layout.test.tsx b/web/src/hooks/routes/use-app-layout.test.tsx
index 23974a680..ab41824eb 100644
--- a/web/src/hooks/routes/use-app-layout.test.tsx
+++ b/web/src/hooks/routes/use-app-layout.test.tsx
@@ -9,7 +9,7 @@ const {
   mockUseCreateSessionPending,
 } = vi.hoisted(() => ({
   mockNavigate: vi.fn<(input: unknown) => Promise<void>>(),
-  mockMutateAsync: vi.fn<(input: unknown) => Promise<{ id: string }>>(),
+  mockMutateAsync: vi.fn<(input: unknown) => Promise<{ id: string; agent_name: string }>>(),
   mockToastError: vi.fn(),
   mockWorkspaceQuery: vi.fn(),
   mockUseCreateSessionPending: { current: false as boolean },
@@ -261,7 +261,7 @@ describe("useAppLayout", () => {
   });
 
   it("submits the dialog with agent name, workspace, and selected provider", async () => {
-    mockMutateAsync.mockResolvedValue({ id: "sess-new" });
+    mockMutateAsync.mockResolvedValue({ id: "sess-new", agent_name: "claude-agent" });
     mockNavigate.mockResolvedValue(undefined);
 
     const { result } = renderHook(() => useAppLayout());
@@ -284,8 +284,8 @@ describe("useAppLayout", () => {
       provider: "gemini",
     });
     expect(mockNavigate).toHaveBeenCalledWith({
-      to: "/session/$id",
-      params: { id: "sess-new" },
+      to: "/agents/$name/sessions/$id",
+      params: { name: "claude-agent", id: "sess-new" },
     });
     expect(result.current.sessionCreate.open).toBe(false);
   });
diff --git a/web/src/hooks/routes/use-app-layout.ts b/web/src/hooks/routes/use-app-layout.ts
index 747155530..50bc5147c 100644
--- a/web/src/hooks/routes/use-app-layout.ts
+++ b/web/src/hooks/routes/use-app-layout.ts
@@ -74,7 +74,6 @@ function useAppLayout() {
     handleNewSession,
     isCreatingSession: sessionCreate.isSubmitting,
     pendingSessionAgentName: sessionCreate.pendingAgentName,
-    pendingSessionWorkspaceId: sessionCreate.pendingWorkspaceId,
     sessionCreate,
     openWorkspaceSetup,
   };
diff --git a/web/src/hooks/use-sessions-by-agent.ts b/web/src/hooks/use-sessions-by-agent.ts
deleted file mode 100644
index 005f4a35e..000000000
--- a/web/src/hooks/use-sessions-by-agent.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useMemo } from "react";
-
-import type { SessionPayload } from "@/systems/session";
-
-type SessionsByAgent = Record<string, SessionPayload[]>;
-
-function useSessionsByAgent(sessions: SessionPayload[] | undefined): SessionsByAgent {
-  return useMemo(() => {
-    const grouped: SessionsByAgent = {};
-    if (!sessions) {
-      return grouped;
-    }
-
-    for (const session of sessions) {
-      const key = session.agent_name;
-      if (!grouped[key]) {
-        grouped[key] = [];
-      }
-
-      grouped[key].push(session);
-    }
-
-    for (const key of Object.keys(grouped)) {
-      grouped[key].sort(
-        (left, right) => new Date(right.updated_at).getTime() - new Date(left.updated_at).getTime()
-      );
-    }
-
-    return grouped;
-  }, [sessions]);
-}
-
-export { useSessionsByAgent };
diff --git a/web/src/routeTree.gen.ts b/web/src/routeTree.gen.ts
index 57de6916e..1c478316a 100644
--- a/web/src/routeTree.gen.ts
+++ b/web/src/routeTree.gen.ts
@@ -34,8 +34,10 @@ import { Route as AppSettingsGeneralRouteImport } from './routes/_app/settings/g
 import { Route as AppSettingsEnvironmentsRouteImport } from './routes/_app/settings/environments'
 import { Route as AppSettingsAutomationRouteImport } from './routes/_app/settings/automation'
 import { Route as AppSessionIdRouteImport } from './routes/_app/session.$id'
+import { Route as AppAgentsNameRouteImport } from './routes/_app/agents.$name'
 import { Route as AppTasksIdEditRouteImport } from './routes/_app/tasks.$id.edit'
 import { Route as AppTasksIdRunsRunIdRouteImport } from './routes/_app/tasks.$id.runs.$runId'
+import { Route as AppAgentsNameSessionsIdRouteImport } from './routes/_app/agents.$name.sessions.$id'
 
 const DesignSystemRoute = DesignSystemRouteImport.update({
   id: '/design-system',
@@ -163,6 +165,11 @@ const AppSessionIdRoute = AppSessionIdRouteImport.update({
   path: '/session/$id',
   getParentRoute: () => AppRoute,
 } as any)
+const AppAgentsNameRoute = AppAgentsNameRouteImport.update({
+  id: '/agents/$name',
+  path: '/agents/$name',
+  getParentRoute: () => AppRoute,
+} as any)
 const AppTasksIdEditRoute = AppTasksIdEditRouteImport.update({
   id: '/edit',
   path: '/edit',
@@ -173,6 +180,11 @@ const AppTasksIdRunsRunIdRoute = AppTasksIdRunsRunIdRouteImport.update({
   path: '/runs/$runId',
   getParentRoute: () => AppTasksIdRoute,
 } as any)
+const AppAgentsNameSessionsIdRoute = AppAgentsNameSessionsIdRouteImport.update({
+  id: '/sessions/$id',
+  path: '/sessions/$id',
+  getParentRoute: () => AppAgentsNameRoute,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof AppIndexRoute
@@ -185,6 +197,7 @@ export interface FileRoutesByFullPath {
   '/skills': typeof AppSkillsRoute
   '/tasks': typeof AppTasksRouteWithChildren
   '/triggers': typeof AppTriggersRoute
+  '/agents/$name': typeof AppAgentsNameRouteWithChildren
   '/session/$id': typeof AppSessionIdRoute
   '/settings/automation': typeof AppSettingsAutomationRoute
   '/settings/environments': typeof AppSettingsEnvironmentsRoute
@@ -200,6 +213,7 @@ export interface FileRoutesByFullPath {
   '/tasks/new': typeof AppTasksNewRoute
   '/settings/': typeof AppSettingsIndexRoute
   '/tasks/$id/edit': typeof AppTasksIdEditRoute
+  '/agents/$name/sessions/$id': typeof AppAgentsNameSessionsIdRoute
   '/tasks/$id/runs/$runId': typeof AppTasksIdRunsRunIdRoute
 }
 export interface FileRoutesByTo {
@@ -212,6 +226,7 @@ export interface FileRoutesByTo {
   '/tasks': typeof AppTasksRouteWithChildren
   '/triggers': typeof AppTriggersRoute
   '/': typeof AppIndexRoute
+  '/agents/$name': typeof AppAgentsNameRouteWithChildren
   '/session/$id': typeof AppSessionIdRoute
   '/settings/automation': typeof AppSettingsAutomationRoute
   '/settings/environments': typeof AppSettingsEnvironmentsRoute
@@ -227,6 +242,7 @@ export interface FileRoutesByTo {
   '/tasks/new': typeof AppTasksNewRoute
   '/settings': typeof AppSettingsIndexRoute
   '/tasks/$id/edit': typeof AppTasksIdEditRoute
+  '/agents/$name/sessions/$id': typeof AppAgentsNameSessionsIdRoute
   '/tasks/$id/runs/$runId': typeof AppTasksIdRunsRunIdRoute
 }
 export interface FileRoutesById {
@@ -242,6 +258,7 @@ export interface FileRoutesById {
   '/_app/tasks': typeof AppTasksRouteWithChildren
   '/_app/triggers': typeof AppTriggersRoute
   '/_app/': typeof AppIndexRoute
+  '/_app/agents/$name': typeof AppAgentsNameRouteWithChildren
   '/_app/session/$id': typeof AppSessionIdRoute
   '/_app/settings/automation': typeof AppSettingsAutomationRoute
   '/_app/settings/environments': typeof AppSettingsEnvironmentsRoute
@@ -257,6 +274,7 @@ export interface FileRoutesById {
   '/_app/tasks/new': typeof AppTasksNewRoute
   '/_app/settings/': typeof AppSettingsIndexRoute
   '/_app/tasks/$id/edit': typeof AppTasksIdEditRoute
+  '/_app/agents/$name/sessions/$id': typeof AppAgentsNameSessionsIdRoute
   '/_app/tasks/$id/runs/$runId': typeof AppTasksIdRunsRunIdRoute
 }
 export interface FileRouteTypes {
@@ -272,6 +290,7 @@ export interface FileRouteTypes {
     | '/skills'
     | '/tasks'
     | '/triggers'
+    | '/agents/$name'
     | '/session/$id'
     | '/settings/automation'
     | '/settings/environments'
@@ -287,6 +306,7 @@ export interface FileRouteTypes {
     | '/tasks/new'
     | '/settings/'
     | '/tasks/$id/edit'
+    | '/agents/$name/sessions/$id'
     | '/tasks/$id/runs/$runId'
   fileRoutesByTo: FileRoutesByTo
   to:
@@ -299,6 +319,7 @@ export interface FileRouteTypes {
     | '/tasks'
     | '/triggers'
     | '/'
+    | '/agents/$name'
     | '/session/$id'
     | '/settings/automation'
     | '/settings/environments'
@@ -314,6 +335,7 @@ export interface FileRouteTypes {
     | '/tasks/new'
     | '/settings'
     | '/tasks/$id/edit'
+    | '/agents/$name/sessions/$id'
     | '/tasks/$id/runs/$runId'
   id:
     | '__root__'
@@ -328,6 +350,7 @@ export interface FileRouteTypes {
     | '/_app/tasks'
     | '/_app/triggers'
     | '/_app/'
+    | '/_app/agents/$name'
     | '/_app/session/$id'
     | '/_app/settings/automation'
     | '/_app/settings/environments'
@@ -343,6 +366,7 @@ export interface FileRouteTypes {
     | '/_app/tasks/new'
     | '/_app/settings/'
     | '/_app/tasks/$id/edit'
+    | '/_app/agents/$name/sessions/$id'
     | '/_app/tasks/$id/runs/$runId'
   fileRoutesById: FileRoutesById
 }
@@ -528,6 +552,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppSessionIdRouteImport
       parentRoute: typeof AppRoute
     }
+    '/_app/agents/$name': {
+      id: '/_app/agents/$name'
+      path: '/agents/$name'
+      fullPath: '/agents/$name'
+      preLoaderRoute: typeof AppAgentsNameRouteImport
+      parentRoute: typeof AppRoute
+    }
     '/_app/tasks/$id/edit': {
       id: '/_app/tasks/$id/edit'
       path: '/edit'
@@ -542,6 +573,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppTasksIdRunsRunIdRouteImport
       parentRoute: typeof AppTasksIdRoute
     }
+    '/_app/agents/$name/sessions/$id': {
+      id: '/_app/agents/$name/sessions/$id'
+      path: '/sessions/$id'
+      fullPath: '/agents/$name/sessions/$id'
+      preLoaderRoute: typeof AppAgentsNameSessionsIdRouteImport
+      parentRoute: typeof AppAgentsNameRoute
+    }
   }
 }
 
@@ -605,6 +643,18 @@ const AppTasksRouteWithChildren = AppTasksRoute._addFileChildren(
   AppTasksRouteChildren,
 )
 
+interface AppAgentsNameRouteChildren {
+  AppAgentsNameSessionsIdRoute: typeof AppAgentsNameSessionsIdRoute
+}
+
+const AppAgentsNameRouteChildren: AppAgentsNameRouteChildren = {
+  AppAgentsNameSessionsIdRoute: AppAgentsNameSessionsIdRoute,
+}
+
+const AppAgentsNameRouteWithChildren = AppAgentsNameRoute._addFileChildren(
+  AppAgentsNameRouteChildren,
+)
+
 interface AppRouteChildren {
   AppBridgesRoute: typeof AppBridgesRoute
   AppJobsRoute: typeof AppJobsRoute
@@ -615,6 +665,7 @@ interface AppRouteChildren {
   AppTasksRoute: typeof AppTasksRouteWithChildren
   AppTriggersRoute: typeof AppTriggersRoute
   AppIndexRoute: typeof AppIndexRoute
+  AppAgentsNameRoute: typeof AppAgentsNameRouteWithChildren
   AppSessionIdRoute: typeof AppSessionIdRoute
 }
 
@@ -628,6 +679,7 @@ const AppRouteChildren: AppRouteChildren = {
   AppTasksRoute: AppTasksRouteWithChildren,
   AppTriggersRoute: AppTriggersRoute,
   AppIndexRoute: AppIndexRoute,
+  AppAgentsNameRoute: AppAgentsNameRouteWithChildren,
   AppSessionIdRoute: AppSessionIdRoute,
 }
 
diff --git a/web/src/routes/-_app.test.tsx b/web/src/routes/-_app.test.tsx
index 0ad83593c..5cd41028b 100644
--- a/web/src/routes/-_app.test.tsx
+++ b/web/src/routes/-_app.test.tsx
@@ -120,6 +120,7 @@ vi.mock("@/systems/session", () => ({
   }),
   SessionCreateDialog: ({ open }: { open: boolean }) =>
     open ? <div data-testid="session-create-dialog" /> : null,
+  SessionCreateProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
 }));
 
 vi.mock("@/systems/workspace", () => ({
diff --git a/web/src/routes/_app.tsx b/web/src/routes/_app.tsx
index 030098fe0..5ee8e8257 100644
--- a/web/src/routes/_app.tsx
+++ b/web/src/routes/_app.tsx
@@ -14,7 +14,7 @@ import { Button, Empty, buttonVariants } from "@agh/ui";
 
 import { AppSidebar } from "@/components/app-sidebar";
 import { useAppLayout } from "@/hooks/routes/use-app-layout";
-import { SessionCreateDialog } from "@/systems/session";
+import { SessionCreateDialog, SessionCreateProvider } from "@/systems/session";
 import { WorkspaceOnboarding, WorkspaceSetupDialog } from "@/systems/workspace";
 
 export const Route = createFileRoute("/_app")({
@@ -31,7 +31,14 @@ function AppLayout() {
   }
 
   return (
-    <>
+    <SessionCreateProvider
+      value={{
+        openForAgent: page.handleNewSession,
+        isCreating: page.isCreatingSession,
+        pendingAgentName: page.pendingSessionAgentName,
+        hasActiveWorkspace: page.activeWorkspace !== undefined,
+      }}
+    >
       <AppSidebar
         collapsed={page.collapsed}
         onCollapseChange={page.setCollapsed}
@@ -46,10 +53,6 @@ function AppLayout() {
         agentsLoading={page.agentsLoading}
         agentsError={page.agentsError}
         sessions={page.sessions}
-        onNewSession={page.handleNewSession}
-        isCreatingSession={page.isCreatingSession}
-        pendingSessionAgentName={page.pendingSessionAgentName}
-        pendingSessionWorkspaceId={page.pendingSessionWorkspaceId}
       />
       <main
         data-testid="app-content"
@@ -78,7 +81,7 @@ function AppLayout() {
         submitError={page.sessionCreate.submitError}
         workspace={page.sessionCreate.workspace}
       />
-    </>
+    </SessionCreateProvider>
   );
 }
 
diff --git a/web/src/routes/_app/-session.$id.test.tsx b/web/src/routes/_app/-agents.$name.sessions.$id.test.tsx
similarity index 96%
rename from web/src/routes/_app/-session.$id.test.tsx
rename to web/src/routes/_app/-agents.$name.sessions.$id.test.tsx
index 4071a1055..1524a854a 100644
--- a/web/src/routes/_app/-session.$id.test.tsx
+++ b/web/src/routes/_app/-agents.$name.sessions.$id.test.tsx
@@ -34,7 +34,7 @@ const {
 vi.mock("@tanstack/react-router", () => ({
   createFileRoute: (_path: string) => (opts: { component: () => ReactNode }) => ({
     component: opts.component,
-    useParams: () => ({ id: "sess_123" }),
+    useParams: () => ({ name: "claude-agent", id: "sess_123" }),
   }),
   useNavigate: () => mockNavigate,
 }));
@@ -85,7 +85,7 @@ vi.mock("@assistant-ui/react", () => ({
   ) => selector({ thread: { messages: [], isRunning: false } }),
 }));
 
-import { Route } from "./session.$id";
+import { Route } from "./agents.$name.sessions.$id";
 
 const SessionPage = (Route as unknown as { component: () => ReactNode }).component;
 
@@ -104,7 +104,7 @@ function makeSession(overrides: Partial<SessionPayload> = {}): SessionPayload {
   };
 }
 
-describe("Session route — resume failure UX", () => {
+describe("Nested agent session route — resume failure UX", () => {
   beforeEach(() => {
     mockNavigate.mockReset();
     mockResume.mutate.mockReset();
diff --git a/web/src/routes/_app/agents.$name.sessions.$id.tsx b/web/src/routes/_app/agents.$name.sessions.$id.tsx
new file mode 100644
index 000000000..7fc38c3bc
--- /dev/null
+++ b/web/src/routes/_app/agents.$name.sessions.$id.tsx
@@ -0,0 +1,140 @@
+import { useEffect } from "react";
+import { AlertCircle, Loader2 } from "lucide-react";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { toast } from "sonner";
+
+import { SessionThread } from "@/components/assistant-ui/session-thread";
+import { useSessionPageControls } from "@/hooks/routes/use-session-page-controls";
+import {
+  ChatHeader,
+  SessionChatRuntimeProvider,
+  SessionInspector,
+  SessionResumeFailure,
+  useSession,
+  type SessionPayload,
+} from "@/systems/session";
+import { useWorkspaces } from "@/systems/workspace";
+
+export const Route = createFileRoute("/_app/agents/$name/sessions/$id")({
+  component: SessionPage,
+});
+
+function SessionPageContent({
+  agentName,
+  sessionId,
+  session,
+  workspaceName,
+  onDeleteSuccess,
+}: {
+  agentName: string;
+  sessionId: string;
+  session: SessionPayload;
+  workspaceName?: string;
+  onDeleteSuccess: () => void;
+}) {
+  const {
+    canClear,
+    canPrompt,
+    handleCancelPrompt,
+    handleClear,
+    handleDelete,
+    handleDismissResumeFailure,
+    handleResume,
+    handleStop,
+    isClearing,
+    isDeleting,
+    isResuming,
+    isStopping,
+    messages,
+    resumeFailure,
+  } = useSessionPageControls(sessionId, session.state, { onDeleteSuccess });
+
+  return (
+    <div className="flex min-h-0 min-w-0 flex-1 overflow-hidden">
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+        <ChatHeader
+          session={session}
+          onDelete={handleDelete}
+          onStop={handleStop}
+          onResume={handleResume}
+          isDeleting={isDeleting}
+          isStopping={isStopping}
+          isResuming={isResuming}
+          workspaceName={workspaceName}
+        />
+        {resumeFailure ? (
+          <SessionResumeFailure
+            agentName={resumeFailure.providerUnavailable?.agentName ?? agentName}
+            isRetrying={isResuming}
+            message={resumeFailure.message}
+            missingProvider={resumeFailure.providerUnavailable?.missingProvider ?? null}
+            onDismiss={handleDismissResumeFailure}
+            onRetry={handleResume}
+            sessionId={sessionId}
+          />
+        ) : null}
+        <SessionThread
+          sessionId={sessionId}
+          agentName={agentName}
+          canPrompt={canPrompt}
+          onCancelPrompt={handleCancelPrompt}
+          onClearConversation={handleClear}
+          canClearConversation={canClear}
+          isClearingConversation={isClearing}
+        />
+      </div>
+      <SessionInspector messages={messages} />
+    </div>
+  );
+}
+
+function SessionPage() {
+  const { name, id } = Route.useParams();
+  const navigate = useNavigate();
+  const { data: session, isLoading, error } = useSession(id);
+  const { data: workspaces } = useWorkspaces();
+
+  useEffect(() => {
+    if (error?.message?.includes("not found")) {
+      toast.error("Session not found");
+      void navigate({ to: "/agents/$name", params: { name } });
+    }
+  }, [error, navigate, name]);
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-1 items-center justify-center">
+        <Loader2 className="size-5 animate-spin text-[color:var(--color-text-tertiary)]" />
+      </div>
+    );
+  }
+
+  if (!session) {
+    return (
+      <div className="flex flex-1 items-center justify-center">
+        <div className="flex flex-col items-center gap-2 text-center">
+          <AlertCircle className="size-6 text-[color:var(--color-danger)]" />
+          <p className="text-sm text-[color:var(--color-text-tertiary)]">
+            {error?.message ?? "Session not found"}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const workspaceName = workspaces?.find(workspace => workspace.id === session.workspace_id)?.name;
+
+  return (
+    <SessionChatRuntimeProvider key={id} sessionId={id} workspaceId={session.workspace_id}>
+      <SessionPageContent
+        agentName={session.agent_name ?? name}
+        sessionId={id}
+        session={session}
+        workspaceName={workspaceName}
+        onDeleteSuccess={() => {
+          void navigate({ to: "/agents/$name", params: { name } });
+        }}
+      />
+    </SessionChatRuntimeProvider>
+  );
+}
diff --git a/web/src/routes/_app/agents.$name.tsx b/web/src/routes/_app/agents.$name.tsx
new file mode 100644
index 000000000..660d31e38
--- /dev/null
+++ b/web/src/routes/_app/agents.$name.tsx
@@ -0,0 +1,91 @@
+import { AlertCircle, Compass, Loader2 } from "lucide-react";
+import { Outlet, createFileRoute, useChildMatches } from "@tanstack/react-router";
+
+import { Empty } from "@agh/ui";
+
+import {
+  AgentInfoPanel,
+  AgentPageHeader,
+  AgentSessionsList,
+  AgentStatsGrid,
+} from "@/systems/agent";
+import { useAgentDetailPage } from "@/hooks/routes/use-agent-detail-page";
+
+export const Route = createFileRoute("/_app/agents/$name")({
+  component: AgentDetailPage,
+});
+
+function AgentDetailPage() {
+  const { name } = Route.useParams();
+  const childMatches = useChildMatches();
+  const hasChildMatch = childMatches.length > 0;
+  const page = useAgentDetailPage(name);
+
+  if (hasChildMatch) {
+    return <Outlet />;
+  }
+
+  if (page.agentLoading) {
+    return (
+      <div className="flex flex-1 items-center justify-center" data-testid="agent-detail-loading">
+        <Loader2 className="size-5 animate-spin text-[color:var(--color-text-tertiary)]" />
+      </div>
+    );
+  }
+
+  if (page.agentError || !page.agent) {
+    return (
+      <div className="flex flex-1 items-center justify-center px-6 py-8">
+        <Empty
+          icon={AlertCircle}
+          title="Agent not found"
+          description={
+            page.agentError?.message ?? `No agent named "${name}" was found in this workspace.`
+          }
+          action={
+            <button
+              type="button"
+              onClick={page.onGoHome}
+              className="inline-flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--color-divider)] px-3 py-1.5 text-[12px] text-[color:var(--color-text-secondary)] transition-colors hover:border-[color:var(--color-accent)] hover:text-[color:var(--color-text-primary)]"
+              data-testid="agent-detail-go-home"
+            >
+              <Compass className="size-3.5" />
+              Go home
+            </button>
+          }
+          data-testid="agent-detail-not-found"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-0 min-w-0 flex-1 overflow-hidden" data-testid="agent-detail-page">
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+        <AgentPageHeader
+          agent={page.agent}
+          sessions={page.sessions}
+          isRefreshing={page.isRefreshing}
+          onRefresh={page.onRefresh}
+          onConfigure={page.onConfigure}
+          onNewSession={page.onNewSession}
+          isCreatingSession={page.isCreatingForAgent}
+          newSessionDisabled={page.newSessionDisabled}
+        />
+        <div
+          className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-6 py-5"
+          data-testid="agent-detail-body"
+        >
+          <AgentStatsGrid sessions={page.sessions} />
+          <AgentSessionsList
+            agentName={name}
+            sessions={page.sessions}
+            isLoading={page.sessionsLoading}
+            isError={page.sessionsError}
+          />
+        </div>
+      </div>
+      <AgentInfoPanel agent={page.agent} />
+    </div>
+  );
+}
diff --git a/web/src/routes/_app/session.$id.tsx b/web/src/routes/_app/session.$id.tsx
index 657f14c7c..913dd17e4 100644
--- a/web/src/routes/_app/session.$id.tsx
+++ b/web/src/routes/_app/session.$id.tsx
@@ -1,137 +1,56 @@
 import { useEffect } from "react";
 import { AlertCircle, Loader2 } from "lucide-react";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { toast } from "sonner";
 
-import { SessionThread } from "@/components/assistant-ui/session-thread";
-import { useSessionPageControls } from "@/hooks/routes/use-session-page-controls";
-import {
-  ChatHeader,
-  SessionChatRuntimeProvider,
-  SessionInspector,
-  SessionResumeFailure,
-  useSession,
-  type SessionPayload,
-} from "@/systems/session";
-import { useWorkspaces } from "@/systems/workspace";
+import { useSession } from "@/systems/session";
 
+/**
+ * Permalink-by-id redirect. Resolves the agent name for a session and
+ * forwards to the canonical `/agents/$name/sessions/$id` route. Used by
+ * external surfaces (automation history, task tree) that hold a session id
+ * without the originating agent in scope.
+ */
 export const Route = createFileRoute("/_app/session/$id")({
-  component: SessionPage,
+  component: SessionPermalinkPage,
 });
 
-function SessionPageContent({
-  sessionId,
-  session,
-  workspaceName,
-  onDeleteSuccess,
-}: {
-  sessionId: string;
-  session: SessionPayload;
-  workspaceName?: string;
-  onDeleteSuccess: () => void;
-}) {
-  const {
-    canClear,
-    canPrompt,
-    handleCancelPrompt,
-    handleClear,
-    handleDelete,
-    handleDismissResumeFailure,
-    handleResume,
-    handleStop,
-    isClearing,
-    isDeleting,
-    isResuming,
-    isStopping,
-    messages,
-    resumeFailure,
-  } = useSessionPageControls(sessionId, session.state, { onDeleteSuccess });
-
-  return (
-    <div className="flex min-h-0 min-w-0 flex-1 overflow-hidden">
-      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
-        <ChatHeader
-          session={session}
-          onDelete={handleDelete}
-          onStop={handleStop}
-          onResume={handleResume}
-          isDeleting={isDeleting}
-          isStopping={isStopping}
-          isResuming={isResuming}
-          workspaceName={workspaceName}
-        />
-        {resumeFailure ? (
-          <SessionResumeFailure
-            agentName={resumeFailure.providerUnavailable?.agentName ?? session.agent_name}
-            isRetrying={isResuming}
-            message={resumeFailure.message}
-            missingProvider={resumeFailure.providerUnavailable?.missingProvider ?? null}
-            onDismiss={handleDismissResumeFailure}
-            onRetry={handleResume}
-            sessionId={sessionId}
-          />
-        ) : null}
-        <SessionThread
-          sessionId={sessionId}
-          agentName={session.agent_name}
-          canPrompt={canPrompt}
-          onCancelPrompt={handleCancelPrompt}
-          onClearConversation={handleClear}
-          canClearConversation={canClear}
-          isClearingConversation={isClearing}
-        />
-      </div>
-      <SessionInspector messages={messages} />
-    </div>
-  );
-}
-
-function SessionPage() {
+function SessionPermalinkPage() {
   const { id } = Route.useParams();
   const navigate = useNavigate();
   const { data: session, isLoading, error } = useSession(id);
-  const { data: workspaces } = useWorkspaces();
 
   useEffect(() => {
-    if (error?.message?.includes("not found")) {
-      toast.error("Session not found");
-      navigate({ to: "/" });
+    if (session?.agent_name) {
+      void navigate({
+        to: "/agents/$name/sessions/$id",
+        params: { name: session.agent_name, id },
+        replace: true,
+      });
     }
-  }, [error, navigate]);
+  }, [session?.agent_name, id, navigate]);
 
-  if (isLoading) {
+  if (isLoading || (session && session.agent_name)) {
     return (
-      <div className="flex flex-1 items-center justify-center">
+      <div
+        className="flex flex-1 items-center justify-center"
+        data-testid="session-permalink-loading"
+      >
         <Loader2 className="size-5 animate-spin text-[color:var(--color-text-tertiary)]" />
       </div>
     );
   }
 
-  if (!session) {
-    return (
-      <div className="flex flex-1 items-center justify-center">
-        <div className="flex flex-col items-center gap-2 text-center">
-          <AlertCircle className="size-6 text-[color:var(--color-danger)]" />
-          <p className="text-sm text-[color:var(--color-text-tertiary)]">
-            {error?.message ?? "Session not found"}
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  const workspaceName = workspaces?.find(workspace => workspace.id === session.workspace_id)?.name;
-
   return (
-    <SessionChatRuntimeProvider key={id} sessionId={id} workspaceId={session.workspace_id}>
-      <SessionPageContent
-        sessionId={id}
-        session={session}
-        workspaceName={workspaceName}
-        onDeleteSuccess={() => {
-          void navigate({ to: "/" });
-        }}
-      />
-    </SessionChatRuntimeProvider>
+    <div
+      className="flex flex-1 items-center justify-center"
+      data-testid="session-permalink-not-found"
+    >
+      <div className="flex flex-col items-center gap-2 text-center">
+        <AlertCircle className="size-6 text-[color:var(--color-danger)]" />
+        <p className="text-sm text-[color:var(--color-text-tertiary)]">
+          {error?.message ?? "Session not found"}
+        </p>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/routes/_app/stories/-session.stories.tsx b/web/src/routes/_app/stories/-agents.$name.sessions.$id.stories.tsx
similarity index 67%
rename from web/src/routes/_app/stories/-session.stories.tsx
rename to web/src/routes/_app/stories/-agents.$name.sessions.$id.stories.tsx
index 836e38ebf..629214226 100644
--- a/web/src/routes/_app/stories/-session.stories.tsx
+++ b/web/src/routes/_app/stories/-agents.$name.sessions.$id.stories.tsx
@@ -11,20 +11,24 @@ import {
 
 const meta: Meta<typeof StorybookRouteCanvas> = {
   ...createRouteStoryMeta(
-    "routes/app/session",
-    "Session route stories rendered via the real router, including transcript hydration, stopped sessions, permission prompts and not-found redirect behavior."
+    "routes/app/agents/session",
+    "Nested session chat route under an agent. Mirrors the previous routes/app/session stories — transcript hydration, stopped session, permission prompt, loading and not-found behaviors — through the canonical /agents/$name/sessions/$id URL."
   ),
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const codexSessionRoute = "/agents/codex-agent/sessions/sess-storybook";
+const claudeStoppedSessionRoute = "/agents/claude-agent/sessions/sess-reviewer";
+const missingSessionRoute = "/agents/codex-agent/sessions/sess-missing";
+
 /**
  * Active session transcript route for the primary Storybook session.
  */
 export const Default: Story = {
   args: {},
-  parameters: appRouteParameters("/session/sess-storybook"),
+  parameters: appRouteParameters(codexSessionRoute),
 };
 
 /**
@@ -33,7 +37,7 @@ export const Default: Story = {
 export const Loading: Story = {
   args: {},
   parameters: {
-    ...appRouteParameters("/session/sess-storybook"),
+    ...appRouteParameters(codexSessionRoute),
     ...storybookMswParameters({
       session: [
         http.get("/api/sessions/:id", async () => {
@@ -50,7 +54,7 @@ export const Loading: Story = {
  */
 export const Stopped: Story = {
   args: {},
-  parameters: appRouteParameters("/session/sess-reviewer"),
+  parameters: appRouteParameters(claudeStoppedSessionRoute),
 };
 
 /**
@@ -59,7 +63,7 @@ export const Stopped: Story = {
 export const PendingPermission: Story = {
   args: {},
   parameters: {
-    ...appRouteParameters("/session/sess-storybook"),
+    ...appRouteParameters(codexSessionRoute),
     ...storybookMswParameters({
       session: [
         http.get("/api/sessions/:id/transcript", () =>
@@ -71,12 +75,12 @@ export const PendingPermission: Story = {
 };
 
 /**
- * Not-found session behavior, which redirects back to the root empty state.
+ * Not-found session behavior — toast fires and navigation falls back to the parent agent route.
  */
 export const NotFoundRedirect: Story = {
   args: {},
   parameters: {
-    ...appRouteParameters("/session/sess-missing"),
+    ...appRouteParameters(missingSessionRoute),
     ...storybookMswParameters({
       session: [
         http.get("/api/sessions/:id", ({ params }) =>
diff --git a/web/src/routes/_app/stories/-agents.$name.stories.tsx b/web/src/routes/_app/stories/-agents.$name.stories.tsx
new file mode 100644
index 000000000..4492139a5
--- /dev/null
+++ b/web/src/routes/_app/stories/-agents.$name.stories.tsx
@@ -0,0 +1,183 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { delay, http, HttpResponse } from "msw";
+import { expect, within } from "storybook/test";
+
+import { agentFixtures } from "@/systems/agent/mocks";
+import { sessionFixtures } from "@/systems/session/mocks";
+import type { SessionPayload } from "@/systems/session/types";
+import { storybookMswParameters } from "@/storybook/msw";
+import {
+  StorybookRouteCanvas,
+  StorybookWorkspaceSetup,
+  appRouteParameters,
+  createRouteStoryMeta,
+} from "@/storybook/route-story";
+
+const meta: Meta<typeof StorybookRouteCanvas> = {
+  ...createRouteStoryMeta(
+    "routes/app/agents/detail",
+    "Agent detail route stories rendered through the real router. Covers the live sessions table, the right-rail MCP panel, the empty/loading branches, and the not-found state."
+  ),
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const codexSessions: SessionPayload[] = sessionFixtures.filter(
+  session => session.agent_name === "codex-agent"
+);
+
+const codexAgentRoute = "/agents/codex-agent";
+const claudeAgentRoute = "/agents/claude-agent";
+const missingAgentRoute = "/agents/ghost-agent";
+
+/**
+ * Default agent detail page for the Storybook codex agent — sessions table, status pill, stats grid.
+ */
+export const Default: Story = {
+  args: {},
+  parameters: appRouteParameters(codexAgentRoute),
+  render: () => <StorybookWorkspaceSetup />,
+  tags: ["play-fn"],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.findByTestId("agent-page-header")).resolves.toBeDefined();
+    await expect(canvas.findByTestId("agent-sessions-table")).resolves.toBeDefined();
+  },
+};
+
+/**
+ * Agent that has no sessions yet — empty state inside the sessions panel + IDLE status pill.
+ */
+export const NoSessions: Story = {
+  args: {},
+  parameters: {
+    ...appRouteParameters(claudeAgentRoute),
+    ...storybookMswParameters({
+      session: [http.get("/api/sessions", () => HttpResponse.json({ sessions: [] }))],
+    }),
+  },
+  render: () => <StorybookWorkspaceSetup />,
+  tags: ["play-fn"],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.findByTestId("agent-sessions-empty")).resolves.toBeDefined();
+  },
+};
+
+/**
+ * Sessions list loading branch while `/api/sessions` is still pending.
+ */
+export const SessionsLoading: Story = {
+  args: {},
+  parameters: {
+    ...appRouteParameters(codexAgentRoute),
+    ...storybookMswParameters({
+      session: [
+        http.get("/api/sessions", async () => {
+          await delay("infinite");
+          return HttpResponse.json({ sessions: [] });
+        }),
+      ],
+    }),
+  },
+  render: () => <StorybookWorkspaceSetup />,
+};
+
+/**
+ * Agent detail loading branch — `/api/agents/:name` is in flight while the shell stays mounted.
+ */
+export const AgentLoading: Story = {
+  args: {},
+  parameters: {
+    ...appRouteParameters(codexAgentRoute),
+    ...storybookMswParameters({
+      agent: [
+        http.get("/api/agents/:name", async () => {
+          await delay("infinite");
+          return HttpResponse.json({ agent: null });
+        }),
+      ],
+    }),
+  },
+  render: () => <StorybookWorkspaceSetup />,
+};
+
+/**
+ * Not-found branch: the agent name does not match anything in the workspace.
+ */
+export const NotFound: Story = {
+  args: {},
+  parameters: {
+    ...appRouteParameters(missingAgentRoute),
+    ...storybookMswParameters({
+      agent: [
+        http.get("/api/agents/:name", ({ params }) =>
+          HttpResponse.json({ error: `Agent not found: ${String(params.name)}` }, { status: 404 })
+        ),
+      ],
+    }),
+  },
+  render: () => <StorybookWorkspaceSetup />,
+  tags: ["play-fn"],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.findByTestId("agent-detail-not-found")).resolves.toBeDefined();
+  },
+};
+
+/**
+ * Failed-session branch — at least one session has a populated failure payload, surfacing the FAILED chip.
+ */
+export const WithFailedSession: Story = {
+  args: {},
+  parameters: {
+    ...appRouteParameters(codexAgentRoute),
+    ...storybookMswParameters({
+      session: [
+        http.get("/api/sessions", () =>
+          HttpResponse.json({
+            sessions: [
+              ...codexSessions,
+              {
+                ...codexSessions[0],
+                id: "sess-storybook-failed",
+                name: "Failed verification",
+                state: "stopped" as const,
+                stop_reason: "agent_crashed" as const,
+                failure: {
+                  kind: "agent_crashed",
+                  summary: "agent terminated unexpectedly",
+                },
+                updated_at: "2026-04-17T18:42:00Z",
+              },
+            ],
+          })
+        ),
+      ],
+    }),
+  },
+  render: () => <StorybookWorkspaceSetup />,
+  tags: ["play-fn"],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(
+      canvas.findByTestId("agent-session-status-sess-storybook-failed")
+    ).resolves.toHaveTextContent("FAILED");
+  },
+};
+
+/**
+ * Live agents list returning many agents — confirms the sidebar still resolves the active row when the
+ * detail route's agent is deeper in the list.
+ */
+export const ManyAgents: Story = {
+  args: {},
+  parameters: {
+    ...appRouteParameters(codexAgentRoute),
+    ...storybookMswParameters({
+      agent: [http.get("/api/agents", () => HttpResponse.json({ agents: agentFixtures }))],
+    }),
+  },
+  render: () => <StorybookWorkspaceSetup />,
+};
diff --git a/web/src/systems/agent/components/agent-info-panel.tsx b/web/src/systems/agent/components/agent-info-panel.tsx
new file mode 100644
index 000000000..9148528b0
--- /dev/null
+++ b/web/src/systems/agent/components/agent-info-panel.tsx
@@ -0,0 +1,69 @@
+import { ScrollArea, Section, Empty, MonoBadge, cn } from "@agh/ui";
+import { Plug } from "lucide-react";
+
+import type { AgentPayload } from "../types";
+
+export interface AgentInfoPanelProps {
+  agent: AgentPayload;
+  className?: string;
+}
+
+const PANEL_WIDTH = 320;
+
+export function AgentInfoPanel({ agent, className }: AgentInfoPanelProps) {
+  const mcpServers = agent.mcp_servers ?? [];
+  return (
+    <aside
+      data-testid="agent-info-panel"
+      aria-label={`${agent.name} agent details`}
+      style={{ width: PANEL_WIDTH }}
+      className={cn(
+        "hidden shrink-0 flex-col overflow-hidden border-l border-[color:var(--color-divider)] bg-[color:var(--color-canvas)] xl:flex",
+        className
+      )}
+    >
+      <ScrollArea className="flex-1 min-h-0">
+        <div className="flex flex-col gap-6 px-4 py-5">
+          <Section label="MCP Servers" data-testid="agent-info-mcp-servers">
+            {mcpServers.length === 0 ? (
+              <Empty
+                icon={Plug}
+                title="No MCP servers"
+                description="This agent does not declare any MCP servers."
+                data-testid="agent-info-mcp-empty"
+                fill={false}
+              />
+            ) : (
+              <ul className="flex flex-col gap-2" data-testid="agent-info-mcp-list">
+                {mcpServers.map(server => {
+                  const transport = server.transport ?? "stdio";
+                  return (
+                    <li
+                      key={server.name}
+                      data-testid={`agent-info-mcp-row-${server.name}`}
+                      className="flex items-center justify-between gap-2 rounded-[var(--radius-md)] border border-[color:var(--color-divider)] bg-[color:var(--color-surface)] px-3 py-2"
+                    >
+                      <div className="flex min-w-0 flex-col gap-0.5">
+                        <span className="truncate text-[12.5px] font-medium text-[color:var(--color-text-primary)]">
+                          {server.name}
+                        </span>
+                        {server.command || server.url ? (
+                          <span className="truncate font-mono text-[10px] tracking-[0.04em] text-[color:var(--color-text-tertiary)]">
+                            {server.url ?? server.command}
+                          </span>
+                        ) : null}
+                      </div>
+                      <MonoBadge tone="info" data-testid={`agent-info-mcp-kind-${server.name}`}>
+                        {transport}
+                      </MonoBadge>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </Section>
+        </div>
+      </ScrollArea>
+    </aside>
+  );
+}
diff --git a/web/src/systems/agent/components/agent-page-header.tsx b/web/src/systems/agent/components/agent-page-header.tsx
new file mode 100644
index 000000000..c7ec9fbbf
--- /dev/null
+++ b/web/src/systems/agent/components/agent-page-header.tsx
@@ -0,0 +1,105 @@
+import { Plus, RefreshCw, Settings2 } from "lucide-react";
+
+import { Button, MonoBadge, PageHeader, Toolbar, cn } from "@agh/ui";
+
+import { AgentIcon } from "./agent-icon";
+import type { AgentPayload } from "../types";
+import type { SessionPayload } from "@/systems/session";
+
+export interface AgentPageHeaderProps {
+  agent: AgentPayload;
+  sessions: SessionPayload[];
+  isRefreshing: boolean;
+  onRefresh: () => void;
+  onConfigure: () => void;
+  onNewSession: () => void;
+  isCreatingSession: boolean;
+  newSessionDisabled: boolean;
+}
+
+export function AgentPageHeader({
+  agent,
+  sessions,
+  isRefreshing,
+  onRefresh,
+  onConfigure,
+  onNewSession,
+  isCreatingSession,
+  newSessionDisabled,
+}: AgentPageHeaderProps) {
+  const activeCount = sessions.filter(session => session.state === "active").length;
+  const status =
+    activeCount > 0
+      ? { label: "ACTIVE", tone: "success" as const }
+      : { label: "IDLE", tone: "neutral" as const };
+  const meta = (
+    <div className="flex items-center gap-3 font-mono text-[11px] uppercase tracking-[0.06em] text-[color:var(--color-text-tertiary)]">
+      <span data-testid="agent-page-header-provider">{agent.provider}</span>
+      <span aria-hidden="true">·</span>
+      <span data-testid="agent-page-header-session-count">
+        {sessions.length} {sessions.length === 1 ? "session" : "sessions"}
+      </span>
+    </div>
+  );
+
+  return (
+    <div className="flex flex-col" data-testid="agent-page-header">
+      <PageHeader
+        title={
+          <span className="flex items-center gap-2">
+            <span
+              aria-hidden="true"
+              className="inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-[color:var(--color-surface-elevated)] text-[color:var(--color-accent)]"
+            >
+              <AgentIcon provider={agent.provider} tone="accent" className="size-3.5" />
+            </span>
+            <span className="truncate">{agent.name}</span>
+            <MonoBadge tone={status.tone} data-testid="agent-page-header-status">
+              {status.label}
+            </MonoBadge>
+          </span>
+        }
+        meta={meta}
+      />
+      <Toolbar data-testid="agent-page-toolbar">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={onRefresh}
+          disabled={isRefreshing}
+          data-testid="agent-page-refresh"
+        >
+          <RefreshCw
+            aria-hidden="true"
+            className={cn("size-3.5", isRefreshing && "animate-spin")}
+          />
+          Refresh
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={onConfigure}
+          data-testid="agent-page-configure"
+        >
+          <Settings2 aria-hidden="true" className="size-3.5" />
+          Configure
+        </Button>
+        <Button
+          type="button"
+          variant="default"
+          size="sm"
+          onClick={onNewSession}
+          disabled={newSessionDisabled}
+          aria-busy={isCreatingSession}
+          data-testid="agent-page-new-session"
+          className="ml-auto"
+        >
+          <Plus aria-hidden="true" className="size-3.5" />
+          New session
+        </Button>
+      </Toolbar>
+    </div>
+  );
+}
diff --git a/web/src/systems/agent/components/agent-sessions-list.tsx b/web/src/systems/agent/components/agent-sessions-list.tsx
new file mode 100644
index 000000000..53d735a0d
--- /dev/null
+++ b/web/src/systems/agent/components/agent-sessions-list.tsx
@@ -0,0 +1,177 @@
+import { Link } from "@tanstack/react-router";
+import { MessageSquare } from "lucide-react";
+
+import {
+  Empty,
+  MonoBadge,
+  Skeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  cn,
+} from "@agh/ui";
+
+import { getAgentSessionStatus } from "../lib/session-status";
+import type { SessionPayload } from "@/systems/session";
+
+export interface AgentSessionsListProps {
+  agentName: string;
+  sessions: SessionPayload[];
+  isLoading: boolean;
+  isError: boolean;
+}
+
+export function AgentSessionsList({
+  agentName,
+  sessions,
+  isLoading,
+  isError,
+}: AgentSessionsListProps) {
+  if (isLoading) {
+    return <AgentSessionsSkeleton />;
+  }
+
+  if (isError) {
+    return (
+      <Empty
+        icon={MessageSquare}
+        title="Couldn't load sessions"
+        description="The session list failed to load. Try refreshing the page."
+        data-testid="agent-sessions-error"
+        fill={false}
+      />
+    );
+  }
+
+  if (sessions.length === 0) {
+    return (
+      <Empty
+        icon={MessageSquare}
+        title="No sessions yet"
+        description={`Start a new session for ${agentName} from the toolbar above.`}
+        data-testid="agent-sessions-empty"
+        fill={false}
+      />
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto" data-testid="agent-sessions-table-wrapper">
+      <Table data-testid="agent-sessions-table">
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[42%]">Session</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead className="text-right">Duration</TableHead>
+            <TableHead className="text-right">Iterations</TableHead>
+            <TableHead className="text-right">Last activity</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {sessions.map(session => (
+            <AgentSessionRow key={session.id} agentName={agentName} session={session} />
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+interface AgentSessionRowProps {
+  agentName: string;
+  session: SessionPayload;
+}
+
+function AgentSessionRow({ agentName, session }: AgentSessionRowProps) {
+  const status = getAgentSessionStatus(session);
+  const title = session.name?.trim() || session.id.slice(0, 12);
+  return (
+    <TableRow data-testid={`agent-session-row-${session.id}`} data-state={status.kind}>
+      <TableCell>
+        <Link
+          to="/agents/$name/sessions/$id"
+          params={{ name: agentName, id: session.id }}
+          className={cn(
+            "flex flex-col gap-0.5 text-[13px] text-[color:var(--color-text-primary)]",
+            "transition-colors hover:text-[color:var(--color-accent)]"
+          )}
+          data-testid={`agent-session-link-${session.id}`}
+        >
+          <span className="truncate font-medium">{title}</span>
+          <span className="font-mono text-[10px] uppercase tracking-[0.06em] text-[color:var(--color-text-tertiary)]">
+            {session.provider}
+          </span>
+        </Link>
+      </TableCell>
+      <TableCell>
+        <MonoBadge tone={status.tone} data-testid={`agent-session-status-${session.id}`}>
+          {status.label}
+        </MonoBadge>
+      </TableCell>
+      <TableCell className="text-right font-mono text-[12px] text-[color:var(--color-text-secondary)]">
+        {formatDuration(session.activity?.elapsed_seconds)}
+      </TableCell>
+      <TableCell className="text-right font-mono text-[12px] text-[color:var(--color-text-secondary)]">
+        {formatIterations(session.activity?.iteration_current, session.activity?.iteration_max)}
+      </TableCell>
+      <TableCell className="text-right font-mono text-[12px] text-[color:var(--color-text-secondary)]">
+        {formatRelativeTime(session.activity?.last_activity_at ?? session.updated_at)}
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function AgentSessionsSkeleton() {
+  return (
+    <div
+      className="flex flex-col gap-2 px-1 py-2"
+      data-testid="agent-sessions-loading"
+      role="status"
+      aria-live="polite"
+    >
+      {Array.from({ length: 4 }, (_, index) => (
+        <Skeleton key={index} className="h-9 w-full rounded-[var(--radius-md)]" />
+      ))}
+    </div>
+  );
+}
+
+function formatDuration(seconds: number | undefined | null): string {
+  if (typeof seconds !== "number" || !Number.isFinite(seconds) || seconds <= 0) return "—";
+  const total = Math.round(seconds);
+  if (total < 60) return `${total}s`;
+  const minutes = Math.floor(total / 60);
+  const remainder = total % 60;
+  if (minutes < 60) return remainder === 0 ? `${minutes}m` : `${minutes}m ${remainder}s`;
+  const hours = Math.floor(minutes / 60);
+  const remainderMinutes = minutes % 60;
+  return remainderMinutes === 0 ? `${hours}h` : `${hours}h ${remainderMinutes}m`;
+}
+
+function formatIterations(current: number | undefined, max: number | undefined): string {
+  if (typeof current !== "number" || !Number.isFinite(current)) return "—";
+  if (typeof max === "number" && Number.isFinite(max) && max > 0) {
+    return `${current}/${max}`;
+  }
+  return `${current}`;
+}
+
+function formatRelativeTime(value: string | null | undefined): string {
+  if (!value) return "—";
+  const ts = new Date(value).getTime();
+  if (!Number.isFinite(ts)) return "—";
+  const diffMs = Date.now() - ts;
+  if (diffMs < 0) return "just now";
+  const seconds = Math.floor(diffMs / 1000);
+  if (seconds < 45) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return new Date(ts).toLocaleDateString();
+}
diff --git a/web/src/systems/agent/components/agent-stats-grid.tsx b/web/src/systems/agent/components/agent-stats-grid.tsx
new file mode 100644
index 000000000..b23347314
--- /dev/null
+++ b/web/src/systems/agent/components/agent-stats-grid.tsx
@@ -0,0 +1,121 @@
+import { Metric, cn } from "@agh/ui";
+
+import type { SessionPayload } from "@/systems/session";
+
+export interface AgentStatsGridProps {
+  sessions: SessionPayload[];
+  className?: string;
+}
+
+export function AgentStatsGrid({ sessions, className }: AgentStatsGridProps) {
+  const totals = computeTotals(sessions);
+  return (
+    <div
+      data-testid="agent-stats-grid"
+      className={cn("grid gap-3 sm:grid-cols-2 xl:grid-cols-4", className)}
+    >
+      <Metric
+        label="Active sessions"
+        value={totals.active}
+        tone={totals.active > 0 ? "success" : "default"}
+        detail={`${totals.total} total`}
+        data-testid="agent-stat-active"
+      />
+      <Metric
+        label="Total runtime"
+        value={formatDuration(totals.elapsedSeconds)}
+        data-testid="agent-stat-runtime"
+      />
+      <Metric
+        label="Failed"
+        value={totals.failed}
+        tone={totals.failed > 0 ? "danger" : "default"}
+        data-testid="agent-stat-failed"
+      />
+      <Metric
+        label="Last activity"
+        value={formatRelative(totals.lastActivityMs)}
+        data-testid="agent-stat-last-activity"
+      />
+    </div>
+  );
+}
+
+interface SessionTotals {
+  total: number;
+  active: number;
+  failed: number;
+  elapsedSeconds: number;
+  lastActivityMs: number | null;
+}
+
+function computeTotals(sessions: SessionPayload[]): SessionTotals {
+  let active = 0;
+  let failed = 0;
+  let elapsedSeconds = 0;
+  let lastActivityMs: number | null = null;
+
+  for (const session of sessions) {
+    if (session.state === "active") active += 1;
+    if (
+      session.failure ||
+      session.stop_reason === "agent_crashed" ||
+      session.stop_reason === "error"
+    ) {
+      failed += 1;
+    }
+    const elapsed = session.activity?.elapsed_seconds;
+    if (typeof elapsed === "number" && Number.isFinite(elapsed) && elapsed > 0) {
+      elapsedSeconds += elapsed;
+    }
+    const candidate = session.activity?.last_activity_at ?? session.updated_at;
+    if (candidate) {
+      const ts = new Date(candidate).getTime();
+      if (Number.isFinite(ts) && (lastActivityMs === null || ts > lastActivityMs)) {
+        lastActivityMs = ts;
+      }
+    }
+  }
+
+  return {
+    total: sessions.length,
+    active,
+    failed,
+    elapsedSeconds,
+    lastActivityMs,
+  };
+}
+
+function formatDuration(totalSeconds: number): string {
+  if (!Number.isFinite(totalSeconds) || totalSeconds <= 0) return "—";
+  const total = Math.round(totalSeconds);
+  if (total < 60) return `${total}s`;
+  const minutes = Math.floor(total / 60);
+  if (minutes < 60) {
+    const remainder = total % 60;
+    return remainder === 0 ? `${minutes}m` : `${minutes}m ${remainder}s`;
+  }
+  const hours = Math.floor(minutes / 60);
+  const remainderMinutes = minutes % 60;
+  if (hours < 24) {
+    return remainderMinutes === 0 ? `${hours}h` : `${hours}h ${remainderMinutes}m`;
+  }
+  const days = Math.floor(hours / 24);
+  const remainderHours = hours % 24;
+  return remainderHours === 0 ? `${days}d` : `${days}d ${remainderHours}h`;
+}
+
+function formatRelative(ts: number | null): string {
+  if (ts === null || !Number.isFinite(ts)) return "—";
+  const diffMs = Date.now() - ts;
+  if (diffMs < 0) return "just now";
+  const seconds = Math.floor(diffMs / 1000);
+  if (seconds < 45) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return new Date(ts).toLocaleDateString();
+}
diff --git a/web/src/systems/agent/components/stories/agent-info-panel.stories.tsx b/web/src/systems/agent/components/stories/agent-info-panel.stories.tsx
new file mode 100644
index 000000000..2e8ff8d17
--- /dev/null
+++ b/web/src/systems/agent/components/stories/agent-info-panel.stories.tsx
@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { primaryAgentFixture } from "@/systems/agent/mocks";
+import type { AgentPayload } from "@/systems/agent/types";
+import { StorySurface } from "@/storybook/story-layout";
+
+import { AgentInfoPanel } from "../agent-info-panel";
+
+const richAgentFixture: AgentPayload = {
+  ...primaryAgentFixture,
+  mcp_servers: [
+    {
+      name: "filesystem",
+      transport: "stdio",
+      command: "npx @modelcontextprotocol/server-filesystem",
+    },
+    { name: "github", transport: "http", url: "https://mcp.github.com" },
+    { name: "memory", transport: "stdio", command: "agh-memory --readonly" },
+  ],
+};
+
+const meta: Meta<typeof AgentInfoPanel> = {
+  title: "systems/agent/AgentInfoPanel",
+  component: AgentInfoPanel,
+  parameters: {
+    layout: "fullscreen",
+  },
+  args: {
+    agent: richAgentFixture,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function Frame({ children }: { children: React.ReactNode }) {
+  return (
+    <StorySurface className="flex">
+      <div className="flex flex-1 items-center justify-center text-sm text-[color:var(--color-text-secondary)]">
+        Agent detail content
+      </div>
+      {children}
+    </StorySurface>
+  );
+}
+
+/**
+ * Default — three MCP servers rendered as compact rows with transport chips.
+ */
+export const Default: Story = {
+  render: args => (
+    <Frame>
+      <AgentInfoPanel {...args} />
+    </Frame>
+  ),
+};
+
+/**
+ * Empty state — agent declares no MCP servers.
+ */
+export const Empty: Story = {
+  args: { agent: { ...primaryAgentFixture, mcp_servers: [] } },
+  render: args => (
+    <Frame>
+      <AgentInfoPanel {...args} />
+    </Frame>
+  ),
+};
diff --git a/web/src/systems/agent/components/stories/agent-page-header.stories.tsx b/web/src/systems/agent/components/stories/agent-page-header.stories.tsx
new file mode 100644
index 000000000..3ecd15d0e
--- /dev/null
+++ b/web/src/systems/agent/components/stories/agent-page-header.stories.tsx
@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { primaryAgentFixture } from "@/systems/agent/mocks";
+import { sessionFixtures } from "@/systems/session/mocks";
+import type { SessionPayload } from "@/systems/session/types";
+import { CenteredSurface } from "@/storybook/story-layout";
+
+import { AgentPageHeader } from "../agent-page-header";
+
+const meta: Meta<typeof AgentPageHeader> = {
+  title: "systems/agent/AgentPageHeader",
+  component: AgentPageHeader,
+  parameters: {
+    layout: "fullscreen",
+    router: { kind: "stub" as const },
+  },
+  args: {
+    agent: primaryAgentFixture,
+    sessions: sessionFixtures.filter(session => session.agent_name === primaryAgentFixture.name),
+    isRefreshing: false,
+    isCreatingSession: false,
+    newSessionDisabled: false,
+    onRefresh: fn(),
+    onConfigure: fn(),
+    onNewSession: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function Frame({ children }: { children: React.ReactNode }) {
+  return (
+    <CenteredSurface>
+      <div className="w-full max-w-4xl overflow-hidden rounded-2xl border border-[color:var(--color-divider)] bg-[color:var(--color-canvas)]">
+        {children}
+      </div>
+    </CenteredSurface>
+  );
+}
+
+const idleSessions: SessionPayload[] = sessionFixtures
+  .filter(session => session.agent_name === primaryAgentFixture.name)
+  .map(session => ({ ...session, state: "stopped" as const }));
+
+/**
+ * Active agent — at least one session has state === "active", surfaces the ACTIVE chip.
+ */
+export const Default: Story = {
+  render: args => (
+    <Frame>
+      <AgentPageHeader {...args} />
+    </Frame>
+  ),
+};
+
+/**
+ * No live sessions — IDLE chip + meta line still shows the historical session count.
+ */
+export const Idle: Story = {
+  args: { sessions: idleSessions },
+  render: args => (
+    <Frame>
+      <AgentPageHeader {...args} />
+    </Frame>
+  ),
+};
+
+/**
+ * Refresh in flight — the Refresh button shows the spinning RefreshCw icon and is disabled.
+ */
+export const Refreshing: Story = {
+  args: { isRefreshing: true },
+  render: args => (
+    <Frame>
+      <AgentPageHeader {...args} />
+    </Frame>
+  ),
+};
+
+/**
+ * Workspace not active — `+ New session` is disabled and aria-busy stays false.
+ */
+export const NoActiveWorkspace: Story = {
+  args: { newSessionDisabled: true },
+  render: args => (
+    <Frame>
+      <AgentPageHeader {...args} />
+    </Frame>
+  ),
+};
+
+/**
+ * Session creation pending for this agent — `+ New session` reports aria-busy.
+ */
+export const CreatingSession: Story = {
+  args: { isCreatingSession: true },
+  render: args => (
+    <Frame>
+      <AgentPageHeader {...args} />
+    </Frame>
+  ),
+};
diff --git a/web/src/systems/agent/components/stories/agent-sessions-list.stories.tsx b/web/src/systems/agent/components/stories/agent-sessions-list.stories.tsx
new file mode 100644
index 000000000..047695ec8
--- /dev/null
+++ b/web/src/systems/agent/components/stories/agent-sessions-list.stories.tsx
@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { sessionFixtures } from "@/systems/session/mocks";
+import type { SessionPayload } from "@/systems/session/types";
+import { PanelSurface } from "@/storybook/story-layout";
+
+import { AgentSessionsList } from "../agent-sessions-list";
+
+const codexSessions: SessionPayload[] = sessionFixtures.filter(
+  session => session.agent_name === "codex-agent"
+);
+
+const codexSessionsWithFailure: SessionPayload[] = [
+  ...codexSessions,
+  {
+    ...codexSessions[0],
+    id: "sess-storybook-failed",
+    name: "Failed verification",
+    state: "stopped",
+    stop_reason: "agent_crashed",
+    failure: { kind: "agent_crashed", summary: "agent terminated unexpectedly" },
+    activity: {
+      elapsed_seconds: 142,
+      idle_seconds: 0,
+      iteration_current: 4,
+      iteration_max: 6,
+      last_activity_at: "2026-04-17T18:42:00Z",
+      last_activity_kind: "tool",
+      last_progress_at: "2026-04-17T18:42:00Z",
+    },
+    updated_at: "2026-04-17T18:42:00Z",
+  },
+];
+
+const meta: Meta<typeof AgentSessionsList> = {
+  title: "systems/agent/AgentSessionsList",
+  component: AgentSessionsList,
+  parameters: {
+    layout: "fullscreen",
+    router: { kind: "stub" as const },
+  },
+  args: {
+    agentName: "codex-agent",
+    sessions: codexSessions,
+    isLoading: false,
+    isError: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function Frame({ children }: { children: React.ReactNode }) {
+  return (
+    <PanelSurface>
+      <div className="flex w-full flex-col gap-4 px-6 py-5">{children}</div>
+    </PanelSurface>
+  );
+}
+
+/**
+ * Default — table of sessions sorted by last activity with status chips and metadata.
+ */
+export const Default: Story = {
+  render: args => (
+    <Frame>
+      <AgentSessionsList {...args} />
+    </Frame>
+  ),
+};
+
+/**
+ * One session has a failure payload — surfaces the FAILED chip via the danger tone.
+ */
+export const WithFailure: Story = {
+  args: { sessions: codexSessionsWithFailure },
+  render: args => (
+    <Frame>
+      <AgentSessionsList {...args} />
+    </Frame>
+  ),
+};
+
+/**
+ * Empty state — no sessions for the agent yet.
+ */
+export const Empty: Story = {
+  args: { sessions: [] },
+  render: args => (
+    <Frame>
+      <AgentSessionsList {...args} />
+    </Frame>
+  ),
+};
+
+/**
+ * Loading skeleton while sessions are being fetched.
+ */
+export const Loading: Story = {
+  args: { isLoading: true, sessions: [] },
+  render: args => (
+    <Frame>
+      <AgentSessionsList {...args} />
+    </Frame>
+  ),
+};
+
+/**
+ * Error fallback when the sessions query rejects.
+ */
+export const Error: Story = {
+  args: { isError: true, sessions: [] },
+  render: args => (
+    <Frame>
+      <AgentSessionsList {...args} />
+    </Frame>
+  ),
+};
diff --git a/web/src/systems/agent/components/stories/agent-stats-grid.stories.tsx b/web/src/systems/agent/components/stories/agent-stats-grid.stories.tsx
new file mode 100644
index 000000000..58d603dce
--- /dev/null
+++ b/web/src/systems/agent/components/stories/agent-stats-grid.stories.tsx
@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { sessionFixtures } from "@/systems/session/mocks";
+import type { SessionPayload } from "@/systems/session/types";
+import { CenteredSurface } from "@/storybook/story-layout";
+
+import { AgentStatsGrid } from "../agent-stats-grid";
+
+const meta: Meta<typeof AgentStatsGrid> = {
+  title: "systems/agent/AgentStatsGrid",
+  component: AgentStatsGrid,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function Frame({ children }: { children: React.ReactNode }) {
+  return (
+    <CenteredSurface>
+      <div className="w-full max-w-4xl">{children}</div>
+    </CenteredSurface>
+  );
+}
+
+const codexSessions: SessionPayload[] = sessionFixtures.filter(
+  session => session.agent_name === "codex-agent"
+);
+
+const richSessions: SessionPayload[] = codexSessions.map(session => ({
+  ...session,
+  activity: {
+    elapsed_seconds: 1820,
+    idle_seconds: 30,
+    iteration_current: 12,
+    iteration_max: 30,
+    last_activity_at: "2026-04-17T18:10:00Z",
+    last_activity_kind: "tool",
+    last_progress_at: "2026-04-17T18:10:00Z",
+  },
+}));
+
+const failedSessions: SessionPayload[] = [
+  ...richSessions,
+  {
+    ...richSessions[0],
+    id: "sess-failure",
+    state: "stopped",
+    stop_reason: "agent_crashed",
+    failure: { kind: "agent_crashed", summary: "broker disconnect" },
+    activity: {
+      elapsed_seconds: 412,
+      idle_seconds: 0,
+      iteration_current: 2,
+      iteration_max: 6,
+      last_activity_at: "2026-04-17T18:55:00Z",
+      last_activity_kind: "tool",
+      last_progress_at: "2026-04-17T18:55:00Z",
+    },
+  },
+];
+
+/**
+ * Default — agent has one active session; runtime accumulates from `activity.elapsed_seconds`.
+ */
+export const Default: Story = {
+  args: { sessions: richSessions },
+  render: args => (
+    <Frame>
+      <AgentStatsGrid {...args} />
+    </Frame>
+  ),
+};
+
+/**
+ * Failure tone surfaces when at least one session has a populated failure payload.
+ */
+export const WithFailure: Story = {
+  args: { sessions: failedSessions },
+  render: args => (
+    <Frame>
+      <AgentStatsGrid {...args} />
+    </Frame>
+  ),
+};
+
+/**
+ * Empty state — no sessions yet, every metric falls back to the em-dash placeholder.
+ */
+export const Empty: Story = {
+  args: { sessions: [] },
+  render: args => (
+    <Frame>
+      <AgentStatsGrid {...args} />
+    </Frame>
+  ),
+};
diff --git a/web/src/systems/agent/hooks/use-agent-sessions.ts b/web/src/systems/agent/hooks/use-agent-sessions.ts
new file mode 100644
index 000000000..3f62cda73
--- /dev/null
+++ b/web/src/systems/agent/hooks/use-agent-sessions.ts
@@ -0,0 +1,51 @@
+import { useMemo } from "react";
+
+import { useSessions } from "@/systems/session";
+import type { SessionPayload } from "@/systems/session";
+
+interface UseAgentSessionsOptions {
+  enabled?: boolean;
+}
+
+interface UseAgentSessionsResult {
+  sessions: SessionPayload[];
+  isLoading: boolean;
+  isError: boolean;
+}
+
+function sessionRecencyTimestamp(session: SessionPayload): number {
+  const candidates = [session.activity?.last_activity_at, session.updated_at, session.created_at];
+  for (const value of candidates) {
+    if (typeof value !== "string" || value.length === 0) continue;
+    const ts = new Date(value).getTime();
+    if (Number.isFinite(ts)) return ts;
+  }
+  return 0;
+}
+
+function compareByRecencyDesc(left: SessionPayload, right: SessionPayload): number {
+  return sessionRecencyTimestamp(right) - sessionRecencyTimestamp(left);
+}
+
+export function useAgentSessions(
+  workspaceId: string | null,
+  agentName: string | undefined,
+  options?: UseAgentSessionsOptions
+): UseAgentSessionsResult {
+  const enabled = options?.enabled ?? workspaceId !== null;
+  const query = useSessions(workspaceId, { enabled });
+
+  const sessions = useMemo<SessionPayload[]>(() => {
+    if (!query.data || !agentName) return [];
+    return query.data
+      .filter(session => session.agent_name === agentName)
+      .slice()
+      .sort(compareByRecencyDesc);
+  }, [query.data, agentName]);
+
+  return {
+    sessions,
+    isLoading: query.isLoading,
+    isError: query.isError,
+  };
+}
diff --git a/web/src/systems/agent/index.ts b/web/src/systems/agent/index.ts
index 1a9f87427..a5c8f7f36 100644
--- a/web/src/systems/agent/index.ts
+++ b/web/src/systems/agent/index.ts
@@ -8,8 +8,20 @@ export { fetchAgent, fetchAgents } from "./adapters/agent-api";
 export { agentKeys } from "./lib/query-keys";
 export { agentDetailOptions, agentsListOptions } from "./lib/query-options";
 
+// Lib
+export {
+  getAgentSessionStatus,
+  type AgentSessionStatus,
+  type AgentSessionStatusKind,
+} from "./lib/session-status";
+
 // Hooks
 export { useAgent, useAgents } from "./hooks/use-agents";
+export { useAgentSessions } from "./hooks/use-agent-sessions";
 
 // Components
 export { AgentIcon, providerIconMap } from "./components/agent-icon";
+export { AgentPageHeader, type AgentPageHeaderProps } from "./components/agent-page-header";
+export { AgentSessionsList, type AgentSessionsListProps } from "./components/agent-sessions-list";
+export { AgentInfoPanel, type AgentInfoPanelProps } from "./components/agent-info-panel";
+export { AgentStatsGrid, type AgentStatsGridProps } from "./components/agent-stats-grid";
diff --git a/web/src/systems/agent/lib/session-status.ts b/web/src/systems/agent/lib/session-status.ts
new file mode 100644
index 000000000..c0b583130
--- /dev/null
+++ b/web/src/systems/agent/lib/session-status.ts
@@ -0,0 +1,45 @@
+import type { MonoBadgeTone } from "@agh/ui";
+
+import type { SessionPayload } from "@/systems/session";
+
+export type AgentSessionStatusKind = "active" | "starting" | "stopping" | "failed" | "done";
+
+export interface AgentSessionStatus {
+  kind: AgentSessionStatusKind;
+  label: string;
+  tone: MonoBadgeTone;
+}
+
+const ACTIVE_STATUS: AgentSessionStatus = { kind: "active", label: "ACTIVE", tone: "success" };
+const STARTING_STATUS: AgentSessionStatus = {
+  kind: "starting",
+  label: "STARTING",
+  tone: "warning",
+};
+const STOPPING_STATUS: AgentSessionStatus = {
+  kind: "stopping",
+  label: "STOPPING",
+  tone: "warning",
+};
+const FAILED_STATUS: AgentSessionStatus = { kind: "failed", label: "FAILED", tone: "danger" };
+const DONE_STATUS: AgentSessionStatus = { kind: "done", label: "DONE", tone: "neutral" };
+
+export function getAgentSessionStatus(session: SessionPayload): AgentSessionStatus {
+  switch (session.state) {
+    case "active":
+      return ACTIVE_STATUS;
+    case "starting":
+      return STARTING_STATUS;
+    case "stopping":
+      return STOPPING_STATUS;
+    case "stopped":
+      if (
+        session.failure ||
+        session.stop_reason === "agent_crashed" ||
+        session.stop_reason === "error"
+      ) {
+        return FAILED_STATUS;
+      }
+      return DONE_STATUS;
+  }
+}
diff --git a/web/src/systems/session/contexts/session-create-context.tsx b/web/src/systems/session/contexts/session-create-context.tsx
new file mode 100644
index 000000000..c00791912
--- /dev/null
+++ b/web/src/systems/session/contexts/session-create-context.tsx
@@ -0,0 +1,20 @@
+import { createContext } from "react";
+
+export interface SessionCreateContextValue {
+  openForAgent: (agentName: string) => void;
+  isCreating: boolean;
+  pendingAgentName: string | null;
+  hasActiveWorkspace: boolean;
+}
+
+export const SessionCreateContext = createContext<SessionCreateContextValue | null>(null);
+
+export function SessionCreateProvider({
+  value,
+  children,
+}: {
+  value: SessionCreateContextValue;
+  children: React.ReactNode;
+}) {
+  return <SessionCreateContext.Provider value={value}>{children}</SessionCreateContext.Provider>;
+}
diff --git a/web/src/systems/session/hooks/use-session-create-dialog.test.tsx b/web/src/systems/session/hooks/use-session-create-dialog.test.tsx
index dbceba0a9..9b3ad69fc 100644
--- a/web/src/systems/session/hooks/use-session-create-dialog.test.tsx
+++ b/web/src/systems/session/hooks/use-session-create-dialog.test.tsx
@@ -145,8 +145,8 @@ describe("useSessionCreateDialog", () => {
       provider: "codex",
     });
     expect(mockNavigate).toHaveBeenCalledWith({
-      to: "/session/$id",
-      params: { id: "sess-new" },
+      to: "/agents/$name/sessions/$id",
+      params: { name: "codex-agent", id: "sess-new" },
     });
   });
 
diff --git a/web/src/systems/session/hooks/use-session-create-dialog.ts b/web/src/systems/session/hooks/use-session-create-dialog.ts
index 39c8aaaf7..293ebdf55 100644
--- a/web/src/systems/session/hooks/use-session-create-dialog.ts
+++ b/web/src/systems/session/hooks/use-session-create-dialog.ts
@@ -175,7 +175,10 @@ export function useSessionCreateDialog({
         provider,
       });
       setOpenState(false);
-      await navigate({ to: "/session/$id", params: { id: session.id } });
+      await navigate({
+        to: "/agents/$name/sessions/$id",
+        params: { name: session.agent_name, id: session.id },
+      });
     } catch (error) {
       const message = describeSubmitError(error);
       setSubmitError(message);
diff --git a/web/src/systems/session/hooks/use-session-create.ts b/web/src/systems/session/hooks/use-session-create.ts
new file mode 100644
index 000000000..2e3858e44
--- /dev/null
+++ b/web/src/systems/session/hooks/use-session-create.ts
@@ -0,0 +1,14 @@
+import { useContext } from "react";
+
+import {
+  SessionCreateContext,
+  type SessionCreateContextValue,
+} from "../contexts/session-create-context";
+
+export function useSessionCreate(): SessionCreateContextValue {
+  const value = useContext(SessionCreateContext);
+  if (!value) {
+    throw new Error("useSessionCreate must be used inside <SessionCreateProvider>");
+  }
+  return value;
+}
diff --git a/web/src/systems/session/index.ts b/web/src/systems/session/index.ts
index 3b97585e0..6a9cf6d36 100644
--- a/web/src/systems/session/index.ts
+++ b/web/src/systems/session/index.ts
@@ -75,6 +75,11 @@ export {
   type SessionCreateDialogDraft,
   type SessionCreateDialogState,
 } from "./hooks/use-session-create-dialog";
+export {
+  SessionCreateProvider,
+  type SessionCreateContextValue,
+} from "./contexts/session-create-context";
+export { useSessionCreate } from "./hooks/use-session-create";
 
 // Components
 export {
diff --git a/web/src/systems/tasks/components/task-run-detail-header.tsx b/web/src/systems/tasks/components/task-run-detail-header.tsx
index a178ff612..32292605f 100644
--- a/web/src/systems/tasks/components/task-run-detail-header.tsx
+++ b/web/src/systems/tasks/components/task-run-detail-header.tsx
@@ -94,12 +94,12 @@ export function TaskRunDetailHeader({
             {elapsed ? (
               <MonoBadge data-testid="task-run-detail-duration">{elapsed}</MonoBadge>
             ) : null}
-            {session?.session_id ? (
+            {session?.session_id && session.agent_name ? (
               <Link
                 className="inline-flex items-center gap-1 rounded-md border border-[color:var(--color-divider)] px-2.5 py-1 font-mono text-[11px] uppercase tracking-[0.14em] text-[color:var(--color-accent)] hover:border-[color:var(--color-accent)]"
                 data-testid="task-run-detail-open-session"
-                params={{ id: session.session_id }}
-                to="/session/$id"
+                params={{ name: session.agent_name, id: session.session_id }}
+                to="/agents/$name/sessions/$id"
               >
                 Open session
                 <ArrowUpRight className="size-3" />
diff --git a/web/src/systems/tasks/components/task-run-detail-panels.tsx b/web/src/systems/tasks/components/task-run-detail-panels.tsx
index 8c5eede8e..734baa57e 100644
--- a/web/src/systems/tasks/components/task-run-detail-panels.tsx
+++ b/web/src/systems/tasks/components/task-run-detail-panels.tsx
@@ -72,12 +72,12 @@ export function TaskRunIdentityPanel({ run }: TaskRunIdentityPanelProps) {
               </IdentityRow>
             ) : null}
             <IdentityRow label="Session">
-              {session?.session_id ? (
+              {session?.session_id && session.agent_name ? (
                 <Link
                   className="font-mono text-[12px] text-[color:var(--color-accent)] hover:underline"
                   data-testid="task-run-detail-session-link"
-                  params={{ id: session.session_id }}
-                  to="/session/$id"
+                  params={{ name: session.agent_name, id: session.session_id }}
+                  to="/agents/$name/sessions/$id"
                 >
                   {session.session_id}
                 </Link>

From cc4d3e5c3ae3fb3f92b6efb8332d57e099b35efe Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Sun, 26 Apr 2026 21:45:52 -0300
Subject: [PATCH 2/4] fix: resolve qa-rounds review batch

---
 .../tasks/qa-rounds/reviews-001/issue_001.md  |  25 +-
 .../tasks/qa-rounds/reviews-001/issue_002.md  |  58 +++--
 .../tasks/qa-rounds/reviews-001/issue_003.md  |  97 ++------
 .../tasks/qa-rounds/reviews-001/issue_004.md  | 180 ++-------------
 .../tasks/qa-rounds/reviews-001/issue_005.md  |  70 ++----
 .../tasks/qa-rounds/reviews-001/issue_006.md  | 142 ++----------
 .../tasks/qa-rounds/reviews-001/issue_007.md  |  80 ++-----
 .../tasks/qa-rounds/reviews-001/issue_008.md  |  93 ++------
 .../tasks/qa-rounds/reviews-001/issue_009.md  |  27 ++-
 .../tasks/qa-rounds/reviews-001/issue_010.md  |  50 +++-
 .../tasks/qa-rounds/reviews-001/issue_011.md  | 217 +++++++++++++++++-
 .../tasks/qa-rounds/reviews-001/issue_012.md  | 191 ++++-----------
 .../tasks/qa-rounds/reviews-001/issue_013.md  |  50 ++--
 web/src/components/app-sidebar.test.tsx       |  29 ++-
 .../_app/-agents.$name.sessions.$id.test.tsx  |  24 ++
 web/src/routes/_app/-agents.$name.test.tsx    |  97 ++++++++
 .../routes/_app/agents.$name.sessions.$id.tsx |  21 +-
 web/src/routes/_app/agents.$name.tsx          |  15 +-
 .../_app/stories/-agents.$name.stories.tsx    |  26 ++-
 ...eb-storybook-stories-and-fixtures.test.tsx |   6 +-
 .../components/agent-sessions-list.test.tsx   |  88 +++++++
 .../agent/components/agent-sessions-list.tsx  |  13 +-
 .../components/agent-stats-grid.test.tsx      |  39 ++++
 .../agent/components/agent-stats-grid.tsx     |   7 +-
 .../stories/agent-info-panel.stories.tsx      |   8 +-
 .../stories/agent-sessions-list.stories.tsx   |  24 +-
 .../stories/agent-stats-grid.stories.tsx      |  37 ++-
 web/src/systems/agent/lib/session-status.ts   |  15 +-
 .../contexts/session-create-context.tsx       |  12 +-
 29 files changed, 894 insertions(+), 847 deletions(-)
 create mode 100644 web/src/routes/_app/-agents.$name.test.tsx
 create mode 100644 web/src/systems/agent/components/agent-sessions-list.test.tsx
 create mode 100644 web/src/systems/agent/components/agent-stats-grid.test.tsx

diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_001.md b/.compozy/tasks/qa-rounds/reviews-001/issue_001.md
index 590ff520c..ed6ce6197 100644
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_001.md
+++ b/.compozy/tasks/qa-rounds/reviews-001/issue_001.md
@@ -1,23 +1,26 @@
 ---
 status: resolved
-file: internal/api/core/agent_identity.go
-line: 148
+file: web/src/components/app-sidebar.test.tsx
+line: 263
 severity: nitpick
 author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:ee846dd868b1
-review_hash: ee846dd868b1
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
+provider_ref: review:4177569108,nitpick_hash:ad1c523077c7
+review_hash: ad1c523077c7
+source_review_id: "4177569108"
+source_review_submitted_at: "2026-04-26T22:35:58Z"
 ---
 
-# Issue 001: Consider wrapping the error with context.
+# Issue 001: Make this route mock param-aware.
 ## Review Comment
 
-Line 158 returns the error from `ResolveCoordinatorConfig` without wrapping. Adding context would help trace failures.
-
-As per coding guidelines: "Use explicit error returns with wrapped context: `fmt.Errorf("context: %w", err)` in Go".
+The current stub keys only on `to`, so setting `matchedRouteFuzzy["/agents/$name"] = true` would mark every agent row active. That makes this assertion non-discriminating for the `name` param handling you want to cover.
 
 ## Triage
 
 - Decision: `VALID`
-- Notes: `agentCoordinatorConfigPayload` returns the raw `ResolveCoordinatorConfig` error. This violates the local wrapped-error convention and loses call-site context. Fix by wrapping the resolver failure with `fmt.Errorf("resolve coordinator config: %w", err)`.
+- Notes:
+  - The `useMatchRoute` test stub only keys route activity by `to`, while `AppSidebar` calls `matchRoute({ to: "/agents/$name", params: { name: agent.name }, fuzzy: true })`.
+  - Setting a fuzzy match for `"/agents/$name"` would therefore mark every agent row active and fail to prove that the `name` param is respected.
+  - Fix by making the test mock key on `to + params` and updating the active-row assertion to render multiple agents, with only the matching param active.
+  - Resolution: implemented param-aware route match keys and asserted that only the matching agent row is active.
+  - Verification: targeted Vitest passed; `make verify` passed.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_002.md b/.compozy/tasks/qa-rounds/reviews-001/issue_002.md
index cacb8c3b8..e24531840 100644
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_002.md
+++ b/.compozy/tasks/qa-rounds/reviews-001/issue_002.md
@@ -1,22 +1,40 @@
 ---
 status: resolved
-file: internal/api/udsapi/agent_channels_test.go
-line: 116
+file: web/src/routes/_app/agents.$name.sessions.$id.tsx
+line: 136
 author: coderabbitai[bot]
-provider_ref: thread:PRRT_kwDOR5y4QM59r7vG,comment:PRRC_kwDOR5y4QM67Z0NA
+provider_ref: thread:PRRT_kwDOR5y4QM59sdE9,comment:PRRC_kwDOR5y4QM67ae48
 ---
 
-# Issue 002: _⚠️ Potential issue_ | _🟠 Major_
+# Issue 002: _⚠️ Potential issue_ | _🟡 Minor_
 ## Review Comment
 
-_⚠️ Potential issue_ | _🟠 Major_
+_⚠️ Potential issue_ | _🟡 Minor_
 
-**Wrap this test case in `t.Run("Should ...")` to match required test structure.**
+**Use canonical agent name for post-delete navigation.**
 
-This new test is currently a direct top-level body without the required subtest naming pattern.
+`onDeleteSuccess` currently routes with the URL param `name`, which can be stale if the path is manually edited or mismatched. Use the resolved session agent name for consistent redirect behavior.
 
+<details>
+<summary>🐛 Suggested fix</summary>
 
-As per coding guidelines, "MUST use t.Run("Should...") pattern for ALL test cases".
+```diff
+   const workspaceName = workspaces?.find(workspace => workspace.id === session.workspace_id)?.name;
++  const resolvedAgentName = session.agent_name ?? name;
+@@
+       <SessionPageContent
+-        agentName={session.agent_name ?? name}
++        agentName={resolvedAgentName}
+         sessionId={id}
+         session={session}
+         workspaceName={workspaceName}
+         onDeleteSuccess={() => {
+-          void navigate({ to: "/agents/$name", params: { name } });
++          void navigate({ to: "/agents/$name", params: { name: resolvedAgentName } });
+         }}
+       />
+```
+</details>
 
 <details>
 <summary>🤖 Prompt for AI Agents</summary>
@@ -24,16 +42,13 @@ As per coding guidelines, "MUST use t.Run("Should...") pattern for ALL test case
 ```
 Verify each finding against the current code and only fix it if needed.
 
-In `@internal/api/udsapi/agent_channels_test.go` around lines 72 - 116, Wrap the
-existing TestAgentCoordinatorConfigRouteReturnsResolvedPayload body in a subtest
-using t.Run("Should return resolved workspace coordinator payload", func(t
-*testing.T) { ... }) so the test follows the required t.Run("Should ...")
-pattern; locate the TestAgentCoordinatorConfigRouteReturnsResolvedPayload
-function and move its current contents into a t.Run call while keeping all setup
-(manager := activeAgentSessionManager, handlers := newTestHandlers,
-handlers.CoordinatorConfig = agentCoordinatorConfigResolverFunc, engine :=
-newTestRouter, performAgentKernelRequest, decodeJSONResponse and assertions)
-unchanged inside the subtest body.
+In `@web/src/routes/_app/agents`.$name.sessions.$id.tsx around lines 125 - 136,
+The onDeleteSuccess handler uses the possibly-stale route param name when
+navigating after deletion; change it to use the resolved agent name from the
+session (e.g., session.agent_name ?? name) so the redirect is canonical. Update
+the onDeleteSuccess in SessionPageContent's props to call navigate({ to:
+"/agents/$name", params: { name: session.agent_name ?? name } }) (or compute a
+resolvedAgentName variable) to ensure consistent post-delete routing.
 ```
 
 </details>
@@ -45,4 +60,9 @@ unchanged inside the subtest body.
 ## Triage
 
 - Decision: `VALID`
-- Notes: `TestAgentCoordinatorConfigRouteReturnsResolvedPayload` contains one direct top-level test body while this repo requires each case to run under a `t.Run("Should ...")` subtest. Fix by moving the existing setup, request, and assertions into a named `Should return resolved workspace coordinator payload` subtest.
+- Notes:
+  - The route passes `session.agent_name ?? name` to the page content but still navigates after delete with the raw URL param `name`.
+  - If the URL param is stale or manually edited, delete success redirects to a non-canonical agent route even though the resolved session payload contains the correct agent name.
+  - Fix by computing a single resolved agent name from the session and using it for both rendering and post-delete navigation. Add a route test that exercises delete success with a mismatched URL param.
+  - Resolution: reused `resolvedAgentName` for both content and delete-success navigation, with a regression test covering a mismatched route param.
+  - Verification: targeted Vitest passed; `make verify` passed.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_003.md b/.compozy/tasks/qa-rounds/reviews-001/issue_003.md
index 207e61b32..bfb86d45a 100644
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_003.md
+++ b/.compozy/tasks/qa-rounds/reviews-001/issue_003.md
@@ -1,93 +1,26 @@
 ---
 status: resolved
-file: internal/automation/dispatch.go
-line: 60
+file: web/src/routes/_app/agents.$name.tsx
+line: 18
+severity: nitpick
 author: coderabbitai[bot]
-provider_ref: thread:PRRT_kwDOR5y4QM59r7vH,comment:PRRC_kwDOR5y4QM67Z0NB
+provider_ref: review:4177569108,nitpick_hash:803039727d80
+review_hash: 803039727d80
+source_review_id: "4177569108"
+source_review_submitted_at: "2026-04-26T22:35:58Z"
 ---
 
-# Issue 003: _🛠️ Refactor suggestion_ | _🟠 Major_
+# Issue 003: This still fetches agent detail data on nested session routes.
 ## Review Comment
 
-_🛠️ Refactor suggestion_ | _🟠 Major_
-
-**Make session stop timeout configurable, not hardcoded.**
-
-The new 10s value is operational policy in a core runtime path; it should be injected via dispatcher options (or TOML-backed config), not fixed in code.
-
-
-<details>
-<summary>Proposed refactor</summary>
-
-```diff
--const dispatcherSessionStopTimeout = 10 * time.Second
-+const defaultDispatcherSessionStopTimeout = 10 * time.Second
-
- type Dispatcher struct {
-   sessions SessionCreator
-   runs     RunStore
-   tasks    TaskService
-+  sessionStopTimeout time.Duration
-   ...
- }
-
- func NewDispatcher(sessions SessionCreator, runs RunStore, opts ...DispatcherOption) (*Dispatcher, error) {
-   ...
-   dispatcher := &Dispatcher{
-     sessions:      sessions,
-     runs:          runs,
-     logger:        slog.Default(),
-     now:           func() time.Time { return time.Now().UTC() },
-     sleep:         sleepWithContext,
-     maxConcurrent: DefaultMaxConcurrentJobs,
-+    sessionStopTimeout: defaultDispatcherSessionStopTimeout,
-   }
-   ...
- }
-
-+func WithDispatcherSessionStopTimeout(timeout time.Duration) DispatcherOption {
-+  return func(dispatcher *Dispatcher) {
-+    if timeout > 0 {
-+      dispatcher.sessionStopTimeout = timeout
-+    }
-+  }
-+}
-
- func (d *Dispatcher) stopAutomationSession(ctx context.Context, sessionID string, status RunStatus, runErr error) error {
-   ...
--  stopCtx, cancel := context.WithTimeout(context.WithoutCancel(ctx), dispatcherSessionStopTimeout)
-+  stopCtx, cancel := context.WithTimeout(context.WithoutCancel(ctx), d.sessionStopTimeout)
-   defer cancel()
-   ...
- }
-```
-</details>
-As per coding guidelines, "Never hardcode configuration in Go — use TOML config or functional options".
-
-<details>
-<summary>🤖 Prompt for AI Agents</summary>
-
-```
-Verify each finding against the current code and only fix it if needed.
-
-In `@internal/automation/dispatch.go` around lines 56 - 60, The hardcoded constant
-dispatcherSessionStopTimeout should be made configurable via dispatcher options
-rather than fixed in code: remove or replace the package-level const
-dispatcherSessionStopTimeout and add a field (e.g., SessionStopTimeout
-time.Duration) to the dispatcher options/config struct used by NewDispatcher (or
-Dispatcher) and its option helpers; wire that value into the shutdown logic that
-currently references dispatcherSessionStopTimeout and provide a sensible default
-(10*time.Second) when the option is not set so existing behavior remains
-unchanged.
-```
-
-</details>
-
-<!-- fingerprinting:phantom:poseidon:hawk -->
-
-<!-- This is an auto-generated comment by CodeRabbit -->
+`useAgentDetailPage(name)` runs before the child-route early return, so `/agents/$name/sessions/$id` still pays for the agent + sessions queries even though this component renders only `<Outlet />`. The clean fix is to move the detail shell into an index child route and let this parent route stay as a layout route.
 
 ## Triage
 
 - Decision: `VALID`
-- Notes: `dispatcherSessionStopTimeout` is a package-level operational timeout fixed at 10 seconds. The dispatcher already uses functional options for policy injection, so this should be configurable with a default. Fix by adding a `sessionStopTimeout` field, a `defaultDispatcherSessionStopTimeout`, and `WithDispatcherSessionStopTimeout`, then using the field in `stopAutomationSession`. A focused constructor test in `internal/automation/dispatch_test.go` is needed even though that file is outside the batch list because it validates the new option.
+- Notes:
+  - `AgentDetailPage` currently calls `useAgentDetailPage(name)` before checking `useChildMatches()`, so nested session routes still start agent detail and session list queries even though the parent renders only `<Outlet />`.
+  - The root cause is that the detail data hook lives in the layout component instead of in the detail-only rendering branch.
+  - Fix by splitting the detail shell into a child component that is rendered only when there is no child match, preserving hook rules while preventing nested routes from paying for unused data. Add a route test proving child routes render the outlet without invoking `useAgentDetailPage`.
+  - Resolution: split the detail shell into `AgentDetailContent`, leaving nested child routes to render `<Outlet />` without invoking the detail hook.
+  - Verification: targeted Vitest passed; `make verify` passed.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_004.md b/.compozy/tasks/qa-rounds/reviews-001/issue_004.md
index bfd6c0046..dabce05ea 100644
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_004.md
+++ b/.compozy/tasks/qa-rounds/reviews-001/issue_004.md
@@ -1,9 +1,9 @@
 ---
 status: resolved
-file: internal/daemon/daemon_integration_test.go
-line: 2483
+file: web/src/routes/_app/agents.$name.tsx
+line: 85
 author: coderabbitai[bot]
-provider_ref: thread:PRRT_kwDOR5y4QM59r7vI,comment:PRRC_kwDOR5y4QM67Z0NC
+provider_ref: thread:PRRT_kwDOR5y4QM59sdE-,comment:PRRC_kwDOR5y4QM67ae4-
 ---
 
 # Issue 004: _⚠️ Potential issue_ | _🟠 Major_
@@ -11,151 +11,12 @@ provider_ref: thread:PRRT_kwDOR5y4QM59r7vI,comment:PRRC_kwDOR5y4QM67Z0NC
 
 _⚠️ Potential issue_ | _🟠 Major_
 
-**Wrap this scenario in a `t.Run("Should...")` test case to match test policy.**
+**Avoid showing zeroed stats while session data is unresolved.**
 
-The scenario is good, but the new test case should follow the required `Should...` subtest pattern for consistency with repository standards.
+`AgentStatsGrid` always receives `page.sessions`, so during `sessionsLoading` or `sessionsError` it renders `0`/`—` metrics that look authoritative even though the data is unavailable. Gate the grid behind the same state handling as the table, or give the grid explicit loading/error variants.
 
-<details>
-<summary>Minimal structure change</summary>
-
-```diff
- func TestBootRunsWorkspaceTaskRunHookWithRelativeScriptPath(t *testing.T) {
--    homePaths := integrationHomePaths(t)
--    ...
-+    t.Run("ShouldRunWorkspaceTaskRunHookWithRelativeScriptPath", func(t *testing.T) {
-+        homePaths := integrationHomePaths(t)
-+        ...
-+    })
- }
-```
-</details>
-
-
-As per coding guidelines, `**/*_test.go`: "MUST use t.Run("Should...") pattern for ALL test cases".
-
-<!-- suggestion_start -->
-
-<details>
-<summary>📝 Committable suggestion</summary>
-
-> ‼️ **IMPORTANT**
-> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
-
-```suggestion
-func TestBootRunsWorkspaceTaskRunHookWithRelativeScriptPath(t *testing.T) {
-    t.Run("ShouldRunWorkspaceTaskRunHookWithRelativeScriptPath", func(t *testing.T) {
-        homePaths := integrationHomePaths(t)
-        cfg := testConfig(t, homePaths)
-        cfg.Memory.Enabled = false
-        cfg.Skills.Enabled = false
-
-        workspaceRoot := filepath.Join(t.TempDir(), "workspace")
-        if err := os.MkdirAll(filepath.Join(workspaceRoot, aghconfig.DirName, "hooks"), 0o755); err != nil {
-            t.Fatalf(
-                "os.MkdirAll(%q) error = %v",
-                filepath.Join(workspaceRoot, aghconfig.DirName, "hooks"),
-                err,
-            )
-        }
-        writeDaemonFile(
-            t,
-            filepath.Join(workspaceRoot, aghconfig.DirName, "hooks", "capture-task-run.sh"),
-            "#!/bin/sh\ncat > \"$1\"\n",
-        )
-        if err := os.Chmod(
-            filepath.Join(workspaceRoot, aghconfig.DirName, "hooks", "capture-task-run.sh"),
-            0o755,
-        ); err != nil {
-            t.Fatalf("os.Chmod(capture-task-run.sh) error = %v", err)
-        }
-        writeDaemonFile(t, filepath.Join(workspaceRoot, aghconfig.DirName, "config.toml"), `
-[[hooks.declarations]]
-name = "workspace-task-run"
-event = "task.run.enqueued"
-mode = "sync"
-command = "/bin/sh"
-args = [".agh/hooks/capture-task-run.sh", ".agh/task-run-enqueued.json"]
-`)
-
-        resolvedWorkspace := seedDaemonWorkspace(t, homePaths, workspaceRoot)
-
-        d, err := New(
-            WithHomePaths(homePaths),
-            WithConfig(&cfg),
-            WithLogger(discardLogger()),
-        )
-        if err != nil {
-            t.Fatalf("New() error = %v", err)
-        }
-        d.newSessionManager = func(_ context.Context, deps SessionManagerDeps) (SessionManager, error) {
-            return &fakeSessionManager{}, nil
-        }
-        d.newObserver = func(context.Context, RuntimeDeps) (Observer, error) {
-            return &fakeObserver{}, nil
-        }
-        d.httpFactory = func(context.Context, RuntimeDeps) (Server, error) {
-            return &fakeServer{name: "http"}, nil
-        }
-        d.udsFactory = func(context.Context, RuntimeDeps) (Server, error) {
-            return &fakeServer{name: "uds"}, nil
-        }
-
-        if err := d.boot(testutil.Context(t)); err != nil {
-            t.Fatalf("boot() error = %v", err)
-        }
-        t.Cleanup(func() {
-            if err := d.Shutdown(testutil.Context(t)); err != nil {
-                t.Fatalf("Shutdown() error = %v", err)
-            }
-        })
-        if d.hooks == nil {
-            t.Fatal("boot() did not initialize daemon hooks")
-        }
-
-        payload := hookspkg.TaskRunEnqueuedPayload{
-            PayloadBase: hookspkg.PayloadBase{
-                Event:     hookspkg.HookTaskRunEnqueued,
-                Timestamp: time.Date(2026, 4, 26, 19, 30, 0, 0, time.UTC),
-            },
-            TaskRunContext: hookspkg.TaskRunContext{
-                TaskID:                "task-1",
-                RunID:                 "run-1",
-                WorkspaceID:           resolvedWorkspace.ID,
-                CoordinationChannelID: "operations",
-                NetworkChannel:        "operations",
-                AgentName:             "qa",
-                TaskStatus:            "ready",
-                RunStatus:             "queued",
-            },
-            IdempotencyKey: "task.start.task-1",
-        }
-
-        if _, err := d.hooks.DispatchTaskRunEnqueued(testutil.Context(t), payload); err != nil {
-            t.Fatalf("DispatchTaskRunEnqueued() error = %v", err)
-        }
-
-        outputPath := filepath.Join(workspaceRoot, aghconfig.DirName, "task-run-enqueued.json")
-        body, err := os.ReadFile(outputPath)
-        if err != nil {
-            t.Fatalf("os.ReadFile(%q) error = %v", outputPath, err)
-        }
-
-        var captured hookspkg.TaskRunEnqueuedPayload
-        if err := json.Unmarshal(body, &captured); err != nil {
-            t.Fatalf("json.Unmarshal(task run hook payload) error = %v; body=%s", err, string(body))
-        }
-        if captured.Event != hookspkg.HookTaskRunEnqueued ||
-            captured.WorkspaceID != resolvedWorkspace.ID ||
-            captured.RunID != "run-1" {
-            t.Fatalf("captured payload = %#v, want enqueued payload for the seeded workspace run", captured)
-        }
-    })
-}
-```
-
-</details>
 
-<!-- suggestion_end -->
+As per coding guidelines, "Truthful UI > plausible UI — don't render controls or metrics the runtime doesn't actually support. When Paper artboards conflict with daemon truth, daemon wins".
 
 <details>
 <summary>🤖 Prompt for AI Agents</summary>
@@ -163,25 +24,30 @@ args = [".agh/hooks/capture-task-run.sh", ".agh/task-run-enqueued.json"]
 ```
 Verify each finding against the current code and only fix it if needed.
 
-In `@internal/daemon/daemon_integration_test.go` around lines 2377 - 2483, The
-test function TestBootRunsWorkspaceTaskRunHookWithRelativeScriptPath must be
-wrapped in a t.Run subtest using the repository's "Should..." naming convention;
-update the body of TestBootRunsWorkspaceTaskRunHookWithRelativeScriptPath so its
-existing implementation is executed inside t.Run("Should run workspace task-run
-hook with relative script path", func(t *testing.T) { ... }), keeping all
-existing setup, payload creation, hook dispatch, and assertions intact
-(references: TestBootRunsWorkspaceTaskRunHookWithRelativeScriptPath, d.boot,
-d.hooks.DispatchTaskRunEnqueued, seedDaemonWorkspace,
-hookspkg.TaskRunEnqueuedPayload).
+In `@web/src/routes/_app/agents`.$name.tsx around lines 79 - 85, AgentStatsGrid is
+currently rendered with page.sessions even when session data is loading or
+errored, causing misleading zero/placeholder metrics; update the render logic so
+AgentStatsGrid is only shown when sessions are successfully loaded (i.e.,
+!page.sessionsLoading && !page.sessionsError && page.sessions) or modify
+AgentStatsGrid to accept and respect explicit loading/error props (e.g.,
+sessionsLoading/sessionsError) and render loading/error variants instead—mirror
+the same gating used by AgentSessionsList (agentName, sessions, isLoading,
+isError) so the grid never displays authoritative metrics while data is
+unresolved.
 ```
 
 </details>
 
-<!-- fingerprinting:phantom:poseidon:hawk -->
+<!-- fingerprinting:phantom:medusa:grasshopper -->
 
 <!-- This is an auto-generated comment by CodeRabbit -->
 
 ## Triage
 
 - Decision: `VALID`
-- Notes: `TestBootRunsWorkspaceTaskRunHookWithRelativeScriptPath` is a new direct test scenario without the required `Should ...` subtest wrapper. Fix by wrapping the existing body in `t.Run("Should run workspace task-run hook with relative script path", ...)` without changing the boot, hook dispatch, or assertions.
+- Notes:
+  - `AgentStatsGrid` receives `page.sessions` even while the sessions query is loading or errored, so it can show `0` and `—` as if they were authoritative runtime metrics.
+  - This violates the truthful UI rule because unresolved data is rendered as a real empty data set.
+  - Fix by gating the stats grid behind the same sessions success state used by the sessions list. Add a route test for the loading branch so the grid is absent while session data is unresolved.
+  - Resolution: render `AgentStatsGrid` only after session data resolves successfully, while the sessions list retains loading/error UI.
+  - Verification: targeted Vitest passed; `make verify` passed.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_005.md b/.compozy/tasks/qa-rounds/reviews-001/issue_005.md
index 336fce409..ca35efe2e 100644
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_005.md
+++ b/.compozy/tasks/qa-rounds/reviews-001/issue_005.md
@@ -1,66 +1,26 @@
 ---
 status: resolved
-file: internal/daemon/harness_context_test.go
-line: 129
+file: web/src/routes/_app/stories/-agents.$name.stories.tsx
+line: 68
+severity: nitpick
 author: coderabbitai[bot]
-provider_ref: thread:PRRT_kwDOR5y4QM59r7vJ,comment:PRRC_kwDOR5y4QM67Z0ND
+provider_ref: review:4177569108,nitpick_hash:706081bfac4b
+review_hash: 706081bfac4b
+source_review_id: "4177569108"
+source_review_submitted_at: "2026-04-26T22:35:58Z"
 ---
 
-# Issue 005: _🛠️ Refactor suggestion_ | _🟠 Major_
+# Issue 005: Consider adding a play function to verify loading state.
 ## Review Comment
 
-_🛠️ Refactor suggestion_ | _🟠 Major_
-
-**Use `Should...` names for the newly added matrix subtests.**
-
-The new case names should follow the required subtest naming pattern used by `t.Run(tc.name, ...)`.
-
-<details>
-<summary>Proposed diff</summary>
-
-```diff
--            name: "coordinator startup session resolves coordinator policy",
-+            name: "Should resolve coordinator policy for coordinator startup session",
-...
--            name: "spawned worker network turn resolves spawned policy",
-+            name: "Should resolve spawned policy for spawned worker network turn",
-```
-</details>
-
-
-
-As per coding guidelines, `**/*_test.go`: "MUST use t.Run("Should...") pattern for ALL test cases".
-
-
-Also applies to: 128-162
-
-<details>
-<summary>🤖 Prompt for AI Agents</summary>
-
-```
-Verify each finding against the current code and only fix it if needed.
-
-In `@internal/daemon/harness_context_test.go` around lines 98 - 129, The test-case
-name strings in the table-driven tests (the name field used by t.Run(tc.name,
-...)) do not follow the required "Should..." subtest naming pattern; update the
-name values for the new matrix entries (e.g., the case currently titled
-"coordinator startup session resolves coordinator policy" and the subsequent
-"spawned worker network turn resolves spawned policy") to begin with "Should"
-(for example "Should resolve coordinator policy on startup session" and "Should
-resolve spawned policy for spawned worker network turn"), leaving the rest of
-the HarnessResolutionInput, HarnessSessionInput, HarnessTurnRequest,
-wantSections/wantTags, and other fields (symbols: name, HarnessResolutionInput,
-HarnessSessionInput, HarnessTurnRequest, t.Run) unchanged so t.Run(tc.name, ...)
-uses the new "Should..." names.
-```
-
-</details>
-
-<!-- fingerprinting:phantom:poseidon:hawk -->
-
-<!-- This is an auto-generated comment by CodeRabbit -->
+The `SessionsLoading` story lacks a `play` function assertion to verify the loading UI renders. While the infinite delay ensures the loading state persists, adding an assertion would make the test more explicit.
 
 ## Triage
 
 - Decision: `VALID`
-- Notes: The table-driven cases in `TestHarnessContextResolverResolve` are executed through `t.Run(tc.name, ...)`, but the two new case names do not start with `Should`. Fix by renaming them to descriptive `Should ...` names while leaving inputs and expected outputs unchanged.
+- Notes:
+  - The `SessionsLoading` route story pins `/api/sessions` with an infinite MSW delay but does not assert that the loading branch actually renders.
+  - Without a play assertion, Storybook test coverage could pass even if the story stopped exercising the intended state.
+  - Fix by adding a play function that waits for the sessions loading test id.
+  - Resolution: added a `play` function that asserts `agent-sessions-loading` renders.
+  - Verification: targeted Vitest passed; `make verify` passed.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_006.md b/.compozy/tasks/qa-rounds/reviews-001/issue_006.md
index e3f2fdc88..5f9b66bd0 100644
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_006.md
+++ b/.compozy/tasks/qa-rounds/reviews-001/issue_006.md
@@ -1,138 +1,28 @@
 ---
 status: resolved
-file: internal/daemon/harness_context_test.go
-line: 458
+file: web/src/routes/_app/stories/-agents.$name.stories.tsx
+line: 87
+severity: nitpick
 author: coderabbitai[bot]
-provider_ref: thread:PRRT_kwDOR5y4QM59r7vK,comment:PRRC_kwDOR5y4QM67Z0NE
+provider_ref: review:4177569108,nitpick_hash:3187700db5e5
+review_hash: 3187700db5e5
+source_review_id: "4177569108"
+source_review_submitted_at: "2026-04-26T22:35:58Z"
 ---
 
-# Issue 006: _🛠️ Refactor suggestion_ | _🟠 Major_
+# Issue 006: Consider adding a play function to verify agent loading state.
 ## Review Comment
 
-_🛠️ Refactor suggestion_ | _🟠 Major_
+Similar to `SessionsLoading`, the `AgentLoading` story would benefit from a `play` function to verify the loading UI is rendered.
 
-**Wrap this new test scenario in `t.Run("Should...")`.**
-
-The added test should use the required explicit subtest pattern.
-
-<details>
-<summary>Proposed diff</summary>
-
-```diff
- func TestSectionSelectorAcceptsCoordinatorStartupSession(t *testing.T) {
-     t.Parallel()
--
--    resolver := NewHarnessContextResolver(HarnessRuntimeSignals{
--        MemoryPromptSectionEnabled: true,
--        SkillsPromptSectionEnabled: true,
--    })
--    selector := NewSectionSelector(resolver, nil)
--    descriptors := defaultStartupPromptSectionDescriptors(
--        promptSectionProviderFunc(
--            func(context.Context, *workspacepkg.ResolvedWorkspace) (string, error) { return "memory", nil },
--        ),
--        promptSectionProviderFunc(
--            func(context.Context, *workspacepkg.ResolvedWorkspace) (string, error) { return "skills", nil },
--        ),
--        nil,
--    )
--
--    selected, resolved, err := selector.Select(session.StartupPromptContext{
--        SessionType: session.SessionTypeCoordinator,
--        Channel:     "coord-run-1",
--    }, descriptors)
--    if err != nil {
--        t.Fatalf("Select(coordinator) error = %v", err)
--    }
--
--    if resolved.Session.SessionClass != SessionClassCoordinator {
--        t.Fatalf("SessionClass = %q, want %q", resolved.Session.SessionClass, SessionClassCoordinator)
--    }
--    wantNames := []string{
--        string(HarnessPromptSectionMemory),
--        string(HarnessPromptSectionSkills),
--        string(HarnessPromptSectionNetwork),
--    }
--    gotNames := make([]string, 0, len(selected))
--    for _, descriptor := range selected {
--        gotNames = append(gotNames, descriptor.Name)
--    }
--    if !slices.Equal(gotNames, wantNames) {
--        t.Fatalf("selected section names = %#v, want %#v", gotNames, wantNames)
--    }
-+    t.Run("Should accept coordinator startup session and include coordinator sections", func(t *testing.T) {
-+        t.Parallel()
-+
-+        resolver := NewHarnessContextResolver(HarnessRuntimeSignals{
-+            MemoryPromptSectionEnabled: true,
-+            SkillsPromptSectionEnabled: true,
-+        })
-+        selector := NewSectionSelector(resolver, nil)
-+        descriptors := defaultStartupPromptSectionDescriptors(
-+            promptSectionProviderFunc(
-+                func(context.Context, *workspacepkg.ResolvedWorkspace) (string, error) { return "memory", nil },
-+            ),
-+            promptSectionProviderFunc(
-+                func(context.Context, *workspacepkg.ResolvedWorkspace) (string, error) { return "skills", nil },
-+            ),
-+            nil,
-+        )
-+
-+        selected, resolved, err := selector.Select(session.StartupPromptContext{
-+            SessionType: session.SessionTypeCoordinator,
-+            Channel:     "coord-run-1",
-+        }, descriptors)
-+        if err != nil {
-+            t.Fatalf("Select(coordinator) error = %v", err)
-+        }
-+
-+        if resolved.Session.SessionClass != SessionClassCoordinator {
-+            t.Fatalf("SessionClass = %q, want %q", resolved.Session.SessionClass, SessionClassCoordinator)
-+        }
-+        wantNames := []string{
-+            string(HarnessPromptSectionMemory),
-+            string(HarnessPromptSectionSkills),
-+            string(HarnessPromptSectionNetwork),
-+        }
-+        gotNames := make([]string, 0, len(selected))
-+        for _, descriptor := range selected {
-+            gotNames = append(gotNames, descriptor.Name)
-+        }
-+        if !slices.Equal(gotNames, wantNames) {
-+            t.Fatalf("selected section names = %#v, want %#v", gotNames, wantNames)
-+        }
-+    })
- }
-```
-</details>
-
-
-
-As per coding guidelines, `**/*_test.go`: "MUST use t.Run("Should...") pattern for ALL test cases".
-
-<details>
-<summary>🤖 Prompt for AI Agents</summary>
-
-```
-Verify each finding against the current code and only fix it if needed.
-
-In `@internal/daemon/harness_context_test.go` around lines 417 - 458, Wrap the new
-test function TestSectionSelectorAcceptsCoordinatorStartupSession in an explicit
-subtest using t.Run with a "Should..." description; e.g., inside
-TestSectionSelectorAcceptsCoordinatorStartupSession call t.Run("Should select
-coordinator startup sections", func(t *testing.T) { ... }) and move all existing
-test logic (resolver/selector/descriptors creation, selector.Select call,
-assertions on resolved.Session.SessionClass and selected names) into that
-subtest so the test follows the required t.Run("Should...") subtest pattern.
-```
-
-</details>
-
-<!-- fingerprinting:phantom:poseidon:hawk -->
-
-<!-- This is an auto-generated comment by CodeRabbit -->
+---
 
 ## Triage
 
 - Decision: `VALID`
-- Notes: `TestSectionSelectorAcceptsCoordinatorStartupSession` has a direct body and no `Should ...` subtest. Fix by moving the existing selector setup and assertions into a `Should select coordinator startup sections` subtest.
+- Notes:
+  - The `AgentLoading` route story pins `/api/agents/:name` with an infinite MSW delay but does not assert that the agent detail loading branch renders.
+  - The story should fail if the loading UI regresses instead of remaining a passive visual fixture.
+  - Fix by adding a play function that waits for the agent detail loading test id.
+  - Resolution: added a `play` function that asserts `agent-detail-loading` renders.
+  - Verification: targeted Vitest passed; `make verify` passed.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_007.md b/.compozy/tasks/qa-rounds/reviews-001/issue_007.md
index 5cb5d9576..0cc70f343 100644
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_007.md
+++ b/.compozy/tasks/qa-rounds/reviews-001/issue_007.md
@@ -1,76 +1,26 @@
 ---
 status: resolved
-file: internal/daemon/notifier_test.go
-line: 471
+file: web/src/systems/agent/components/agent-sessions-list.tsx
+line: 162
+severity: nitpick
 author: coderabbitai[bot]
-provider_ref: thread:PRRT_kwDOR5y4QM59r7vL,comment:PRRC_kwDOR5y4QM67Z0NF
+provider_ref: review:4177569108,nitpick_hash:2b82716ddc57
+review_hash: 2b82716ddc57
+source_review_id: "4177569108"
+source_review_submitted_at: "2026-04-26T22:35:58Z"
 ---
 
-# Issue 007: _⚠️ Potential issue_ | _🟠 Major_
+# Issue 007: Consider memoizing Date.now() for consistent relative time.
 ## Review Comment
 
-_⚠️ Potential issue_ | _🟠 Major_
-
-**Convert this test into `t.Run("Should...")` cases per policy.**
-
-Line 412 currently uses a single monolithic test case; please split assertions into named `Should...` subtests (ideally table-driven) to align with repo test standards.
-
-<details>
-<summary>Refactor outline</summary>
-
-```diff
- func TestScopeWorkspaceHookDeclsOnlyInjectsSupportedMatcherFields(t *testing.T) {
-     t.Parallel()
--    // single scenario with many assertions
-+    testCases := []struct {
-+        name  string
-+        event hookspkg.HookEvent
-+        // expected matcher behavior fields...
-+    }{
-+        {name: "ShouldInjectWorkspaceIDAndRootForSessionHooks", event: hookspkg.HookSessionPostCreate},
-+        {name: "ShouldInjectOnlyWorkspaceIDForTaskRunHooks", event: hookspkg.HookTaskRunEnqueued},
-+        {name: "ShouldNotInjectWorkspaceFieldsForMessageHooks", event: hookspkg.HookMessageDelta},
-+    }
-+    for _, tc := range testCases {
-+        tc := tc
-+        t.Run(tc.name, func(t *testing.T) {
-+            t.Parallel()
-+            // scenario setup + focused assertions
-+        })
-+    }
- }
-```
-</details>
-
-
-As per coding guidelines, `**/*_test.go`: "Table-driven tests with subtests (t.Run) as default pattern" and "MUST use t.Run("Should...") pattern for ALL test cases".
-
-<details>
-<summary>🤖 Prompt for AI Agents</summary>
-
-```
-Verify each finding against the current code and only fix it if needed.
-
-In `@internal/daemon/notifier_test.go` around lines 412 - 471, Split the
-monolithic TestScopeWorkspaceHookDeclsOnlyInjectsSupportedMatcherFields into
-table-driven subtests using t.Run("Should ...") entries: build a table of cases
-(e.g., "Should inject workspace fields for session", "Should only inject
-WorkspaceID for task-run", "Should not inject workspace fields for message",
-"Should not mutate original decls") that each call scopeWorkspaceHookDecls with
-the same inputs and assert the specific Matcher fields and
-hookspkg.ValidateMatcherForEvent results; keep the original decls and resolved
-values for reuse, reference the function under test scopeWorkspaceHookDecls and
-use hookspkg.ValidateMatcherForEvent in each subtest, and ensure the final case
-verifies the original decls were not mutated.
-```
-
-</details>
-
-<!-- fingerprinting:phantom:poseidon:hawk -->
-
-<!-- This is an auto-generated comment by CodeRabbit -->
+`formatRelativeTime` calls `Date.now()` on each invocation (line 166). If multiple sessions render close together, they may get slightly different "now" values, causing inconsistent relative times within the same render pass. This is a minor visual inconsistency, not a bug.
 
 ## Triage
 
 - Decision: `VALID`
-- Notes: `TestScopeWorkspaceHookDeclsOnlyInjectsSupportedMatcherFields` combines multiple independent assertions in one monolithic body. Fix by splitting the session, task-run, message, and immutability checks into table-driven `Should ...` subtests while reusing the same source declarations.
+- Notes:
+  - `formatRelativeTime` calls `Date.now()` for each rendered row, so sessions in the same table can format against different reference instants.
+  - The impact is minor but real near relative-time boundaries and creates avoidable render-pass inconsistency.
+  - Fix by capturing one `now` value per `AgentSessionsList` render and passing it to every row formatter.
+  - Resolution: captured one render-pass timestamp and passed it through each session row formatter, with a test proving `Date.now()` is called once per table render.
+  - Verification: targeted Vitest passed; `make verify` passed.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_008.md b/.compozy/tasks/qa-rounds/reviews-001/issue_008.md
index 39e9fea0a..ab58a6602 100644
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_008.md
+++ b/.compozy/tasks/qa-rounds/reviews-001/issue_008.md
@@ -1,89 +1,26 @@
 ---
 status: resolved
-file: internal/hooks/matcher_test.go
-line: 458
+file: web/src/systems/agent/components/agent-stats-grid.tsx
+line: 60
+severity: nitpick
 author: coderabbitai[bot]
-provider_ref: thread:PRRT_kwDOR5y4QM59r7vM,comment:PRRC_kwDOR5y4QM67Z0NH
+provider_ref: review:4177569108,nitpick_hash:84f075eef815
+review_hash: 84f075eef815
+source_review_id: "4177569108"
+source_review_submitted_at: "2026-04-26T22:35:58Z"
 ---
 
-# Issue 008: _⚠️ Potential issue_ | _🟠 Major_
+# Issue 008: Share the failure predicate with session-status.ts.
 ## Review Comment
 
-_⚠️ Potential issue_ | _🟠 Major_
-
-**Rename subtests to the required `Should...` pattern.**
-
-The table-driven structure is good; please update case names (Lines 443-447) so each `t.Run` uses `Should...` wording.
-
-<details>
-<summary>Example rename</summary>
-
-```diff
-- {name: "session workspace root", event: HookSessionPostCreate, field: "workspace_root", want: true},
-+ {name: "ShouldAllowWorkspaceRootForSessionHooks", event: HookSessionPostCreate, field: "workspace_root", want: true},
-```
-</details>
-
-
-As per coding guidelines, `**/*_test.go`: "MUST use t.Run("Should...") pattern for ALL test cases".
-
-<!-- suggestion_start -->
-
-<details>
-<summary>📝 Committable suggestion</summary>
-
-> ‼️ **IMPORTANT**
-> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
-
-```suggestion
-        {name: "ShouldAllowWorkspaceRootForSessionPostCreateHook", event: HookSessionPostCreate, field: "workspace_root", want: true},
-        {name: "ShouldAllowWorkspaceIdForTaskRunEnqueuedHook", event: HookTaskRunEnqueued, field: "workspace_id", want: true},
-        {name: "ShouldDenyWorkspaceRootForTaskRunEnqueuedHook", event: HookTaskRunEnqueued, field: "workspace_root", want: false},
-        {name: "ShouldDenyWorkspaceIdForMessageDeltaHook", event: HookMessageDelta, field: "workspace_id", want: false},
-        {name: "ShouldDenyInvalidEvent", event: HookEvent("bad.event"), field: "workspace_id", want: false},
-    }
-
-    for _, tt := range tests {
-        t.Run(tt.name, func(t *testing.T) {
-            t.Parallel()
-
-            if got := MatcherFieldAllowedForEvent(tt.event, tt.field); got != tt.want {
-                t.Fatalf("MatcherFieldAllowedForEvent(%q, %q) = %v, want %v", tt.event, tt.field, got, tt.want)
-            }
-        })
-    }
-```
-
-</details>
-
-<!-- suggestion_end -->
-
-<details>
-<summary>🤖 Prompt for AI Agents</summary>
-
-```
-Verify each finding against the current code and only fix it if needed.
-
-In `@internal/hooks/matcher_test.go` around lines 443 - 458, Update the t.Run case
-names in the table-driven test for MatcherFieldAllowedForEvent so they follow
-the "Should..." pattern; specifically rename the entries currently named
-"session workspace root", "task run workspace id", "task run workspace root",
-"message workspace id", and "invalid event" to descriptive "Should..." strings
-(e.g., "Should allow session workspace root", "Should allow task run workspace
-id", "Should not allow task run workspace root", "Should not allow message
-workspace id", "Should not allow invalid event") so t.Run uses the required
-format while keeping the same event constants (HookSessionPostCreate,
-HookTaskRunEnqueued, HookMessageDelta, HookEvent("bad.event")) and field values
-("workspace_root", "workspace_id") used by MatcherFieldAllowedForEvent.
-```
-
-</details>
-
-<!-- fingerprinting:phantom:poseidon:hawk -->
-
-<!-- This is an auto-generated comment by CodeRabbit -->
+This condition duplicates the stopped/failed classification from `web/src/systems/agent/lib/session-status.ts`. If one side changes, the badge in `AgentSessionsList` and this counter will drift. A shared helper would keep both views consistent.
 
 ## Triage
 
 - Decision: `VALID`
-- Notes: `TestMatcherFieldAllowedForEvent` is already table-driven, but its `name` values do not follow the mandatory `Should ...` convention. Fix by renaming the five cases only.
+- Notes:
+  - `AgentStatsGrid` duplicates the failure classification already embedded in `getAgentSessionStatus`, so the table badge and aggregate failed counter can drift.
+  - The minimum correct fix requires a supporting edit outside the listed code files: `web/src/systems/agent/lib/session-status.ts` will export a shared `isAgentSessionFailure` predicate.
+  - `AgentStatsGrid` will consume that helper, keeping the counter and badge classification on the same source of truth.
+  - Resolution: exported `isAgentSessionFailure` from `session-status.ts` and used it in both the badge classifier and stats counter.
+  - Verification: targeted Vitest passed; `make verify` passed.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_009.md b/.compozy/tasks/qa-rounds/reviews-001/issue_009.md
index 3867da56a..264fe68ba 100644
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_009.md
+++ b/.compozy/tasks/qa-rounds/reviews-001/issue_009.md
@@ -1,23 +1,28 @@
 ---
 status: resolved
-file: internal/network/manager_test.go
-line: 751
-severity: minor
+file: web/src/systems/agent/components/stories/agent-info-panel.stories.tsx
+line: 36
+severity: nitpick
 author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:004e4aeb5977
-review_hash: 004e4aeb5977
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
+provider_ref: review:4177569108,nitpick_hash:9d984974c582
+review_hash: 9d984974c582
+source_review_id: "4177569108"
+source_review_submitted_at: "2026-04-26T22:35:58Z"
 ---
 
-# Issue 009: These metric expectations are heartbeat-timing sensitive.
+# Issue 009: Prefer an interface for Frame props.
 ## Review Comment
 
-The exact `sent/received` and `KindGreet` counts here assume neither session heartbeat fires before `Status()` runs. Since `JoinChannel()` starts live 1-second heartbeats, slower CI can legitimately observe extra greet traffic and fail this test intermittently. I’d make the test config use a much longer greet interval, or assert only the deltas introduced by the explicit `KindSay`.
+Use a named interface for the component props instead of an inline object shape in the function signature.
 
-Also applies to: 781-793
+As per coding guidelines, `**/*.{ts,tsx}`: Use `interface` for defining object shapes in TypeScript instead of `type` declarations.
 
 ## Triage
 
 - Decision: `VALID`
-- Notes: `TestManagerStatusTracksWorkflowMetricsAndStructuredLogs` uses `testManagerConfig()`, whose one-second greet interval can emit extra heartbeat greets before `Status()` on slow CI. Fix by giving this test a longer `GreetInterval` while preserving the expected initial-greet and explicit `KindSay` metrics.
+- Notes:
+  - `Frame` declares its props inline and uses `React.ReactNode` without a local React type import.
+  - The local TypeScript style requires named interfaces for object shapes, and React 19 automatic JSX runtime still requires explicit React type imports for `ReactNode`.
+  - Fix by importing `ReactNode` as a type and replacing the inline object shape with a named `FrameProps` interface.
+  - Resolution: added an explicit `ReactNode` type import and a named `FrameProps` interface.
+  - Verification: `make web-typecheck` passed; `make verify` passed.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_010.md b/.compozy/tasks/qa-rounds/reviews-001/issue_010.md
index 5e69b028f..e91683e2d 100644
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_010.md
+++ b/.compozy/tasks/qa-rounds/reviews-001/issue_010.md
@@ -1,21 +1,51 @@
 ---
 status: resolved
-file: internal/network/router.go
-line: 639
-severity: minor
+file: web/src/systems/agent/components/stories/agent-sessions-list.stories.tsx
+line: 33
 author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:335034e78607
-review_hash: 335034e78607
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
+provider_ref: thread:PRRT_kwDOR5y4QM59sdE_,comment:PRRC_kwDOR5y4QM67ae4_
 ---
 
-# Issue 010: Directed self-WHOIS is now suppressed, but the manager still audits it as received.
+# Issue 010: _⚠️ Potential issue_ | _🟡 Minor_
 ## Review Comment
 
-Line 640 drops the local responder when the directed target is also the sender. That means a self-directed WHOIS now returns with no `Generated` response, but `Manager.controlMessageReceivers()` still records the target session as having received the request. This will skew received audits/stats for a message that was intentionally skipped.
+_⚠️ Potential issue_ | _🟡 Minor_
+
+**Don’t seed the failure story from `codexSessions[0]` unguarded.**
+
+If the fixtures stop containing `"codex-agent"`, this spread throws during module evaluation and breaks the whole story file. Build the failure row from an explicit base fixture or guard the lookup first.
+
+<details>
+<summary>🤖 Prompt for AI Agents</summary>
+
+```
+Verify each finding against the current code and only fix it if needed.
+
+In `@web/src/systems/agent/components/stories/agent-sessions-list.stories.tsx`
+around lines 13 - 33, codexSessionsWithFailure currently spreads
+codexSessions[0] without checking its existence which will throw during module
+evaluation if codexSessions no longer contains the expected fixture; update the
+construction of codexSessionsWithFailure (and any use of codexSessions[0]) to
+either (a) build the failure session from an explicit base fixture object (copy
+required fields and override id/name/state/etc.) instead of spreading
+codexSessions[0], or (b) first guard the lookup by checking that codexSessions
+&& codexSessions.length > 0 and fall back to a safe default baseSession when
+missing; adjust the identifier referenced (codexSessionsWithFailure,
+codexSessions[0]) accordingly so the story never throws at import time.
+```
+
+</details>
+
+<!-- fingerprinting:phantom:medusa:grasshopper -->
+
+<!-- This is an auto-generated comment by CodeRabbit -->
 
 ## Triage
 
 - Decision: `VALID`
-- Notes: A directed WHOIS whose target is also the sender is intentionally skipped by `whoisRequestResponders`, but the route result remains non-ignored. `Manager.recordInboundAudit` suppresses control-message receiver audit only for ignored/rejected results, so the skipped self-WHOIS can still be audited as received. Fix within `internal/network/router.go` by marking directed self-WHOIS requests as `Ignored`, and add coverage in `router_test.go`.
+- Notes:
+  - `codexSessionsWithFailure` spreads `codexSessions[0]` at module evaluation time.
+  - If the fixture set no longer includes a `codex-agent` session, the story file can crash during import before Storybook renders anything.
+  - Fix by using an explicit fallback `SessionPayload` base before creating the failure row.
+  - Resolution: added an explicit fallback codex session fixture and imported the story in the story regression test.
+  - Verification: targeted Vitest passed; `make verify` passed.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_011.md b/.compozy/tasks/qa-rounds/reviews-001/issue_011.md
index 6797c2832..19658f846 100644
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_011.md
+++ b/.compozy/tasks/qa-rounds/reviews-001/issue_011.md
@@ -1,23 +1,218 @@
 ---
 status: resolved
-file: internal/network/router_test.go
-line: 160
-severity: nitpick
+file: web/src/systems/agent/components/stories/agent-sessions-list.stories.tsx
+line: 59
 author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:68efdaccc85c
-review_hash: 68efdaccc85c
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
+provider_ref: thread:PRRT_kwDOR5y4QM59sdFA,comment:PRRC_kwDOR5y4QM67ae5A
 ---
 
-# Issue 011: Split the new echo coverage into t.Run subtests.
+# Issue 011: _⚠️ Potential issue_ | _🔴 Critical_
 ## Review Comment
 
-These are two independent behaviors—broadcast self-echo and directed self-echo—so separate subtests will isolate failures better and match the repo’s default test style.
+_⚠️ Potential issue_ | _🔴 Critical_
 
-As per coding guidelines, "Use table-driven tests with subtests (`t.Run`) as default pattern" and "MUST use t.Run("Should...") pattern for ALL test cases".
+<details>
+<summary>🧩 Analysis chain</summary>
+
+🏁 Script executed:
+
+```shell
+# First, let's locate and examine the file
+fd -t f "agent-sessions-list.stories.tsx" web/
+```
+
+Repository: compozy/agh
+
+Length of output: 128
+
+---
+
+🏁 Script executed:
+
+```shell
+# Read the file to see the actual imports and the Frame function
+cat -n web/src/systems/agent/components/stories/agent-sessions-list.stories.tsx | head -70
+```
+
+Repository: compozy/agh
+
+Length of output: 2379
+
+---
+
+🏁 Script executed:
+
+```shell
+# Check if React is imported anywhere in the file
+rg "^import.*React" web/src/systems/agent/components/stories/agent-sessions-list.stories.tsx
+```
+
+Repository: compozy/agh
+
+Length of output: 37
+
+---
+
+🏁 Script executed:
+
+```shell
+# Check the tsconfig or TypeScript configuration to understand how React types are resolved
+fd -t f "tsconfig.json" | head -5
+```
+
+Repository: compozy/agh
+
+Length of output: 265
+
+---
+
+🏁 Script executed:
+
+```shell
+# Check how React 19 is configured in the project - look for package.json react version
+rg '"react":\s*"' package.json
+```
+
+Repository: compozy/agh
+
+Length of output: 37
+
+---
+
+🏁 Script executed:
+
+```shell
+# Check if there are other Storybook story files that might show the pattern for handling children types
+rg "React\.ReactNode" web/src/systems/ -A 1 -B 1 | head -30
+```
+
+Repository: compozy/agh
+
+Length of output: 2453
+
+---
+
+🌐 Web query:
+
+`React 19 JSX runtime ReactNode type reference without import TypeScript`
+
+💡 Result:
+
+In React 19 with the new JSX runtime ("jsx": "react-jsx" in tsconfig.json), there is no global ReactNode type available without importing React. The ReactNode type is defined in `@types/react`'s index types as type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined, but to use it (e.g., for component return types), you must import it from 'react': import { ReactNode } from 'react'; function MyComponent: ReactNode { return <div>Hello</div>; } This is because React 19 scoped the JSX namespace to React.JSX (in react/jsx-runtime.d.ts for automatic runtime), removing the global JSX namespace pollution. TypeScript falls back to global JSX only if the scoped one is unavailable, but ReactNode is not part of JSX—it's a React-specific type requiring the React module. The common build error "The inferred type cannot be named without a reference to '@types/react'" occurs when TypeScript cannot emit declarations for inferred ReactElement/JSX.Element types without explicit React types installed/updated to ^19.0.0. Explicitly typing components as ReactNode (with import) resolves this portably. No configuration makes ReactNode globally available without import in React 19 JSX runtime; the design requires importing React types for use.
+
+Citations:
+
+- 1: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/69022
+- 2: https://ar.react.dev/blog/2024/04/25/react-19-upgrade-guide
+- 3: https://www.typescriptlang.org/docs/handbook/jsx.html
+- 4: https://github.com/facebook/react/releases/tag/v19.0.0
+- 5: https://react.dev/blog/2024/04/25/react-19-upgrade-guide
+- 6: https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/71395
+- 7: https://www.jsdocs.io/package/@types/react
+
+---
+
+🏁 Script executed:
+
+```shell
+# Check the web package's tsconfig.json
+cat -n web/tsconfig.json 2>/dev/null || cat -n web/tsconfig.app.json 2>/dev/null || echo "No tsconfig found in web/"
+```
+
+Repository: compozy/agh
+
+Length of output: 983
+
+---
+
+🏁 Script executed:
+
+```shell
+# Check the root tsconfig.json
+cat -n tsconfig.json | head -50
+```
+
+Repository: compozy/agh
+
+Length of output: 602
+
+---
+
+🏁 Script executed:
+
+```shell
+# Verify if the package.json shows React version
+rg '"react"' package.json -A 1 -B 1
+```
+
+Repository: compozy/agh
+
+Length of output: 37
+
+---
+
+🏁 Script executed:
+
+```shell
+# Look at one of the other story files to see if they have React imports
+head -20 web/src/systems/tasks/components/stories/tasks-list-panel.stories.tsx
+```
+
+Repository: compozy/agh
+
+Length of output: 672
+
+---
+
+
+
+</details>
+
+**Import `ReactNode` explicitly — React 19 requires it.**
+
+Using `React.ReactNode` without importing `React` or `ReactNode` fails TypeScript strict mode under React 19's automatic JSX runtime (`"jsx": "react-jsx"` in tsconfig). This same issue exists in multiple story files (e.g., `tasks-kanban-board.stories.tsx`, `tasks-list-panel.stories.tsx`). Use an explicit type import instead.
+
+<details>
+<summary>🛠️ Suggested fix</summary>
+
+```diff
++import type { ReactNode } from "react";
+ import type { Meta, StoryObj } from "@storybook/react-vite";
+@@
+-function Frame({ children }: { children: React.ReactNode }) {
++function Frame({ children }: { children: ReactNode }) {
+```
+</details>
+
+<details>
+<summary>🤖 Prompt for AI Agents</summary>
+
+```
+Verify each finding against the current code and only fix it if needed.
+
+In `@web/src/systems/agent/components/stories/agent-sessions-list.stories.tsx`
+around lines 53 - 59, The Frame component uses React.ReactNode but
+React/ReactNode isn't explicitly imported which breaks TypeScript with the
+react-jsx runtime; update the top of the file to add an explicit type import
+(e.g., import type { ReactNode } from "react") and then change the component
+signature to use ReactNode ({ children }: { children: ReactNode }) — apply the
+same explicit type import and replacement in other story files that use
+React.ReactNode (e.g., tasks-kanban-board.stories.tsx,
+tasks-list-panel.stories.tsx).
+```
+
+</details>
+
+<!-- fingerprinting:phantom:medusa:grasshopper -->
+
+<!-- This is an auto-generated comment by CodeRabbit -->
 
 ## Triage
 
 - Decision: `VALID`
-- Notes: `TestRouterDoesNotDeliverLocalEchoesToSender` checks broadcast and directed self-echo behavior in one body. Fix by splitting these into separate `Should ...` subtests that share the same router setup pattern.
+- Notes:
+  - The story file references `React.ReactNode` without importing `React`, which is unsafe under the React 19 automatic JSX runtime.
+  - The batch scope covers the agent story file, not the unrelated task story examples mentioned in the prompt, so the fix is limited to the scoped file.
+  - Fix by importing `ReactNode` as a type and using it through a named `FrameProps` interface.
+  - Resolution: added an explicit `ReactNode` import and `FrameProps` interface in the scoped story file.
+  - Verification: `make web-typecheck` passed; `make verify` passed.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_012.md b/.compozy/tasks/qa-rounds/reviews-001/issue_012.md
index ed1fdfa2b..4d8d547a5 100644
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_012.md
+++ b/.compozy/tasks/qa-rounds/reviews-001/issue_012.md
@@ -1,172 +1,81 @@
 ---
 status: resolved
-file: internal/observe/observer.go
-line: 605
+file: web/src/systems/agent/components/stories/agent-stats-grid.stories.tsx
+line: 63
 author: coderabbitai[bot]
-provider_ref: thread:PRRT_kwDOR5y4QM59r7vN,comment:PRRC_kwDOR5y4QM67Z0NI
+provider_ref: thread:PRRT_kwDOR5y4QM59sdFC,comment:PRRC_kwDOR5y4QM67ae5D
 ---
 
-# Issue 012: _⚠️ Potential issue_ | _🟠 Major_
+# Issue 012: _⚠️ Potential issue_ | _🟡 Minor_
 ## Review Comment
 
-_⚠️ Potential issue_ | _🟠 Major_
+_⚠️ Potential issue_ | _🟡 Minor_
 
-<details>
-<summary>🧩 Analysis chain</summary>
-
-🏁 Script executed:
-
-```shell
-#!/bin/bash
-# Inspect the detached-context fallbacks and check whether any observer entrypoints
-# are already invoked with an explicit nil context.
-sed -n '598,669p' internal/observe/observer.go
-rg -nP --type=go -C2 '\.(OnSessionCreated|OnAgentEvent|OnAgentEventForSession)\s*\(\s*nil\b|New\s*\(\s*nil\b'
-```
-
-Repository: compozy/agh
-
-Length of output: 2885
-
----
-
-🏁 Script executed:
-
-```shell
-#!/bin/bash
-# Find all calls to recoverSessionSnapshot and observedSessionSnapshot
-rg -n 'recoverSessionSnapshot|observedSessionSnapshot' internal/observe/observer.go
-```
-
-Repository: compozy/agh
-
-Length of output: 535
-
----
-
-🏁 Script executed:
+**Potential runtime error if fixture is empty.**
 
-```shell
-#!/bin/bash
-# Find all calls to Observer methods that might trigger context issues
-rg -n -B3 -A3 'o\.recoverSessionSnapshot\(|o\.observedSessionSnapshot\(' internal/observe/observer.go
-```
-
-Repository: compozy/agh
-
-Length of output: 1085
-
----
-
-🏁 Script executed:
-
-```shell
-#!/bin/bash
-# Check where Observer is instantiated and used, trace context flow from entry points
-rg -n -B2 -A5 'func.*On(SessionCreated|AgentEvent|SessionStopped)' internal/observe/observer.go | head -100
-```
-
-Repository: compozy/agh
-
-Length of output: 1352
-
----
-
-🏁 Script executed:
-
-```shell
-#!/bin/bash
-# Find observeAgentEvent definition and trace context flow
-rg -n -B3 -A15 'func \(o \*Observer\) observeAgentEvent' internal/observe/observer.go
-```
+Line 48 accesses `richSessions[0]` without a guard. If `sessionFixtures` has no sessions with `agent_name === "codex-agent"`, this will spread `undefined` and cause unexpected behavior or errors.
 
-Repository: compozy/agh
 
-Length of output: 781
 
----
-
-🏁 Script executed:
-
-```shell
-#!/bin/bash
-# Find all calls to observer methods from outside to see entry points
-rg -n 'Observer.*OnSessionCreated|Observer.*OnAgentEvent|Observer.*OnSessionStopped' --type=go | grep -v 'internal/observe/observer.go' | head -20
-```
-
-Repository: compozy/agh
-
-Length of output: 2405
-
----
-
-🏁 Script executed:
-
-```shell
-#!/bin/bash
-# Find validateObservedEvent implementation
-rg -n -B3 -A20 'func \(o \*Observer\) validateObservedEvent' internal/observe/observer.go
-```
-
-Repository: compozy/agh
-
-Length of output: 733
-
----
-
-🏁 Script executed:
-
-```shell
-#!/bin/bash
-# Check if there are any other places where these functions might be called
-rg -n 'recoverSessionSnapshot|observedSessionSnapshot' internal/observe/ --type=go
+<details>
+<summary>🛡️ Proposed fix with guard</summary>
+
+```diff
++const baseSession = richSessions[0];
++
+ const failedSessions: SessionPayload[] = [
+   ...richSessions,
+-  {
+-    ...richSessions[0],
++  ...(baseSession ? [{
++    ...baseSession,
+     id: "sess-failure",
+     state: "stopped",
+     stop_reason: "agent_crashed",
+     failure: { kind: "agent_crashed", summary: "broker disconnect" },
+     activity: {
+       elapsed_seconds: 412,
+       idle_seconds: 0,
+       iteration_current: 2,
+       iteration_max: 6,
+       last_activity_at: "2026-04-17T18:55:00Z",
+       last_activity_kind: "tool",
+       last_progress_at: "2026-04-17T18:55:00Z",
+     },
+-  },
++  }] : []),
+ ];
 ```
-
-Repository: compozy/agh
-
-Length of output: 709
-
----
-
-
-
 </details>
 
-**Remove the `context.Background()` fallback — require callers to pass valid context.**
-
-These helper functions (`recoverSessionSnapshot` at line 603-605, `observedSessionSnapshot` at line 647-649) cross I/O boundaries (`ListSessions`, permission/config resolution). The nil-check fallbacks that replace missing context with `context.Background()` violate the coding guideline for `internal/**/*.go`: "Avoid `context.Background()` outside `main` and focused tests."
-
-This design masks upstream bugs instead of surfacing them. If a nil context ever reaches these functions, the caller has failed to propagate context correctly. That failure should be loud, not silently replaced with a detached context that drops cancellation, deadlines, and request-scoped values.
-
-Since all public entrypoints (`OnSessionCreated`, `OnAgentEvent`, `OnAgentEventForSession`, `OnSessionStopped`) already receive `context.Context` as the first parameter and propagate it consistently through the call chain, these fallbacks are unnecessary. Remove them and require callers to always pass valid context.
-
-Also applies to line 647-649 in `observedSessionSnapshot`.
-
 <details>
 <summary>🤖 Prompt for AI Agents</summary>
 
 ```
 Verify each finding against the current code and only fix it if needed.
 
-In `@internal/observe/observer.go` around lines 603 - 605, Remove the silent
-context.Background() fallback in recoverSessionSnapshot and
-observedSessionSnapshot; do not substitute a background context when ctx is nil
-— instead make the failure loud so callers must pass a valid context.
-Concretely, delete the block `if ctx == nil { ctx = context.Background() }` in
-both recoverSessionSnapshot and observedSessionSnapshot and replace it with a
-clear guard that surfaces the bug (for example `if ctx == nil { panic("nil
-context passed to recoverSessionSnapshot") }` and similarly for
-observedSessionSnapshot) so upstream callers are forced to propagate a non-nil
-context.
+In `@web/src/systems/agent/components/stories/agent-stats-grid.stories.tsx` around
+lines 45 - 63, The test fixture builds failedSessions by spreading
+richSessions[0] without ensuring richSessions is non-empty, which can spread
+undefined and crash; update the failedSessions construction (the failedSessions
+constant that references richSessions[0]) to guard against an empty richSessions
+– e.g., check richSessions.length and if empty use a safe fallback object (a
+minimal session shape or the first item from sessionFixtures) or skip adding the
+failure case so the fixture remains valid when no "codex-agent" sessions exist.
 ```
 
 </details>
 
-<!-- fingerprinting:phantom:medusa:grasshopper -->
+<!-- fingerprinting:phantom:poseidon:ocelot -->
 
 <!-- This is an auto-generated comment by CodeRabbit -->
 
 ## Triage
 
 - Decision: `VALID`
-- Notes: `recoverSessionSnapshot` and `observedSessionSnapshot` silently replace nil contexts with `context.Background()`, dropping cancellation/deadlines and hiding caller bugs in production I/O paths. Fix by removing the fallback and making nil context a loud programmer error in both helpers.
+- Notes:
+  - `failedSessions` spreads `richSessions[0]` without proving the filtered fixture array is non-empty.
+  - If the `codex-agent` fixture is removed, the story can fail during module import.
+  - Fix by introducing an explicit fallback `SessionPayload` base and using it when `richSessions[0]` is absent. Also convert the story frame props to the same explicit `ReactNode`/interface pattern used by the other scoped stories.
+  - Resolution: added an explicit fallback rich session, guarded the failure base, and converted the frame props to `ReactNode` plus `FrameProps`.
+  - Verification: targeted Vitest passed; `make verify` passed.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_013.md b/.compozy/tasks/qa-rounds/reviews-001/issue_013.md
index 2fecfc529..1efa58b87 100644
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_013.md
+++ b/.compozy/tasks/qa-rounds/reviews-001/issue_013.md
@@ -1,46 +1,28 @@
 ---
 status: resolved
-file: internal/observe/observer.go
-line: 632
+file: web/src/systems/session/contexts/session-create-context.tsx
+line: 12
+severity: nitpick
 author: coderabbitai[bot]
-provider_ref: thread:PRRT_kwDOR5y4QM59r7vP,comment:PRRC_kwDOR5y4QM67Z0NK
+provider_ref: review:4177569108,nitpick_hash:f97e9ac4418e
+review_hash: f97e9ac4418e
+source_review_id: "4177569108"
+source_review_submitted_at: "2026-04-26T22:35:58Z"
 ---
 
-# Issue 013: _⚠️ Potential issue_ | _🟠 Major_
+# Issue 013: Extract provider props into an interface.
 ## Review Comment
 
-_⚠️ Potential issue_ | _🟠 Major_
+The provider is fine functionally, but props should be modeled with a named interface instead of an inline object shape.
 
-**Registry recovery should not re-cache stopped sessions.**
-
-`OnSessionStopped` explicitly evicts the session from `o.sessions`, but this branch adds it back for any persisted registry row. A late event for a completed session will therefore repopulate the in-memory cache and keep it there indefinitely, because stopped sessions remain in the registry. Consider making registry recovery a one-shot lookup, or only caching sessions that are still live.
-
-<details>
-<summary>🤖 Prompt for AI Agents</summary>
-
-```
-Verify each finding against the current code and only fix it if needed.
-
-In `@internal/observe/observer.go` around lines 621 - 632, The registry recovery
-currently re-adds stopped sessions into the in-memory cache by calling
-o.trackSession in the ListSessions loop; change this to avoid caching sessions
-that are no longer live. Specifically, in the loop that iterates sessions
-returned by o.registry.ListSessions, only call o.trackSession for sessions whose
-persisted metadata indicates they are active (e.g., check a liveliness field
-like info.State/Status not equal to "stopped" or !info.Stopped); otherwise,
-return the observed snapshot without calling o.trackSession (or treat recovery
-as a one-shot lookup). Also ensure this behavior is consistent with
-OnSessionStopped which evicts from o.sessions so stopped sessions are never
-re-added.
-```
-
-</details>
-
-<!-- fingerprinting:phantom:medusa:grasshopper -->
-
-<!-- This is an auto-generated comment by CodeRabbit -->
+As per coding guidelines, `**/*.{ts,tsx}`: Use `interface` for defining object shapes in TypeScript instead of `type` declarations.
 
 ## Triage
 
 - Decision: `VALID`
-- Notes: `OnSessionStopped` evicts a session from the observer cache, but registry recovery currently calls `trackSession` for every persisted row, including `stopped` sessions. A late event can therefore re-cache stopped sessions indefinitely. Fix by treating stopped registry rows as one-shot recovery snapshots and only tracking non-stopped rows.
+- Notes:
+  - `SessionCreateProvider` declares its props as an inline object shape and uses `React.ReactNode`.
+  - The local TypeScript convention prefers named interfaces for object props and explicit type imports.
+  - Fix by adding a `SessionCreateProviderProps` interface and importing `ReactNode` as a type.
+  - Resolution: added `SessionCreateProviderProps` and an explicit `ReactNode` type import.
+  - Verification: `make web-typecheck` passed; `make verify` passed.
diff --git a/web/src/components/app-sidebar.test.tsx b/web/src/components/app-sidebar.test.tsx
index 5a201c492..aa7fe37e4 100644
--- a/web/src/components/app-sidebar.test.tsx
+++ b/web/src/components/app-sidebar.test.tsx
@@ -12,6 +12,17 @@ const onAddWorkspace = vi.fn();
 let matchedRoute: Record<string, boolean> = {};
 let matchedRouteFuzzy: Record<string, boolean> = {};
 
+type MatchRouteParams = Record<string, string>;
+
+function routeMatchKey(to: string, params?: MatchRouteParams): string {
+  if (!params) return to;
+  const serializedParams = Object.entries(params)
+    .sort(([left], [right]) => left.localeCompare(right))
+    .map(([key, value]) => `${key}=${value}`)
+    .join("&");
+  return `${to}?${serializedParams}`;
+}
+
 vi.mock("@tanstack/react-router", () => ({
   Link: ({
     children,
@@ -21,7 +32,7 @@ vi.mock("@tanstack/react-router", () => ({
   }: {
     children: ReactNode;
     to: string;
-    params?: Record<string, string>;
+    params?: MatchRouteParams;
     [key: string]: unknown;
   }) => {
     const href = params
@@ -33,11 +44,12 @@ vi.mock("@tanstack/react-router", () => ({
       </a>
     );
   },
-  useMatchRoute: () => (opts: { to: string; fuzzy?: boolean }) => {
+  useMatchRoute: () => (opts: { to: string; params?: MatchRouteParams; fuzzy?: boolean }) => {
+    const matchKey = routeMatchKey(opts.to, opts.params);
     if (opts.fuzzy) {
-      return matchedRouteFuzzy[opts.to] ?? matchedRoute[opts.to] ?? false;
+      return matchedRouteFuzzy[matchKey] ?? matchedRoute[matchKey] ?? false;
     }
-    return matchedRoute[opts.to] ?? false;
+    return matchedRoute[matchKey] ?? false;
   },
 }));
 
@@ -261,14 +273,19 @@ describe("AppSidebar", () => {
     });
 
     it("highlights the agent row whose route is active (fuzzy: covers nested session route)", () => {
-      matchedRouteFuzzy["/agents/$name"] = true;
+      matchedRouteFuzzy[routeMatchKey("/agents/$name", { name: "coder" })] = true;
       renderSidebar(
         makeProps({
-          agents: [{ name: "coder", provider: "claude", prompt: "code" }],
+          agents: [
+            { name: "coder", provider: "claude", prompt: "code" },
+            { name: "writer", provider: "openai", prompt: "write" },
+          ],
         })
       );
       expect(screen.getByTestId("agent-row-coder")).toHaveAttribute("data-active", "true");
       expect(screen.getByTestId("agent-active-coder")).toBeInTheDocument();
+      expect(screen.getByTestId("agent-row-writer")).toHaveAttribute("data-active", "false");
+      expect(screen.queryByTestId("agent-active-writer")).not.toBeInTheDocument();
     });
 
     it("shows bootstrap hint when no agents are loaded", () => {
diff --git a/web/src/routes/_app/-agents.$name.sessions.$id.test.tsx b/web/src/routes/_app/-agents.$name.sessions.$id.test.tsx
index 1524a854a..ef54ac44d 100644
--- a/web/src/routes/_app/-agents.$name.sessions.$id.test.tsx
+++ b/web/src/routes/_app/-agents.$name.sessions.$id.test.tsx
@@ -42,6 +42,7 @@ vi.mock("@tanstack/react-router", () => ({
 vi.mock("sonner", () => ({
   toast: {
     error: vi.fn(),
+    success: vi.fn(),
   },
 }));
 
@@ -167,4 +168,27 @@ describe("Nested agent session route — resume failure UX", () => {
     render(<SessionPage />);
     expect(screen.getByTestId("session-provider-badge")).toHaveTextContent("codex");
   });
+
+  it("navigates to the resolved session agent after delete succeeds", () => {
+    mockUseSession.mockReturnValue({
+      data: makeSession({ agent_name: "codex-agent" }),
+      isLoading: false,
+      error: null,
+    });
+    mockDelete.mutate.mockImplementation(
+      (_id: string, opts?: { onSuccess?: () => void; onError?: (error: unknown) => void }) => {
+        opts?.onSuccess?.();
+      }
+    );
+
+    render(<SessionPage />);
+
+    fireEvent.click(screen.getByTestId("delete-button"));
+    fireEvent.click(screen.getByTestId("delete-dialog-confirm"));
+
+    expect(mockNavigate).toHaveBeenCalledWith({
+      to: "/agents/$name",
+      params: { name: "codex-agent" },
+    });
+  });
 });
diff --git a/web/src/routes/_app/-agents.$name.test.tsx b/web/src/routes/_app/-agents.$name.test.tsx
new file mode 100644
index 000000000..abf6c754b
--- /dev/null
+++ b/web/src/routes/_app/-agents.$name.test.tsx
@@ -0,0 +1,97 @@
+import { render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { UseAgentDetailPageResult } from "@/hooks/routes/use-agent-detail-page";
+import { primaryAgentFixture } from "@/systems/agent/mocks";
+import { primarySessionFixture } from "@/systems/session/mocks";
+
+let childMatches: Array<{ id: string }> = [];
+const mockUseAgentDetailPage = vi.fn();
+
+vi.mock("@tanstack/react-router", () => ({
+  createFileRoute: () => (opts: { component: () => ReactNode }) => ({
+    component: opts.component,
+    useParams: () => ({ name: "codex-agent" }),
+  }),
+  Outlet: () => <div data-testid="agent-detail-outlet" />,
+  useChildMatches: () => childMatches,
+}));
+
+vi.mock("@/hooks/routes/use-agent-detail-page", () => ({
+  useAgentDetailPage: (name: string) => mockUseAgentDetailPage(name),
+}));
+
+vi.mock("@/systems/agent", () => ({
+  AgentInfoPanel: () => <aside data-testid="agent-info-panel" />,
+  AgentPageHeader: ({ sessions }: { sessions: unknown[] }) => (
+    <header data-testid="agent-page-header">{sessions.length}</header>
+  ),
+  AgentSessionsList: ({ isLoading, isError }: { isLoading: boolean; isError: boolean }) => (
+    <div data-testid="agent-sessions-list" data-loading={isLoading} data-error={isError} />
+  ),
+  AgentStatsGrid: () => <div data-testid="agent-stats-grid" />,
+}));
+
+import { Route } from "./agents.$name";
+
+const AgentDetailRoute = (Route as unknown as { component: () => ReactNode }).component;
+
+function makePage(overrides: Partial<UseAgentDetailPageResult> = {}): UseAgentDetailPageResult {
+  return {
+    agent: primaryAgentFixture,
+    agentLoading: false,
+    agentError: null,
+    sessions: [primarySessionFixture],
+    sessionsLoading: false,
+    sessionsError: false,
+    isRefreshing: false,
+    isCreatingForAgent: false,
+    newSessionDisabled: false,
+    sessionCreate: {
+      openForAgent: vi.fn(),
+      isCreating: false,
+      pendingAgentName: null,
+      hasActiveWorkspace: true,
+    },
+    onRefresh: vi.fn(),
+    onConfigure: vi.fn(),
+    onNewSession: vi.fn(),
+    onGoHome: vi.fn(),
+    ...overrides,
+  };
+}
+
+describe("Agent detail route", () => {
+  beforeEach(() => {
+    childMatches = [];
+    mockUseAgentDetailPage.mockReset();
+    mockUseAgentDetailPage.mockReturnValue(makePage());
+  });
+
+  it("renders nested child routes without starting the detail page queries", () => {
+    childMatches = [{ id: "/_app/agents/$name/sessions/$id" }];
+
+    render(<AgentDetailRoute />);
+
+    expect(screen.getByTestId("agent-detail-outlet")).toBeInTheDocument();
+    expect(mockUseAgentDetailPage).not.toHaveBeenCalled();
+  });
+
+  it("does not render authoritative stats while sessions are loading", () => {
+    mockUseAgentDetailPage.mockReturnValue(
+      makePage({ sessions: [], sessionsLoading: true, sessionsError: false })
+    );
+
+    render(<AgentDetailRoute />);
+
+    expect(screen.getByTestId("agent-sessions-list")).toHaveAttribute("data-loading", "true");
+    expect(screen.queryByTestId("agent-stats-grid")).not.toBeInTheDocument();
+  });
+
+  it("renders stats after session data resolves", () => {
+    render(<AgentDetailRoute />);
+
+    expect(screen.getByTestId("agent-stats-grid")).toBeInTheDocument();
+  });
+});
diff --git a/web/src/routes/_app/agents.$name.sessions.$id.tsx b/web/src/routes/_app/agents.$name.sessions.$id.tsx
index 7fc38c3bc..59a7b9aa6 100644
--- a/web/src/routes/_app/agents.$name.sessions.$id.tsx
+++ b/web/src/routes/_app/agents.$name.sessions.$id.tsx
@@ -25,13 +25,7 @@ function SessionPageContent({
   session,
   workspaceName,
   onDeleteSuccess,
-}: {
-  agentName: string;
-  sessionId: string;
-  session: SessionPayload;
-  workspaceName?: string;
-  onDeleteSuccess: () => void;
-}) {
+}: SessionPageContentProps) {
   const {
     canClear,
     canPrompt,
@@ -88,6 +82,14 @@ function SessionPageContent({
   );
 }
 
+interface SessionPageContentProps {
+  agentName: string;
+  sessionId: string;
+  session: SessionPayload;
+  workspaceName?: string;
+  onDeleteSuccess: () => void;
+}
+
 function SessionPage() {
   const { name, id } = Route.useParams();
   const navigate = useNavigate();
@@ -123,16 +125,17 @@ function SessionPage() {
   }
 
   const workspaceName = workspaces?.find(workspace => workspace.id === session.workspace_id)?.name;
+  const resolvedAgentName = session.agent_name ?? name;
 
   return (
     <SessionChatRuntimeProvider key={id} sessionId={id} workspaceId={session.workspace_id}>
       <SessionPageContent
-        agentName={session.agent_name ?? name}
+        agentName={resolvedAgentName}
         sessionId={id}
         session={session}
         workspaceName={workspaceName}
         onDeleteSuccess={() => {
-          void navigate({ to: "/agents/$name", params: { name } });
+          void navigate({ to: "/agents/$name", params: { name: resolvedAgentName } });
         }}
       />
     </SessionChatRuntimeProvider>
diff --git a/web/src/routes/_app/agents.$name.tsx b/web/src/routes/_app/agents.$name.tsx
index 660d31e38..02d71b84b 100644
--- a/web/src/routes/_app/agents.$name.tsx
+++ b/web/src/routes/_app/agents.$name.tsx
@@ -19,12 +19,21 @@ function AgentDetailPage() {
   const { name } = Route.useParams();
   const childMatches = useChildMatches();
   const hasChildMatch = childMatches.length > 0;
-  const page = useAgentDetailPage(name);
 
   if (hasChildMatch) {
     return <Outlet />;
   }
 
+  return <AgentDetailContent name={name} />;
+}
+
+interface AgentDetailContentProps {
+  name: string;
+}
+
+function AgentDetailContent({ name }: AgentDetailContentProps) {
+  const page = useAgentDetailPage(name);
+
   if (page.agentLoading) {
     return (
       <div className="flex flex-1 items-center justify-center" data-testid="agent-detail-loading">
@@ -59,6 +68,8 @@ function AgentDetailPage() {
     );
   }
 
+  const hasResolvedSessions = !page.sessionsLoading && !page.sessionsError;
+
   return (
     <div className="flex min-h-0 min-w-0 flex-1 overflow-hidden" data-testid="agent-detail-page">
       <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
@@ -76,7 +87,7 @@ function AgentDetailPage() {
           className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-6 py-5"
           data-testid="agent-detail-body"
         >
-          <AgentStatsGrid sessions={page.sessions} />
+          {hasResolvedSessions ? <AgentStatsGrid sessions={page.sessions} /> : null}
           <AgentSessionsList
             agentName={name}
             sessions={page.sessions}
diff --git a/web/src/routes/_app/stories/-agents.$name.stories.tsx b/web/src/routes/_app/stories/-agents.$name.stories.tsx
index 4492139a5..5ad6d542b 100644
--- a/web/src/routes/_app/stories/-agents.$name.stories.tsx
+++ b/web/src/routes/_app/stories/-agents.$name.stories.tsx
@@ -27,6 +27,20 @@ const codexSessions: SessionPayload[] = sessionFixtures.filter(
   session => session.agent_name === "codex-agent"
 );
 
+const fallbackCodexSession: SessionPayload = {
+  id: "sess-storybook-base",
+  name: "Storybook rollout",
+  agent_name: "codex-agent",
+  provider: "codex",
+  workspace_id: "ws_storybook",
+  workspace_path: "/workspaces/agh2",
+  state: "active",
+  created_at: "2026-04-17T16:00:00Z",
+  updated_at: "2026-04-17T18:10:00Z",
+};
+
+const failureBaseSession = codexSessions[0] ?? fallbackCodexSession;
+
 const codexAgentRoute = "/agents/codex-agent";
 const claudeAgentRoute = "/agents/claude-agent";
 const missingAgentRoute = "/agents/ghost-agent";
@@ -82,6 +96,11 @@ export const SessionsLoading: Story = {
     }),
   },
   render: () => <StorybookWorkspaceSetup />,
+  tags: ["play-fn"],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.findByTestId("agent-sessions-loading")).resolves.toBeDefined();
+  },
 };
 
 /**
@@ -101,6 +120,11 @@ export const AgentLoading: Story = {
     }),
   },
   render: () => <StorybookWorkspaceSetup />,
+  tags: ["play-fn"],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.findByTestId("agent-detail-loading")).resolves.toBeDefined();
+  },
 };
 
 /**
@@ -140,7 +164,7 @@ export const WithFailedSession: Story = {
             sessions: [
               ...codexSessions,
               {
-                ...codexSessions[0],
+                ...failureBaseSession,
                 id: "sess-storybook-failed",
                 name: "Failed verification",
                 state: "stopped" as const,
diff --git a/web/src/storybook/web-storybook-stories-and-fixtures.test.tsx b/web/src/storybook/web-storybook-stories-and-fixtures.test.tsx
index 42c1e855a..a7bc7412d 100644
--- a/web/src/storybook/web-storybook-stories-and-fixtures.test.tsx
+++ b/web/src/storybook/web-storybook-stories-and-fixtures.test.tsx
@@ -26,9 +26,13 @@ describe("storybook story and fixture regressions", () => {
       import("@/systems/session/components/stories/copy-button.stories"),
       import("@/systems/session/components/tool-renderers/stories/read-content.stories"),
       import("@/systems/session/components/tool-renderers/stories/search-content.stories"),
+      import("@/routes/_app/stories/-agents.$name.stories"),
+      import("@/systems/agent/components/stories/agent-info-panel.stories"),
+      import("@/systems/agent/components/stories/agent-sessions-list.stories"),
+      import("@/systems/agent/components/stories/agent-stats-grid.stories"),
     ]);
 
-    expect(modules).toHaveLength(9);
+    expect(modules).toHaveLength(13);
 
     for (const module of modules) {
       expect(module.default).toBeDefined();
diff --git a/web/src/systems/agent/components/agent-sessions-list.test.tsx b/web/src/systems/agent/components/agent-sessions-list.test.tsx
new file mode 100644
index 000000000..77d282972
--- /dev/null
+++ b/web/src/systems/agent/components/agent-sessions-list.test.tsx
@@ -0,0 +1,88 @@
+import { render, screen, within } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { primarySessionFixture } from "@/systems/session/mocks";
+import type { SessionPayload } from "@/systems/session/types";
+import { AgentSessionsList } from "./agent-sessions-list";
+
+vi.mock("@tanstack/react-router", () => ({
+  Link: ({
+    children,
+    to,
+    params,
+    ...props
+  }: {
+    children: ReactNode;
+    to: string;
+    params?: Record<string, string>;
+    [key: string]: unknown;
+  }) => {
+    const href = params
+      ? Object.entries(params).reduce((acc, [key, value]) => acc.replace(`$${key}`, value), to)
+      : to;
+    return (
+      <a href={href} {...props}>
+        {children}
+      </a>
+    );
+  },
+}));
+
+function makeSession(overrides: Partial<SessionPayload>): SessionPayload {
+  return {
+    ...primarySessionFixture,
+    ...overrides,
+  };
+}
+
+describe("AgentSessionsList", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("formats relative times against one render-pass timestamp", () => {
+    vi.spyOn(Date, "now").mockReturnValue(Date.parse("2026-04-17T18:11:00Z"));
+    const sessions = [
+      makeSession({
+        id: "sess_one",
+        updated_at: "2026-04-17T18:10:30Z",
+        activity: {
+          elapsed_seconds: 60,
+          idle_seconds: 0,
+          iteration_current: 1,
+          iteration_max: 2,
+          last_activity_at: "2026-04-17T18:10:30Z",
+        },
+      }),
+      makeSession({
+        id: "sess_two",
+        updated_at: "2026-04-17T18:10:30Z",
+        activity: {
+          elapsed_seconds: 60,
+          idle_seconds: 0,
+          iteration_current: 1,
+          iteration_max: 2,
+          last_activity_at: "2026-04-17T18:10:30Z",
+        },
+      }),
+    ];
+
+    render(
+      <AgentSessionsList
+        agentName="codex-agent"
+        sessions={sessions}
+        isLoading={false}
+        isError={false}
+      />
+    );
+
+    expect(
+      within(screen.getByTestId("agent-session-row-sess_one")).getByText("just now")
+    ).toBeInTheDocument();
+    expect(
+      within(screen.getByTestId("agent-session-row-sess_two")).getByText("just now")
+    ).toBeInTheDocument();
+    expect(Date.now).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/web/src/systems/agent/components/agent-sessions-list.tsx b/web/src/systems/agent/components/agent-sessions-list.tsx
index 53d735a0d..527c6b932 100644
--- a/web/src/systems/agent/components/agent-sessions-list.tsx
+++ b/web/src/systems/agent/components/agent-sessions-list.tsx
@@ -58,6 +58,8 @@ export function AgentSessionsList({
     );
   }
 
+  const now = Date.now();
+
   return (
     <div className="overflow-x-auto" data-testid="agent-sessions-table-wrapper">
       <Table data-testid="agent-sessions-table">
@@ -72,7 +74,7 @@ export function AgentSessionsList({
         </TableHeader>
         <TableBody>
           {sessions.map(session => (
-            <AgentSessionRow key={session.id} agentName={agentName} session={session} />
+            <AgentSessionRow key={session.id} agentName={agentName} session={session} now={now} />
           ))}
         </TableBody>
       </Table>
@@ -83,9 +85,10 @@ export function AgentSessionsList({
 interface AgentSessionRowProps {
   agentName: string;
   session: SessionPayload;
+  now: number;
 }
 
-function AgentSessionRow({ agentName, session }: AgentSessionRowProps) {
+function AgentSessionRow({ agentName, session, now }: AgentSessionRowProps) {
   const status = getAgentSessionStatus(session);
   const title = session.name?.trim() || session.id.slice(0, 12);
   return (
@@ -118,7 +121,7 @@ function AgentSessionRow({ agentName, session }: AgentSessionRowProps) {
         {formatIterations(session.activity?.iteration_current, session.activity?.iteration_max)}
       </TableCell>
       <TableCell className="text-right font-mono text-[12px] text-[color:var(--color-text-secondary)]">
-        {formatRelativeTime(session.activity?.last_activity_at ?? session.updated_at)}
+        {formatRelativeTime(session.activity?.last_activity_at ?? session.updated_at, now)}
       </TableCell>
     </TableRow>
   );
@@ -159,11 +162,11 @@ function formatIterations(current: number | undefined, max: number | undefined):
   return `${current}`;
 }
 
-function formatRelativeTime(value: string | null | undefined): string {
+function formatRelativeTime(value: string | null | undefined, now: number): string {
   if (!value) return "—";
   const ts = new Date(value).getTime();
   if (!Number.isFinite(ts)) return "—";
-  const diffMs = Date.now() - ts;
+  const diffMs = now - ts;
   if (diffMs < 0) return "just now";
   const seconds = Math.floor(diffMs / 1000);
   if (seconds < 45) return "just now";
diff --git a/web/src/systems/agent/components/agent-stats-grid.test.tsx b/web/src/systems/agent/components/agent-stats-grid.test.tsx
new file mode 100644
index 000000000..9a71c8011
--- /dev/null
+++ b/web/src/systems/agent/components/agent-stats-grid.test.tsx
@@ -0,0 +1,39 @@
+import { render, screen, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { primarySessionFixture } from "@/systems/session/mocks";
+import type { SessionPayload } from "@/systems/session/types";
+import { AgentStatsGrid } from "./agent-stats-grid";
+
+function makeSession(overrides: Partial<SessionPayload>): SessionPayload {
+  return {
+    ...primarySessionFixture,
+    ...overrides,
+  };
+}
+
+describe("AgentStatsGrid", () => {
+  it("counts failures with the shared session-status predicate", () => {
+    const sessions = [
+      makeSession({
+        id: "active_failure_metadata",
+        state: "active",
+        failure: {
+          kind: "agent_crashed",
+          summary: "stale failure metadata",
+        },
+      }),
+      makeSession({ id: "stopped_error", state: "stopped", stop_reason: "error" }),
+      makeSession({
+        id: "stopped_crash",
+        state: "stopped",
+        stop_reason: "agent_crashed",
+      }),
+      makeSession({ id: "stopped_done", state: "stopped", stop_reason: "completed" }),
+    ];
+
+    render(<AgentStatsGrid sessions={sessions} />);
+
+    expect(within(screen.getByTestId("agent-stat-failed")).getByText("2")).toBeInTheDocument();
+  });
+});
diff --git a/web/src/systems/agent/components/agent-stats-grid.tsx b/web/src/systems/agent/components/agent-stats-grid.tsx
index b23347314..236873bae 100644
--- a/web/src/systems/agent/components/agent-stats-grid.tsx
+++ b/web/src/systems/agent/components/agent-stats-grid.tsx
@@ -1,5 +1,6 @@
 import { Metric, cn } from "@agh/ui";
 
+import { isAgentSessionFailure } from "../lib/session-status";
 import type { SessionPayload } from "@/systems/session";
 
 export interface AgentStatsGridProps {
@@ -57,11 +58,7 @@ function computeTotals(sessions: SessionPayload[]): SessionTotals {
 
   for (const session of sessions) {
     if (session.state === "active") active += 1;
-    if (
-      session.failure ||
-      session.stop_reason === "agent_crashed" ||
-      session.stop_reason === "error"
-    ) {
+    if (isAgentSessionFailure(session)) {
       failed += 1;
     }
     const elapsed = session.activity?.elapsed_seconds;
diff --git a/web/src/systems/agent/components/stories/agent-info-panel.stories.tsx b/web/src/systems/agent/components/stories/agent-info-panel.stories.tsx
index 2e8ff8d17..83653dae9 100644
--- a/web/src/systems/agent/components/stories/agent-info-panel.stories.tsx
+++ b/web/src/systems/agent/components/stories/agent-info-panel.stories.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { primaryAgentFixture } from "@/systems/agent/mocks";
@@ -33,7 +34,11 @@ const meta: Meta<typeof AgentInfoPanel> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-function Frame({ children }: { children: React.ReactNode }) {
+interface FrameProps {
+  children: ReactNode;
+}
+
+function Frame({ children }: FrameProps) {
   return (
     <StorySurface className="flex">
       <div className="flex flex-1 items-center justify-center text-sm text-[color:var(--color-text-secondary)]">
@@ -48,6 +53,7 @@ function Frame({ children }: { children: React.ReactNode }) {
  * Default — three MCP servers rendered as compact rows with transport chips.
  */
 export const Default: Story = {
+  args: {},
   render: args => (
     <Frame>
       <AgentInfoPanel {...args} />
diff --git a/web/src/systems/agent/components/stories/agent-sessions-list.stories.tsx b/web/src/systems/agent/components/stories/agent-sessions-list.stories.tsx
index 047695ec8..a2b7cc5d5 100644
--- a/web/src/systems/agent/components/stories/agent-sessions-list.stories.tsx
+++ b/web/src/systems/agent/components/stories/agent-sessions-list.stories.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { sessionFixtures } from "@/systems/session/mocks";
@@ -10,10 +11,24 @@ const codexSessions: SessionPayload[] = sessionFixtures.filter(
   session => session.agent_name === "codex-agent"
 );
 
+const fallbackCodexSession: SessionPayload = {
+  id: "sess-storybook-base",
+  name: "Storybook rollout",
+  agent_name: "codex-agent",
+  provider: "codex",
+  workspace_id: "ws_storybook",
+  workspace_path: "/workspaces/agh2",
+  state: "active",
+  created_at: "2026-04-17T16:00:00Z",
+  updated_at: "2026-04-17T18:10:00Z",
+};
+
+const failureBaseSession = codexSessions[0] ?? fallbackCodexSession;
+
 const codexSessionsWithFailure: SessionPayload[] = [
   ...codexSessions,
   {
-    ...codexSessions[0],
+    ...failureBaseSession,
     id: "sess-storybook-failed",
     name: "Failed verification",
     state: "stopped",
@@ -50,7 +65,11 @@ const meta: Meta<typeof AgentSessionsList> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-function Frame({ children }: { children: React.ReactNode }) {
+interface FrameProps {
+  children: ReactNode;
+}
+
+function Frame({ children }: FrameProps) {
   return (
     <PanelSurface>
       <div className="flex w-full flex-col gap-4 px-6 py-5">{children}</div>
@@ -62,6 +81,7 @@ function Frame({ children }: { children: React.ReactNode }) {
  * Default — table of sessions sorted by last activity with status chips and metadata.
  */
 export const Default: Story = {
+  args: {},
   render: args => (
     <Frame>
       <AgentSessionsList {...args} />
diff --git a/web/src/systems/agent/components/stories/agent-stats-grid.stories.tsx b/web/src/systems/agent/components/stories/agent-stats-grid.stories.tsx
index 58d603dce..79d74dd30 100644
--- a/web/src/systems/agent/components/stories/agent-stats-grid.stories.tsx
+++ b/web/src/systems/agent/components/stories/agent-stats-grid.stories.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { sessionFixtures } from "@/systems/session/mocks";
@@ -17,7 +18,11 @@ const meta: Meta<typeof AgentStatsGrid> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-function Frame({ children }: { children: React.ReactNode }) {
+interface FrameProps {
+  children: ReactNode;
+}
+
+function Frame({ children }: FrameProps) {
   return (
     <CenteredSurface>
       <div className="w-full max-w-4xl">{children}</div>
@@ -42,10 +47,34 @@ const richSessions: SessionPayload[] = codexSessions.map(session => ({
   },
 }));
 
+const fallbackRichSession: SessionPayload = {
+  id: "sess-storybook-base",
+  name: "Storybook rollout",
+  agent_name: "codex-agent",
+  provider: "codex",
+  workspace_id: "ws_storybook",
+  workspace_path: "/workspaces/agh2",
+  state: "active",
+  created_at: "2026-04-17T16:00:00Z",
+  updated_at: "2026-04-17T18:10:00Z",
+  activity: {
+    elapsed_seconds: 1820,
+    idle_seconds: 30,
+    iteration_current: 12,
+    iteration_max: 30,
+    last_activity_at: "2026-04-17T18:10:00Z",
+    last_activity_kind: "tool",
+    last_progress_at: "2026-04-17T18:10:00Z",
+  },
+};
+
+const displayRichSessions = richSessions.length > 0 ? richSessions : [fallbackRichSession];
+const failureBaseSession = displayRichSessions[0] ?? fallbackRichSession;
+
 const failedSessions: SessionPayload[] = [
-  ...richSessions,
+  ...displayRichSessions,
   {
-    ...richSessions[0],
+    ...failureBaseSession,
     id: "sess-failure",
     state: "stopped",
     stop_reason: "agent_crashed",
@@ -66,7 +95,7 @@ const failedSessions: SessionPayload[] = [
  * Default — agent has one active session; runtime accumulates from `activity.elapsed_seconds`.
  */
 export const Default: Story = {
-  args: { sessions: richSessions },
+  args: { sessions: displayRichSessions },
   render: args => (
     <Frame>
       <AgentStatsGrid {...args} />
diff --git a/web/src/systems/agent/lib/session-status.ts b/web/src/systems/agent/lib/session-status.ts
index c0b583130..7d1ebc747 100644
--- a/web/src/systems/agent/lib/session-status.ts
+++ b/web/src/systems/agent/lib/session-status.ts
@@ -24,6 +24,15 @@ const STOPPING_STATUS: AgentSessionStatus = {
 const FAILED_STATUS: AgentSessionStatus = { kind: "failed", label: "FAILED", tone: "danger" };
 const DONE_STATUS: AgentSessionStatus = { kind: "done", label: "DONE", tone: "neutral" };
 
+export function isAgentSessionFailure(session: SessionPayload): boolean {
+  return (
+    session.state === "stopped" &&
+    (Boolean(session.failure) ||
+      session.stop_reason === "agent_crashed" ||
+      session.stop_reason === "error")
+  );
+}
+
 export function getAgentSessionStatus(session: SessionPayload): AgentSessionStatus {
   switch (session.state) {
     case "active":
@@ -33,11 +42,7 @@ export function getAgentSessionStatus(session: SessionPayload): AgentSessionStat
     case "stopping":
       return STOPPING_STATUS;
     case "stopped":
-      if (
-        session.failure ||
-        session.stop_reason === "agent_crashed" ||
-        session.stop_reason === "error"
-      ) {
+      if (isAgentSessionFailure(session)) {
         return FAILED_STATUS;
       }
       return DONE_STATUS;
diff --git a/web/src/systems/session/contexts/session-create-context.tsx b/web/src/systems/session/contexts/session-create-context.tsx
index c00791912..d4334bba5 100644
--- a/web/src/systems/session/contexts/session-create-context.tsx
+++ b/web/src/systems/session/contexts/session-create-context.tsx
@@ -1,4 +1,5 @@
 import { createContext } from "react";
+import type { ReactNode } from "react";
 
 export interface SessionCreateContextValue {
   openForAgent: (agentName: string) => void;
@@ -9,12 +10,11 @@ export interface SessionCreateContextValue {
 
 export const SessionCreateContext = createContext<SessionCreateContextValue | null>(null);
 
-export function SessionCreateProvider({
-  value,
-  children,
-}: {
+interface SessionCreateProviderProps {
   value: SessionCreateContextValue;
-  children: React.ReactNode;
-}) {
+  children: ReactNode;
+}
+
+export function SessionCreateProvider({ value, children }: SessionCreateProviderProps) {
   return <SessionCreateContext.Provider value={value}>{children}</SessionCreateContext.Provider>;
 }

From 95bb3cc3a5464bca8e0a8f61f14316730d5f6955 Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Sun, 26 Apr 2026 22:03:23 -0300
Subject: [PATCH 3/4] docs: update

---
 .compozy/tasks/qa-rounds/reviews-001/_meta.md |  8 +-
 .../tasks/qa-rounds/reviews-001/issue_014.md  | 23 -----
 .../tasks/qa-rounds/reviews-001/issue_015.md  | 23 -----
 .../tasks/qa-rounds/reviews-001/issue_016.md  | 98 -------------------
 .../tasks/qa-rounds/reviews-001/issue_017.md  | 23 -----
 .../tasks/qa-rounds/reviews-001/issue_018.md  | 21 ----
 .../tasks/qa-rounds/reviews-001/issue_019.md  | 73 --------------
 .../tasks/qa-rounds/reviews-001/issue_020.md  | 96 ------------------
 .../tasks/qa-rounds/reviews-001/issue_021.md  | 54 ----------
 .../tasks/qa-rounds/reviews-001/issue_022.md  | 95 ------------------
 .../tasks/qa-rounds/reviews-001/issue_023.md  | 21 ----
 .../tasks/qa-rounds/reviews-001/issue_024.md  | 21 ----
 .../tasks/qa-rounds/reviews-001/issue_025.md  | 21 ----
 .../tasks/qa-rounds/reviews-001/issue_026.md  | 23 -----
 .../tasks/qa-rounds/reviews-001/issue_027.md  | 53 ----------
 .../tasks/qa-rounds/reviews-001/issue_028.md  | 23 -----
 .../tasks/qa-rounds/reviews-001/issue_029.md  | 25 -----
 .../tasks/qa-rounds/reviews-001/issue_030.md  | 23 -----
 .../tasks/qa-rounds/reviews-001/issue_031.md  | 21 ----
 .../tasks/qa-rounds/reviews-001/issue_032.md  | 21 ----
 .../tasks/qa-rounds/reviews-001/issue_033.md  | 21 ----
 21 files changed, 4 insertions(+), 783 deletions(-)
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_014.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_015.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_016.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_017.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_018.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_019.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_020.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_021.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_022.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_023.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_024.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_025.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_026.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_027.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_028.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_029.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_030.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_031.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_032.md
 delete mode 100644 .compozy/tasks/qa-rounds/reviews-001/issue_033.md

diff --git a/.compozy/tasks/qa-rounds/reviews-001/_meta.md b/.compozy/tasks/qa-rounds/reviews-001/_meta.md
index d06b4d908..c0cabd3f8 100644
--- a/.compozy/tasks/qa-rounds/reviews-001/_meta.md
+++ b/.compozy/tasks/qa-rounds/reviews-001/_meta.md
@@ -1,11 +1,11 @@
 ---
 provider: coderabbit
-pr: "78"
+pr: "80"
 round: 1
-created_at: 2026-04-26T20:29:02.311014Z
+created_at: 2026-04-27T00:34:22.802061Z
 ---
 
 ## Summary
-- Total: 33
+- Total: 13
 - Resolved: 0
-- Unresolved: 33
+- Unresolved: 13
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_014.md b/.compozy/tasks/qa-rounds/reviews-001/issue_014.md
deleted file mode 100644
index d0d36e479..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_014.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-status: resolved
-file: internal/observe/observer_test.go
-line: 93
-severity: nitpick
-author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:f22e7360bba5
-review_hash: f22e7360bba5
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
----
-
-# Issue 014: Prefer one table-driven test with t.Run("Should...") subtests here.
-## Review Comment
-
-These two cases only vary by recovery source, so consolidating them would remove duplicated setup/assert logic and match the test structure required in this repo.
-
-As per coding guidelines, `**/*_test.go`: "Table-driven tests with subtests (t.Run) as default pattern" and "MUST use t.Run("Should...") pattern for ALL test cases".
-
-## Triage
-
-- Decision: `VALID`
-- Notes: The live-source and registry recovery tests duplicate setup and assertions while varying only the recovery source. Fix by consolidating them into one table-driven test with `Should ...` subtests.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_015.md b/.compozy/tasks/qa-rounds/reviews-001/issue_015.md
deleted file mode 100644
index ea36d6b63..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_015.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-status: resolved
-file: internal/observe/observer_test.go
-line: 98
-severity: minor
-author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:bddf8f7e5a68
-review_hash: bddf8f7e5a68
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
----
-
-# Issue 015: Isolate the live-source path in this test.
-## Review Comment
-
-Registering the session in `h.registry` makes this case pass even if the live-source lookup breaks, because `recoverSessionSnapshot` can still succeed through the registry fallback. Leave the registry unseeded here, or force the fallback path to fail, so this test actually proves the live-source branch.
-
-As per coding guidelines, `**/*_test.go`: "Ensure tests can fail when business logic changes."
-
-## Triage
-
-- Decision: `VALID`
-- Notes: The live-source recovery test seeds both the live source and the registry, so it can pass through the registry fallback even if live-source recovery is broken. Fix by leaving the registry unseeded for the live-source subtest in the consolidated recovery test.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_016.md b/.compozy/tasks/qa-rounds/reviews-001/issue_016.md
deleted file mode 100644
index fd7f7e372..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_016.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-status: resolved
-file: internal/scheduler/scheduler.go
-line: 534
-author: coderabbitai[bot]
-provider_ref: thread:PRRT_kwDOR5y4QM59r7vQ,comment:PRRC_kwDOR5y4QM67Z0NL
----
-
-# Issue 016: _⚠️ Potential issue_ | _🟠 Major_
-## Review Comment
-
-_⚠️ Potential issue_ | _🟠 Major_
-
-**Channel-bound runs can still match unscoped sessions.**
-
-`coordinationChannelMatches` returns `true` when `candidate.Channel` is empty, so a run with `CoordinationChannelID` can still be routed to sessions outside that channel.
-
-
-
-<details>
-<summary>Proposed fix</summary>
-
-```diff
- func coordinationChannelMatches(work *RunSnapshot, candidate SessionSnapshot) bool {
-     if work == nil {
-         return false
-     }
-+    runChannel := strings.TrimSpace(work.Run.CoordinationChannelID)
-     sessionChannel := strings.TrimSpace(candidate.Channel)
--    if sessionChannel == "" {
-+    if runChannel == "" {
-         return true
-     }
--    return strings.TrimSpace(work.Run.CoordinationChannelID) == sessionChannel
-+    return sessionChannel == runChannel
- }
-```
-</details>
-
-<!-- suggestion_start -->
-
-<details>
-<summary>📝 Committable suggestion</summary>
-
-> ‼️ **IMPORTANT**
-> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
-
-```suggestion
-    if !coordinationChannelMatches(work, candidate) {
-        return false
-    }
-    return capabilitiesCover(candidate.Capabilities, work.Run.RequiredCapabilities)
-}
-
-func coordinationChannelMatches(work *RunSnapshot, candidate SessionSnapshot) bool {
-    if work == nil {
-        return false
-    }
-    runChannel := strings.TrimSpace(work.Run.CoordinationChannelID)
-    sessionChannel := strings.TrimSpace(candidate.Channel)
-    if runChannel == "" {
-        return true
-    }
-    return sessionChannel == runChannel
-}
-```
-
-</details>
-
-<!-- suggestion_end -->
-
-<details>
-<summary>🤖 Prompt for AI Agents</summary>
-
-```
-Verify each finding against the current code and only fix it if needed.
-
-In `@internal/scheduler/scheduler.go` around lines 519 - 534,
-coordinationChannelMatches currently treats an empty candidate.Channel as a
-wildcard and returns true, which allows a run with a non-empty
-Run.CoordinationChannelID to match an unscoped session; update
-coordinationChannelMatches (and its use of SessionSnapshot.Channel and
-RunSnapshot.Run.CoordinationChannelID) so that an empty session channel only
-matches when the run's CoordinationChannelID is also empty (i.e., trim both
-values and return true only if both are empty or both are equal), keeping the
-existing nil guard for work.
-```
-
-</details>
-
-<!-- fingerprinting:phantom:poseidon:hawk -->
-
-<!-- This is an auto-generated comment by CodeRabbit -->
-
-## Triage
-
-- Decision: `VALID`
-- Notes: `coordinationChannelMatches` treats an empty candidate session channel as a wildcard even when the run is bound to a coordination channel. That can wake an unscoped session for channel-bound work. Fix by trimming both values and requiring equality when the run channel is non-empty; empty session channels only match unbound runs.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_017.md b/.compozy/tasks/qa-rounds/reviews-001/issue_017.md
deleted file mode 100644
index bc396d377..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_017.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-status: resolved
-file: internal/scheduler/scheduler_channel_test.go
-line: 15
-severity: minor
-author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:4b4b45f7e73c
-review_hash: 4b4b45f7e73c
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
----
-
-# Issue 017: Add an empty-channel regression case for channel-bound runs.
-## Review Comment
-
-Current tests validate matching and mismatching channels, but they don’t guard the critical edge case where a session has `Channel == ""` while the run is channel-bound.
-
-As per coding guidelines, "Focus on critical paths: workflow execution, state management, error handling" and tests should ensure behavior regressions are caught.
-
-## Triage
-
-- Decision: `VALID`
-- Notes: Existing scheduler channel tests cover matching and wrong-channel sessions but not the critical edge case where the session channel is empty and the run is channel-bound. Add a `Should ...` regression subtest for that no-match case.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_018.md b/.compozy/tasks/qa-rounds/reviews-001/issue_018.md
deleted file mode 100644
index f331e7945..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_018.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-status: resolved
-file: internal/session/query.go
-line: 279
-severity: nitpick
-author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:43a18e2d5bd1
-review_hash: 43a18e2d5bd1
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
----
-
-# Issue 018: Consider normalizing meta.Model during hydration for consistency.
-## Review Comment
-
-Optional: trim at read time too, so older/manual metadata with stray whitespace doesn’t leak into API/session snapshots.
-
-## Triage
-
-- Decision: `VALID`
-- Notes: `sessionInfoFromMeta` copies `meta.Model` directly while session creation paths trim resolved model names. Manual or older metadata with whitespace can leak inconsistent snapshots. Fix by trimming `meta.Model` during hydration. A focused assertion in `internal/session/query_test.go` is needed even though that test file is outside the batch list because it validates the hydration behavior.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_019.md b/.compozy/tasks/qa-rounds/reviews-001/issue_019.md
deleted file mode 100644
index e8df71bb6..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_019.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-status: resolved
-file: internal/store/globaldb/global_db_task_test.go
-line: 1112
-author: coderabbitai[bot]
-provider_ref: thread:PRRT_kwDOR5y4QM59r7vR,comment:PRRC_kwDOR5y4QM67Z0NM
----
-
-# Issue 019: _⚠️ Potential issue_ | _🟠 Major_
-## Review Comment
-
-_⚠️ Potential issue_ | _🟠 Major_
-
-**Wrap these new test cases in `t.Run("Should...")` subtests.**
-
-Both new cases are written as direct top-level test bodies. This repo’s test policy requires `t.Run("Should...")` for all test cases.
-
-
-
-<details>
-<summary>Suggested structure</summary>
-
-```diff
- func TestGlobalDBUpdateTaskRunAllowsQueuedSessionRelease(t *testing.T) {
-     t.Parallel()
-+    t.Run("Should allow clearing lease fields when transitioning claimed run back to queued", func(t *testing.T) {
-+        t.Parallel()
-+        // existing test body
-+    })
- }
-
- func TestGlobalDBUpdateTaskRunRejectsActiveSessionClear(t *testing.T) {
-     t.Parallel()
-+    t.Run("Should reject clearing session binding for active runs", func(t *testing.T) {
-+        t.Parallel()
-+        // existing test body
-+    })
- }
-```
-</details>
-
-As per coding guidelines, "**MUST use t.Run("Should...") pattern for ALL test cases**."
-
-
-Also applies to: 1114-1136
-
-<details>
-<summary>🤖 Prompt for AI Agents</summary>
-
-```
-Verify each finding against the current code and only fix it if needed.
-
-In `@internal/store/globaldb/global_db_task_test.go` around lines 1070 - 1112, The
-test body in TestGlobalDBUpdateTaskRunAllowsQueuedSessionRelease must be wrapped
-as a named subtest per project policy; replace the current top-level assertions
-with t.Run("Should release queued session when requeued", func(t *testing.T) {
-t.Parallel(); /* move the current body here unchanged */ }) so the existing
-setup, CreateTask/CreateTaskRun, UpdateTaskRun and assertions remain identical
-but run as a subtest; do the same for the other new test referenced around lines
-1114-1136 (wrap its body in a t.Run("Should ...", func(t *testing.T) {
-t.Parallel(); ... })) so every test case uses the t.Run("Should...") pattern.
-```
-
-</details>
-
-<!-- fingerprinting:phantom:poseidon:hawk -->
-
-<!-- This is an auto-generated comment by CodeRabbit -->
-
-## Triage
-
-- Decision: `VALID`
-- Notes: `TestGlobalDBUpdateTaskRunAllowsQueuedSessionRelease` and `TestGlobalDBUpdateTaskRunRejectsActiveSessionClear` are direct test bodies. Fix by wrapping each body in a named `Should ...` subtest while preserving the existing task/run setup and assertions.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_020.md b/.compozy/tasks/qa-rounds/reviews-001/issue_020.md
deleted file mode 100644
index a6efc1cb3..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_020.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-status: resolved
-file: internal/task/hooks.go
-line: 127
-author: coderabbitai[bot]
-provider_ref: thread:PRRT_kwDOR5y4QM59r7vT,comment:PRRC_kwDOR5y4QM67Z0NO
----
-
-# Issue 020: _⚠️ Potential issue_ | _🟠 Major_
-## Review Comment
-
-_⚠️ Potential issue_ | _🟠 Major_
-
-<details>
-<summary>🧩 Analysis chain</summary>
-
-🏁 Script executed:
-
-```shell
-#!/bin/bash
-set -euo pipefail
-rg -n --type go 'context\.Background\(\)' internal -g '!**/*_test.go'
-```
-
-Repository: compozy/agh
-
-Length of output: 11227
-
----
-
-
-
-</details>
-
-**Replace `context.Background()` with `context.TODO()` to comply with internal package guidelines.**
-
-This function violates the internal package rule against `context.Background()` outside `main` and focused tests. Since this is a fallback for a nil context in a non-main internal file, `context.TODO()` is the correct placeholder.
-
-<details>
-<summary>Proposed fix</summary>
-
-```diff
- func taskRunObservationHookContext(ctx context.Context) context.Context {
-     if ctx == nil {
--        return context.Background()
-+        return context.TODO()
-     }
-     return context.WithoutCancel(ctx)
- }
-```
-</details>
-
-<!-- suggestion_start -->
-
-<details>
-<summary>📝 Committable suggestion</summary>
-
-> ‼️ **IMPORTANT**
-> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
-
-```suggestion
-func taskRunObservationHookContext(ctx context.Context) context.Context {
-    if ctx == nil {
-        return context.TODO()
-    }
-    return context.WithoutCancel(ctx)
-}
-```
-
-</details>
-
-<!-- suggestion_end -->
-
-<details>
-<summary>🤖 Prompt for AI Agents</summary>
-
-```
-Verify each finding against the current code and only fix it if needed.
-
-In `@internal/task/hooks.go` around lines 123 - 127, Replace the use of
-context.Background() with context.TODO() in the taskRunObservationHookContext
-function: when ctx is nil, return context.TODO() instead of context.Background()
-so the function uses the internal package's preferred placeholder; keep the rest
-of the function (including the call to context.WithoutCancel(ctx)) unchanged.
-```
-
-</details>
-
-<!-- fingerprinting:phantom:poseidon:hawk -->
-
-<!-- This is an auto-generated comment by CodeRabbit -->
-
-## Triage
-
-- Decision: `VALID`
-- Notes: `taskRunObservationHookContext` uses `context.Background()` in an internal production package as a nil-context fallback. Fix by returning `context.TODO()` for the nil fallback and keeping `context.WithoutCancel(ctx)` for valid caller contexts.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_021.md b/.compozy/tasks/qa-rounds/reviews-001/issue_021.md
deleted file mode 100644
index 68195a71d..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_021.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-status: resolved
-file: internal/task/hooks_test.go
-line: 181
-author: coderabbitai[bot]
-provider_ref: thread:PRRT_kwDOR5y4QM59r7vS,comment:PRRC_kwDOR5y4QM67Z0NN
----
-
-# Issue 021: _⚠️ Potential issue_ | _🟠 Major_
-## Review Comment
-
-_⚠️ Potential issue_ | _🟠 Major_
-
-**Use `t.Run("Should...")` subtests for the newly added hook-context cases.**
-
-The coverage is valuable, but these two cases should be structured as `t.Run("Should...")` subtests to match the repository’s mandatory test pattern.
-
-
-
-As per coding guidelines, "**MUST use t.Run("Should...") pattern for ALL test cases**."
-
-
-Also applies to: 183-224
-
-<details>
-<summary>🤖 Prompt for AI Agents</summary>
-
-```
-Verify each finding against the current code and only fix it if needed.
-
-In `@internal/task/hooks_test.go` around lines 136 - 181, The test
-TestTaskRunObservationHooksDetachFromCallerCancellation must be converted to use
-t.Run subtests for the two hook-context assertions: wrap the
-enqueued-cancel/assertion logic into a t.Run("Should keep enqueued hook context
-active") subtest and the post-claim-cancel/assertion into a t.Run("Should keep
-post-claim hook context active") subtest; keep the setup (store, manager with
-WithTaskRunHooks, CreateTask, EnqueueRun/ClaimRun and their cancels) but move
-the specific cancel+assertContextStillActive(enqueuedCtx, t, "enqueued") and
-cancel+assertContextStillActive(postClaimCtx, t, "post-claim") calls into their
-respective t.Run blocks so the file follows the required t.Run("Should...")
-pattern while still referencing enqueuedCtx, postClaimCtx,
-manager.EnqueueRun/ClaimRun and assertContextStillActive.
-```
-
-</details>
-
-<!-- fingerprinting:phantom:poseidon:hawk -->
-
-<!-- This is an auto-generated comment by CodeRabbit -->
-
-## Triage
-
-- Decision: `valid`
-- Notes: `TestTaskRunObservationHooksDetachFromCallerCancellation` currently performs the enqueued and post-claim hook context assertions inline in the top-level test body. The repository's Go test convention requires explicit `t.Run("Should ...")` subtests for each case. The fix is to keep the shared manager/task setup intact and move each cancellation assertion into a named subtest.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_022.md b/.compozy/tasks/qa-rounds/reviews-001/issue_022.md
deleted file mode 100644
index 0a61c7e49..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_022.md
+++ /dev/null
@@ -1,95 +0,0 @@
----
-status: resolved
-file: internal/task/manager_integration_test.go
-line: 1153
-author: coderabbitai[bot]
-provider_ref: thread:PRRT_kwDOR5y4QM59r7vU,comment:PRRC_kwDOR5y4QM67Z0NQ
----
-
-# Issue 022: _⚠️ Potential issue_ | _🟠 Major_
-## Review Comment
-
-_⚠️ Potential issue_ | _🟠 Major_
-
-**Wrap this case in a `t.Run("Should ...")` subtest.**
-
-The new test is top-level only; this repo requires the explicit `Should...` subtest pattern.
-
-<details>
-<summary>Proposed fix</summary>
-
-```diff
- func TestTaskManagerRecoverRunOnBootRequeuesBoundRunWithGlobalDB(t *testing.T) {
-  t.Parallel()
-+ t.Run("Should requeue a bound run and clear session binding on boot recovery", func(t *testing.T) {
-+   t.Parallel()
-
--	ctx := testutil.Context(t)
--	db := openTaskManagerGlobalDB(t)
--	manager := newTaskManagerIntegration(t, db)
--	operator, err := taskpkg.DeriveHumanActorContext("operator", taskpkg.OriginKindCLI, "agh task run")
--	if err != nil {
--		t.Fatalf("DeriveHumanActorContext() error = %v", err)
--	}
--	agent, err := taskpkg.DeriveAgentSessionActorContext("sess-stale-boot")
--	if err != nil {
--		t.Fatalf("DeriveAgentSessionActorContext() error = %v", err)
--	}
--	daemon, err := taskpkg.DeriveDaemonActorContext("boot-recovery", "daemon.boot")
--	if err != nil {
--		t.Fatalf("DeriveDaemonActorContext() error = %v", err)
--	}
-+		ctx := testutil.Context(t)
-+		db := openTaskManagerGlobalDB(t)
-+		manager := newTaskManagerIntegration(t, db)
-+		operator, err := taskpkg.DeriveHumanActorContext("operator", taskpkg.OriginKindCLI, "agh task run")
-+		if err != nil {
-+			t.Fatalf("DeriveHumanActorContext() error = %v", err)
-+		}
-+		agent, err := taskpkg.DeriveAgentSessionActorContext("sess-stale-boot")
-+		if err != nil {
-+			t.Fatalf("DeriveAgentSessionActorContext() error = %v", err)
-+		}
-+		daemon, err := taskpkg.DeriveDaemonActorContext("boot-recovery", "daemon.boot")
-+		if err != nil {
-+			t.Fatalf("DeriveDaemonActorContext() error = %v", err)
-+		}
-
--	// ...existing assertions...
-+		// ...existing assertions...
-+	})
- }
-```
-</details>
-
-
-
-As per coding guidelines, `**/*_test.go`: "MUST use t.Run('Should...') pattern for ALL test cases".
-
-<details>
-<summary>🤖 Prompt for AI Agents</summary>
-
-```
-Verify each finding against the current code and only fix it if needed.
-
-In `@internal/task/manager_integration_test.go` around lines 1091 - 1153, The test
-function TestTaskManagerRecoverRunOnBootRequeuesBoundRunWithGlobalDB must be
-wrapped in a t.Run("Should ...") subtest: replace the top-level t.Parallel() and
-direct test body with a single t.Run("Should requeue bound run on boot and
-release session binding", func(t *testing.T) { t.Parallel(); /* existing test
-body */ }), keeping all existing setup and assertions intact (references:
-TestTaskManagerRecoverRunOnBootRequeuesBoundRunWithGlobalDB, manager.CreateTask,
-manager.EnqueueRun, manager.ClaimNextRun, manager.RecoverRunOnBoot,
-db.GetTaskRun) so the repo-wide "Should..." subtest pattern is satisfied.
-```
-
-</details>
-
-<!-- fingerprinting:phantom:poseidon:hawk -->
-
-<!-- This is an auto-generated comment by CodeRabbit -->
-
-## Triage
-
-- Decision: `valid`
-- Notes: `TestTaskManagerRecoverRunOnBootRequeuesBoundRunWithGlobalDB` has a top-level body with no `Should ...` subtest. The required test shape is to wrap the existing setup and assertions in one named subtest while preserving the integration flow and parallelism.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_023.md b/.compozy/tasks/qa-rounds/reviews-001/issue_023.md
deleted file mode 100644
index f101f9e49..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_023.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-status: resolved
-file: internal/workspace/resolver_test.go
-line: 919
-severity: nitpick
-author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:0865a291b1dd
-review_hash: 0865a291b1dd
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
----
-
-# Issue 023: Consider hardening the deep-copy assertion by mutating cloned autonomy fields.
-## Review Comment
-
-Current checks confirm values are copied, but not clone independence for this branch. Adding one mutation/assertion pair would future-proof this test.
-
-## Triage
-
-- Decision: `valid`
-- Notes: `TestCloneConfigProducesDeepCopy` checks copied autonomy values but does not mutate the cloned autonomy branch and prove the original branch remains independent. The fix is to mutate cloned coordinator fields and assert the original coordinator configuration is unchanged.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_024.md b/.compozy/tasks/qa-rounds/reviews-001/issue_024.md
deleted file mode 100644
index e2cba8d5d..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_024.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-status: resolved
-file: packages/ui/src/components/kind-chip.test.tsx
-line: 20
-severity: nitpick
-author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:7d1cc452f926
-review_hash: 7d1cc452f926
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
----
-
-# Issue 024: Potential brittleness in style comparison.
-## Review Comment
-
-`style.background` may return normalized values (e.g., `rgb()` format) depending on the test environment, while `KIND_DOT_COLORS.receipt` is `var(--color-success)`. This should work in jsdom since inline styles aren't computed, but be aware if tests become flaky after environment changes.
-
-## Triage
-
-- Decision: `valid`
-- Notes: The current assertion compares `dot.style.background` directly to the token string. That happens to work in the current jsdom environment but couples the test to one CSSOM serialization path. The fix is to assert the inline style through the jest-dom style matcher, which is the existing test stack's style assertion API.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_025.md b/.compozy/tasks/qa-rounds/reviews-001/issue_025.md
deleted file mode 100644
index cfc8d97c4..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_025.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-status: resolved
-file: packages/ui/src/components/mono-badge.tsx
-line: 20
-severity: nitpick
-author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:cf60b7b49f37
-review_hash: cf60b7b49f37
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
----
-
-# Issue 025: Component docs are now slightly out of sync with supported tones.
-## Review Comment
-
-`"solid-accent"` is a non-tinted variant, while the component docs still describe tinted usage only. Consider updating the comment to prevent confusion for consumers.
-
-## Triage
-
-- Decision: `valid`
-- Notes: `MonoBadge` now supports a `solid-accent` tone, but its component comment still describes only tinted badges. The fix is a small documentation update in the component comment so consumers understand that `solid-accent` is intentionally non-tinted.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_026.md b/.compozy/tasks/qa-rounds/reviews-001/issue_026.md
deleted file mode 100644
index 3ed071ae7..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_026.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-status: resolved
-file: web/src/components/app-sidebar.tsx
-line: 138
-severity: nitpick
-author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:d83202abe6b3
-review_hash: d83202abe6b3
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
----
-
-# Issue 026: Consider extracting shared active-nav styles to avoid drift.
-## Review Comment
-
-`NavItem` and `FooterSlot` now duplicate the same active container and indicator classes. A small local constant/helper would reduce maintenance risk.
-
-Also applies to: 484-494
-
-## Triage
-
-- Decision: `valid`
-- Notes: `NavItem` and the settings footer link duplicate the same active row and active indicator class strings. A local constant for the shared row, active row, and indicator classes removes the drift risk without changing runtime behavior.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_027.md b/.compozy/tasks/qa-rounds/reviews-001/issue_027.md
deleted file mode 100644
index 7d8b309ee..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_027.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-status: resolved
-file: web/src/routes/_app/stories/-network.stories.tsx
-line: 12
-author: coderabbitai[bot]
-provider_ref: thread:PRRT_kwDOR5y4QM59r7vW,comment:PRRC_kwDOR5y4QM67Z0NS
----
-
-# Issue 027: _⚠️ Potential issue_ | _🟠 Major_
-## Review Comment
-
-_⚠️ Potential issue_ | _🟠 Major_
-
-**Use the network public barrel instead of a deep system import (Line 12).**
-
-Please route this through `@/systems/network` to preserve system boundaries from routes.
-
-<details>
-<summary>Suggested change</summary>
-
-```diff
--import { networkStatusFixture } from "@/systems/network/mocks";
-+import { networkStatusFixture } from "@/systems/network";
-```
-</details>
-
-
-As per coding guidelines, "Cross-system imports: Only through the public barrel (`@/systems/<domain>`). Never reach into another system's internals".
-
-<details>
-<summary>🤖 Prompt for AI Agents</summary>
-
-```
-Verify each finding against the current code and only fix it if needed.
-
-In `@web/src/routes/_app/stories/-network.stories.tsx` at line 12, Importing
-networkStatusFixture directly from the internals violates cross-system import
-rules; update the import in _network.stories.tsx to re-export
-networkStatusFixture from the public barrel by changing the source to the
-systems network public barrel (use "@/systems/network") so the story consumes
-networkStatusFixture via the public API rather than the deep path.
-```
-
-</details>
-
-<!-- fingerprinting:phantom:poseidon:hawk -->
-
-<!-- This is an auto-generated comment by CodeRabbit -->
-
-## Triage
-
-- Decision: `valid`
-- Notes: The route story imports `networkStatusFixture` from `@/systems/network/mocks`, which crosses into system internals from a route-level file. The fix is to stop importing the mock fixture from the route story and use the public `NetworkStatus` type from `@/systems/network` for a local story override object.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_028.md b/.compozy/tasks/qa-rounds/reviews-001/issue_028.md
deleted file mode 100644
index 3664d6d0a..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_028.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-status: resolved
-file: web/src/storybook/web-storybook-stories-and-fixtures.test.tsx
-line: 23
-severity: minor
-author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:dc902e7f90ef
-review_hash: dc902e7f90ef
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
----
-
-# Issue 028: Route system imports through a public barrel instead of deep internals.
-## Review Comment
-
-Line 23 imports `@/systems/network/components/stories/network-workspace-shell.stories` directly from a system-internal path. Please expose a public test-facing entrypoint (or import via an allowed public barrel) so this test does not depend on network internals.
-
-As per coding guidelines, "Cross-system imports MUST only go through the public barrel (`@/systems/<domain>`). Never reach into another system's internals".
-
-## Triage
-
-- Decision: `valid`
-- Notes: The Storybook regression test imports the network workspace shell story through `@/systems/network/components/stories/...`, which bypasses the system boundary. There is no existing public test-facing entrypoint for this story, so the minimal required out-of-scope code addition is `web/src/systems/network/storybook.ts`, a network-owned Storybook barrel that the regression test can import via `@/systems/network/storybook`.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_029.md b/.compozy/tasks/qa-rounds/reviews-001/issue_029.md
deleted file mode 100644
index 1c62cefae..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_029.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-status: resolved
-file: web/src/systems/network/components/network-workspace-shell.tsx
-line: 79
-severity: nitpick
-author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:f4ce083715a2
-review_hash: f4ce083715a2
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
----
-
-# Issue 029: Avatar palette uses hardcoded hex values.
-## Review Comment
-
-The `AVATAR_PALETTE` contains ad-hoc color tokens. Per coding guidelines, colors should be pulled from `DESIGN.md` rather than invented. Consider defining these as CSS variables in `tokens.css` or confirming they align with the design system's avatar color specification.
-
-As per coding guidelines: "Pull every color, font, radius, spacing step, and motion value from `DESIGN.md` — never invent tokens"
-
----
-
-## Triage
-
-- Decision: `valid`
-- Notes: `AVATAR_PALETTE` uses literal hex colors in the component. AGH's design system already exposes the needed semantic tint and text variables, so the fix is to express avatar background/foreground pairs with existing CSS token variables rather than invented literals.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_030.md b/.compozy/tasks/qa-rounds/reviews-001/issue_030.md
deleted file mode 100644
index 84dd68f8d..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_030.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-status: resolved
-file: web/src/systems/network/components/network-workspace-shell.tsx
-line: 432
-severity: nitpick
-author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:3dc982df56e7
-review_hash: 3dc982df56e7
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
----
-
-# Issue 030: Inline color value for hover state.
-## Review Comment
-
-`hover:bg-white/[0.014]` uses an ad-hoc opacity value. Consider using a CSS variable-based hover surface token for consistency with the flat depth model.
-
-As per coding guidelines: "Tokens live in `packages/ui/src/tokens.css`; never override with ad-hoc hex values in components"
-
-## Triage
-
-- Decision: `valid`
-- Notes: The message-row hover state uses `hover:bg-white/[0.014]`, an ad-hoc opacity value outside the token system. The fix is to use the existing hover surface token via `var(--color-hover)`.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_031.md b/.compozy/tasks/qa-rounds/reviews-001/issue_031.md
deleted file mode 100644
index 00a9a00cc..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_031.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-status: resolved
-file: web/src/systems/network/components/stories/network-workspace-shell.stories.tsx
-line: 56
-severity: nitpick
-author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:9ca4d6bee709
-review_hash: 9ca4d6bee709
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
----
-
-# Issue 031: Unconventional use of globalThis.Error.
-## Review Comment
-
-Using `globalThis.Error` instead of just `Error` is unusual. While it works, `Error` is globally available and more idiomatic. This may have been intentional to avoid linting rules, but worth noting for consistency.
-
-## Triage
-
-- Decision: `valid`
-- Notes: `globalThis.Error` is unnecessary in the Storybook fixture helper because `Error` is already a global value in this TypeScript runtime. The fix is to use idiomatic `Error` directly.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_032.md b/.compozy/tasks/qa-rounds/reviews-001/issue_032.md
deleted file mode 100644
index fffe1b12c..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_032.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-status: resolved
-file: web/src/systems/network/mocks/handlers.ts
-line: 127
-severity: minor
-author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:5c3c5d9e2376
-review_hash: 5c3c5d9e2376
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
----
-
-# Issue 032: Guard required fields with runtime type checks before .trim().
-## Review Comment
-
-At **Line 127**, non-string payload values can throw (e.g., `channel: 123`) before returning the intended 400 contract response.
-
-## Triage
-
-- Decision: `valid`
-- Notes: The `/api/network/send` MSW handler calls `.trim()` through optional chaining on fields typed as optional strings, but malformed JSON can still provide non-string values and throw before the intended 400 response. The fix is to read required string fields through runtime type checks before trimming.
diff --git a/.compozy/tasks/qa-rounds/reviews-001/issue_033.md b/.compozy/tasks/qa-rounds/reviews-001/issue_033.md
deleted file mode 100644
index fd5fbda24..000000000
--- a/.compozy/tasks/qa-rounds/reviews-001/issue_033.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-status: resolved
-file: web/src/systems/network/mocks/network-mocks.test.ts
-line: 48
-severity: nitpick
-author: coderabbitai[bot]
-provider_ref: review:4177411700,nitpick_hash:e0bed60b6232
-review_hash: e0bed60b6232
-source_review_id: "4177411700"
-source_review_submitted_at: "2026-04-26T20:24:27Z"
----
-
-# Issue 033: Consider adding a failure-path contract test for required fields.
-## Review Comment
-
-You already cover the happy path; adding one 400-case assertion would lock down the new validation behavior.
-
-## Triage
-
-- Decision: `valid`
-- Notes: The send mock currently has only happy-path coverage. After hardening the handler's required-field parsing, add a 400-path contract test that sends malformed required fields and asserts the mock returns the intended validation response.

From 01c242e8c924c895859d10f92f87d1daaf1db8d2 Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Sun, 26 Apr 2026 23:47:09 -0300
Subject: [PATCH 4/4] fix: resolve qa-rounds round 2 reviews

---
 .compozy/tasks/qa-rounds/reviews-002/_meta.md |  11 ++
 .../tasks/qa-rounds/reviews-002/issue_001.md  |  69 +++++++++
 .../tasks/qa-rounds/reviews-002/issue_002.md  | 144 ++++++++++++++++++
 .../tasks/qa-rounds/reviews-002/issue_003.md  |  32 ++++
 .../tasks/qa-rounds/reviews-002/issue_004.md  |  55 +++++++
 .../tasks/qa-rounds/reviews-002/issue_005.md  |  58 +++++++
 .../tasks/qa-rounds/reviews-002/issue_006.md  |  84 ++++++++++
 .../tasks/qa-rounds/reviews-002/issue_007.md  |  56 +++++++
 packages/ui/src/tokens.css                    |   8 +
 .../_app/-agents.$name.sessions.$id.test.tsx  |  18 ++-
 web/src/routes/_app/-agents.$name.test.tsx    |   4 +-
 .../routes/_app/agents.$name.sessions.$id.tsx |   2 +-
 ...eb-storybook-stories-and-fixtures.test.tsx |   7 +-
 .../components/agent-sessions-list.test.tsx   |  32 +++-
 .../agent/components/agent-sessions-list.tsx  |  14 +-
 .../components/agent-stats-grid.test.tsx      |   4 +-
 web/src/systems/agent/storybook.ts            |   5 +
 web/src/systems/agent/testing.ts              |   1 +
 web/src/systems/session/testing.ts            |   1 +
 19 files changed, 587 insertions(+), 18 deletions(-)
 create mode 100644 .compozy/tasks/qa-rounds/reviews-002/_meta.md
 create mode 100644 .compozy/tasks/qa-rounds/reviews-002/issue_001.md
 create mode 100644 .compozy/tasks/qa-rounds/reviews-002/issue_002.md
 create mode 100644 .compozy/tasks/qa-rounds/reviews-002/issue_003.md
 create mode 100644 .compozy/tasks/qa-rounds/reviews-002/issue_004.md
 create mode 100644 .compozy/tasks/qa-rounds/reviews-002/issue_005.md
 create mode 100644 .compozy/tasks/qa-rounds/reviews-002/issue_006.md
 create mode 100644 .compozy/tasks/qa-rounds/reviews-002/issue_007.md
 create mode 100644 web/src/systems/agent/storybook.ts
 create mode 100644 web/src/systems/agent/testing.ts
 create mode 100644 web/src/systems/session/testing.ts

diff --git a/.compozy/tasks/qa-rounds/reviews-002/_meta.md b/.compozy/tasks/qa-rounds/reviews-002/_meta.md
new file mode 100644
index 000000000..61070e4bb
--- /dev/null
+++ b/.compozy/tasks/qa-rounds/reviews-002/_meta.md
@@ -0,0 +1,11 @@
+---
+provider: coderabbit
+pr: "80"
+round: 2
+created_at: 2026-04-27T02:33:00.020719Z
+---
+
+## Summary
+- Total: 7
+- Resolved: 0
+- Unresolved: 7
diff --git a/.compozy/tasks/qa-rounds/reviews-002/issue_001.md b/.compozy/tasks/qa-rounds/reviews-002/issue_001.md
new file mode 100644
index 000000000..d863c8855
--- /dev/null
+++ b/.compozy/tasks/qa-rounds/reviews-002/issue_001.md
@@ -0,0 +1,69 @@
+---
+status: resolved
+file: web/src/routes/_app/-agents.$name.test.tsx
+line: 7
+author: coderabbitai[bot]
+provider_ref: thread:PRRT_kwDOR5y4QM59tCVc,comment:PRRC_kwDOR5y4QM67bPPJ
+---
+
+# Issue 001: _⚠️ Potential issue_ | _🟠 Major_
+## Review Comment
+
+_⚠️ Potential issue_ | _🟠 Major_
+
+**Use public system barrels instead of internal `mocks` paths**
+
+These imports cross system boundaries through internal paths. Please import test fixtures via each system’s public barrel (or re-export them there first).
+
+<details>
+<summary>Suggested change</summary>
+
+```diff
+-import { primaryAgentFixture } from "@/systems/agent/mocks";
+-import { primarySessionFixture } from "@/systems/session/mocks";
++import { primaryAgentFixture } from "@/systems/agent";
++import { primarySessionFixture } from "@/systems/session";
+```
+</details>
+
+
+As per coding guidelines, "Cross-system imports MUST only go through the public barrel (`@/systems/<domain>`). Never reach into another system's internals".
+
+<details>
+<summary>🤖 Prompt for AI Agents</summary>
+
+```
+Verify each finding against the current code and only fix it if needed.
+
+In `@web/src/routes/_app/-agents`.$name.test.tsx around lines 6 - 7, Replace the
+direct imports from internal mock modules with the public system barrels: stop
+importing primaryAgentFixture from "@/systems/agent/mocks" and
+primarySessionFixture from "@/systems/session/mocks" and instead import those
+fixtures from their public barrels (e.g., "@/systems/agent" and
+"@/systems/session" or from the barrel export you add). Update the import
+statements that reference primaryAgentFixture and primarySessionFixture so they
+come from the respective public barrel exports; if the fixtures aren’t yet
+re-exported from the public barrel, add re-exports for primaryAgentFixture and
+primarySessionFixture in the systems' index barrel files and then import them
+from those barrels.
+```
+
+</details>
+
+<!-- fingerprinting:phantom:poseidon:hawk -->
+
+<!-- This is an auto-generated comment by CodeRabbit -->
+
+## Triage
+
+- Decision: `valid`
+- Notes:
+  - The route test imports `primaryAgentFixture` from `@/systems/agent/mocks` and `primarySessionFixture` from `@/systems/session/mocks`, which bypasses each system public barrel.
+  - The first implementation re-exported fixtures from the main system barrels, but production build inspection showed fixture data leaking into `web/dist/assets/session-*.js`.
+  - The final fix uses dedicated public test barrels, `@/systems/agent/testing` and `@/systems/session/testing`, so cross-system tests no longer reach into `mocks` internals while production barrels stay fixture-free.
+
+## Resolution
+
+- Updated `web/src/routes/_app/-agents.$name.test.tsx` to import fixtures from the public testing barrels instead of internal `mocks` paths.
+- Added `web/src/systems/agent/testing.ts` and `web/src/systems/session/testing.ts` as explicit public test fixture surfaces.
+- Verified the production bundle no longer contains fixture markers (`Storybook rollout`, `sess-storybook`, `tool_bash`) after `make verify`.
diff --git a/.compozy/tasks/qa-rounds/reviews-002/issue_002.md b/.compozy/tasks/qa-rounds/reviews-002/issue_002.md
new file mode 100644
index 000000000..5f57df4c8
--- /dev/null
+++ b/.compozy/tasks/qa-rounds/reviews-002/issue_002.md
@@ -0,0 +1,144 @@
+---
+status: resolved
+file: web/src/routes/_app/agents.$name.sessions.$id.tsx
+line: 103
+author: coderabbitai[bot]
+provider_ref: thread:PRRT_kwDOR5y4QM59tCVf,comment:PRRC_kwDOR5y4QM67bPPN
+---
+
+# Issue 002: _⚠️ Potential issue_ | _🟡 Minor_
+## Review Comment
+
+_⚠️ Potential issue_ | _🟡 Minor_
+
+<details>
+<summary>🧩 Analysis chain</summary>
+
+🌐 Web query:
+
+`For `@tanstack/react-router` v1, is `navigate({ replace: true })` the recommended approach for redirects from invalid/deleted resource pages to avoid back-button loops?`
+
+💡 Result:
+
+No, navigate({ replace: true }) is not the recommended approach for redirects from invalid/deleted resource pages in `@tanstack/react-router` v1. The recommended method is to throw redirect({ to: '/somewhere' }) from the route's loader or beforeLoad when the resource is invalid or deleted (e.g., after checking the database). This handles the redirect at the router level before the component mounts, replacing the history entry and preventing back-button loops to the invalid page. For path-mismatched 404s, configure notFoundComponent on routes or the root route, and from there use useNavigate({ to: '...', replace: true }) if programmatic redirect is needed instead of static content. navigate({ replace: true }) with replace?: boolean uses history.replaceState instead of pushState, avoiding extra history entries, but throwing redirect is preferred for server-like redirects in loaders.
+
+Citations:
+
+- 1: https://tanstack.com/router/latest/docs/guide/navigation
+- 2: https://tanstack.com/router/v1/docs/api/router/redirectFunction
+- 3: https://tanstack.com/router/v1/docs/framework/react/api/router/redirectFunction
+- 4: https://tanstack.com/router/v1/docs/api/router/NavigateOptionsType
+- 5: https://tanstack.com/router/v1/docs/framework/react/guide/not-found-errors
+- 6: https://tanstack.com/router/v1/docs/api/router/RedirectType
+
+---
+
+🏁 Script executed:
+
+```shell
+cat -n web/src/routes/_app/agents.$name.sessions.$id.tsx
+```
+
+Repository: compozy/agh
+
+Length of output: 129
+
+---
+
+🏁 Script executed:
+
+```shell
+find web/src/routes -name "*session*" -type f
+```
+
+Repository: compozy/agh
+
+Length of output: 264
+
+---
+
+🏁 Script executed:
+
+```shell
+cat -n "web/src/routes/_app/agents.\$name.sessions.\$id.tsx"
+```
+
+Repository: compozy/agh
+
+Length of output: 5317
+
+---
+
+
+
+</details>
+
+**Use history replacement for the not-found redirect.**
+
+On Line 102, add `replace: true` to prevent users from hitting Back into the broken session URL and getting bounced again. This uses `history.replaceState` instead of `pushState`, avoiding extra history entries.
+
+<details>
+<summary>Suggested fix</summary>
+
+```diff
+-      void navigate({ to: "/agents/$name", params: { name } });
++      void navigate({ to: "/agents/$name", params: { name }, replace: true });
+```
+</details>
+
+<!-- suggestion_start -->
+
+<details>
+<summary>📝 Committable suggestion</summary>
+
+> ‼️ **IMPORTANT**
+> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
+
+```suggestion
+  useEffect(() => {
+    if (error?.message?.includes("not found")) {
+      toast.error("Session not found");
+      void navigate({ to: "/agents/$name", params: { name }, replace: true });
+    }
+```
+
+</details>
+
+<!-- suggestion_end -->
+
+<details>
+<summary>🤖 Prompt for AI Agents</summary>
+
+```
+Verify each finding against the current code and only fix it if needed.
+
+In `@web/src/routes/_app/agents`.$name.sessions.$id.tsx around lines 99 - 103, The
+redirect for a "Session not found" error inside the useEffect should replace the
+history entry instead of pushing a new one; update the navigate call in the
+useEffect (the branch that calls toast.error("Session not found")) to include
+replace: true (i.e., navigate({ to: "/agents/$name", params: { name }, replace:
+true })) so users can't hit Back into the broken session URL—locate the
+useEffect handling error?.message.includes("not found") and modify that navigate
+invocation.
+```
+
+</details>
+
+<!-- fingerprinting:phantom:poseidon:hawk -->
+
+<!-- This is an auto-generated comment by CodeRabbit -->
+
+## Triage
+
+- Decision: `valid`
+- Notes:
+  - The not-found branch currently calls `navigate({ to: "/agents/$name", params: { name } })`, which pushes a new history entry from the broken session URL.
+  - In this route the missing-session condition is surfaced by the client query after mount, so the scoped fix is to preserve the current effect flow and add `replace: true`.
+  - A loader redirect would require a broader data-loading refactor outside this batch; the requested replacement fixes the back-button loop without changing the route architecture.
+  - Regression coverage requires a minimal out-of-scope edit to `web/src/routes/_app/-agents.$name.sessions.$id.test.tsx`, the existing test file for this route.
+
+## Resolution
+
+- Added `replace: true` to the not-found redirect in `web/src/routes/_app/agents.$name.sessions.$id.tsx`.
+- Added regression coverage in `web/src/routes/_app/-agents.$name.sessions.$id.test.tsx` proving the route replaces history when redirecting from a missing session.
+- Verified with targeted Vitest and full `make verify`.
diff --git a/.compozy/tasks/qa-rounds/reviews-002/issue_003.md b/.compozy/tasks/qa-rounds/reviews-002/issue_003.md
new file mode 100644
index 000000000..735f8b4e1
--- /dev/null
+++ b/.compozy/tasks/qa-rounds/reviews-002/issue_003.md
@@ -0,0 +1,32 @@
+---
+status: resolved
+file: web/src/storybook/web-storybook-stories-and-fixtures.test.tsx
+line: 30
+severity: nitpick
+author: coderabbitai[bot]
+provider_ref: review:4177749264,nitpick_hash:65c95664f0ad
+review_hash: 65c95664f0ad
+source_review_id: "4177749264"
+source_review_submitted_at: "2026-04-27T01:09:45Z"
+---
+
+# Issue 003: Avoid new deep cross-system imports for agent stories.
+## Review Comment
+
+Lines 30-32 reach into `@/systems/agent/components/stories/...` internals from outside the agent system. Prefer importing through a public barrel (or an explicit `@/systems/agent/storybook` barrel) to keep boundaries stable.
+
+As per coding guidelines, "Cross-system imports MUST only go through the public barrel (`@/systems/<domain>`). Never reach into another system's internals".
+
+## Triage
+
+- Decision: `valid`
+- Notes:
+  - The storybook regression test imports three agent story modules from `@/systems/agent/components/stories/...`, crossing into the agent system internals from the shared storybook test surface.
+  - There is already a precedent for system storybook barrels in `web/src/systems/network/storybook.ts`.
+  - The fix requires a minimal new support file, `web/src/systems/agent/storybook.ts`, that explicitly re-exports the agent story modules as named namespaces, then updates the test to import those modules through `@/systems/agent/storybook`.
+
+## Resolution
+
+- Added `web/src/systems/agent/storybook.ts` as an explicit public Storybook barrel for agent stories.
+- Updated `web/src/storybook/web-storybook-stories-and-fixtures.test.tsx` to load agent stories through `@/systems/agent/storybook`.
+- Verified with targeted Vitest and full `make verify`.
diff --git a/.compozy/tasks/qa-rounds/reviews-002/issue_004.md b/.compozy/tasks/qa-rounds/reviews-002/issue_004.md
new file mode 100644
index 000000000..1c19ae4c6
--- /dev/null
+++ b/.compozy/tasks/qa-rounds/reviews-002/issue_004.md
@@ -0,0 +1,55 @@
+---
+status: resolved
+file: web/src/systems/agent/components/agent-sessions-list.test.tsx
+line: 6
+author: coderabbitai[bot]
+provider_ref: thread:PRRT_kwDOR5y4QM59tCVk,comment:PRRC_kwDOR5y4QM67bPPS
+---
+
+# Issue 004: _⚠️ Potential issue_ | _🟠 Major_
+## Review Comment
+
+_⚠️ Potential issue_ | _🟠 Major_
+
+**Avoid cross-system internal imports in tests as well.**
+
+Line 5 and Line 6 pull from `@/systems/session/mocks` and `@/systems/session/types`. Please import through `@/systems/session` (and expose required members in that barrel if needed).  
+
+
+As per coding guidelines, "Cross-system imports MUST only go through the public barrel (`@/systems/<domain>`). Never reach into another system's internals".
+
+<details>
+<summary>🤖 Prompt for AI Agents</summary>
+
+```
+Verify each finding against the current code and only fix it if needed.
+
+In `@web/src/systems/agent/components/agent-sessions-list.test.tsx` around lines 5
+- 6, Tests are importing internal symbols directly (primarySessionFixture and
+SessionPayload) from "@/systems/session/mocks" and "@/systems/session/types";
+update the test in agent-sessions-list.test.tsx to import these symbols from the
+public barrel "@/systems/session" instead, and if those exports are not yet
+re-exported from the barrel, add primarySessionFixture and SessionPayload to the
+session module's public exports so the test can consume them via
+"@/systems/session".
+```
+
+</details>
+
+<!-- fingerprinting:phantom:poseidon:hawk -->
+
+<!-- This is an auto-generated comment by CodeRabbit -->
+
+## Triage
+
+- Decision: `valid`
+- Notes:
+  - `agent-sessions-list.test.tsx` imports `primarySessionFixture` and `SessionPayload` from session internals instead of the session public barrel.
+  - `SessionPayload` is already exported by `@/systems/session`; fixture values are test-only and should not be exported from the production barrel because that leaks fixture data into the app bundle.
+  - The fix imports `SessionPayload` from `@/systems/session` and `primarySessionFixture` from the dedicated public test barrel `@/systems/session/testing`.
+
+## Resolution
+
+- Updated `web/src/systems/agent/components/agent-sessions-list.test.tsx` to import `SessionPayload` from `@/systems/session` and `primarySessionFixture` from `@/systems/session/testing`.
+- Added the public session testing barrel without changing the production session barrel.
+- Verified with targeted Vitest and full `make verify`.
diff --git a/.compozy/tasks/qa-rounds/reviews-002/issue_005.md b/.compozy/tasks/qa-rounds/reviews-002/issue_005.md
new file mode 100644
index 000000000..e3e7c4f2b
--- /dev/null
+++ b/.compozy/tasks/qa-rounds/reviews-002/issue_005.md
@@ -0,0 +1,58 @@
+---
+status: resolved
+file: web/src/systems/agent/components/agent-sessions-list.tsx
+line: 124
+author: coderabbitai[bot]
+provider_ref: thread:PRRT_kwDOR5y4QM59tCVn,comment:PRRC_kwDOR5y4QM67bPPW
+---
+
+# Issue 005: _⚠️ Potential issue_ | _🟠 Major_
+## Review Comment
+
+_⚠️ Potential issue_ | _🟠 Major_
+
+**Replace ad-hoc size/typography utilities with design-tokenized values.**
+
+Line 68, Line 101, Line 107, Line 117, Line 120, and Line 123 use arbitrary values (`w-[42%]`, `text-[13px]`, `text-[10px]`, `text-[12px]`, `tracking-[0.06em]`). Please swap these to approved token-backed utilities/vars from `DESIGN.md` and `packages/ui/src/tokens.css`.  
+
+
+As per coding guidelines, "Pull every color, font, radius, spacing step, and motion value from `DESIGN.md` — never invent tokens".
+
+<details>
+<summary>🤖 Prompt for AI Agents</summary>
+
+```
+Verify each finding against the current code and only fix it if needed.
+
+In `@web/src/systems/agent/components/agent-sessions-list.tsx` around lines 68 -
+124, The component AgentSessionRow uses ad-hoc Tailwind utilities (w-[42%],
+text-[13px], text-[10px], text-[12px], tracking-[0.06em]) inside the TableHead
+and Link spans; replace those arbitrary sizes with the design tokens from
+DESIGN.md / packages/ui/src/tokens.css (e.g., use token-backed classes for
+widths, font sizes, tracking, and text color variables) by updating the
+className values in AgentSessionRow (and the TableHead element) to the
+corresponding token classes/vars (font-size token for the session title,
+small-caps/mono token for provider and meta text, spacing tokens for gaps, and a
+width token for the Session TableHead) so all sizing/typography references come
+from the approved design tokens.
+```
+
+</details>
+
+<!-- fingerprinting:phantom:poseidon:hawk -->
+
+<!-- This is an auto-generated comment by CodeRabbit -->
+
+## Triage
+
+- Decision: `valid`
+- Notes:
+  - `agent-sessions-list.tsx` uses direct arbitrary Tailwind values for the session column width, item title size, provider metadata size/tracking, and metric cell size.
+  - `DESIGN.md` defines the relevant typography roles (`Item Title`, `Small Body`, `Badge Text`, and mono tracking), but `packages/ui/src/tokens.css` does not currently expose Tailwind text utilities for those roles.
+  - The complete fix requires a minimal token-support edit in `packages/ui/src/tokens.css` plus component updates to use token-backed utilities/vars instead of literal arbitrary values.
+
+## Resolution
+
+- Added Tailwind theme tokens for `text-item-title`, `text-small-body`, `text-badge`, and `tracking-mono` in `packages/ui/src/tokens.css`.
+- Replaced the ad-hoc classes in `web/src/systems/agent/components/agent-sessions-list.tsx` with token-backed utilities and the standard `w-2/5` width utility.
+- Verified with `make web-lint`, targeted Vitest, and full `make verify`.
diff --git a/.compozy/tasks/qa-rounds/reviews-002/issue_006.md b/.compozy/tasks/qa-rounds/reviews-002/issue_006.md
new file mode 100644
index 000000000..115d9f337
--- /dev/null
+++ b/.compozy/tasks/qa-rounds/reviews-002/issue_006.md
@@ -0,0 +1,84 @@
+---
+status: resolved
+file: web/src/systems/agent/components/agent-sessions-list.tsx
+line: 148
+author: coderabbitai[bot]
+provider_ref: thread:PRRT_kwDOR5y4QM59tCVo,comment:PRRC_kwDOR5y4QM67bPPX
+---
+
+# Issue 006: _⚠️ Potential issue_ | _🟡 Minor_
+## Review Comment
+
+_⚠️ Potential issue_ | _🟡 Minor_
+
+**`0s` is currently rendered as missing data.**
+
+Line 146 treats `0` as invalid (`seconds <= 0`), so newly started sessions display `—` instead of `0s`.
+
+
+
+<details>
+<summary>💡 Proposed fix</summary>
+
+```diff
+ function formatDuration(seconds: number | undefined | null): string {
+-  if (typeof seconds !== "number" || !Number.isFinite(seconds) || seconds <= 0) return "—";
++  if (typeof seconds !== "number" || !Number.isFinite(seconds) || seconds < 0) return "—";
+   const total = Math.round(seconds);
+   if (total < 60) return `${total}s`;
+```
+</details>
+
+<!-- suggestion_start -->
+
+<details>
+<summary>📝 Committable suggestion</summary>
+
+> ‼️ **IMPORTANT**
+> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
+
+```suggestion
+function formatDuration(seconds: number | undefined | null): string {
+  if (typeof seconds !== "number" || !Number.isFinite(seconds) || seconds < 0) return "—";
+  const total = Math.round(seconds);
+  if (total < 60) return `${total}s`;
+```
+
+</details>
+
+<!-- suggestion_end -->
+
+<details>
+<summary>🤖 Prompt for AI Agents</summary>
+
+```
+Verify each finding against the current code and only fix it if needed.
+
+In `@web/src/systems/agent/components/agent-sessions-list.tsx` around lines 145 -
+148, formatDuration currently treats 0 as invalid because the guard checks
+seconds <= 0, causing newly started sessions to show "—"; change the validation
+in formatDuration to only reject negative or non-number values (e.g., use
+seconds < 0 or explicitly test for negative numbers) or add a special-case that
+returns "0s" when seconds === 0, so zero seconds render as "0s" instead of "—"
+(update the function named formatDuration accordingly).
+```
+
+</details>
+
+<!-- fingerprinting:phantom:poseidon:hawk -->
+
+<!-- This is an auto-generated comment by CodeRabbit -->
+
+## Triage
+
+- Decision: `valid`
+- Notes:
+  - `formatDuration` rejects `seconds <= 0`, so a valid `0` elapsed duration renders the missing-data placeholder.
+  - Zero elapsed seconds is a legitimate state for a newly started session and should render `0s`.
+  - The fix is to reject only negative/non-finite/non-number values and add a focused regression assertion for the `0s` display.
+
+## Resolution
+
+- Updated `formatDuration` in `web/src/systems/agent/components/agent-sessions-list.tsx` to reject only negative, non-finite, or non-number values.
+- Added a regression test proving `elapsed_seconds: 0` renders as `0s`.
+- Verified with targeted Vitest and full `make verify`.
diff --git a/.compozy/tasks/qa-rounds/reviews-002/issue_007.md b/.compozy/tasks/qa-rounds/reviews-002/issue_007.md
new file mode 100644
index 000000000..337dc0638
--- /dev/null
+++ b/.compozy/tasks/qa-rounds/reviews-002/issue_007.md
@@ -0,0 +1,56 @@
+---
+status: resolved
+file: web/src/systems/agent/components/agent-stats-grid.test.tsx
+line: 6
+author: coderabbitai[bot]
+provider_ref: thread:PRRT_kwDOR5y4QM59tCVx,comment:PRRC_kwDOR5y4QM67bPPh
+---
+
+# Issue 007: _⚠️ Potential issue_ | _🟠 Major_
+## Review Comment
+
+_⚠️ Potential issue_ | _🟠 Major_
+
+**Use the session system public barrel for cross-system imports.**
+
+Line 4 and Line 5 import from another system’s internals (`@/systems/session/mocks`, `@/systems/session/types`). Please consume these through `@/systems/session` (and re-export what you need there if missing).  
+
+
+As per coding guidelines, "Cross-system imports MUST only go through the public barrel (`@/systems/<domain>`). Never reach into another system's internals".
+
+<details>
+<summary>🤖 Prompt for AI Agents</summary>
+
+```
+Verify each finding against the current code and only fix it if needed.
+
+In `@web/src/systems/agent/components/agent-stats-grid.test.tsx` around lines 4 -
+6, The test is importing session internals directly (primarySessionFixture,
+SessionPayload) instead of the public session barrel; change the imports in
+agent-stats-grid.test.tsx to import these symbols from "@/systems/session" (e.g.
+import { primarySessionFixture, type SessionPayload } from "@/systems/session")
+and if those symbols are not currently re-exported by the session barrel, add
+them to the session system's public index (re-export primarySessionFixture and
+SessionPayload from the session module) so cross-system imports use only the
+public barrel; keep the AgentStatsGrid import as-is.
+```
+
+</details>
+
+<!-- fingerprinting:phantom:poseidon:hawk -->
+
+<!-- This is an auto-generated comment by CodeRabbit -->
+
+## Triage
+
+- Decision: `valid`
+- Notes:
+  - `agent-stats-grid.test.tsx` imports `primarySessionFixture` and `SessionPayload` from session internals instead of the public session barrel.
+  - The same production-bundle concern from issue 004 applies here, so the fixture value should not be exposed through the main session barrel.
+  - The scoped change imports `SessionPayload` from `@/systems/session` and `primarySessionFixture` from the dedicated public test barrel `@/systems/session/testing`.
+
+## Resolution
+
+- Updated `web/src/systems/agent/components/agent-stats-grid.test.tsx` to import `SessionPayload` from `@/systems/session` and `primarySessionFixture` from `@/systems/session/testing`.
+- Reused the public session testing barrel added for issue 004.
+- Verified with targeted Vitest and full `make verify`.
diff --git a/packages/ui/src/tokens.css b/packages/ui/src/tokens.css
index 128192cb7..1dfc8c4bd 100644
--- a/packages/ui/src/tokens.css
+++ b/packages/ui/src/tokens.css
@@ -114,6 +114,14 @@
   --font-wordmark:
     "NuixyberNext", "Inter Variable", -apple-system, "BlinkMacSystemFont", sans-serif;
 
+  --text-item-title: 0.9375rem;
+  --text-item-title--line-height: 1.375rem;
+  --text-small-body: 0.8125rem;
+  --text-small-body--line-height: 1.125rem;
+  --text-badge: 0.625rem;
+  --text-badge--line-height: 0.75rem;
+  --tracking-mono: 0.06em;
+
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
diff --git a/web/src/routes/_app/-agents.$name.sessions.$id.test.tsx b/web/src/routes/_app/-agents.$name.sessions.$id.test.tsx
index ef54ac44d..b659e640c 100644
--- a/web/src/routes/_app/-agents.$name.sessions.$id.test.tsx
+++ b/web/src/routes/_app/-agents.$name.sessions.$id.test.tsx
@@ -2,7 +2,7 @@ import { act, fireEvent, render, screen } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import type { SessionPayload } from "@/systems/session/types";
+import type { SessionPayload } from "@/systems/session";
 
 const {
   mockNavigate,
@@ -169,6 +169,22 @@ describe("Nested agent session route — resume failure UX", () => {
     expect(screen.getByTestId("session-provider-badge")).toHaveTextContent("codex");
   });
 
+  it("replaces history when a missing session redirects to the agent page", () => {
+    mockUseSession.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      error: new Error("Session not found: sess_123"),
+    });
+
+    render(<SessionPage />);
+
+    expect(mockNavigate).toHaveBeenCalledWith({
+      to: "/agents/$name",
+      params: { name: "claude-agent" },
+      replace: true,
+    });
+  });
+
   it("navigates to the resolved session agent after delete succeeds", () => {
     mockUseSession.mockReturnValue({
       data: makeSession({ agent_name: "codex-agent" }),
diff --git a/web/src/routes/_app/-agents.$name.test.tsx b/web/src/routes/_app/-agents.$name.test.tsx
index abf6c754b..eeb61b899 100644
--- a/web/src/routes/_app/-agents.$name.test.tsx
+++ b/web/src/routes/_app/-agents.$name.test.tsx
@@ -3,8 +3,8 @@ import type { ReactNode } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import type { UseAgentDetailPageResult } from "@/hooks/routes/use-agent-detail-page";
-import { primaryAgentFixture } from "@/systems/agent/mocks";
-import { primarySessionFixture } from "@/systems/session/mocks";
+import { primaryAgentFixture } from "@/systems/agent/testing";
+import { primarySessionFixture } from "@/systems/session/testing";
 
 let childMatches: Array<{ id: string }> = [];
 const mockUseAgentDetailPage = vi.fn();
diff --git a/web/src/routes/_app/agents.$name.sessions.$id.tsx b/web/src/routes/_app/agents.$name.sessions.$id.tsx
index 59a7b9aa6..4afa3d87e 100644
--- a/web/src/routes/_app/agents.$name.sessions.$id.tsx
+++ b/web/src/routes/_app/agents.$name.sessions.$id.tsx
@@ -99,7 +99,7 @@ function SessionPage() {
   useEffect(() => {
     if (error?.message?.includes("not found")) {
       toast.error("Session not found");
-      void navigate({ to: "/agents/$name", params: { name } });
+      void navigate({ to: "/agents/$name", params: { name }, replace: true });
     }
   }, [error, navigate, name]);
 
diff --git a/web/src/storybook/web-storybook-stories-and-fixtures.test.tsx b/web/src/storybook/web-storybook-stories-and-fixtures.test.tsx
index a7bc7412d..056e1c76d 100644
--- a/web/src/storybook/web-storybook-stories-and-fixtures.test.tsx
+++ b/web/src/storybook/web-storybook-stories-and-fixtures.test.tsx
@@ -16,6 +16,7 @@ describe("storybook story and fixture regressions", () => {
   const fromWeb = (path: string) => resolve(webRoot, path);
 
   it("loads the edited story modules", { timeout: 15_000 }, async () => {
+    const agentStoryModules = import("@/systems/agent/storybook");
     const modules = await Promise.all([
       import("@/systems/knowledge/components/stories/knowledge-detail-panel.stories"),
       import("@/systems/knowledge/components/stories/knowledge-list-panel.stories"),
@@ -27,9 +28,9 @@ describe("storybook story and fixture regressions", () => {
       import("@/systems/session/components/tool-renderers/stories/read-content.stories"),
       import("@/systems/session/components/tool-renderers/stories/search-content.stories"),
       import("@/routes/_app/stories/-agents.$name.stories"),
-      import("@/systems/agent/components/stories/agent-info-panel.stories"),
-      import("@/systems/agent/components/stories/agent-sessions-list.stories"),
-      import("@/systems/agent/components/stories/agent-stats-grid.stories"),
+      agentStoryModules.then(module => module.agentInfoPanelStories),
+      agentStoryModules.then(module => module.agentSessionsListStories),
+      agentStoryModules.then(module => module.agentStatsGridStories),
     ]);
 
     expect(modules).toHaveLength(13);
diff --git a/web/src/systems/agent/components/agent-sessions-list.test.tsx b/web/src/systems/agent/components/agent-sessions-list.test.tsx
index 77d282972..164e10154 100644
--- a/web/src/systems/agent/components/agent-sessions-list.test.tsx
+++ b/web/src/systems/agent/components/agent-sessions-list.test.tsx
@@ -2,8 +2,8 @@ import { render, screen, within } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
-import { primarySessionFixture } from "@/systems/session/mocks";
-import type { SessionPayload } from "@/systems/session/types";
+import type { SessionPayload } from "@/systems/session";
+import { primarySessionFixture } from "@/systems/session/testing";
 import { AgentSessionsList } from "./agent-sessions-list";
 
 vi.mock("@tanstack/react-router", () => ({
@@ -85,4 +85,32 @@ describe("AgentSessionsList", () => {
     ).toBeInTheDocument();
     expect(Date.now).toHaveBeenCalledTimes(1);
   });
+
+  it("renders zero elapsed duration as zero seconds", () => {
+    const sessions = [
+      makeSession({
+        id: "sess_zero_duration",
+        activity: {
+          elapsed_seconds: 0,
+          idle_seconds: 0,
+          iteration_current: 0,
+          iteration_max: 4,
+          last_activity_at: "2026-04-17T18:10:30Z",
+        },
+      }),
+    ];
+
+    render(
+      <AgentSessionsList
+        agentName="codex-agent"
+        sessions={sessions}
+        isLoading={false}
+        isError={false}
+      />
+    );
+
+    expect(
+      within(screen.getByTestId("agent-session-row-sess_zero_duration")).getByText("0s")
+    ).toBeInTheDocument();
+  });
 });
diff --git a/web/src/systems/agent/components/agent-sessions-list.tsx b/web/src/systems/agent/components/agent-sessions-list.tsx
index 527c6b932..673f04b49 100644
--- a/web/src/systems/agent/components/agent-sessions-list.tsx
+++ b/web/src/systems/agent/components/agent-sessions-list.tsx
@@ -65,7 +65,7 @@ export function AgentSessionsList({
       <Table data-testid="agent-sessions-table">
         <TableHeader>
           <TableRow>
-            <TableHead className="w-[42%]">Session</TableHead>
+            <TableHead className="w-2/5">Session</TableHead>
             <TableHead>Status</TableHead>
             <TableHead className="text-right">Duration</TableHead>
             <TableHead className="text-right">Iterations</TableHead>
@@ -98,13 +98,13 @@ function AgentSessionRow({ agentName, session, now }: AgentSessionRowProps) {
           to="/agents/$name/sessions/$id"
           params={{ name: agentName, id: session.id }}
           className={cn(
-            "flex flex-col gap-0.5 text-[13px] text-[color:var(--color-text-primary)]",
+            "text-item-title flex flex-col gap-0.5 text-[color:var(--color-text-primary)]",
             "transition-colors hover:text-[color:var(--color-accent)]"
           )}
           data-testid={`agent-session-link-${session.id}`}
         >
           <span className="truncate font-medium">{title}</span>
-          <span className="font-mono text-[10px] uppercase tracking-[0.06em] text-[color:var(--color-text-tertiary)]">
+          <span className="text-badge font-mono uppercase tracking-mono text-[color:var(--color-text-tertiary)]">
             {session.provider}
           </span>
         </Link>
@@ -114,13 +114,13 @@ function AgentSessionRow({ agentName, session, now }: AgentSessionRowProps) {
           {status.label}
         </MonoBadge>
       </TableCell>
-      <TableCell className="text-right font-mono text-[12px] text-[color:var(--color-text-secondary)]">
+      <TableCell className="text-small-body text-right font-mono text-[color:var(--color-text-secondary)]">
         {formatDuration(session.activity?.elapsed_seconds)}
       </TableCell>
-      <TableCell className="text-right font-mono text-[12px] text-[color:var(--color-text-secondary)]">
+      <TableCell className="text-small-body text-right font-mono text-[color:var(--color-text-secondary)]">
         {formatIterations(session.activity?.iteration_current, session.activity?.iteration_max)}
       </TableCell>
-      <TableCell className="text-right font-mono text-[12px] text-[color:var(--color-text-secondary)]">
+      <TableCell className="text-small-body text-right font-mono text-[color:var(--color-text-secondary)]">
         {formatRelativeTime(session.activity?.last_activity_at ?? session.updated_at, now)}
       </TableCell>
     </TableRow>
@@ -143,7 +143,7 @@ function AgentSessionsSkeleton() {
 }
 
 function formatDuration(seconds: number | undefined | null): string {
-  if (typeof seconds !== "number" || !Number.isFinite(seconds) || seconds <= 0) return "—";
+  if (typeof seconds !== "number" || !Number.isFinite(seconds) || seconds < 0) return "—";
   const total = Math.round(seconds);
   if (total < 60) return `${total}s`;
   const minutes = Math.floor(total / 60);
diff --git a/web/src/systems/agent/components/agent-stats-grid.test.tsx b/web/src/systems/agent/components/agent-stats-grid.test.tsx
index 9a71c8011..a6d5c4a55 100644
--- a/web/src/systems/agent/components/agent-stats-grid.test.tsx
+++ b/web/src/systems/agent/components/agent-stats-grid.test.tsx
@@ -1,8 +1,8 @@
 import { render, screen, within } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
-import { primarySessionFixture } from "@/systems/session/mocks";
-import type { SessionPayload } from "@/systems/session/types";
+import type { SessionPayload } from "@/systems/session";
+import { primarySessionFixture } from "@/systems/session/testing";
 import { AgentStatsGrid } from "./agent-stats-grid";
 
 function makeSession(overrides: Partial<SessionPayload>): SessionPayload {
diff --git a/web/src/systems/agent/storybook.ts b/web/src/systems/agent/storybook.ts
new file mode 100644
index 000000000..db5963e8d
--- /dev/null
+++ b/web/src/systems/agent/storybook.ts
@@ -0,0 +1,5 @@
+import * as agentInfoPanelStories from "./components/stories/agent-info-panel.stories";
+import * as agentSessionsListStories from "./components/stories/agent-sessions-list.stories";
+import * as agentStatsGridStories from "./components/stories/agent-stats-grid.stories";
+
+export { agentInfoPanelStories, agentSessionsListStories, agentStatsGridStories };
diff --git a/web/src/systems/agent/testing.ts b/web/src/systems/agent/testing.ts
new file mode 100644
index 000000000..8b7ee4472
--- /dev/null
+++ b/web/src/systems/agent/testing.ts
@@ -0,0 +1 @@
+export { primaryAgentFixture } from "./mocks/fixtures";
diff --git a/web/src/systems/session/testing.ts b/web/src/systems/session/testing.ts
new file mode 100644
index 000000000..de4560562
--- /dev/null
+++ b/web/src/systems/session/testing.ts
@@ -0,0 +1 @@
+export { primarySessionFixture } from "./mocks/fixtures";