@stigmer/react 3.12.0 → 3.12.2

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

package/src/attachment/__tests__/vision-preflight.test.ts

@@ -0,0 +1,311 @@
+import { describe, it, expect } from "vitest";
+import {
+  assessVisionPreflight,
+  visionPreflightMessage,
+  type VisionPreflightAttachment,
+} from "../vision-preflight";
+import type { ModelInfo, VisionLimits } from "../../models/registry";
+
+/** The production budget the registry advertises (3 MiB / 4 MiB / 10). */
+const LIMITS: VisionLimits = {
+  maxImageBytes: 3 * 1024 * 1024,
+  maxTotalBytes: 4 * 1024 * 1024,
+  maxImages: 10,
+};
+
+function image(name: string, sizeBytes: number, contentType = "image/png"): VisionPreflightAttachment {
+  return { name, sizeBytes, contentType };
+}
+
+function model(overrides?: Partial<ModelInfo>): ModelInfo {
+  return {
+    modelId: "test-model",
+    provider: "anthropic",
+    displayName: "Test Model",
+    shortDescription: "",
+    speedTier: "fast",
+    costTier: "standard",
+    harness: "native",
+    featured: false,
+    serviceTiers: [],
+    ...overrides,
+  };
+}
+
+describe("assessVisionPreflight — tri-state silence", () => {
+  it("warns about nothing when limits are absent (older server)", () => {
+    const result = assessVisionPreflight([image("huge.png", 50 * 1024 * 1024)], {
+      model: model(),
+    });
+    expect(result.warnings).toEqual([]);
+    expect(result.modelCannotSeeImages).toBe(false);
+  });
+
+  it("stays silent on an unassessed model (visionCapability undefined)", () => {
+    const result = assessVisionPreflight([image("a.png", 100)], {
+      model: model(),
+      limits: LIMITS,
+    });
+    expect(result.warnings).toEqual([]);
+  });
+
+  it("never treats an unknown model as blind", () => {
+    const result = assessVisionPreflight([image("a.png", 100)], { limits: LIMITS });
+    expect(result.modelCannotSeeImages).toBe(false);
+  });
+
+  it("returns no warnings for zero attachments", () => {
+    expect(assessVisionPreflight([], { model: model(), limits: LIMITS }).warnings).toEqual([]);
+  });
+});
+
+describe("assessVisionPreflight — vision candidates", () => {
+  it("ignores non-image attachments entirely, even huge ones", () => {
+    const result = assessVisionPreflight(
+      [
+        { name: "big.pdf", sizeBytes: 50 * 1024 * 1024, contentType: "application/pdf" },
+        { name: "big.zip", sizeBytes: 50 * 1024 * 1024, contentType: "application/zip" },
+      ],
+      { model: model({ visionCapability: false }), limits: LIMITS },
+    );
+    expect(result.warnings).toEqual([]);
+    expect(result.modelCannotSeeImages).toBe(false);
+  });
+
+  it("ignores SVG — image/* but not a runner vision type", () => {
+    const result = assessVisionPreflight(
+      [image("diagram.svg", 50 * 1024 * 1024, "image/svg+xml")],
+      { model: model(), limits: LIMITS },
+    );
+    expect(result.warnings).toEqual([]);
+  });
+
+  it("assesses all four runner vision types, case-insensitively", () => {
+    const oversized = LIMITS.maxImageBytes + 1;
+    const result = assessVisionPreflight(
+      [
+        image("a.png", oversized, "image/png"),
+        image("b.jpg", oversized, "image/JPEG"),
+        image("c.webp", oversized, "image/webp"),
+        image("d.gif", oversized, "image/gif"),
+      ],
+      { limits: LIMITS },
+    );
+    expect(result.warnings.map((w) => w.reason)).toEqual([
+      "too_large", "too_large", "too_large", "too_large",
+    ]);
+  });
+});
+
+describe("assessVisionPreflight — per-image cap (too_large)", () => {
+  it("accepts an image exactly at the cap", () => {
+    const result = assessVisionPreflight([image("edge.png", LIMITS.maxImageBytes)], {
+      limits: LIMITS,
+    });
+    expect(result.warnings).toEqual([]);
+  });
+
+  it("degrades an image one byte over the cap", () => {
+    const result = assessVisionPreflight([image("over.png", LIMITS.maxImageBytes + 1)], {
+      limits: LIMITS,
+    });
+    expect(result.warnings).toEqual([
+      { name: "over.png", sizeBytes: LIMITS.maxImageBytes + 1, reason: "too_large" },
+    ]);
+  });
+
+  it("mirrors the production regression: a 3.59 MiB PNG warns", () => {
+    // The prod-verified case from stigmer/stigmer#365 — this image uploaded
+    // fine and then surprised the user with a disclosure after the turn.
+    const bytes = Math.round(3.59 * 1024 * 1024);
+    const result = assessVisionPreflight([image("photo.png", bytes)], { limits: LIMITS });
+    expect(result.warnings[0]?.reason).toBe("too_large");
+  });
+});
+
+describe("assessVisionPreflight — per-turn budget (budget_exhausted)", () => {
+  it("replicates the runner's admission: an oversized image does NOT consume budget", () => {
+    // 3.5 MiB is over the per-image cap (degraded, not counted); the two
+    // 1.9 MiB images then fit the 4 MiB total exactly like the runner
+    // would admit them. A naive sum (7.3 MiB) would wrongly warn on all.
+    const result = assessVisionPreflight(
+      [
+        image("oversized.png", 3.5 * 1024 * 1024),
+        image("ok-1.png", 1.9 * 1024 * 1024),
+        image("ok-2.png", 1.9 * 1024 * 1024),
+      ],
+      { limits: LIMITS },
+    );
+    expect(result.warnings).toEqual([
+      { name: "oversized.png", sizeBytes: 3.5 * 1024 * 1024, reason: "too_large" },
+    ]);
+  });
+
+  it("degrades the image that would cross the total-byte budget, in attachment order", () => {
+    const twoMib = 2 * 1024 * 1024;
+    const result = assessVisionPreflight(
+      [image("a.png", twoMib), image("b.png", twoMib), image("c.png", twoMib)],
+      { limits: LIMITS },
+    );
+    // a (2 MiB) + b (2 MiB) = 4 MiB exactly; c would cross.
+    expect(result.warnings).toEqual([
+      { name: "c.png", sizeBytes: twoMib, reason: "budget_exhausted" },
+    ]);
+  });
+
+  it("degrades images past the count cap", () => {
+    const tiny = 1024;
+    const images = Array.from({ length: 12 }, (_, i) => image(`img-${i}.png`, tiny));
+    const result = assessVisionPreflight(images, { limits: LIMITS });
+    expect(result.warnings.map((w) => w.name)).toEqual(["img-10.png", "img-11.png"]);
+    expect(result.warnings.every((w) => w.reason === "budget_exhausted")).toBe(true);
+  });
+
+  it("admits a smaller later image after an earlier refusal (runner semantics: sequential offers, no reservation)", () => {
+    // The runner offers every image in order and never reserves budget for
+    // a refused one; the preflight must not be cleverer or dumber than the
+    // enforcement it predicts.
+    const result = assessVisionPreflight(
+      [
+        image("big.png", 3 * 1024 * 1024),
+        image("medium.png", 2 * 1024 * 1024), // 3+2 > 4 → refused
+        image("small.png", 512 * 1024),       // 3+0.5 ≤ 4 → admitted
+      ],
+      { limits: LIMITS },
+    );
+    expect(result.warnings).toEqual([
+      { name: "medium.png", sizeBytes: 2 * 1024 * 1024, reason: "budget_exhausted" },
+    ]);
+  });
+});
+
+describe("assessVisionPreflight — blind model (model_no_vision)", () => {
+  it("short-circuits the byte math: every image warns model_no_vision, sizes irrelevant", () => {
+    const result = assessVisionPreflight(
+      [image("tiny.png", 10), image("huge.png", 50 * 1024 * 1024)],
+      { model: model({ visionCapability: false }), limits: LIMITS },
+    );
+    expect(result.modelCannotSeeImages).toBe(true);
+    expect(result.warnings).toEqual([
+      { name: "tiny.png", sizeBytes: 10, reason: "model_no_vision" },
+      { name: "huge.png", sizeBytes: 50 * 1024 * 1024, reason: "model_no_vision" },
+    ]);
+  });
+
+  it("applies the capability verdict even without limits (older server)", () => {
+    const result = assessVisionPreflight([image("a.png", 10)], {
+      model: model({ visionCapability: false }),
+    });
+    expect(result.modelCannotSeeImages).toBe(true);
+  });
+
+  it("an explicitly sighted model gets the normal byte assessment", () => {
+    const result = assessVisionPreflight([image("a.png", LIMITS.maxImageBytes + 1)], {
+      model: model({ visionCapability: true }),
+      limits: LIMITS,
+    });
+    expect(result.modelCannotSeeImages).toBe(false);
+    expect(result.warnings[0]?.reason).toBe("too_large");
+  });
+});
+
+describe("visionPreflightMessage", () => {
+  it("returns null for a clean preflight", () => {
+    expect(
+      visionPreflightMessage({ warnings: [], modelCannotSeeImages: false }),
+    ).toBeNull();
+  });
+
+  it("leads with the model for a blind-model preflight, never file advice", () => {
+    const preflight = assessVisionPreflight([image("a.png", 10)], {
+      model: model({ visionCapability: false, displayName: "Kimi K3" }),
+      limits: LIMITS,
+    });
+    const message = visionPreflightMessage(preflight, {
+      limits: LIMITS,
+      modelDisplayName: "Kimi K3",
+    });
+    expect(message).toBe(
+      "Kimi K3 can't view images — attached images will reach the agent as files only.",
+    );
+  });
+
+  it("names a single oversized file with its size and the actual cap", () => {
+    const preflight = assessVisionPreflight(
+      [image("screenshot.png", Math.round(3.6 * 1024 * 1024))],
+      { limits: LIMITS },
+    );
+    const message = visionPreflightMessage(preflight, { limits: LIMITS });
+    expect(message).toBe(
+      "screenshot.png (3.6 MB) exceeds the 3.0 MB inline-image limit and will reach the agent as a file, not an image.",
+    );
+  });
+
+  it("names two oversized files, then switches to a count for more", () => {
+    const over = LIMITS.maxImageBytes + 1;
+    const two = assessVisionPreflight(
+      [image("a.png", over), image("b.png", over)],
+      { limits: LIMITS },
+    );
+    expect(visionPreflightMessage(two, { limits: LIMITS })).toContain(
+      "a.png and b.png exceed",
+    );
+
+    const three = assessVisionPreflight(
+      [image("a.png", over), image("b.png", over), image("c.png", over)],
+      { limits: LIMITS },
+    );
+    expect(visionPreflightMessage(three, { limits: LIMITS })).toContain(
+      "3 images exceed",
+    );
+  });
+
+  it("explains the per-turn budget for budget_exhausted", () => {
+    const twoMib = 2 * 1024 * 1024;
+    const preflight = assessVisionPreflight(
+      [image("a.png", twoMib), image("b.png", twoMib), image("c.png", twoMib)],
+      { limits: LIMITS },
+    );
+    const message = visionPreflightMessage(preflight, { limits: LIMITS });
+    expect(message).toBe(
+      "c.png is over this turn's inline-image budget (10 images, 4.0 MB total) and will reach the agent as a file.",
+    );
+  });
+
+  it("joins mixed too_large and budget_exhausted reasons into one line", () => {
+    const preflight = {
+      warnings: [
+        { name: "big.png", sizeBytes: 4 * 1024 * 1024, reason: "too_large" as const },
+        { name: "late.png", sizeBytes: 1024, reason: "budget_exhausted" as const },
+      ],
+      modelCannotSeeImages: false,
+    };
+    const message = visionPreflightMessage(preflight, { limits: LIMITS });
+    expect(message).toContain("big.png");
+    expect(message).toContain("late.png");
+    expect(message).toContain("; ");
+  });
+
+  it("degrades copy gracefully when limits are unknown", () => {
+    const preflight = {
+      warnings: [
+        { name: "big.png", sizeBytes: 4 * 1024 * 1024, reason: "too_large" as const },
+      ],
+      modelCannotSeeImages: false,
+    };
+    const message = visionPreflightMessage(preflight);
+    expect(message).toBe(
+      "big.png (4.0 MB) exceeds the inline-image size limit and will reach the agent as a file, not an image.",
+    );
+  });
+
+  it("falls back to generic wording when the blind model has no display name", () => {
+    const preflight = {
+      warnings: [{ name: "a.png", sizeBytes: 10, reason: "model_no_vision" as const }],
+      modelCannotSeeImages: true,
+    };
+    expect(visionPreflightMessage(preflight)).toBe(
+      "The selected model can't view images — attached images will reach the agent as files only.",
+    );
+  });
+});

package/src/attachment/index.ts

@@ -21,6 +21,18 @@ export { extractClipboardFiles } from "./clipboard.js";
 export type { ClipboardFilesSource } from "./clipboard.js";
 
 export { prepareImageForVision } from "./prepare-image.js";
+export {
+  assessVisionPreflight,
+  visionPreflightMessage,
+} from "./vision-preflight.js";
+export type {
+  AssessVisionPreflightOptions,
+  VisionPreflight,
+  VisionPreflightAttachment,
+  VisionPreflightMessageOptions,
+  VisionPreflightReason,
+  VisionPreflightWarning,
+} from "./vision-preflight.js";
 export {
   MAX_VISION_LONG_EDGE_PX,
   MAX_VISION_PIXELS,