@stigmer/react 3.2.2 → 3.3.0

package/src/session/audience.ts

@@ -19,7 +19,12 @@
  *   behavioral, not just cosmetic — the organisms also skip the
  *   org-level reads a guest principal cannot make (default-agent
  *   resolution, session→agent derivation, personal environments) and
- *   never fall back to the org's default agent.
+ *   never fall back to the org's default agent. Approval mechanics are
+ *   also withheld (DD-014): the HITL gate protects the ORG's tools and
+ *   an anonymous visitor is not its trustee — guest executions run in
+ *   unattended approval mode server-side (gated tools auto-skip and the
+ *   agent explains in plain language), so tool-approval vocabulary never
+ *   reaches a guest.
  * - `"observer"` — a read-only transcript for someone watching a
  *   conversation they cannot participate in, e.g. a channel connector
  *   or org admin reviewing a Slack/WhatsApp conversation the channel

package/src/session/useEditSessionPrep.ts

@@ -7,7 +7,7 @@ import { useStigmer } from "../hooks.js";
 import { useAgent } from "../agent/index.js";
 import { useMcpServer } from "../mcp-server/index.js";
 import { useSkill } from "../skill/index.js";
-import { serializeAgentYaml, serializeMcpServerYaml } from "../library/index.js";
+import { serializeManifest } from "@stigmer/sdk";
 import type { DraftResourceType } from "./draft.js";
 
 /** Return value of {@link useEditSessionPrep}. */
@@ -64,7 +64,7 @@ export function useEditSessionPrep(
     if (draftType === "agent" && editAgent) {
       built.current = true;
       try {
-        const yaml = serializeAgentYaml(editAgent);
+        const yaml = serializeManifest(editAgent);
         const slug = editAgent.metadata?.slug ?? "agent";
         setFiles([new File([yaml], `${slug}.yaml`, { type: "text/yaml" })]);
       } catch {
@@ -75,7 +75,7 @@ export function useEditSessionPrep(
     if (draftType === "mcp-server" && editMcpServer) {
       built.current = true;
       try {
-        const yaml = serializeMcpServerYaml(editMcpServer);
+        const yaml = serializeManifest(editMcpServer);
         const slug = editMcpServer.metadata?.slug ?? "mcp-server";
         setFiles([new File([yaml], `${slug}.yaml`, { type: "text/yaml" })]);
       } catch {

package/src/settings/__tests__/useSettingsNavGroups.test.tsx

@@ -0,0 +1,138 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { useRef, useState } from "react";
+import { SETTINGS_NAV_GROUPS, PLATFORM_SETTINGS_NAV_GROUP } from "../settings-nav";
+import { useSettingsNavGroups } from "../useSettingsNavGroups";
+
+// Drive the nav gate through the permission hook. The fail-closed
+// semantics themselves are covered by useCheckPermission's own suite —
+// here we assert the nav hook's per-item composition of the verdicts.
+// Verdicts are keyed by relation so each platform permission can be
+// granted independently.
+let verdicts: Record<string, boolean> = {};
+let checkedRelations: string[] = [];
+let lastCheckArgs: readonly unknown[] = [];
+
+vi.mock("../../iam-policy/useCheckPermission", () => ({
+  useCheckPermission: (
+    ...args: [unknown, string, { fail?: string } | undefined]
+  ) => {
+    lastCheckArgs = args;
+    checkedRelations.push(args[1]);
+    return { allowed: verdicts[args[1]] === true, isLoading: false, error: null };
+  },
+}));
+
+afterEach(() => {
+  cleanup();
+  verdicts = {};
+  checkedRelations = [];
+});
+
+function GroupsProbe() {
+  const groups = useSettingsNavGroups();
+  const platform = groups.find((g) => g.label === PLATFORM_SETTINGS_NAV_GROUP.label);
+  return (
+    <div
+      data-testid="groups"
+      data-labels={groups.map((g) => g.label).join(",")}
+      data-platform-items={platform?.items.map((i) => i.label).join(",") ?? ""}
+    />
+  );
+}
+
+const BASE_LABELS = SETTINGS_NAV_GROUPS.map((g) => g.label).join(",");
+
+describe("useSettingsNavGroups", () => {
+  it("appends the full Platform group when the operator holds every platform permission", () => {
+    verdicts = {
+      can_manage_model_pricing: true,
+      can_manage_cursor_accounts: true,
+    };
+    render(<GroupsProbe />);
+
+    const el = screen.getByTestId("groups");
+    expect(el.getAttribute("data-labels")).toBe(
+      `${BASE_LABELS},${PLATFORM_SETTINGS_NAV_GROUP.label}`,
+    );
+    expect(el.getAttribute("data-platform-items")).toBe(
+      "Pricing Governance,Cursor Accounts",
+    );
+  });
+
+  it("filters per item: pricing-only operator sees only Pricing Governance", () => {
+    verdicts = { can_manage_model_pricing: true };
+    render(<GroupsProbe />);
+
+    expect(screen.getByTestId("groups").getAttribute("data-platform-items")).toBe(
+      "Pricing Governance",
+    );
+  });
+
+  it("filters per item: cursor-accounts-only operator sees only Cursor Accounts", () => {
+    verdicts = { can_manage_cursor_accounts: true };
+    render(<GroupsProbe />);
+
+    expect(screen.getByTestId("groups").getAttribute("data-platform-items")).toBe(
+      "Cursor Accounts",
+    );
+  });
+
+  it("returns exactly the base groups when not authorized", () => {
+    function IdentityProbe() {
+      const groups = useSettingsNavGroups();
+      return (
+        <div
+          data-testid="identity"
+          data-is-base={String(groups === SETTINGS_NAV_GROUPS)}
+        />
+      );
+    }
+    render(<IdentityProbe />);
+
+    // Not just equivalent — the same array, no needless copy.
+    expect(screen.getByTestId("identity").getAttribute("data-is-base")).toBe("true");
+  });
+
+  it("checks every declared platform permission on platform:stigmer, fail-closed", () => {
+    render(<GroupsProbe />);
+
+    // Exhaustiveness guard: every requiredPermission declared on the
+    // platform group must have a corresponding hook check — a new
+    // platform surface that forgets to add its check fails here.
+    const declared = PLATFORM_SETTINGS_NAV_GROUP.items.map(
+      (item) => item.requiredPermission,
+    );
+    for (const permission of declared) {
+      expect(permission, "platform items must declare requiredPermission").toBeDefined();
+      expect(checkedRelations).toContain(permission);
+    }
+    expect(lastCheckArgs[0]).toEqual({ kind: "platform", id: "stigmer" });
+    expect(lastCheckArgs[2]).toEqual({ fail: "closed" });
+  });
+
+  it("keeps the array reference stable across re-renders", () => {
+    verdicts = {
+      can_manage_model_pricing: true,
+      can_manage_cursor_accounts: true,
+    };
+
+    function StabilityProbe() {
+      const groups = useSettingsNavGroups();
+      const first = useRef(groups);
+      const [, force] = useState(0);
+      return (
+        <button
+          data-testid="stability"
+          data-stable={String(first.current === groups)}
+          onClick={() => force((n) => n + 1)}
+        />
+      );
+    }
+
+    render(<StabilityProbe />);
+    const el = screen.getByTestId("stability");
+    fireEvent.click(el);
+    expect(el.getAttribute("data-stable")).toBe("true");
+  });
+});

package/src/settings/index.ts

@@ -1,5 +1,9 @@
-export { SETTINGS_NAV_GROUPS } from "./settings-nav.js";
+export {
+  SETTINGS_NAV_GROUPS,
+  PLATFORM_SETTINGS_NAV_GROUP,
+} from "./settings-nav.js";
 export type { SettingsNavItem, SettingsNavGroup } from "./settings-nav.js";
+export { useSettingsNavGroups } from "./useSettingsNavGroups.js";
 
 export { ApiKeysSection } from "./ApiKeysSection.js";
 export { BillingSection } from "./BillingSection.js";

package/src/settings/settings-nav.ts

@@ -8,7 +8,9 @@ import {
   KeyRound,
   Link,
   MessageSquare,
+  MousePointerClick,
   Plug,
+  Scale,
   ShieldCheck,
   Users,
 } from "lucide-react";
@@ -24,6 +26,14 @@ export interface SettingsNavItem {
     /** Optional CSS class name applied to the icon. */
     className?: string;
   }>;
+  /**
+   * Platform-level permission (on `platform:stigmer`) required for this
+   * entry to appear. Only meaningful inside
+   * {@link PLATFORM_SETTINGS_NAV_GROUP} — items in the base groups are
+   * visible to every signed-in user and leave this unset.
+   * {@link useSettingsNavGroups} checks it fail-closed.
+   */
+  readonly requiredPermission?: string;
 }
 
 /** Grouping model used to render settings navigation sections. */
@@ -82,3 +92,36 @@ export const SETTINGS_NAV_GROUPS: readonly SettingsNavGroup[] = [
     ],
   },
 ];
+
+/**
+ * Stigmer-internal platform-operator navigation group.
+ *
+ * Deliberately NOT part of {@link SETTINGS_NAV_GROUPS}: that constant
+ * means "groups every signed-in user sees", and its members must never
+ * change based on who is looking. This group is appended for platform
+ * operators only — use {@link useSettingsNavGroups} to get the
+ * permission-aware list instead of composing the two by hand.
+ *
+ * Every item here declares its `requiredPermission`; the hook filters
+ * per item (fail-closed), so an operator holding one platform permission
+ * but not another sees exactly their slice of this group.
+ */
+export const PLATFORM_SETTINGS_NAV_GROUP: SettingsNavGroup = {
+  label: "Platform",
+  description:
+    "Stigmer-internal operations. Visible to platform operators only.",
+  items: [
+    {
+      href: "/settings/pricing-governance",
+      label: "Pricing Governance",
+      icon: Scale,
+      requiredPermission: "can_manage_model_pricing",
+    },
+    {
+      href: "/settings/cursor-accounts",
+      label: "Cursor Accounts",
+      icon: MousePointerClick,
+      requiredPermission: "can_manage_cursor_accounts",
+    },
+  ],
+};

package/src/settings/useSettingsNavGroups.ts

@@ -0,0 +1,81 @@
+"use client";
+
+import { useMemo } from "react";
+import { useCheckPermission } from "../iam-policy/useCheckPermission.js";
+import {
+  PLATFORM_SETTINGS_NAV_GROUP,
+  SETTINGS_NAV_GROUPS,
+  type SettingsNavGroup,
+} from "./settings-nav.js";
+
+/**
+ * The `platform` singleton — platform-level permissions are always
+ * checked against this one resource (mirrors the server-side
+ * `resource_id = "stigmer"` RPC config).
+ */
+const PLATFORM_RESOURCE = { kind: "platform", id: "stigmer" } as const;
+
+/**
+ * Permission-aware settings navigation: {@link SETTINGS_NAV_GROUPS}
+ * for everyone, plus the {@link PLATFORM_SETTINGS_NAV_GROUP} items the
+ * caller's platform permissions unlock (per-item `requiredPermission`,
+ * checked against `platform:stigmer`). The group appears when at least
+ * one of its items is visible.
+ *
+ * The checks run fail-closed — the opposite of the `useCheckPermission`
+ * default — because navigation is *discoverability*, not *capability*:
+ * an action gate can safely fail open (the server re-checks every
+ * request), but an operator-only nav entry must not appear while the
+ * check is loading, when it errors, or on deployments where the IAM
+ * service (and the surface it points to) does not exist.
+ *
+ * Implementation note: hooks must be called unconditionally, so each
+ * distinct platform permission gets its own static check below. When a
+ * new platform surface adds a new permission, add its check to
+ * PLATFORM_PERMISSION_CHECKS' shape here — the exhaustiveness guard in
+ * the tests catches a forgotten one.
+ *
+ * @example
+ * ```tsx
+ * const groups = useSettingsNavGroups();
+ * return groups.map((group) => <NavGroup key={group.label} group={group} />);
+ * ```
+ */
+export function useSettingsNavGroups(): readonly SettingsNavGroup[] {
+  const pricing = useCheckPermission(
+    PLATFORM_RESOURCE,
+    "can_manage_model_pricing",
+    { fail: "closed" },
+  );
+  const cursorAccounts = useCheckPermission(
+    PLATFORM_RESOURCE,
+    "can_manage_cursor_accounts",
+    { fail: "closed" },
+  );
+
+  const pricingAllowed = pricing.allowed;
+  const cursorAccountsAllowed = cursorAccounts.allowed;
+
+  return useMemo(() => {
+    const verdicts: Record<string, boolean> = {
+      can_manage_model_pricing: pricingAllowed,
+      can_manage_cursor_accounts: cursorAccountsAllowed,
+    };
+
+    const visibleItems = PLATFORM_SETTINGS_NAV_GROUP.items.filter(
+      // Fail closed on both axes: an item with no declared permission or
+      // with a permission this hook does not check yet stays hidden.
+      (item) =>
+        item.requiredPermission !== undefined &&
+        verdicts[item.requiredPermission] === true,
+    );
+
+    if (visibleItems.length === 0) {
+      return SETTINGS_NAV_GROUPS;
+    }
+    return [
+      ...SETTINGS_NAV_GROUPS,
+      { ...PLATFORM_SETTINGS_NAV_GROUP, items: visibleItems },
+    ];
+  }, [pricingAllowed, cursorAccountsAllowed]);
+}

package/src/skill/SkillDetailView.tsx

@@ -254,10 +254,14 @@ export function SkillDetailView({
     statusLabel: status ? skillStateLabel(status.state) : undefined,
   };
 
-  // Inline visibility is read-only (at-a-glance); editing lives in the
-  // Manage access dialog, the single writer for both access axes.
+  // Inline visibility is at-a-glance AND a shortcut into the Manage access
+  // dialog — the single writer for both access axes. The chip is navigation
+  // only; it stays a static badge for users who cannot view access.
   const visibilityControl = meta ? (
-    <VisibilityBadge visibility={meta.visibility} />
+    <VisibilityBadge
+      visibility={meta.visibility}
+      onClick={access.action ? access.open : undefined}
+    />
   ) : undefined;
 
   const mergedActions = access.action

package/src/workflow/WorkflowAgentCallTranscript.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+// The inline child-transcript body of an AGENT_CALL task card (T07): the
+// card IS the session experience — live while running, full history when
+// settled — replacing the S4 "Open transcript" document tab.
+
+import { memo, useCallback, useMemo } from "react";
+import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import {
+  FileChangeSetStatus,
+  type FileDecisionAction,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import type { FileChangeSet } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/filereview_pb";
+import { displayFileChangeSets } from "@stigmer/sdk";
+import { cn } from "@stigmer/theme";
+import { useLiveAgentExecution } from "../execution/useLiveAgentExecution.js";
+import { MessageThread } from "../execution/MessageThread.js";
+import { ThreadSkeleton } from "../execution/ThreadSkeleton.js";
+import { FileReviewDock } from "../execution/FileReviewDock.js";
+import type { FileDecisionOptions } from "../execution/useFileReview.js";
+import { isTerminalPhase } from "../execution/execution-phases.js";
+import { useInViewport } from "../internal/useInViewport.js";
+import type { UseWorkflowExecutionActionsReturn } from "./useWorkflowExecutionActions.js";
+
+/** Stable empty list so the thread's memoized rows keep identity (DD-010). */
+const EMPTY_EXECUTIONS: readonly AgentExecution[] = [];
+
+/**
+ * The HITL wiring for an inline child transcript: the slice of
+ * {@link UseWorkflowExecutionActionsReturn} needed to submit child-gate
+ * decisions at the WORKFLOW level.
+ *
+ * A `Pick` (not a new shape) so the bundle can never drift from the actions
+ * hook — the viewer builds it from its single `useWorkflowExecutionActions`
+ * instance, so a gate's in-flight spinner or failure is identical wherever
+ * that gate is shown.
+ */
+export type WorkflowAgentExecutionHitl = Pick<
+  UseWorkflowExecutionActionsReturn,
+  | "submitApproval"
+  | "approvalSubmittingToolCallIds"
+  | "approvalErrorsByToolCallId"
+  | "submitFileDecision"
+  | "fileDecisionSubmittingKeys"
+  | "fileDecisionErrorsByKey"
+>;
+
+/** Props for {@link WorkflowAgentCallTranscript}. */
+export interface WorkflowAgentCallTranscriptProps {
+  /** ID of the child AgentExecution whose transcript to render. */
+  readonly childExecutionId: string;
+  /** Slug of the agent the task called, when known (labels the region). */
+  readonly agentSlug?: string;
+  /**
+   * Workflow-level HITL handlers. When provided, the transcript is
+   * interactive: tool-approval gates render their decision cards inline on
+   * the gated rows, and pending file reviews dock at the bottom. When
+   * omitted, the transcript is read-only — gates show status only
+   * (backward compatible, DD-011).
+   */
+  readonly hitl?: WorkflowAgentExecutionHitl;
+  /**
+   * Open the child execution as a standalone page — the deep-dive escape
+   * hatch now that the card is the transcript's single home. Host-routed
+   * (DD-004).
+   */
+  readonly onNavigateToAgentExecution?: (agentExecutionId: string) => void;
+  /** Additional CSS classes for the root element. */
+  readonly className?: string;
+}
+
+/**
+ * A child AgentExecution's full transcript rendered inline in the
+ * AGENT_CALL task card — the session-grade `MessageThread` (tool calls,
+ * sub-agents, plan cards, and — with {@link
+ * WorkflowAgentCallTranscriptProps.hitl | hitl} — in-place HITL), streaming
+ * live while the child runs and serving the full history once settled.
+ *
+ * BOUNDED, NOT FULL-HEIGHT. The transcript caps at a generous viewport
+ * fraction and owns its own scroll + auto-follow inside that box
+ * (`MessageThread`'s scroll machine is reused unchanged). Once a transcript
+ * hits its cap it stops growing, so the card height stabilizes and the
+ * OUTER thread's auto-follow stops chasing it — the bound fixes both the
+ * inner and the outer scroll ergonomics at once.
+ *
+ * VIEWPORT-GATED STREAMING. Every mounted card fetches its (DD-014-cached)
+ * snapshot so the body renders immediately, but the live subscription opens
+ * only while the card is on-screen (`useInViewport` → the hook's `live`
+ * gate). Off-screen running children pause their stream and keep the
+ * last-streamed snapshot visible (never a rewind); scrolling back — or
+ * toggling back from the CSS-hidden Graph view — re-attaches in place. This
+ * preserves the bounded-concurrency intent of the S4 single-active-tab
+ * design (DD-LIVE-006) for fan-out workflows: N concurrent children cost at
+ * most the streams the user can actually see.
+ *
+ * MINIMAL CHROME. The card header already owns the task's identity and
+ * metrics (the `agentCallLine` preview: slug, current tool, message/tool
+ * counts, plus duration/cost chips and the running/settled status glyph).
+ * The transcript adds only what the header cannot express: a
+ * `Reconnecting…` notice for the CHILD stream and the "Open standalone"
+ * pop-out. Body = purely the conversation.
+ *
+ * HITL ROUTING. Child gates are decided through the WORKFLOW-level RPCs
+ * (`WorkflowExecution.submitApproval` / `submitFileDecision`), never the
+ * child's own `agentExecution.*` submit path. The two paths are
+ * server-equivalent (the workflow RPC forwards to the child), but they
+ * differ in authorization: the workflow RPC checks `can_edit` on the
+ * workflow execution — the resource the operator owns — while the child
+ * path checks the runner-spawned AgentExecution, which the operator may
+ * not (the S5 rationale).
+ *
+ * FILE-REVIEW DOCK. Pending (AWAITING_REVIEW) sets derive from the CHILD's
+ * own live stream — the freshest source this component already holds — not
+ * from the parent's `status.pending_file_reviews`, which is fetched once
+ * and may lag a mid-run gate. Docked below the thread so a decision the
+ * child is blocked on can never scroll out of view; settled sets render as
+ * read-only records in-thread (`showFileReviewRecords`) — the two surfaces
+ * partition by the same pending test `MessageThread` uses.
+ *
+ * All visual properties flow through `--stgm-*` tokens (DD-005).
+ */
+export const WorkflowAgentCallTranscript = memo(
+  function WorkflowAgentCallTranscript({
+    childExecutionId,
+    agentSlug,
+    hitl,
+    onNavigateToAgentExecution,
+    className,
+  }: WorkflowAgentCallTranscriptProps) {
+    const { ref: viewportRef, isVisible } = useInViewport();
+    const {
+      execution,
+      phase,
+      isLoading,
+      isReconnecting,
+      error,
+      reconnect,
+    } = useLiveAgentExecution(childExecutionId, { live: isVisible });
+
+    // Pending file reviews from the child's own (streamed) status — see the
+    // component doc for why the parent's pending_file_reviews is not the
+    // source. Terminal executions never dock: their AWAITING_REVIEW sets
+    // are settled history and render as in-thread records instead.
+    const terminal = isTerminalPhase(phase);
+    const pendingReviewSets = useMemo<readonly FileChangeSet[]>(() => {
+      if (terminal) return [];
+      return displayFileChangeSets(execution?.status).filter(
+        (cs) =>
+          cs.status === FileChangeSetStatus.AWAITING_REVIEW &&
+          cs.changes.length > 0,
+      );
+    }, [execution?.status, terminal]);
+
+    // Bind the child id into the dock's card-level submit signature. Deps
+    // are the specific method (DD-010), so the callback survives unrelated
+    // in-flight churn on the actions instance.
+    const submitFileDecision = hitl?.submitFileDecision;
+    const handleFileDecision = useCallback(
+      (changeSetId: string, action: FileDecisionAction, options?: FileDecisionOptions) => {
+        submitFileDecision?.(childExecutionId, changeSetId, action, options);
+      },
+      [submitFileDecision, childExecutionId],
+    );
+
+    const showBar = isReconnecting || !!onNavigateToAgentExecution;
+
+    return (
+      <div
+        ref={viewportRef}
+        role="group"
+        aria-label={
+          agentSlug ? `Transcript of agent ${agentSlug}` : "Agent transcript"
+        }
+        className={cn("flex max-h-[60vh] min-w-0 flex-col", className)}
+      >
+        {/* Only what the card header cannot express: the child stream's
+            reconnecting state and the standalone pop-out. */}
+        {showBar && (
+          <div className="flex min-w-0 shrink-0 items-center gap-3 pb-1.5">
+            {isReconnecting && (
+              <span className="text-xs text-muted-foreground">Reconnecting…</span>
+            )}
+            {onNavigateToAgentExecution && (
+              <button
+                type="button"
+                onClick={() => onNavigateToAgentExecution(childExecutionId)}
+                className="ml-auto inline-flex shrink-0 items-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm"
+              >
+                <PopOutIcon />
+                Open standalone
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* The thread owns the scrolling inside the bounded box (its
+            auto-scroll machine + jump-to-latest need the scroll container);
+            min-h-0 lets the flex slot shrink to the cap. */}
+        <div className="min-h-0 min-w-0 flex-1">
+          {execution ? (
+            <MessageThread
+              executions={EMPTY_EXECUTIONS}
+              activeStreamExecution={execution}
+              onApprovalSubmit={hitl?.submitApproval}
+              submittingApprovalIds={hitl?.approvalSubmittingToolCallIds}
+              approvalErrors={hitl?.approvalErrorsByToolCallId}
+              showFileReviewRecords={hitl != null}
+              className="h-full"
+            />
+          ) : isLoading ? (
+            <ThreadSkeleton className="py-2" />
+          ) : error ? (
+            <div
+              role="alert"
+              className="flex flex-col items-start gap-2 py-2"
+            >
+              <p className="text-xs text-destructive">{error.message}</p>
+              <button
+                type="button"
+                onClick={reconnect}
+                className="rounded border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                Retry
+              </button>
+            </div>
+          ) : (
+            <div role="status" className="flex flex-col gap-1 py-2">
+              <p className="text-xs font-medium text-foreground">
+                This agent execution is no longer available.
+              </p>
+              <p className="text-xs text-muted-foreground">
+                It may have been removed, or the workflow run predates
+                transcript retention.
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Pending file reviews dock below the thread, inside the bounded
+            box — the decision the child is blocked on can never scroll out
+            of view. Same shape as the session's composer dock. */}
+        {hitl && pendingReviewSets.length > 0 && (
+          <FileReviewDock
+            changeSets={pendingReviewSets}
+            onSubmit={handleFileDecision}
+            submittingDecisionKeys={hitl.fileDecisionSubmittingKeys}
+            decisionErrors={hitl.fileDecisionErrorsByKey}
+            className="shrink-0"
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+// ---------------------------------------------------------------------------
+// Inline SVG icons (SDK independence — no lucide dependency)
+// ---------------------------------------------------------------------------
+
+function PopOutIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0"
+      aria-hidden="true"
+    >
+      <path d="M10.5 4.5V1.5H7.5" />
+      <path d="M10.5 1.5L6 6" />
+      <path d="M8.5 7v3a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3" />
+    </svg>
+  );
+}

package/src/workflow/WorkflowDetailView.tsx

@@ -289,10 +289,14 @@ export function WorkflowDetailView({
     <ValidationIndicator state={validationState} />
   ) : undefined;
 
-  // Inline visibility is read-only (at-a-glance); editing lives in the
-  // Manage access dialog, the single writer for both access axes.
+  // Inline visibility is at-a-glance AND a shortcut into the Manage access
+  // dialog — the single writer for both access axes. The chip is navigation
+  // only; it stays a static badge for users who cannot view access.
   const visibilityControl = meta ? (
-    <VisibilityBadge visibility={meta.visibility} />
+    <VisibilityBadge
+      visibility={meta.visibility}
+      onClick={access.action ? access.open : undefined}
+    />
   ) : undefined;
 
   const mergedActions = access.action