@stigmer/react 3.12.2 → 3.12.4

package/src/skill/internal/fetchAndUnpackArtifact.ts

@@ -1,6 +1,6 @@
 import { create } from "@bufbuild/protobuf";
 import { GetArtifactRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/skill/v1/io_pb";
-import type { Stigmer } from "@stigmer/sdk";
+import { isUnimplemented, type Stigmer } from "@stigmer/sdk";
 import type { SkillFileEntry } from "../useSkillUpload.js";
 
 /** Unpacked artifact: file entries for browsing + content map for reading. */
@@ -20,11 +20,10 @@ export async function fetchAndUnpackArtifact(
   stigmer: Stigmer,
   artifactStorageKey: string,
 ): Promise<UnpackedArtifact> {
-  const request = create(GetArtifactRequestSchema, { artifactStorageKey });
-  const response = await stigmer.skill.getArtifact(request);
+  const artifact = await fetchArtifactBytes(stigmer, artifactStorageKey);
 
   const { unzipSync, strFromU8 } = await import("fflate");
-  const unzipped = unzipSync(response.artifact);
+  const unzipped = unzipSync(artifact);
 
   const entries = Object.entries(unzipped);
   const files: SkillFileEntry[] = entries.map(([path, data]) => ({
@@ -49,3 +48,54 @@ export async function fetchAndUnpackArtifact(
 
   return { files, contentMap };
 }
+
+/**
+ * Fetch the artifact ZIP bytes, URL-first (the transfer lane, stigmer#675):
+ * the bytes ride HTTP, so any valid skill (up to the 100MB limit) is
+ * fetchable — the unary `getArtifact` RPC is capped at the server's 10MB
+ * gRPC message limit.
+ *
+ * Fallbacks to the unary lane, deliberately wider than the runner's
+ * mint-Unimplemented-only contract because this code runs in a browser:
+ *
+ * - `Unimplemented` from the mint — a pre-transfer-lane server (the code
+ *   clients key their fallback on, same as every other lane client).
+ * - A failed HTTP fetch of the minted URL — in a browser this is how a
+ *   missing bucket CORS policy surfaces (an opaque `TypeError`,
+ *   indistinguishable from a network failure). The unary lane was the
+ *   status quo and still serves everything under the message cap, so
+ *   degrading beats breaking the console; the warn keeps it observable.
+ */
+async function fetchArtifactBytes(
+  stigmer: Stigmer,
+  artifactStorageKey: string,
+): Promise<Uint8Array> {
+  const request = create(GetArtifactRequestSchema, { artifactStorageKey });
+
+  let minted;
+  try {
+    minted = await stigmer.skill.getArtifactDownloadUrl(request);
+  } catch (err) {
+    if (isUnimplemented(err)) {
+      const response = await stigmer.skill.getArtifact(request);
+      return response.artifact;
+    }
+    throw err;
+  }
+
+  try {
+    const doFetch = stigmer.fetch ?? globalThis.fetch;
+    const resp = await doFetch(minted.url);
+    if (!resp.ok) {
+      throw new Error(`artifact download failed with HTTP ${resp.status}`);
+    }
+    return new Uint8Array(await resp.arrayBuffer());
+  } catch (err) {
+    console.warn(
+      "[stigmer] skill artifact download URL fetch failed (bucket CORS not provisioned for this origin?) — falling back to the unary lane",
+      err,
+    );
+    const response = await stigmer.skill.getArtifact(request);
+    return response.artifact;
+  }
+}

package/src/skill/useSkillDiff.ts

@@ -21,7 +21,13 @@ export interface UseSkillDiffReturn {
   readonly error: Error | null;
 }
 
-/** Maximum artifact size (10 MB) to prevent excessive memory usage. */
+/**
+ * Maximum COMBINED unpacked text of both artifacts (10 MB) — a browser
+ * memory guard on holding and diffing two extracted file trees, NOT a
+ * transport limit. The transfer lane (stigmer#675) removed the download
+ * cap, so arbitrarily large valid skills can be *fetched*; what stays
+ * bounded is what this hook is willing to diff in tab memory.
+ */
 const MAX_ARTIFACT_BYTES = 10 * 1024 * 1024;
 
 // ---------------------------------------------------------------------------

package/src/skill/useSkillUpload.ts

@@ -129,10 +129,16 @@ export function useSkillUpload(): UseSkillUploadReturn {
       if (abortRef.current !== callId) return;
 
       const entries = Object.entries(unzipped);
-      const skillMdEntry = findSkillMd(entries);
+      const skillMdEntry = findRootSkillMd(entries);
 
       if (!skillMdEntry) {
-        setValidationError("ZIP must contain a SKILL.md file at the root level");
+        const nestedPath = findNestedSkillMd(entries);
+        setValidationError(
+          nestedPath
+            ? `Found ${nestedPath} — SKILL.md must be at the archive root. ` +
+              "Zip the skill folder's contents, not the folder itself."
+            : "ZIP must contain a SKILL.md file at the root level",
+        );
         return;
       }
 
@@ -207,12 +213,25 @@ function isZip(bytes: Uint8Array): boolean {
   );
 }
 
-function findSkillMd(
+/**
+ * The layout contract is root-only on both editions (DD-018, #452): the
+ * server rejects an archive whose only SKILL.md is nested, so the preview
+ * must too — accepting it here converts a clear pre-upload error into a
+ * confusing post-upload rejection (issue #684).
+ */
+function findRootSkillMd(
   entries: [string, Uint8Array][],
 ): [string, Uint8Array] | undefined {
-  return entries.find(
-    ([path]) => path === "SKILL.md" || path.match(/^[^/]+\/SKILL\.md$/),
-  );
+  return entries.find(([path]) => path === "SKILL.md");
+}
+
+/**
+ * Detect the "zipped the folder instead of its contents" mistake so the
+ * error can say what to do. Any-depth suffix match, mirroring the server's
+ * nested-occurrence detection (skill/storage/zip_extractor.go).
+ */
+function findNestedSkillMd(entries: [string, Uint8Array][]): string | undefined {
+  return entries.find(([path]) => path.endsWith("/SKILL.md"))?.[0];
 }
 
 function parseFrontmatter(content: string): Record<string, unknown> | null {

package/src/workflow/FailedRunsWidget.tsx

@@ -4,6 +4,7 @@ import { memo } from "react";
 import type { WorkflowExecution } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { formatRelativeTime } from "../activity/format-relative-time.js";
 
 export interface FailedRunsWidgetProps {
@@ -54,7 +55,7 @@ export const FailedRunsWidget = memo(function FailedRunsWidget({
           No recent failures
         </p>
       ) : (
-        <ul className="stg:space-y-2" role="list">
+        <ul className={cn(UNSTYLED_LIST, "stg:space-y-2")} role="list">
           {executions.map((exec) => {
             const id = exec.metadata?.id;
             const name =

package/src/workflow/PendingApprovalsWidget.tsx

@@ -4,6 +4,7 @@ import { memo } from "react";
 import type { PendingApproval } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/io_pb";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { formatRelativeTime } from "../activity/format-relative-time.js";
 
 export interface PendingApprovalsWidgetProps {
@@ -65,7 +66,7 @@ export const PendingApprovalsWidget = memo(function PendingApprovalsWidget({
           No approvals pending
         </p>
       ) : (
-        <ul className="stg:space-y-2" role="list">
+        <ul className={cn(UNSTYLED_LIST, "stg:space-y-2")} role="list">
           {approvals.map((approval) => {
             const requestedAt = approval.requestedAt
               ? timestampDate(approval.requestedAt)

package/src/workflow/ViewYamlDialog.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { memo, useCallback, useEffect, useRef } from "react";
-import { cn } from "@stigmer/theme";
+import { memo, useCallback } from "react";
 import type { WorkflowGraphModel } from "./workflow-graph-model.js";
 import { taskToYaml } from "./inspector/task-to-yaml.js";
+import { DialogShell } from "../internal/DialogShell.js";
 import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 /** Props for {@link ViewYamlDialog}. */
@@ -32,7 +32,6 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
   graph,
   onClose,
 }: ViewYamlDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
   const { copy, copied } = useCopyFeedback();
 
   const node = nodeId && graph
@@ -41,45 +40,27 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
 
   const yaml = node ? taskToYaml(node) : "";
 
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (nodeId && node) {
-      if (!dialog.open) dialog.showModal();
-    } else {
-      if (dialog.open) dialog.close();
-    }
-  }, [nodeId, node]);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    const handleClose = () => onClose();
-    dialog.addEventListener("close", handleClose);
-    return () => dialog.removeEventListener("close", handleClose);
-  }, [onClose]);
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) onClose();
+    },
+    [onClose],
+  );
 
   const handleCopy = useCallback(() => {
     void copy(yaml);
   }, [copy, yaml]);
 
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === dialogRef.current) {
-        onClose();
-      }
-    },
-    [onClose],
-  );
-
   return (
-    <dialog
-      ref={dialogRef}
-      className={cn(
-        "stgm stg:m-auto stg:max-h-[80vh] stg:w-full stg:max-w-lg stg:rounded-lg stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-background,#fff)] stg:p-0 stg:shadow-xl",
-        "stg:backdrop:bg-backdrop",
-      )}
-      onClick={handleBackdropClick}
+    <DialogShell
+      open={Boolean(nodeId && node)}
+      onOpenChange={handleOpenChange}
+      width="lg"
+      dismissOnBackdrop
+      // `stgm` re-establishes the theme scope (this dialog renders from the
+      // workflow canvas); the var-fallback styling of the body predates the
+      // token utilities and stays untouched here.
+      className="stgm stg:max-h-[80vh] stg:bg-[var(--stgm-background,#fff)] stg:border-[var(--stgm-border,#e5e5e5)]"
       aria-label={node ? `YAML for ${node.taskName}` : "View YAML"}
     >
       {node && (
@@ -121,7 +102,7 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
           </div>
         </div>
       )}
-    </dialog>
+    </DialogShell>
   );
 });
 

package/src/workflow/WorkflowArchitectDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import {
   useWorkflowArchitectFlow,
   type ArchitectPhase,
@@ -64,8 +65,6 @@ export function WorkflowArchitectDialog({
   onSuccess,
   onError,
 }: WorkflowArchitectDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
   const handleSuccess = useCallback(
     (successOrg: string, slug: string) => {
       onOpenChange(false);
@@ -80,54 +79,23 @@ export function WorkflowArchitectDialog({
     onError,
   });
 
+  // Each opening starts from a clean prompt.
   useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
-      flow.reset();
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
+    if (open) flow.reset();
   }, [open, flow.reset]);
 
-  const handleDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onOpenChange(false);
-    },
-    [onOpenChange],
-  );
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === dialogRef.current) {
-        onOpenChange(false);
-      }
-    },
-    [onOpenChange],
-  );
-
-  const isWorking =
-    flow.phase === "starting" ||
-    flow.phase === "streaming" ||
-    flow.phase === "applying";
-
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleDialogCancel}
-      onClick={handleBackdropClick}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-3xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-backdrop",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
+    <DialogShell
+      open={open}
+      onOpenChange={onOpenChange}
+      width="3xl"
+      dismissOnBackdrop
+      aria-label="Workflow Architect"
     >
       <div className="stg:flex stg:flex-col">
         <DialogPhase flow={flow} onClose={() => onOpenChange(false)} />
       </div>
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/workflow/WorkflowExplainDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import { useExplainWorkflowFlow, type ExplainPhase } from "./useExplainWorkflowFlow.js";
 import { MessageThread } from "../execution/MessageThread.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
@@ -36,8 +37,6 @@ export function WorkflowExplainDialog({
   org,
   currentYaml,
 }: WorkflowExplainDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
   const flow = useExplainWorkflowFlow({
     org,
     currentYaml,
@@ -46,36 +45,14 @@ export function WorkflowExplainDialog({
     },
   });
 
-  // Show/hide dialog
+  // Each opening starts a fresh explanation.
   useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
+    if (open) {
       flow.reset();
-      dialog.showModal();
       flow.explain();
-    } else if (!open && dialog.open) {
-      dialog.close();
     }
   }, [open, flow.reset, flow.explain]);
 
-  const handleDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onOpenChange(false);
-    },
-    [onOpenChange],
-  );
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === dialogRef.current) {
-        onOpenChange(false);
-      }
-    },
-    [onOpenChange],
-  );
-
   const { copy, copied } = useCopyFeedback();
   const handleCopy = useCallback(() => {
     if (flow.explanation) {
@@ -84,15 +61,12 @@ export function WorkflowExplainDialog({
   }, [copy, flow.explanation]);
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleDialogCancel}
-      onClick={handleBackdropClick}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-2xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-backdrop",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
+    <DialogShell
+      open={open}
+      onOpenChange={onOpenChange}
+      width="2xl"
+      dismissOnBackdrop
+      aria-label="Workflow Explanation"
     >
       <div className="stg:flex stg:flex-col">
         {/* Header */}
@@ -206,7 +180,7 @@ export function WorkflowExplainDialog({
           </div>
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/workflow/WorkflowGraphFullscreenDialog.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 { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
 import { WorkflowOverviewGraph } from "./WorkflowOverviewGraph.js";
 
@@ -38,23 +39,9 @@ export function WorkflowGraphFullscreenDialog({
   onClose,
   onOpenInEditor,
 }: WorkflowGraphFullscreenDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-
-    if (open && !dialog.open) {
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
-  }, [open]);
-
-  const handleCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onClose();
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) onClose();
     },
     [onClose],
   );
@@ -62,14 +49,15 @@ export function WorkflowGraphFullscreenDialog({
   const workflowName = workflow?.metadata?.name || "Task Flow";
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleCancel}
+    <DialogShell
+      open={open}
+      onOpenChange={handleOpenChange}
       aria-label={`${workflowName} — full view`}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:h-[90vh] stg:w-[95vw] stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-0 stg:text-foreground stg:shadow-2xl stg:outline-none",
-        "stg:[&::backdrop]:bg-black/60",
-      )}
+      // Near-full-viewport outlier: free-form sizing and the background
+      // surface for the graph canvas. The previously hardcoded ::backdrop
+      // color (bg-black/60 — it predated and escaped the #652 fence via the
+      // arbitrary-variant spelling) now rides the shell's token backdrop.
+      className="stg:h-[90vh] stg:w-[95vw] stg:max-w-none stg:bg-background stg:text-foreground stg:outline-none"
     >
       {open && (
         <div className="stg:flex stg:h-full stg:flex-col">
@@ -101,7 +89,7 @@ export function WorkflowGraphFullscreenDialog({
           </div>
         </div>
       )}
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/workflow/WorkflowRunDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
 import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
 import { useRunWorkflowFlow } from "./useRunWorkflowFlow.js";
@@ -82,8 +83,6 @@ export function WorkflowRunDialog({
   onSuccess,
   onError,
 }: WorkflowRunDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
   const handleSuccess = useCallback(
     (executionId: string) => {
       onOpenChange(false);
@@ -100,25 +99,19 @@ export function WorkflowRunDialog({
     onError,
   });
 
-  // Sync open state with the native dialog
+  // Each opening starts from a clean form.
   useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
-      flow.reset();
-      // Preselection must follow reset (reset clears the selection back to
-      // the server-resolved default). Guarded against stale ids: an instance
-      // deleted between the caller capturing the id and this open falls back
-      // to the default option instead of a <select> value with no option.
-      if (
-        initialInstanceId &&
-        instances.some((i) => i.metadata?.id === initialInstanceId)
-      ) {
-        flow.setSelectedInstanceId(initialInstanceId);
-      }
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
+    if (!open) return;
+    flow.reset();
+    // Preselection must follow reset (reset clears the selection back to
+    // the server-resolved default). Guarded against stale ids: an instance
+    // deleted between the caller capturing the id and this open falls back
+    // to the default option instead of a <select> value with no option.
+    if (
+      initialInstanceId &&
+      instances.some((i) => i.metadata?.id === initialInstanceId)
+    ) {
+      flow.setSelectedInstanceId(initialInstanceId);
     }
   }, [
     open,
@@ -128,36 +121,16 @@ export function WorkflowRunDialog({
     instances,
   ]);
 
-  const handleDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onOpenChange(false);
-    },
-    [onOpenChange],
-  );
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === dialogRef.current) {
-        onOpenChange(false);
-      }
-    },
-    [onOpenChange],
-  );
-
   const workflowName =
     workflow.metadata?.name || workflow.metadata?.slug || "Workflow";
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleDialogCancel}
-      onClick={handleBackdropClick}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-lg stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-backdrop",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
+    <DialogShell
+      open={open}
+      onOpenChange={onOpenChange}
+      width="lg"
+      dismissOnBackdrop
+      aria-label={`Run ${workflowName}`}
     >
       <div className="stg:flex stg:flex-col">
         {/* Header */}
@@ -231,7 +204,7 @@ export function WorkflowRunDialog({
           </button>
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }