@stigmer/react 3.12.1 → 3.12.2

package/src/identity-provider/IdentityProviderDetailPanel.tsx

@@ -1,12 +1,15 @@
 "use client";
 
-import { useCallback, useState, type FormEvent } from "react";
+import { type FormEvent, useCallback, useId, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { IdentityProvider } from "@stigmer/protos/ai/stigmer/iam/identityprovider/v1/api_pb";
 import { IamRole } from "@stigmer/protos/ai/stigmer/iam/v1/enum_pb";
 import { timestampDate, type Timestamp } from "@bufbuild/protobuf/wkt";
 import { useUpdateIdentityProvider } from "./useUpdateIdentityProvider.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { selectElementText } from "../internal/select-element-text.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 /** Props for {@link IdentityProviderDetailPanel}. */
 export interface IdentityProviderDetailPanelProps {
@@ -55,6 +58,7 @@ export function IdentityProviderDetailPanel({
   ssoLoginUrl,
   className,
 }: IdentityProviderDetailPanelProps) {
+  const baseId = useId();
   const spec = identityProvider.spec;
   const meta = identityProvider.metadata;
 
@@ -230,7 +234,7 @@ export function IdentityProviderDetailPanel({
       ) : (
         <form onSubmit={handleSave} className="stg:space-y-3">
           <FieldInput
-            id="stgm-idp-edit-name"
+            id={`${baseId}-name`}
             label="Display name"
             value={displayName}
             onChange={setDisplayName}
@@ -239,7 +243,7 @@ export function IdentityProviderDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-idp-edit-jwks"
+            id={`${baseId}-jwks`}
             label="JWKS URI"
             value={jwksUri}
             onChange={setJwksUri}
@@ -248,7 +252,7 @@ export function IdentityProviderDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-idp-edit-issuers"
+            id={`${baseId}-issuers`}
             label="Allowed issuers"
             value={issuers}
             onChange={setIssuers}
@@ -258,7 +262,7 @@ export function IdentityProviderDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-idp-edit-audience"
+            id={`${baseId}-audience`}
             label="Expected audience"
             value={audience}
             onChange={setAudience}
@@ -267,7 +271,7 @@ export function IdentityProviderDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-idp-edit-userinfo"
+            id={`${baseId}-userinfo`}
             label="Userinfo endpoint"
             value={userinfoEndpoint}
             onChange={setUserinfoEndpoint}
@@ -304,7 +308,7 @@ export function IdentityProviderDetailPanel({
 
           {isSso && (
             <FieldInput
-              id="stgm-idp-edit-client-id"
+              id={`${baseId}-client-id`}
               label="OIDC client ID"
               value={oidcClientId}
               onChange={setOidcClientId}
@@ -345,7 +349,7 @@ export function IdentityProviderDetailPanel({
                 "stg:disabled:pointer-events-none stg:disabled:opacity-40",
               )}
             >
-              {isUpdating && <SpinnerIcon />}
+              {isUpdating && <SpinnerIcon size={12} />}
               Save changes
             </button>
             <button
@@ -488,8 +492,6 @@ function Field({
 // View mode — copyable field
 // ---------------------------------------------------------------------------
 
-const COPIED_FEEDBACK_MS = 2000;
-
 function CopyableField({
   label,
   value,
@@ -499,25 +501,14 @@ function CopyableField({
   value: string;
   hint?: string;
 }) {
-  const [copied, setCopied] = useState(false);
-  const valueId = "stgm-idp-sso-login-url";
+  const { copy, copied } = useCopyFeedback();
+  const revealRef = useRef<HTMLElement>(null);
 
   const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(value);
-      setCopied(true);
-      setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
-    } catch {
-      const el = document.getElementById(valueId);
-      if (el) {
-        const selection = window.getSelection();
-        const range = document.createRange();
-        range.selectNodeContents(el);
-        selection?.removeAllRanges();
-        selection?.addRange(range);
-      }
-    }
-  }, [value]);
+    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>
@@ -527,14 +518,14 @@ function CopyableField({
       <dd className="stg:mt-0.5">
         <div className="stg:flex stg:items-center stg:gap-2">
           <span
-            id={valueId}
+            ref={revealRef}
             className="stg:text-foreground stg:break-all stg:font-mono stg:text-xs stg:select-all"
           >
             {value}
           </span>
           <button
             type="button"
-            onClick={handleCopy}
+            onClick={() => void handleCopy()}
             className={cn(
               "stg:shrink-0 stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem]",
               "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
@@ -669,6 +660,7 @@ function JitEditSection({
   onTenantOrgClaimChange: (v: string) => void;
   disabled?: boolean;
 }) {
+  const baseId = useId();
   if (isSso) {
     return (
       <div className="stg:rounded-md stg:border stg:border-border-muted stg:bg-muted-faint stg:px-3 stg:py-2">
@@ -712,13 +704,13 @@ function JitEditSection({
         <>
           <div className="stg:space-y-1">
             <label
-              htmlFor="stgm-idp-edit-grant-role"
+              htmlFor={`${baseId}-grant-role`}
               className="stg:text-xs stg:font-medium stg:text-foreground"
             >
               Auto-grant role
             </label>
             <select
-              id="stgm-idp-edit-grant-role"
+              id={`${baseId}-grant-role`}
               value={String(autoGrantRole)}
               onChange={(e) => onAutoGrantRoleChange(Number(e.target.value) as IamRole)}
               disabled={disabled}
@@ -740,7 +732,7 @@ function JitEditSection({
           </div>
 
           <FieldInput
-            id="stgm-idp-edit-tenant-claim"
+            id={`${baseId}-tenant-claim`}
             label="Tenant org claim"
             value={tenantOrgClaim}
             onChange={onTenantOrgClaimChange}
@@ -846,20 +838,3 @@ function ArrowLeftIcon() {
   );
 }
 
-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/identity-provider/IdentityProviderListPanel.tsx

@@ -8,6 +8,7 @@ import type { IdentityProvider } from "@stigmer/protos/ai/stigmer/iam/identitypr
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { useIdentityProviderList } from "./useIdentityProviderList.js";
 import { useDeleteIdentityProvider } from "./useDeleteIdentityProvider.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link IdentityProviderListPanel}. */
 export interface IdentityProviderListPanelProps {
@@ -197,7 +198,7 @@ function IdpRow({
               "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
-            {isDeleting && <SpinnerIcon />}
+            {isDeleting && <SpinnerIcon size={12} />}
             Delete
           </button>
           <button
@@ -366,20 +367,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/identity-provider/IdentityProviderWizard.tsx

@@ -1,10 +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 } from "@stigmer/sdk";
 import type { IdentityProvider } from "@stigmer/protos/ai/stigmer/iam/identityprovider/v1/api_pb";
@@ -13,6 +9,7 @@ import { ProviderPicker } from "./ProviderPicker.js";
 import { useCreateIdentityProvider } from "./useCreateIdentityProvider.js";
 import { useOidcDiscovery } from "./useOidcDiscovery.js";
 import type { ProviderPreset, ProviderConfig } from "./presets.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link IdentityProviderWizard}. */
 export interface IdentityProviderWizardProps {
@@ -365,6 +362,7 @@ function ConfigureStep({
   onContinue: () => void;
   onCancel?: () => void;
 }) {
+  const baseId = useId();
   const allVarsFilled = preset.variables.every(
     (v) => (vars[v.key] ?? "").trim() !== "",
   );
@@ -402,7 +400,7 @@ function ConfigureStep({
 
       {/* Common fields */}
       <FieldInput
-        id="stgm-idp-wiz-name"
+        id={`${baseId}-name`}
         label="Display name"
         value={name}
         onChange={onNameChange}
@@ -412,7 +410,7 @@ function ConfigureStep({
       />
 
       <FieldInput
-        id="stgm-idp-wiz-audience"
+        id={`${baseId}-audience`}
         label="Expected audience"
         value={audience}
         onChange={onAudienceChange}
@@ -438,7 +436,7 @@ function ConfigureStep({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isLoading && <SpinnerIcon />}
+          {isLoading && <SpinnerIcon size={12} />}
           Continue
         </button>
         <TextButton onClick={onBack} disabled={isLoading}>
@@ -507,6 +505,7 @@ function ReviewStep({
   onSubmit: (e: FormEvent) => void;
   onCancel?: () => void;
 }) {
+  const baseId = useId();
   const canSubmit =
     jwksUri.trim() !== "" &&
     issuers.trim() !== "" &&
@@ -530,7 +529,7 @@ function ReviewStep({
       </p>
 
       <FieldInput
-        id="stgm-idp-wiz-jwks"
+        id={`${baseId}-jwks`}
         label="JWKS URI"
         value={jwksUri}
         onChange={onJwksUriChange}
@@ -540,7 +539,7 @@ function ReviewStep({
       />
 
       <FieldInput
-        id="stgm-idp-wiz-issuers"
+        id={`${baseId}-issuers`}
         label="Allowed issuers"
         value={issuers}
         onChange={onIssuersChange}
@@ -551,7 +550,7 @@ function ReviewStep({
       />
 
       <FieldInput
-        id="stgm-idp-wiz-userinfo"
+        id={`${baseId}-userinfo`}
         label="Userinfo endpoint"
         value={userinfoEndpoint}
         onChange={onUserinfoEndpointChange}
@@ -570,7 +569,7 @@ function ReviewStep({
 
       {isSso && (
         <FieldInput
-          id="stgm-idp-wiz-client-id"
+          id={`${baseId}-client-id`}
           label="OIDC client ID"
           value={oidcClientId}
           onChange={onOidcClientIdChange}
@@ -611,7 +610,7 @@ function ReviewStep({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={12} />}
           Create identity provider
         </button>
         <TextButton onClick={onBack} disabled={isCreating}>
@@ -825,6 +824,7 @@ function JitProvisioningSection({
   onTenantOrgClaimChange: (v: string) => void;
   disabled?: boolean;
 }) {
+  const baseId = useId();
   if (isSso) {
     return (
       <div className="stg:rounded-md stg:border stg:border-border-muted stg:bg-muted-faint stg:px-3 stg:py-2">
@@ -867,7 +867,7 @@ function JitProvisioningSection({
       {autoGrant && (
         <>
           <FieldInput
-            id="stgm-idp-wiz-grant-role"
+            id={`${baseId}-grant-role`}
             label="Auto-grant role"
             value={String(autoGrantRole)}
             onChange={(v) => onAutoGrantRoleChange(Number(v) as IamRole)}
@@ -879,7 +879,7 @@ function JitProvisioningSection({
           />
 
           <FieldInput
-            id="stgm-idp-wiz-tenant-claim"
+            id={`${baseId}-tenant-claim`}
             label="Tenant org claim"
             value={tenantOrgClaim}
             onChange={onTenantOrgClaimChange}
@@ -980,20 +980,3 @@ function CancelButton({
   );
 }
 
-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/identity-provider/SsoLoginPrompt.tsx

@@ -184,7 +184,8 @@ function resolvePhase(
 // Sub-components
 // ---------------------------------------------------------------------------
 
-import { forwardRef } from "react";
+import { forwardRef, useId } from "react";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 interface OrgInputFormProps {
   readonly value: string;
@@ -194,17 +195,18 @@ interface OrgInputFormProps {
 
 const OrgInputForm = forwardRef<HTMLInputElement, OrgInputFormProps>(
   function OrgInputForm({ value, onChange, onSubmit }, ref) {
+    const inputId = useId();
     return (
       <form onSubmit={onSubmit} className="stg:space-y-3">
         <label
-          htmlFor="sso-org-input"
+          htmlFor={inputId}
           className="stg:block stg:text-sm stg:font-medium stg:text-foreground"
         >
           Organization
         </label>
         <input
           ref={ref}
-          id="sso-org-input"
+          id={inputId}
           type="text"
           value={value}
           onChange={(e) => onChange(e.target.value)}
@@ -244,7 +246,7 @@ function LoadingState({ org }: { org: string }) {
       aria-busy="true"
       aria-label={`Looking up SSO provider for ${org}`}
     >
-      <SpinnerIcon />
+      <SpinnerIcon size={20} className="stg:text-muted-foreground" />
       <p className="stg:text-sm stg:text-muted-foreground">
         Looking up <span className="stg:font-medium stg:text-foreground">{org}</span>&hellip;
       </p>
@@ -366,23 +368,6 @@ function ErrorState({
 // Icons
 // ---------------------------------------------------------------------------
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin stg:text-muted-foreground"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}
 
 function SsoShieldIcon() {
   return (

package/src/index.ts

@@ -1,5 +1,6 @@
 // Provider and context
 export { StigmerProvider, type StigmerProviderProps } from "./provider.js";
+export { type ApprovalDefaults } from "./approval-defaults-context.js";
 export { StigmerContext } from "./context.js";
 
 // Runner adapter
@@ -39,7 +40,9 @@ export {
   modelKey,
   parseModelKey,
   fetchModelRegistry,
+  fetchModelRegistryDocument,
   parseRegistryJson,
+  parseRegistryDocument,
   useModelRegistry,
   ModelRegistryContext,
   ModelSelector,
@@ -51,6 +54,7 @@ export {
 } from "./models/index.js";
 export type {
   ModelInfo,
+  ModelRegistryDocument,
   ModelRegistryState,
   ParsedModelKey,
   Provider,
@@ -60,6 +64,7 @@ export type {
   ModelSelectorProps,
   HarnessSelectorProps,
   HarnessOption,
+  VisionLimits,
 } from "./models/index.js";
 
 // Workspace — behavior hooks and styled components
@@ -215,6 +220,7 @@ export type {
   ExecutionTargetOption,
   RuntimeEnvProvider,
   SessionAudience,
+  SessionPanelMode,
   SetupTabProps,
   SetupTabMutationCallbacks,
 } from "./session/index.js";
@@ -257,6 +263,7 @@ export {
   ExecutionPhaseBadge,
   InteractionModeBadge,
   SetupProgress,
+  LivenessStatusLine,
   ExecutionProgress,
   TodoList,
   TodoCard,
@@ -279,6 +286,7 @@ export {
   ResultView,
   summarizeResultView,
   TerminalSession,
+  TerminalTail,
   useToolPresentation,
   registerToolPresenter,
   getToolPresenter,
@@ -296,6 +304,7 @@ export {
   SubAgentSection,
   MessageEntry,
   MessageThread,
+  ExecutionErrorNotice,
   ThreadSkeleton,
   FollowUpInput,
   ApprovalCard,
@@ -380,6 +389,7 @@ export type {
   ExecutionPhaseBadgeProps,
   InteractionModeBadgeProps,
   SetupProgressProps,
+  LivenessStatusLineProps,
   ExecutionProgressProps,
   TodoListProps,
   TodoCardProps,
@@ -398,6 +408,7 @@ export type {
   ToolCallDetailProps,
   ResultViewProps,
   TerminalSessionProps,
+  TerminalTailProps,
   ToolPresentation,
   ToolPresenter,
   ToolDisclosure,
@@ -409,6 +420,8 @@ export type {
   SubAgentSectionProps,
   MessageEntryProps,
   MessageThreadProps,
+  MessageThreadSlots,
+  ExecutionErrorNoticeProps,
   ThreadContentColumn,
   ThreadSkeletonProps,
   FollowUpInputProps,
@@ -466,13 +479,14 @@ export type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agent
 export { ExecutionArtifactKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 
 // Attachment — file upload behavior hook, styled chip list, clipboard paste,
-// and vision-resolution image preparation
+// vision-resolution image preparation, and vision preflight warnings
 export {
   useAttachments,
   AttachmentChipList,
   MAX_ATTACHMENT_BYTES,
   MAX_VISION_LONG_EDGE_PX,
   MAX_VISION_PIXELS,
+  assessVisionPreflight,
   detectContentType,
   exceedsVisionResolution,
   extractClipboardFiles,
@@ -481,15 +495,22 @@ export {
   prepareImageForVision,
   uniquifyFilename,
   validateAttachmentSize,
+  visionPreflightMessage,
 } from "./attachment/index.js";
 export type {
   AttachmentPhase,
   AttachmentEntry,
+  AssessVisionPreflightOptions,
   ClipboardFilesSource,
   UseAttachmentsOptions,
   UseAttachmentsReturn,
   AttachmentChipListProps,
   VisionFitSize,
+  VisionPreflight,
+  VisionPreflightAttachment,
+  VisionPreflightMessageOptions,
+  VisionPreflightReason,
+  VisionPreflightWarning,
 } from "./attachment/index.js";
 
 // File Reference — workspace file-reference behavior hook and styled chip list
@@ -1868,6 +1889,7 @@ export type {
   WorkflowTaskListProps,
   WorkflowDetailViewProps,
   WorkflowExecutionViewerProps,
+  WorkflowExecutionPanelMode,
   WorkflowExecutionHeaderProps,
   WorkflowExecutionPanelController,
   UseWorkflowExecutionPanelOptions,

package/src/internal/DecisionButton.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@stigmer/theme";
+import { SpinnerIcon } from "../internal/thread-card/glyphs.js";
 
 /** The visual weight of a {@link DecisionButton}. */
 export type DecisionVariant = "primary" | "ghost" | "danger";
@@ -106,23 +107,3 @@ export function DecisionButton({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Inline SVG icon
-// ---------------------------------------------------------------------------
-
-function SpinnerIcon() {
-  return (
-    <svg
-      width="10"
-      height="10"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
-    </svg>
-  );
-}

package/src/internal/SpinnerIcon.tsx

@@ -0,0 +1,42 @@
+import { cn } from "@stigmer/theme";
+
+/**
+ * The SDK's canonical in-flight spinner: a three-quarter arc on a 16×16
+ * grid, colored by `currentColor` so the consumer's text token drives it
+ * (never hardcoded values — Dont-Do #3). Extracted from ~33 identical
+ * per-component copies (stigmer-cloud#270); new busy states import this
+ * instead of pasting another one.
+ *
+ * `size` is the rendered box; the glyph scales from the same viewBox, so
+ * every size renders the identical shape. Decorative by contract
+ * (`aria-hidden`) — pair it with visible or `sr-only` text when the busy
+ * state itself must be announced.
+ *
+ * The thread-card rows deliberately use a finer quarter-arc micro-glyph
+ * instead — see `internal/thread-card/glyphs.tsx`.
+ *
+ * @internal Not part of the public API.
+ */
+export function SpinnerIcon({
+  size = 16,
+  className,
+}: {
+  readonly size?: number;
+  readonly className?: string;
+} = {}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      className={cn("stg:animate-spin", className)}
+      aria-hidden="true"
+    >
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}