@stigmer/react 3.12.1 → 3.12.3

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

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import type { ConfirmState } from "./types.js";
 
 export interface ConfirmDialogProps {
@@ -16,9 +17,8 @@ export interface ConfirmDialogProps {
 /**
  * Accessible confirmation dialog for destructive actions.
  *
- * Uses the native `<dialog>` element with `showModal()` for built-in
- * focus trapping, Escape key handling, and backdrop. Styled via
- * `--stgm-*` design tokens.
+ * Renders on {@link DialogShell} (native `<dialog>` + `showModal()` — focus
+ * trapping, Escape, token backdrop). Styled via `--stgm-*` design tokens.
  *
  * Pairs with {@link useConfirmAction} which manages the imperative
  * `confirm()` → Promise pattern.
@@ -51,22 +51,9 @@ export function ConfirmDialog({
   onConfirm,
   onCancel,
 }: ConfirmDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (state && !dialog.open) {
-      dialog.showModal();
-    } else if (!state && dialog.open) {
-      dialog.close();
-    }
-  }, [state]);
-
-  const handleDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onCancel();
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) onCancel();
     },
     [onCancel],
   );
@@ -76,15 +63,7 @@ export function ConfirmDialog({
   const isDestructive = state.variant === "destructive";
 
   return (
-    <dialog
-      ref={dialogRef}
-      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:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
-    >
+    <DialogShell open onOpenChange={handleOpenChange} width="sm" aria-label={state.title}>
       <div className="stg:flex stg:flex-col stg:gap-4 stg:p-6">
         <div className="stg:flex stg:flex-col stg:gap-1.5">
           <h3 className="stg:text-base stg:font-semibold stg:text-foreground">
@@ -122,6 +101,6 @@ export function ConfirmDialog({
           </button>
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }

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>
-  );
-}