@stigmer/react 3.12.3 → 3.12.5

package/src/skill/__tests__/useSkillUpload.test.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { zipSync, strToU8 } from "fflate";
+import { useSkillUpload } from "../useSkillUpload";
+
+const SKILL_MD = "---\nname: my-skill\ndescription: A test skill\n---\n# My Skill\n";
+
+/** Build a real ZIP (fflate, the same library the hook unpacks with) as a File. */
+function zipFile(files: Record<string, Uint8Array>): File {
+  return new File([zipSync(files)], "skill.zip", { type: "application/zip" });
+}
+
+async function process(files: Record<string, Uint8Array>) {
+  const { result } = renderHook(() => useSkillUpload());
+  await act(() => result.current.processFile(zipFile(files)));
+  return result;
+}
+
+describe("useSkillUpload", () => {
+  it("accepts a root SKILL.md and produces a preview", async () => {
+    const result = await process({
+      "SKILL.md": strToU8(SKILL_MD),
+      "references/schema.md": strToU8("# Schema"),
+    });
+
+    expect(result.current.validationError).toBeNull();
+    expect(result.current.preview?.name).toBe("my-skill");
+    expect(result.current.preview?.description).toBe("A test skill");
+    expect(result.current.artifact).not.toBeNull();
+  });
+
+  // The layout contract is root-only on both editions (DD-018, #452). The
+  // preview exists to catch the "zipped the folder instead of its contents"
+  // mistake BEFORE upload — accepting nested here and failing at push is the
+  // exact confusion issue #684 pins.
+  it("rejects a nested-only SKILL.md with the zip-the-contents hint", async () => {
+    const result = await process({
+      "my-skill/SKILL.md": strToU8(SKILL_MD),
+      "my-skill/references/schema.md": strToU8("# Schema"),
+    });
+
+    expect(result.current.preview).toBeNull();
+    expect(result.current.artifact).toBeNull();
+    expect(result.current.validationError).toBe(
+      "Found my-skill/SKILL.md — SKILL.md must be at the archive root. " +
+        "Zip the skill folder's contents, not the folder itself.",
+    );
+  });
+
+  it("detects a deeply nested SKILL.md for the hint (any depth, server parity)", async () => {
+    const result = await process({
+      "wrapper/my-skill/SKILL.md": strToU8(SKILL_MD),
+    });
+
+    expect(result.current.preview).toBeNull();
+    expect(result.current.validationError).toContain("Found wrapper/my-skill/SKILL.md");
+  });
+
+  it("rejects an archive with no SKILL.md anywhere with the plain root-level message", async () => {
+    const result = await process({
+      "README.md": strToU8("# Not a skill"),
+    });
+
+    expect(result.current.preview).toBeNull();
+    expect(result.current.validationError).toBe(
+      "ZIP must contain a SKILL.md file at the root level",
+    );
+  });
+});

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/ApprovalFormBuilder.tsx

@@ -24,11 +24,15 @@ interface FormFieldEntry {
   enumValues: string;
 }
 
+// HUMAN_INPUT_TIMEOUT_ESCALATE is deliberately absent: the proto declares it
+// but no runtime exists, and the server validator refuses it at apply
+// (stigmer/stigmer#779). The old option also wrote an `escalation_task` field
+// that HumanInputTaskConfig never had, so every config it produced failed
+// the server's strict decode.
 const TIMEOUT_POLICY_OPTIONS = [
   { value: "HUMAN_INPUT_TIMEOUT_FAIL", label: "Fail — task errors on timeout" },
   { value: "HUMAN_INPUT_TIMEOUT_APPROVE", label: "Auto-approve — proceed as approved" },
   { value: "HUMAN_INPUT_TIMEOUT_DENY", label: "Auto-deny — proceed as denied" },
-  { value: "HUMAN_INPUT_TIMEOUT_ESCALATE", label: "Escalate — branch to escalation task" },
 ] as const;
 
 const TIMEOUT_UNITS = [
@@ -107,8 +111,6 @@ export const ApprovalFormBuilder = memo(function ApprovalFormBuilder({
       <TimeoutSection
         timeout={typeof cfg.timeout === "number" ? cfg.timeout : 0}
         onTimeout={typeof cfg.on_timeout === "string" ? cfg.on_timeout : ""}
-        escalationTask={typeof cfg.escalation_task === "string" ? cfg.escalation_task : ""}
-        allTaskNames={allTaskNames}
         onUpdateConfig={onUpdateConfig}
       />
       <StringListSection
@@ -619,14 +621,10 @@ function FormFieldRow({
 function TimeoutSection({
   timeout,
   onTimeout,
-  escalationTask,
-  allTaskNames,
   onUpdateConfig,
 }: {
   timeout: number;
   onTimeout: string;
-  escalationTask: string;
-  allTaskNames: readonly string[];
   onUpdateConfig: (fieldPath: string, value: unknown) => void;
 }) {
   const bestUnit = useMemo(() => {
@@ -665,8 +663,6 @@ function TimeoutSection({
     [timeout, unit, onUpdateConfig],
   );
 
-  const isEscalate = onTimeout === "HUMAN_INPUT_TIMEOUT_ESCALATE";
-
   return (
     <CollapsibleSection title="Timeout">
       <div className="stg:flex stg:items-center stg:gap-1">
@@ -710,24 +706,6 @@ function TimeoutSection({
         </div>
       )}
 
-      {isEscalate && (
-        <div className="stg:mt-1.5 stg:flex stg:flex-col stg:gap-1">
-          <label className="stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
-            Escalation task
-          </label>
-          <select
-            value={escalationTask}
-            onChange={(e) => onUpdateConfig("escalation_task", e.target.value || undefined)}
-            className={cn(smallInputClass)}
-            aria-label="Escalation target task"
-          >
-            <option value="">— Select escalation task —</option>
-            {allTaskNames.map((name) => (
-              <option key={name} value={name}>{name}</option>
-            ))}
-          </select>
-        </div>
-      )}
     </CollapsibleSection>
   );
 }

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/facets/WorkflowArtifactsTab.tsx

@@ -5,6 +5,7 @@
 
 import type { Artifact } from "@stigmer/protos/ai/stigmer/agentic/artifact/v1/api_pb";
 import { useMemo } from "react";
+import { UNSTYLED_LIST } from "../../internal/element-resets.js";
 import { ArtifactRowView } from "../../execution/ArtifactRowView.js";
 import type { ArtifactRowItem } from "../../execution/artifact-row-item.js";
 import { deriveWorkflowArtifactItems } from "../deriveWorkflowArtifactItems.js";
@@ -55,7 +56,7 @@ export function WorkflowArtifactsTab({
   }
 
   return (
-    <ul role="list" className="stg:flex stg:flex-col">
+    <ul role="list" className={`${UNSTYLED_LIST} stg:flex stg:flex-col`}>
       {entries.map(({ artifact, item }) => (
         <WorkflowArtifactRow
           key={artifact.metadata?.id ?? item.name}

package/src/workflow/facets/WorkflowUsageTab.tsx

@@ -5,6 +5,7 @@
 
 import { useMemo } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../../internal/element-resets.js";
 import type {
   DerivedCostSummary,
   DerivedTaskState,
@@ -72,7 +73,7 @@ export function WorkflowUsageTab({
           <h3 className="stg:px-2 stg:text-xs stg:font-semibold stg:uppercase stg:tracking-wider stg:text-muted-foreground">
             By task
           </h3>
-          <ul role="list" className="stg:flex stg:flex-col">
+          <ul role="list" className={cn(UNSTYLED_LIST, "stg:flex stg:flex-col")}>
             {items.map((item) => (
               <UsageRow key={item.taskName} item={item} />
             ))}

package/src/workflow/inspector/WorkflowSummaryPanel.tsx

@@ -2,6 +2,7 @@
 
 import { memo, useMemo, useState, useCallback } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../../internal/element-resets.js";
 import type { WorkflowGraphModel, WorkflowGraphBudget, WorkflowGraphEnvVar } from "../workflow-graph-model.js";
 import { START_NODE_ID, END_NODE_ID } from "../workflow-graph-model.js";
 import { CATEGORY_DISPLAY_NAMES } from "../canvas-constants.js";
@@ -155,7 +156,7 @@ function ValidationSection({
       </button>
 
       {expanded && (
-        <ul className="stg:flex stg:flex-col stg:gap-1" role="list">
+        <ul className={cn(UNSTYLED_LIST, "stg:flex stg:flex-col stg:gap-1")} role="list">
           {Array.from(errors.entries()).map(([nodeId, nodeErrors]) =>
             nodeErrors.map((error, i) => (
               <li

package/src/workflow/inspector/tabs/BranchesTab.tsx

@@ -2,6 +2,7 @@
 
 import { memo, useCallback, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_FIELDSET } from "../../../internal/element-resets.js";
 import {
   Tooltip,
   TooltipContent,
@@ -283,7 +284,7 @@ function ForkBranches({
   return (
     <div className="stg:flex stg:flex-col stg:gap-3 stg:px-3 stg:py-3">
       {/* Join policy */}
-      <fieldset>
+      <fieldset className={UNSTYLED_FIELDSET}>
         <legend className="stg:text-xs stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)] stg:mb-1.5">
           Join policy
         </legend>

package/src/workflow/inspector/tabs/IterationTab.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { memo, useCallback, useState, useMemo } from "react";
+import { UNSTYLED_FIELDSET } from "../../../internal/element-resets.js";
 import type { WorkflowGraphNode } from "../../workflow-graph-model.js";
 import type { InspectorMutations } from "../types.js";
 
@@ -177,7 +178,7 @@ export const IterationTab = memo(function IterationTab({
 
       {/* Error policy */}
       {parallelism > 0 && (
-        <fieldset>
+        <fieldset className={UNSTYLED_FIELDSET}>
           <legend className="stg:text-[10px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)] stg:mb-1.5">
             Error policy
           </legend>

package/src/workflow/instance/WorkflowInstanceDetailPanel.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../../internal/element-resets.js";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
@@ -263,7 +264,7 @@ export function WorkflowInstanceDetailPanel({
               {(spec?.environmentRefs?.length ?? 0) === 0 ? (
                 <p className="stg:text-xs stg:text-muted-foreground">No environments bound.</p>
               ) : (
-                <ol className="stg:space-y-1">
+                <ol className={cn(UNSTYLED_LIST, "stg:space-y-1")}>
                   {spec!.environmentRefs.map((ref, idx) => (
                     <li key={`${ref.slug}-${idx}`} className="stg:flex stg:items-center stg:gap-2 stg:text-sm">
                       <span className="stg:text-xs stg:text-muted-foreground stg:w-4 stg:text-right">{idx + 1}.</span>

package/src/workspace/ExplorerTree.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { FileTreeNode } from "../internal/file-tree/index.js";
 import type { SelectedWorkspaceFile } from "../internal/store/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
@@ -231,7 +232,7 @@ function ExplorerRootBody({
   return (
     <>
       <nav aria-label={`File tree for ${entryName}`}>
-        <ul className="stg:py-0.5 stg:pl-1.5" role="tree">
+        <ul className={cn(UNSTYLED_LIST, "stg:py-0.5 stg:pl-1.5")} role="tree">
           {tree.map((node) => (
             <FileTreeNode
               key={node.path}

package/src/workspace/WorkspaceContentSearch.tsx

@@ -11,6 +11,7 @@ import {
   type ReactNode,
 } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import type { WorkspaceEntry } from "./useWorkspaceEntries.js";
 import type {
   WorkspaceContentMatch,
@@ -235,7 +236,7 @@ export function WorkspaceContentSearch({
           <MessageState>No files containing &ldquo;{trimmed}&rdquo;.</MessageState>
         ) : (
           <>
-            <ul id={listboxId} role="listbox" aria-label="Search results" className="stg:py-0.5">
+            <ul id={listboxId} role="listbox" aria-label="Search results" className={cn(UNSTYLED_LIST, "stg:py-0.5")}>
               {renderRows({
                 groups,
                 query: trimmed,

package/src/workspace/WorkspaceFileSearch.tsx

@@ -10,6 +10,7 @@ import {
   type KeyboardEvent,
 } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import type { WorkspaceEntry } from "./useWorkspaceEntries.js";
 import type { WorkspaceFileLister } from "./WorkspaceFileLister.js";
 import type { SelectedWorkspaceFile } from "../internal/store/workspace-file-selection-store.js";
@@ -210,7 +211,7 @@ export function WorkspaceFileSearch({
               id={listboxId}
               role="listbox"
               aria-label="Search results"
-              className="stg:py-0.5"
+              className={cn(UNSTYLED_LIST, "stg:py-0.5")}
             >
               {renderRows({
                 groups,

package/src/workspace/WorkspaceSummary.tsx

@@ -3,6 +3,7 @@
 import type { WorkspaceEntry } from "@stigmer/protos/ai/stigmer/agentic/session/v1/workspace_pb";
 import type { WorkspaceSource } from "@stigmer/protos/ai/stigmer/agentic/session/v1/workspace_pb";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { TruncatedText } from "../internal/truncated-text.js";
 
@@ -43,7 +44,7 @@ export function WorkspaceSummary({
   if (entries.length === 0) return null;
 
   return (
-    <ul className={cn("stg:space-y-1.5", className)} aria-label="Workspace entries">
+    <ul className={cn(UNSTYLED_LIST, "stg:space-y-1.5", className)} aria-label="Workspace entries">
       {entries.map((entry) => (
         <li key={entry.name} className="stg:text-xs">
           <div className="stg:flex stg:items-center stg:gap-1.5 stg:font-medium">