@stigmer/react 3.12.3 → 3.12.4

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/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">