@stigmer/react 3.1.9 → 3.1.11

package/src/workflow/WorkflowExecutionTimelineEvent.tsx

@@ -5,8 +5,10 @@ import type { WorkflowExecutionEvent } from "@stigmer/protos/ai/stigmer/agentic/
 import { WorkflowEventType } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/event_pb";
 import { WorkflowTaskKind } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/enum_pb";
 import { cn } from "@stigmer/theme";
+import { toJson, type JsonValue } from "@bufbuild/protobuf";
+import { ValueSchema } from "@bufbuild/protobuf/wkt";
 import type { DerivedTaskState } from "../internal/store/workflow-execution-event-store.js";
-import { WorkflowTaskApprovalCard } from "./WorkflowTaskApprovalCard.js";
+import { WorkflowTaskReviewGate } from "./WorkflowTaskReviewGate.js";
 import { formatDuration, formatMicroUsd, formatBytes, formatTimestamp, formatMetaChips } from "./format-utils.js";
 
 interface TimelineEventProps {
@@ -270,7 +272,7 @@ export const WorkflowExecutionTimelineEvent = memo(function WorkflowExecutionTim
             </p>
           )}
           {showCard && (
-            <WorkflowTaskApprovalCard
+            <WorkflowTaskReviewGate
               taskName={event.taskName}
               prompt={p.value.prompt}
               outcomes={(p.value.outcomes ?? []).map((o) => ({
@@ -280,6 +282,11 @@ export const WorkflowExecutionTimelineEvent = memo(function WorkflowExecutionTim
               formSchema={p.value.formSchema
                 ? (p.value.formSchema as unknown as Record<string, unknown>)
                 : undefined}
+              payload={p.value.payload
+                ? (toJson(ValueSchema, p.value.payload) as JsonValue)
+                : null}
+              uiHint={p.value.uiHint}
+              payloadArtifactId={p.value.payloadArtifactId || null}
               onSubmit={onSubmitTaskApproval}
               isSubmitting={taskApprovalSubmittingTaskNames?.has(event.taskName) ?? false}
               error={taskApprovalErrorsByTaskName?.get(event.taskName) ?? null}

package/src/workflow/WorkflowTaskApprovalCard.tsx

@@ -2,10 +2,13 @@
 
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import Markdown from "react-markdown";
+import type { JsonObject, JsonValue } from "@bufbuild/protobuf";
 import { cn } from "@stigmer/theme";
 import { MARKDOWN_COMPONENTS, REMARK_PLUGINS } from "../internal/markdown-components.js";
 import { DecisionButton, type DecisionVariant } from "../internal/DecisionButton.js";
 import { InCardDecisionError } from "../internal/InCardDecisionError.js";
+import { formatJson } from "../execution/tool-rendering-primitives.js";
+import { StructuredDataViewer } from "./execution-inspector/StructuredDataViewer.js";
 
 /** Outcome descriptor for UI rendering. */
 export interface TaskOutcome {
@@ -35,6 +38,14 @@ export interface WorkflowTaskApprovalCardProps {
    * Text properties render as textareas; others as text inputs.
    */
   readonly formSchema?: Record<string, unknown>;
+  /**
+   * Resolved review payload — the material under review (issue #234).
+   * Rendered as structured data between the prompt and the form. This is
+   * the portable fallback presentation; gates whose `ui_hint` matches a
+   * registered review renderer never reach this card (see
+   * {@link WorkflowTaskReviewGate}).
+   */
+  readonly payload?: JsonValue | null;
   /**
    * Called when the reviewer submits a decision.
    * The consumer (typically {@link WorkflowExecutionViewer}) wires this
@@ -99,6 +110,7 @@ export const WorkflowTaskApprovalCard = memo(function WorkflowTaskApprovalCard({
   prompt,
   outcomes: outcomesProp,
   formSchema,
+  payload = null,
   onSubmit,
   isSubmitting,
   error,
@@ -161,6 +173,21 @@ export const WorkflowTaskApprovalCard = memo(function WorkflowTaskApprovalCard({
         </div>
       )}
 
+      {payload !== null && (
+        <div
+          aria-label={`Review material for ${taskName}`}
+          className="mb-3 max-h-96 overflow-y-auto rounded border border-border bg-background p-3"
+        >
+          {isPlainObject(payload) ? (
+            <StructuredDataViewer data={payload} />
+          ) : (
+            <pre className="overflow-auto whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-foreground">
+              <code>{formatJson(payload)}</code>
+            </pre>
+          )}
+        </div>
+      )}
+
       {formFields.length > 0 && (
         <div className="mb-3 space-y-2">
           {formFields.map((field) => (
@@ -287,3 +314,8 @@ function resolveVariant(
 function capitalize(s: string): string {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }
+
+/** Object payloads get the structured viewer; arrays and scalars get JSON. */
+function isPlainObject(value: JsonValue): value is JsonObject {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}

package/src/workflow/WorkflowTaskReviewGate.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import { memo, useCallback } from "react";
+import type { JsonValue } from "@bufbuild/protobuf";
+import { cn } from "@stigmer/theme";
+import { useReviewRenderer } from "./ReviewRendererContext.js";
+import { useReviewPayload } from "./useReviewPayload.js";
+import {
+  WorkflowTaskApprovalCard,
+  type TaskOutcome,
+} from "./WorkflowTaskApprovalCard.js";
+
+/** Props for {@link WorkflowTaskReviewGate}. */
+export interface WorkflowTaskReviewGateProps {
+  /** Name of the human_input task awaiting a decision. */
+  readonly taskName: string;
+  /** Resolved prompt text from the task config, rendered as markdown. */
+  readonly prompt?: string;
+  /** Configured outcomes; empty falls back to Approve / Reject. */
+  readonly outcomes: readonly TaskOutcome[];
+  /** JSON Schema for the reviewer's input form, when the gate defines one. */
+  readonly formSchema?: Record<string, unknown>;
+  /** Inline review payload from the approval_requested event, or `null`. */
+  readonly payload?: JsonValue | null;
+  /** Renderer discriminator from the task config's `ui_hint`. */
+  readonly uiHint?: string;
+  /** Artifact reference when the payload was promoted, or `null`. */
+  readonly payloadArtifactId?: string | null;
+  /**
+   * Called when the reviewer submits a decision. The consumer (typically
+   * {@link WorkflowExecutionViewer}) wires this to
+   * `useWorkflowExecutionActions().submitTaskApproval`.
+   */
+  readonly onSubmit: (
+    taskName: string,
+    outcome: string,
+    formData?: Record<string, unknown>,
+    comment?: string,
+  ) => Promise<unknown>;
+  /** True while this gate's submission RPC is in flight. */
+  readonly isSubmitting: boolean;
+  /** This gate's last failed decision, or `null`. */
+  readonly error?: Error | null;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * The single decision surface for a pending workflow human_input gate.
+ *
+ * Owns the two review-payload concerns that sit above the approval card
+ * (issue #234):
+ *
+ * 1. **Payload materialization** — inline payloads pass straight through;
+ *    artifact-backed payloads are fetched via the API-proxied
+ *    `artifact.getContent` (see {@link useReviewPayload}), with loading
+ *    and error states rendered here so custom renderers always receive
+ *    resolved data.
+ * 2. **Renderer dispatch** — when the gate's `ui_hint` matches a renderer
+ *    registered through `StigmerProvider`'s `reviewRenderers`, the host
+ *    application's component presents the review; otherwise the built-in
+ *    {@link WorkflowTaskApprovalCard} renders with the payload shown as
+ *    structured data. An unrecognized hint never blocks the gate.
+ *
+ * Both mount points — the execution inspector's Approval tab and the
+ * timeline's inline event card — render this component, so custom
+ * renderers light up everywhere a gate appears without per-surface wiring.
+ */
+export const WorkflowTaskReviewGate = memo(function WorkflowTaskReviewGate({
+  taskName,
+  prompt,
+  outcomes,
+  formSchema,
+  payload = null,
+  uiHint,
+  payloadArtifactId = null,
+  onSubmit,
+  isSubmitting,
+  error,
+  className,
+}: WorkflowTaskReviewGateProps) {
+  const Renderer = useReviewRenderer(uiHint);
+  const resolved = useReviewPayload(payload, payloadArtifactId ?? null);
+
+  const submit = useCallback(
+    (outcome: string, formData?: Record<string, unknown>, comment?: string) =>
+      onSubmit(taskName, outcome, formData, comment),
+    [onSubmit, taskName],
+  );
+
+  if (resolved.isLoading) {
+    return <PayloadLoadingState taskName={taskName} className={className} />;
+  }
+
+  if (resolved.error) {
+    return (
+      <PayloadErrorState
+        taskName={taskName}
+        error={resolved.error}
+        onRetry={resolved.refetch}
+        className={className}
+      />
+    );
+  }
+
+  if (Renderer && resolved.payload !== null) {
+    return (
+      <div className={className}>
+        <Renderer
+          taskName={taskName}
+          payload={resolved.payload}
+          formSchema={formSchema ?? null}
+          outcomes={outcomes}
+          submit={submit}
+          isSubmitting={isSubmitting}
+          error={error ?? null}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <WorkflowTaskApprovalCard
+      taskName={taskName}
+      prompt={prompt}
+      outcomes={outcomes}
+      formSchema={formSchema}
+      payload={resolved.payload}
+      onSubmit={onSubmit}
+      isSubmitting={isSubmitting}
+      error={error}
+      className={className}
+    />
+  );
+});
+
+// ---------------------------------------------------------------------------
+// Payload resolution states (DD-006: never a blank screen)
+// ---------------------------------------------------------------------------
+
+function PayloadLoadingState({
+  taskName,
+  className,
+}: {
+  readonly taskName: string;
+  readonly className?: string;
+}) {
+  return (
+    <div
+      role="status"
+      aria-label={`Loading review material for ${taskName}`}
+      className={cn(
+        "mt-2 rounded-lg border border-border-prominent border-l-2 border-l-warning p-3",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <Spinner />
+        Loading review material…
+      </div>
+    </div>
+  );
+}
+
+function PayloadErrorState({
+  taskName,
+  error,
+  onRetry,
+  className,
+}: {
+  readonly taskName: string;
+  readonly error: Error;
+  readonly onRetry: () => void;
+  readonly className?: string;
+}) {
+  return (
+    <div
+      role="alert"
+      className={cn(
+        "mt-2 rounded-lg border border-border-prominent border-l-2 border-l-destructive p-3",
+        className,
+      )}
+    >
+      <p className="text-xs font-medium text-foreground">
+        Could not load the review material for {taskName}
+      </p>
+      <p className="mt-1 break-words text-xs text-muted-foreground">{error.message}</p>
+      <p className="mt-1 text-xs text-muted-foreground">
+        The gate stays pending — retry to load the material before deciding.
+      </p>
+      <button
+        type="button"
+        onClick={onRetry}
+        className={cn(
+          "mt-2 rounded border border-border px-2 py-1 text-xs font-medium text-foreground",
+          "transition-colors hover:bg-muted",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        )}
+      >
+        Retry
+      </button>
+    </div>
+  );
+}
+
+function Spinner() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      className="animate-spin"
+      aria-hidden="true"
+    >
+      <circle
+        cx="6"
+        cy="6"
+        r="5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeOpacity="0.25"
+      />
+      <path
+        d="M11 6a5 5 0 0 0-5-5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

package/src/workflow/__tests__/PendingApprovalsWidget.test.tsx

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { create, type MessageInitShape } from "@bufbuild/protobuf";
+import { PendingApprovalSchema } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/io_pb";
+import type { PendingApproval } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/io_pb";
+import { PendingApprovalsWidget } from "../PendingApprovalsWidget";
+
+function makeApproval(
+  overrides: MessageInitShape<typeof PendingApprovalSchema> = {},
+): PendingApproval {
+  return create(PendingApprovalSchema, {
+    executionId: "wfx-1",
+    workflowName: "Article Pipeline",
+    taskName: "reviewDraft",
+    requester: "usr-alice",
+    ...overrides,
+  });
+}
+
+describe("PendingApprovalsWidget", () => {
+  afterEach(cleanup);
+
+  it("renders workflow name and task name", () => {
+    render(
+      <PendingApprovalsWidget
+        approvals={[makeApproval()]}
+        totalCount={1}
+        isLoading={false}
+      />,
+    );
+    expect(screen.getByText("Article Pipeline")).toBeTruthy();
+    expect(screen.getByText(/reviewDraft/)).toBeTruthy();
+  });
+
+  describe("review-type badge", () => {
+    it("shows the uiHint as a badge so dashboards can distinguish review types", () => {
+      render(
+        <PendingApprovalsWidget
+          approvals={[makeApproval({ uiHint: "article-diff" })]}
+          totalCount={1}
+          isLoading={false}
+        />,
+      );
+      expect(screen.getByText("article-diff")).toBeTruthy();
+    });
+
+    it("renders no badge for a generic review (empty uiHint)", () => {
+      const { container } = render(
+        <PendingApprovalsWidget
+          approvals={[makeApproval()]}
+          totalCount={1}
+          isLoading={false}
+        />,
+      );
+      // Only the workflow-name/task-name texts render; no badge span appears.
+      expect(container.querySelectorAll("span.rounded")).toHaveLength(0);
+    });
+  });
+
+  it("shows the empty state when there are no approvals", () => {
+    render(
+      <PendingApprovalsWidget approvals={[]} totalCount={0} isLoading={false} />,
+    );
+    expect(screen.getByText("No approvals pending")).toBeTruthy();
+  });
+
+  it("invokes onReviewClick with the execution id", () => {
+    const onReviewClick = vi.fn();
+    render(
+      <PendingApprovalsWidget
+        approvals={[makeApproval()]}
+        totalCount={1}
+        isLoading={false}
+        onReviewClick={onReviewClick}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Review" }));
+    expect(onReviewClick).toHaveBeenCalledWith("wfx-1");
+  });
+});

package/src/workflow/__tests__/WorkflowTaskApprovalCard.test.tsx

@@ -134,6 +134,33 @@ describe("WorkflowTaskApprovalCard", () => {
     });
   });
 
+  describe("review payload (issue #234 fallback display)", () => {
+    it("renders an object payload as structured data", () => {
+      render(
+        <WorkflowTaskApprovalCard
+          {...defaultProps}
+          payload={{ severity: "P1", summary: "Escalate the incident" }}
+        />,
+      );
+      expect(screen.getByLabelText("Review material for review_task")).toBeTruthy();
+      expect(screen.getByText("Escalate the incident")).toBeTruthy();
+    });
+
+    it("renders non-object payloads as formatted JSON", () => {
+      render(
+        <WorkflowTaskApprovalCard {...defaultProps} payload={["item-1", "item-2"]} />,
+      );
+      const section = screen.getByLabelText("Review material for review_task");
+      expect(section.textContent).toContain("item-1");
+      expect(section.textContent).toContain("item-2");
+    });
+
+    it("renders no review material section when payload is absent", () => {
+      render(<WorkflowTaskApprovalCard {...defaultProps} />);
+      expect(screen.queryByLabelText("Review material for review_task")).toBeNull();
+    });
+  });
+
   describe("submission", () => {
     it("onSubmit called with (taskName, outcomeName, undefined, undefined) when no form or comment", () => {
       const onSubmit = vi.fn().mockResolvedValue(undefined);