@stigmer/react 3.1.17 → 3.2.0

package/src/workflow/index.ts

@@ -184,30 +184,70 @@ export {
   type WorkflowExecutionHeaderProps,
 } from "./WorkflowExecutionHeader.js";
 
-export {
-  WorkflowExecutionTimeline,
-  type WorkflowExecutionTimelineProps,
-} from "./WorkflowExecutionTimeline.js";
-
-export {
-  WorkflowExecutionTaskPanel,
-  type WorkflowExecutionTaskPanelProps,
-} from "./WorkflowExecutionTaskPanel.js";
-
-export {
-  WorkflowExecutionCostPanel,
-  type WorkflowExecutionCostPanelProps,
-} from "./WorkflowExecutionCostPanel.js";
-
-export {
-  WorkflowExecutionArtifactPanel,
-  type WorkflowExecutionArtifactPanelProps,
-} from "./WorkflowExecutionArtifactPanel.js";
-
-export {
-  WorkflowExecutionApprovalCard,
-  type WorkflowExecutionApprovalCardProps,
-} from "./WorkflowExecutionApprovalCard.js";
+// Execution panel — the single WorkspaceSurface-based side panel
+// (Artifacts/Changes/Usage facets, virtual document tabs) and its
+// controller/assembler hooks.
+export {
+  useWorkflowExecutionPanel,
+  workflowArtifactTabPath,
+  type WorkflowExecutionPanelController,
+  type UseWorkflowExecutionPanelOptions,
+} from "./useWorkflowExecutionPanel.js";
+export {
+  useWorkflowExecutionRailViews,
+  type UseWorkflowExecutionRailViewsOptions,
+} from "./useWorkflowExecutionRailViews.js";
+export {
+  DIAGNOSIS_DOCUMENT_ENTRY_ID,
+  DIAGNOSIS_DOCUMENT_PATH,
+} from "./diagnosis-document.js";
+export {
+  WorkflowArtifactsTab,
+  type WorkflowArtifactsTabProps,
+} from "./facets/WorkflowArtifactsTab.js";
+export {
+  WorkflowChangesTab,
+  type WorkflowChangesTabProps,
+} from "./facets/WorkflowChangesTab.js";
+export {
+  WorkflowUsageTab,
+  type WorkflowUsageTabProps,
+} from "./facets/WorkflowUsageTab.js";
+export {
+  useWorkflowExecutionFileChanges,
+  enumerateAgentCallChildren,
+  agentCallChildrenSignature,
+  type AgentCallChild,
+  type UseWorkflowExecutionFileChangesOptions,
+  type UseWorkflowExecutionFileChangesReturn,
+} from "./useWorkflowExecutionFileChanges.js";
+export {
+  WorkflowArtifactDocument,
+  type WorkflowArtifactDocumentProps,
+} from "./WorkflowArtifactDocument.js";
+export {
+  WorkflowAgentExecutionDocument,
+  type WorkflowAgentExecutionDocumentProps,
+  type WorkflowAgentExecutionHitl,
+} from "./WorkflowAgentExecutionDocument.js";
+export {
+  useWorkflowArtifactDownload,
+  type UseWorkflowArtifactDownloadReturn,
+} from "./useWorkflowArtifactDownload.js";
+export {
+  deriveWorkflowArtifactItems,
+  type WorkflowArtifactEntry,
+} from "./deriveWorkflowArtifactItems.js";
+export {
+  deriveWorkflowUsageItems,
+  type WorkflowUsageItem,
+} from "./deriveWorkflowUsageItems.js";
+
+export {
+  WorkflowApprovalList,
+  type WorkflowApprovalListProps,
+  type WorkflowApprovalSubmit,
+} from "./WorkflowApprovalList.js";
 export {
   WorkflowFileReviewList,
   type WorkflowFileReviewListProps,
@@ -345,8 +385,6 @@ export {
   type AgentCallFormProps,
   HttpCallForm,
   type HttpCallFormProps,
-  ExecutionInspectorAdapter,
-  type ExecutionInspectorAdapterProps,
   taskToYaml,
   type InspectorMutations,
   type InspectorNodeIdentity,
@@ -547,6 +585,10 @@ export {
   type ExecutionActiveTaskIndicatorProps,
 } from "./ExecutionActiveTaskIndicator.js";
 export { useExecutionAnnouncements } from "./useExecutionAnnouncements.js";
+export {
+  useApprovalBoundary,
+  type ApprovalBoundaryCrossing,
+} from "./useApprovalBoundary.js";
 export { getAnimationDuration, prefersReducedMotion } from "../internal/motion-preference.js";
 
 // T05: Shared formatting utilities
@@ -560,45 +602,47 @@ export {
   formatMetaChips,
 } from "./format-utils.js";
 
-// T05: Runtime inspector — behavior hook + types
+// T06: Shared task-detail primitives — the card bodies' I/O ladder and the
+// human_input gate's review/decision projections.
 export {
-  useExecutionTaskDetail,
-  type UseExecutionTaskDetailReturn,
-  type TaskDetail,
-  type TaskDetailSummary,
+  buildIO,
   type TaskDetailIO,
-  type TaskDetailError,
-  type TaskDetailRetryHistory,
-  type TaskDetailRetryAttempt,
-  type TaskDetailAgentCall,
-  type TaskDetailApproval,
+  deriveTaskApprovalRequest,
+  deriveTaskApprovalDecision,
+  type TaskApprovalRequestView,
   type TaskDetailApprovalDecision,
-} from "./execution-inspector/index.js";
-
-// T05: Runtime inspector — styled component
-export {
-  ExecutionInspector,
-  type ExecutionInspectorProps,
-} from "./execution-inspector/index.js";
-
-// T07: Waterfall timeline — pure derivation + behavior hook
-export {
-  deriveWaterfallEntries,
-  deriveWaterfallScale,
-  type WaterfallEntry,
-  type WaterfallAttempt,
-  type WaterfallSpan,
-  type WaterfallScale,
-  useWaterfallEntries,
-  type UseWaterfallEntriesOptions,
-  type UseWaterfallEntriesReturn,
-} from "./execution/index.js";
-
-// T07: Waterfall timeline — styled components
-export {
-  WaterfallTimeline,
-  type WaterfallTimelineProps,
-} from "./waterfall/index.js";
+  StructuredDataViewer,
+  type StructuredDataViewerProps,
+} from "./task-detail/index.js";
+
+// S8: Workflow task thread — pure projection + behavior hook + styled component
+export {
+  projectThreadItems,
+  type WorkflowThreadItem,
+  type WorkflowThreadProgress,
+  type WorkflowThreadProjection,
+} from "./thread/project-thread-items.js";
+export {
+  threadCardVariant,
+  type WorkflowThreadCardVariant,
+} from "./thread/thread-presentation.js";
+// T04: Session-parity task cards — headless per-kind presentation seam
+// (the workflow twin of the session's registerToolPresenter).
+export {
+  resolveTaskPreview,
+  registerTaskPresenter,
+  getTaskPresenter,
+  defaultDisclosureForKind,
+  type WorkflowTaskPresenter,
+  type WorkflowTaskPreview,
+  type WorkflowTaskDisclosure,
+} from "./thread/task-presentation.js";
+export { useWorkflowThreadItems } from "./thread/useWorkflowThreadItems.js";
+export {
+  WorkflowTaskThread,
+  type WorkflowTaskThreadProps,
+  type WorkflowThreadHitl,
+} from "./thread/WorkflowTaskThread.js";
 
 // T11: Shortcut registry
 export {

package/src/workflow/inspector/index.ts

@@ -34,10 +34,6 @@ export type { AdvancedTabProps } from "./tabs/AdvancedTab.js";
 export { DocsTab } from "./tabs/DocsTab.js";
 export type { DocsTabProps } from "./tabs/DocsTab.js";
 
-// Execution mode adapter
-export { ExecutionInspectorAdapter } from "./ExecutionInspectorAdapter.js";
-export type { ExecutionInspectorAdapterProps } from "./ExecutionInspectorAdapter.js";
-
 // Per-kind forms
 export { AgentCallForm } from "./forms/AgentCallForm.js";
 export type { AgentCallFormProps } from "./forms/AgentCallForm.js";

package/src/workflow/instance/WorkflowInstanceList.tsx

@@ -1,14 +1,16 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { MoreHorizontal, Play, Trash2 } from "lucide-react";
 import { cn } from "@stigmer/theme";
 import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { useWorkflowInstances } from "../useWorkflowInstances.js";
+import { ActionMenu } from "../../action-menu/index.js";
 import { Button } from "../../button/Button.js";
 import { useEnvironmentList } from "../../environment/useEnvironmentList.js";
 import { ResourceVisibilityControl } from "../../library/ResourceVisibilityControl.js";
-import { PermissionGate } from "../../iam-policy/PermissionGate.js";
+import { useCheckPermission } from "../../iam-policy/useCheckPermission.js";
 import { WorkflowInstanceEmptyState } from "./WorkflowInstanceEmptyState.js";
 
 /** Props for {@link WorkflowInstanceList}. */
@@ -131,13 +133,16 @@ export function WorkflowInstanceList({
       </div>
 
       <div className="overflow-hidden rounded-lg border border-border">
-        <table className="w-full text-sm">
+        {/* table-fixed keeps the layout deterministic: Name/Environments flex
+            and truncate, Visibility/Actions take fixed widths, so long
+            content can never push the Actions kebab off the panel's edge. */}
+        <table className="w-full table-fixed text-sm">
           <thead>
             <tr className="border-b border-border bg-muted-subtle">
               <th className="px-4 py-2 text-left font-medium text-muted-foreground">Name</th>
               <th className="px-4 py-2 text-left font-medium text-muted-foreground">Environments</th>
-              <th className="px-4 py-2 text-left font-medium text-muted-foreground">Visibility</th>
-              <th className="px-4 py-2 text-right font-medium text-muted-foreground">Actions</th>
+              <th className="w-36 px-4 py-2 text-left font-medium text-muted-foreground">Visibility</th>
+              <th className="w-16 px-4 py-2 text-right font-medium text-muted-foreground">Actions</th>
             </tr>
           </thead>
           <tbody className="divide-y divide-border">
@@ -181,21 +186,34 @@ function InstanceRow({
 
   const envRefs = instance.spec?.environmentRefs ?? [];
 
+  // Delete is the only permission-gated row action (Run is offered whenever
+  // the host wires it). Resolved here so the kebab is hidden when it would
+  // hold no items — never an empty overflow menu.
+  const { allowed: canDelete } = useCheckPermission(
+    { kind: "workflow_instance", id },
+    "can_delete",
+  );
+  const showRun = !!onRunClick;
+  const showDelete = !!onDeleteClick && canDelete;
+
   return (
     <tr
       className={cn(
         "transition-colors",
-        onRowClick && "cursor-pointer hover:bg-muted/30",
+        onRowClick && "cursor-pointer hover:bg-accent-hover",
       )}
       onClick={() => onRowClick?.(instance)}
     >
       <td className="px-4 py-2.5">
-        <div>
-          <span className="font-medium text-foreground">
+        <div className="min-w-0">
+          <span
+            className="block truncate font-medium text-foreground"
+            title={meta?.name || meta?.slug || undefined}
+          >
             {meta?.name || meta?.slug || "—"}
           </span>
           {instance.spec?.description && (
-            <p className="text-[0.65rem] text-muted-foreground truncate max-w-48">
+            <p className="text-[0.65rem] text-muted-foreground truncate">
               {instance.spec.description}
             </p>
           )}
@@ -237,40 +255,40 @@ function InstanceRow({
         )}
       </td>
 
+      {/* stopPropagation so opening the kebab never triggers the row's
+          click. The menu content itself is portaled, so its items never
+          bubble to the row regardless. */}
       <td className="px-4 py-2.5 text-right" onClick={(e) => e.stopPropagation()}>
-        <div className="flex items-center justify-end gap-1">
-          {onRunClick && (
-            <button
-              type="button"
-              onClick={() => onRunClick(instance)}
-              className={cn(
-                "rounded px-2 py-1 text-xs font-medium",
-                "text-foreground hover:bg-accent-hover",
-                "focus:outline-none focus:ring-1 focus:ring-ring",
-              )}
+        {(showRun || showDelete) && (
+          <ActionMenu>
+            <ActionMenu.Trigger
+              className="ml-auto"
+              aria-label={`Actions for ${meta?.name || meta?.slug}`}
             >
-              Run
-            </button>
-          )}
-          {onDeleteClick && (
-            <PermissionGate
-              resource={{ kind: "workflow_instance", id }}
-              relation="can_delete"
-            >
-              <button
-                type="button"
-                onClick={() => onDeleteClick(instance)}
-                className={cn(
-                  "rounded px-2 py-1 text-xs font-medium",
-                  "text-destructive hover:bg-destructive/10",
-                  "focus:outline-none focus:ring-1 focus:ring-ring",
-                )}
-              >
-                Delete
-              </button>
-            </PermissionGate>
-          )}
-        </div>
+              <MoreHorizontal className="size-4" />
+            </ActionMenu.Trigger>
+            <ActionMenu.Content>
+              {showRun && (
+                <ActionMenu.Item
+                  icon={<Play />}
+                  onSelect={() => onRunClick?.(instance)}
+                >
+                  Run
+                </ActionMenu.Item>
+              )}
+              {showRun && showDelete && <ActionMenu.Separator />}
+              {showDelete && (
+                <ActionMenu.Item
+                  icon={<Trash2 />}
+                  variant="destructive"
+                  onSelect={() => onDeleteClick?.(instance)}
+                >
+                  Delete
+                </ActionMenu.Item>
+              )}
+            </ActionMenu.Content>
+          </ActionMenu>
+        )}
       </td>
     </tr>
   );

package/src/workflow/instance/__tests__/WorkflowInstanceList.test.tsx

@@ -0,0 +1,156 @@
+import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+import { WorkflowInstanceList } from "../WorkflowInstanceList";
+
+// The kebab menu portals its content; without a StigmerProvider the portal
+// container is null and nothing mounts — pin it to document.body.
+vi.mock("../../../portal-container", () => ({
+  useStigmerPortalContainer: () => document.body,
+}));
+
+// Isolate the row-actions behavior under test from the data, environment,
+// visibility, and permission subsystems (each has its own tests).
+const data = vi.hoisted(() => ({
+  instances: [] as unknown[],
+  isLoading: false,
+  error: null as Error | null,
+}));
+vi.mock("../../useWorkflowInstances", () => ({
+  useWorkflowInstances: () => ({ ...data, refetch: vi.fn() }),
+}));
+vi.mock("../../../environment/useEnvironmentList", () => ({
+  useEnvironmentList: () => ({ environments: [] }),
+}));
+vi.mock("../../../library/ResourceVisibilityControl", () => ({
+  ResourceVisibilityControl: () => <div data-testid="visibility" />,
+}));
+const perm = vi.hoisted(() => ({ canDelete: true }));
+vi.mock("../../../iam-policy/useCheckPermission", () => ({
+  useCheckPermission: () => ({
+    allowed: perm.canDelete,
+    isLoading: false,
+    error: null,
+  }),
+}));
+
+beforeAll(() => {
+  // Base UI's menu positioner observes its anchor; happy-dom lacks
+  // ResizeObserver, so provide a no-op shim.
+  if (!("ResizeObserver" in globalThis)) {
+    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      };
+  }
+});
+
+afterEach(() => {
+  cleanup();
+  data.instances = [];
+  data.error = null;
+  perm.canDelete = true;
+});
+
+function makeInstance(overrides?: {
+  id?: string;
+  name?: string;
+  slug?: string;
+}) {
+  return {
+    metadata: {
+      id: overrides?.id ?? "wi_1",
+      name: overrides?.name ?? "nightly-run",
+      slug: overrides?.slug ?? "nightly-run",
+      visibility: ApiResourceVisibility.visibility_private,
+    },
+    spec: { environmentRefs: [] },
+  } as never;
+}
+
+describe("WorkflowInstanceList row actions", () => {
+  it("collapses the row actions into a kebab exposing Run and Delete", async () => {
+    data.instances = [makeInstance()];
+    render(
+      <WorkflowInstanceList
+        workflowId="wf_1"
+        org="acme"
+        onRunClick={vi.fn()}
+        onDeleteClick={vi.fn()}
+      />,
+    );
+
+    // No always-visible action buttons; the row shows a single kebab.
+    expect(screen.queryByRole("button", { name: "Run" })).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+
+    expect(await screen.findByRole("menuitem", { name: "Run" })).toBeTruthy();
+    expect(screen.getByRole("menuitem", { name: "Delete" })).toBeTruthy();
+  });
+
+  it("fires onRunClick with the row's instance", async () => {
+    const onRun = vi.fn();
+    const inst = makeInstance();
+    data.instances = [inst];
+    render(
+      <WorkflowInstanceList
+        workflowId="wf_1"
+        org="acme"
+        onRunClick={onRun}
+        onDeleteClick={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Run" }));
+
+    expect(onRun).toHaveBeenCalledTimes(1);
+    expect(onRun).toHaveBeenCalledWith(inst);
+  });
+
+  it("fires onDeleteClick from the menu", async () => {
+    const onDelete = vi.fn();
+    const inst = makeInstance();
+    data.instances = [inst];
+    render(
+      <WorkflowInstanceList
+        workflowId="wf_1"
+        org="acme"
+        onRunClick={vi.fn()}
+        onDeleteClick={onDelete}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Delete" }));
+
+    expect(onDelete).toHaveBeenCalledWith(inst);
+  });
+
+  it("omits Delete when the viewer cannot delete, keeping Run", async () => {
+    perm.canDelete = false;
+    data.instances = [makeInstance()];
+    render(
+      <WorkflowInstanceList
+        workflowId="wf_1"
+        org="acme"
+        onRunClick={vi.fn()}
+        onDeleteClick={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    expect(await screen.findByRole("menuitem", { name: "Run" })).toBeTruthy();
+    expect(screen.queryByRole("menuitem", { name: "Delete" })).toBeNull();
+  });
+
+  it("renders no kebab when the host wires no row actions", () => {
+    data.instances = [makeInstance()];
+    render(<WorkflowInstanceList workflowId="wf_1" org="acme" />);
+
+    expect(screen.getByText("nightly-run")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: /^Actions for/ })).toBeNull();
+  });
+});

package/src/workflow/task-detail/index.ts

@@ -0,0 +1,11 @@
+export { buildIO, type TaskDetailIO } from "./task-detail-io.js";
+export {
+  deriveTaskApprovalRequest,
+  deriveTaskApprovalDecision,
+  type TaskApprovalRequestView,
+  type TaskDetailApprovalDecision,
+} from "./task-approval.js";
+export {
+  StructuredDataViewer,
+  type StructuredDataViewerProps,
+} from "./StructuredDataViewer.js";