@stigmer/react 3.12.0 → 3.12.2

package/src/channel-app/ChannelAppDetailPanel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo, useState, type FormEvent } from "react";
+import { type FormEvent, useCallback, useId, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { ChannelApp } from "@stigmer/protos/ai/stigmer/agentic/channelapp/v1/api_pb";
@@ -17,7 +17,8 @@ import {
   WHATSAPP_CHANNEL_APP_WEBHOOK_FIELDS,
   whatsappChannelAppWebhookUrl,
 } from "./whatsappAppSetup.js";
-import { CopyBlock, CopyRow, FormField, SpinnerIcon } from "./internal.js";
+import { CopyBlock, CopyRow, FormField } from "./internal.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -148,7 +149,7 @@ export function ChannelAppDetailPanel({
                 "stg:disabled:pointer-events-none stg:disabled:opacity-40",
               )}
             >
-              {isDeleting && <SpinnerIcon />}
+              {isDeleting && <SpinnerIcon size={12} />}
               Delete
             </button>
             <button
@@ -187,6 +188,7 @@ function SlackAppDetail({
   readonly consoleOrigin?: string;
   readonly onUpdated?: (app: ChannelApp) => void;
 }) {
+  const baseId = useId();
   const stigmer = useStigmer();
   const { update, isUpdating, error: updateError, clearError } = useUpdateChannelApp();
 
@@ -277,7 +279,7 @@ function SlackAppDetail({
         </p>
 
         <FormField
-          id="stgm-chapp-edit-client-id"
+          id={`${baseId}-client-id`}
           label="Client ID"
           value={clientId}
           onChange={setClientId}
@@ -286,7 +288,7 @@ function SlackAppDetail({
           required
         />
         <FormField
-          id="stgm-chapp-edit-client-secret"
+          id={`${baseId}-client-secret`}
           label="Client secret"
           value={clientSecret}
           onChange={setClientSecret}
@@ -296,7 +298,7 @@ function SlackAppDetail({
           required
         />
         <FormField
-          id="stgm-chapp-edit-signing-secret"
+          id={`${baseId}-signing-secret`}
           label="Signing secret"
           value={signingSecret}
           onChange={setSigningSecret}
@@ -321,7 +323,7 @@ function SlackAppDetail({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isUpdating && <SpinnerIcon />}
+          {isUpdating && <SpinnerIcon size={12} />}
           Save credentials
         </button>
       </form>
@@ -342,6 +344,7 @@ function WhatsAppAppDetail({
   readonly createHandoff?: ChannelAppCreateHandoff;
   readonly onUpdated?: (app: ChannelApp) => void;
 }) {
+  const baseId = useId();
   const stigmer = useStigmer();
   const { update, isUpdating, error: updateError, clearError } = useUpdateChannelApp();
 
@@ -446,7 +449,7 @@ function WhatsAppAppDetail({
         </p>
 
         <FormField
-          id="stgm-chapp-edit-app-id"
+          id={`${baseId}-app-id`}
           label="App ID"
           value={metaAppId}
           onChange={setMetaAppId}
@@ -455,7 +458,7 @@ function WhatsAppAppDetail({
           required
         />
         <FormField
-          id="stgm-chapp-edit-app-secret"
+          id={`${baseId}-app-secret`}
           label="App secret"
           value={appSecret}
           onChange={setAppSecret}
@@ -465,7 +468,7 @@ function WhatsAppAppDetail({
           required
         />
         <FormField
-          id="stgm-chapp-edit-access-token"
+          id={`${baseId}-access-token`}
           label="Access token"
           value={accessToken}
           onChange={setAccessToken}
@@ -475,7 +478,7 @@ function WhatsAppAppDetail({
           required
         />
         <FormField
-          id="stgm-chapp-edit-verify-token"
+          id={`${baseId}-verify-token`}
           label="Verify token"
           value={verifyToken}
           onChange={setVerifyToken}
@@ -501,7 +504,7 @@ function WhatsAppAppDetail({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isUpdating && <SpinnerIcon />}
+          {isUpdating && <SpinnerIcon size={12} />}
           Save credentials
         </button>
       </form>

package/src/channel-app/CreateChannelAppForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo, useState, type FormEvent } from "react";
+import { type FormEvent, useCallback, useId, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { ChannelApp } from "@stigmer/protos/ai/stigmer/agentic/channelapp/v1/api_pb";
@@ -14,7 +14,8 @@ import {
   slackChannelAppRedirectUrl,
 } from "./slackAppSetup.js";
 import { generateWhatsAppVerifyToken } from "./whatsappAppSetup.js";
-import { CopyBlock, FormField, SpinnerIcon } from "./internal.js";
+import { CopyBlock, FormField } from "./internal.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -80,6 +81,7 @@ export function CreateChannelAppForm({
   onCancel,
   className,
 }: CreateChannelAppFormProps) {
+  const baseId = useId();
   const { create, isCreating, error, clearError } = useCreateChannelApp();
 
   const [provider, setProvider] = useState<ChannelProviderId>("slack");
@@ -185,7 +187,7 @@ export function CreateChannelAppForm({
         />
 
         <FormField
-          id="stgm-chapp-name"
+          id={`${baseId}-name`}
           label="Name"
           value={name}
           onChange={setName}
@@ -241,7 +243,7 @@ export function CreateChannelAppForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={12} />}
           Register channel app
         </button>
 
@@ -282,6 +284,7 @@ function ProviderPicker({
   readonly onChange: (id: ChannelProviderId) => void;
   readonly disabled: boolean;
 }) {
+  const groupName = useId();
   return (
     <fieldset>
       <legend className="stg:mb-1.5 stg:block stg:text-xs stg:font-medium stg:text-foreground">
@@ -303,7 +306,7 @@ function ProviderPicker({
               <input
                 id={`stgm-chapp-provider-${p.id}`}
                 type="radio"
-                name="stgm-chapp-provider"
+                name={`${groupName}-provider`}
                 checked={checked}
                 onChange={() => onChange(p.id)}
                 disabled={disabled}
@@ -342,6 +345,7 @@ function SlackCreateSection({
   readonly onSigningSecretChange: (v: string) => void;
   readonly disabled: boolean;
 }) {
+  const baseId = useId();
   return (
     <>
       <div className="stg:space-y-1.5">
@@ -380,7 +384,7 @@ function SlackCreateSection({
         </p>
 
         <FormField
-          id="stgm-chapp-client-id"
+          id={`${baseId}-client-id`}
           label="Client ID"
           value={clientId}
           onChange={onClientIdChange}
@@ -390,7 +394,7 @@ function SlackCreateSection({
         />
 
         <FormField
-          id="stgm-chapp-client-secret"
+          id={`${baseId}-client-secret`}
           label="Client secret"
           value={clientSecret}
           onChange={onClientSecretChange}
@@ -401,7 +405,7 @@ function SlackCreateSection({
         />
 
         <FormField
-          id="stgm-chapp-signing-secret"
+          id={`${baseId}-signing-secret`}
           label="Signing secret"
           value={signingSecret}
           onChange={onSigningSecretChange}
@@ -441,6 +445,7 @@ function WhatsAppCreateSection({
   readonly onVerifyTokenChange: (v: string) => void;
   readonly disabled: boolean;
 }) {
+  const baseId = useId();
   return (
     <>
       <div className="stg:space-y-1.5">
@@ -476,7 +481,7 @@ function WhatsAppCreateSection({
         </p>
 
         <FormField
-          id="stgm-chapp-app-id"
+          id={`${baseId}-app-id`}
           label="App ID"
           value={appId}
           onChange={onAppIdChange}
@@ -486,7 +491,7 @@ function WhatsAppCreateSection({
         />
 
         <FormField
-          id="stgm-chapp-app-secret"
+          id={`${baseId}-app-secret`}
           label="App secret"
           value={appSecret}
           onChange={onAppSecretChange}
@@ -498,7 +503,7 @@ function WhatsAppCreateSection({
         />
 
         <FormField
-          id="stgm-chapp-access-token"
+          id={`${baseId}-access-token`}
           label="Access token"
           value={accessToken}
           onChange={onAccessTokenChange}
@@ -510,7 +515,7 @@ function WhatsAppCreateSection({
         />
 
         <FormField
-          id="stgm-chapp-verify-token"
+          id={`${baseId}-verify-token`}
           label="Verify token"
           value={verifyToken}
           onChange={onVerifyTokenChange}

package/src/channel-app/internal.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
 import { cn } from "@stigmer/theme";
 import { TruncatedText } from "../internal/truncated-text.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 /**
  * Internal building blocks shared by the channel-app forms and panels.
@@ -148,32 +149,11 @@ function CopyButton({
 }
 
 function useCopy(value: string) {
-  const [copied, setCopied] = useState(false);
+  const { copy: copyText, copied } = useCopyFeedback();
 
   const copy = useCallback(() => {
-    void navigator.clipboard.writeText(value).then(() => {
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 1500);
-    });
-  }, [value]);
+    void copyText(value);
+  }, [copyText, value]);
 
   return { copied, copy };
 }
-
-export 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/composer/ComposerToolbar.tsx

@@ -18,9 +18,9 @@ import {
   PaperclipIcon,
   WorkspaceIcon,
   ArrowUpIcon,
-  SpinnerIcon,
   StopIcon,
 } from "./icons.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 export interface ComposerToolbarProps {
   readonly disabled: boolean;

package/src/composer/SessionComposer.tsx

@@ -7,9 +7,14 @@ import { useComposer } from "./useComposer.js";
 import { ComposerToolbar } from "./ComposerToolbar.js";
 import { type ConfigureMenuItem } from "./ConfigureMenu.js";
 import type { HarnessOption } from "../models/harness.js";
-import type { ServiceTierOption } from "../models/service-tier.js";
+import { FAST_SERVICE_TIER, type ServiceTierOption } from "../models/service-tier.js";
 import type { InteractionModeOption } from "./InteractionModePicker.js";
 import { parseModelKey } from "../models/registry.js";
+import { useModelRegistry } from "../models/useModelRegistry.js";
+import {
+  assessVisionPreflight,
+  visionPreflightMessage,
+} from "../attachment/vision-preflight.js";
 import { WorkspaceEditor } from "../workspace/WorkspaceEditor.js";
 import { AgentPicker } from "../agent/AgentPicker.js";
 import { AgentEnvForm, type AgentEnvFormSubmitOptions } from "../agent/AgentEnvForm.js";
@@ -654,9 +659,23 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
 
   // Service tier (#357): composer-local state like modelId. "standard" is
   // the resting default; the ModelSelector's fail-safe resets it when the
-  // user switches to a model without a fast tier.
+  // user switches to a model without a fast tier. Whether an armed "fast"
+  // actually rides the submit is decided by the derived effective run
+  // selection below (#663) — state here records the user's intent only.
   const [serviceTier, setServiceTier] = useState<ServiceTierOption>("standard");
 
+  // Active harness mirror: controlled hosts (both viewers) keep the
+  // `harness` prop current, but with `showHarnessSelector` the dropdown
+  // lives inside ModelSelector and an uncontrolled host would leave the
+  // prop stale — the mirror keeps the effective-model resolution scoped
+  // to the harness the picker is actually showing.
+  const [activeHarness, setActiveHarness] = useState<HarnessOption>(
+    harness ?? "native",
+  );
+  useEffect(() => {
+    if (harness !== undefined) setActiveHarness(harness);
+  }, [harness]);
+
   const [displayNames, setDisplayNames] = useState<Map<string, string>>(
     () => new Map(),
   );
@@ -753,6 +772,107 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
       ? { onValidationError: onAttachmentValidationError }
       : undefined,
   );
+
+  // -------------------------------------------------------------------------
+  // Vision preflight (stigmer/stigmer#365, #386) — predicts which attached
+  // images the runner will degrade to "not viewable inline" (per-image /
+  // per-turn byte budget from the registry document) or that the selected
+  // model is explicitly blind. Non-blocking by design: the files still
+  // upload and mount fine, they just won't reach the model as pixels — so
+  // this warns, it never gates the send.
+  // -------------------------------------------------------------------------
+
+  const {
+    getByKey: registryGetByKey,
+    getModel: registryGetModel,
+    visionLimits,
+    isLoading: isRegistryLoading,
+  } = useModelRegistry();
+  const { defaultModel: harnessDefaultModel } = useModelRegistry({
+    harness: activeHarness,
+  });
+
+  // -------------------------------------------------------------------------
+  // Effective run selection (stigmer/stigmer#663) — the ONE resolution of
+  // "which model and tier will this send actually run". The model pill,
+  // the fast-tier gate, the vision preflight, and the submit payload all
+  // read it, so the pill can never promise a selection the wire doesn't
+  // carry (the #663 failure: a fallback pill with an armed fast tier over
+  // an empty model — refused fail-closed at create).
+  //
+  // Adoption of the harness default is gated on `showModelSelector`: with
+  // no pill there is no displayed promise, and whoever hid the picker owns
+  // the model (the guest share profile server-side, a host pin) — the
+  // guest no-modelName invariant depends on this gate staying put.
+  // -------------------------------------------------------------------------
+
+  const effective = useMemo(() => {
+    // modelId may be a compound "harness/id" key (unified picker) or a
+    // plain id — resolve through the unambiguous compound lookup first,
+    // mirroring the submit path's parseModelKey handling.
+    const stateModel = modelId
+      ? (registryGetByKey(modelId) ?? registryGetModel(modelId))
+      : undefined;
+
+    let effectiveModelId = modelId;
+    let effectiveModel = stateModel;
+    if (showModelSelector && !isRegistryLoading && stateModel === undefined) {
+      // Empty state, or an id the registry no longer lists (e.g. a retired
+      // model carried over from the last execution): the pill falls back to
+      // the harness default, so the submission adopts it too. While the
+      // registry is still loading nothing can be classified — pass the raw
+      // id through unmodified rather than misadopting the default.
+      effectiveModelId = harnessDefaultModel?.modelId ?? modelId;
+      effectiveModel = harnessDefaultModel;
+    }
+
+    // "fast" rides the submit only while the effective model prices the
+    // variant — the same rule the trigger badge renders and the server
+    // enforces fail-closed (#357). An armed tier surviving onto a model
+    // with no fast variant (e.g. a prop-driven `defaultModelId` re-sync,
+    // which bypasses ModelSelector's user-pick reset) is thereby
+    // unsendable, not just unstyled.
+    const effectiveServiceTier: ServiceTierOption =
+      serviceTier === "fast"
+        && (effectiveModel?.serviceTiers.includes(FAST_SERVICE_TIER) ?? false)
+        ? "fast"
+        : "standard";
+
+    return { modelId: effectiveModelId, model: effectiveModel, serviceTier: effectiveServiceTier };
+  }, [
+    modelId,
+    serviceTier,
+    showModelSelector,
+    isRegistryLoading,
+    registryGetByKey,
+    registryGetModel,
+    harnessDefaultModel,
+  ]);
+
+  // Vision preflight consumes the effective model — previously it kept a
+  // third private resolution (unified-registry default) that could name a
+  // different model than both the pill and the payload.
+  const visionNotice = useMemo(() => {
+    if (!enableAttachments || attachments.entries.length === 0) return null;
+    const preflight = assessVisionPreflight(
+      attachments.entries.map((e) => ({
+        name: e.file.name,
+        sizeBytes: e.file.size,
+        contentType: e.contentType,
+      })),
+      { model: effective.model, limits: visionLimits },
+    );
+    return visionPreflightMessage(preflight, {
+      limits: visionLimits,
+      modelDisplayName: effective.model?.displayName,
+    });
+  }, [
+    enableAttachments,
+    attachments.entries,
+    effective.model,
+    visionLimits,
+  ]);
+
   const fileRefs = useFileReferences();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isDragOver, setIsDragOver] = useState(false);
@@ -923,27 +1043,32 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
           : undefined);
       const hasFileRefs = enableFileReferences && fileRefs.hasRefs;
       const buildFromPlan = overrides?.buildFromPlan;
-      // Carried only when the user actively chose fast: an untouched
-      // tier means "platform default" (which resolves to standard in
-      // the runner), and the UNSPECIFIED-vs-explicit distinction is
-      // load-bearing telemetry (#357).
-      const effectiveServiceTier = serviceTier === "fast" ? serviceTier : undefined;
+      // Carried only when fast is actually in effect (armed by the user
+      // AND priced by the effective model — see the effective run
+      // selection): an untouched tier means "platform default" (which
+      // resolves to standard in the runner), and the UNSPECIFIED-vs-
+      // explicit distinction is load-bearing telemetry (#357).
+      const submitServiceTier =
+        effective.serviceTier === "fast" ? effective.serviceTier : undefined;
 
       const context: SessionComposerSubmitContext | undefined =
         hasEnv || hasAttachments || effectiveMode || hasFileRefs || buildFromPlan
-        || effectiveServiceTier
+        || submitServiceTier
           ? {
               runtimeEnv: hasEnv ? env : undefined,
               attachments: hasAttachments ? attachmentInputs : undefined,
               interactionMode: effectiveMode,
-              serviceTier: effectiveServiceTier,
+              serviceTier: submitServiceTier,
               workspaceFileRefs: hasFileRefs ? [...fileRefs.refs] : undefined,
               buildFromPlan,
             }
           : undefined;
 
-      const resolvedModelId = modelId
-        ? (parseModelKey(modelId)?.modelId ?? modelId)
+      // The payload carries the effective model — exactly what the pill
+      // displays (#663), stripped to a plain id when the state holds a
+      // compound "harness/id" key.
+      const resolvedModelId = effective.modelId
+        ? (parseModelKey(effective.modelId)?.modelId ?? effective.modelId)
         : undefined;
       onSubmit(message, resolvedModelId, context);
 
@@ -954,7 +1079,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
         fileRefs.clear();
       }
     },
-    [onSubmit, modelId, serviceTier, stigmer, agentSetup.state, mcpSetup.pendingRuntimeEnv, sessionVariables, enableAttachments, attachments, personalEnv, showInteractionModePicker, interactionMode],
+    [onSubmit, effective, stigmer, agentSetup.state, mcpSetup.pendingRuntimeEnv, sessionVariables, enableAttachments, attachments, personalEnv, showInteractionModePicker, interactionMode],
   );
 
   const composer = useComposer({
@@ -982,6 +1107,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
 
   const handleHarnessChange = useCallback(
     (h: HarnessOption) => {
+      setActiveHarness(h);
       onHarnessChange?.(h);
     },
     [onHarnessChange],
@@ -1636,6 +1762,25 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
           </div>
         )}
 
+        {/* Zone 2.65: Vision preflight warning (stigmer/stigmer#365, #386) —
+            derives from the attached entries, so it appears the moment an
+            image over the advertised budget lands (paste/drop/pick) or the
+            selected model is explicitly blind, and disappears when the
+            offending attachment is removed or the model changes. Warning
+            styling (not muted): unlike the upload wait, this is a problem
+            the user can fix BEFORE spending the turn. Non-blocking — the
+            files still upload and mount; they just won't reach the model
+            as pixels. */}
+        {visionNotice && (
+          <div
+            role="status"
+            className="stg:mx-3 stg:mb-2 stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:bg-warning/10 stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-warning"
+          >
+            <AlertTriangleIcon />
+            <span>{visionNotice}</span>
+          </div>
+        )}
+
         {/* Zone 2.7: Agent setup warning */}
         {showAgent &&
           agentSetup.state.status === "needsEnvVars" &&
@@ -1734,7 +1879,9 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
           interactionMode={interactionMode}
           onInteractionModeChange={handleInteractionModeChange}
           showModelSelector={showModelSelector}
-          modelId={modelId}
+          // The pill renders the effective selection — the same value the
+          // submit payload carries (#663), never a fallback of its own.
+          modelId={effective.modelId}
           onModelChange={handleModelChange}
           serviceTier={serviceTier}
           onServiceTierChange={setServiceTier}