@stigmer/react 3.12.1 → 3.12.2

package/skill/SkillDiffDialog.js

@@ -52,7 +52,7 @@ export function SkillDiffDialog({ state, onClose }) {
     const { diff, isLoading, error } = useSkillDiff(state?.fromArtifactKey ?? null, state?.toArtifactKey ?? null);
     if (!state)
         return null;
-    return (_jsx("dialog", { ref: dialogRef, onCancel: handleDialogCancel, onClick: handleBackdropClick, className: cn("stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:h-[85vh] stg:w-full stg:max-w-4xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg", "stg:backdrop:bg-black/50", "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95"), children: _jsxs("div", { className: "stg:flex stg:h-full stg:flex-col", children: [_jsxs("div", { className: "stg:flex stg:shrink-0 stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-4 stg:py-3", children: [_jsxs("div", { className: "stg:flex stg:items-center stg:gap-2 stg:text-sm", children: [_jsx("span", { className: "stg:font-medium stg:text-foreground", children: "Comparing" }), _jsx("code", { className: "stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-[11px] stg:text-muted-foreground", children: state.fromLabel }), _jsx(ArrowIcon, { className: "stg:size-3.5 stg:text-muted-foreground-faint" }), _jsx("code", { className: "stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-[11px] stg:text-muted-foreground", children: state.toLabel })] }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close diff viewer", className: cn("stg:rounded-md stg:p-1.5 stg:text-muted-foreground stg:transition-colors", "stg:hover:bg-accent-hover stg:hover:text-foreground", "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"), children: _jsx(CloseIcon, { className: "stg:size-4" }) })] }), _jsx("div", { className: "stg:flex-1 stg:overflow-auto stg:p-4", children: isLoading ? (_jsx(DiffSkeleton, {})) : error ? (_jsx(ErrorMessage, { error: error })) : diff ? (_jsx(MultiFileDiffView, { diff: diff })) : null })] }) }));
+    return (_jsx("dialog", { ref: dialogRef, onCancel: handleDialogCancel, onClick: handleBackdropClick, className: cn("stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:h-[85vh] stg:w-full stg:max-w-4xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg", "stg:backdrop:bg-backdrop", "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95"), children: _jsxs("div", { className: "stg:flex stg:h-full stg:flex-col", children: [_jsxs("div", { className: "stg:flex stg:shrink-0 stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-4 stg:py-3", children: [_jsxs("div", { className: "stg:flex stg:items-center stg:gap-2 stg:text-sm", children: [_jsx("span", { className: "stg:font-medium stg:text-foreground", children: "Comparing" }), _jsx("code", { className: "stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-[11px] stg:text-muted-foreground", children: state.fromLabel }), _jsx(ArrowIcon, { className: "stg:size-3.5 stg:text-muted-foreground-faint" }), _jsx("code", { className: "stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-[11px] stg:text-muted-foreground", children: state.toLabel })] }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close diff viewer", className: cn("stg:rounded-md stg:p-1.5 stg:text-muted-foreground stg:transition-colors", "stg:hover:bg-accent-hover stg:hover:text-foreground", "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"), children: _jsx(CloseIcon, { className: "stg:size-4" }) })] }), _jsx("div", { className: "stg:flex-1 stg:overflow-auto stg:p-4", children: isLoading ? (_jsx(DiffSkeleton, {})) : error ? (_jsx(ErrorMessage, { error: error })) : diff ? (_jsx(MultiFileDiffView, { diff: diff })) : null })] }) }));
 }
 // ---------------------------------------------------------------------------
 // Loading skeleton

package/src/access/ManageAccessDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, type ReactNode } from "react";
+import { useCallback, useId, useRef, type ReactNode } from "react";
 import { cn } from "@stigmer/theme";
 import { hasGrantableRoles } from "@stigmer/sdk";
 import { PeopleWithAccess } from "../iam-policy/PeopleWithAccess.js";
@@ -78,6 +78,12 @@ export function ManageAccessDialog({
 }: ManageAccessDialogProps) {
   const dialogRef = useRef<HTMLDialogElement>(null);
 
+  // Instance-scoped title id (oss#593): a reusable component must not
+  // hardcode DOM ids — hosts legitimately mount this dialog more than once
+  // per page (e.g. zone-cached detail pages), and duplicate ids break the
+  // aria-labelledby association for every copy after the first.
+  const titleId = useId();
+
   const handleClose = useCallback(() => {
     dialogRef.current?.close();
     onOpenChange(false);
@@ -106,9 +112,9 @@ export function ManageAccessDialog({
       onClose={handleClose}
       className={cn(
         "stg:fixed stg:inset-0 stg:m-auto stg:w-full stg:max-w-md stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
-        "stg:backdrop:bg-black/50",
+        "stg:backdrop:bg-backdrop",
       )}
-      aria-labelledby="manage-access-title"
+      aria-labelledby={titleId}
     >
       {/* Body mounts only while open so the access-list fetch is lazy. */}
       {open && (
@@ -117,7 +123,7 @@ export function ManageAccessDialog({
           <div className="stg:flex stg:items-start stg:justify-between stg:border-b stg:border-border stg:px-6 stg:py-4">
             <div className="stg:min-w-0">
               <h2
-                id="manage-access-title"
+                id={titleId}
                 className="stg:text-base stg:font-semibold stg:text-foreground"
               >
                 Manage access

package/src/activity/format-relative-time.ts

@@ -1,16 +1,18 @@
 /**
- * Compact relative-time formatter for recent-activity rows.
+ * The SDK's compact relative-time vocabulary: one deterministic "how long
+ * ago" formatter so timestamps read identically everywhere (consolidated
+ * from eight per-component drifting copies — stigmer-cloud#269). Pass
+ * `now` to freeze the clock in tests.
  *
- * The recents list sorts by LAST ACTIVITY (`statusAudit.updatedAt`), while
- * execution names embed their CREATION time — so an old run legitimately
- * re-bumped by a status change (a cancel, a late failure) sorts above
- * newer-named items and reads as "wrong order" unless the row says why it
- * is there. This stamp is that explanation: it renders the sort key the
- * user cannot otherwise see.
- *
- * Compact single-unit output — a sidebar row suffix, not prose:
+ * Compact single-unit output — a row suffix, not prose:
  * `now`, `5m`, `3h`, `6d`, then a short date (`Jul 12`, `Jul 12, 2025`)
  * once "days ago" stops being how people think about it.
+ *
+ * Born on the recents list, where it renders the otherwise-invisible sort
+ * key: the list sorts by LAST ACTIVITY (`statusAudit.updatedAt`) while
+ * execution names embed their CREATION time, so an old run re-bumped by a
+ * late status change sorts above newer-named items and reads as "wrong
+ * order" unless the row says why it is there.
  */
 export function formatRelativeTime(date: Date, now?: Date): string {
   const ref = now ?? new Date();

package/src/agent/steps/CapabilitiesStep.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
 import type { McpServerUsageInput, ResourceRef } from "@stigmer/sdk";
 import { McpServerPicker } from "../../mcp-server/McpServerPicker.js";
@@ -142,13 +142,16 @@ function CollapsibleSection({
   readonly onToggle: (id: string) => void;
   readonly children: React.ReactNode;
 }) {
+  // The disclosure-panel DOM id is minted per mount — deriving it from the
+  // semantic section key would collide when two wizards mount on one page.
+  const panelId = useId();
   return (
     <div className="stg:overflow-hidden stg:rounded-lg stg:border stg:border-border">
       <button
         type="button"
         onClick={() => onToggle(id)}
         aria-expanded={expanded}
-        aria-controls={`stgm-wizard-section-${id}`}
+        aria-controls={panelId}
         className={cn(
           "stg:flex stg:w-full stg:items-center stg:justify-between stg:px-4 stg:py-3 stg:text-left stg:transition-colors",
           "stg:hover:bg-accent-hover",
@@ -174,7 +177,7 @@ function CollapsibleSection({
 
       {expanded && (
         <div
-          id={`stgm-wizard-section-${id}`}
+          id={panelId}
           className="stg:border-t stg:border-border stg:px-4 stg:py-4"
         >
           {children}

package/src/agent/steps/IdentityStep.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback } from "react";
+import { useCallback, useId } from "react";
 import { cn } from "@stigmer/theme";
 import { generateSlug } from "../../internal/slug.js";
 import type { AgentWizardData } from "./types.js";
@@ -28,6 +28,7 @@ export function IdentityStep({
   updateData,
   validationError,
 }: IdentityStepProps) {
+  const baseId = useId();
   const handleNameChange = useCallback(
     (value: string) => {
       if (!data.slugTouched) {
@@ -72,13 +73,13 @@ export function IdentityStep({
         {/* Name */}
         <div className="stg:space-y-1.5">
           <label
-            htmlFor="stgm-wizard-agent-name"
+            htmlFor={`${baseId}-name`}
             className="stg:text-sm stg:font-medium stg:text-foreground"
           >
             Name <span className="stg:text-destructive">*</span>
           </label>
           <input
-            id="stgm-wizard-agent-name"
+            id={`${baseId}-name`}
             type="text"
             value={data.name}
             onChange={(e) => handleNameChange(e.target.value)}
@@ -95,13 +96,13 @@ export function IdentityStep({
         {/* Slug */}
         <div className="stg:space-y-1.5">
           <label
-            htmlFor="stgm-wizard-agent-slug"
+            htmlFor={`${baseId}-slug`}
             className="stg:text-sm stg:font-medium stg:text-foreground"
           >
             Slug
           </label>
           <input
-            id="stgm-wizard-agent-slug"
+            id={`${baseId}-slug`}
             type="text"
             value={data.slug}
             onChange={(e) => handleSlugChange(e.target.value)}
@@ -129,13 +130,13 @@ export function IdentityStep({
       {/* Description */}
       <div className="stg:space-y-1.5">
         <label
-          htmlFor="stgm-wizard-agent-description"
+          htmlFor={`${baseId}-description`}
           className="stg:text-sm stg:font-medium stg:text-foreground"
         >
           Description
         </label>
         <input
-          id="stgm-wizard-agent-description"
+          id={`${baseId}-description`}
           type="text"
           value={data.description}
           onChange={(e) => updateData({ description: e.target.value })}
@@ -153,13 +154,13 @@ export function IdentityStep({
       <div className="stg:grid stg:gap-4 stg:sm:grid-cols-2">
         <div className="stg:space-y-1.5">
           <label
-            htmlFor="stgm-wizard-agent-icon"
+            htmlFor={`${baseId}-icon`}
             className="stg:text-sm stg:font-medium stg:text-foreground"
           >
             Icon URL
           </label>
           <input
-            id="stgm-wizard-agent-icon"
+            id={`${baseId}-icon`}
             type="url"
             value={data.iconUrl}
             onChange={(e) => updateData({ iconUrl: e.target.value })}
@@ -177,13 +178,17 @@ export function IdentityStep({
             Visibility
           </legend>
           <div className="stg:flex stg:gap-2">
+            {/* The radio-group name is minted per mount: a hardcoded name
+                would merge two mounted wizards into one keyboard group. */}
             <VisibilityOption
+              name={`${baseId}-visibility`}
               value="private"
               label="Private"
               checked={data.visibility === "private"}
               onChange={() => updateData({ visibility: "private" })}
             />
             <VisibilityOption
+              name={`${baseId}-visibility`}
               value="public"
               label="Public"
               checked={data.visibility === "public"}
@@ -196,7 +201,7 @@ export function IdentityStep({
       {/* Instructions */}
       <div className="stg:space-y-1.5">
         <label
-          htmlFor="stgm-wizard-agent-instructions"
+          htmlFor={`${baseId}-instructions`}
           className="stg:text-sm stg:font-medium stg:text-foreground"
         >
           Instructions
@@ -205,7 +210,7 @@ export function IdentityStep({
           The system prompt that defines this agent&apos;s behavior.
         </p>
         <textarea
-          id="stgm-wizard-agent-instructions"
+          id={`${baseId}-instructions`}
           value={data.instructions}
           onChange={(e) => updateData({ instructions: e.target.value })}
           placeholder="You are a helpful assistant that..."
@@ -226,11 +231,13 @@ export function IdentityStep({
 // ---------------------------------------------------------------------------
 
 function VisibilityOption({
+  name,
   value,
   label,
   checked,
   onChange,
 }: {
+  readonly name: string;
   readonly value: string;
   readonly label: string;
   readonly checked: boolean;
@@ -247,7 +254,7 @@ function VisibilityOption({
     >
       <input
         type="radio"
-        name="stgm-wizard-agent-visibility"
+        name={name}
         value={value}
         checked={checked}
         onChange={onChange}

package/src/agent-instance/CreateAgentInstanceDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useId, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import type { AgentInstance } from "@stigmer/protos/ai/stigmer/agentic/agentinstance/v1/api_pb";
@@ -42,6 +42,15 @@ export function CreateAgentInstanceDialog({
   const dialogRef = useRef<HTMLDialogElement>(null);
   const { create, isCreating, error, clearError } = useCreateAgentInstance();
 
+  // Instance-scoped element ids (oss#593): a reusable component must not
+  // hardcode DOM ids — hosts legitimately mount this dialog more than once
+  // per page (e.g. zone-cached detail pages), and duplicate ids silently
+  // break the label→input association for every copy after the first.
+  const baseId = useId();
+  const titleId = `${baseId}-title`;
+  const nameId = `${baseId}-name`;
+  const descriptionId = `${baseId}-description`;
+
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [environmentRefs, setEnvironmentRefs] = useState<ResourceRef[]>([]);
@@ -106,14 +115,14 @@ export function CreateAgentInstanceDialog({
       onClose={handleClose}
       className={cn(
         "stg:fixed stg:inset-0 stg:m-auto stg:w-full stg:max-w-lg stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
-        "stg:backdrop:bg-black/50",
+        "stg:backdrop:bg-backdrop",
       )}
-      aria-labelledby="create-agent-instance-title"
+      aria-labelledby={titleId}
     >
       <form onSubmit={handleSubmit} className="stg:flex stg:flex-col">
         {/* Header */}
         <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-6 stg:py-4">
-          <h2 id="create-agent-instance-title" className="stg:text-base stg:font-semibold stg:text-foreground">
+          <h2 id={titleId} className="stg:text-base stg:font-semibold stg:text-foreground">
             Create Agent Instance
           </h2>
           <button
@@ -134,11 +143,11 @@ export function CreateAgentInstanceDialog({
         <div className="stg:space-y-5 stg:px-6 stg:py-5">
           {/* Name */}
           <div>
-            <label htmlFor="agent-instance-name" className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
+            <label htmlFor={nameId} className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
               Name <span className="stg:text-destructive">*</span>
             </label>
             <input
-              id="agent-instance-name"
+              id={nameId}
               type="text"
               required
               value={name}
@@ -160,11 +169,11 @@ export function CreateAgentInstanceDialog({
 
           {/* Description */}
           <div>
-            <label htmlFor="agent-instance-description" className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
+            <label htmlFor={descriptionId} className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
               Description
             </label>
             <textarea
-              id="agent-instance-description"
+              id={descriptionId}
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               placeholder="What is this instance used for?"

package/src/api-key/ApiKeyCreatedAlert.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useRef } from "react";
 import { cn } from "@stigmer/theme";
+import { selectElementText } from "../internal/select-element-text.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -47,25 +49,14 @@ export function ApiKeyCreatedAlert({
   onDismiss,
   className,
 }: ApiKeyCreatedAlertProps) {
-  const [copied, setCopied] = useState(false);
+  const { copy, copied } = useCopyFeedback();
+  const revealRef = useRef<HTMLElement>(null);
 
   const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(rawKey);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Fallback: select the text so the user can manually copy
-      const el = document.getElementById("stgm-api-key-reveal");
-      if (el) {
-        const selection = window.getSelection();
-        const range = document.createRange();
-        range.selectNodeContents(el);
-        selection?.removeAllRanges();
-        selection?.addRange(range);
-      }
-    }
-  }, [rawKey]);
+    if (await copy(rawKey)) return;
+    // Rejected write: select the revealed key so the user can copy manually.
+    if (revealRef.current) selectElementText(revealRef.current);
+  }, [copy, rawKey]);
 
   return (
     <div
@@ -100,7 +91,7 @@ export function ApiKeyCreatedAlert({
 
       <div className="stg:flex stg:items-center stg:gap-2">
         <code
-          id="stgm-api-key-reveal"
+          ref={revealRef}
           className={cn(
             "stg:min-w-0 stg:flex-1 stg:select-all stg:truncate stg:rounded-md",
             "stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5",

package/src/api-key/ApiKeyListPanel.tsx

@@ -8,6 +8,8 @@ import type { ApiKey } from "@stigmer/protos/ai/stigmer/iam/apikey/v1/api_pb";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { useApiKeyList } from "./useApiKeyList.js";
 import { useDeleteApiKey } from "./useDeleteApiKey.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { formatRelativeTime } from "../activity/format-relative-time.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -200,7 +202,7 @@ function ApiKeyRow({
               "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
-            {isDeleting && <SpinnerIcon />}
+            {isDeleting && <SpinnerIcon size={12} />}
             Delete
           </button>
           <button
@@ -297,27 +299,6 @@ function formatShortDate(date: Date): string {
   });
 }
 
-function formatRelativeTime(date: Date, now?: Date): string {
-  const ref = now?.getTime() ?? Date.now();
-  const diffMs = ref - date.getTime();
-
-  if (diffMs < 0) return "Just now";
-
-  const seconds = Math.floor(diffMs / 1000);
-  if (seconds < 60) return "Just now";
-
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m ago`;
-
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-
-  const days = Math.floor(hours / 24);
-  if (days < 30) return `${days}d ago`;
-
-  return formatShortDate(date);
-}
-
 // ---------------------------------------------------------------------------
 // Icons
 // ---------------------------------------------------------------------------
@@ -363,20 +344,3 @@ function TrashIcon() {
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/api-key/CreateApiKeyForm.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useCallback, useState, type FormEvent } from "react";
+import { useCallback, useId, useState, type FormEvent } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { ApiKey } from "@stigmer/protos/ai/stigmer/iam/apikey/v1/api_pb";
 import { useCreateApiKey } from "./useCreateApiKey.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -61,6 +62,7 @@ export function CreateApiKeyForm({
   className,
 }: CreateApiKeyFormProps) {
   const { create, isCreating, error, clearError } = useCreateApiKey();
+  const baseId = useId();
 
   const [name, setName] = useState(initialName);
   const [expiry, setExpiry] = useState<ExpiryOption>("never");
@@ -96,13 +98,13 @@ export function CreateApiKeyForm({
         {/* Name */}
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-new-apikey-name"
+            htmlFor={`${baseId}-name`}
             className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Name
           </label>
           <input
-            id="stgm-new-apikey-name"
+            id={`${baseId}-name`}
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
@@ -125,9 +127,12 @@ export function CreateApiKeyForm({
             Expiration
           </legend>
           <div className="stg:flex stg:flex-wrap stg:gap-2">
+            {/* The radio-group name is minted per mount: a hardcoded name
+                would merge two mounted forms into one keyboard group. */}
             {EXPIRY_OPTIONS.map(({ value, label }) => (
               <ExpiryRadio
                 key={value}
+                name={`${baseId}-expiry`}
                 value={value}
                 label={label}
                 checked={expiry === value}
@@ -155,7 +160,7 @@ export function CreateApiKeyForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={12} />}
           Create API key
         </button>
 
@@ -200,12 +205,14 @@ function daysFromNow(days: number): Date {
 // ---------------------------------------------------------------------------
 
 function ExpiryRadio({
+  name,
   value,
   label,
   checked,
   disabled,
   onChange,
 }: {
+  name: string;
   value: ExpiryOption;
   label: string;
   checked: boolean;
@@ -224,7 +231,7 @@ function ExpiryRadio({
     >
       <input
         type="radio"
-        name="stgm-apikey-expiry"
+        name={name}
         value={value}
         checked={checked}
         disabled={disabled}
@@ -236,24 +243,3 @@ function ExpiryRadio({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Icons
-// ---------------------------------------------------------------------------
-
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/approval-defaults-context.ts

@@ -0,0 +1,56 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+/**
+ * App-level approval defaults for interactive sessions (#302).
+ *
+ * These are the *host's* defaults, not the platform's: an embedding product
+ * that has judged its whole surface trusted — e.g. a desktop app whose
+ * sessions operate on the user's own local folder, where the apply-then-
+ * review file ledger is the safety net — can pre-arm what a user would
+ * otherwise opt into at the first approval gate. The user always keeps the
+ * last word: the session UI shows its "Auto-approving tool calls" notice
+ * from the first render, with the same "Turn off" affordance as a
+ * gate-armed preference.
+ */
+export interface ApprovalDefaults {
+  /**
+   * Start interactive sessions with the session-scoped auto-approve
+   * preference armed, and create their bootstrap executions with
+   * `auto_approve_all` set.
+   *
+   * Equivalent to the user clicking "Approve & don't ask again" before the
+   * first gate, applied as a product decision. Defaults to off — omitting
+   * the provider prop keeps today's fail-closed behavior exactly.
+   */
+  readonly autoApproveAll?: boolean;
+}
+
+/**
+ * React context for app-level approval defaults.
+ *
+ * Separated from the provider to mirror the `ExecutionTargetContext`
+ * pattern and avoid circular imports.
+ *
+ * `undefined` means the host configured nothing — every approval default
+ * stays platform-standard (fail-closed gates, opt-in at the gate).
+ */
+export const ApprovalDefaultsContext = createContext<
+  ApprovalDefaults | undefined
+>(undefined);
+
+/**
+ * Read the app-level approval defaults from the nearest `StigmerProvider`.
+ *
+ * Consumed by the interactive-session surface only: `useNewSessionFlow`
+ * (bootstrap execution create) and `useSessionPageFlow` (session-scoped
+ * preference initializer). Deliberately NOT consumed by the lower-level
+ * `useCreateSession` / `useCreateAgentExecution` primitives — those are
+ * shared by specialized flows (workflow architect/explain/diagnose) and by
+ * headless callers, which pass `autoApproveAll` explicitly when they mean
+ * it.
+ */
+export function useApprovalDefaults(): ApprovalDefaults | undefined {
+  return useContext(ApprovalDefaultsContext);
+}