diff --git a/ui/src/components/AgentActionButtons.test.tsx b/ui/src/components/AgentActionButtons.test.tsx
index 507530bdbd..901717f9b7 100644
--- a/ui/src/components/AgentActionButtons.test.tsx
+++ b/ui/src/components/AgentActionButtons.test.tsx
@@ -126,7 +126,7 @@ describe("AgentActionButtons", () => {
   });
 
   function render(agent: Agent, props: Partial<ComponentProps<typeof AgentActionButtons>> = {}) {
-    root = createRoot(container);
+    root ??= createRoot(container);
     root.render(
       <QueryClientProvider client={queryClient}>
         <AgentActionButtons agent={agent} companyId="company-1" runLabel="Run Heartbeat" {...props} />
@@ -205,4 +205,64 @@ describe("AgentActionButtons", () => {
     expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: ["agents", "detail", "alpha"] });
     expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: ["agents", "company-1"] });
   });
+
+  it("does not terminate when navigation away from a dirty detail page is rejected", async () => {
+    const onBeforeNavigate = vi.fn().mockReturnValue(false);
+    render(makeAgent(), { onBeforeNavigate, onTerminateSuccess: vi.fn() });
+    await flushReact();
+
+    await act(async () => {
+      container.querySelector<HTMLButtonElement>('[aria-label="Open actions for Alpha Agent"]')?.click();
+    });
+    await flushReact();
+
+    const terminateButton = Array.from(document.body.querySelectorAll("button"))
+      .find((button) => button.textContent?.includes("Terminate"));
+    await act(async () => {
+      terminateButton?.click();
+    });
+    await flushReact();
+
+    expect(onBeforeNavigate).toHaveBeenCalledOnce();
+    expect(mockAgentsApi.terminate).not.toHaveBeenCalled();
+  });
+
+  it("rechecks navigation when the form becomes dirty while termination is pending", async () => {
+    let resolveTermination!: (agent: Agent) => void;
+    mockAgentsApi.terminate.mockReturnValue(new Promise((resolve) => {
+      resolveTermination = resolve;
+    }));
+    const onBeforeNavigate = vi.fn().mockReturnValueOnce(true).mockReturnValue(false);
+    const onTerminateSuccess = vi.fn();
+    const agent = makeAgent();
+    render(agent, {
+      hasPendingNavigationChanges: false,
+      onBeforeNavigate,
+      onTerminateSuccess,
+    });
+    await flushReact();
+
+    await act(async () => {
+      container.querySelector<HTMLButtonElement>('[aria-label="Open actions for Alpha Agent"]')?.click();
+    });
+    await flushReact();
+    const terminateButton = Array.from(document.body.querySelectorAll("button"))
+      .find((button) => button.textContent?.includes("Terminate"));
+    await act(async () => {
+      terminateButton?.click();
+    });
+    await flushReact();
+
+    render(agent, {
+      hasPendingNavigationChanges: true,
+      onBeforeNavigate,
+      onTerminateSuccess,
+    });
+    await flushReact();
+    resolveTermination(makeAgent({ status: "terminated" }));
+    await flushReact();
+
+    expect(onBeforeNavigate).toHaveBeenCalledTimes(2);
+    expect(onTerminateSuccess).not.toHaveBeenCalled();
+  });
 });
diff --git a/ui/src/components/AgentActionButtons.tsx b/ui/src/components/AgentActionButtons.tsx
index 2460e4e8eb..a062a71af2 100644
--- a/ui/src/components/AgentActionButtons.tsx
+++ b/ui/src/components/AgentActionButtons.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState, type ReactNode } from "react";
+import { useCallback, useRef, useState, type ReactNode } from "react";
 import { useNavigate } from "@/lib/router";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
@@ -165,6 +165,8 @@ export function AgentActionButtons({
   workActionsDisabled = false,
   workActionsDisabledReason,
   navigateToRunOnInvoke = true,
+  hasPendingNavigationChanges = false,
+  onBeforeNavigate,
   onActionError,
   onTerminateSuccess,
   pauseConfirm,
@@ -182,6 +184,10 @@ export function AgentActionButtons({
   workActionsDisabled?: boolean;
   workActionsDisabledReason?: string;
   navigateToRunOnInvoke?: boolean;
+  /** Whether the caller currently has an unsaved draft that navigation would discard. */
+  hasPendingNavigationChanges?: boolean;
+  /** Return false to stop an action whose success would navigate away. */
+  onBeforeNavigate?: () => boolean;
   /**
    * When set, pausing prompts a confirmation dialog first (e.g. for built-in
    * agents that power a feature). Omit for the immediate-pause default.
@@ -207,6 +213,25 @@ export function AgentActionButtons({
   const { pushToast } = useToastActions();
   const [moreOpen, setMoreOpen] = useState(false);
   const [pauseConfirmOpen, setPauseConfirmOpen] = useState(false);
+  const pendingNavigationChangesRef = useRef(hasPendingNavigationChanges);
+  const beforeNavigateRef = useRef(onBeforeNavigate);
+  const agentActionStartedDirtyRef = useRef(false);
+  const duplicateStartedDirtyRef = useRef(false);
+  pendingNavigationChangesRef.current = hasPendingNavigationChanges;
+  beforeNavigateRef.current = onBeforeNavigate;
+
+  function confirmNavigationStart(startedDirtyRef: React.MutableRefObject<boolean>) {
+    startedDirtyRef.current = pendingNavigationChangesRef.current;
+    return beforeNavigateRef.current?.() !== false;
+  }
+
+  function confirmLateNavigationChanges(startedDirtyRef: React.MutableRefObject<boolean>) {
+    return (
+      !pendingNavigationChangesRef.current ||
+      startedDirtyRef.current ||
+      beforeNavigateRef.current?.() !== false
+    );
+  }
 
   const resolvedCompanyId = companyId ?? agent.companyId;
   const canonicalAgentRef = agentRouteRef(agent);
@@ -251,9 +276,11 @@ export function AgentActionButtons({
       onActionError?.(null);
       invalidateAgent();
       if (action === "terminate") {
+        if (!confirmLateNavigationChanges(agentActionStartedDirtyRef)) return;
         onTerminateSuccess?.(data as Agent);
       }
       if (action === "invoke" && navigateToRunOnInvoke && data && typeof data === "object" && "id" in data) {
+        if (!confirmLateNavigationChanges(agentActionStartedDirtyRef)) return;
         navigate(`/agents/${canonicalAgentRef}/runs/${(data as HeartbeatRun).id}`);
       }
     },
@@ -285,6 +312,7 @@ export function AgentActionButtons({
         await queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(resolvedCompanyId) });
       }
       pushToast({ title: "Agent duplicated", body: createdAgent.name, tone: "success" });
+      if (!confirmLateNavigationChanges(duplicateStartedDirtyRef)) return;
       navigate(`/agents/${agentRouteRef(createdAgent)}/dashboard`);
     },
     onError: (err) => {
@@ -299,7 +327,7 @@ export function AgentActionButtons({
     const nextName = duplicateAgentName(agent.name);
     const confirmed = window.confirm(`Duplicate ${agent.name} as ${nextName}?`);
     setMoreOpen(false);
-    if (!confirmed) return;
+    if (!confirmed || !confirmNavigationStart(duplicateStartedDirtyRef)) return;
     duplicateAgent.mutate();
   }, [agent.name, duplicateAgent]);
 
@@ -334,7 +362,10 @@ export function AgentActionButtons({
         <span className="hidden sm:inline">{assignLabel}</span>
       </Button>
       <RunButton
-        onClick={() => agentAction.mutate("invoke")}
+        onClick={() => {
+          if (navigateToRunOnInvoke && !confirmNavigationStart(agentActionStartedDirtyRef)) return;
+          agentAction.mutate("invoke");
+        }}
         disabled={assignAndRunDisabled}
         label={runLabel}
         size={size}
@@ -423,8 +454,9 @@ export function AgentActionButtons({
             <button
               className="flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 text-destructive"
               onClick={() => {
-                agentAction.mutate("terminate");
                 setMoreOpen(false);
+                if (onTerminateSuccess && !confirmNavigationStart(agentActionStartedDirtyRef)) return;
+                agentAction.mutate("terminate");
               }}
             >
               <Trash2 className="h-3 w-3" />
diff --git a/ui/src/components/AgentConfigForm.render.test.tsx b/ui/src/components/AgentConfigForm.render.test.tsx
index 088cb418b4..ba559b0a02 100644
--- a/ui/src/components/AgentConfigForm.render.test.tsx
+++ b/ui/src/components/AgentConfigForm.render.test.tsx
@@ -205,7 +205,10 @@ function setInputValue(input: HTMLInputElement, value: string) {
 async function renderForm(
   environments: Environment[],
   agentOverrides: Partial<Agent> = {},
-  options: { showAdapterTestEnvironmentButton?: boolean } = {},
+  options: {
+    showAdapterTestEnvironmentButton?: boolean;
+    content?: "configuration" | "secrets";
+  } = {},
 ) {
   mockEnvironmentsApi.list.mockResolvedValue(environments);
 
@@ -229,6 +232,7 @@ async function renderForm(
               agent={makeAgent(agentOverrides)}
               onSave={vi.fn()}
               hidePromptTemplate
+              content={options.content}
               showAdapterTypeField={false}
               showAdapterTestEnvironmentButton={options.showAdapterTestEnvironmentButton ?? false}
             />
@@ -418,6 +422,28 @@ describe("AgentConfigForm environment selector", () => {
     expect(result.container.querySelector("select")).toBeNull();
   });
 
+  it("keeps secret access out of the main Configuration content", async () => {
+    const result = await renderForm([
+      makeEnvironment({ id: "local-1", name: "Local", driver: "local" }),
+    ]);
+    roots.push(result.root);
+
+    expect(result.container.textContent).not.toContain("Secret access");
+  });
+
+  it("renders secret access as dedicated form content", async () => {
+    const result = await renderForm(
+      [makeEnvironment({ id: "local-1", name: "Local", driver: "local" })],
+      {},
+      { content: "secrets" },
+    );
+    roots.push(result.root);
+
+    expect(result.container.textContent).toContain("Secret access");
+    expect(result.container.textContent).toContain("No secrets are bound to this agent yet.");
+    expect(result.container.textContent).not.toContain("Environment variables");
+  });
+
   it("shows concise Environment copy when one runnable non-local environment exists", async () => {
     const result = await renderForm([
       makeEnvironment({ id: "local-1", name: "Local", driver: "local" }),
diff --git a/ui/src/components/AgentConfigForm.tsx b/ui/src/components/AgentConfigForm.tsx
index d785851044..3e5d771a7d 100644
--- a/ui/src/components/AgentConfigForm.tsx
+++ b/ui/src/components/AgentConfigForm.tsx
@@ -102,6 +102,8 @@ type AgentConfigFormProps = {
   hideInstructionsFile?: boolean;
   /** Hide the prompt template field from the Identity section (used when it's shown in a separate Prompts tab). */
   hidePromptTemplate?: boolean;
+  /** Render the main configuration sections or the dedicated edit-only Secrets surface. */
+  content?: "configuration" | "secrets";
   /** "cards" renders each section as heading + bordered card (for settings pages). Default: "inline" (border-b dividers). */
   sectionLayout?: "inline" | "cards";
 } & (
@@ -1051,6 +1053,43 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
     });
   }
 
+  if (!isCreate && props.content === "secrets") {
+    return (
+      <div className={cn("relative", 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">
+              <span className="text-xs text-muted-foreground">Unsaved changes</span>
+              <Button size="sm" onClick={handleSave} disabled={props.isSaving}>
+                {props.isSaving ? "Saving..." : "Save"}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        <div className={cn(!cards && "border-b border-border")}>
+          {cards
+            ? <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")}>
+            <p className="text-xs text-muted-foreground">{help.secretAccess}</p>
+            <AgentSecretAccessEditor
+              config={{ ...config, ...overlay.adapterConfig }}
+              secrets={availableSecrets}
+              onChange={applyAccessGrants}
+              onCreateSecret={(name, value) => createSecret.mutateAsync({ name, value })}
+              proposals={agentBindingProposals}
+              onApproveProposal={proposalReview.requestApprove}
+              onRejectProposal={proposalReview.requestReject}
+            />
+            {proposalReview.dialogs}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={cn("relative", cards && "space-y-6")}>
       {/* ---- Floating Save button (edit mode, when dirty) ---- */}
@@ -1538,20 +1577,6 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
                 />
               </Field>
 
-              {!isCreate && (
-                <Field label="Secret access" hint={help.secretAccess}>
-                  <AgentSecretAccessEditor
-                    config={{ ...config, ...overlay.adapterConfig }}
-                    secrets={availableSecrets}
-                    onChange={applyAccessGrants}
-                    proposals={agentBindingProposals}
-                    onApproveProposal={proposalReview.requestApprove}
-                    onRejectProposal={proposalReview.requestReject}
-                  />
-                  {proposalReview.dialogs}
-                </Field>
-              )}
-
               {/* Edit-only: timeout + grace period */}
               {!isCreate && (
                 <>
diff --git a/ui/src/components/AgentSecretAccessEditor.test.tsx b/ui/src/components/AgentSecretAccessEditor.test.tsx
index bc1df77a46..9078713752 100644
--- a/ui/src/components/AgentSecretAccessEditor.test.tsx
+++ b/ui/src/components/AgentSecretAccessEditor.test.tsx
@@ -5,18 +5,29 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { CompanySecret, EnvSecretRefBinding } from "@paperclipai/shared";
 
-// Stub SecretBindingPicker so the editor renders without CompanyContext /
-// react-query. The stub exposes a button that binds a fixed secret.
-vi.mock("./SecretBindingPicker", () => ({
-  SecretBindingPicker: ({
-    onChange,
-  }: {
-    onChange: (next: { secretId: string; version?: number | "latest" } | null) => void;
-  }) => (
-    <button type="button" data-testid="pick-secret" onClick={() => onChange({ secretId: "s1", version: "latest" })}>
-      pick
-    </button>
-  ),
+const mockSecretPickerRender = vi.hoisted(() => vi.fn());
+
+// Keep this component test focused on access-row behavior while asserting that
+// the editor routes selection through the shared, folder-aware env picker.
+vi.mock("./environment-variables-editor/SecretPicker", () => ({
+  SecretPicker: (props: {
+    secretId: string;
+    secrets: readonly CompanySecret[];
+    onSelect: (secretId: string) => void;
+    onCreateNew?: (query: string) => void;
+  }) => {
+    mockSecretPickerRender(props);
+    return <>
+      <button type="button" data-testid="pick-secret" onClick={() => props.onSelect("s1")}>
+        pick
+      </button>
+      {props.onCreateNew ? (
+        <button type="button" data-testid="create-secret" onClick={() => props.onCreateNew?.("new_secret")}>
+          create
+        </button>
+      ) : null}
+    </>;
+  },
 }));
 
 import {
@@ -155,12 +166,43 @@ describe("AgentSecretAccessEditor component", () => {
 
     // Bind a secret via the stubbed picker.
     const pick = container.querySelector<HTMLButtonElement>('[data-testid="pick-secret"]')!;
+    expect(mockSecretPickerRender).toHaveBeenLastCalledWith(
+      expect.objectContaining({ secretId: "", secrets }),
+    );
     flushSync(() => pick.click());
 
     const last = emitted.at(-1)!;
     expect(last).toEqual({ STRIPE: { type: "secret_ref", secretId: "s1", version: "latest" } });
   });
 
+  it("keeps the create form open when focus returns to the shared picker anchor", async () => {
+    vi.useFakeTimers();
+    try {
+      render(
+        <AgentSecretAccessEditor
+          config={{ "access.STRIPE": { type: "secret_ref", secretId: "s1" } }}
+          secrets={secrets}
+          onChange={() => {}}
+          onCreateSecret={async () => secrets[0]!}
+        />,
+      );
+
+      const createButton = container.querySelector<HTMLButtonElement>('[data-testid="create-secret"]')!;
+      flushSync(() => createButton.click());
+      flushSync(() => vi.runAllTimers());
+      expect(document.body.textContent).toContain("Create secret");
+
+      const pickerButton = container.querySelector<HTMLButtonElement>('[data-testid="pick-secret"]')!;
+      pickerButton.focus();
+      flushSync(() => {});
+
+      expect(document.body.textContent).toContain("Create secret");
+      expect(document.querySelector('input[aria-label="Secret name"]')).toBeTruthy();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
   it("renders pending binding proposals as Proposed rows with approve/reject", () => {
     const approved: string[] = [];
     const rejected: string[] = [];
diff --git a/ui/src/components/AgentSecretAccessEditor.tsx b/ui/src/components/AgentSecretAccessEditor.tsx
index 1152964836..272e02568f 100644
--- a/ui/src/components/AgentSecretAccessEditor.tsx
+++ b/ui/src/components/AgentSecretAccessEditor.tsx
@@ -9,14 +9,16 @@ import type {
 import { cn } from "../lib/utils";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
-import { SecretBindingPicker, type SecretBindingValue } from "./SecretBindingPicker";
+import { SecretPicker } from "./environment-variables-editor/SecretPicker";
+import { CreateSecretPopover } from "./environment-variables-editor/CreateSecretPopover";
+import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover";
 import {
   AGENT_ACCESS_CONFIG_PATH_PREFIX,
   ENV_CONFIG_PATH_PREFIX,
   SECRET_ALIAS_RE,
   deliveryModeDescription,
 } from "../lib/secret-delivery";
-import { envKeyFromSecretName } from "./environment-variables-editor/model";
+import { envKeyFromSecretName, secretNameFromKey } from "./environment-variables-editor/model";
 import {
   DeliveryBadge as ProposalDeliveryBadge,
   ProposalActions,
@@ -157,6 +159,8 @@ export interface AgentSecretAccessEditorProps {
    * parent diffs this against the current `access.*` keys to add/remove them.
    */
   onChange: (next: Record<string, EnvSecretRefBinding>) => void;
+  /** Create a company secret from the shared picker's pinned create action. */
+  onCreateSecret?: (name: string, value: string) => Promise<CompanySecret>;
   disabled?: boolean;
   /** Pending binding proposals targeting this agent (PAP-14731). */
   proposals?: readonly SecretProposalView[];
@@ -191,6 +195,7 @@ export function AgentSecretAccessEditor({
   config,
   secrets,
   onChange,
+  onCreateSecret,
   disabled,
   proposals,
   onApproveProposal,
@@ -208,6 +213,8 @@ export function AgentSecretAccessEditor({
   const incomingKey = useMemo(() => normalizeAccessMapKey(incomingMap), [incomingMap]);
 
   const [rows, setRows] = useState<AccessRow[]>(() => entriesToRows(apiBindings));
+  const [createRequest, setCreateRequest] = useState<{ rowId: string; name: string } | null>(null);
+  const pickerAnchorRefs = useRef(new Map<string, HTMLDivElement>());
   const lastEmittedKeyRef = useRef(incomingKey);
   const lastIncomingKeyRef = useRef(incomingKey);
 
@@ -334,9 +341,7 @@ export function AgentSecretAccessEditor({
               const trimmedAlias = row.alias.trim();
               const aliasInvalid = Boolean(trimmedAlias) && !SECRET_ALIAS_RE.test(trimmedAlias);
               const aliasDuplicate = Boolean(trimmedAlias) && (aliasCounts.get(trimmedAlias) ?? 0) > 1;
-              const bindingValue: SecretBindingValue | null = row.secretId
-                ? { secretId: row.secretId, version: row.version }
-                : null;
+              const selectedSecret = secrets.find((secret) => secret.id === row.secretId) ?? null;
               return (
                 <div key={row.id} className="space-y-1">
                   <div className="grid grid-cols-(--gtc-65) items-start gap-1.5">
@@ -360,23 +365,106 @@ export function AgentSecretAccessEditor({
                         )}
                       />
                     </div>
-                    <div>
-                      <SecretBindingPicker
-                        value={bindingValue}
-                        onChange={(next) =>
+                    <div className="flex min-w-0 items-start gap-1.5">
+                      <Popover
+                        open={createRequest?.rowId === row.id}
+                        onOpenChange={(open) => {
+                          if (!open && createRequest?.rowId === row.id) setCreateRequest(null);
+                        }}
+                      >
+                        <PopoverAnchor asChild>
+                          <div
+                            ref={(node) => {
+                              if (node) pickerAnchorRefs.current.set(row.id, node);
+                              else pickerAnchorRefs.current.delete(row.id);
+                            }}
+                            className="min-w-0 flex-1"
+                          >
+                            <SecretPicker
+                              secretId={row.secretId}
+                              secrets={secrets}
+                              onSelect={(secretId) =>
+                                patchRow(row.id, {
+                                  secretId,
+                                  version: "latest",
+                                  alias:
+                                    !row.alias.trim() && secretId
+                                      ? envKeyFromSecretName(secretName(secretId))
+                                      : row.alias,
+                                })
+                              }
+                              onCreateNew={onCreateSecret
+                                ? (query) => {
+                                    window.setTimeout(() => {
+                                      setCreateRequest({
+                                        rowId: row.id,
+                                        name: secretNameFromKey(query) || query.trim(),
+                                      });
+                                    }, 0);
+                                  }
+                                : undefined}
+                              disabled={disabled}
+                              triggerClassName="h-9 min-h-9"
+                            />
+                          </div>
+                        </PopoverAnchor>
+                        <PopoverContent
+                          align="start"
+                          className="w-auto p-3"
+                          onInteractOutside={(event) => {
+                            // Closing the picker returns focus to its trigger inside
+                            // this popover's anchor. Keep that focus restoration from
+                            // dismissing the create form that just opened.
+                            const target = event.detail.originalEvent.target as Node | null;
+                            if (target && pickerAnchorRefs.current.get(row.id)?.contains(target)) {
+                              event.preventDefault();
+                            }
+                          }}
+                        >
+                          {createRequest?.rowId === row.id && onCreateSecret ? (
+                            <CreateSecretPopover
+                              initialName={createRequest.name}
+                              initialValue=""
+                              existingSecretNames={secrets.map((secret) => secret.name)}
+                              onCancel={() => setCreateRequest(null)}
+                              onSubmit={async (name, value) => {
+                                const created = await onCreateSecret(name, value);
+                                patchRow(row.id, {
+                                  secretId: created.id,
+                                  version: "latest",
+                                  alias: row.alias.trim() || envKeyFromSecretName(created.name),
+                                });
+                                setCreateRequest(null);
+                              }}
+                            />
+                          ) : null}
+                        </PopoverContent>
+                      </Popover>
+                      <select
+                        className="h-9 shrink-0 rounded-md border border-border bg-background px-2 text-xs outline-none disabled:cursor-not-allowed disabled:opacity-60"
+                        value={row.version === undefined ? "latest" : String(row.version)}
+                        onChange={(event) => {
+                          const raw = event.target.value;
                           patchRow(row.id, {
-                            secretId: next?.secretId ?? "",
-                            version: next?.version ?? "latest",
-                            alias:
-                              !row.alias.trim() && next?.secretId
-                                ? envKeyFromSecretName(secretName(next.secretId))
-                                : row.alias,
-                          })
-                        }
-                        label=""
-                        placeholder="Select secret"
-                        disabled={disabled}
-                      />
+                            version: raw === "latest" ? "latest" : Number.parseInt(raw, 10),
+                          });
+                        }}
+                        disabled={disabled || !selectedSecret}
+                        aria-label="Version"
+                      >
+                        <option value="latest">latest</option>
+                        {selectedSecret
+                          ? Array.from({ length: Math.max(0, selectedSecret.latestVersion) }, (_, index) => {
+                              const version = selectedSecret.latestVersion - index;
+                              if (version <= 0) return null;
+                              return (
+                                <option key={version} value={version}>
+                                  v{version}
+                                </option>
+                              );
+                            })
+                          : null}
+                      </select>
                     </div>
                     <button
                       type="button"
diff --git a/ui/src/components/PageTabBar.tsx b/ui/src/components/PageTabBar.tsx
index 432a3891fe..7afa07ced1 100644
--- a/ui/src/components/PageTabBar.tsx
+++ b/ui/src/components/PageTabBar.tsx
@@ -8,7 +8,7 @@ export interface PageTabItem {
 }
 
 interface PageTabBarProps {
-  items: PageTabItem[];
+  items: readonly PageTabItem[];
   value?: string;
   onValueChange?: (value: string) => void;
   align?: "center" | "start";
diff --git a/ui/src/components/environment-variables-editor/SecretPicker.tsx b/ui/src/components/environment-variables-editor/SecretPicker.tsx
index dd42e7800f..2a8216d1e8 100644
--- a/ui/src/components/environment-variables-editor/SecretPicker.tsx
+++ b/ui/src/components/environment-variables-editor/SecretPicker.tsx
@@ -132,7 +132,7 @@ export interface SecretPickerProps {
   disabled?: boolean;
   onSelect: (secretId: string) => void;
   /** Open the create-secret popover, seeded with the current query. */
-  onCreateNew: (query: string) => void;
+  onCreateNew?: (query: string) => void;
   triggerClassName?: string;
   /** SearchableSelect auto-opens on focus; suppress for programmatic control. */
   disablePortal?: boolean;
@@ -317,21 +317,23 @@ export function SecretPicker({
           </span>
         );
       }}
-      createItem={{
-        render: (query) => (
-          <span className="flex items-center gap-1.5 text-sm">
-            <Plus className="size-3.5 shrink-0" />
-            {query.trim() ? (
-              <span>
-                Create secret <span className="font-mono">&ldquo;{query.trim()}&rdquo;</span>…
+      createItem={onCreateNew
+        ? {
+            render: (query) => (
+              <span className="flex items-center gap-1.5 text-sm">
+                <Plus className="size-3.5 shrink-0" />
+                {query.trim() ? (
+                  <span>
+                    Create secret <span className="font-mono">&ldquo;{query.trim()}&rdquo;</span>…
+                  </span>
+                ) : (
+                  <span>Create new secret…</span>
+                )}
               </span>
-            ) : (
-              <span>Create new secret…</span>
-            )}
-          </span>
-        ),
-        onSelect: (query) => onCreateNew(query),
-      }}
+            ),
+            onSelect: (query) => onCreateNew(query),
+          }
+        : undefined}
     />
   );
 }
diff --git a/ui/src/pages/AgentDetail.progress.test.ts b/ui/src/pages/AgentDetail.progress.test.ts
index e7d017d26d..c0d109f673 100644
--- a/ui/src/pages/AgentDetail.progress.test.ts
+++ b/ui/src/pages/AgentDetail.progress.test.ts
@@ -3,13 +3,65 @@ import { describe, expect, it, vi } from "vitest";
 
 import { queryKeys } from "../lib/queryKeys";
 import {
+  AGENT_DETAIL_TABS,
+  DISCARD_AGENT_CONFIG_CHANGES_MESSAGE,
+  agentConfigHistoryRestoreDelta,
   buildHeartbeatProgressLogLine,
+  confirmAgentConfigNavigation,
   heartbeatProgressLogLineKey,
+  parseAgentDetailView,
+  restoreAgentConfigHistoryEntry,
   runDetailRefetchIntervalMs,
   shouldPollRunShellLog,
   syncAgentRouteAfterRename,
 } from "./AgentDetail";
 
+describe("agent detail tabs", () => {
+  it("exposes Secrets as its own route-backed tab", () => {
+    expect(AGENT_DETAIL_TABS.map((tab) => tab.label)).toContain("Secrets");
+    expect(parseAgentDetailView("secrets")).toBe("secrets");
+  });
+
+  it("requires confirmation before navigation can discard unsaved configuration", () => {
+    const confirm = vi.fn().mockReturnValue(false);
+
+    expect(confirmAgentConfigNavigation(true, confirm)).toBe(false);
+    expect(confirm).toHaveBeenCalledWith(DISCARD_AGENT_CONFIG_CHANGES_MESSAGE);
+
+    confirm.mockReturnValue(true);
+    expect(confirmAgentConfigNavigation(true, confirm)).toBe(true);
+    expect(confirmAgentConfigNavigation(false, confirm)).toBe(true);
+    expect(confirm).toHaveBeenCalledTimes(2);
+  });
+
+  it("restores the prior history entry when Back or Forward navigation is rejected", () => {
+    expect(agentConfigHistoryRestoreDelta(4, 2)).toBe(2);
+    expect(agentConfigHistoryRestoreDelta(2, 4)).toBe(-2);
+    expect(agentConfigHistoryRestoreDelta(2, 2)).toBeNull();
+    expect(agentConfigHistoryRestoreDelta(undefined, 1)).toBeNull();
+  });
+
+  it("restores the guarded URL when React Router history indexes are unavailable", () => {
+    const history = {
+      go: vi.fn(),
+      pushState: vi.fn(),
+    };
+    const currentState = { key: "agent-config" };
+
+    expect(restoreAgentConfigHistoryEntry(history, {
+      index: undefined,
+      state: currentState,
+      url: "https://paperclip.test/agents/eng/secrets",
+    }, undefined)).toBe(false);
+    expect(history.pushState).toHaveBeenCalledWith(
+      currentState,
+      "",
+      "https://paperclip.test/agents/eng/secrets",
+    );
+    expect(history.go).not.toHaveBeenCalled();
+  });
+});
+
 describe("buildHeartbeatProgressLogLine", () => {
   it("renders progress messages with phase prefixes as system log lines", () => {
     expect(
diff --git a/ui/src/pages/AgentDetail.tsx b/ui/src/pages/AgentDetail.tsx
index 5b87a80505..1f247223b4 100644
--- a/ui/src/pages/AgentDetail.tsx
+++ b/ui/src/pages/AgentDetail.tsx
@@ -275,11 +275,58 @@ function scrollToContainerBottom(container: ScrollContainer, behavior: ScrollBeh
   container.scrollTo({ top: container.scrollHeight, behavior });
 }
 
-type AgentDetailView = "dashboard" | "instructions" | "configuration" | "skills" | "tools" | "runs" | "audit" | "budget";
+type AgentDetailView = "dashboard" | "instructions" | "configuration" | "secrets" | "skills" | "tools" | "runs" | "audit" | "budget";
 
-function parseAgentDetailView(value: string | null): AgentDetailView {
+export const AGENT_DETAIL_TABS: ReadonlyArray<{ value: AgentDetailView; label: string }> = [
+  { value: "dashboard", label: "Dashboard" },
+  { value: "instructions", label: "Instructions" },
+  { value: "skills", label: "Skills" },
+  { value: "configuration", label: "Configuration" },
+  { value: "secrets", label: "Secrets" },
+  { value: "tools", label: "Tools" },
+  { value: "runs", label: "Runs" },
+  { value: "audit", label: "Audit" },
+  { value: "budget", label: "Budget" },
+];
+
+export const DISCARD_AGENT_CONFIG_CHANGES_MESSAGE = "Discard unsaved agent configuration changes?";
+
+export function confirmAgentConfigNavigation(
+  dirty: boolean,
+  confirm: (message: string) => boolean = (message) =>
+    typeof window === "undefined" || window.confirm(message),
+): boolean {
+  return !dirty || confirm(DISCARD_AGENT_CONFIG_CHANGES_MESSAGE);
+}
+
+export function agentConfigHistoryRestoreDelta(currentIndex: unknown, nextIndex: unknown): number | null {
+  if (typeof currentIndex !== "number" || typeof nextIndex !== "number") return null;
+  const delta = currentIndex - nextIndex;
+  return delta === 0 ? null : delta;
+}
+
+export function restoreAgentConfigHistoryEntry(
+  history: Pick<History, "go" | "pushState">,
+  currentEntry: { index: unknown; state: unknown; url: string },
+  nextIndex: unknown,
+): boolean {
+  const restoreDelta = agentConfigHistoryRestoreDelta(currentEntry.index, nextIndex);
+  if (restoreDelta === null) {
+    // Some legacy URL-cleanup paths erased React Router's history index. A
+    // fresh copy of the guarded entry is the only safe way to return without
+    // letting Router consume the unindexed destination and discard the form.
+    history.pushState(currentEntry.state, "", currentEntry.url);
+    return false;
+  }
+
+  history.go(restoreDelta);
+  return true;
+}
+
+export function parseAgentDetailView(value: string | null): AgentDetailView {
   if (value === "instructions" || value === "prompts") return "instructions";
   if (value === "configure" || value === "configuration") return "configuration";
+  if (value === "secrets") return "secrets";
   if (value === "skills") return "skills";
   if (value === "tools") return "tools";
   if (value === "budget") return "budget";
@@ -732,6 +779,9 @@ export function AgentDetail() {
   const canFetchAgent = routeAgentRef.length > 0 && (isUuidLike(routeAgentRef) || Boolean(lookupCompanyId));
   const setSaveConfigAction = useCallback((fn: (() => void) | null) => { saveConfigActionRef.current = fn; }, []);
   const setCancelConfigAction = useCallback((fn: (() => void) | null) => { cancelConfigActionRef.current = fn; }, []);
+  const prepareAgentNavigation = useCallback(() => {
+    return confirmAgentConfigNavigation(configDirty);
+  }, [configDirty]);
 
   const { data: agent, isLoading, error } = useQuery<AgentDetailRecord>({
     queryKey: [...queryKeys.agents.detail(routeAgentRef), lookupCompanyId ?? null],
@@ -907,17 +957,19 @@ export function AgentDetail() {
         ? "instructions"
         : activeView === "configuration"
           ? "configuration"
-          : activeView === "skills"
-            ? "skills"
-            : activeView === "tools"
-              ? "tools"
-              : activeView === "runs"
-                ? "runs"
-                : activeView === "audit"
-                  ? "audit"
-                  : activeView === "budget"
-                    ? "budget"
-              : "dashboard";
+          : activeView === "secrets"
+            ? "secrets"
+            : activeView === "skills"
+              ? "skills"
+              : activeView === "tools"
+                ? "tools"
+                : activeView === "runs"
+                  ? "runs"
+                  : activeView === "audit"
+                    ? "audit"
+                    : activeView === "budget"
+                      ? "budget"
+                      : "dashboard";
     if (routeAgentRef !== canonicalAgentRef || urlTab !== canonicalTab) {
       navigate(`/agents/${canonicalAgentRef}/${canonicalTab}`, { replace: true });
       return;
@@ -1018,6 +1070,8 @@ export function AgentDetail() {
         crumbs.push({ label: "Instructions" });
       } else if (activeView === "configuration") {
         crumbs.push({ label: "Configuration" });
+      } else if (activeView === "secrets") {
+        crumbs.push({ label: "Secrets" });
       // } else if (activeView === "skills") { // TODO: bring back later
       //   crumbs.push({ label: "Skills" });
       } else if (activeView === "tools") {
@@ -1056,6 +1110,74 @@ export function AgentDetail() {
     }, [configDirty]),
   );
 
+  useEffect(() => {
+    if (!configDirty) return;
+
+    function handleDocumentClick(event: MouseEvent) {
+      if (
+        event.defaultPrevented ||
+        event.button !== 0 ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.shiftKey
+      ) {
+        return;
+      }
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      const anchor = target.closest("a[href]");
+      if (!(anchor instanceof HTMLAnchorElement)) return;
+      if (anchor.target && anchor.target !== "_self") return;
+
+      const nextUrl = new URL(anchor.href, window.location.href);
+      const currentUrl = new URL(window.location.href);
+      if (nextUrl.origin !== currentUrl.origin) return;
+      if (
+        nextUrl.pathname === currentUrl.pathname &&
+        nextUrl.search === currentUrl.search &&
+        nextUrl.hash === currentUrl.hash
+      ) {
+        return;
+      }
+      if (prepareAgentNavigation()) return;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    document.addEventListener("click", handleDocumentClick, true);
+    return () => document.removeEventListener("click", handleDocumentClick, true);
+  }, [configDirty, prepareAgentNavigation]);
+
+  useEffect(() => {
+    if (!configDirty) return;
+
+    // BrowserRouter updates after popstate. Run first in the capture phase so a
+    // rejected Back/Forward navigation can be restored before React Router
+    // consumes it and unmounts the route-backed form.
+    const currentEntry = {
+      index: window.history.state?.idx,
+      state: window.history.state,
+      url: window.location.href,
+    };
+    let restoring = false;
+
+    function handlePopState(event: PopStateEvent) {
+      if (restoring) {
+        restoring = false;
+        return;
+      }
+
+      if (prepareAgentNavigation()) return;
+
+      event.stopImmediatePropagation();
+      restoring = restoreAgentConfigHistoryEntry(window.history, currentEntry, event.state?.idx);
+    }
+
+    window.addEventListener("popstate", handlePopState, true);
+    return () => window.removeEventListener("popstate", handlePopState, true);
+  }, [configDirty, prepareAgentNavigation]);
+
   if (isLoading) return <PageSkeleton variant="detail" />;
   if (error) return <p className="text-sm text-destructive">{error.message}</p>;
   if (!agent) return null;
@@ -1065,7 +1187,9 @@ export function AgentDetail() {
   const isPendingApproval = agent.status === "pending_approval";
   const hasInvalidOrgChain = agent.orgChainHealth?.status === "invalid_org_chain";
   const pausedEscalationWarning = !hasInvalidOrgChain ? agent.orgChainHealth?.escalationWarning ?? null : null;
-  const showConfigActionBar = (activeView === "configuration" || activeView === "instructions") && (configDirty || configSaving);
+  const showConfigActionBar = (
+    activeView === "configuration" || activeView === "instructions" || activeView === "secrets"
+  ) && (configDirty || configSaving);
   const showLeftAgentNotice = agentMembershipState === "left" && !dismissedLeftAgentIds.has(agent.id);
   const agentMembershipPending =
     membershipMutation.isPending &&
@@ -1075,6 +1199,11 @@ export function AgentDetail() {
   const agentStarPending = agentMembershipPending && membershipMutation.variables?.starred !== undefined;
   const agentJoinLeavePending = agentMembershipPending && membershipMutation.variables?.starred === undefined;
 
+  function handleAgentTabChange(value: string) {
+    if (value === activeView || !prepareAgentNavigation()) return;
+    navigate(`/agents/${canonicalAgentRef}/${value}`);
+  }
+
   return (
     <div className={cn("space-y-6", isMobile && showConfigActionBar && "pb-24")}>
       {showLeftAgentNotice ? (
@@ -1183,6 +1312,8 @@ export function AgentDetail() {
             actionsDisabled={agentAction.isPending}
             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)}
@@ -1268,21 +1399,12 @@ export function AgentDetail() {
       {!urlRunId && (
         <Tabs
           value={activeView}
-          onValueChange={(value) => navigate(`/agents/${canonicalAgentRef}/${value}`)}
+          onValueChange={handleAgentTabChange}
         >
           <PageTabBar
-            items={[
-              { value: "dashboard", label: "Dashboard" },
-              { value: "instructions", label: "Instructions" },
-              { value: "skills", label: "Skills" },
-              { value: "configuration", label: "Configuration" },
-              { value: "tools", label: "Tools" },
-              { value: "runs", label: "Runs" },
-              { value: "audit", label: "Audit" },
-              { value: "budget", label: "Budget" },
-            ]}
+            items={AGENT_DETAIL_TABS}
             value={activeView}
-            onValueChange={(value) => navigate(`/agents/${canonicalAgentRef}/${value}`)}
+            onValueChange={handleAgentTabChange}
           />
         </Tabs>
       )}
@@ -1388,6 +1510,21 @@ export function AgentDetail() {
         />
       )}
 
+      {activeView === "secrets" && (
+        <div className="max-w-3xl">
+          <ConfigurationTab
+            agent={agent}
+            companyId={resolvedCompanyId ?? undefined}
+            onDirtyChange={setConfigDirty}
+            onSaveActionChange={setSaveConfigAction}
+            onCancelActionChange={setCancelConfigAction}
+            onSavingChange={setConfigSaving}
+            updatePermissions={updatePermissions}
+            content="secrets"
+          />
+        </div>
+      )}
+
       {activeView === "skills" && (
         <AgentSkillsTab
           agent={agent}
@@ -1935,6 +2072,7 @@ function ConfigurationTab({
   updatePermissions,
   hidePromptTemplate,
   hideInstructionsFile,
+  content = "configuration",
 }: {
   agent: AgentDetailRecord;
   companyId?: string;
@@ -1945,6 +2083,7 @@ function ConfigurationTab({
   updatePermissions: { mutate: (permissions: AgentPermissionUpdate) => void; isPending: boolean };
   hidePromptTemplate?: boolean;
   hideInstructionsFile?: boolean;
+  content?: "configuration" | "secrets";
 }) {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
@@ -1959,7 +2098,7 @@ function ConfigurationTab({
         ? queryKeys.agents.adapterModels(companyId, agent.adapterType)
         : ["agents", "none", "adapter-models", agent.adapterType],
     queryFn: () => agentsApi.adapterModels(companyId!, agent.adapterType),
-    enabled: Boolean(companyId),
+    enabled: Boolean(companyId) && content === "configuration",
   });
 
   const lowTrustSelected = getTrustPreset(agent.permissions) === "low_trust_review";
@@ -1967,7 +2106,7 @@ function ConfigurationTab({
   const { data: boundaryProjects, isLoading: boundaryProjectsLoading } = useQuery({
     queryKey: companyId ? queryKeys.projects.list(companyId) : ["projects", "__low-trust-disabled"],
     queryFn: () => projectsApi.list(companyId!),
-    enabled: Boolean(companyId && lowTrustSelected),
+    enabled: Boolean(companyId && lowTrustSelected) && content === "configuration",
   });
 
   const { data: boundaryIssues, isLoading: boundaryIssuesLoading } = useQuery({
@@ -1975,7 +2114,7 @@ function ConfigurationTab({
       ? [...queryKeys.issues.list(companyId), "low-trust-boundary-candidates"]
       : ["issues", "__low-trust-disabled"],
     queryFn: () => issuesApi.list(companyId!, { limit: 100, sortField: "updated", sortDir: "desc" }),
-    enabled: Boolean(companyId && lowTrustSelected),
+    enabled: Boolean(companyId && lowTrustSelected) && content === "configuration",
   });
 
   const updateAgent = useMutation({
@@ -1987,7 +2126,7 @@ function ConfigurationTab({
       queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.id) });
       queryClient.invalidateQueries({ queryKey: queryKeys.agents.configRevisions(agent.id) });
       queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(agent.companyId) });
-      if (!syncAgentRouteAfterRename(queryClient, navigate, agent, updated, urlTab ?? "configuration")) {
+      if (!syncAgentRouteAfterRename(queryClient, navigate, agent, updated, urlTab ?? content)) {
         queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.urlKey) });
       }
       pushToast({ title: "Agent saved", tone: "success" });
@@ -2046,13 +2185,16 @@ function ConfigurationTab({
         hideInlineSave
         hidePromptTemplate={hidePromptTemplate}
         hideInstructionsFile={hideInstructionsFile}
+        content={content}
         sectionLayout="cards"
       />
-      <p className="text-xs text-muted-foreground">
-        Saved adapter config affects the next run. Active runs keep the config they started with, and config changes may start a fresh adapter session.
-      </p>
+      {content === "configuration" ? (
+        <p className="text-xs text-muted-foreground">
+          Saved adapter config affects the next run. Active runs keep the config they started with, and config changes may start a fresh adapter session.
+        </p>
+      ) : null}
 
-      <TrustPresetSection
+      {content === "configuration" ? <TrustPresetSection
         permissions={agent.permissions}
         disabled={updatePermissions.isPending}
         companyId={companyId}
@@ -2073,9 +2215,9 @@ function ConfigurationTab({
             ...buildPermissionsForTrustPreset(nextPermissions, nextPermissions.trustPreset === "low_trust_review" ? "low_trust_review" : "standard"),
           })
         }
-      />
+      /> : null}
 
-      <div>
+      {content === "configuration" ? <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">
@@ -2136,7 +2278,7 @@ function ConfigurationTab({
             />
           </div>
         </div>
-      </div>
+      </div> : null}
     </div>
   );
 }
diff --git a/ui/storybook/stories/agent-management.stories.tsx b/ui/storybook/stories/agent-management.stories.tsx
index 9dffe870e7..c32646d94e 100644
--- a/ui/storybook/stories/agent-management.stories.tsx
+++ b/ui/storybook/stories/agent-management.stories.tsx
@@ -297,8 +297,32 @@ const storybookSecrets: CompanySecret[] = [
 	    createdByAgentId: "agent-cto",
     createdByUserId: null,
     createdAt: recent(12_000),
-    updatedAt: recent(80),
-  },
+	    updatedAt: recent(80),
+	  },
+	  {
+	    id: "secret-prod-database",
+	    companyId: COMPANY_ID,
+	    scope: "company",
+	    ownerUserId: null,
+	    userSecretDefinitionId: null,
+	    key: "/paperclip-cloud/prod/database/url",
+	    name: "/paperclip-cloud/prod/database/url",
+	    provider: "local_encrypted",
+	    status: "active",
+	    managedMode: "paperclip_managed",
+	    externalRef: null,
+	    providerConfigId: null,
+	    providerMetadata: null,
+	    latestVersion: 2,
+	    description: "Production database URL grouped under its secret folder path.",
+	    lastResolvedAt: recent(30),
+	    lastRotatedAt: recent(8_000),
+	    deletedAt: null,
+	    createdByAgentId: "agent-cto",
+	    createdByUserId: null,
+	    createdAt: recent(8_000),
+	    updatedAt: recent(30),
+	  },
 ];
 
 const adapterFixtures: AdapterInfo[] = [
@@ -498,6 +522,28 @@ function AgentConfigFormStory() {
   );
 }
 
+function AgentSecretsFormStory() {
+  return (
+    <AgentConfigForm
+      mode="edit"
+      agent={agentWith({
+        id: "agent-secrets-story",
+        adapterConfig: {
+          "access.OPENAI": {
+            type: "secret_ref",
+            secretId: "secret-openai",
+            version: "latest",
+          },
+        },
+      })}
+      onSave={() => undefined}
+      content="secrets"
+      sectionLayout="cards"
+      hideInlineSave
+    />
+  );
+}
+
 function IconPickerMatrix() {
   const [selectedIcon, setSelectedIcon] = useState("code");
   const visibleIcons = AGENT_ICON_NAMES.slice(0, 28);
@@ -743,6 +789,12 @@ function AgentManagementStories() {
             </div>
           </Section>
 
+          <Section eyebrow="Agent Secrets tab" title="Searchable API-access secret bindings">
+            <div className="max-w-4xl">
+              <AgentSecretsFormStory />
+            </div>
+          </Section>
+
           <Section eyebrow="AgentIconPicker" title="Available icon grid with selected state">
             <IconPickerMatrix />
           </Section>