diff --git a/maps/feature-map/agents.md b/maps/feature-map/agents.md
index c8873671720..25730a0620d 100644
--- a/maps/feature-map/agents.md
+++ b/maps/feature-map/agents.md
@@ -85,14 +85,28 @@ resource allocation waits for approval.
 ### `agent-configuration`
 
 Open `/agents/:agentId` and the configuration/instruction surfaces it exposes.
+The agent nav has two sections: **Agent** (Overview, Identity at
+`/agents/:agentId/identity`, Harness / Runtime, Secrets & variables,
+Permissions / Trust, Advanced) and **Audit** (Activity, Runs, Costs, Budgets),
+which render inside the agent, filtered to it. Skills, Tools, Channels, API Keys
+and Revisions are not in the nav but still open by URL. Edit the name and title
+in place in the header (Enter or blur saves, Escape cancels); while a tab has
+unsaved changes, the header refuses the edit and asks to save or discard first.
+Assign task is the header's one button (Finish setup while setup is pending);
+Run now, Pause/Resume, Clear error, **Agent history** (a dialog listing
+revisions with a confirmed Restore), Duplicate, Copy ID, Reset sessions and
+Terminate are in the actions menu. On Identity, **Advanced settings** →
+**Load profile** switches to an external root only when the root directory and
+entry file already exist; otherwise the server refuses and the panel shows why.
 
 Open **Advanced** at `/agents/:agentId/advanced` for the compact agent
 [YAML configuration](../../doc/agent-configuration-yaml.md). Edit a name, budget,
 runtime setting, and adapter key; save, reload, and check the ordinary settings
-and Revisions. Try malformed YAML, an unknown field, omitted settings, a removed adapter key,
+and Agent history. Try malformed YAML, an unknown field, omitted settings, a removed adapter key,
 and a concurrent settings edit. Errors must retain the draft; stale saves return
-a conflict. Unchanged secret markers must preserve their stored values. Navigating
-away with a draft must show the existing unsaved-change guard. **Reload saved**
+a conflict. Unchanged secret markers must preserve their stored values. Following
+a link away from a draft must open the Discard unsaved changes? dialog; Back/Forward
+keeps the browser confirmation. **Reload saved**
 discards the draft. Also edit instruction text, skill pins, direct tool installs,
 channel settings/resources, permissions/trust/project boundaries, secret operations,
 and API key operations. Verify each result in its owning tab. Revision restore is
@@ -132,12 +146,13 @@ Use the roster’s organization view; `/org` redirects to the roster in the stre
 
 ### `personal-primary-agent`
 
-Open an agent profile and choose **Set as my primary**. Inspect its crown on the
-profile/roster and its position in the Agents sidebar, then open a new task or Chat.
+Open an agent profile and choose the outlined crown beside its name (**Set as my
+primary**). Inspect the filled crown on the profile, the crown on the roster and
+its position in the Agents sidebar, then open a new task or Chat.
 
 ### `agent-api-keys`
 
-Open `/agents/:agentId/api-keys` → **API Keys** with an authenticated person who can manage agents. The operator CLI also supports `paperclipai token agent create -C <company-id> --agent <agent-id> --name <label>`, `token agent list -C <company-id> --agent <agent-id>`, and `token agent revoke <key-id> -C <company-id> --agent <agent-id>`.
+Open `/agents/:agentId/api-keys` → **API Keys** (by URL; it is not in the agent nav) with an authenticated person who can manage agents. The operator CLI also supports `paperclipai token agent create -C <company-id> --agent <agent-id> --name <label>`, `token agent list -C <company-id> --agent <agent-id>`, and `token agent revoke <key-id> -C <company-id> --agent <agent-id>`.
 
 ### `managed-agent-cli`
 
@@ -274,9 +289,10 @@ Manual: Inspect a manager and report, change the relationship through the offere
 
 ### `personal-primary-agent`
 
-Automated: [primary-agent context](../../ui/src/context/PrimaryAgentProvider.test.tsx)
+Automated: [primary-agent context](../../ui/src/context/PrimaryAgentProvider.test.tsx),
+[the profile crown](../../ui/src/components/primary-agent/PrimaryAgentPresentation.test.tsx)
 and [primary-agent routes](../../server/src/__tests__/primary-agent.test.ts)
-cover selection, company/user scope, and request contracts.
+cover selection, replacement confirmation, company/user scope, and request contracts.
 
 Manual: Select an available agent, reload, and inspect the retained personal choice.
 Replace it and verify confirmation is required. Leave or terminate the selected
diff --git a/packages/shared/src/validators/agent.ts b/packages/shared/src/validators/agent.ts
index 4801092351f..d7f6d52a722 100644
--- a/packages/shared/src/validators/agent.ts
+++ b/packages/shared/src/validators/agent.ts
@@ -28,6 +28,7 @@ export const updateAgentInstructionsBundleSchema = z.object({
   rootPath: z.string().trim().min(1).nullable().optional(),
   entryFile: z.string().trim().min(1).optional(),
   clearLegacyPromptTemplate: z.boolean().optional().default(false),
+  requireExistingEntry: z.boolean().optional(),
 });
 
 export type UpdateAgentInstructionsBundle = z.infer<typeof updateAgentInstructionsBundleSchema>;
diff --git a/server/src/__tests__/agent-instructions-service.test.ts b/server/src/__tests__/agent-instructions-service.test.ts
index b165da9e20b..dc75d22c976 100644
--- a/server/src/__tests__/agent-instructions-service.test.ts
+++ b/server/src/__tests__/agent-instructions-service.test.ts
@@ -122,6 +122,38 @@ describe("agent instructions service", () => {
     await expect(fs.readFile(path.join(result.bundle.managedRootPath, "docs", "TOOLS.md"), "utf8")).resolves.toBe("## Tools\n");
   });
 
+  it("refuses an external root without the entry file when the entry must already exist", async () => {
+    const paperclipHome = await makeTempDir("paperclip-agent-instructions-home-");
+    const managedRoot = path.join(paperclipHome, "instances", "test-instance", "companies", "company-1", "agents", "agent-1", "instructions");
+    const externalRoot = await makeTempDir("paperclip-agent-instructions-existing-external-");
+    cleanupDirs.add(paperclipHome);
+    cleanupDirs.add(externalRoot);
+    process.env.PAPERCLIP_HOME = paperclipHome;
+    process.env.PAPERCLIP_INSTANCE_ID = "test-instance";
+    await fs.mkdir(managedRoot, { recursive: true });
+    await fs.writeFile(path.join(managedRoot, "AGENTS.md"), "# Managed Agent\n", "utf8");
+    const svc = agentInstructionsService();
+    const agent = makeAgent({
+      instructionsBundleMode: "managed",
+      instructionsRootPath: managedRoot,
+      instructionsEntryFile: "AGENTS.md",
+      instructionsFilePath: path.join(managedRoot, "AGENTS.md"),
+    });
+    const missingRoot = path.join(externalRoot, "missing");
+
+    await expect(svc.updateBundle(agent, { mode: "external", rootPath: missingRoot, entryFile: "AGENTS.md", requireExistingEntry: true }))
+      .rejects.toThrow(`No directory exists at ${missingRoot}`);
+    await expect(fs.stat(missingRoot)).rejects.toThrow();
+    await expect(svc.updateBundle(agent, { mode: "external", rootPath: externalRoot, entryFile: "AGENTS", requireExistingEntry: true }))
+      .rejects.toThrow(`AGENTS was not found in ${externalRoot}`);
+    expect(await fs.readdir(externalRoot)).toEqual([]);
+
+    await fs.writeFile(path.join(externalRoot, "AGENTS"), "# External Agent\n", "utf8");
+    const result = await svc.updateBundle(agent, { mode: "external", rootPath: externalRoot, entryFile: "AGENTS", requireExistingEntry: true });
+    expect(result.bundle).toMatchObject({ mode: "external", rootPath: externalRoot, entryFile: "AGENTS" });
+    await expect(fs.readFile(path.join(externalRoot, "AGENTS"), "utf8")).resolves.toBe("# External Agent\n");
+  });
+
   it("creates the target entry file when switching to a new external root", async () => {
     const paperclipHome = await makeTempDir("paperclip-agent-instructions-home-");
     const managedRoot = path.join(
diff --git a/server/src/services/agent-instructions.ts b/server/src/services/agent-instructions.ts
index 1afabe9d2e0..1e06d02c9fb 100644
--- a/server/src/services/agent-instructions.ts
+++ b/server/src/services/agent-instructions.ts
@@ -123,6 +123,17 @@ function normalizeRelativeFilePath(candidatePath: string): string {
   return instructionPath(candidatePath);
 }
 
+async function assertExistingExternalEntry(rootPath: string, entryFile: string) {
+  const root = await statIfExists(rootPath);
+  if (!root?.isDirectory()) {
+    throw unprocessable(`No directory exists at ${rootPath}`);
+  }
+  const entry = await statIfExists(path.join(rootPath, entryFile));
+  if (!entry?.isFile()) {
+    throw unprocessable(`${entryFile} was not found in ${rootPath}`);
+  }
+}
+
 function resolvePathWithinRoot(rootPath: string, relativePath: string): string {
   const normalizedRelativePath = normalizeRelativeFilePath(relativePath);
   const absoluteRoot = path.resolve(rootPath);
@@ -622,6 +633,7 @@ export function agentInstructionsService(db?: Db) {
       rootPath?: string | null;
       entryFile?: string;
       clearLegacyPromptTemplate?: boolean;
+      requireExistingEntry?: boolean;
     },
   ): Promise<{ bundle: AgentInstructionsBundle; adapterConfig: Record<string, unknown> }> {
     const state = await recoverManagedBundleState(agent, deriveBundleState(agent));
@@ -647,6 +659,9 @@ export function agentInstructionsService(db?: Db) {
     }
 
     await assertInstructionPathSafe(nextRootPath, nextEntryFile);
+    if (nextMode === "external" && input.requireExistingEntry) {
+      await assertExistingExternalEntry(nextRootPath, nextEntryFile);
+    }
     await fs.mkdir(nextRootPath, { recursive: true });
 
     const existingFiles = await listFilesRecursive(nextRootPath);
diff --git a/tests/e2e/chat-adapters-ui-providers.spec.ts b/tests/e2e/chat-adapters-ui-providers.spec.ts
index bdde190f2d7..3344443853a 100644
--- a/tests/e2e/chat-adapters-ui-providers.spec.ts
+++ b/tests/e2e/chat-adapters-ui-providers.spec.ts
@@ -476,9 +476,9 @@ test.describe.serial("native chat adapter UI", () => {
       await expect(
         page.getByRole("link", { name: "Connect a channel" }),
       ).toBeVisible();
-      await expect(
-        page.getByRole("navigation", { name: "Maya navigation" }).getByRole("link", { name: "Channels", exact: true }),
-      ).toBeVisible();
+      const agentNavigation = page.getByRole("navigation", { name: "Maya navigation" });
+      await expect(agentNavigation.getByRole("link", { name: "Identity", exact: true })).toBeVisible();
+      await expect(agentNavigation.getByRole("link", { name: "Channels", exact: true })).toHaveCount(0);
       await expect.poll(() => mock.chatEndpointListReads).toBeGreaterThan(0);
       if (!enabled) {
         await expect(page.getByText("Connect AgentMail from Connectors.", { exact: true })).toBeVisible();
diff --git a/ui/src/api/agents.ts b/ui/src/api/agents.ts
index a20eb913bab..c6e4e7dce54 100644
--- a/ui/src/api/agents.ts
+++ b/ui/src/api/agents.ts
@@ -180,6 +180,7 @@ export const agentsApi = {
       rootPath?: string | null;
       entryFile?: string;
       clearLegacyPromptTemplate?: boolean;
+      requireExistingEntry?: boolean;
     },
     companyId?: string,
   ) => api.patch<AgentInstructionsBundle>(agentPath(id, companyId, "/instructions-bundle"), data),
diff --git a/ui/src/components/AgentActionButtons.test.tsx b/ui/src/components/AgentActionButtons.test.tsx
index 26ad8448daf..1455bccb203 100644
--- a/ui/src/components/AgentActionButtons.test.tsx
+++ b/ui/src/components/AgentActionButtons.test.tsx
@@ -6,6 +6,7 @@ import { createRoot } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { Agent } from "@paperclipai/shared";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { History } from "lucide-react";
 import { AgentActionButtons } from "./AgentActionButtons";
 import { useAgentLifecycleStatus } from "./AgentLifecycleStatus";
 import { queryKeys } from "../lib/queryKeys";
@@ -277,6 +278,57 @@ describe("AgentActionButtons", () => {
     expect(document.body.textContent).toContain("Reset Sessions");
   });
 
+  it("moves work actions into the menu, leaving Assign task as the one button", async () => {
+    const openHistory = vi.fn();
+    render(makeAgent({ status: "error" }), {
+      assignLabel: "Assign task",
+      workActionsInMenu: true,
+      menuItems: [{ label: "Agent history", icon: History, onSelect: openHistory }],
+    });
+    await flushReact();
+
+    expect([...container.querySelectorAll("button")].map((button) => button.textContent?.trim()).filter(Boolean)).toEqual(["Assign task"]);
+
+    await act(async () => {
+      container.querySelector<HTMLButtonElement>('[aria-label="Open actions for Alpha Agent"]')?.click();
+    });
+    await flushReact();
+    const items = [...document.body.querySelectorAll("[data-slot='popover-content'] button, [data-radix-popper-content-wrapper] button")].map((button) => button.textContent?.trim());
+    expect(items).toEqual(["Run Heartbeat", "Clear error", "Agent history", "Duplicate agent", "Copy agent ID", "Reset sessions", "Terminate"]);
+
+    await act(async () => {
+      [...document.body.querySelectorAll("button")].find((button) => button.textContent?.trim() === "Agent history")?.click();
+    });
+    expect(openHistory).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      container.querySelector<HTMLButtonElement>('[aria-label="Open actions for Alpha Agent"]')?.click();
+    });
+    await flushReact();
+    await act(async () => {
+      document.body.querySelector<HTMLButtonElement>('[aria-label="Clear error and return agent to idle"]')?.click();
+    });
+    await flushReact();
+    expect(mockAgentsApi.clearError).toHaveBeenCalledWith("agent-1", "company-1");
+  });
+
+  it("keeps Finish setup as the one button while setup is pending in menu mode", async () => {
+    render(makeAgent({ status: "paused", lifecycleState: "paused", pauseReason: "setup" }), {
+      assignLabel: "Assign task",
+      workActionsInMenu: true,
+    });
+    await flushReact();
+
+    expect([...container.querySelectorAll("button")].map((button) => button.textContent?.trim()).filter(Boolean)).toEqual(["Finish setup"]);
+
+    await act(async () => {
+      container.querySelector<HTMLButtonElement>('[aria-label="Open actions for Alpha Agent"]')?.click();
+    });
+    await flushReact();
+    const items = [...document.body.querySelectorAll("[data-slot='popover-content'] button, [data-radix-popper-content-wrapper] button")].map((button) => button.textContent?.trim());
+    expect(items).toEqual(["Assign task", "Duplicate agent", "Copy agent ID", "Reset sessions", "Terminate"]);
+  });
+
   it("calls clearError and refreshes agent-related queries", async () => {
     render(makeAgent({ status: "error" }));
     await flushReact();
diff --git a/ui/src/components/AgentActionButtons.tsx b/ui/src/components/AgentActionButtons.tsx
index 26b803bc070..a474f827cac 100644
--- a/ui/src/components/AgentActionButtons.tsx
+++ b/ui/src/components/AgentActionButtons.tsx
@@ -33,7 +33,7 @@ import { AgentStatusBadge } from "./StatusBadge";
 import { agentsApi } from "../api/agents";
 import { ApiError } from "../api/client";
 import { queryKeys } from "../lib/queryKeys";
-import { agentRouteRef } from "../lib/utils";
+import { agentRouteRef, cn } from "../lib/utils";
 import { pendingAgentSetupChoice } from "../lib/agent-setup-choice";
 import { copyTextToClipboard } from "../lib/clipboard";
 import { useDialogActions } from "../context/DialogContext";
@@ -174,6 +174,8 @@ export function AgentActionButtons({
   onTerminateSuccess,
   pauseConfirm,
   hideTerminate = false,
+  workActionsInMenu = false,
+  menuItems = [],
   children,
   className,
 }: {
@@ -199,6 +201,10 @@ export function AgentActionButtons({
   pauseConfirm?: { title: string; description: ReactNode };
   /** Hide the Terminate action (e.g. built-in agents are undeletable). */
   hideTerminate?: boolean;
+  /** Put Run now, Pause/Resume and Clear error in the overflow menu, leaving Assign task (or Finish setup, while setup is pending) as the one button. */
+  workActionsInMenu?: boolean;
+  /** Extra overflow items shown after the work actions when `workActionsInMenu` is on. */
+  menuItems?: ReadonlyArray<{ label: string; icon: typeof Plus; onSelect: () => void; disabled?: boolean }>;
   /**
    * Optional inline error reporter. When provided it is used instead of a toast
    * for action failures (preserves the detail page's inline error banner). When
@@ -364,6 +370,179 @@ export function AgentActionButtons({
       : null;
   const persistentProviderTrace = runtimeDebug?.providerTrace === "raw";
 
+  const finishSetup = () => {
+    if (!confirmNavigationStart(agentActionStartedDirtyRef)) return;
+    navigate(`/agents/new?${new URLSearchParams({
+      name: agent.name, adapterType: agent.adapterType, setupAgentId: agent.id,
+      runnerProvider: String(agent.adapterConfig.provider === "acpx" ? agent.adapterConfig.acpxAgent : agent.adapterConfig.provider ?? "codex"),
+      ...(agent.adapterType === "paperclip_runner" ? { runner: "paperclip" } : ["codex_local", "claude_local", "opencode_local", "pi_local"].includes(agent.adapterType) ? { runner: "legacy" } : {}),
+      ...pendingAgentSetupChoice(agent),
+    })}`);
+  };
+  const pauseDialog = pauseConfirm ? (
+    <AlertDialog open={pauseConfirmOpen} onOpenChange={setPauseConfirmOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{pauseConfirm.title}</AlertDialogTitle>
+          <AlertDialogDescription asChild>
+            <div>{pauseConfirm.description}</div>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={() => agentAction.mutate("pause")}>
+            Pause anyway
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ) : null;
+
+  if (workActionsInMenu) {
+    const item = "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-50";
+    const icon = "size-4 shrink-0 text-muted-foreground";
+    const select = (action: () => void) => () => {
+      setMoreOpen(false);
+      action();
+    };
+    return (
+      <div className={className ?? "flex shrink-0 items-center gap-2"}>
+        {persistentProviderTrace ? (
+          <span
+            className="hidden items-center gap-1 rounded-md border border-primary/30 bg-primary/10 px-2 py-1 text-xs font-medium text-primary lg:inline-flex"
+            title="Exact provider traffic will be captured for future runs and retained for up to 24 hours."
+          >
+            <Bug className="h-3.5 w-3.5" />
+            Raw tracing on
+          </span>
+        ) : null}
+        {children}
+        <Popover open={moreOpen} onOpenChange={setMoreOpen}>
+          <PopoverTrigger asChild>
+            <Button variant="ghost" size="icon" aria-label={`Open actions for ${agent.name}`}>
+              <MoreHorizontal className="size-4" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-52 p-1" align="end">
+            {needsSetup ? (
+              <button
+                type="button"
+                className={item}
+                disabled={assignAndRunDisabled}
+                title={workActionsDisabled ? workActionsDisabledReason : undefined}
+                onClick={select(() => openNewIssue({ assigneeAgentId: agent.id }))}
+              >
+                <Plus className={icon} />
+                {assignLabel}
+              </button>
+            ) : showRun ? (
+              <button
+                type="button"
+                className={item}
+                disabled={assignAndRunDisabled}
+                title={workActionsDisabled ? workActionsDisabledReason : undefined}
+                onClick={select(() => {
+                  if (navigateToRunOnInvoke && !confirmNavigationStart(agentActionStartedDirtyRef)) return;
+                  agentAction.mutate("invoke");
+                })}
+              >
+                <Play className={icon} />
+                {runLabel}
+              </button>
+            ) : null}
+            {needsSetup ? null : isError ? (
+              <button
+                type="button"
+                className={cn(item, "text-destructive")}
+                disabled={clearErrorDisabled}
+                aria-label="Clear error and return agent to idle"
+                onClick={select(() => agentAction.mutate("clear_error"))}
+              >
+                <CheckCircle2 className={cn(icon, "text-destructive")} />
+                Clear error
+              </button>
+            ) : isPaused ? (
+              <button type="button" className={item} disabled={pauseResumeDisabled} onClick={select(() => agentAction.mutate("resume"))}>
+                <Play className={icon} />
+                Resume
+              </button>
+            ) : (
+              <button
+                type="button"
+                className={item}
+                disabled={pauseResumeDisabled}
+                onClick={select(() => (pauseConfirm ? setPauseConfirmOpen(true) : agentAction.mutate("pause")))}
+              >
+                <Pause className={icon} />
+                Pause
+              </button>
+            )}
+            <div role="separator" className="-mx-1 my-1 h-px bg-border" />
+            {menuItems.map(({ label, icon: Icon, onSelect, disabled: itemDisabled }) => (
+              <button key={label} type="button" className={item} disabled={itemDisabled} onClick={select(onSelect)}>
+                <Icon className={icon} />
+                {label}
+              </button>
+            ))}
+            <button type="button" className={item} disabled={duplicateAgent.isPending} onClick={handleDuplicateAgent}>
+              {duplicateAgent.isPending ? <Loader2 className={cn(icon, "animate-spin")} /> : <Copy className={icon} />}
+              Duplicate agent
+            </button>
+            <button
+              type="button"
+              className={item}
+              onClick={select(() => {
+                void copyTextToClipboard(agent.id).catch(() => {
+                  pushToast({ title: "Copy failed", body: "Clipboard access is unavailable.", tone: "error" });
+                });
+              })}
+            >
+              <Copy className={icon} />
+              Copy agent ID
+            </button>
+            <button type="button" className={item} onClick={select(() => resetTaskSession.mutate())}>
+              <RotateCcw className={icon} />
+              Reset sessions
+            </button>
+            {hideTerminate ? null : (
+              <>
+                <div role="separator" className="-mx-1 my-1 h-px bg-border" />
+                <button
+                  type="button"
+                  className={cn(item, "text-destructive")}
+                  onClick={select(() => {
+                    if (onTerminateSuccess && !confirmNavigationStart(agentActionStartedDirtyRef)) return;
+                    agentAction.mutate("terminate");
+                  })}
+                >
+                  <Trash2 className={cn(icon, "text-destructive")} />
+                  Terminate
+                </button>
+              </>
+            )}
+          </PopoverContent>
+        </Popover>
+        {needsSetup ? (
+          <Button size={size} disabled={disabled} onClick={finishSetup}>
+            <Play className="size-4" />
+            Finish setup
+          </Button>
+        ) : (
+          <Button
+            size={size}
+            onClick={() => openNewIssue({ assigneeAgentId: agent.id })}
+            disabled={assignAndRunDisabled}
+            title={workActionsDisabled ? workActionsDisabledReason : undefined}
+          >
+            <Plus className="size-4" />
+            {assignLabel}
+          </Button>
+        )}
+        {pauseDialog}
+      </div>
+    );
+  }
+
   return (
     <div className={className ?? "flex items-center gap-1 sm:gap-2 shrink-0"}>
       {persistentProviderTrace ? (
diff --git a/ui/src/components/AgentConfigForm.tsx b/ui/src/components/AgentConfigForm.tsx
index a28c23198c2..d0ac255e123 100644
--- a/ui/src/components/AgentConfigForm.tsx
+++ b/ui/src/components/AgentConfigForm.tsx
@@ -145,7 +145,9 @@ type AgentConfigFormProps = {
   /** Keep variable bindings beside secret access in a unified edit surface. */
   environmentVariablesPlacement?: "configuration" | "secrets";
   /** "cards" renders each section as heading + bordered card (for settings pages). Default: "inline" (border-b dividers). */
-  sectionLayout?: "inline" | "cards";
+  sectionLayout?: "inline" | "cards" | "panels";
+  /** Sections to leave out entirely (by `data-config-section` key). */
+  hiddenSections?: readonly string[];
   /** Optional settings composition; sorting changes DOM order as well as visual order. */
   sectionOrder?: readonly string[];
   sectionTitles?: Record<string, string>;
@@ -323,12 +325,21 @@ function clampDelayMsFromSeconds(value: number) {
   return clampInteger(value, 0, MAX_TURN_CONTINUATION_MAX_DELAY_SEC) * 1000;
 }
 
-function ConfigSections({ order, className, children }: {
+function ConfigSections({ order, hidden, className, children }: {
   order?: readonly string[];
+  hidden?: readonly string[];
   className: string;
   children: ReactNode;
 }) {
-  if (!order) return <div className={className}>{children}</div>;
+  const keyOf = (child: ReactNode) =>
+    isValidElement<{ "data-config-section"?: string }>(child) ? child.props["data-config-section"] : undefined;
+  const visible = hidden?.length
+    ? Children.toArray(children).filter((child) => {
+      const key = keyOf(child);
+      return !key || !hidden.includes(key);
+    })
+    : children;
+  if (!order) return <div className={className}>{visible}</div>;
   const rank = (child: ReactNode) => {
     const key = isValidElement<{ "data-config-section"?: string }>(child)
       ? child.props["data-config-section"]
@@ -336,7 +347,7 @@ function ConfigSections({ order, className, children }: {
     const index = key ? order.indexOf(key) : -1;
     return index < 0 ? order.length : index;
   };
-  const sections = Children.toArray(children).sort((a, b) => rank(a) - rank(b));
+  const sections = Children.toArray(visible).sort((a, b) => rank(a) - rank(b));
   return <div className={className}>{sections}</div>;
 }
 
@@ -345,7 +356,12 @@ function ConfigSections({ order, className, children }: {
 export function AgentConfigForm(props: AgentConfigFormProps) {
   const { mode, adapterModels: externalModels } = props;
   const isCreate = mode === "create";
-  const cards = props.sectionLayout === "cards";
+  const panels = props.sectionLayout === "panels";
+  const cards = props.sectionLayout === "cards" || panels;
+  const cardBody = panels
+    ? "space-y-3 rounded-lg bg-(--agent-detail-tile) p-(--agent-detail-module-inset)"
+    : "border border-border rounded-lg p-4 space-y-3";
+  const untitled = (key: string) => panels && props.sectionTitles?.[key] === "";
   const showAdapterTypeField = props.showAdapterTypeField ?? true;
   const showInlineAdapterTestEnvironmentFeedback = !props.onTestFeedbackChange;
   const showCreateRunPolicySection = props.showCreateRunPolicySection ?? true;
@@ -1539,7 +1555,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
 
   if (!isCreate && props.content === "secrets") {
     return (
-      <div className={cn("relative", cards && "space-y-6")}>
+      <div className={cn("relative", panels ? "flex flex-col gap-(--agent-detail-band-gap)" : cards && "space-y-6")}>
         {isDirty && !props.hideInlineSave && (
           <div className="sticky top-0 z-10 flex items-center justify-end border-b border-primary/20 bg-background/90 px-4 py-2 backdrop-blur-sm">
             <div className="flex items-center gap-3">
@@ -1557,7 +1573,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
               ? <h3 className="mb-3 text-sm font-medium">Environment variables</h3>
               : <div className="px-4 py-2 text-xs font-medium text-muted-foreground">Environment variables</div>
             }
-            <div className={cn(cards ? "rounded-lg border border-border p-4" : "px-4 pb-3")}>
+            <div data-agent-tile={panels ? "" : undefined} className={cn(cards ? (panels ? "rounded-lg bg-(--agent-detail-tile) p-(--agent-detail-module-inset)" : "rounded-lg border border-border p-4") : "px-4 pb-3")}>
               {environmentVariablesEditor}
             </div>
           </div>
@@ -1568,7 +1584,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
             ? <h3 className="mb-3 text-sm font-medium">Secret access</h3>
             : <div className="px-4 py-2 text-xs font-medium text-muted-foreground">Secret access</div>
           }
-          <div className={cn(cards ? "space-y-3 rounded-lg border border-border p-4" : "space-y-3 px-4 pb-3")}>
+          <div data-agent-tile={panels ? "" : undefined} className={cn(cards ? cardBody : "space-y-3 px-4 pb-3")}>
             <p className="text-xs text-muted-foreground">{help.secretAccess}</p>
             <AgentSecretAccessEditor
               config={{ ...config, ...overlay.adapterConfig }}
@@ -1619,7 +1635,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
           {upgradeWarnings.map(warning => <p key={warning.field} className="text-sm text-muted-foreground">{warning.message}</p>)}
         </div>
       ) : null}
-    <ConfigSections order={props.sectionOrder} className={cn("relative", cards && "space-y-6")}>
+    <ConfigSections order={props.sectionOrder} hidden={props.hiddenSections} className={cn("relative", panels ? "agent-config-panels" : cards && "space-y-6")}>
       {/* ---- Floating Save button (edit mode, when dirty) ---- */}
       {isDirty && !props.hideInlineSave && (
         <div className="sticky top-0 z-10 flex items-center justify-end px-4 py-2 bg-background/90 backdrop-blur-sm border-b border-primary/20">
@@ -1643,7 +1659,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
             ? <h3 className="text-sm font-medium mb-3">{props.sectionTitles?.["identity"] ?? "Identity"}</h3>
             : <div className="px-4 py-2 text-xs font-medium text-muted-foreground">Identity</div>
           }
-          <div className={cn(cards ? "border border-border rounded-lg p-4 space-y-3" : "px-4 pb-3 space-y-3")}>
+          <div data-agent-tile={panels ? "" : undefined} className={cn(cards ? cardBody : "px-4 pb-3 space-y-3")}>
             <Field label="Name" hint={help.name}>
               <DraftInput
                 value={eff("identity", "name", props.agent.name)}
@@ -1706,10 +1722,10 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
         // Render the environment read-only instead of the selectable picker.
         <div data-config-section="environment" className={cn(!cards && (isCreate ? "border-t border-border" : "border-b border-border"))}>
           {cards
-            ? <h3 className="text-sm font-medium mb-3">Environment</h3>
+            ? (untitled("environment") ? null : <h3 className="text-sm font-medium mb-3">Environment</h3>)
             : <div className="px-4 py-2 text-xs font-medium text-muted-foreground">Environment</div>
           }
-          <div className={cn(cards ? "border border-border rounded-lg p-4 space-y-3" : "px-4 pb-3 space-y-3")}>
+          <div data-agent-tile={panels ? "" : undefined} className={cn(cards ? cardBody : "px-4 pb-3 space-y-3")}>
             <Field
               label="Default environment"
               hint="This instance runs all agents in the Kubernetes sandbox. Local execution is disabled."
@@ -1731,10 +1747,10 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
       ) : showEnvironmentOverrideControl ? (
         <div data-config-section="environment" className={cn(!cards && (isCreate ? "border-t border-border" : "border-b border-border"))}>
           {cards
-            ? <h3 className="text-sm font-medium mb-3">Environment</h3>
+            ? (untitled("environment") ? null : <h3 className="text-sm font-medium mb-3">Environment</h3>)
             : <div className="px-4 py-2 text-xs font-medium text-muted-foreground">Environment</div>
           }
-          <div className={cn(cards ? "border border-border rounded-lg p-4 space-y-3" : "px-4 pb-3 space-y-3")}>
+          <div data-agent-tile={panels ? "" : undefined} className={cn(cards ? cardBody : "px-4 pb-3 space-y-3")}>
             <Field label="Environment override">
               <div className="space-y-2">
                 <SelectPopover
@@ -1763,9 +1779,9 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
 
       {/* ---- Adapter ---- */}
       <div data-config-section="adapter" className={cn(!cards && (isCreate ? "border-t border-border" : "border-b border-border"))}>
-        <div className={cn(cards ? "flex items-center justify-between mb-3" : "px-4 py-2 flex items-center justify-between gap-2")}>
+        {untitled("adapter") && !showInlineAdapterTestEnvironmentButton ? null : <div className={cn(cards ? "flex items-center justify-between mb-3" : "px-4 py-2 flex items-center justify-between gap-2")}>
           {cards
-            ? <h3 className="text-sm font-medium">{props.sectionTitles?.["adapter"] ?? "Adapter"}</h3>
+            ? (untitled("adapter") ? <span /> : <h3 className="text-sm font-medium">{props.sectionTitles?.["adapter"] ?? "Adapter"}</h3>)
             : <span className="text-xs font-medium text-muted-foreground">Adapter</span>
           }
           {showInlineAdapterTestEnvironmentButton && (
@@ -1780,8 +1796,8 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
               {testActionPending ? `${testActionLabel}...` : testActionLabel}
             </Button>
           )}
-        </div>
-        <div className={cn(cards ? "border border-border rounded-lg p-4 space-y-3" : "px-4 pb-3 space-y-3")}>
+        </div>}
+        <div data-agent-tile={panels ? "" : undefined} className={cn(cards ? cardBody : "px-4 pb-3 space-y-3")}>
           {showAdapterTypeField && isGrokBotRunner && (
             <Field label="Harness" hint={help.adapterType}>
               <div className="inline-flex items-center gap-1.5">
@@ -2028,10 +2044,10 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
       {(
         <div data-config-section="configuration" className={cn(!cards && "border-b border-border")}>
           {cards
-            ? <h3 className="text-sm font-medium mb-3">Configuration</h3>
+            ? (untitled("configuration") ? null : <h3 className="text-sm font-medium mb-3">Configuration</h3>)
             : <div className="px-4 py-2 text-xs font-medium text-muted-foreground">Configuration</div>
           }
-          <div className={cn(cards ? "border border-border rounded-lg p-4 space-y-3" : "px-4 pb-3 space-y-3")}>
+          <div data-agent-tile={panels ? "" : undefined} className={cn(cards ? cardBody : "px-4 pb-3 space-y-3")}>
               {!isCreate && typeof config.bootstrapPromptTemplate === "string" && config.bootstrapPromptTemplate && (
                 <>
                   <Field label="Bootstrap prompt (legacy)" hint={help.bootstrapPrompt}>
@@ -2151,7 +2167,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
             ? <h3 className="text-sm font-medium mb-3">Environment variables</h3>
             : <div className="px-4 py-2 text-xs font-medium text-muted-foreground">Environment variables</div>
           }
-          <div className={cn(cards ? "border border-border rounded-lg p-4 space-y-3" : "px-4 pb-3 space-y-3")}>
+          <div data-agent-tile={panels ? "" : undefined} className={cn(cards ? cardBody : "px-4 pb-3 space-y-3")}>
             {isLocal ? environmentVariablesEditor : renderAdapterFields("environment")}
           </div>
         </div>
@@ -2164,7 +2180,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
             ? <h3 className="text-sm font-medium flex items-center gap-2 mb-3"><Heart className="h-3 w-3" /> Run Policy</h3>
             : <div className="px-4 py-2 text-xs font-medium text-muted-foreground flex items-center gap-2"><Heart className="h-3 w-3" /> Run Policy</div>
           }
-          <div className={cn(cards ? "border border-border rounded-lg p-4 space-y-3" : "px-4 pb-3 space-y-3")}>
+          <div data-agent-tile={panels ? "" : undefined} className={cn(cards ? cardBody : "px-4 pb-3 space-y-3")}>
             <ToggleWithNumber
               label="Heartbeat on interval"
               hint={help.heartbeatInterval}
@@ -2362,6 +2378,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
 
       {props.compactTestFeedback && showInlineAdapterTestEnvironmentFeedback && showAdapterTestEnvironmentButton && (
         <RuntimeTestCard
+          tone={panels ? "tile" : "card"}
           variant={isExternalRunner ? "prerequisites" : "connection"}
           metadataOnly={accountBoundCatalog}
           state={testActionPending ? "running" : testActionError || testEnvironment.error ? "fail" : testResult?.status ?? "idle"}
diff --git a/ui/src/components/AgentContextualSidebar.test.tsx b/ui/src/components/AgentContextualSidebar.test.tsx
index 8641ef1c6a3..56f5de9d5b6 100644
--- a/ui/src/components/AgentContextualSidebar.test.tsx
+++ b/ui/src/components/AgentContextualSidebar.test.tsx
@@ -36,7 +36,7 @@ vi.mock("./SidebarNavItem", () => ({
 vi.mock("@/plugins/slots", () => ({ usePluginSlots: () => ({ slots: [{ pluginKey: "test.plugin", id: "insights", displayName: "Insights" }] }) }));
 
 describe("AgentContextualSidebar", () => {
-  it.each([false, true])("keeps Channels available for default email regardless of the chat setting (%s)", (enabled) => {
+  it.each([false, true])("lists plugin tabs and keeps Channels and Tools out of the nav (%s)", (enabled) => {
     const client = new QueryClient();
     client.setQueryData(queryKeys.instance.experimentalSettings, { enableChatConnectors: enabled });
     const markup = renderToStaticMarkup(<QueryClientProvider client={client}><MemoryRouter>
@@ -44,11 +44,11 @@ describe("AgentContextualSidebar", () => {
     </MemoryRouter></QueryClientProvider>);
     expect(markup).toContain("Insights");
     expect(markup).toContain("plugin%3Atest.plugin%3Ainsights");
-    expect(markup.includes('href="/agents/agent/channels"')).toBe(true);
-    expect(markup).toContain('href="/agents/agent/tools"');
+    expect(markup).not.toContain('href="/agents/agent/channels"');
+    expect(markup).not.toContain('href="/agents/agent/tools"');
     client.clear();
   });
-  it("renders local definition/runtime/governance links and scoped Audit links", () => {
+  it("renders the Agent and Audit sections with audit pages inside the agent", () => {
     const queryClient = new QueryClient();
     const markup = renderToStaticMarkup(
       <QueryClientProvider client={queryClient}>
@@ -65,9 +65,12 @@ describe("AgentContextualSidebar", () => {
     expect(markup).toContain('href="/agents/codexcoder/overview"');
     expect(markup).toContain('href="/agents/codexcoder/advanced"');
     expect(markup).toContain('href="/agents/codexcoder/permissions"');
-    expect(markup).toContain('href="/agents/codexcoder/api-keys"');
-    expect(markup).toContain('href="/activity?mode=agents&amp;agentId=agent-1"');
-    expect(markup).toContain('href="/activity/runs?agentId=agent-1"');
+    expect(markup).toContain('href="/agents/codexcoder/identity"');
+    expect(markup).not.toContain('href="/agents/codexcoder/api-keys"');
+    expect(markup).toContain('href="/agents/codexcoder/activity"');
+    expect(markup).toContain('href="/agents/codexcoder/runs"');
+    expect(markup).toContain('href="/agents/codexcoder/budgets"');
+    expect(markup).toContain("Secrets &amp; variables");
     expect(markup).toContain("Harness / Runtime");
     expect(markup).toContain("Permissions / Trust");
   });
diff --git a/ui/src/components/AgentContextualSidebar.tsx b/ui/src/components/AgentContextualSidebar.tsx
index 40b7b470d09..d8b6132d731 100644
--- a/ui/src/components/AgentContextualSidebar.tsx
+++ b/ui/src/components/AgentContextualSidebar.tsx
@@ -1,9 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
 import {
   Activity,
-  BadgeDollarSign,
-  BookOpenText,
   FileCode2,
+  Fingerprint,
+  Gauge,
   History,
   KeyRound,
   Library,
@@ -25,36 +25,32 @@ import { contextualSidebarStyles } from "./contextual-sidebar-styles";
 import {
   AGENT_DETAIL_NAVIGATION,
   agentDetailHref,
-  agentScopedAuditHref,
   type AgentLocalDetailView,
 } from "@/pages/agent-detail-navigation";
 
 const localIcons = {
   overview: Sparkles,
-  instructions: BookOpenText,
+  instructions: Fingerprint,
   skills: Library,
   runtime: Settings2,
-  secrets: ShieldCheck,
+  secrets: KeyRound,
   tools: Wrench,
   channels: MessageSquare,
   permissions: ShieldCheck,
   "api-keys": KeyRound,
   revisions: History,
   advanced: FileCode2,
+  activity: Activity,
+  runs: PlayCircle,
+  costs: ReceiptText,
+  budgets: Gauge,
 } satisfies Record<AgentLocalDetailView, typeof Sparkles>;
 
-const auditItems = [
-  { section: "activity", label: "Activity", icon: Activity },
-  { section: "runs", label: "Runs", icon: PlayCircle },
-  { section: "costs", label: "Costs", icon: ReceiptText },
-  { section: "budgets", label: "Budgets", icon: BadgeDollarSign },
-] as const;
-
 export function AgentContextualSidebar({
   agentRef,
   agentId,
   agentName,
-  labels = { secrets: "Secrets & variables" },
+  labels,
 }: {
   agentRef: string;
   agentId?: string;
@@ -86,60 +82,32 @@ export function AgentContextualSidebar({
         className={contextualSidebarStyles.nav}
       >
         {AGENT_DETAIL_NAVIGATION.map((section) => (
-          <div
-            key={section.label}
-            data-slot="contextual-sidebar-section"
-            className={contextualSidebarStyles.section}
-          >
-            <p
-              data-slot="contextual-sidebar-section-label"
-              className={contextualSidebarStyles.sectionLabel}
-            >
-              {section.label}
-            </p>
-            <div data-slot="contextual-sidebar-group" className={contextualSidebarStyles.group}>
-              {section.items
-                .map((item) => {
-                  const href = agentDetailHref(agentRef, item.value);
-                  return (
-                    <SidebarNavItem
-                      key={item.value}
-                      to={href}
-                      label={labels?.[item.value] ?? item.label}
-                      icon={localIcons[item.value]}
-                    />
-                  );
-                })}
+          <div key={section.label} className="contents">
+            {section.label === "Audit" && pluginTabs.length > 0 ? (
+              <div data-slot="contextual-sidebar-section" className={contextualSidebarStyles.section}>
+                <p className={contextualSidebarStyles.sectionLabel}>Apps</p>
+                <div className={contextualSidebarStyles.group}>
+                  {pluginTabs.map(slot => <SidebarNavItem key={`${slot.pluginKey}:${slot.id}`} to={`/agents/${encodeURIComponent(agentRef)}/${encodeURIComponent(`plugin:${slot.pluginKey}:${slot.id}`)}`} label={slot.displayName} icon={Wrench} />)}
+                </div>
+              </div>
+            ) : null}
+            <div data-slot="contextual-sidebar-section" className={contextualSidebarStyles.section}>
+              <p data-slot="contextual-sidebar-section-label" className={contextualSidebarStyles.sectionLabel}>
+                {section.label}
+              </p>
+              <div data-slot="contextual-sidebar-group" className={contextualSidebarStyles.group}>
+                {section.items.map((item) => (
+                  <SidebarNavItem
+                    key={item.value}
+                    to={agentDetailHref(agentRef, item.value)}
+                    label={labels?.[item.value] ?? item.label}
+                    icon={localIcons[item.value]}
+                  />
+                ))}
+              </div>
             </div>
           </div>
         ))}
-
-        {pluginTabs.length > 0 && <div data-slot="contextual-sidebar-section" className={contextualSidebarStyles.section}>
-          <p className={contextualSidebarStyles.sectionLabel}>Apps</p>
-          <div className={contextualSidebarStyles.group}>
-            {pluginTabs.map(slot => <SidebarNavItem key={`${slot.pluginKey}:${slot.id}`} to={`/agents/${encodeURIComponent(agentRef)}/${encodeURIComponent(`plugin:${slot.pluginKey}:${slot.id}`)}`} label={slot.displayName} icon={Wrench} />)}
-          </div>
-        </div>}
-        <div data-slot="contextual-sidebar-section" className={contextualSidebarStyles.section}>
-          <p
-            data-slot="contextual-sidebar-section-label"
-            className={contextualSidebarStyles.sectionLabel}
-          >
-            Audit
-          </p>
-          <div data-slot="contextual-sidebar-group" className={contextualSidebarStyles.group}>
-            {resolvedId ? auditItems.map((item) => (
-              <SidebarNavItem
-                key={item.section}
-                to={agentScopedAuditHref(resolvedId, item.section)}
-                label={item.label}
-                icon={item.icon}
-              />
-            )) : (
-              <p className="px-2 py-1.5 text-xs text-muted-foreground">Loading audit links…</p>
-            )}
-          </div>
-        </div>
       </nav>
     </ContextualSidebarFrame>
   );
diff --git a/ui/src/components/RuntimeTestCard.tsx b/ui/src/components/RuntimeTestCard.tsx
index 6861b6dc653..1c0d293a68d 100644
--- a/ui/src/components/RuntimeTestCard.tsx
+++ b/ui/src/components/RuntimeTestCard.tsx
@@ -54,6 +54,7 @@ export function RuntimeTestCard({
   disabled = false,
   variant = "connection",
   metadataOnly = false,
+  tone = "card",
 }: {
   state: TestState | "warn";
   result: AdapterEnvironmentTestResult | null;
@@ -62,6 +63,7 @@ export function RuntimeTestCard({
   disabled?: boolean;
   variant?: "connection" | "prerequisites";
   metadataOnly?: boolean;
+  tone?: "card" | "tile";
 }) {
   const missingRuntime = state === "fail"
     ? result?.checks.find(check => check.code === "acpx_runtime_package_missing")
@@ -85,9 +87,10 @@ export function RuntimeTestCard({
   return (
     <section
       aria-label="Runtime test"
-      className="rounded-lg border border-border bg-card"
+      data-agent-tile={tone === "tile" ? "" : undefined}
+      className={tone === "tile" ? "rounded-lg bg-(--agent-detail-tile)" : "rounded-lg border border-border bg-card"}
     >
-      <div className="flex items-start gap-3 p-4 sm:items-center">
+      <div className={cn("flex items-start gap-3 sm:items-center", tone === "tile" ? "p-(--agent-detail-module-inset)" : "p-4")}>
         <span
           aria-hidden="true"
           className={cn(
diff --git a/ui/src/components/TrustPresetSection.tsx b/ui/src/components/TrustPresetSection.tsx
index 383a24fd40e..85de0657966 100644
--- a/ui/src/components/TrustPresetSection.tsx
+++ b/ui/src/components/TrustPresetSection.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState, type ReactNode } from "react";
 import type { AgentPermissions, TrustPreset } from "@paperclipai/shared";
-import { Lock, ShieldAlert } from "lucide-react";
+import { Check, Lock, ShieldAlert } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Field, CollapsibleSection } from "./agent-config-primitives";
 import {
@@ -60,6 +60,8 @@ export function TrustPresetSection({
   candidatesLoading,
   allowSingleIssue = true,
   projectAccessEditor,
+  layout = "select",
+  aside,
 }: {
   permissions: Partial<AgentPermissions> | null | undefined;
   onChange: (permissions: Partial<AgentPermissions>) => void;
@@ -70,6 +72,9 @@ export function TrustPresetSection({
   candidatesLoading?: boolean;
   allowSingleIssue?: boolean;
   projectAccessEditor?: ReactNode;
+  /** "cards" shows the presets as selectable cards beside `aside` (the agent page). */
+  layout?: "select" | "cards";
+  aside?: ReactNode;
 }) {
   const [policyOpen, setPolicyOpen] = useState(false);
   const preset = getTrustPreset(permissions);
@@ -106,24 +111,7 @@ export function TrustPresetSection({
   const targetCandidates = targetType === "project" ? projectCandidates : issueCandidates;
   const boundaryValue = boundaryTarget?.type === targetType ? boundaryTarget.id : "";
 
-  return (
-    <div>
-      <h3 className="mb-3 text-sm font-medium">Trust</h3>
-      <div className="rounded-lg border border-border p-4 space-y-3">
-        <Field label="Trust preset" hint="Choose how broadly this agent can read and act on Paperclip work objects.">
-          <select
-            className={inputClass}
-            value={preset}
-            onChange={(event) => handlePresetChange(event.target.value)}
-            disabled={disabled}
-          >
-            <option value="standard">{TRUST_PRESET_LABELS.standard}</option>
-            <option value="low_trust_review">{TRUST_PRESET_LABELS.low_trust_review}</option>
-          </select>
-        </Field>
-        <p className="text-xs text-muted-foreground">{TRUST_PRESET_DESCRIPTIONS[preset]}</p>
-
-        {lowTrust ? (
+  const containment = lowTrust ? (
           <div
             role={hasScope ? "status" : "alert"}
             aria-live="polite"
@@ -249,7 +237,69 @@ export function TrustPresetSection({
               </CollapsibleSection>
             </div>
           </div>
-        ) : null}
+        ) : null;
+
+  if (layout === "cards") {
+    return (
+      <div className="flex flex-col gap-(--agent-detail-module-gap)">
+        <div className="grid gap-(--agent-detail-module-gap) sm:grid-cols-3">
+          <div role="radiogroup" aria-label="Trust preset" className="contents">
+            {(["low_trust_review", "standard"] as const).map((value) => {
+              const selected = preset === value;
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  role="radio"
+                  aria-checked={selected}
+                  data-agent-tile=""
+                  disabled={disabled}
+                  onClick={() => (selected ? undefined : handlePresetChange(value))}
+                  className={cn(
+                    "flex min-h-(--agent-detail-tile-min-h) flex-col gap-2 rounded-lg border bg-(--agent-detail-tile) p-(--agent-detail-module-inset) text-left transition-colors outline-none hover:bg-(--agent-detail-tile-hover) focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60",
+                    selected ? "border-foreground" : "border-transparent",
+                  )}
+                >
+                  <span className="flex items-center justify-between gap-2">
+                    <span className="text-sm font-semibold text-foreground">{TRUST_PRESET_LABELS[value]}</span>
+                    {selected ? <Check className="size-4 text-foreground" aria-hidden /> : null}
+                  </span>
+                  <span className="text-sm leading-5 text-muted-foreground">{TRUST_PRESET_DESCRIPTIONS[value]}</span>
+                </button>
+              );
+            })}
+          </div>
+          {aside}
+        </div>
+        {containment}
+        {lowTrust ? projectAccessEditor : null}
+        {managedPermissions.authorizationPolicy?.reviewPreset ? null : (
+          <p className="text-xs text-muted-foreground">
+            Advanced permissions remain editable through the EE permissions extension when installed.
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h3 className="mb-3 text-sm font-medium">Trust</h3>
+      <div className="rounded-lg border border-border p-4 space-y-3">
+        <Field label="Trust preset" hint="Choose how broadly this agent can read and act on Paperclip work objects.">
+          <select
+            className={inputClass}
+            value={preset}
+            onChange={(event) => handlePresetChange(event.target.value)}
+            disabled={disabled}
+          >
+            <option value="standard">{TRUST_PRESET_LABELS.standard}</option>
+            <option value="low_trust_review">{TRUST_PRESET_LABELS.low_trust_review}</option>
+          </select>
+        </Field>
+        <p className="text-xs text-muted-foreground">{TRUST_PRESET_DESCRIPTIONS[preset]}</p>
+
+        {containment}
 
         {lowTrust && projectAccessEditor}
 
diff --git a/ui/src/components/agent-detail/AgentPanels.tsx b/ui/src/components/agent-detail/AgentPanels.tsx
new file mode 100644
index 00000000000..320b30091af
--- /dev/null
+++ b/ui/src/components/agent-detail/AgentPanels.tsx
@@ -0,0 +1,104 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+import { Link } from "@/lib/router";
+import { cn } from "@/lib/utils";
+
+export const agentTableHeadClass =
+  "grid h-11 items-center gap-3 border-b border-border bg-(--agent-detail-table-head) px-4 text-sm text-muted-foreground";
+
+export const agentTableRowClass = "grid min-h-11 items-center gap-3 border-b border-border px-4 py-2 text-sm last:border-b-0";
+
+export function AgentPanel({
+  title,
+  meta,
+  action,
+  className,
+  headerClassName,
+  children,
+  ...rest
+}: {
+  title?: ReactNode;
+  meta?: ReactNode;
+  action?: ReactNode;
+  className?: string;
+  headerClassName?: string;
+  children: ReactNode;
+} & Omit<HTMLAttributes<HTMLElement>, "title">) {
+  return (
+    <section data-agent-tile="" className={cn("flex min-w-0 flex-col rounded-lg bg-(--agent-detail-tile)", className)} {...rest}>
+      {title ? (
+        <header className={cn("flex items-center justify-between gap-3 px-(--agent-detail-module-inset) pt-(--agent-detail-module-inset) pb-3", headerClassName)}>
+          <h3 className="flex min-w-0 items-center gap-2 text-sm font-semibold text-foreground">{title}</h3>
+          <div className="flex shrink-0 items-center gap-2 text-xs text-muted-foreground">
+            {meta}
+            {action}
+          </div>
+        </header>
+      ) : null}
+      {children}
+    </section>
+  );
+}
+
+export function AgentSectionHeading({ title, action }: { title: ReactNode; action?: ReactNode }) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+      {action}
+    </div>
+  );
+}
+
+export function AgentTextLink({ children, onClick }: { children: ReactNode; onClick?: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="rounded-sm text-xs text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      {children}
+    </button>
+  );
+}
+
+export function AgentMetricTile({
+  icon: Icon,
+  value,
+  label,
+  description,
+  to,
+}: {
+  icon: LucideIcon;
+  value: ReactNode;
+  label: string;
+  description: ReactNode;
+  to: string;
+}) {
+  return (
+    <Link
+      to={to}
+      className="flex min-h-(--agent-detail-tile-min-h) min-w-0 flex-col rounded-lg bg-(--agent-detail-tile) p-(--agent-detail-module-inset) text-left no-underline transition-colors outline-none hover:bg-(--agent-detail-tile-hover) focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <span className="flex items-center justify-between gap-3">
+        <span className="text-3xl font-semibold tracking-tight tabular-nums text-foreground">{value}</span>
+        <Icon className="size-5 shrink-0 text-muted-foreground" aria-hidden />
+      </span>
+      <span className="mt-1 text-sm text-muted-foreground">{label}</span>
+      <span className="mt-1.5 text-xs text-muted-foreground/70">{description}</span>
+    </Link>
+  );
+}
+
+export function AgentChip({ tone = "neutral", mono, children }: { tone?: "neutral" | "danger"; mono?: boolean; children: ReactNode }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex h-5 items-center gap-1 rounded-md px-1.5 text-xs leading-4",
+        mono && "font-mono",
+        tone === "danger" ? "bg-destructive/10 text-destructive" : "bg-(--agent-detail-tile-chip) text-muted-foreground",
+      )}
+    >
+      {children}
+    </span>
+  );
+}
diff --git a/ui/src/components/primary-agent/PrimaryAgentPresentation.test.tsx b/ui/src/components/primary-agent/PrimaryAgentPresentation.test.tsx
new file mode 100644
index 00000000000..1816aaa7592
--- /dev/null
+++ b/ui/src/components/primary-agent/PrimaryAgentPresentation.test.tsx
@@ -0,0 +1,135 @@
+// @vitest-environment jsdom
+import { act, useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import type { Agent } from "@paperclipai/shared";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { PrimaryAgentCrownButton, PrimaryAgentPresentationProvider } from "./PrimaryAgentPresentation";
+
+const agent = (id: string, name: string) => ({ id, name, companyId: "company-a", status: "idle" }) as Agent;
+const ceo = agent("ceo", "CEO");
+const cto = agent("cto", "CTO");
+
+let root: Root;
+let container: HTMLDivElement;
+
+function Harness({ initial, onChange, error, onRetry }: {
+  initial: Agent | null;
+  onChange: (agentId: string) => void;
+  error?: string;
+  onRetry?: () => void;
+}) {
+  const [primary, setPrimary] = useState<Agent | null>(initial);
+  return (
+    <TooltipProvider>
+      <PrimaryAgentPresentationProvider value={{
+        companyId: "company-a",
+        primaryAgentId: primary?.id ?? null,
+        primaryAgent: primary,
+        error,
+        onRetry,
+        onChange: (agentId) => {
+          onChange(agentId);
+          setPrimary([ceo, cto].find((candidate) => candidate.id === agentId) ?? null);
+        },
+      }}>
+        <PrimaryAgentCrownButton agent={ceo} />
+      </PrimaryAgentPresentationProvider>
+    </TooltipProvider>
+  );
+}
+
+async function render(props: Parameters<typeof Harness>[0]) {
+  await act(async () => root.render(<Harness {...props} />));
+}
+
+const crown = () => container.querySelector<HTMLElement>(".primary-crown");
+const nextTick = () => act(async () => { await new Promise((resolve) => setTimeout(resolve, 0)); });
+const dialog = () => document.body.querySelector<HTMLElement>("[role=alertdialog]");
+
+beforeEach(() => {
+  vi.stubGlobal("ResizeObserver", class { observe() {} unobserve() {} disconnect() {} });
+  container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("PrimaryAgentCrownButton", () => {
+  it("fills the crown at once when there is no primary agent yet", async () => {
+    const onChange = vi.fn();
+    await render({ initial: null, onChange });
+    expect(crown()?.getAttribute("aria-label")).toBe("Set as my primary");
+
+    await act(async () => crown()?.click());
+
+    expect(onChange).toHaveBeenCalledWith("ceo");
+    expect(dialog()).toBeNull();
+    expect(crown()?.getAttribute("role")).toBe("img");
+    expect(crown()?.getAttribute("aria-label")).toBe("My primary agent");
+    expect(crown()?.dataset.pop).toBe("now");
+    const bubbles = Array.from(crown()?.querySelectorAll<HTMLElement>(".primary-crown-bubble") ?? []);
+    expect(bubbles).toHaveLength(3);
+    for (const bubble of bubbles) {
+      expect(Number(bubble.style.getPropertyValue("--bubble-size"))).toBeGreaterThan(0);
+      expect(Number(bubble.style.getPropertyValue("--bubble-travel"))).toBeGreaterThan(0);
+    }
+  });
+
+  it("asks before replacing the current primary agent, then fills after the dialog", async () => {
+    const onChange = vi.fn();
+    await render({ initial: cto, onChange });
+
+    await act(async () => crown()?.click());
+    expect(dialog()?.textContent).toContain("Change your primary agent?");
+    expect(onChange).not.toHaveBeenCalled();
+
+    const confirm = Array.from(dialog()?.querySelectorAll("button") ?? []).find((button) => button.textContent === "Set as my primary");
+    await act(async () => confirm?.click());
+
+    expect(onChange).toHaveBeenCalledWith("ceo");
+    expect(crown()?.getAttribute("aria-label")).toBe("My primary agent");
+    expect(crown()?.dataset.pop).toBe("after-dialog");
+    await nextTick();
+    expect(document.activeElement).toBe(crown());
+    expect(document.body.querySelector("[data-slot=tooltip-content]")).toBeNull();
+  });
+
+  it("keeps the current primary agent when the dialog is cancelled", async () => {
+    const onChange = vi.fn();
+    await render({ initial: cto, onChange });
+
+    await act(async () => crown()?.click());
+    const cancel = Array.from(dialog()?.querySelectorAll("button") ?? []).find((button) => button.textContent === "Cancel");
+    await act(async () => cancel?.click());
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(crown()?.getAttribute("aria-label")).toBe("Set as my primary");
+    await nextTick();
+    expect(document.activeElement).toBe(crown());
+    expect(document.body.querySelector("[data-slot=tooltip-content]")).toBeNull();
+  });
+
+  it("shows a still, filled crown on the primary agent", async () => {
+    await render({ initial: ceo, onChange: vi.fn() });
+    expect(crown()?.getAttribute("role")).toBe("img");
+    expect(crown()?.dataset.pop).toBeUndefined();
+    expect(crown()?.querySelector(".primary-crown-bubble")).toBeNull();
+    expect(container.querySelector("button")).toBeNull();
+  });
+
+  it("retries loading when the primary agent could not be loaded", async () => {
+    const onRetry = vi.fn();
+    await render({ initial: null, onChange: vi.fn(), error: "offline", onRetry });
+
+    await act(async () => crown()?.click());
+
+    expect(crown()?.getAttribute("aria-label")).toBe("Retry loading primary agent");
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/ui/src/components/primary-agent/PrimaryAgentPresentation.tsx b/ui/src/components/primary-agent/PrimaryAgentPresentation.tsx
index 4a978f72346..644ff828d5b 100644
--- a/ui/src/components/primary-agent/PrimaryAgentPresentation.tsx
+++ b/ui/src/components/primary-agent/PrimaryAgentPresentation.tsx
@@ -1,10 +1,11 @@
-import { createContext, useContext } from "react";
-import { ArrowRight, Crown, Loader2 } from "lucide-react";
+import { createContext, useContext, useRef, useState, type CSSProperties } from "react";
+import { ArrowRight, Crown } from "lucide-react";
 import type { Agent } from "@paperclipai/shared";
 import { AgentAvatar } from "@/components/AgentAvatar";
 import { Button } from "@/components/ui/button";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 
 /** Shared presentation for the application and the approved review stories. */
 export interface PrimaryAgentPresentation {
@@ -39,56 +40,127 @@ export function PrimaryAgentIndicator({ agentId, companyId }: { agentId: string;
   </Tooltip>;
 }
 
-export function SetPrimaryAgentButton({ agent }: {
+const crownClass = "primary-crown relative";
+
+type CrownPop = { timing: "now" | "after-dialog"; bubbles: { angle: number; size: number; travel: number }[] };
+
+function crownBubbles(): CrownPop["bubbles"] {
+  const start = Math.random() * 360;
+  return [0, 1, 2].map((index) => ({
+    angle: Math.round(start + index * 120 + (Math.random() - 0.5) * 60),
+    size: Number((0.45 + Math.random() * 0.55).toFixed(2)),
+    travel: Number((0.8 + Math.random() * 0.4).toFixed(2)),
+  }));
+}
+
+export function PrimaryAgentCrownButton({ agent }: {
   agent: Agent;
 }) {
   const primary = usePrimaryAgentPresentation(agent.companyId);
+  const [confirming, setConfirming] = useState(false);
+  const [replacing, setReplacing] = useState<Agent | null>(null);
+  const [pop, setPop] = useState<CrownPop | null>(null);
+  const filledRef = useRef<HTMLSpanElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  const quietTooltip = useRef(false);
   if (!primary || agent.status === "terminated" || agent.status === "pending_approval") return null;
-  if (primary.error) return <Button type="button" variant="link" size="sm" onClick={primary.onRetry}
-    className="h-auto justify-start p-0 text-xs text-destructive">Retry loading primary agent</Button>;
   const selected = primary.primaryAgentId === agent.id;
-  const pending = primary.pendingAgentId === agent.id;
-  if (selected && !pending && !primary.loading) return null;
   const previous = primary.primaryAgent?.id === primary.primaryAgentId ? primary.primaryAgent : null;
   const loading = primary.loading || Boolean(primary.primaryAgentId && !previous);
-  const disabled = loading || Boolean(primary.pendingAgentId);
-  const button = <Button type="button" variant="link" size="sm" disabled={disabled}
-    onClick={primary.primaryAgentId ? undefined : () => primary.onChange(agent.id)}
-    className="h-auto justify-start p-0 text-xs text-muted-foreground hover:text-foreground">
-    {pending || loading ? <Loader2 aria-hidden="true" className="size-3 motion-safe:animate-spin" /> : null}
-    {loading ? "Loading primary…" : pending ? "Setting primary…" : "Set as my primary"}
-  </Button>;
-  if (!previous) return button;
-  return <AlertDialog key={previous.id}>
-    <AlertDialogTrigger asChild>{button}</AlertDialogTrigger>
-    <AlertDialogContent>
-      <div className="flex items-start justify-center gap-5 pt-2">
-        <div className="flex min-w-0 flex-1 flex-col items-center gap-2 text-center">
-          <AgentAvatar agent={previous} size={64} label={`${previous.name} avatar`} />
-          <span className="max-w-full break-words text-sm font-medium">{previous.name}</span>
-        </div>
-        <ArrowRight aria-hidden="true" className="mt-5 size-6 shrink-0 text-muted-foreground" />
-        <div className="flex min-w-0 flex-1 flex-col items-center gap-2 text-center">
-          <AgentAvatar agent={agent} size={64} label={`${agent.name} avatar`}
-            className="rounded-xl ring-1 ring-primary ring-offset-2 ring-offset-background" />
-          <span className="flex max-w-full items-center justify-center gap-1.5 text-sm font-medium">
-            <span className="min-w-0 break-words">{agent.name}</span>
-            <span role="img" aria-label="New primary agent" className="inline-flex shrink-0 text-primary">
-              <Crown aria-hidden="true" className="size-3.5" />
+  const busy = loading || Boolean(primary.pendingAgentId);
+  const choose = (timing: CrownPop["timing"]) => {
+    setPop({ timing, bubbles: crownBubbles() });
+    primary.onChange(agent.id);
+  };
+  const request = () => {
+    if (!previous) return choose("now");
+    setReplacing(previous);
+    setConfirming(true);
+  };
+  const tooltip = {
+    open: tooltipOpen,
+    onOpenChange: (open: boolean) => setTooltipOpen(open && !quietTooltip.current),
+  };
+  const wakeTooltip = () => { quietTooltip.current = false; };
+
+  const control = primary.error ? (
+    <Tooltip {...tooltip}>
+      <TooltipTrigger asChild>
+        <Button type="button" variant="ghost" size="icon-sm" aria-label="Retry loading primary agent" onClick={primary.onRetry}
+          onPointerMove={wakeTooltip} onBlur={wakeTooltip}
+          className={cn(crownClass, "text-destructive")}>
+          <Crown aria-hidden="true" className="size-5" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>Couldn't load your primary agent. Select to retry.</TooltipContent>
+    </Tooltip>
+  ) : selected && !loading ? (
+    <Tooltip {...tooltip}>
+      <TooltipTrigger asChild>
+        <span ref={filledRef} role="img" aria-label="My primary agent" tabIndex={-1} data-pop={pop?.timing}
+          onPointerMove={wakeTooltip} onBlur={wakeTooltip}
+          onAnimationEnd={(event) => { if (event.animationName === "primary-crown-pop") setPop(null); }}
+          className={cn(crownClass, "inline-flex size-9 shrink-0 items-center justify-center rounded-md text-primary outline-none focus-visible:ring-ring/50 focus-visible:ring-(length:--rad-3)")}>
+          <Crown aria-hidden="true" className="size-5 fill-current" />
+          {pop?.bubbles.map((bubble, index) => (
+            <span key={index} aria-hidden="true" className="primary-crown-bubble"
+              style={{ "--bubble-angle": bubble.angle, "--bubble-size": bubble.size, "--bubble-travel": bubble.travel } as CSSProperties} />
+          ))}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>My primary agent</TooltipContent>
+    </Tooltip>
+  ) : (
+    <Tooltip {...tooltip}>
+      <TooltipTrigger asChild>
+        <Button ref={buttonRef} type="button" variant="ghost" size="icon-sm" aria-label="Set as my primary" disabled={busy} onClick={request}
+          onPointerMove={wakeTooltip} onBlur={wakeTooltip}
+          className={cn(crownClass, "text-muted-foreground/50 hover:text-foreground")}>
+          <Crown aria-hidden="true" className="size-5" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{loading ? "Loading your primary agent…" : "Set as my primary"}</TooltipContent>
+    </Tooltip>
+  );
+
+  return <>
+    {control}
+    {replacing ? <AlertDialog open={confirming} onOpenChange={setConfirming}>
+      <AlertDialogContent onCloseAutoFocus={(event) => {
+        event.preventDefault();
+        quietTooltip.current = true;
+        setTooltipOpen(false);
+        (filledRef.current ?? buttonRef.current)?.focus();
+      }}>
+        <div className="flex items-start justify-center gap-5 pt-2">
+          <div className="flex min-w-0 flex-1 flex-col items-center gap-2 text-center">
+            <AgentAvatar agent={replacing} size={64} label={`${replacing.name} avatar`} />
+            <span className="max-w-full break-words text-sm font-medium">{replacing.name}</span>
+          </div>
+          <ArrowRight aria-hidden="true" className="mt-5 size-6 shrink-0 text-muted-foreground" />
+          <div className="flex min-w-0 flex-1 flex-col items-center gap-2 text-center">
+            <AgentAvatar agent={agent} size={64} label={`${agent.name} avatar`}
+              className="rounded-xl ring-1 ring-primary ring-offset-2 ring-offset-background" />
+            <span className="flex max-w-full items-center justify-center gap-1.5 text-sm font-medium">
+              <span className="min-w-0 break-words">{agent.name}</span>
+              <span role="img" aria-label="New primary agent" className="inline-flex shrink-0 text-primary">
+                <Crown aria-hidden="true" className="size-3.5" />
+              </span>
             </span>
-          </span>
+          </div>
         </div>
-      </div>
-      <AlertDialogHeader>
-        <AlertDialogTitle>Change your primary agent?</AlertDialogTitle>
-        <AlertDialogDescription className="break-words">
-          This will make {agent.name} your primary agent, do you want to do this?
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter className="flex-row justify-between sm:justify-between">
-        <AlertDialogCancel>Cancel</AlertDialogCancel>
-        <AlertDialogAction disabled={disabled} onClick={() => primary.onChange(agent.id)}>Set as my primary</AlertDialogAction>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>;
+        <AlertDialogHeader>
+          <AlertDialogTitle>Change your primary agent?</AlertDialogTitle>
+          <AlertDialogDescription className="break-words">
+            This will make {agent.name} your primary agent, do you want to do this?
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="flex-row justify-between sm:justify-between">
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction disabled={busy} onClick={() => choose("after-dialog")}>Set as my primary</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog> : null}
+  </>;
 }
diff --git a/ui/src/components/task-chat/motion-tokens.ts b/ui/src/components/task-chat/motion-tokens.ts
index 068cf982b98..158e2309acb 100644
--- a/ui/src/components/task-chat/motion-tokens.ts
+++ b/ui/src/components/task-chat/motion-tokens.ts
@@ -32,6 +32,7 @@ export const MOTION_TOKENS: MotionTokenDef[] = [
   { name: "--motion-ease-in", group: "Easing", kind: "easing" },
   { name: "--motion-ease-pane-width-reset", group: "Easing", kind: "easing" },
   { name: "--motion-ease-pane-reveal", group: "Easing", kind: "easing" },
+  { name: "--motion-ease-primary-crown-burst", group: "Easing", kind: "easing" },
 
   // Duration primitives
   { name: "--motion-duration-instant", group: "Durations", kind: "time", min: 0, max: 1000, step: 10 },
@@ -80,6 +81,8 @@ export const MOTION_TOKENS: MotionTokenDef[] = [
   { name: "--motion-pane-reveal", group: "States", kind: "time", min: 0, max: 1500, step: 10 },
   { name: "--motion-pane-width-reset", group: "States", kind: "time", min: 0, max: 1500, step: 10 },
   { name: "--motion-side-panel-tab", group: "States", kind: "time", min: 0, max: 1500, step: 10 },
+  { name: "--motion-primary-crown-pop", group: "States", kind: "time", min: 0, max: 1500, step: 10 },
+  { name: "--motion-primary-crown-pop-delay", group: "States", kind: "time", min: 0, max: 1000, step: 10 },
 ];
 
 /** Common easing presets offered by the tweak panel's easing picker. */
diff --git a/ui/src/index.css b/ui/src/index.css
index 404057e5d06..7e7d01bef64 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -591,6 +591,33 @@
   --tc-composer-visible-nav-offset: calc(4rem + var(--spacing) * 1.5 + var(--sz-safe-bottom));
   /* With the dock's pb-1, leave 12px below the card when the nav hides. */
   --tc-composer-hidden-nav-offset: calc(var(--sz-safe-bottom) + var(--spacing) * 2);
+
+  /* Agent detail page (Refine-v2). Surfaces mix the theme's own foreground
+     into its background, so the same tokens read in light and dark. */
+  --agent-detail-module-gap: 12px;
+  --agent-detail-band-gap: 48px;
+  --agent-detail-module-inset: 20px;
+  --agent-detail-portrait-zoom: 1.21875;
+  --agent-detail-tile-min-h: 122px;
+  --agent-detail-control-h: 40px;
+  --agent-detail-logo-rows-h: 60px;
+  --agent-detail-dialog-max-h: 85vh;
+  --agent-detail-history-cols: minmax(0, 1.5fr) minmax(0, 1fr) 140px 104px;
+  --agent-detail-tile: color-mix(in oklab, var(--foreground) 4%, var(--background));
+  --agent-detail-tile-hover: color-mix(in oklab, var(--foreground) 7%, var(--background));
+  --agent-detail-tile-chip: color-mix(in oklab, var(--foreground) 8%, transparent);
+  --agent-detail-tile-input: color-mix(in oklab, var(--foreground) 5%, var(--agent-detail-tile));
+  --agent-detail-table-head: color-mix(in oklab, var(--foreground) 3%, transparent);
+  --agent-detail-control-border: color-mix(in oklab, var(--foreground) 20%, transparent);
+  --agent-detail-control-bg: color-mix(in oklab, var(--foreground) 5%, var(--background));
+  --agent-detail-switch-off: color-mix(in oklab, var(--foreground) 15%, transparent);
+  --agent-detail-dot-unsaved: var(--status-task-icon-todo);
+  --agent-detail-dot-saved: var(--status-task-icon-done);
+  --motion-primary-crown-pop: 598ms; /* --motion-duration-deliberate slowed by 15% */
+  --motion-primary-crown-pop-delay: var(--motion-duration-fast);
+  --primary-crown-bubble-size: 7px;
+  --primary-crown-bubble-travel: 30px;
+  --motion-ease-primary-crown-burst: cubic-bezier(0.2, 0.8, 0.3, 1);
 }
 
 .dark {
@@ -3303,18 +3330,18 @@ span.paperclip-mention-chip[data-mention-kind="external-object"] {
 .agent-yaml-editor .cm-editor {
   height: var(--sz-480px);
   font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  background: var(--background);
+  font-size: var(--text-xs);
+  background: var(--agent-detail-tile);
   color: var(--foreground);
 }
 .agent-yaml-editor .cm-scroller { overflow: auto; }
 .agent-yaml-editor .cm-gutters {
-  background: var(--muted);
+  background: transparent;
   color: var(--muted-foreground);
   border-color: var(--border);
 }
 .agent-yaml-editor .cm-activeLine,
-.agent-yaml-editor .cm-activeLineGutter { background: var(--accent); }
+.agent-yaml-editor .cm-activeLineGutter { background: var(--agent-detail-tile-chip); }
 .agent-yaml-editor .cm-cursor { border-left-color: var(--foreground); }
 .agent-yaml-editor .cm-selectionBackground,
 .agent-yaml-editor .cm-focused .cm-selectionBackground { background: var(--accent); }
@@ -3326,7 +3353,7 @@ span.paperclip-mention-chip[data-mention-kind="external-object"] {
 .agent-settings-form [data-config-section] {
   @apply my-0;
 }
-.agent-settings-form [data-config-section] > .rounded-lg {
+.agent-settings-form [data-config-section] > .rounded-lg:not([data-agent-tile]) {
   @apply bg-card p-5;
 }
 .agent-settings-form [data-config-section] h3 {
@@ -3344,8 +3371,8 @@ span.paperclip-mention-chip[data-mention-kind="external-object"] {
   > :nth-child(n + 3) {
   @apply sm:col-span-2;
 }
-.agent-settings-overview section,
-.agent-settings-permissions .rounded-lg,
+.agent-settings-overview section:not([data-agent-tile]),
+.agent-settings-permissions .rounded-lg:not([data-agent-tile]),
 .agent-settings-api-keys .rounded-lg,
 .agent-settings-revisions .rounded-md {
   @apply bg-card;
@@ -5087,3 +5114,110 @@ html:not(.dark) .coordinator-sidebar {
   .coordinator-task-commitment > .coordinator-task-light { display: none; }
   .coordinator-created-task, .coordinator-decision-receipt { transition: none; }
 }
+
+/* Agent detail page (Refine-v2): inside a filled panel, controls step up from
+   the panel fill and an off switch keeps a visible track. */
+[data-agent-tile] {
+  --agent-detail-control-bg: var(--agent-detail-tile-input);
+}
+[data-agent-tile] [data-slot="toggle"][aria-checked="false"] {
+  background: var(--agent-detail-switch-off);
+}
+
+/* Agent detail header: the primary-agent crown fills with a short pop while three
+   bubbles burst out of its centre. After the replace-primary dialog it waits for
+   the dialog to close first. Each bubble gets its own angle, size and travel. */
+.primary-crown[data-pop] svg {
+  transform-origin: center;
+  animation: primary-crown-pop var(--motion-primary-crown-pop) var(--motion-ease-standard) both;
+}
+.primary-crown-bubble {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: calc(var(--primary-crown-bubble-size) * var(--bubble-size));
+  aspect-ratio: 1;
+  pointer-events: none;
+  translate: -50% -50%;
+  rotate: calc(var(--bubble-angle) * 1deg);
+  animation: primary-crown-bubble-travel var(--motion-primary-crown-pop) var(--motion-ease-primary-crown-burst) both;
+}
+.primary-crown-bubble::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 9999px;
+  background: currentColor;
+  animation: primary-crown-bubble-scale var(--motion-primary-crown-pop) both;
+}
+.primary-crown[data-pop="after-dialog"] svg,
+.primary-crown[data-pop="after-dialog"] .primary-crown-bubble,
+.primary-crown[data-pop="after-dialog"] .primary-crown-bubble::before {
+  animation-delay: var(--motion-primary-crown-pop-delay);
+}
+@keyframes primary-crown-pop {
+  0% { transform: scale(1); fill-opacity: 0; }
+  40% { transform: scale(1.3); fill-opacity: 1; }
+  70% { transform: scale(0.92); }
+  100% { transform: scale(1); fill-opacity: 1; }
+}
+@keyframes primary-crown-bubble-travel {
+  from { transform: translateX(0); }
+  to { transform: translateX(calc(var(--primary-crown-bubble-travel) * var(--bubble-travel))); }
+}
+@keyframes primary-crown-bubble-scale {
+  0% { transform: scale(0); animation-timing-function: var(--motion-ease-out-expo); }
+  25% { transform: scale(1); animation-timing-function: var(--motion-ease-standard); }
+  100% { transform: scale(0); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .primary-crown[data-pop] svg { animation: none; }
+  .primary-crown-bubble { display: none; }
+}
+
+/* Agent detail Harness / Secrets: AgentConfigForm's "panels" layout. */
+.agent-config-panels {
+  display: flex;
+  flex-direction: column;
+  gap: var(--agent-detail-module-gap);
+}
+.agent-config-panels > [data-config-section] {
+  display: flex;
+  flex-direction: column;
+}
+.agent-config-panels > [data-config-section] > [data-agent-tile] {
+  flex: 1;
+}
+.agent-config-panels > section[aria-label="Runtime test"] {
+  order: 1;
+}
+.agent-config-panels > [data-config-section="environment-variables"] {
+  order: 2;
+  margin-top: calc(var(--agent-detail-band-gap) - var(--agent-detail-module-gap));
+}
+.agent-config-panels > :not([data-config-section]):not(section[aria-label="Runtime test"]) {
+  order: 3;
+}
+@media (min-width: 768px) {
+  .agent-config-panels {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .agent-config-panels > * {
+    grid-column: 1 / -1;
+  }
+  .agent-config-panels > [data-config-section="adapter"] {
+    grid-column: 1;
+  }
+  .agent-config-panels:has(> [data-config-section="environment"]) > [data-config-section="adapter"] {
+    grid-row: span 2;
+  }
+  .agent-config-panels > [data-config-section="configuration"],
+  .agent-config-panels > [data-config-section="environment"] {
+    grid-column: 2;
+  }
+}
+.agent-config-panels h3,
+.agent-config-panels + h3 {
+  font-weight: 600;
+}
diff --git a/ui/src/pages/AgentAdvancedTab.tsx b/ui/src/pages/AgentAdvancedTab.tsx
index b2eaa9baba5..4714bef7118 100644
--- a/ui/src/pages/AgentAdvancedTab.tsx
+++ b/ui/src/pages/AgentAdvancedTab.tsx
@@ -145,7 +145,10 @@ function ConfigurationEditor({ agent, initial, onDirtyChange, onSaved, onSavingC
     <footer className="sticky bottom-0 z-10 flex items-center justify-between gap-3 border-t border-border bg-background py-4">
       <Button variant="ghost" disabled={busy} onClick={() => { if (!operationPending.current) { operationPending.current = true; reload.mutate(); } }}>Reload saved</Button>
       <div className="flex items-center gap-3">
-        <span role="status" className="text-xs text-muted-foreground">{save.isPending ? `Saving: ${progress || "configuration"}…` : reload.isPending ? "Loading configuration…" : dirty ? validation.document && !validation.changes.length ? "No configuration changes" : "Unsaved changes" : ""}</span>
+        <span role="status" className="flex items-center gap-2 text-xs text-muted-foreground">
+          {!save.isPending && !reload.isPending && dirty ? <span aria-hidden className="size-1.5 shrink-0 rounded-full bg-(--agent-detail-dot-unsaved)" /> : null}
+          {save.isPending ? `Saving: ${progress || "configuration"}…` : reload.isPending ? "Loading configuration…" : dirty ? validation.document && !validation.changes.length ? "No configuration changes" : "Unsaved changes" : "No unsaved changes"}
+        </span>
         <Button disabled={!dirty || busy || reloadRequired || !validation.document || !validation.changes.length} onClick={() => { if (!operationPending.current) { operationPending.current = true; save.mutate(); } }}>{save.isPending ? "Saving…" : "Save changes"}</Button>
       </div>
     </footer>
@@ -184,5 +187,5 @@ function AgentYamlEditor({ value, onChange, readOnly }: { value: string; onChang
     const view = editor.current;
     if (view && view.state.doc.toString() !== value) view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } });
   }, [value]);
-  return <div ref={container} className="agent-yaml-editor overflow-hidden rounded-md border border-border" />;
+  return <div ref={container} className="agent-yaml-editor overflow-hidden rounded-lg" />;
 }
diff --git a/ui/src/pages/AgentAuditTab.test.ts b/ui/src/pages/AgentAuditTab.test.ts
new file mode 100644
index 00000000000..55f354211aa
--- /dev/null
+++ b/ui/src/pages/AgentAuditTab.test.ts
@@ -0,0 +1,79 @@
+import { describe, expect, it } from "vitest";
+import type { BudgetOverview, CostByAgent, CostByAgentModel } from "@paperclipai/shared";
+import { agentBudgetSummary } from "./AgentBudgetsPanel";
+import { agentCostRow, agentModelCostRows } from "./AgentCostsPanel";
+
+const agent = {
+  id: "agent-1",
+  name: "Atlas",
+  status: "active",
+  pauseReason: null,
+  budgetMonthlyCents: 10_000,
+  spentMonthlyCents: 2_500,
+} as const;
+
+function costRow(agentId: string | null, costCents: number): CostByAgent {
+  return {
+    agentId,
+    agentName: agentId,
+    agentStatus: "active",
+    eventCount: 1,
+    estimatedEventCount: 0,
+    costCents,
+    inputTokens: 10,
+    cachedInputTokens: 0,
+    outputTokens: 5,
+    apiRunCount: 1,
+    subscriptionRunCount: 0,
+    subscriptionCachedInputTokens: 0,
+    subscriptionInputTokens: 0,
+    subscriptionOutputTokens: 0,
+  };
+}
+
+function modelRow(agentId: string, model: string, costCents: number): CostByAgentModel {
+  return {
+    agentId,
+    agentName: agentId,
+    provider: "anthropic",
+    biller: "anthropic",
+    billingType: "metered_api",
+    model,
+    eventCount: 1,
+    estimatedEventCount: 0,
+    costCents,
+    inputTokens: 1,
+    cachedInputTokens: 0,
+    outputTokens: 1,
+  };
+}
+
+describe("agent-scoped audit data", () => {
+  it("keeps only the agent's cost row and orders its models by spend", () => {
+    expect(agentCostRow([costRow("agent-2", 900), costRow("agent-1", 300), costRow(null, 50)], "agent-1")?.costCents).toBe(300);
+    expect(agentCostRow([costRow("agent-2", 900)], "agent-1")).toBeNull();
+    expect(
+      agentModelCostRows([modelRow("agent-1", "small", 20), modelRow("agent-2", "other", 90), modelRow("agent-1", "large", 80)], "agent-1").map((row) => row.model),
+    ).toEqual(["large", "small"]);
+  });
+
+  it("uses the agent's own budget policy and falls back to its monthly budget", () => {
+    const policy = { ...agentBudgetSummary(undefined, agent, "company-1"), policyId: "policy-1", amount: 50_000 };
+    const overview = {
+      companyId: "company-1",
+      policies: [{ ...policy, scopeId: "agent-2", policyId: "policy-2" }, policy],
+      activeIncidents: [],
+      pausedAgentCount: 0,
+      pausedProjectCount: 0,
+      pendingApprovalCount: 0,
+    } satisfies BudgetOverview;
+    expect(agentBudgetSummary(overview, agent, "company-1").policyId).toBe("policy-1");
+
+    const fallback = agentBudgetSummary(undefined, agent, "company-1");
+    expect(fallback.scopeType).toBe("agent");
+    expect(fallback.amount).toBe(10_000);
+    expect(fallback.remainingAmount).toBe(7_500);
+    expect(fallback.utilizationPercent).toBe(25);
+    expect(fallback.status).toBe("ok");
+  });
+});
diff --git a/ui/src/pages/AgentAuditTab.tsx b/ui/src/pages/AgentAuditTab.tsx
new file mode 100644
index 00000000000..a364aa3e0af
--- /dev/null
+++ b/ui/src/pages/AgentAuditTab.tsx
@@ -0,0 +1,21 @@
+import type { AgentDetail as AgentDetailRecord } from "@paperclipai/shared";
+import { AuditFeed } from "./audit/AuditFeed";
+import { AuditRuns } from "./audit/AuditRuns";
+import { AgentBudgetsPanel } from "./AgentBudgetsPanel";
+import { AgentCostsPanel } from "./AgentCostsPanel";
+import type { AgentAuditView } from "./agent-detail-navigation";
+
+export function AgentAuditTab({
+  agent,
+  companyId,
+  section,
+}: {
+  agent: AgentDetailRecord;
+  companyId: string;
+  section: AgentAuditView;
+}) {
+  if (section === "activity") return <AuditFeed companyId={companyId} lockedAgentId={agent.id} hideHeader />;
+  if (section === "runs") return <AuditRuns companyId={companyId} lockedAgentId={agent.id} hideHeader />;
+  if (section === "costs") return <AgentCostsPanel agentId={agent.id} agentName={agent.name} companyId={companyId} />;
+  return <AgentBudgetsPanel agent={agent} companyId={companyId} />;
+}
diff --git a/ui/src/pages/AgentBudgetsPanel.tsx b/ui/src/pages/AgentBudgetsPanel.tsx
new file mode 100644
index 00000000000..8b405dd9d4c
--- /dev/null
+++ b/ui/src/pages/AgentBudgetsPanel.tsx
@@ -0,0 +1,111 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AgentDetail as AgentDetailRecord, BudgetOverview, BudgetPolicySummary } from "@paperclipai/shared";
+import { budgetsApi } from "../api/budgets";
+import { BudgetIncidentCard } from "../components/BudgetIncidentCard";
+import { BudgetPolicyCard } from "../components/BudgetPolicyCard";
+import { PageSkeleton } from "../components/PageSkeleton";
+import { queryKeys } from "../lib/queryKeys";
+
+type BudgetAgent = Pick<AgentDetailRecord, "id" | "name" | "status" | "pauseReason" | "budgetMonthlyCents" | "spentMonthlyCents">;
+
+export function agentBudgetSummary(overview: BudgetOverview | undefined, agent: BudgetAgent, companyId: string): BudgetPolicySummary {
+  const matched = overview?.policies.find((policy) => policy.scopeType === "agent" && policy.scopeId === agent.id);
+  if (matched) return matched;
+  const amount = agent.budgetMonthlyCents ?? 0;
+  const observed = agent.spentMonthlyCents ?? 0;
+  return {
+    policyId: "",
+    companyId,
+    scopeType: "agent",
+    scopeId: agent.id,
+    scopeName: agent.name,
+    metric: "billed_cents",
+    windowKind: "calendar_month_utc",
+    amount,
+    unpricedEventCount: 0,
+    pendingRunCount: 0,
+    unpricedUsagePolicy: "block",
+    observedAmount: observed,
+    remainingAmount: Math.max(0, amount - observed),
+    utilizationPercent: amount > 0 ? Number(((observed / amount) * 100).toFixed(2)) : 0,
+    warnPercent: 80,
+    hardStopEnabled: true,
+    notifyEnabled: true,
+    isActive: amount > 0,
+    status: amount > 0 && observed >= amount ? "hard_stop" : "ok",
+    paused: agent.status === "paused",
+    pauseReason: agent.pauseReason ?? null,
+    windowStart: new Date(),
+    windowEnd: new Date(),
+  };
+}
+
+export function AgentBudgetsPanel({ agent, companyId }: { agent: BudgetAgent; companyId: string }) {
+  const queryClient = useQueryClient();
+  const overview = useQuery({
+    queryKey: queryKeys.budgets.overview(companyId),
+    queryFn: () => budgetsApi.overview(companyId),
+    refetchInterval: 30_000,
+    staleTime: 5_000,
+  });
+  const summary = agentBudgetSummary(overview.data, agent, companyId);
+  const incidents = (overview.data?.activeIncidents ?? []).filter(
+    (incident) => incident.scopeType === "agent" && incident.scopeId === agent.id,
+  );
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: queryKeys.budgets.overview(companyId) });
+    queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.id) });
+    queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(companyId) });
+  };
+  const policy = useMutation({
+    mutationFn: (changes: { amount?: number; reservationCents?: string; unpricedUsagePolicy?: "block" | "allow" }) =>
+      budgetsApi.upsertPolicy(companyId, {
+        scopeType: "agent",
+        scopeId: agent.id,
+        metric: summary.metric,
+        windowKind: summary.windowKind,
+        ...changes,
+      }),
+    onSuccess: invalidate,
+  });
+  const incident = useMutation({
+    mutationFn: (input: { incidentId: string; action: "keep_paused" | "raise_budget_and_resume"; amount?: number }) =>
+      budgetsApi.resolveIncident(companyId, input.incidentId, input),
+    onSuccess: invalidate,
+  });
+
+  if (overview.isLoading) return <PageSkeleton variant="costs" />;
+  return (
+    <div className="space-y-4">
+      {overview.error && !overview.data ? (
+        <p role="alert" className="text-sm text-destructive">Budget data could not be loaded. Showing the agent's saved monthly budget.</p>
+      ) : null}
+      {policy.error ? (
+        <p role="alert" className="text-sm text-destructive">Could not update {agent.name}'s budget. Review the amount and try again.</p>
+      ) : null}
+      {incidents.map((entry) => (
+        <div key={entry.id} className="space-y-2">
+          <BudgetIncidentCard
+            incident={entry}
+            isMutating={incident.isPending}
+            onKeepPaused={() => incident.mutate({ incidentId: entry.id, action: "keep_paused" })}
+            onRaiseAndResume={(amount) => incident.mutate({ incidentId: entry.id, action: "raise_budget_and_resume", amount })}
+          />
+          {incident.error && incident.variables?.incidentId === entry.id ? (
+            <p role="alert" className="text-sm text-destructive">
+              {incident.variables.action === "keep_paused" ? "Could not keep this agent paused." : "Could not raise the budget and resume."}{" "}
+              {incident.error instanceof Error && incident.error.message ? incident.error.message : "Try again."}
+            </p>
+          ) : null}
+        </div>
+      ))}
+      <BudgetPolicyCard
+        summary={summary}
+        isSaving={policy.isPending}
+        onSave={(amount) => policy.mutate({ amount })}
+        onReservationChange={(reservationCents) => policy.mutate({ reservationCents })}
+        onUnpricedUsagePolicyChange={(unpricedUsagePolicy) => policy.mutate({ unpricedUsagePolicy })}
+      />
+    </div>
+  );
+}
diff --git a/ui/src/pages/AgentCostsPanel.tsx b/ui/src/pages/AgentCostsPanel.tsx
new file mode 100644
index 00000000000..97fb4cf545e
--- /dev/null
+++ b/ui/src/pages/AgentCostsPanel.tsx
@@ -0,0 +1,120 @@
+import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Coins, DollarSign, PlayCircle, ReceiptText } from "lucide-react";
+import type { CostByAgent, CostByAgentModel } from "@paperclipai/shared";
+import { costsApi } from "../api/costs";
+import { CostAmount } from "../components/CostAmount";
+import { EmptyState } from "../components/EmptyState";
+import { MetricCard } from "../components/MetricCard";
+import { PageSkeleton } from "../components/PageSkeleton";
+import { Button } from "@/components/ui/button";
+import { useDateRange, PRESET_KEYS, PRESET_LABELS } from "../hooks/useDateRange";
+import { queryKeys } from "../lib/queryKeys";
+import { billingTypeDisplayName, formatCents, formatTokens, providerDisplayName } from "../lib/utils";
+
+export function agentCostRow(rows: readonly CostByAgent[] | undefined, agentId: string): CostByAgent | null {
+  return rows?.find((row) => row.agentId === agentId) ?? null;
+}
+
+export function agentModelCostRows(rows: readonly CostByAgentModel[] | undefined, agentId: string): CostByAgentModel[] {
+  return (rows ?? [])
+    .filter((row) => row.agentId === agentId)
+    .sort((a, b) => b.costCents - a.costCents);
+}
+
+export function AgentCostsPanel({ agentId, agentName, companyId }: { agentId: string; agentName: string; companyId: string }) {
+  const { preset, setPreset, customFrom, setCustomFrom, customTo, setCustomTo, from, to, customReady } = useDateRange();
+  const reportFrom = ["custom", "mtd", "ytd"].includes(preset) ? from || undefined : undefined;
+  const reportTo = preset === "custom" ? to || undefined : preset;
+  const spend = useQuery({
+    queryKey: [...queryKeys.costs(companyId, reportFrom, reportTo), "agent", agentId],
+    queryFn: async () => {
+      const [byAgent, byAgentModel] = await Promise.all([
+        costsApi.byAgent(companyId, from || undefined, to || undefined),
+        costsApi.byAgentModel(companyId, from || undefined, to || undefined),
+      ]);
+      return { row: agentCostRow(byAgent, agentId), models: agentModelCostRows(byAgentModel, agentId) };
+    },
+    enabled: customReady,
+    refetchInterval: 30_000,
+  });
+  const row = spend.data?.row ?? null;
+  const models = spend.data?.models ?? [];
+  const totalTokens = useMemo(
+    () => (row ? row.inputTokens + row.cachedInputTokens + row.outputTokens : 0),
+    [row],
+  );
+
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-wrap items-center gap-2" role="group" aria-label="Cost period">
+        {PRESET_KEYS.map((key) => (
+          <Button key={key} variant={preset === key ? "secondary" : "ghost"} size="sm" onClick={() => setPreset(key)} aria-pressed={preset === key}>
+            {PRESET_LABELS[key]}
+          </Button>
+        ))}
+      </div>
+      {preset === "custom" ? (
+        <div className="flex flex-wrap items-center gap-2 rounded-lg border border-border p-3">
+          <input type="date" aria-label="From" value={customFrom} onChange={(event) => setCustomFrom(event.target.value)} className="h-9 rounded-md border border-input bg-background px-3 text-sm text-foreground" />
+          <span className="text-sm text-muted-foreground">to</span>
+          <input type="date" aria-label="To" value={customTo} onChange={(event) => setCustomTo(event.target.value)} className="h-9 rounded-md border border-input bg-background px-3 text-sm text-foreground" />
+        </div>
+      ) : null}
+      {!customReady ? (
+        <p className="text-sm text-muted-foreground">Select a start and end date to load data.</p>
+      ) : spend.isLoading ? (
+        <PageSkeleton variant="costs" />
+      ) : spend.error && !spend.data ? (
+        <p role="alert" className="text-sm text-destructive">{agentName}'s costs could not be loaded. Please try again shortly.</p>
+      ) : !row ? (
+        <EmptyState icon={DollarSign} message={`No cost events for ${agentName} in this period.`} />
+      ) : (
+        <>
+          <div className="grid gap-3 sm:grid-cols-3">
+            <MetricCard appearance="card" icon={ReceiptText} value={formatCents(row.costCents)} label="Spend" description={`${row.eventCount} ledger events`} />
+            <MetricCard appearance="card" icon={Coins} value={formatTokens(totalTokens)} label="Tokens" description={`in ${formatTokens(row.inputTokens + row.cachedInputTokens)} (${formatTokens(row.cachedInputTokens)} cached) · out ${formatTokens(row.outputTokens)}`} />
+            <MetricCard appearance="card" icon={PlayCircle} value={row.apiRunCount + row.subscriptionRunCount} label="Runs" description={`${row.apiRunCount} api · ${row.subscriptionRunCount} subscription`} />
+          </div>
+          <section className="space-y-3" aria-labelledby="agent-cost-models-heading">
+            <h3 id="agent-cost-models-heading" className="text-sm font-medium text-foreground">By model</h3>
+            {models.length === 0 ? (
+              <p className="text-sm text-muted-foreground">No model breakdown for this period.</p>
+            ) : (
+              <ul className="divide-y divide-border rounded-lg border border-border">
+                {models.map((model) => {
+                  const share = row.costCents > 0 ? Math.round((model.costCents / row.costCents) * 100) : 0;
+                  return (
+                    <li key={`${model.provider}:${model.model}:${model.billingType}`} className="flex flex-col gap-2 px-4 py-3 text-sm sm:flex-row sm:items-start sm:justify-between">
+                      <div className="min-w-0">
+                        <div className="truncate text-foreground">
+                          {providerDisplayName(model.provider)}
+                          <span className="mx-1 text-muted-foreground">/</span>
+                          <span className="font-mono">{model.model}</span>
+                        </div>
+                        <div className="truncate text-xs text-muted-foreground">
+                          {providerDisplayName(model.biller)} · {billingTypeDisplayName(model.billingType)}
+                        </div>
+                      </div>
+                      <div className="text-right tabular-nums">
+                        <CostAmount
+                          costCents={model.costCents}
+                          eventCount={model.eventCount}
+                          estimatedEventCount={model.estimatedEventCount}
+                          suffix={<span className="ml-1 font-normal text-muted-foreground">({share}%)</span>}
+                        />
+                        <div className="text-xs text-muted-foreground">
+                          {formatTokens(model.inputTokens + model.cachedInputTokens + model.outputTokens)} tok
+                        </div>
+                      </div>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </section>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/ui/src/pages/AgentDetail.instructions.test.tsx b/ui/src/pages/AgentDetail.instructions.test.tsx
index 7fe9ba0daf3..4bad6b9728a 100644
--- a/ui/src/pages/AgentDetail.instructions.test.tsx
+++ b/ui/src/pages/AgentDetail.instructions.test.tsx
@@ -293,14 +293,17 @@ describe("PromptsTab instruction editor", () => {
     await flushReact();
   }
 
-  async function selectInstructionMode(mode: "Read" | "Edit" | "Raw") {
-    await act(async () => {
-      buttonByText(container, mode.toLowerCase()).click();
-    });
+  async function selectInstructionMode(mode: "Edit" | "Raw") {
+    const editing = Boolean(container.querySelector('button[aria-pressed="true"][aria-label^="Stop editing"]'));
+    if ((mode === "Edit") !== editing) {
+      await act(async () => {
+        container.querySelector<HTMLButtonElement>(mode === "Edit" ? 'button[aria-label^="Edit "]' : 'button[aria-label^="Stop editing"]')!.click();
+      });
+    }
     await flushReact();
   }
 
-  it("uses server markdown metadata for extensionless files and saves MarkdownEditor drafts", async () => {
+  it("shows extensionless Markdown files as raw text and saves the edited draft", async () => {
     const summary = makeSummary("AGENTS", "AGENTS", {
       language: "markdown",
       markdown: true,
@@ -311,22 +314,18 @@ describe("PromptsTab instruction editor", () => {
     );
 
     await waitFor(() => {
-      expect(container.querySelector('[data-testid="markdown-body"]')?.textContent).toBe("# Current");
+      expect(container.querySelector('[data-testid="instructions-raw-source"]')?.textContent?.trim()).toBe("# Current");
     });
-    await selectInstructionMode("Raw");
-    expect(container.querySelector('[data-testid="instructions-raw-source"]')?.textContent?.trim()).toBe("# Current");
+    expect(container.querySelector('[data-testid="markdown-body"]')).toBeNull();
     await selectInstructionMode("Edit");
 
     const editor = await waitFor(() => {
-      const candidate = container.querySelector<HTMLTextAreaElement>('[data-testid="markdown-editor"]');
+      const candidate = container.querySelector<HTMLTextAreaElement>('textarea[placeholder="File contents"]');
       expect(candidate).not.toBeNull();
       return candidate!;
     });
-    expect(markdownEditorRenderMock).toHaveBeenLastCalledWith(expect.objectContaining({
-      contentClassName: expect.not.stringContaining("font-mono"),
-      hasImageUploadHandler: true,
-      value: "# Current",
-    }));
+    expect(editor.value).toBe("# Current");
+    expect(markdownEditorRenderMock).not.toHaveBeenCalled();
 
     await act(async () => {
       editor.dispatchEvent(new MouseEvent("pointerdown", { bubbles: true }));
@@ -359,7 +358,7 @@ describe("PromptsTab instruction editor", () => {
     await waitFor(() => expect(buttonByText(container, "Review preserved edits")).toBeDefined());
     await act(async () => { buttonByText(container, "Review preserved edits").click(); });
     const editor = await waitFor(() => {
-      const element = container.querySelector<HTMLTextAreaElement>('[data-testid="markdown-editor"]');
+      const element = container.querySelector<HTMLTextAreaElement>('textarea[placeholder="File contents"]');
       expect(element?.value).toBe("preserved edit"); return element!;
     });
     mockAgentsApi.resolveInstructionCandidate.mockRejectedValue(new Error("Instructions changed since the base revision"));
@@ -456,7 +455,7 @@ describe("PromptsTab instruction editor", () => {
 
     // Choosing to edit and paste into the current entry is a separate ordinary save.
     await selectInstructionMode("Edit");
-    const editor = container.querySelector<HTMLTextAreaElement>('[data-testid="markdown-editor"]')!;
+    const editor = container.querySelector<HTMLTextAreaElement>('textarea[placeholder="File contents"]')!;
     expect(editor.value).toBe("Current instructions");
     await act(async () => { editor.dispatchEvent(new MouseEvent("pointerdown", { bubbles: true })); setNativeValue(editor, preserved); });
     await waitFor(() => expect(saveAction).toEqual(expect.any(Function)));
@@ -471,7 +470,7 @@ describe("PromptsTab instruction editor", () => {
     await renderPromptsTab(makeBundle("AGENTS.md", [summary]), { "AGENTS.md": makeDetail(summary, "original", { revision }) });
     mockAgentsApi.saveInstructionsFile.mockRejectedValue(new Error("Instructions changed since the base revision"));
     await selectInstructionMode("Edit");
-    const editor = container.querySelector<HTMLTextAreaElement>('[data-testid="markdown-editor"]')!;
+    const editor = container.querySelector<HTMLTextAreaElement>('textarea[placeholder="File contents"]')!;
     await act(async () => { editor.dispatchEvent(new MouseEvent("pointerdown", { bubbles: true })); setNativeValue(editor, "my unsaved edit"); });
     await waitFor(() => expect(saveAction).toEqual(expect.any(Function)));
     await act(async () => { saveAction?.(); });
@@ -496,34 +495,6 @@ describe("PromptsTab instruction editor", () => {
     await waitFor(() => expect(mockAgentsApi.restoreInstructions).toHaveBeenCalledWith("agent-1", { path: "AGENTS.md", revisionId: "old-revision", baseRevisionId: "current-1" }, "company-1"));
   });
 
-  it("ignores rich-editor mount normalization until the user interacts", async () => {
-    const summary = makeSummary("AGENTS.md", "AGENTS.md");
-    const onDirtyChange = vi.fn();
-    await renderPromptsTab(
-      makeBundle("AGENTS.md", [summary]),
-      { "AGENTS.md": makeDetail(summary, "# Current") },
-      { onDirtyChange },
-    );
-    await selectInstructionMode("Edit");
-
-    const editorProps = await waitFor(() => {
-      const latest = markdownEditorRenderMock.mock.calls.at(-1)?.[0] as
-        | { onChange?: (value: string) => void }
-        | undefined;
-      expect(latest?.onChange).toEqual(expect.any(Function));
-      return latest!;
-    });
-
-    await act(async () => {
-      editorProps.onChange?.("# Current\n");
-    });
-    await flushReact();
-
-    expect(onDirtyChange).not.toHaveBeenCalledWith(true);
-    expect(saveAction).toBeNull();
-    expect(mockAgentsApi.saveInstructionsFile).not.toHaveBeenCalled();
-  });
-
   it("releases dirty state and save controls when the instructions tab unmounts", async () => {
     const summary = makeSummary("AGENTS.md", "AGENTS.md");
     const onDirtyChange = vi.fn();
@@ -542,7 +513,7 @@ describe("PromptsTab instruction editor", () => {
     await selectInstructionMode("Edit");
 
     const editor = await waitFor(() => {
-      const candidate = container.querySelector<HTMLTextAreaElement>('[data-testid="markdown-editor"]');
+      const candidate = container.querySelector<HTMLTextAreaElement>('textarea[placeholder="File contents"]');
       expect(candidate).not.toBeNull();
       return candidate!;
     });
@@ -567,7 +538,44 @@ describe("PromptsTab instruction editor", () => {
     expect(cancelAction).toBeNull();
   });
 
-  it("uses the Markdown editor for pending new .md files before server metadata exists", async () => {
+  it("adopts a loaded external profile instead of keeping the old bundle as unsaved changes", async () => {
+    const managed = makeSummary("AGENTS.md", "AGENTS.md");
+    const loaded = makeSummary("SOUL.md", "SOUL.md");
+    const onDirtyChange = vi.fn();
+    await renderPromptsTab(
+      makeBundle("AGENTS.md", [managed]),
+      {
+        "AGENTS.md": makeDetail(managed, "# Managed"),
+        "SOUL.md": makeDetail(loaded, "# Loaded profile"),
+      },
+      { onDirtyChange },
+    );
+    mockAgentsApi.updateInstructionsBundle.mockImplementation(async () => {
+      mockAgentsApi.instructionsBundle.mockResolvedValue(makeBundle("SOUL.md", [loaded], {
+        mode: "external",
+        rootPath: "/srv/prompts/atlas",
+        resolvedEntryPath: "/srv/prompts/atlas/SOUL.md",
+      }));
+      return {};
+    });
+
+    await act(async () => buttonByText(container, "Advanced settings").click());
+    const panel = container.querySelector<HTMLElement>('[aria-label="External management"]')!;
+    const [rootInput, entryInput] = Array.from(panel.querySelectorAll("input"));
+    await act(async () => setNativeValue(rootInput, "/srv/prompts/atlas"));
+    await act(async () => setNativeValue(entryInput, "SOUL.md"));
+    await act(async () => buttonByText(container, "Load profile").click());
+
+    await waitFor(() => {
+      expect(panel.querySelector('[role="status"]')?.textContent).toContain("Loaded SOUL.md from /srv/prompts/atlas");
+      expect(container.querySelector('[data-testid="instructions-raw-source"]')?.textContent?.trim()).toBe("# Loaded profile");
+    });
+    expect(mockAgentsApi.updateInstructionsBundle).toHaveBeenCalledTimes(1);
+    expect(onDirtyChange).toHaveBeenLastCalledWith(false);
+    expect(saveAction).toBeNull();
+  });
+
+  it("edits pending new files as raw text before server metadata exists", async () => {
     const summary = makeSummary("settings.json", "settings.json", {
       language: "json",
       markdown: false,
@@ -583,7 +591,7 @@ describe("PromptsTab instruction editor", () => {
     });
 
     await act(async () => {
-      buttonByText(container, "+").click();
+      container.querySelector<HTMLButtonElement>('button[aria-label="Add agent file"]')!.click();
     });
     await flushReact();
     const input = container.querySelector<HTMLInputElement>('input[placeholder="TOOLS.md"]');
@@ -596,12 +604,13 @@ describe("PromptsTab instruction editor", () => {
 
     await selectInstructionMode("Edit");
     await waitFor(() => {
-      expect(container.querySelector('[data-testid="markdown-editor"]')).not.toBeNull();
+      expect(container.querySelector<HTMLTextAreaElement>('textarea[placeholder="File contents"]')?.value).toBe("");
     });
+    expect(markdownEditorRenderMock).not.toHaveBeenCalled();
     expect(mockAgentsApi.instructionsFile).not.toHaveBeenCalledWith("agent-1", "notes.md", "company-1");
   });
 
-  it("falls back to extension detection for existing .md files when metadata is missing", async () => {
+  it("edits .md files without Markdown metadata as raw text", async () => {
     const summary = makeSummary("FALLBACK.md", "FALLBACK.md", {
       language: "text",
       markdown: undefined,
@@ -613,10 +622,7 @@ describe("PromptsTab instruction editor", () => {
 
     await selectInstructionMode("Edit");
     await waitFor(() => {
-      expect(container.querySelector("[data-testid=\"markdown-editor\"]")).not.toBeNull();
-      expect(markdownEditorRenderMock).toHaveBeenLastCalledWith(expect.objectContaining({
-        value: "# Fallback",
-      }));
+      expect(container.querySelector<HTMLTextAreaElement>('textarea[placeholder="File contents"]')?.value).toBe("# Fallback");
     });
   });
 
@@ -632,7 +638,6 @@ describe("PromptsTab instruction editor", () => {
 
     await selectInstructionMode("Edit");
     await waitFor(() => {
-      expect(container.querySelector('[data-testid="markdown-editor"]')).toBeNull();
       expect(container.querySelector<HTMLTextAreaElement>('textarea[placeholder="File contents"]')?.value).toBe("raw instructions");
     });
   });
diff --git a/ui/src/pages/AgentDetail.progress.test.ts b/ui/src/pages/AgentDetail.progress.test.ts
index c0d109f673c..317161fdba2 100644
--- a/ui/src/pages/AgentDetail.progress.test.ts
+++ b/ui/src/pages/AgentDetail.progress.test.ts
@@ -18,7 +18,7 @@ import {
 
 describe("agent detail tabs", () => {
   it("exposes Secrets as its own route-backed tab", () => {
-    expect(AGENT_DETAIL_TABS.map((tab) => tab.label)).toContain("Secrets");
+    expect(AGENT_DETAIL_TABS.map((tab) => tab.label)).toContain("Secrets & variables");
     expect(parseAgentDetailView("secrets")).toBe("secrets");
   });
 
diff --git a/ui/src/pages/AgentDetail.tsx b/ui/src/pages/AgentDetail.tsx
index c0355d59429..f8093cbc2cb 100644
--- a/ui/src/pages/AgentDetail.tsx
+++ b/ui/src/pages/AgentDetail.tsx
@@ -1,13 +1,13 @@
 import { useSelectedHeartbeatRun } from "../hooks/useSelectedHeartbeatRun";
 import { grokBotApi } from "@/api/grokBot";
 import { GrokBotWorkSummary } from "@/components/GrokBotWorkSummary";
-import { PrimaryAgentIndicator, SetPrimaryAgentButton } from "@/components/primary-agent/PrimaryAgentPresentation";
+import { PrimaryAgentCrownButton } from "@/components/primary-agent/PrimaryAgentPresentation";
 import { AiConnectionPoolRunDetails } from "@/components/ai-connections/AiConnectionPoolRunDetails";
 import { AgentConnectionInstructions } from "@/features/connections/ConnectionInstructions";
 import type { AgentInstructionCandidate, AgentInstructionsBundle } from "@paperclipai/shared";
 import { InstructionHistory } from "../components/InstructionHistory";
 import { AgentCharacter } from "../components/AgentCharacter";
-import { characterStateForAgent } from "@paperclipai/shared";
+import { characterStateForAgent, HEARTBEAT_RUN_LIST_DEFAULT_LIMIT } from "@paperclipai/shared";
 import { lazy, Suspense, useCallback, useEffect, useMemo, useState, useRef } from "react";
 import { useParams, useNavigate, useLocation, Link, Navigate, useBeforeUnload, type NavigateFunction } from "@/lib/router";
 import { useQuery, useMutation, useQueryClient, type QueryClient } from "@tanstack/react-query";
@@ -65,7 +65,7 @@ import { ScrollToBottom } from "../components/ScrollToBottom";
 import { SourceResolvedFoldCallout } from "../components/SourceResolvedFoldCallout";
 import { SourceResolvedFoldBadge } from "../components/SourceResolvedFoldBadge";
 import { readSourceResolvedWatchdogFold } from "../lib/source-resolved-watchdog-fold";
-import { formatDate, relativeTime, formatTokens, visibleRunCostUsd, visibleRunTokenTotal, hasUnavailableProviderAccounting, supportsRawProviderTrace } from "../lib/utils";
+import { formatCents, formatDate, relativeTime, formatTokens, visibleRunCostUsd, visibleRunTokenTotal, hasUnavailableProviderAccounting, supportsRawProviderTrace } from "../lib/utils";
 import { cn } from "../lib/utils";
 import { RunRetryDetails } from "../components/RunRetryDetails";
 import { Button } from "@/components/ui/button";
@@ -93,6 +93,13 @@ import {
   HelpCircle,
   FolderOpen,
   AlertTriangle,
+  History as HistoryIcon,
+  Activity as ActivityIcon,
+  PlayCircle,
+  ReceiptText,
+  Gauge,
+  Pencil,
+  Trash2,
 } from "lucide-react";
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -120,6 +127,26 @@ import {
 } from "../components/ProviderTraceStatusBadge";
 import { buildPermissionsForTrustPreset, getTrustPreset } from "../lib/trust-policy-ui";
 import { agentRouteRef } from "../lib/utils";
+import { syncAgentRouteAfterRename } from "./agent-detail/agent-route";
+import { InstructionsBundleSettings } from "./agent-detail/InstructionsBundleSettings";
+import { AgentAllowedConnectors } from "./agent-detail/AgentAllowedConnectors";
+import { AgentAuditTab } from "./AgentAuditTab";
+import { AgentDirectReports } from "./agent-detail/AgentDirectReports";
+import { AgentChip, AgentMetricTile, AgentPanel, AgentSectionHeading } from "../components/agent-detail/AgentPanels";
+import { AgentHistoryDialog } from "./agent-detail/AgentHistoryDialog";
+import { countSince, formatWindowCount } from "./agent-detail/overview-counts";
+import { InlineEditor } from "../components/InlineEditor";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+export { syncAgentRouteAfterRename };
 import { humanAgentCreatorUserId, resolveAgentCreatorLabel } from "../lib/agent-creator";
 import {
   isStarred,
@@ -131,8 +158,11 @@ import { Badge } from "@/components/ui/badge";
 import {
   AGENT_DETAIL_NAVIGATION,
   agentDetailHref,
+  agentDetailSegment,
+  agentDetailViewLabel,
   agentLegacyAuditSection,
   agentScopedAuditHref,
+  isAgentAuditView,
   parseAgentDetailView,
   type AgentDetailView,
 } from "./agent-detail-navigation";
@@ -290,6 +320,28 @@ export function runDetailRefetchIntervalMs(status: HeartbeatRun["status"]): 5000
   return false;
 }
 
+const UNTITLED_AGENT_VIEWS: ReadonlySet<AgentDetailView> = new Set(["overview", "instructions", "budgets"]);
+const OVERVIEW_ACTIVITY_LIMIT = 200;
+
+function agentViewDescription(view: AgentDetailView, name: string): string | null {
+  switch (view) {
+    case "runtime":
+      return `How ${name} runs: harness, model and environment.`;
+    case "secrets":
+      return "Secrets this agent can reach. Values are never shown here.";
+    case "permissions":
+      return `What ${name} may do without asking, and where.`;
+    case "activity":
+      return `Everything ${name} did and everything done to ${name}.`;
+    case "runs":
+      return `Every execution of ${name}, newest first.`;
+    case "costs":
+      return `What ${name} spent, by model.`;
+    default:
+      return null;
+  }
+}
+
 export function AgentDetail() {
   const { companyPrefix, agentId, tab: urlTab, runId: urlRunId } = useParams<{
     companyPrefix?: string;
@@ -326,6 +378,20 @@ export function AgentDetail() {
   const shouldLoadHeartbeats = needsOverviewData || needsRunData;
   const [configDirty, setConfigDirty] = useState(false);
   const [configSaving, setConfigSaving] = useState(false);
+  const [configJustSaved, setConfigJustSaved] = useState(false);
+  const [pendingLeave, setPendingLeave] = useState<HTMLAnchorElement | null>(null);
+  const leaveBypassRef = useRef(false);
+  const configWasSavingRef = useRef(false);
+  useEffect(() => {
+    if (configWasSavingRef.current && !configSaving && !configDirty) setConfigJustSaved(true);
+    configWasSavingRef.current = configSaving;
+  }, [configSaving, configDirty]);
+  useEffect(() => {
+    if (configDirty) setConfigJustSaved(false);
+  }, [configDirty]);
+  useEffect(() => {
+    setConfigJustSaved(false);
+  }, [activeView]);
   const saveConfigActionRef = useRef<(() => void) | null>(null);
   const cancelConfigActionRef = useRef<(() => void) | null>(null);
   const { isMobile } = useSidebar();
@@ -467,7 +533,7 @@ export function AgentDetail() {
   const { data: allAgents } = useQuery({
     queryKey: queryKeys.agents.list(resolvedCompanyId!),
     queryFn: () => agentsApi.list(resolvedCompanyId!),
-    enabled: !!resolvedCompanyId && needsOverviewData,
+    enabled: !!resolvedCompanyId,
   });
 
   const { data: skillSnapshot } = useQuery({
@@ -487,6 +553,32 @@ export function AgentDetail() {
     [allIssues],
   );
   const reportsToAgent = (allAgents ?? []).find((a) => a.id === agent?.reportsTo);
+  const [historyOpen, setHistoryOpen] = useState(false);
+  const headerUpdate = useMutation({
+    mutationFn: ({ target, patch }: { target: AgentDetailRecord; patch: Record<string, unknown> }) =>
+      agentsApi.update(target.id, patch, resolvedCompanyId ?? undefined),
+    onSuccess: (updated, { target }) => {
+      if (resolvedCompanyId) queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(resolvedCompanyId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.agents.configRevisions(target.id) });
+      if (!syncAgentRouteAfterRename(queryClient, navigate, target, updated, urlTab ?? "overview")) {
+        queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(target.id) });
+        queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agentRouteRef(target)) });
+      }
+    },
+  });
+  const saveHeaderField = async (patch: { name?: string; title?: string | null }) => {
+    if (!agent) return;
+    if (configDirty || configSaving) {
+      setActionError(`Save or discard your unsaved changes before you change the ${patch.name === undefined ? "title" : "name"}.`);
+      return;
+    }
+    setActionError(null);
+    try {
+      await headerUpdate.mutateAsync({ target: agent, patch });
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : "Could not save that change");
+    }
+  };
   const directReports = (allAgents ?? []).filter((a) => a.reportsTo === agent?.id && a.status !== "terminated");
   const overviewSkillNames = useMemo(() => {
     const namesByKey = new Map((overviewCompanySkills ?? []).map((skill) => [skill.key, skill.name]));
@@ -506,13 +598,12 @@ export function AgentDetail() {
       }
       return;
     }
-    if (legacyAuditSection) return;
     const canonicalTab = activeView === "run-detail" ? "overview" : activeView;
-    if (routeAgentRef !== canonicalAgentRef || urlTab !== canonicalTab) {
+    if (routeAgentRef !== canonicalAgentRef || urlTab !== agentDetailSegment(canonicalTab)) {
       navigate(`${agentDetailHref(canonicalAgentRef, canonicalTab)}${location.search}`, { replace: true });
       return;
     }
-  }, [agent, routeAgentRef, canonicalAgentRef, urlRunId, urlTab, activeView, configSaving, configDirty, legacyAuditSection, navigate, location.search]);
+  }, [agent, routeAgentRef, canonicalAgentRef, urlRunId, urlTab, activeView, configSaving, configDirty, navigate, location.search]);
 
   useEffect(() => {
     if (!agent?.companyId || agent.companyId === selectedCompanyId) return;
@@ -588,13 +679,10 @@ export function AgentDetail() {
     } else {
       crumbs.push({ label: agentName, href: agentDetailHref(canonicalAgentRef) });
       if (urlRunId) {
-        crumbs.push({ label: "Runs", href: agent?.id ? agentScopedAuditHref(agent.id, "runs") : undefined });
+        crumbs.push({ label: "Runs", href: agentDetailHref(canonicalAgentRef, "runs") });
         crumbs.push({ label: `Run ${urlRunId.slice(0, 8)}` });
       } else {
-        const item = AGENT_DETAIL_NAVIGATION
-          .flatMap((section) => section.items)
-          .find((candidate) => candidate.value === activeView);
-        crumbs.push({ label: item?.label ?? "Overview" });
+        crumbs.push({ label: agentDetailViewLabel(activeView === "run-detail" ? "overview" : activeView) });
       }
     }
     setBreadcrumbs(crumbs);
@@ -653,14 +741,16 @@ export function AgentDetail() {
       ) {
         return;
       }
-      if (prepareAgentNavigation()) return;
+      if (leaveBypassRef.current) return;
       event.preventDefault();
       event.stopPropagation();
+      if (activeView === "advanced" && configSaving) return;
+      setPendingLeave(anchor);
     }
 
     document.addEventListener("click", handleDocumentClick, true);
     return () => document.removeEventListener("click", handleDocumentClick, true);
-  }, [configDirty, prepareAgentNavigation]);
+  }, [activeView, configDirty, configSaving]);
 
   useEffect(() => {
     if (!configDirty) return;
@@ -696,9 +786,6 @@ export function AgentDetail() {
     return <QueryErrorState size="page" error={error} action="load this agent" onRetry={agentView.retry} retrying={agentView.isFetching} />;
   }
   if (!agent) return null;
-  if (!urlRunId && legacyAuditSection) {
-    return <Navigate to={agentScopedAuditHref(agent.id, legacyAuditSection)} replace />;
-  }
   if (!urlRunId && !urlTab) {
     return <Navigate to={agentDetailHref(canonicalAgentRef)} replace />;
   }
@@ -786,80 +873,124 @@ export function AgentDetail() {
         </div>
       ) : null}
       {/* Header */}
-      <header className="flex flex-wrap items-center justify-between gap-5 border-b border-border pb-6">
-        <div className="flex min-w-0 items-center gap-4">
-          <div role="img" aria-label={`${agent.name} avatar`} className="shrink-0">
-            <AgentCharacter agent={agent} state={characterStateForAgent(currentAgent.status)} size={96} trackingScope="page" />
-          </div>
-          <div className="min-w-0 space-y-1">
-            <div className="flex items-center gap-2"><h1 className="truncate text-2xl font-semibold tracking-tight">{agent.name}</h1><PrimaryAgentIndicator agentId={agent.id} companyId={agent.companyId} /></div>
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-              {agent.adapterType === "claude_local" || agent.adapterType === "codex_local"
-                ? <img src={`/brands/${agent.adapterType === "claude_local" ? "claude" : "codex"}-color.svg`} className="size-4" alt="" />
-                : null}
-              <span>{getAdapterDisplay(agentDisplayAdapterType(agent)).label}</span><span>·</span>
-              <span>{agent.title || roleLabels[agent.role] || agent.role}</span>
-            </div>
-            <AgentLifecycleStatus agent={currentAgent} refreshError={lifecycle.isError} onRetry={() => agentAction.mutate("retryLifecycle")} retryPending={agentAction.isPending} />
-            <SetPrimaryAgentButton agent={agent} />
-          </div>
+      <header className="flex items-center gap-4">
+        <div role="img" aria-label={`${agent.name} avatar`} className="shrink-0" style={{ zoom: "var(--agent-detail-portrait-zoom)" }}>
+          <AgentCharacter agent={agent} state={characterStateForAgent(currentAgent.status)} size={96} trackingScope="page" />
         </div>
-        <div className="flex flex-wrap items-center gap-2">
-          <StarToggle
-            size="button"
-            starred={agentStarred}
-            pending={agentStarPending}
-            resourceName={agent.name}
-            onToggle={(next) => membershipMutation.mutate({
-              resourceType: "agent",
-              resourceId: agent.id,
-              resourceName: agent.name,
-              starred: next,
-            })}
-          />
-          <AgentActionButtons
-            agent={currentAgent}
-            companyId={resolvedCompanyId}
-            assignLabel="Assign Task"
-            showStatus={false}
-            actionsDisabled={agentAction.isPending || (activeView === "advanced" && configSaving)}
-            workActionsDisabled={hasInvalidOrgChain}
-            workActionsDisabledReason="Repair this agent's reporting chain before assigning tasks or starting runs"
-            hasPendingNavigationChanges={configDirty}
-            onBeforeNavigate={prepareAgentNavigation}
-            onActionError={setActionError}
-            onTerminateSuccess={() => navigate("/agents/all", { replace: true })}
-            hideTerminate={Boolean(builtInState)}
-            pauseConfirm={
-              builtInState
-                ? {
-                    title: `Pause the ${builtInState.definition.displayName}?`,
-                    description: (
-                      <>
-                        {builtInFeatureLabel} depends on this agent. While paused,{" "}
-                        {builtInFeatureLabel.toLowerCase()} generation is skipped and the{" "}
-                        {builtInFeatureLabel} page shows a warning.
-                      </>
-                    ),
-                  }
-                : undefined
-            }
-          >
-            {mobileLiveRun && (
-              <Link
-                to={`/agents/${canonicalAgentRef}/runs/${mobileLiveRun.id}`}
-                className="sm:hidden flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-blue-500/10 hover:bg-blue-500/20 transition-colors no-underline"
-              >
-                <span className="relative flex h-2 w-2">
-                  <span className="animate-pulse absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
-                  <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
-                </span>
-                <span className="text-(length:--text-micro) font-medium text-blue-600 dark:text-blue-400">Live</span>
-              </Link>
-            )}
-          </AgentActionButtons>
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 items-center gap-2">
+            <InlineEditor
+              as="h1"
+              value={agent.name}
+              placeholder="Agent name"
+              className="min-w-0 truncate text-3xl font-semibold leading-9 text-foreground"
+              onSave={(name) => saveHeaderField({ name })}
+            />
+            <PrimaryAgentCrownButton agent={agent} />
+          </div>
+          <div className="mt-1 flex items-center gap-1.5 text-xs leading-4 text-muted-foreground">
+            {agent.adapterType === "claude_local" || agent.adapterType === "codex_local"
+              ? <img src={`/brands/${agent.adapterType === "claude_local" ? "claude" : "codex"}-color.svg`} className="-ml-0.5 size-3.5" alt="" />
+              : null}
+            <span>{getAdapterDisplay(agentDisplayAdapterType(agent)).label}</span>
+          </div>
+          <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-4 text-muted-foreground">
+            <InlineEditor
+              value={agent.title ?? ""}
+              nullable
+              placeholder={roleLabels[agent.role] ?? agent.role}
+              className="text-xs leading-4 text-muted-foreground"
+              onSave={(title) => saveHeaderField({ title: title || null })}
+            />
+            <span aria-hidden>·</span>
+            <span>
+              Reports to{" "}
+              {reportsToAgent ? (
+                <Link className="text-muted-foreground hover:text-foreground" to={agentDetailHref(agentRouteRef(reportsToAgent))}>
+                  {reportsToAgent.name}
+                </Link>
+              ) : (
+                "Board"
+              )}
+            </span>
+          </div>
+          <AgentLifecycleStatus agent={currentAgent} refreshError={lifecycle.isError} onRetry={() => agentAction.mutate("retryLifecycle")} retryPending={agentAction.isPending} />
         </div>
+        <AgentActionButtons
+          agent={currentAgent}
+          companyId={resolvedCompanyId}
+          assignLabel="Assign task"
+          showStatus={false}
+          workActionsInMenu
+          menuItems={[{ label: "Agent history", icon: HistoryIcon, onSelect: () => setHistoryOpen(true) }]}
+          actionsDisabled={agentAction.isPending || (activeView === "advanced" && configSaving)}
+          workActionsDisabled={hasInvalidOrgChain}
+          workActionsDisabledReason="Repair this agent's reporting chain before assigning tasks or starting runs"
+          hasPendingNavigationChanges={configDirty}
+          onBeforeNavigate={prepareAgentNavigation}
+          onActionError={setActionError}
+          onTerminateSuccess={() => navigate("/agents/all", { replace: true })}
+          hideTerminate={Boolean(builtInState)}
+          pauseConfirm={
+            builtInState
+              ? {
+                  title: `Pause the ${builtInState.definition.displayName}?`,
+                  description: (
+                    <>
+                      {builtInFeatureLabel} depends on this agent. While paused,{" "}
+                      {builtInFeatureLabel.toLowerCase()} generation is skipped and the{" "}
+                      {builtInFeatureLabel} page shows a warning.
+                    </>
+                  ),
+                }
+              : undefined
+          }
+        >
+          {mobileLiveRun && (
+            <Link
+              to={`/agents/${canonicalAgentRef}/runs/${mobileLiveRun.id}`}
+              className="sm:hidden flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-blue-500/10 hover:bg-blue-500/20 transition-colors no-underline"
+            >
+              <span className="relative flex h-2 w-2">
+                <span className="animate-pulse absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
+                <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
+              </span>
+              <span className="text-(length:--text-micro) font-medium text-blue-600 dark:text-blue-400">Live</span>
+            </Link>
+          )}
+        </AgentActionButtons>
       </header>
+      <AgentHistoryDialog agent={agent} companyId={resolvedCompanyId ?? undefined} open={historyOpen} onOpenChange={setHistoryOpen} />
+      <AlertDialog open={pendingLeave !== null} onOpenChange={(open) => (open ? undefined : setPendingLeave(null))}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>
+            <AlertDialogDescription>
+              You have unsaved changes to {agent.name}&rsquo;s {activeView === "runtime" ? "harness settings" : activeView === "secrets" ? "secrets and variables" : activeView === "advanced" ? "configuration" : "instructions"}. If you continue, they&rsquo;ll be lost.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="sm:justify-between">
+            <AlertDialogCancel>Keep editing</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-white hover:bg-destructive/90"
+              onClick={() => {
+                const anchor = pendingLeave;
+                setPendingLeave(null);
+                cancelConfigActionRef.current?.();
+                if (!anchor) return;
+                leaveBypassRef.current = true;
+                try {
+                  anchor.click();
+                } finally {
+                  leaveBypassRef.current = false;
+                }
+              }}
+            >
+              Discard changes
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
 
       {builtInState && (
         <InlineBanner
@@ -925,9 +1056,20 @@ export function AgentDetail() {
         </div>
       )}
 
-      {activeView !== "run-detail" && activeView !== "channels" && <h2 className="text-xl font-semibold">{activeView === "secrets" ? "Secrets & variables" : AGENT_DETAIL_NAVIGATION.flatMap(section => section.items).find(item => item.value === activeView)?.label}</h2>}
+      {activeView !== "run-detail" && activeView !== "channels" && !UNTITLED_AGENT_VIEWS.has(activeView) ? (
+        <div className="mb-4 space-y-1">
+          <h2 className="text-lg font-semibold text-foreground">{agentDetailViewLabel(activeView)}</h2>
+          {agentViewDescription(activeView, agent.name) ? (
+            <p className="text-sm text-muted-foreground">{agentViewDescription(activeView, agent.name)}</p>
+          ) : null}
+        </div>
+      ) : null}
 
       {/* View content */}
+      {isAgentAuditView(activeView) && resolvedCompanyId ? (
+        <AgentAuditTab agent={agent} companyId={resolvedCompanyId} section={activeView} />
+      ) : null}
+
       {activeView === "overview" && (
         <AgentOverview
           agent={agent}
@@ -936,6 +1078,7 @@ export function AgentDetail() {
           runtimeState={runtimeState}
           reportsToAgent={reportsToAgent}
           directReportCount={directReports.length}
+          directReports={directReports}
           skillNames={overviewSkillNames}
           agentRouteId={canonicalAgentRef}
         />
@@ -1055,7 +1198,14 @@ export function AgentDetail() {
       )}
 
       {showConfigActionBar && <footer className="sticky bottom-0 z-10 flex flex-wrap items-center justify-between gap-3 border-t border-border bg-background py-4">
-        <p role="status" className="text-xs text-muted-foreground">{configSaving ? "Saving changes…" : configDirty ? "You have unsaved changes." : ""}</p>
+        <p role="status" className="flex items-center gap-2 text-xs text-muted-foreground">
+          {configSaving ? null : configDirty ? (
+            <span aria-hidden className="size-1.5 shrink-0 rounded-full bg-(--agent-detail-dot-unsaved)" />
+          ) : configJustSaved ? (
+            <span aria-hidden className="size-1.5 shrink-0 rounded-full bg-(--agent-detail-dot-saved)" />
+          ) : null}
+          {configSaving ? "Saving changes…" : configDirty ? "Unsaved changes" : configJustSaved ? "Changes saved" : "No unsaved changes"}
+        </p>
         <div className="flex gap-2">
           <Button variant="ghost" disabled={!configDirty || configSaving} onClick={() => cancelConfigActionRef.current?.()}>Discard</Button>
           <Button disabled={!configDirty || configSaving} onClick={() => {Promise.resolve(saveConfigActionRef.current?.()).catch(() => {});}}>{configSaving ? "Saving…" : "Save changes"}</Button>
@@ -1262,11 +1412,8 @@ export function AgentOverview({
   agent,
   runs,
   assignedIssues,
-  runtimeState,
-  reportsToAgent,
-  directReportCount,
+  directReports = [],
   skillNames,
-  agentRouteId,
 }: {
   agent: AgentDetailRecord;
   runs: HeartbeatRun[];
@@ -1274,26 +1421,11 @@ export function AgentOverview({
   runtimeState?: AgentRuntimeState;
   reportsToAgent?: Agent;
   directReportCount: number;
+  directReports?: Agent[];
   skillNames: string[];
   agentRouteId: string;
 }) {
-  const designSandbox = useDesignSandbox();
-  const issuesById = useMemo(() => {
-    const map = new Map<string, (typeof assignedIssues)[number]>();
-    for (const issue of assignedIssues) map.set(issue.id, issue);
-    return map;
-  }, [assignedIssues]);
-  const configuredModel = agent.adapterType === "paperclip_runner" && agent.adapterConfig.provider === "muse"
-    ? "Managed by Muse"
-    : asNonEmptyString(agent.adapterConfig?.model)
-    ?? asNonEmptyString(agent.adapterConfig?.modelName)
-    ?? asNonEmptyString(agent.runtimeConfig?.model)
-    ?? "Adapter default";
-  const lastRun = runs[0] ?? null;
-  const identity = useQuery({
-    queryKey: [...queryKeys.agents.identity(agent.id), lastRun?.id, lastRun?.status],
-    queryFn: () => agentsApi.getIdentity(agent.id, agent.companyId),
-  });
+  const agentRef = agentRouteRef(agent);
   const hasHumanCreator = Boolean(humanAgentCreatorUserId(agent.createdByUserId));
   const userDirectory = useQuery({
     queryKey: queryKeys.access.companyUserDirectory(agent.companyId),
@@ -1301,118 +1433,105 @@ export function AgentOverview({
     enabled: hasHumanCreator,
   });
   const creatorLabel = resolveAgentCreatorLabel(agent.createdByUserId, userDirectory.data?.users);
+  const creatorFailed = hasHumanCreator && queryViewKind(userDirectory) === "error";
+  const activity = useQuery({
+    queryKey: [...queryKeys.activity(agent.companyId), "agent-overview", agent.id],
+    queryFn: () => activityApi.list(agent.companyId, { agentId: agent.id, limit: OVERVIEW_ACTIVITY_LIMIT }),
+  });
+  const now = Date.now();
+  const weekAgo = now - 7 * 24 * 60 * 60 * 1000;
+  const twoDaysAgo = now - 2 * 24 * 60 * 60 * 1000;
+  const activityThisWeek = countSince(activity.data ?? [], weekAgo, OVERVIEW_ACTIVITY_LIMIT);
+  const runsThisWeek = countSince(runs, weekAgo, HEARTBEAT_RUN_LIST_DEFAULT_LIMIT);
+  const recentFailures = countSince(runs, twoDaysAgo, HEARTBEAT_RUN_LIST_DEFAULT_LIMIT, (run) => run.status === "failed");
+  const budget = agent.budgetMonthlyCents ?? 0;
+  const spent = agent.spentMonthlyCents ?? 0;
+  const budgetPercent = budget > 0 ? Math.round((spent / budget) * 100) : null;
   return (
-    <div className="space-y-6">
-      <LatestRunCard runs={runs} agentId={agentRouteId} issuesById={issuesById} />
-
-      <div className="grid gap-4 md:grid-cols-2">
-        <section className="rounded-lg border border-border p-4" aria-labelledby="agent-identity-heading">
-          <div className="mb-4 flex items-center justify-between gap-3">
-            <h3 id="agent-identity-heading" className="text-sm font-medium">Identity</h3>
-            <StatusBadge status={agent.status} />
-          </div>
-          <div className="space-y-3">
-            <SummaryRow label="Role"><span className="text-sm">{roleLabels[agent.role] ?? agent.role}</span></SummaryRow>
-            <SummaryRow label="Title"><span className="text-sm">{agent.title ?? "Not set"}</span></SummaryRow>
-            <SummaryRow label="Reports to">
-              {reportsToAgent ? (
-                <Link className="text-sm hover:underline" to={agentDetailHref(agentRouteRef(reportsToAgent))}>
-                  {reportsToAgent.name}
-                </Link>
-              ) : <span className="text-sm">Board</span>}
-            </SummaryRow>
-            <SummaryRow label="Direct reports"><span className="text-sm tabular-nums">{directReportCount}</span></SummaryRow>
-            {hasHumanCreator && queryViewKind(userDirectory) === "error" ? (
-              <SummaryRow label="Created by"><span className="text-sm text-destructive">Could not load creator</span></SummaryRow>
-            ) : creatorLabel ? (
-              <SummaryRow label="Created by"><span className="text-sm">{creatorLabel}</span></SummaryRow>
-            ) : null}
-            <SummaryRow label="Public key">
-              {identity.isPending || queryViewKind(identity) === "reconnecting" ? <span className="text-sm text-muted-foreground">Loading…</span>
-                : queryViewKind(identity) === "error" ? <span className="text-sm text-muted-foreground">Could not load public key</span>
-                : identity.data ? (
-                  <CopyText text={identity.data.publicKeyPem} ariaLabel="Copy public key" title="Copy public key">
-                    <span className="font-mono text-sm">{identity.data.keyId.slice(0, 19)}…</span>
-                  </CopyText>
-                ) : (
-                  <div className="text-sm">
-                    <div>Not created yet</div>
-                    <div className="text-xs text-muted-foreground">Created automatically on the next managed run</div>
-                  </div>
-                )}
-            </SummaryRow>
-          </div>
-        </section>
-
-        <section className="rounded-lg border border-border p-4" aria-labelledby="agent-runtime-heading">
-          <div className="mb-4 flex items-center justify-between gap-3">
-            <h3 id="agent-runtime-heading" className="text-sm font-medium">Harness / Runtime</h3>
-            <Link className="text-xs text-muted-foreground hover:text-foreground" to={agentDetailHref(agentRouteId, "runtime")}>Configure</Link>
-          </div>
-          <div className="space-y-3">
-            <SummaryRow label="Adapter"><span className="text-sm">{getAdapterDisplay(agentDisplayAdapterType(agent)).label}</span></SummaryRow>
-            {agent.adapterType === "paperclip_runner" && agent.adapterConfig.provider === "grok_bot" ? <><SummaryRow label="Execution"><span className="text-sm">Runs in Grok Bot</span></SummaryRow><SummaryRow label="Usage"><span className="text-sm">Not reported</span></SummaryRow></> : <SummaryRow label="Model"><span className="max-w-64 truncate text-sm font-mono">{configuredModel}</span></SummaryRow>}
-            <SummaryRow label="Session"><span className="max-w-64 truncate text-sm font-mono">{runtimeState?.sessionDisplayId ?? runtimeState?.sessionId ?? "No session"}</span></SummaryRow>
-            <SummaryRow label="Last run">
-              <span className="text-sm">{lastRun ? `${lastRun.status} · ${relativeTime(lastRun.createdAt)}` : "No runs"}</span>
-            </SummaryRow>
-            {agent.adapterType === "paperclip_runner" && agent.adapterConfig.provider === "grok_bot" && <GrokBotWorkSummary companyId={agent.companyId} agentId={agent.id} />}
-          </div>
-        </section>
-
-        <section className="rounded-lg border border-border p-4" aria-labelledby="agent-capabilities-heading">
-          <h3 id="agent-capabilities-heading" className="mb-3 text-sm font-medium">Capabilities</h3>
-          {agent.capabilities?.trim() ? (
-            <MarkdownBody className="text-sm [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">{agent.capabilities}</MarkdownBody>
-          ) : (
-            <p className="text-sm text-muted-foreground">No capability summary has been added.</p>
-          )}
-        </section>
-
-        <section className="rounded-lg border border-border p-4" aria-labelledby="agent-skills-heading">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <h3 id="agent-skills-heading" className="text-sm font-medium">Skills</h3>
-            <Link className="text-xs text-muted-foreground hover:text-foreground" to={agentDetailHref(agentRouteId, "skills")}>Manage</Link>
+    <div className="flex flex-col gap-(--agent-detail-band-gap)">
+      <div className="grid grid-cols-1 gap-(--agent-detail-module-gap) sm:grid-cols-2 lg:grid-cols-4">
+        <AgentMetricTile
+          icon={ActivityIcon}
+          value={activity.isLoading ? "–" : formatWindowCount(activityThisWeek)}
+          label="Activity"
+          description="Events this week"
+          to={agentDetailHref(agentRef, "activity")}
+        />
+        <AgentMetricTile
+          icon={PlayCircle}
+          value={formatWindowCount(runsThisWeek)}
+          label="Runs"
+          description={`${formatWindowCount(recentFailures)} failed in the last 2 days`}
+          to={agentDetailHref(agentRef, "runs")}
+        />
+        <AgentMetricTile
+          icon={ReceiptText}
+          value={formatCents(spent)}
+          label="Costs"
+          description="Month to date"
+          to={agentDetailHref(agentRef, "costs")}
+        />
+        <AgentMetricTile
+          icon={Gauge}
+          value={budgetPercent === null ? "–" : `${budgetPercent}%`}
+          label="Budget used"
+          description={budgetPercent === null ? "No monthly budget set" : `of ${formatCents(budget)} this month`}
+          to={agentDetailHref(agentRef, "budgets")}
+        />
+        <AgentPanel title="Profile" className="min-h-(--agent-detail-tile-min-h) sm:col-span-2" aria-label="Profile">
+          <div className="flex flex-col pb-3">
+            <div className="flex items-center gap-2 px-(--agent-detail-module-inset) py-1.5 text-sm">
+              <span className="text-muted-foreground">{creatorLabel || creatorFailed ? "Created by" : "Created"}</span>
+              {creatorFailed ? (
+                <span className="text-destructive">Could not load creator</span>
+              ) : (
+                <span className="min-w-0 truncate text-foreground">
+                  {creatorLabel ? `${creatorLabel} · ${formatDate(agent.createdAt)}` : formatDate(agent.createdAt)}
+                </span>
+              )}
+            </div>
+            <div className="flex flex-col gap-1.5 px-(--agent-detail-module-inset) py-1.5 text-sm">
+              <span className="text-muted-foreground">Direct reports</span>
+              {directReports.length === 0 ? (
+                <span className="text-foreground">None</span>
+              ) : (
+                <AgentDirectReports reports={directReports} />
+              )}
+            </div>
           </div>
+        </AgentPanel>
+        <AgentPanel
+          title="Skills"
+          meta={<span>{skillNames.length} enabled</span>}
+          className="min-h-(--agent-detail-tile-min-h) sm:col-span-2"
+          aria-label="Skills"
+        >
           {skillNames.length > 0 ? (
-            <div className="flex flex-wrap gap-2">
-              {skillNames.slice(0, 8).map((skill) => <Badge key={skill} variant="secondary">{skill}</Badge>)}
-              {skillNames.length > 8 ? <Badge variant="outline">+{skillNames.length - 8} more</Badge> : null}
+            <div className="flex flex-wrap gap-1.5 px-(--agent-detail-module-inset) pt-1 pb-(--agent-detail-module-inset)">
+              {skillNames.map((name) => (
+                <AgentChip key={name}>{name}</AgentChip>
+              ))}
             </div>
           ) : (
-            <p className="text-sm text-muted-foreground">No skills enabled.</p>
+            <p className="px-(--agent-detail-module-inset) pt-1 pb-(--agent-detail-module-inset) text-sm text-muted-foreground">No skills enabled.</p>
           )}
-        </section>
+        </AgentPanel>
       </div>
 
-      <section className="space-y-3" aria-labelledby="agent-recent-tasks-heading">
-        <div className="flex items-center justify-between">
-          <h3 id="agent-recent-tasks-heading" className="text-sm font-medium">Recent Tasks</h3>
-          <Link
-            to={`/issues?participantAgentId=${agent.id}`}
-            className="text-xs text-muted-foreground hover:text-foreground transition-colors"
-          >
-            See All &rarr;
-          </Link>
-        </div>
+      <section className="flex flex-col gap-3" aria-label="Recent tasks">
+        <AgentSectionHeading
+          title="Recent tasks"
+          action={
+            <Link to={`/issues?participantAgentId=${agent.id}`} className="text-xs text-muted-foreground no-underline transition-colors hover:text-foreground">
+              See all tasks
+            </Link>
+          }
+        />
         {assignedIssues.length === 0 ? (
           <p className="text-sm text-muted-foreground">No recent tasks.</p>
         ) : (
           <div className="overflow-hidden rounded-lg border border-border">
-            {designSandbox ? <TaskSummaryList issues={assignedIssues.slice(0, 6)} /> : assignedIssues.slice(0, 6).map((issue) => (
-              <IssueRow
-                key={issue.id}
-                issue={issue}
-                presentation="task"
-                metadata={<span className="text-xs text-muted-foreground">{relativeTime(issue.updatedAt)}</span>}
-                showDivider
-              />
-            ))}
-            {assignedIssues.length > 6 && (
-              <div className="border-t border-border px-3 py-2 text-center text-xs text-muted-foreground">
-                +{assignedIssues.length - 6} more tasks
-              </div>
-            )}
+            <TaskSummaryList issues={assignedIssues.slice(0, 5)} />
           </div>
         )}
       </section>
@@ -1422,29 +1541,6 @@ export function AgentOverview({
 
 /* ---- Agent Configure Page ---- */
 
-/**
- * Agent detail URLs use a name-derived key, so updates that change the agent's
- * name (a rename or a config-revision rollback) can invalidate the reference
- * currently in the URL. When that happens, refetching the old reference would
- * 404 with "Agent not found". Instead, drop the stale cached queries and
- * replace the URL with the new canonical reference. Returns true when a
- * redirect happened.
- */
-export function syncAgentRouteAfterRename(
-  queryClient: QueryClient,
-  navigate: NavigateFunction,
-  previous: { id: string; urlKey?: string | null; name?: string | null },
-  updated: { id: string; urlKey?: string | null; name?: string | null },
-  tab: string,
-): boolean {
-  const previousRef = agentRouteRef(previous);
-  const nextRef = agentRouteRef(updated);
-  if (nextRef === previousRef) return false;
-  queryClient.removeQueries({ queryKey: queryKeys.agents.detail(previousRef) });
-  navigate(`/agents/${nextRef}/${tab}`, { replace: true });
-  return true;
-}
-
 export function AgentRevisionsTab({
   agent,
   companyId,
@@ -1636,7 +1732,7 @@ export function ConfigurationTab({
             : "Disabled unless explicitly granted.";
 
   return (
-    <div className="agent-settings-form space-y-6">
+    <div className={cn("agent-settings-form", content === "permissions" ? "flex flex-col gap-(--agent-detail-module-gap)" : "space-y-6")}>
       {content !== "permissions" ? <AgentConfigForm
         mode="edit"
         agent={agent}
@@ -1650,15 +1746,18 @@ export function ConfigurationTab({
         hidePromptTemplate={hidePromptTemplate}
         hideInstructionsFile={hideInstructionsFile}
         content={content === "runtime" ? "configuration" : "secrets"}
-        sectionLayout="cards"
+        sectionLayout="panels"
         environmentVariablesPlacement={content === "secrets" ? "secrets" : "configuration"}
         compactTestFeedback
-        sectionOrder={["identity", "adapter", "configuration", "environment", "environment-variables", "run-policy"]}
-        sectionTitles={{ adapter: "Adapter", configuration: "Configuration", identity: "Agent identity" }}
+        sectionOrder={["adapter", "configuration", "environment", "environment-variables"]}
+        hiddenSections={["identity", "run-policy"]}
+        sectionTitles={{ adapter: "", configuration: "", environment: "" }}
         canConfigureProviderTrace={canConfigureProviderTrace}
       /> : null}
 
       {content === "permissions" ? <TrustPresetSection
+        layout="cards"
+        aside={companyId ? <AgentAllowedConnectors agentId={agent.id} companyId={companyId} /> : null}
         projectAccessEditor={<AgentProjectAccessSettings agent={agent} />}
         permissions={agent.permissions}
         disabled={updatePermissions.isPending}
@@ -1682,10 +1781,9 @@ export function ConfigurationTab({
         }
       /> : null}
 
-      {content === "permissions" ? <div>
-        <h3 className="text-sm font-medium mb-3">Permissions</h3>
-        <div className="border border-border rounded-lg p-4 space-y-4">
-          <div className="flex items-center justify-between gap-4 text-sm">
+      {content === "permissions" ? <AgentPanel title="Capabilities" aria-label="Capabilities">
+        <div className="flex flex-col pb-3">
+          <div className="flex min-h-11 items-center justify-between gap-4 px-(--agent-detail-module-inset) py-2 text-sm">
             <div className="space-y-1">
               <div>Can create new agents</div>
               <p className="text-xs text-muted-foreground">
@@ -1704,7 +1802,7 @@ export function ConfigurationTab({
               disabled={updatePermissions.isPending}
             />
           </div>
-          <div className="flex items-center justify-between gap-4 text-sm">
+          <div className="flex min-h-11 items-center justify-between gap-4 px-(--agent-detail-module-inset) py-2 text-sm">
             <div className="space-y-1">
               <div>Can create/import skills</div>
               <p className="text-xs text-muted-foreground">
@@ -1723,7 +1821,7 @@ export function ConfigurationTab({
               disabled={updatePermissions.isPending}
             />
           </div>
-          <div className="flex items-center justify-between gap-4 text-sm">
+          <div className="flex min-h-11 items-center justify-between gap-4 px-(--agent-detail-module-inset) py-2 text-sm">
             <div className="space-y-1">
               <div>Can assign tasks</div>
               <p className="text-xs text-muted-foreground">
@@ -1743,7 +1841,7 @@ export function ConfigurationTab({
             />
           </div>
         </div>
-      </div> : null}
+      </AgentPanel> : null}
     </div>
   );
 }
@@ -1771,7 +1869,7 @@ export function PromptsTab({
   const { selectedCompanyId } = useCompany();
   const { isMobile } = useSidebar();
   const [selectedFile, setSelectedFileState] = useState<string>("AGENTS.md");
-  const [instructionMode, setInstructionMode] = useState<"read" | "edit" | "raw">("read");
+  const [instructionMode, setInstructionMode] = useState<"edit" | "raw">("raw");
   const [showFilePanel, setShowFilePanel] = useState(false);
   const [draft, setDraft] = useState<string | null>(null);
   const draftBaseRevisionRef = useRef<string | null | undefined>(undefined);
@@ -1817,7 +1915,7 @@ export function PromptsTab({
   useEffect(() => {
     editorInteractedRef.current = false;
     setSelectedFile("AGENTS.md");
-    setInstructionMode("read");
+    setInstructionMode("raw");
     setShowFilePanel(false);
     setDraft(null);
     setReadOnlyCandidateRunId(null);
@@ -2238,158 +2336,16 @@ export function PromptsTab({
         Saved instructions affect the next run. Active runs keep the instructions they started with, and instruction changes may start a fresh adapter session.
       </p>}
 
-      <Collapsible defaultOpen={currentMode === "external"}>
-        <CollapsibleTrigger className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors group">
-          <ChevronRight className="h-3 w-3 transition-transform group-data-[state=open]:rotate-90" />
-          Advanced
-        </CollapsibleTrigger>
-        <CollapsibleContent className="pt-4 pb-6">
-          <TooltipProvider>
-            <div className="grid gap-x-6 gap-y-4 md:grid-cols-(--gtc-18)">
-              <label className="space-y-1.5 min-w-0">
-                <span className="text-xs font-medium text-muted-foreground flex items-center gap-1">
-                  Mode
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <HelpCircle className="h-3 w-3 text-muted-foreground cursor-help" />
-                    </TooltipTrigger>
-                    <TooltipContent side="right" sideOffset={4}>
-                      Managed: Paperclip stores and serves the instructions bundle. External: you provide a path on disk where the instructions live.
-                    </TooltipContent>
-                  </Tooltip>
-                </span>
-                <div className="flex gap-2">
-                  <Button
-                    type="button"
-                    size="sm"
-                    variant={currentMode === "managed" ? "default" : "outline"}
-                    onClick={() => {
-                      if (currentMode === "external") {
-                        externalBundleRef.current = {
-                          rootPath: currentRootPath,
-                          entryFile: currentEntryFile,
-                          selectedFile: selectedOrEntryFile,
-                        };
-                      }
-                      const nextEntryFile = currentEntryFile || "AGENTS.md";
-                      setBundleDraft({
-                        mode: "managed",
-                        rootPath: bundle?.managedRootPath ?? currentRootPath,
-                        entryFile: nextEntryFile,
-                      });
-                      setSelectedFile(nextEntryFile);
-                    }}
-                  >
-                    Managed
-                  </Button>
-                  <Button
-                    type="button"
-                    size="sm"
-                    variant={currentMode === "external" ? "default" : "outline"}
-                    onClick={() => {
-                      const externalBundle = externalBundleRef.current;
-                      const nextEntryFile = externalBundle?.entryFile ?? currentEntryFile ?? "AGENTS.md";
-                      setBundleDraft({
-                        mode: "external",
-                        rootPath: externalBundle?.rootPath ?? (bundle?.mode === "external" ? (bundle.rootPath ?? "") : ""),
-                        entryFile: nextEntryFile,
-                      });
-                      setSelectedFile(externalBundle?.selectedFile ?? nextEntryFile);
-                    }}
-                  >
-                    External
-                  </Button>
-                </div>
-              </label>
-              <label className="space-y-1.5 min-w-0">
-                <span className="text-xs font-medium text-muted-foreground flex items-center gap-1">
-                  Root path
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <HelpCircle className="h-3 w-3 text-muted-foreground cursor-help" />
-                    </TooltipTrigger>
-                    <TooltipContent side="right" sideOffset={4}>
-                      The absolute directory on disk where the instructions bundle lives. In managed mode this is set by Paperclip automatically.
-                    </TooltipContent>
-                  </Tooltip>
-                </span>
-                {currentMode === "managed" ? (
-                  <div className="flex items-center gap-1.5 font-mono text-xs text-muted-foreground pt-1.5">
-                    <span className="min-w-0 truncate" title={currentRootPath || undefined}>{currentRootPath || "(managed)"}</span>
-                    {currentRootPath && (
-                      <CopyText text={currentRootPath} className="shrink-0">
-                        <Copy className="h-3.5 w-3.5" />
-                      </CopyText>
-                    )}
-                  </div>
-                ) : (
-                  <div className="flex items-center gap-1.5">
-                    <Input
-                      value={currentRootPath}
-                      onChange={(event) => {
-                        const nextRootPath = event.target.value;
-                        externalBundleRef.current = {
-                          rootPath: nextRootPath,
-                          entryFile: currentEntryFile,
-                          selectedFile: selectedOrEntryFile,
-                        };
-                        setBundleDraft({
-                          mode: "external",
-                          rootPath: nextRootPath,
-                          entryFile: currentEntryFile,
-                        });
-                      }}
-                      className="font-mono text-sm"
-                      placeholder="/absolute/path/to/agent/prompts"
-                    />
-                    {currentRootPath && (
-                      <CopyText text={currentRootPath} className="shrink-0">
-                        <Copy className="h-3.5 w-3.5" />
-                      </CopyText>
-                    )}
-                  </div>
-                )}
-              </label>
-              <label className="space-y-1.5">
-                <span className="text-xs font-medium text-muted-foreground flex items-center gap-1">
-                  Entry file
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <HelpCircle className="h-3 w-3 text-muted-foreground cursor-help" />
-                    </TooltipTrigger>
-                    <TooltipContent side="right" sideOffset={4}>
-                      The main file the agent reads first when loading instructions. Defaults to AGENTS.md.
-                    </TooltipContent>
-                  </Tooltip>
-                </span>
-                <Input
-                  value={currentEntryFile}
-                  onChange={(event) => {
-                    const nextEntryFile = event.target.value || "AGENTS.md";
-                    const nextSelectedFile = selectedOrEntryFile === currentEntryFile
-                      ? nextEntryFile
-                      : selectedOrEntryFile;
-                    if (currentMode === "external") {
-                      externalBundleRef.current = {
-                        rootPath: currentRootPath,
-                        entryFile: nextEntryFile,
-                        selectedFile: nextSelectedFile,
-                      };
-                    }
-                    if (selectedOrEntryFile === currentEntryFile) setSelectedFile(nextEntryFile);
-                    setBundleDraft({
-                      mode: currentMode,
-                      rootPath: currentRootPath,
-                      entryFile: nextEntryFile,
-                    });
-                  }}
-                  className="font-mono text-sm"
-                />
-              </label>
-            </div>
-          </TooltipProvider>
-        </CollapsibleContent>
-      </Collapsible>
+      <InstructionsBundleSettings
+        agentId={agent.id}
+        agentUrlKey={agent.urlKey}
+        companyId={companyId}
+        mode={persistedMode}
+        rootPath={persistedRootPath}
+        entryFile={bundle?.entryFile ?? "AGENTS.md"}
+        blocked={isDirty}
+        onSwitched={() => setBundleDraft(null)}
+      />
 
       <div
         ref={containerRef}
@@ -2400,24 +2356,23 @@ export function PromptsTab({
             : undefined
         }
       >
-        <div className={cn(
-          "min-w-0 w-full border border-border rounded-lg p-3 space-y-3",
+        <div data-agent-tile="" className={cn(
+          "min-w-0 w-full space-y-3 self-start rounded-lg bg-(--agent-detail-tile) px-3 pt-(--agent-detail-module-inset) pb-3",
           isMobile && showFilePanel && "block",
           isMobile && !showFilePanel && "hidden",
         )}>
-          <div className="flex items-center justify-between">
-            <h4 className="text-sm font-medium">Files</h4>
+          <div className="flex items-center justify-between px-2">
+            <h4 className="text-sm font-semibold text-foreground">Files</h4>
             <div className="flex items-center gap-1">
               {!showNewFileInput && (
                 <Button
                   type="button"
-                  size="icon"
-                  variant="outline"
-                  className="h-7 w-7"
+                  size="icon-xs"
+                  variant="ghost"
                   aria-label="Add agent file"
                   onClick={() => setShowNewFileInput(true)}
                 >
-                  +
+                  <Plus className="size-4" />
                 </Button>
               )}
               {isMobile && (
@@ -2495,7 +2450,7 @@ export function PromptsTab({
             })}
             onSelectFile={(filePath) => {
               setSelectedFile(filePath);
-              setInstructionMode("read");
+              setInstructionMode("raw");
               if (!fileOptions.includes(filePath)) setDraft("");
               if (isMobile) setShowFilePanel(false);
             }}
@@ -2536,8 +2491,8 @@ export function PromptsTab({
           />
         )}
 
-        <div className={cn("min-w-0 w-full overflow-hidden border border-border rounded-lg p-4 space-y-3", isMobile && showFilePanel && "hidden")}>
-          <div className="flex items-center justify-between gap-3">
+        <div data-agent-tile="" className={cn("min-w-0 w-full overflow-hidden rounded-lg bg-(--agent-detail-tile)", isMobile && showFilePanel && "hidden")}>
+          <div className="flex items-center justify-between gap-3 px-(--agent-detail-module-inset) pt-(--agent-detail-module-inset) pb-5">
             <div className="flex items-center gap-2 min-w-0">
               {isMobile && (
                 <Button
@@ -2550,8 +2505,11 @@ export function PromptsTab({
                   <FolderOpen className="h-3.5 w-3.5" />
                 </Button>
               )}
-              <div className="min-w-0">
-                <h4 className="text-sm font-medium font-mono truncate">{selectedOrEntryFile}</h4>
+              <div className="flex min-w-0 flex-col gap-1.5">
+                <div className="flex min-w-0 items-center gap-2">
+                  <h4 className="truncate font-mono text-sm font-normal text-foreground">{selectedOrEntryFile}</h4>
+                  <AgentChip>{currentMode === "external" ? "Managed externally" : "Managed by you"}</AgentChip>
+                </div>
                 <p className="text-xs text-muted-foreground">
                   {selectedFileExists
                     ? selectedFileSummary?.deprecated
@@ -2562,37 +2520,38 @@ export function PromptsTab({
               </div>
             </div>
             <div className="flex items-center gap-2">
-              <div className="flex items-center rounded-md border border-border p-0.5" role="group" aria-label="Instruction file view">
-                {(["read", "edit", "raw"] as const).map((mode) => (
-                  <Button
-                    key={mode}
-                    type="button"
-                    size="sm"
-                    variant={instructionMode === mode ? "secondary" : "ghost"}
-                    className="capitalize"
-                    aria-pressed={instructionMode === mode}
-                    onClick={() => setInstructionMode(mode)}
-                  >
-                    {mode}
-                  </Button>
-                ))}
-              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-xs"
+                className={cn("size-8", instructionMode === "edit" && "bg-(--agent-detail-tile-chip) text-foreground")}
+                aria-pressed={instructionMode === "edit"}
+                aria-label={instructionMode === "edit" ? `Stop editing ${selectedOrEntryFile}` : `Edit ${selectedOrEntryFile}`}
+                title={instructionMode === "edit" ? "Stop editing" : "Edit"}
+                disabled={Boolean(selectedFileDetail?.binary)}
+                onClick={() => setInstructionMode(instructionMode === "edit" ? "raw" : "edit")}
+              >
+                <Pencil className="size-4" />
+              </Button>
               {!fileLoading && (
                 <CopyText
                   text={displayValue}
                   ariaLabel="Copy instructions file as markdown"
                   title="Copy as markdown"
                   copiedLabel="Copied"
-                  className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border text-muted-foreground hover:bg-accent hover:text-foreground"
+                  className="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
                 >
-                  <Copy className="h-3.5 w-3.5" />
+                  <Copy className="size-4" />
                 </CopyText>
               )}
               {selectedFileExists && !selectedFileSummary?.deprecated && selectedOrEntryFile !== currentEntryFile && (
                 <Button
                   type="button"
-                  size="sm"
-                  variant="outline"
+                  size="icon-xs"
+                  variant="ghost"
+                  className="size-8"
+                  aria-label={`Delete ${selectedOrEntryFile}`}
+                  title="Delete file"
                   onClick={() => {
                     if (confirm(`Delete ${selectedOrEntryFile}?`)) {
                       deleteFile.mutate(selectedOrEntryFile, {
@@ -2605,12 +2564,14 @@ export function PromptsTab({
                   }}
                   disabled={deleteFile.isPending}
                 >
-                  Delete
+                  <Trash2 className="size-4" />
                 </Button>
               )}
             </div>
           </div>
 
+          <div aria-hidden className="mx-(--agent-detail-module-inset) h-px bg-border" />
+          <div className="space-y-3 px-(--agent-detail-module-inset) pt-4 empty:hidden">
           {currentMode === "managed" && preservedCandidates.length > 0 && (
             <div className="space-y-3">
               <p className="text-sm font-medium">Preserved instruction edits</p>
@@ -2667,74 +2628,38 @@ export function PromptsTab({
               queryClient.invalidateQueries({ queryKey: queryKeys.agents.instructionsBundle(agent.id) });
             }}
           />}
+          </div>
           {selectedFileDetail?.binary ? (
-            <div className="space-y-3 rounded-md border border-border p-4">
+            <div className="space-y-3 px-(--agent-detail-module-inset) py-5">
               <p className="text-sm text-muted-foreground">This file is preserved with the agent directory. Download it to view its contents.</p>
               <a className="text-sm text-primary underline" href={agentsApi.downloadInstructionsFile(agent.id, selectedOrEntryFile, companyId)} download>Download {selectedOrEntryFile}</a>
             </div>
           ) : selectedFileExists && fileLoading && !selectedFileDetail ? (
-            <PromptEditorSkeleton />
-          ) : instructionMode === "read" ? (
-            <div className="min-h-(--sz-420px) rounded-md border border-border bg-background p-4">
-              {displayValue.trim() ? (
-                useMarkdownEditor ? (
-                  <MarkdownBody className="max-w-none text-sm leading-7 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
-                    {displayValue}
-                  </MarkdownBody>
-                ) : (
-                  <pre className="whitespace-pre-wrap break-words font-sans text-sm leading-7">{displayValue}</pre>
-                )
-              ) : (
-                <p className="text-sm text-muted-foreground">This instruction file is empty.</p>
-              )}
+            <div className="px-(--agent-detail-module-inset) py-5">
+              <PromptEditorSkeleton />
             </div>
-          ) : instructionMode === "raw" ? (
-            <pre
-              data-testid="instructions-raw-source"
-              className="min-h-(--sz-420px) overflow-x-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted p-4 font-mono text-sm leading-7"
-            >
-              {displayValue}
-            </pre>
-          ) : useMarkdownEditor ? (
-            <div
-              onBeforeInputCapture={markEditorInteracted}
-              onDropCapture={markEditorInteracted}
-              onInput={markEditorInteracted}
-              onKeyDownCapture={markEditorInteracted}
-              onPasteCapture={markEditorInteracted}
-              onPointerDownCapture={markEditorInteracted}
-            >
-              <MarkdownEditor
-                key={selectedOrEntryFile}
-                value={displayValue}
-                onChange={(value) => {
-                  if (!editorInteractedRef.current) return;
-                  if (draftBaseRevisionRef.current === undefined) draftBaseRevisionRef.current = selectedFileDetail?.revision?.id ?? null;
-                  if (draftBaseHashRef.current === undefined) draftBaseHashRef.current = selectedFileDetail?.contentHash ?? null;
-                  setDraft(value ?? "");
-                }}
-                placeholder="# Agent instructions"
-                className="min-w-0 overflow-hidden"
-                contentClassName="min-h-(--sz-420px) max-w-full break-words text-sm leading-7"
-                imageUploadHandler={async (file) => {
-                  const namespace = `agents/${agent.id}/instructions/${selectedOrEntryFile.replaceAll("/", "-")}`;
-                  const asset = await uploadMarkdownImage.mutateAsync({ file, namespace });
-                  return asset.contentPath;
-                }}
-              />
-            </div>
-          ) : (
+          ) : instructionMode === "edit" ? (
             <textarea
               aria-label="Instruction file editor"
               value={displayValue}
+              spellCheck={false}
               onChange={(event) => {
                 if (draftBaseRevisionRef.current === undefined) draftBaseRevisionRef.current = selectedFileDetail?.revision?.id ?? null;
-                  if (draftBaseHashRef.current === undefined) draftBaseHashRef.current = selectedFileDetail?.contentHash ?? null;
+                if (draftBaseHashRef.current === undefined) draftBaseHashRef.current = selectedFileDetail?.contentHash ?? null;
                 setDraft(event.target.value);
               }}
-              className="min-h-(--sz-420px) w-full min-w-0 rounded-md border border-border bg-transparent px-3 py-2 font-mono text-sm outline-none"
+              className="block min-h-(--sz-420px) w-full field-sizing-content resize-none bg-transparent px-6 py-5 font-mono text-xs leading-5 whitespace-pre-wrap text-foreground outline-none"
               placeholder="File contents"
             />
+          ) : displayValue.trim() ? (
+            <pre
+              data-testid="instructions-raw-source"
+              className="block min-h-(--sz-420px) w-full overflow-x-auto px-6 py-5 font-mono text-xs leading-5 whitespace-pre-wrap break-words text-muted-foreground"
+            >
+              {displayValue}
+            </pre>
+          ) : (
+            <p className="min-h-(--sz-420px) px-6 py-5 text-sm text-muted-foreground">This instruction file is empty.</p>
           )}
         </div>
       </div>
diff --git a/ui/src/pages/AgentOverview.test.tsx b/ui/src/pages/AgentOverview.test.tsx
index d227704ec1d..0ddc3358d77 100644
--- a/ui/src/pages/AgentOverview.test.tsx
+++ b/ui/src/pages/AgentOverview.test.tsx
@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { AgentDetail, AgentRuntimeState, HeartbeatRun, Issue } from "@paperclipai/shared";
 import { describe, expect, it, vi } from "vitest";
 import { AgentOverview } from "./AgentDetail";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { queryKeys } from "../lib/queryKeys";
 
 vi.mock("@/lib/router", async () => {
@@ -22,25 +23,7 @@ vi.mock("../components/MarkdownBody", () => ({
 }));
 
 describe("AgentOverview", () => {
-  it("identifies Muse and shows its provider-managed model even when old model fields remain", () => {
-    const agent = {
-      id: "muse-agent", companyId: "company-1", name: "Muse Researcher", role: "researcher", status: "active",
-      adapterType: "paperclip_runner", adapterConfig: { provider: "muse", model: "old-model" },
-      runtimeConfig: { model: "old-runtime-model" },
-    } as unknown as AgentDetail;
-    const markup = renderToStaticMarkup(
-      <QueryClientProvider client={new QueryClient()}>
-        <AgentOverview agent={agent} runs={[]} assignedIssues={[]} directReportCount={0} skillNames={[]} agentRouteId="muse-agent" />
-      </QueryClientProvider>,
-    );
-    expect(markup).toContain("Muse — Personal agent");
-    expect(markup).toContain("Managed by Muse");
-    expect(markup).not.toContain("Adapter default");
-    expect(markup).not.toContain("old-model");
-    expect(markup).not.toContain("old-runtime-model");
-  });
-
-  it("prioritizes identity, capability, runtime, skills, and tasks without duplicating sidebar Audit links", () => {
+  it("leads with audit cards, then Profile, Skills and Recent tasks", () => {
     const agent = {
       id: "agent-1",
       companyId: "company-1",
@@ -72,6 +55,7 @@ describe("AgentOverview", () => {
 
     const markup = renderToStaticMarkup(
       <QueryClientProvider client={new QueryClient()}>
+        <TooltipProvider>
         <AgentOverview
           agent={agent}
           runs={[] as HeartbeatRun[]}
@@ -81,19 +65,25 @@ describe("AgentOverview", () => {
           skillNames={["Design Guide", "Check PR"]}
           agentRouteId="codexcoder"
         />
+        </TooltipProvider>
       </QueryClientProvider>,
     );
 
-    expect(markup).toContain("Identity");
-    expect(markup).toContain("Capabilities");
-    expect(markup).toContain("Harness / Runtime");
+    for (const label of ["Activity", "Runs", "Costs", "Budget used", "Profile", "Skills", "Recent tasks"]) {
+      expect(markup).toContain(label);
+    }
+    for (const page of ["activity", "runs", "costs", "budgets"]) {
+      expect(markup).toContain(`href="/agents/codexcoder/${page}"`);
+    }
+    expect(markup).toContain("2 enabled");
     expect(markup).toContain("Design Guide");
     expect(markup).toContain("Simplify agent information architecture");
     expect(markup).toContain("PAP-42");
-    expect(markup).not.toContain("agent-audit-links-heading");
+    expect(markup).toContain("See all tasks");
+    expect(markup).not.toContain("Latest Run");
+    expect(markup).not.toContain("Harness / Runtime");
+    expect(markup).not.toContain("Capabilities");
     expect(markup).not.toContain("agentId=agent-1");
-    expect(markup).not.toContain("Run Activity");
-    expect(markup).not.toContain("Tasks by Status");
     expect(markup).not.toContain("Created by");
   });
 
diff --git a/ui/src/pages/agent-detail-navigation.test.ts b/ui/src/pages/agent-detail-navigation.test.ts
index b6b1c8ef4bd..7738b4b9b4b 100644
--- a/ui/src/pages/agent-detail-navigation.test.ts
+++ b/ui/src/pages/agent-detail-navigation.test.ts
@@ -2,26 +2,48 @@ import { describe, expect, it } from "vitest";
 import {
   AGENT_DETAIL_NAVIGATION,
   agentDetailHref,
+  agentDetailViewLabel,
   agentLegacyAuditSection,
+  isAgentAuditView,
   agentScopedAuditHref,
   parseAgentDetailView,
 } from "./agent-detail-navigation";
 
 describe("agent detail navigation", () => {
   it("exposes the complete local information architecture", () => {
+    expect(AGENT_DETAIL_NAVIGATION.map((section) => section.label)).toEqual(["Agent", "Audit"]);
     expect(AGENT_DETAIL_NAVIGATION.flatMap((section) => section.items.map((item) => item.value))).toEqual([
       "overview",
       "instructions",
-      "skills",
       "runtime",
       "secrets",
-      "tools",
-      "channels",
       "permissions",
-      "api-keys",
-      "revisions",
       "advanced",
+      "activity",
+      "runs",
+      "costs",
+      "budgets",
     ]);
+    expect(agentDetailViewLabel("instructions")).toBe("Identity");
+  });
+
+  it("keeps views that left the nav reachable by URL", () => {
+    expect(parseAgentDetailView("skills")).toBe("skills");
+    expect(parseAgentDetailView("tools")).toBe("tools");
+    expect(parseAgentDetailView("channels")).toBe("channels");
+    expect(parseAgentDetailView("api-keys")).toBe("api-keys");
+    expect(parseAgentDetailView("revisions")).toBe("revisions");
+    expect(agentDetailViewLabel("revisions")).toBe("Agent history");
+  });
+
+  it("serves Identity at /identity and the audit pages inside the agent", () => {
+    expect(parseAgentDetailView("identity")).toBe("instructions");
+    expect(agentDetailHref("codie", "instructions")).toBe("/agents/codie/identity");
+    expect(parseAgentDetailView("runs")).toBe("runs");
+    expect(parseAgentDetailView("budget")).toBe("budgets");
+    expect(isAgentAuditView("costs")).toBe(true);
+    expect(isAgentAuditView("runtime")).toBe(false);
+    expect(agentDetailHref("codie", "activity")).toBe("/agents/codie/activity");
   });
 
   it("canonicalizes legacy local paths", () => {
@@ -30,6 +52,7 @@ describe("agent detail navigation", () => {
     expect(parseAgentDetailView("dashboard")).toBe("overview");
     expect(parseAgentDetailView("configuration")).toBe("runtime");
     expect(parseAgentDetailView("prompts")).toBe("instructions");
+    expect(agentDetailHref("codie", "instructions")).toBe("/agents/codie/identity");
     expect(agentDetailHref("codexcoder", "permissions")).toBe("/agents/codexcoder/permissions");
   });
 
diff --git a/ui/src/pages/agent-detail-navigation.ts b/ui/src/pages/agent-detail-navigation.ts
index 48d30e8f676..52c53a55094 100644
--- a/ui/src/pages/agent-detail-navigation.ts
+++ b/ui/src/pages/agent-detail-navigation.ts
@@ -1,5 +1,7 @@
 import { auditSectionHref, type AuditSection } from "./audit/audit-navigation";
 
+export type AgentAuditView = Extract<AuditSection, "activity" | "runs" | "costs" | "budgets">;
+
 export type AgentDetailView =
   | "overview"
   | "instructions"
@@ -12,6 +14,7 @@ export type AgentDetailView =
   | "api-keys"
   | "revisions"
   | "advanced"
+  | AgentAuditView
   | "run-detail";
 
 export type AgentLocalDetailView = Exclude<AgentDetailView, "run-detail">;
@@ -24,32 +27,45 @@ export const AGENT_DETAIL_NAVIGATION: ReadonlyArray<{
     label: "Agent",
     items: [
       { value: "overview", label: "Overview" },
-      { value: "instructions", label: "Instructions" },
-      { value: "skills", label: "Skills" },
-    ],
-  },
-  {
-    label: "Runtime",
-    items: [
+      { value: "instructions", label: "Identity" },
       { value: "runtime", label: "Harness / Runtime" },
-      { value: "secrets", label: "Secrets" },
-      { value: "tools", label: "Tools" },
-      { value: "channels", label: "Channels" },
+      { value: "secrets", label: "Secrets & variables" },
+      { value: "permissions", label: "Permissions / Trust" },
+      { value: "advanced", label: "Advanced" },
     ],
   },
   {
-    label: "Governance",
+    label: "Audit",
     items: [
-      { value: "permissions", label: "Permissions / Trust" },
-      { value: "api-keys", label: "API Keys" },
-      { value: "revisions", label: "Revisions" },
-      { value: "advanced", label: "Advanced" },
+      { value: "activity", label: "Activity" },
+      { value: "runs", label: "Runs" },
+      { value: "costs", label: "Costs" },
+      { value: "budgets", label: "Budgets" },
     ],
   },
 ] as const;
 
+const HIDDEN_VIEW_LABELS: Partial<Record<AgentLocalDetailView, string>> = {
+  skills: "Skills",
+  tools: "Tools",
+  channels: "Channels",
+  "api-keys": "API Keys",
+  revisions: "Agent history",
+};
+
+export const AGENT_AUDIT_VIEWS: ReadonlySet<AgentLocalDetailView> = new Set(["activity", "runs", "costs", "budgets"]);
+
+export function isAgentAuditView(view: AgentDetailView): view is AgentAuditView {
+  return AGENT_AUDIT_VIEWS.has(view as AgentLocalDetailView);
+}
+
+export function agentDetailViewLabel(view: AgentLocalDetailView): string {
+  const item = AGENT_DETAIL_NAVIGATION.flatMap((section) => section.items).find((entry) => entry.value === view);
+  return item?.label ?? HIDDEN_VIEW_LABELS[view] ?? "Overview";
+}
+
 export function parseAgentDetailView(value: string | null): AgentLocalDetailView {
-  if (value === "instructions" || value === "prompts") return "instructions";
+  if (value === "identity" || value === "instructions" || value === "prompts") return "instructions";
   if (value === "skills") return "skills";
   if (value === "runtime" || value === "configure" || value === "configuration") return "runtime";
   if (value === "secrets") return "secrets";
@@ -59,14 +75,20 @@ export function parseAgentDetailView(value: string | null): AgentLocalDetailView
   if (value === "api-keys" || value === "keys") return "api-keys";
   if (value === "revisions" || value === "history") return "revisions";
   if (value === "advanced") return "advanced";
+  const audit = agentLegacyAuditSection(value);
+  if (audit) return audit;
   return "overview";
 }
 
-export function agentDetailHref(agentRef: string, view: AgentLocalDetailView = "overview") {
-  return `/agents/${agentRef}/${view}`;
+export function agentDetailSegment(view: AgentLocalDetailView): string {
+  return view === "instructions" ? "identity" : view;
 }
 
-export function agentLegacyAuditSection(value: string | null): AuditSection | null {
+export function agentDetailHref(agentRef: string, view: AgentLocalDetailView = "overview") {
+  return `/agents/${agentRef}/${agentDetailSegment(view)}`;
+}
+
+export function agentLegacyAuditSection(value: string | null): AgentAuditView | null {
   if (value === "runs") return "runs";
   if (value === "audit" || value === "activity") return "activity";
   if (value === "cost" || value === "costs") return "costs";
diff --git a/ui/src/pages/agent-detail/AgentAllowedConnectors.tsx b/ui/src/pages/agent-detail/AgentAllowedConnectors.tsx
new file mode 100644
index 00000000000..2e384f12003
--- /dev/null
+++ b/ui/src/pages/agent-detail/AgentAllowedConnectors.tsx
@@ -0,0 +1,74 @@
+import { useMemo } from "react";
+import { ArrowUpRight } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import { toolsApi } from "@/api/tools";
+import { AgentPanel } from "@/components/agent-detail/AgentPanels";
+import { Button } from "@/components/ui/button";
+import { Link } from "@/lib/router";
+import { queryKeys } from "@/lib/queryKeys";
+import { AppLogo } from "../apps/AppLogo";
+
+const SHOWN_LOGOS = 3;
+
+export function AgentAllowedConnectors({ agentId, companyId }: { agentId: string; companyId: string }) {
+  const effective = useQuery({
+    queryKey: queryKeys.tools.effectiveProfilesForAgent(companyId, agentId),
+    queryFn: () => toolsApi.getEffectiveProfilesForAgent(companyId, agentId),
+  });
+  const connections = useQuery({
+    queryKey: queryKeys.tools.connections(companyId),
+    queryFn: () => toolsApi.listConnections(companyId),
+  });
+  const applications = useQuery({
+    queryKey: queryKeys.tools.applications(companyId),
+    queryFn: () => toolsApi.listApplications(companyId),
+  });
+
+  const apps = useMemo(() => {
+    const connectionApp = new Map((connections.data?.connections ?? []).map((connection) => [connection.id, connection.applicationId]));
+    const appById = new Map((applications.data?.applications ?? []).map((application) => [application.id, application]));
+    const seen = new Map<string, { id: string; name: string; key?: string }>();
+    for (const tool of effective.data?.allowedTools ?? []) {
+      const applicationId = connectionApp.get(tool.connectionId);
+      const application = applicationId ? appById.get(applicationId) : undefined;
+      if (!application || seen.has(application.id)) continue;
+      seen.set(application.id, { id: application.id, name: application.name, key: application.applicationKey });
+    }
+    return [...seen.values()];
+  }, [applications.data?.applications, connections.data?.connections, effective.data?.allowedTools]);
+
+  const loading = effective.isLoading || connections.isLoading || applications.isLoading;
+  const failed = effective.error || connections.error || applications.error;
+
+  return (
+    <AgentPanel
+      title="Allowed connectors"
+      aria-label="Allowed connectors"
+      action={
+        <Button variant="ghost" size="icon-xs" asChild>
+          <Link to="/apps?source=installed" aria-label="Manage connectors" title="Manage connectors">
+            <ArrowUpRight className="size-4" />
+          </Link>
+        </Button>
+      }
+    >
+      <div className="flex min-w-0 flex-1 flex-col justify-center px-(--agent-detail-module-inset) pb-(--agent-detail-module-inset)">
+        {loading ? (
+          <p role="status" className="text-xs text-muted-foreground">Resolving access…</p>
+        ) : failed ? (
+          <p role="alert" className="text-xs text-destructive">Couldn’t load this agent’s connectors.</p>
+        ) : apps.length === 0 ? (
+          <p className="text-xs text-muted-foreground">No connectors are allowed yet.</p>
+        ) : (
+          <ul aria-label="Connectors" className="flex max-h-(--agent-detail-logo-rows-h) flex-wrap gap-3 overflow-hidden">
+            {apps.slice(0, SHOWN_LOGOS).map((app) => (
+              <li key={app.id} className="flex shrink-0" title={app.name}>
+                <AppLogo name={app.name} brandKey={app.key} size={24} compact />
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </AgentPanel>
+  );
+}
diff --git a/ui/src/pages/agent-detail/AgentDirectReports.tsx b/ui/src/pages/agent-detail/AgentDirectReports.tsx
new file mode 100644
index 00000000000..ce00de5f1d6
--- /dev/null
+++ b/ui/src/pages/agent-detail/AgentDirectReports.tsx
@@ -0,0 +1,99 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import type { Agent } from "@paperclipai/shared";
+import { AgentAvatar } from "@/components/AgentAvatar";
+import { Link } from "@/lib/router";
+import { agentRouteRef } from "@/lib/utils";
+import { agentDetailHref } from "../agent-detail-navigation";
+
+const MAX_LINES = 2;
+const itemClass = "inline-flex min-w-0 max-w-full items-center gap-1.5";
+const toggleClass = "text-muted-foreground transition-colors hover:text-foreground";
+
+function lineCount(widths: number[], available: number, gap: number) {
+  let lines = 0;
+  let used = 0;
+  for (const width of widths) {
+    if (lines > 0 && used + gap + width <= available) {
+      used += gap + width;
+    } else {
+      lines += 1;
+      used = width;
+    }
+  }
+  return lines;
+}
+
+export function fitReports(widths: number[], available: number, gap: number, moreWidth: number, maxLines = MAX_LINES) {
+  if (available <= 0 || lineCount(widths, available, gap) <= maxLines) return widths.length;
+  for (let shown = widths.length - 1; shown > 0; shown -= 1) {
+    if (lineCount([...widths.slice(0, shown), moreWidth], available, gap) <= maxLines) return shown;
+  }
+  return 0;
+}
+
+export function AgentDirectReports({ reports }: { reports: Agent[] }) {
+  const listRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLDivElement>(null);
+  const [shown, setShown] = useState(reports.length);
+  const [expanded, setExpanded] = useState(false);
+  const reportsKey = reports.map((report) => `${report.id}:${report.name}`).join("|");
+
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    const measure = measureRef.current;
+    if (!list || !measure) return;
+    const fit = () => {
+      const widths = Array.from(measure.children, (child) => Math.ceil(child.getBoundingClientRect().width));
+      const moreWidth = widths.pop() ?? 0;
+      const gap = Number.parseFloat(getComputedStyle(list).columnGap) || 0;
+      setShown(fitReports(widths, Math.floor(list.clientWidth), gap, moreWidth));
+    };
+    fit();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(fit);
+    observer.observe(list);
+    observer.observe(measure);
+    return () => observer.disconnect();
+  }, [reportsKey]);
+
+  const hidden = expanded ? 0 : Math.max(0, reports.length - shown);
+  const visible = hidden > 0 ? reports.slice(0, shown) : reports;
+
+  return (
+    <div className="relative">
+      <div ref={listRef} className="flex flex-wrap items-center gap-x-4 gap-y-2">
+        {visible.map((report) => (
+          <Link
+            key={report.id}
+            to={agentDetailHref(agentRouteRef(report))}
+            className={`${itemClass} text-foreground no-underline hover:underline`}
+          >
+            <AgentAvatar agent={report} size={20} />
+            <span className="truncate">{report.name}</span>
+          </Link>
+        ))}
+        {hidden > 0 ? (
+          <button type="button" className={toggleClass} onClick={() => setExpanded(true)}>
+            +{hidden} more
+          </button>
+        ) : null}
+        {expanded && shown < reports.length ? (
+          <button type="button" className={toggleClass} onClick={() => setExpanded(false)}>
+            Show less
+          </button>
+        ) : null}
+      </div>
+      <div aria-hidden className="pointer-events-none invisible absolute inset-x-0 top-0 h-0 overflow-hidden">
+        <div ref={measureRef} className="flex w-max">
+          {reports.map((report) => (
+            <span key={report.id} className="inline-flex items-center gap-1.5">
+              <AgentAvatar agent={report} size={20} />
+              <span>{report.name}</span>
+            </span>
+          ))}
+          <span>+{reports.length} more</span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/pages/agent-detail/AgentHistoryDialog.tsx b/ui/src/pages/agent-detail/AgentHistoryDialog.tsx
new file mode 100644
index 00000000000..22981ec242e
--- /dev/null
+++ b/ui/src/pages/agent-detail/AgentHistoryDialog.tsx
@@ -0,0 +1,210 @@
+import { useState } from "react";
+import { RotateCcw } from "lucide-react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AgentConfigRevision, AgentDetail as AgentDetailRecord } from "@paperclipai/shared";
+import { agentsApi } from "@/api/agents";
+import { accessApi } from "@/api/access";
+import { AgentChip, agentTableHeadClass, agentTableRowClass } from "@/components/agent-detail/AgentPanels";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { useNavigate } from "@/lib/router";
+import { queryKeys } from "@/lib/queryKeys";
+import { formatDate } from "@/lib/utils";
+import { syncAgentRouteAfterRename } from "./agent-route";
+
+const KEY_LABELS: Record<string, string> = {
+  name: "name",
+  title: "title",
+  role: "role",
+  reportsTo: "reporting line",
+  capabilities: "capabilities",
+  adapterType: "harness",
+  adapterConfig: "harness settings",
+  runtimeConfig: "runtime settings",
+  budgetMonthlyCents: "budget",
+  permissions: "permissions",
+  metadata: "metadata",
+};
+
+export function revisionSummary(revision: Pick<AgentConfigRevision, "changedKeys" | "rolledBackFromRevisionId">): string {
+  if (revision.rolledBackFromRevisionId) return "Restored an earlier version";
+  if (revision.changedKeys.length === 0) return "Saved with no tracked changes";
+  const labels = revision.changedKeys.map((key) => KEY_LABELS[key] ?? key);
+  const sentence = labels.length === 1 ? labels[0] : `${labels.slice(0, -1).join(", ")} and ${labels[labels.length - 1]}`;
+  return `Changed ${sentence}`;
+}
+
+function useRevisionAuthor(agent: AgentDetailRecord, companyId: string | undefined) {
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(companyId ?? agent.companyId),
+    queryFn: () => agentsApi.list(companyId ?? agent.companyId),
+  });
+  const { data: directory } = useQuery({
+    queryKey: queryKeys.access.companyUserDirectory(agent.companyId),
+    queryFn: () => accessApi.listUserDirectory(agent.companyId),
+  });
+  return (revision: AgentConfigRevision) => {
+    if (revision.createdByAgentId) {
+      return agents?.find((candidate) => candidate.id === revision.createdByAgentId)?.name ?? "An agent";
+    }
+    if (revision.createdByUserId && revision.createdByUserId !== "local-board") {
+      const entry = directory?.users.find((candidate) => candidate.principalId === revision.createdByUserId);
+      return entry?.user?.name?.trim() || entry?.user?.email || "Former member";
+    }
+    return "Board";
+  };
+}
+
+export function AgentHistoryDialog({
+  agent,
+  companyId,
+  open,
+  onOpenChange,
+}: {
+  agent: AgentDetailRecord;
+  companyId?: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const [pending, setPending] = useState<AgentConfigRevision | null>(null);
+  const authorOf = useRevisionAuthor(agent, companyId);
+  const { data: revisions, isLoading, error } = useQuery({
+    queryKey: queryKeys.agents.configRevisions(agent.id),
+    queryFn: () => agentsApi.listConfigRevisions(agent.id, companyId),
+    enabled: open,
+  });
+  const rollback = useMutation({
+    mutationFn: (revisionId: string) => agentsApi.rollbackConfigRevision(agent.id, revisionId, companyId),
+    onSuccess: (updated) => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.id) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.agents.configRevisions(agent.id) });
+      setPending(null);
+      if (!syncAgentRouteAfterRename(queryClient, navigate, agent, updated, "overview")) {
+        queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.urlKey) });
+      }
+    },
+  });
+  const restoreError = rollback.error
+    ? rollback.error instanceof Error && rollback.error.message
+      ? rollback.error.message
+      : "Could not restore that version."
+    : null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex max-h-(--agent-detail-dialog-max-h) flex-col gap-5 sm:max-w-3xl">
+        <DialogHeader>
+          <DialogTitle className="text-base">Agent history</DialogTitle>
+          <DialogDescription>Every saved change to {agent.name}&rsquo;s identity and configuration. Restore any version.</DialogDescription>
+        </DialogHeader>
+        {error ? (
+          <p role="alert" className="text-sm text-destructive">{error instanceof Error ? error.message : "Could not load agent history."}</p>
+        ) : isLoading ? (
+          <p role="status" className="text-sm text-muted-foreground">Loading agent history…</p>
+        ) : (revisions ?? []).length === 0 ? (
+          <p className="text-sm text-muted-foreground">No saved changes yet.</p>
+        ) : (
+          <div className="min-h-0 overflow-y-auto rounded-lg border border-border">
+            <div className={`${agentTableHeadClass} grid-cols-(--agent-detail-history-cols)`}>
+              <span>Configuration</span>
+              <span>Team member</span>
+              <span>Date configured</span>
+              <span aria-hidden />
+            </div>
+            {(revisions ?? []).map((revision) => (
+              <div key={revision.id} className={`${agentTableRowClass} grid-cols-(--agent-detail-history-cols)`}>
+                <span className="min-w-0">
+                  <span className="block text-sm text-foreground">{revisionSummary(revision)}</span>
+                  {revision.changedKeys.length > 0 ? (
+                    <span className="mt-1 flex flex-wrap gap-1">
+                      {revision.changedKeys.map((key) => (
+                        <AgentChip key={key} mono>
+                          {key}
+                        </AgentChip>
+                      ))}
+                    </span>
+                  ) : null}
+                </span>
+                <span className="truncate text-sm text-foreground">{authorOf(revision)}</span>
+                <span className="truncate text-sm tabular-nums text-muted-foreground">{formatDate(revision.createdAt)}</span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="-mr-2.5 justify-self-end"
+                  onClick={() => {
+                    rollback.reset();
+                    setPending(revision);
+                  }}
+                  disabled={rollback.isPending}
+                >
+                  <RotateCcw />
+                  Restore
+                </Button>
+              </div>
+            ))}
+          </div>
+        )}
+        {restoreError && pending === null ? (
+          <p role="alert" className="text-sm text-destructive">{restoreError}</p>
+        ) : null}
+      </DialogContent>
+      <AlertDialog open={pending !== null} onOpenChange={(next) => (next ? undefined : setPending(null))}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Restore this version?</AlertDialogTitle>
+            <AlertDialogDescription>
+              {pending
+                ? `Continuing will restore ${agent.name}’s identity and configuration to the version saved on ${formatDate(pending.createdAt)}. Anything changed since then will be replaced. The current version stays in Agent history.`
+                : null}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          {pending ? (
+            <div className="flex flex-col gap-2 rounded-lg bg-(--agent-detail-tile) p-4">
+              <span className="text-xs text-muted-foreground">
+                {formatDate(pending.createdAt)} · By: {authorOf(pending)}
+              </span>
+              <span className="text-sm text-foreground">{revisionSummary(pending)}</span>
+              {pending.changedKeys.length > 0 ? (
+                <span className="flex flex-wrap gap-1">
+                  {pending.changedKeys.map((key) => (
+                    <AgentChip key={key} mono>
+                      {key}
+                    </AgentChip>
+                  ))}
+                </span>
+              ) : null}
+            </div>
+          ) : null}
+          {restoreError ? (
+            <p role="alert" className="text-sm text-destructive">{restoreError}</p>
+          ) : null}
+          <AlertDialogFooter className="sm:justify-between">
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              disabled={rollback.isPending}
+              onClick={(event) => {
+                event.preventDefault();
+                if (pending) rollback.mutate(pending.id);
+              }}
+            >
+              <RotateCcw />
+              {rollback.isPending ? "Restoring…" : "Restore version"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Dialog>
+  );
+}
diff --git a/ui/src/pages/agent-detail/InstructionsBundleSettings.test.tsx b/ui/src/pages/agent-detail/InstructionsBundleSettings.test.tsx
new file mode 100644
index 00000000000..cb2f820c85d
--- /dev/null
+++ b/ui/src/pages/agent-detail/InstructionsBundleSettings.test.tsx
@@ -0,0 +1,104 @@
+// @vitest-environment jsdom
+
+import { flushSync } from "react-dom";
+import { createRoot, type Root } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { InstructionsBundleSettings } from "./InstructionsBundleSettings";
+
+const mockAgentsApi = vi.hoisted(() => ({
+  updateInstructionsBundle: vi.fn(),
+}));
+const onSwitched = vi.fn();
+
+vi.mock("@/api/agents", () => ({ agentsApi: mockAgentsApi }));
+
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+async function act(callback: () => void | Promise<void>) {
+  let result: void | Promise<void> = undefined;
+  flushSync(() => {
+    result = callback();
+  });
+  await result;
+}
+
+async function flushReact() {
+  await act(async () => {
+    await Promise.resolve();
+    await new Promise((resolve) => window.setTimeout(resolve, 0));
+  });
+}
+
+function setNativeValue(element: HTMLInputElement, value: string) {
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(element, value);
+  element.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function button(container: HTMLElement, text: string) {
+  const match = Array.from(container.querySelectorAll("button")).find((candidate) => candidate.textContent?.trim() === text);
+  if (!match) throw new Error(`Button not found: ${text}`);
+  return match as HTMLButtonElement;
+}
+
+describe("InstructionsBundleSettings", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    mockAgentsApi.updateInstructionsBundle.mockReset();
+    onSwitched.mockReset();
+  });
+
+  afterEach(async () => {
+    await act(() => root.unmount());
+    container.remove();
+  });
+
+  async function renderAndLoad(rootPath: string, entryFile: string) {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    await act(() =>
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <InstructionsBundleSettings agentId="agent-1" companyId="company-1" mode="managed" rootPath="" entryFile="AGENTS.md" blocked={false} onSwitched={onSwitched} />
+        </QueryClientProvider>,
+      ),
+    );
+    await act(() => button(container, "Advanced settings").click());
+    const [rootInput, entryInput] = Array.from(container.querySelectorAll("input"));
+    await act(() => setNativeValue(rootInput, rootPath));
+    await act(() => setNativeValue(entryInput, entryFile));
+    await act(() => button(container, "Load profile").click());
+    await flushReact();
+  }
+
+  it("asks the server to switch only when the entry file already exists", async () => {
+    mockAgentsApi.updateInstructionsBundle.mockResolvedValue({});
+
+    await renderAndLoad("/srv/prompts/atlas", "AGENTS");
+
+    expect(mockAgentsApi.updateInstructionsBundle).toHaveBeenCalledTimes(1);
+    expect(mockAgentsApi.updateInstructionsBundle).toHaveBeenCalledWith(
+      "agent-1",
+      { mode: "external", rootPath: "/srv/prompts/atlas", entryFile: "AGENTS", requireExistingEntry: true },
+      "company-1",
+    );
+    expect(container.querySelector('[role="status"]')?.textContent).toContain("Loaded AGENTS from /srv/prompts/atlas");
+    expect(onSwitched).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows the server's reason and leaves the loading state when the entry file is missing", async () => {
+    mockAgentsApi.updateInstructionsBundle.mockRejectedValue(new Error("AGENTS.md was not found in /srv/prompts/atlas"));
+
+    await renderAndLoad("/srv/prompts/atlas", "AGENTS.md");
+
+    expect(mockAgentsApi.updateInstructionsBundle).toHaveBeenCalledTimes(1);
+    expect(container.querySelector('[role="status"]')?.textContent).toContain("AGENTS.md was not found in /srv/prompts/atlas");
+    expect(button(container, "Load profile").disabled).toBe(false);
+    expect(onSwitched).not.toHaveBeenCalled();
+    expect(Array.from(container.querySelectorAll("input")).every((input) => !input.disabled)).toBe(true);
+  });
+});
diff --git a/ui/src/pages/agent-detail/InstructionsBundleSettings.tsx b/ui/src/pages/agent-detail/InstructionsBundleSettings.tsx
new file mode 100644
index 00000000000..5dc34b4d629
--- /dev/null
+++ b/ui/src/pages/agent-detail/InstructionsBundleSettings.tsx
@@ -0,0 +1,162 @@
+import { useState } from "react";
+import { ChevronDown, Loader2, Settings2 } from "lucide-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { agentsApi } from "@/api/agents";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Input } from "@/components/ui/input";
+import { AgentPanel } from "@/components/agent-detail/AgentPanels";
+import { queryKeys } from "@/lib/queryKeys";
+
+type Field = "root" | "entry";
+type LoadState =
+  | { kind: "idle" }
+  | { kind: "loading" }
+  | { kind: "loaded"; root: string; entry: string }
+  | { kind: "error"; field: Field | null; message: string };
+
+export function checkExternalProfile(root: string, entry: string): { field: Field; message: string } | null {
+  if (!root.startsWith("/") && !root.startsWith("~")) return { field: "root", message: "Use an absolute path that starts with / or ~." };
+  if (entry.startsWith("/") || entry.split(/[\\/]/).includes("..")) {
+    return { field: "entry", message: "The entry file has to sit inside the root path." };
+  }
+  return null;
+}
+
+const errorMessage = (error: unknown, fallback: string) => (error instanceof Error && error.message ? error.message : fallback);
+
+export function InstructionsBundleSettings({
+  agentId,
+  agentUrlKey,
+  companyId,
+  mode,
+  rootPath,
+  entryFile,
+  blocked,
+  onSwitched,
+}: {
+  agentId: string;
+  agentUrlKey?: string | null;
+  companyId?: string;
+  mode: "managed" | "external";
+  rootPath: string;
+  entryFile: string;
+  blocked: boolean;
+  onSwitched: () => void;
+}) {
+  const queryClient = useQueryClient();
+  const [root, setRoot] = useState(mode === "external" ? rootPath : "");
+  const [entry, setEntry] = useState(mode === "external" ? entryFile : "");
+  const [load, setLoad] = useState<LoadState>({ kind: "idle" });
+  const busy = load.kind === "loading";
+  const trimmedRoot = root.trim();
+  const trimmedEntry = entry.trim();
+  const unchanged = mode === "external" && trimmedRoot === rootPath && trimmedEntry === entryFile;
+
+  const refresh = async () => {
+    await queryClient.invalidateQueries({ queryKey: queryKeys.agents.instructionsBundle(agentId) });
+    queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agentId) });
+    if (agentUrlKey) queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agentUrlKey) });
+  };
+
+  const edit = (setter: (value: string) => void) => (value: string) => {
+    setter(value);
+    if (!busy) setLoad({ kind: "idle" });
+  };
+
+  const loadProfile = async () => {
+    const problem = checkExternalProfile(trimmedRoot, trimmedEntry);
+    if (problem) return setLoad({ kind: "error", ...problem });
+    setLoad({ kind: "loading" });
+    try {
+      await agentsApi.updateInstructionsBundle(
+        agentId,
+        { mode: "external", rootPath: trimmedRoot, entryFile: trimmedEntry, requireExistingEntry: true },
+        companyId,
+      );
+    } catch (error) {
+      setLoad({ kind: "error", field: null, message: errorMessage(error, `Couldn’t read ${trimmedEntry} in ${trimmedRoot}.`) });
+      return;
+    }
+    await refresh();
+    onSwitched();
+    setLoad({ kind: "loaded", root: trimmedRoot, entry: trimmedEntry });
+  };
+
+  const switchToManaged = async () => {
+    setLoad({ kind: "loading" });
+    try {
+      await agentsApi.updateInstructionsBundle(agentId, { mode: "managed", rootPath: null, entryFile }, companyId);
+      await refresh();
+      onSwitched();
+      setLoad({ kind: "idle" });
+    } catch (error) {
+      setLoad({ kind: "error", field: null, message: errorMessage(error, "Couldn’t switch back to the managed bundle.") });
+    }
+  };
+
+  const invalid = (field: Field) => load.kind === "error" && load.field === field;
+
+  return (
+    <Collapsible defaultOpen={mode === "external"} className="flex flex-col gap-(--agent-detail-module-gap)">
+      <CollapsibleTrigger className="group flex w-fit items-center gap-1.5 rounded-sm text-sm text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:text-foreground">
+        <Settings2 className="size-4" aria-hidden />
+        Advanced settings
+        <ChevronDown className="size-4 transition-transform group-data-[state=open]:rotate-180" aria-hidden />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <AgentPanel className="gap-4 p-(--agent-detail-module-inset)" aria-label="External management">
+          <div className="min-w-0">
+            <p className="text-sm font-semibold text-foreground">External management</p>
+            <p className="mt-0.5 text-xs text-muted-foreground">Point this agent at a directory on disk. Paperclip checks that the entry file exists before it switches over.</p>
+          </div>
+          <div className="grid gap-(--agent-detail-module-gap) sm:grid-cols-2">
+            <label className="flex min-w-0 flex-col gap-1.5">
+              <span className="text-xs text-muted-foreground">Root path</span>
+              <Input
+                value={root}
+                onChange={(event) => edit(setRoot)(event.target.value)}
+                disabled={busy || blocked}
+                aria-invalid={invalid("root") || undefined}
+                placeholder="/absolute/path/to/agent/prompts"
+                className="font-mono text-xs"
+              />
+            </label>
+            <label className="flex min-w-0 flex-col gap-1.5">
+              <span className="text-xs text-muted-foreground">Entry file</span>
+              <Input
+                value={entry}
+                onChange={(event) => edit(setEntry)(event.target.value)}
+                disabled={busy || blocked}
+                aria-invalid={invalid("entry") || undefined}
+                placeholder="AGENTS.md"
+                className="font-mono text-xs"
+              />
+            </label>
+          </div>
+          <div className="flex flex-wrap items-center justify-end gap-3">
+            {mode === "external" ? (
+              <Button variant="ghost" size="sm" className="mr-auto -ml-3" onClick={() => void switchToManaged()} disabled={busy || blocked}>
+                Use managed bundle
+              </Button>
+            ) : null}
+            <p role="status" aria-live="polite" className="flex min-w-0 items-center gap-2 text-xs">
+              {blocked ? <span className="text-muted-foreground">Save or discard your file changes first.</span> : null}
+              {!blocked && load.kind === "error" ? <span className="text-destructive">{load.message}</span> : null}
+              {!blocked && load.kind === "loaded" ? (
+                <span className="flex items-center gap-2 text-muted-foreground">
+                  <span className="size-1.5 shrink-0 rounded-full bg-(--agent-detail-dot-saved)" aria-hidden />
+                  Loaded {load.entry} from {load.root}
+                </span>
+              ) : null}
+            </p>
+            <Button size="sm" onClick={() => void loadProfile()} disabled={!trimmedRoot || !trimmedEntry || busy || blocked || unchanged}>
+              {busy ? <Loader2 className="animate-spin motion-reduce:animate-none" /> : null}
+              {busy ? "Loading…" : "Load profile"}
+            </Button>
+          </div>
+        </AgentPanel>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
diff --git a/ui/src/pages/agent-detail/agent-detail-helpers.test.ts b/ui/src/pages/agent-detail/agent-detail-helpers.test.ts
new file mode 100644
index 00000000000..0bbb8f8493e
--- /dev/null
+++ b/ui/src/pages/agent-detail/agent-detail-helpers.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import { fitReports } from "./AgentDirectReports";
+import { revisionSummary } from "./AgentHistoryDialog";
+import { checkExternalProfile } from "./InstructionsBundleSettings";
+import { countSince, formatWindowCount } from "./overview-counts";
+
+describe("revisionSummary", () => {
+  it("names the changed parts of the configuration in plain words", () => {
+    expect(revisionSummary({ changedKeys: ["adapterConfig"], rolledBackFromRevisionId: null })).toBe("Changed harness settings");
+    expect(revisionSummary({ changedKeys: ["name", "title"], rolledBackFromRevisionId: null })).toBe("Changed name and title");
+    expect(revisionSummary({ changedKeys: ["name", "runtimeConfig", "budgetMonthlyCents"], rolledBackFromRevisionId: null })).toBe(
+      "Changed name, runtime settings and budget",
+    );
+  });
+
+  it("calls out restores and empty revisions", () => {
+    expect(revisionSummary({ changedKeys: ["adapterConfig"], rolledBackFromRevisionId: "rev-1" })).toBe("Restored an earlier version");
+    expect(revisionSummary({ changedKeys: [], rolledBackFromRevisionId: null })).toBe("Saved with no tracked changes");
+  });
+});
+
+describe("checkExternalProfile", () => {
+  it("accepts an absolute or home root and any entry file inside it", () => {
+    expect(checkExternalProfile("/Users/avery/prompts/atlas", "AGENTS.md")).toBeNull();
+    expect(checkExternalProfile("~/prompts/atlas", "AGENTS")).toBeNull();
+    expect(checkExternalProfile("/Users/avery/prompts", "docs/instructions.txt")).toBeNull();
+    expect(checkExternalProfile("/Users/avery/prompts", "notes..md")).toBeNull();
+  });
+
+  it("points at the field that needs fixing", () => {
+    expect(checkExternalProfile("prompts/atlas", "AGENTS.md")).toMatchObject({ field: "root" });
+    expect(checkExternalProfile("/Users/avery/prompts", "../AGENTS.md")).toMatchObject({ field: "entry" });
+    expect(checkExternalProfile("/Users/avery/prompts", "docs/../../AGENTS.md")).toMatchObject({ field: "entry" });
+    expect(checkExternalProfile("/Users/avery/prompts", "/etc/AGENTS.md")).toMatchObject({ field: "entry" });
+  });
+});
+
+describe("countSince", () => {
+  const day = 24 * 60 * 60 * 1000;
+  const now = Date.parse("2026-10-30T12:00:00Z");
+  const rows = (ages: number[]) => ages.map((age, index) => ({ id: index, createdAt: new Date(now - age * day).toISOString() }));
+
+  it("counts rows inside the window and reports an exact total when the list reaches past it", () => {
+    const counted = countSince(rows([0.5, 1, 3, 9]), now - 7 * day, 4);
+    expect(counted).toEqual({ count: 3, atLeast: false });
+    expect(formatWindowCount(counted)).toBe("3");
+  });
+
+  it("marks the total as a lower bound when a capped list ends inside the window", () => {
+    const counted = countSince(rows([0.5, 1, 2, 3]), now - 7 * day, 4);
+    expect(counted).toEqual({ count: 4, atLeast: true });
+    expect(formatWindowCount(counted)).toBe("4+");
+  });
+
+  it("applies the row filter", () => {
+    const failed = rows([0.5, 1, 3]).map((row, index) => ({ ...row, status: index === 1 ? "failed" : "succeeded" }));
+    expect(countSince(failed, now - 2 * day, 200, (row) => row.status === "failed")).toEqual({ count: 1, atLeast: false });
+  });
+});
+
+describe("fitReports", () => {
+  const widths = [106, 106, 56, 60, 106, 129, 116, 140];
+
+  it("shows every report when they fit in two lines", () => {
+    expect(fitReports(widths.slice(0, 4), 406, 16, 56)).toBe(4);
+    expect(fitReports(widths, 900, 16, 56)).toBe(8);
+  });
+
+  it("leaves room for the more button on the second line", () => {
+    expect(fitReports(widths, 406, 16, 56)).toBe(6);
+    expect(fitReports(widths, 202, 16, 56)).toBe(2);
+  });
+
+  it("shows every report before the width is known", () => {
+    expect(fitReports(widths, 0, 16, 56)).toBe(8);
+  });
+});
diff --git a/ui/src/pages/agent-detail/agent-route.ts b/ui/src/pages/agent-detail/agent-route.ts
new file mode 100644
index 00000000000..7bc68867684
--- /dev/null
+++ b/ui/src/pages/agent-detail/agent-route.ts
@@ -0,0 +1,27 @@
+import type { QueryClient } from "@tanstack/react-query";
+import type { NavigateFunction } from "@/lib/router";
+import { queryKeys } from "@/lib/queryKeys";
+import { agentRouteRef } from "@/lib/utils";
+
+/**
+ * Agent detail URLs use a name-derived key, so updates that change the agent's
+ * name (a rename or a config-revision rollback) can invalidate the reference
+ * currently in the URL. When that happens, refetching the old reference would
+ * 404 with "Agent not found". Instead, drop the stale cached queries and
+ * replace the URL with the new canonical reference. Returns true when a
+ * redirect happened.
+ */
+export function syncAgentRouteAfterRename(
+  queryClient: QueryClient,
+  navigate: NavigateFunction,
+  previous: { id: string; urlKey?: string | null; name?: string | null },
+  updated: { id: string; urlKey?: string | null; name?: string | null },
+  tab: string,
+): boolean {
+  const previousRef = agentRouteRef(previous);
+  const nextRef = agentRouteRef(updated);
+  if (nextRef === previousRef) return false;
+  queryClient.removeQueries({ queryKey: queryKeys.agents.detail(previousRef) });
+  navigate(`/agents/${nextRef}/${tab}`, { replace: true });
+  return true;
+}
diff --git a/ui/src/pages/agent-detail/overview-counts.ts b/ui/src/pages/agent-detail/overview-counts.ts
new file mode 100644
index 00000000000..ba438947dab
--- /dev/null
+++ b/ui/src/pages/agent-detail/overview-counts.ts
@@ -0,0 +1,21 @@
+export type WindowCount = { count: number; atLeast: boolean };
+
+export function countSince<T extends { createdAt: string | Date }>(
+  rows: readonly T[],
+  since: number,
+  limit: number,
+  match: (row: T) => boolean = () => true,
+): WindowCount {
+  let count = 0;
+  let oldest = Infinity;
+  for (const row of rows) {
+    const at = new Date(row.createdAt).getTime();
+    oldest = Math.min(oldest, at);
+    if (at >= since && match(row)) count += 1;
+  }
+  return { count, atLeast: rows.length >= limit && oldest >= since };
+}
+
+export function formatWindowCount({ count, atLeast }: WindowCount) {
+  return atLeast ? `${count}+` : String(count);
+}
diff --git a/ui/src/pages/apps/Browse.tsx b/ui/src/pages/apps/Browse.tsx
index 843a8ec52ac..1813744a85f 100644
--- a/ui/src/pages/apps/Browse.tsx
+++ b/ui/src/pages/apps/Browse.tsx
@@ -391,6 +391,7 @@ export function Browse({ renderAccountDetails = (connection) => connection.conne
   useEffect(() => { setQuery(""); setPage(1); setSource("paperclip"); setExpandedSearch(false); setArcadeToConfigure(null); setAggregatorToConnect(null); setAggregatorToManage(null); setInitialAggregatorProvider(undefined); setConnectionToRemove(null); }, [selectedCompanyId]);
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
+    if (params.get("source") === "installed") setSource("installed");
     if (params.get("source") === "composio") {
       setAggregatorToConnect((params.get("targetToolkit") ? findComposioCatalogApp(params.get("targetToolkit")!) : null) ?? null);
       setInitialAggregatorProvider("composio");
diff --git a/ui/src/pages/audit/AuditRuns.tsx b/ui/src/pages/audit/AuditRuns.tsx
index aada265e427..b1d9414aade 100644
--- a/ui/src/pages/audit/AuditRuns.tsx
+++ b/ui/src/pages/audit/AuditRuns.tsx
@@ -126,9 +126,20 @@ function RoutineScopedRuns({
   );
 }
 
-export function AuditRuns({ companyId, routineId }: { companyId: string; routineId?: string }) {
+export function AuditRuns({
+  companyId,
+  routineId,
+  lockedAgentId,
+  hideHeader = false,
+}: {
+  companyId: string;
+  routineId?: string;
+  /** Pin the list to one agent and hide the agent filter (the agent page's Runs). */
+  lockedAgentId?: string;
+  hideHeader?: boolean;
+}) {
   const [searchParams, setSearchParams] = useSearchParams();
-  const agentId = searchParams.get("agentId") ?? ALL;
+  const agentId = lockedAgentId ?? searchParams.get("agentId") ?? ALL;
   const status = searchParams.get("runStatus") ?? ALL;
   const agents = useQuery({
     queryKey: queryKeys.agents.list(companyId),
@@ -200,16 +211,18 @@ export function AuditRuns({ companyId, routineId }: { companyId: string; routine
 
   return (
     <div className="space-y-4">
-      <div>
-        <h2 className="text-lg font-semibold text-foreground">Runs</h2>
-        <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
-          Recent agent executions across the organization. Open a run to inspect its transcript,
-          output, and task context.
-        </p>
-      </div>
+      {hideHeader ? null : (
+        <div>
+          <h2 className="text-lg font-semibold text-foreground">Runs</h2>
+          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            Recent agent executions across the organization. Open a run to inspect its transcript,
+            output, and task context.
+          </p>
+        </div>
+      )}
 
       <div className="flex flex-wrap items-end gap-3 border-y border-border py-3">
-        <label className="grid gap-1 text-(length:--text-micro) font-medium text-muted-foreground">
+        {lockedAgentId ? null : <label className="grid gap-1 text-(length:--text-micro) font-medium text-muted-foreground">
           <span>Agent</span>
           <Select value={agentId} onValueChange={(value) => updateFilter("agentId", value)}>
             <SelectTrigger className="w-48">
@@ -224,7 +237,7 @@ export function AuditRuns({ companyId, routineId }: { companyId: string; routine
               ))}
             </SelectContent>
           </Select>
-        </label>
+        </label>}
         <label className="grid gap-1 text-(length:--text-micro) font-medium text-muted-foreground">
           <span>Status</span>
           <Select value={status} onValueChange={(value) => updateFilter("runStatus", value)}>
@@ -241,7 +254,7 @@ export function AuditRuns({ companyId, routineId }: { companyId: string; routine
             </SelectContent>
           </Select>
         </label>
-        {agentId !== ALL || status !== ALL ? (
+        {(!lockedAgentId && agentId !== ALL) || status !== ALL ? (
           <Button variant="ghost" size="sm" onClick={clearFilters}>
             Clear filters
           </Button>
diff --git a/ui/storybook/prototypes/agent-settings/AgentSettingsPreview.tsx b/ui/storybook/prototypes/agent-settings/AgentSettingsPreview.tsx
index 22eca87c84a..6ffff13ddcd 100644
--- a/ui/storybook/prototypes/agent-settings/AgentSettingsPreview.tsx
+++ b/ui/storybook/prototypes/agent-settings/AgentSettingsPreview.tsx
@@ -60,6 +60,10 @@ const descriptions: Record<AgentLocalDetailView, string> = {
   "api-keys": "Manage the keys this agent uses to authenticate with Paperclip.",
   revisions:
     "Review past configuration changes and restore an earlier version.",
+  activity: "Everything this agent did and everything done to it.",
+  runs: "Every execution of this agent, newest first.",
+  costs: "What this agent spent, by model.",
+  budgets: "This agent’s monthly budget and how much of it is used.",
 };
 type Feedback = Parameters<
   NonNullable<ComponentProps<typeof AgentConfigForm>["onTestFeedbackChange"]>