@stigmer/react 3.12.0 → 3.12.2

package/src/platform-client/PlatformClientSecretAlert.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";
 
 /** Props for {@link PlatformClientSecretAlert}. */
 export interface PlatformClientSecretAlertProps {
@@ -17,8 +19,6 @@ export interface PlatformClientSecretAlertProps {
   readonly className?: string;
 }
 
-const COPIED_FEEDBACK_MS = 2000;
-
 /**
  * One-time reveal component displayed after a platform client is
  * created or its secret is rotated.
@@ -50,34 +50,6 @@ export function PlatformClientSecretAlert({
   onDismiss,
   className,
 }: PlatformClientSecretAlertProps) {
-  const [copiedField, setCopiedField] = useState<
-    "id" | "secret" | null
-  >(null);
-
-  const handleCopy = useCallback(
-    async (value: string, field: "id" | "secret") => {
-      try {
-        await navigator.clipboard.writeText(value);
-        setCopiedField(field);
-        setTimeout(() => setCopiedField(null), COPIED_FEEDBACK_MS);
-      } catch {
-        const el = document.getElementById(
-          field === "secret"
-            ? "stgm-pc-secret-reveal"
-            : "stgm-pc-client-id-reveal",
-        );
-        if (el) {
-          const selection = window.getSelection();
-          const range = document.createRange();
-          range.selectNodeContents(el);
-          selection?.removeAllRanges();
-          selection?.addRange(range);
-        }
-      }
-    },
-    [],
-  );
-
   const title =
     context === "created"
       ? "Platform client created"
@@ -114,30 +86,14 @@ export function PlatformClientSecretAlert({
 
       <div className="stg:space-y-2">
         <CopyableField
-          id="stgm-pc-client-id-reveal"
           label="Client ID"
           value={clientId}
-          copied={copiedField === "id"}
-          onCopy={() => handleCopy(clientId, "id")}
         />
         <CopyableField
-          id="stgm-pc-secret-reveal"
           label="Client secret"
           value={clientSecret}
-          copied={copiedField === "secret"}
-          onCopy={() => handleCopy(clientSecret, "secret")}
         />
       </div>
-
-      <div
-        role="status"
-        aria-live="polite"
-        aria-atomic="true"
-        className="stg:sr-only"
-      >
-        {copiedField === "id" && "Client ID copied to clipboard"}
-        {copiedField === "secret" && "Client secret copied to clipboard"}
-      </div>
     </div>
   );
 }
@@ -147,18 +103,24 @@ export function PlatformClientSecretAlert({
 // ---------------------------------------------------------------------------
 
 function CopyableField({
-  id,
   label,
   value,
-  copied,
-  onCopy,
 }: {
-  id: string;
   label: string;
   value: string;
-  copied: boolean;
-  onCopy: () => void;
 }) {
+  // Each field owns its feedback: the copied flag and the select-text
+  // fallback belong to the markup they describe, so two fields never
+  // share (and race on) one parent-level "which field copied" state.
+  const { copy, copied } = useCopyFeedback();
+  const revealRef = useRef<HTMLElement>(null);
+
+  const handleCopy = useCallback(async () => {
+    if (await copy(value)) return;
+    // Rejected write: select the revealed value so the user can copy manually.
+    if (revealRef.current) selectElementText(revealRef.current);
+  }, [copy, value]);
+
   return (
     <div>
       <span className="stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground">
@@ -166,7 +128,7 @@ function CopyableField({
       </span>
       <div className="stg:mt-0.5 stg:flex stg:items-center stg:gap-2">
         <code
-          id={id}
+          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",
@@ -177,7 +139,7 @@ function CopyableField({
         </code>
         <button
           type="button"
-          onClick={onCopy}
+          onClick={() => void handleCopy()}
           aria-label={`Copy ${label}`}
           className={cn(
             "stg:inline-flex stg:shrink-0 stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
@@ -189,6 +151,15 @@ function CopyableField({
           {copied ? "Copied" : "Copy"}
         </button>
       </div>
+
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="stg:sr-only"
+      >
+        {copied && `${label} copied to clipboard`}
+      </div>
     </div>
   );
 }

package/src/provider.tsx

@@ -14,6 +14,8 @@ import type { ThemePresetId } from "@stigmer/theme";
 import { StigmerContext } from "./context.js";
 import { DeploymentModeContext } from "./deployment-mode.js";
 import { ExecutionTargetContext } from "./execution-target-context.js";
+import { ApprovalDefaultsContext } from "./approval-defaults-context.js";
+import type { ApprovalDefaults } from "./approval-defaults-context.js";
 import type { ExecutionTargetOption } from "./session/execution-target.js";
 import type { RunnerAdapter } from "./runner-adapter.js";
 import { RunnerAdapterContext } from "./runner-adapter.js";
@@ -22,7 +24,7 @@ import { ColorModeContext, useSystemColorMode } from "./color-mode.js";
 import { PortalContainerContext } from "./portal-container.js";
 import { ModelRegistryContext } from "./models/ModelRegistryContext.js";
 import type { ModelRegistryState } from "./models/ModelRegistryContext.js";
-import { fetchModelRegistry } from "./models/registry.js";
+import { fetchModelRegistryDocument } from "./models/registry.js";
 import { TaskKindRegistryContext } from "./workflow/TaskKindRegistryContext.js";
 import type { TaskKindRegistryState } from "./workflow/TaskKindRegistryContext.js";
 import type { TaskKindDescriptor } from "./workflow/types.js";
@@ -84,6 +86,38 @@ export interface StigmerProviderProps {
    * ```
    */
   readonly runnerAdapter?: RunnerAdapter;
+  /**
+   * Approval defaults for all interactive sessions in this provider scope.
+   *
+   * This is an app-level trust judgment, not a per-session choice (the
+   * `executionTarget` precedent): a host embedding sessions over a surface
+   * it has already judged trusted — e.g. a desktop app operating on the
+   * user's own local folder — can arm `autoApproveAll` so users are not
+   * re-asked at every fresh conversation's first mutating tool call. The
+   * user keeps the last word: the "Auto-approving tool calls" notice shows
+   * from the first render with its "Turn off" affordance.
+   *
+   * Consumed by the interactive-session surface only (`useNewSessionFlow`,
+   * `useSessionPageFlow` and the organisms composing them). Specialized
+   * flows (workflow architect/explain/diagnose) and headless creation are
+   * deliberately unaffected — those callers pass `autoApproveAll`
+   * explicitly when they mean it.
+   *
+   * Omit on shared or sensitive surfaces — everything stays fail-closed
+   * exactly as today. Pass a referentially stable object (module constant
+   * or `useMemo`).
+   *
+   * @example
+   * ```tsx
+   * // A desktop host whose sessions operate on the user's own machine
+   * const APPROVAL_DEFAULTS = { autoApproveAll: true };
+   *
+   * <StigmerProvider client={client} approvalDefaults={APPROVAL_DEFAULTS}>
+   *   <App />
+   * </StigmerProvider>
+   * ```
+   */
+  readonly approvalDefaults?: ApprovalDefaults;
   /**
    * Built-in theme preset to apply.
    *
@@ -238,6 +272,7 @@ export function StigmerProvider({
   deploymentMode = "cloud",
   executionTarget,
   runnerAdapter,
+  approvalDefaults,
   preset,
   className,
   colorMode = "light",
@@ -258,34 +293,36 @@ export function StigmerProvider({
     <StigmerContext.Provider value={client}>
       <DeploymentModeContext.Provider value={deploymentMode}>
         <ExecutionTargetContext.Provider value={executionTarget}>
-          <RunnerAdapterContext.Provider value={runnerAdapter ?? null}>
-            <ColorModeContext.Provider value={resolvedMode}>
-              <ModelRegistryContext.Provider value={registryState}>
-                <TaskKindRegistryContext.Provider value={taskKindRegistryState}>
-                  <ReviewRendererContext.Provider value={reviewRenderers ?? EMPTY_REVIEW_RENDERERS}>
-                    <PortalContainerContext.Provider value={portalContainer}>
-                      {/*
-                        The in-tree scoping container. `data-stgm-root` is a
-                        stable public selector — the documented seam for hosts
-                        to style THIS element only (e.g. the fixed-height
-                        embedding recipe, #260). It must never be mirrored
-                        onto the portal container, whose own `data-stgm-portal`
-                        marker keeps host in-tree-only CSS away from the
-                        off-tree element.
-                      */}
-                      <div
-                        className={scope.className}
-                        data-stgm-root=""
-                        data-stgm-color-mode={scope.colorMode}
-                      >
-                        {children}
-                      </div>
-                    </PortalContainerContext.Provider>
-                  </ReviewRendererContext.Provider>
-                </TaskKindRegistryContext.Provider>
-              </ModelRegistryContext.Provider>
-            </ColorModeContext.Provider>
-          </RunnerAdapterContext.Provider>
+          <ApprovalDefaultsContext.Provider value={approvalDefaults}>
+            <RunnerAdapterContext.Provider value={runnerAdapter ?? null}>
+              <ColorModeContext.Provider value={resolvedMode}>
+                <ModelRegistryContext.Provider value={registryState}>
+                  <TaskKindRegistryContext.Provider value={taskKindRegistryState}>
+                    <ReviewRendererContext.Provider value={reviewRenderers ?? EMPTY_REVIEW_RENDERERS}>
+                      <PortalContainerContext.Provider value={portalContainer}>
+                        {/*
+                          The in-tree scoping container. `data-stgm-root` is a
+                          stable public selector — the documented seam for hosts
+                          to style THIS element only (e.g. the fixed-height
+                          embedding recipe, #260). It must never be mirrored
+                          onto the portal container, whose own `data-stgm-portal`
+                          marker keeps host in-tree-only CSS away from the
+                          off-tree element.
+                        */}
+                        <div
+                          className={scope.className}
+                          data-stgm-root=""
+                          data-stgm-color-mode={scope.colorMode}
+                        >
+                          {children}
+                        </div>
+                      </PortalContainerContext.Provider>
+                    </ReviewRendererContext.Provider>
+                  </TaskKindRegistryContext.Provider>
+                </ModelRegistryContext.Provider>
+              </ColorModeContext.Provider>
+            </RunnerAdapterContext.Provider>
+          </ApprovalDefaultsContext.Provider>
         </ExecutionTargetContext.Provider>
       </DeploymentModeContext.Provider>
     </StigmerContext.Provider>
@@ -310,6 +347,7 @@ function useModelRegistryFetch(client: Stigmer): ModelRegistryState {
   const [version, setVersion] = useState(0);
   const [state, setState] = useState<Omit<ModelRegistryState, "refetch">>({
     models: [],
+    visionLimits: undefined,
     isLoading: true,
     error: null,
   });
@@ -333,7 +371,7 @@ function useModelRegistryFetch(client: Stigmer): ModelRegistryState {
       }
     }
 
-    return fetchModelRegistry(c.baseUrl, token, c.fetch);
+    return fetchModelRegistryDocument(c.baseUrl, token, c.fetch);
   }, []);
 
   useEffect(() => {
@@ -348,9 +386,14 @@ function useModelRegistryFetch(client: Stigmer): ModelRegistryState {
       setState((prev) => (prev.isLoading ? prev : { ...prev, isLoading: true }));
 
       try {
-        const models = await doFetch(signal);
-        if (!signal.aborted && models) {
-          setState({ models, isLoading: false, error: null });
+        const document = await doFetch(signal);
+        if (!signal.aborted && document) {
+          setState({
+            models: document.models,
+            visionLimits: document.visionLimits,
+            isLoading: false,
+            error: null,
+          });
           fetchAttemptRef.current = 0;
         }
       } catch (err: unknown) {

package/src/resource-creation/WizardNav.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@stigmer/theme";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link WizardNav}. */
 export interface WizardNavProps {
@@ -98,7 +99,7 @@ export function WizardNav({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isSubmitting && <SpinnerIcon />}
+          {isSubmitting && <SpinnerIcon size={14} />}
           {nextLabel}
           {!isSubmitting && <ArrowRightIcon className="stg:size-3.5" />}
         </button>
@@ -145,20 +146,3 @@ function ArrowRightIcon({ className }: { readonly className?: string }) {
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      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/resource-detail/ConfirmDialog.tsx

@@ -81,7 +81,7 @@ export function ConfirmDialog({
       onCancel={handleDialogCancel}
       className={cn(
         "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-sm 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:backdrop:bg-backdrop",
         "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
       )}
     >

package/src/resource-detail/useCopyResource.ts

@@ -2,6 +2,7 @@
 
 import { useCallback, useMemo } from "react";
 import { toast } from "../feedback/toast.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 export interface UseCopyResourceReturn {
   /** Copy arbitrary text to the clipboard with toast feedback. */
@@ -17,9 +18,10 @@ export interface UseCopyResourceReturn {
 /**
  * Clipboard helper for resource detail pages.
  *
- * Wraps `navigator.clipboard.writeText` with toast feedback so every
- * copy action is confirmed visually (Nielsen heuristic #1 — visibility
- * of system status). Falls back to a hidden textarea for older browsers.
+ * Wraps the shared copy behavior (`useCopyFeedback`) with toast feedback so
+ * every copy action is confirmed visually (Nielsen heuristic #1 — visibility
+ * of system status). A rejected write (insecure context, denied permission)
+ * toasts an error instead of claiming a copy that didn't happen.
  *
  * @example
  * ```tsx
@@ -31,15 +33,18 @@ export interface UseCopyResourceReturn {
  * ```
  */
 export function useCopyResource(): UseCopyResourceReturn {
-  const copy = useCallback(async (text: string, label: string) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      toast.success(`${label} copied`);
-    } catch {
-      fallbackCopy(text);
-      toast.success(`${label} copied`);
-    }
-  }, []);
+  const { copy: copyText } = useCopyFeedback();
+
+  const copy = useCallback(
+    async (text: string, label: string) => {
+      if (await copyText(text)) {
+        toast.success(`${label} copied`);
+      } else {
+        toast.error(`Couldn't copy ${label}`);
+      }
+    },
+    [copyText],
+  );
 
   const copyId = useCallback(
     (id: string) => copy(id, "ID"),
@@ -61,14 +66,3 @@ export function useCopyResource(): UseCopyResourceReturn {
     [copy, copyId, copySlug, copyQualifiedSlug],
   );
 }
-
-function fallbackCopy(text: string): void {
-  const textarea = document.createElement("textarea");
-  textarea.value = text;
-  textarea.style.position = "fixed";
-  textarea.style.opacity = "0";
-  document.body.appendChild(textarea);
-  textarea.select();
-  document.execCommand("copy");
-  document.body.removeChild(textarea);
-}

package/src/schedule/ScheduleDetailView.tsx

@@ -71,6 +71,7 @@ import { useResumeSchedule } from "./useResumeSchedule.js";
 import { useSetScheduleEnabled } from "./useSetScheduleEnabled.js";
 import { useTriggerSchedule } from "./useTriggerSchedule.js";
 import { useUpdateScheduleSpec } from "./useUpdateScheduleSpec.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link ScheduleDetailView}. */
 export interface ScheduleDetailViewProps {
@@ -1311,7 +1312,7 @@ function InlineEditActions({
             "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         >
-          {isSaving && <SpinnerIcon />}
+          {isSaving && <SpinnerIcon size={14} />}
           Save
         </button>
       </div>
@@ -1632,20 +1633,3 @@ function PencilIcon({ className }: { readonly className?: string }) {
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      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/schedule/ScheduleForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState, type FormEvent } from "react";
+import { type FormEvent, useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
 import {
   getUserMessage,
@@ -24,6 +24,7 @@ import { CadenceField } from "./CadenceField.js";
 import { TimeZoneField, browserTimeZone } from "./TimeZoneField.js";
 import { useCreateSchedule } from "./useCreateSchedule.js";
 import { cadenceToCron, validateCron, type CadencePreset } from "./cadence.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -84,6 +85,7 @@ export function ScheduleForm({
   onCancel,
   className,
 }: ScheduleFormProps) {
+  const baseId = useId();
   const { create, isCreating, error, clearError } = useCreateSchedule();
 
   const [name, setName] = useState("");
@@ -209,11 +211,11 @@ export function ScheduleForm({
     >
       {/* Name */}
       <div className="stg:space-y-1">
-        <label htmlFor="stgm-new-schedule-name" className={labelClasses}>
+        <label htmlFor={`${baseId}-name`} className={labelClasses}>
           Name
         </label>
         <input
-          id="stgm-new-schedule-name"
+          id={`${baseId}-name`}
           type="text"
           value={name}
           onChange={(e) => setName(e.target.value)}
@@ -227,13 +229,13 @@ export function ScheduleForm({
 
       {/* Target agent */}
       <div className="stg:space-y-1">
-        <span id="stgm-new-schedule-agent-label" className={labelClasses}>
+        <span id={`${baseId}-agent-label`} className={labelClasses}>
           Agent to run
         </span>
         <Popover.Root open={pickerOpen} onOpenChange={setPickerOpen}>
           <Popover.Trigger
             disabled={isCreating}
-            aria-labelledby="stgm-new-schedule-agent-label"
+            aria-labelledby={`${baseId}-agent-label`}
             className={cn(
               "stg:flex stg:w-full stg:items-center stg:justify-between stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-left stg:text-xs",
               "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
@@ -267,11 +269,11 @@ export function ScheduleForm({
 
       {/* Message */}
       <div className="stg:space-y-1">
-        <label htmlFor="stgm-new-schedule-message" className={labelClasses}>
+        <label htmlFor={`${baseId}-message`} className={labelClasses}>
           Message
         </label>
         <textarea
-          id="stgm-new-schedule-message"
+          id={`${baseId}-message`}
           value={message}
           onChange={(e) => setMessage(e.target.value)}
           placeholder="The instruction the agent receives on every fire — write it for a run with no human present."
@@ -314,7 +316,7 @@ export function ScheduleForm({
           schedule fire, so the picker is filtered to visibility_org —
           the same credential surface a channel binding uses. */}
       <div className="stg:space-y-1">
-        <span id="stgm-new-schedule-env-label" className={labelClasses}>
+        <span id={`${baseId}-env-label`} className={labelClasses}>
           Environments <span className="stg:font-normal stg:text-muted-foreground">(optional)</span>
         </span>
         <EnvironmentPicker
@@ -391,12 +393,12 @@ export function ScheduleForm({
           surface: nobody is watching a 3 AM fire (DD-018 D-5). Clamped
           by the platform profile; tool-round bounds stay API-only. */}
       <div className="stg:space-y-1">
-        <label htmlFor="stgm-new-schedule-budget" className={labelClasses}>
+        <label htmlFor={`${baseId}-budget`} className={labelClasses}>
           Budget per run (USD){" "}
           <span className="stg:font-normal stg:text-muted-foreground">(optional)</span>
         </label>
         <input
-          id="stgm-new-schedule-budget"
+          id={`${baseId}-budget`}
           type="number"
           min="0"
           step="any"
@@ -415,11 +417,11 @@ export function ScheduleForm({
 
       {/* Time zone */}
       <div className="stg:space-y-1">
-        <label htmlFor="stgm-new-schedule-tz" className={labelClasses}>
+        <label htmlFor={`${baseId}-tz`} className={labelClasses}>
           Time zone
         </label>
         <TimeZoneField
-          id="stgm-new-schedule-tz"
+          id={`${baseId}-tz`}
           value={timeZone}
           onChange={setTimeZone}
           disabled={isCreating}
@@ -429,16 +431,16 @@ export function ScheduleForm({
       {/* Enabled */}
       <div className="stg:flex stg:items-start stg:gap-3">
         <Switch
-          id="stgm-new-schedule-enabled"
+          id={`${baseId}-enabled`}
           checked={enabled}
           onCheckedChange={setEnabled}
           disabled={isCreating}
-          aria-labelledby="stgm-new-schedule-enabled-label"
+          aria-labelledby={`${baseId}-enabled-label`}
         />
         <div className="stg:space-y-0.5">
           <label
-            id="stgm-new-schedule-enabled-label"
-            htmlFor="stgm-new-schedule-enabled"
+            id={`${baseId}-enabled-label`}
+            htmlFor={`${baseId}-enabled`}
             className={labelClasses}
           >
             Enabled
@@ -467,7 +469,7 @@ export function ScheduleForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={14} />}
           Create schedule
         </button>
 
@@ -597,20 +599,3 @@ function ChevronIcon() {
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      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>
-  );
-}