@stigmer/react 3.12.7 → 3.12.9

package/src/workflow/__tests__/workflow-thread-scroll-on-send.test.tsx

@@ -0,0 +1,145 @@
+// Scroll-on-send wiring pins for WorkflowTaskThread (stigmer-cloud#267):
+// the workflow surface's send-analog is a HITL decision submission —
+// submitting pins the thread (default-ON, opt-out via
+// `scrollOnSend={false}`) BEFORE delegating, so the unblocked run's
+// continuation lands in view. The real scroll mechanics are pinned in
+// `internal/__tests__/useAutoScroll.layout.test.tsx`; this file pins the
+// hitl-wrapper wiring through a spied `jumpToLatest`.
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup, within } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import { WorkflowTaskKind } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/enum_pb";
+import { ApprovalRequestedPayloadSchema } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/event_pb";
+import type { DerivedTaskState } from "../../internal/store/workflow-execution-event-store";
+
+const jumpToLatestSpy = vi.fn();
+
+// Replaces only the scroll machine (browser observers happy-dom lacks) with
+// a spied jumpToLatest — the wrapper under test calls it directly.
+vi.mock("../../internal/useAutoScroll", async (importOriginal) => {
+  const original =
+    await importOriginal<typeof import("../../internal/useAutoScroll")>();
+  return {
+    ...original,
+    useAutoScroll: () => ({
+      scrollRef: { current: null },
+      sentinelRef: { current: null },
+      contentRef: () => {},
+      isFollowing: true,
+      jumpToLatest: jumpToLatestSpy,
+    }),
+  };
+});
+
+import {
+  WorkflowTaskThread,
+  type WorkflowThreadHitl,
+} from "../thread/WorkflowTaskThread";
+
+afterEach(() => {
+  cleanup();
+  jumpToLatestSpy.mockClear();
+});
+
+function makeHitl(): WorkflowThreadHitl {
+  return {
+    submitApproval: vi.fn(),
+    approvalSubmittingToolCallIds: new Set<string>(),
+    approvalErrorsByToolCallId: new Map<string, Error>(),
+    submitTaskApproval: vi.fn(),
+    taskApprovalSubmittingTaskNames: new Set<string>(),
+    taskApprovalErrorsByTaskName: new Map<string, Error>(),
+    submitFileDecision: vi.fn(),
+    fileDecisionSubmittingKeys: new Set<string>(),
+    fileDecisionErrorsByKey: new Map<string, Error>(),
+  };
+}
+
+/** A gating human_input task carrying its captured request payload. */
+function gatedHumanInput(taskName: string): DerivedTaskState {
+  return {
+    taskName,
+    taskKind: WorkflowTaskKind.human_input,
+    status: "waiting_approval",
+    durationMs: 0,
+    costMicros: 0n,
+    tokensUsed: 0n,
+    attemptNumber: 1,
+    error: "",
+    childExecutionId: "",
+    agentSlug: "",
+    currentToolName: "",
+    messagesCount: 0,
+    toolCallsCount: 0,
+    inputSummary: null,
+    outputSummary: null,
+    approvalRequest: create(ApprovalRequestedPayloadSchema, {
+      prompt: "Ship the release?",
+      outcomes: [
+        { name: "ship", label: "Ship It" },
+        { name: "hold", label: "Hold" },
+      ],
+    }),
+    approvalResolution: null,
+  } as DerivedTaskState;
+}
+
+function statesOf(...states: DerivedTaskState[]): ReadonlyMap<string, DerivedTaskState> {
+  return new Map(states.map((s) => [s.taskName, s]));
+}
+
+function submitShipIt(): void {
+  const form = screen.getByRole("form", {
+    name: "Approval decision for review-gate",
+  });
+  fireEvent.click(within(form).getByRole("button", { name: "Ship It" }));
+}
+
+describe("WorkflowTaskThread — scroll-on-send (stigmer-cloud#267)", () => {
+  it("pins the thread when a HITL decision is submitted, then delegates to the workflow-level submit (default-on)", () => {
+    const hitl = makeHitl();
+    render(
+      <WorkflowTaskThread
+        taskStates={statesOf(gatedHumanInput("review-gate"))}
+        totalTasks={1}
+        isRunning
+        hitl={hitl}
+      />,
+    );
+    expect(jumpToLatestSpy).not.toHaveBeenCalled();
+
+    submitShipIt();
+
+    expect(jumpToLatestSpy).toHaveBeenCalledTimes(1);
+    expect(hitl.submitTaskApproval).toHaveBeenCalledWith(
+      "review-gate",
+      "ship",
+      undefined,
+      undefined,
+    );
+  });
+
+  it("never pins with scrollOnSend={false} — the decision still routes through unchanged", () => {
+    const hitl = makeHitl();
+    render(
+      <WorkflowTaskThread
+        taskStates={statesOf(gatedHumanInput("review-gate"))}
+        totalTasks={1}
+        isRunning
+        hitl={hitl}
+        scrollOnSend={false}
+      />,
+    );
+
+    submitShipIt();
+
+    expect(jumpToLatestSpy).not.toHaveBeenCalled();
+    expect(hitl.submitTaskApproval).toHaveBeenCalledWith(
+      "review-gate",
+      "ship",
+      undefined,
+      undefined,
+    );
+  });
+});

package/src/workflow/thread/WorkflowTaskThread.tsx

@@ -92,6 +92,19 @@ export interface WorkflowTaskThreadProps {
    * summaries already on the items.
    */
   readonly taskSnapshotsByName?: ReadonlyMap<string, WorkflowTask>;
+  /**
+   * Scroll to the latest content when the reader submits a HITL decision
+   * from a scrolled-up position (stigmer-cloud#267) — the workflow surface's
+   * send-analog: approving a gate, deciding a file review, or answering a
+   * task-level human_input gate re-engages follow mode, so the run's
+   * continuation lands in view. Incoming task activity is unaffected — it
+   * still never moves a scrolled-up reader. Default `true` on all three SDK
+   * thread surfaces at once (the ratified DD-011 divergence — cross-surface
+   * consistency is the point); set `false` to keep today's behavior.
+   *
+   * @default true
+   */
+  readonly scrollOnSend?: boolean;
   /** Additional CSS class names for the root container. */
   readonly className?: string;
 }
@@ -135,12 +148,38 @@ export const WorkflowTaskThread = memo(function WorkflowTaskThread({
   onNavigateToAgentExecution,
   hitl,
   taskSnapshotsByName,
+  scrollOnSend = true,
   className,
 }: WorkflowTaskThreadProps) {
   const { items, progress } = useWorkflowThreadItems(taskStates, totalTasks);
   const { scrollRef, sentinelRef, contentRef, isFollowing, jumpToLatest } =
     useAutoScroll();
 
+  // Scroll-on-send (stigmer-cloud#267): submitting a decision pins the
+  // thread before delegating, so the unblocked run's continuation lands in
+  // view. The wrapper's identity moves with the bundle's — deliberate: the
+  // bundle re-materializes exactly when its gate state flips (see the
+  // render-site note below), and a stale wrapper would leak stale state
+  // fields. `jumpToLatest` is referentially stable (useAutoScroll pins it).
+  const threadHitl = useMemo<WorkflowThreadHitl | undefined>(() => {
+    if (!hitl || !scrollOnSend) return hitl;
+    return {
+      ...hitl,
+      submitApproval: (...args: Parameters<WorkflowThreadHitl["submitApproval"]>) => {
+        jumpToLatest();
+        return hitl.submitApproval(...args);
+      },
+      submitTaskApproval: (...args: Parameters<WorkflowThreadHitl["submitTaskApproval"]>) => {
+        jumpToLatest();
+        return hitl.submitTaskApproval(...args);
+      },
+      submitFileDecision: (...args: Parameters<WorkflowThreadHitl["submitFileDecision"]>) => {
+        jumpToLatest();
+        return hitl.submitFileDecision(...args);
+      },
+    };
+  }, [hitl, scrollOnSend, jumpToLatest]);
+
   return (
     <div className={cn("stg:relative stg:flex stg:h-full stg:min-h-0 stg:flex-col", className)}>
       <ThreadProgressHeader progress={progress} isRunning={isRunning} />
@@ -164,7 +203,7 @@ export const WorkflowTaskThread = memo(function WorkflowTaskThread({
                 // would re-render the whole column per spinner tick. Scoped
                 // here, non-gating cards keep `undefined === undefined` and
                 // their memo bails hold.
-                hitl={item.status === "waiting_approval" ? hitl : undefined}
+                hitl={item.status === "waiting_approval" ? threadHitl : undefined}
                 snapshot={taskSnapshotsByName?.get(item.taskName)}
               />
             ))
@@ -412,6 +451,10 @@ const ThreadTaskCard = memo(function ThreadTaskCard({
                 </pre>
               </BoundedContent>
             )}
+            {/* Carries the card's (wrapped) bundle: a child-gate decision
+                inside this transcript is a send too, and the gating card is
+                the thread's active tail — pinning the outer thread keeps
+                the transcript's continuation in view as it streams. */}
             <WorkflowAgentCallTranscript
               childExecutionId={item.childExecutionId}
               agentSlug={item.agentSlug || undefined}
@@ -596,10 +639,11 @@ function ThreadTaskDetail({
   readonly inputIO: TaskDetailIO | null;
   readonly outputIO: TaskDetailIO | null;
 }) {
-  const rows: Array<[string, string]> = [["Status", statusLabel(item.status)]];
-  if (item.durationMs > 0) {
-    rows.push(["Duration", formatMetaChips({ durationMs: item.durationMs }) ?? ""]);
-  }
+  // No Status/Duration rows (R6-6): the card header is the single source
+  // for both — the status glyph and the duration meta chip. The detail
+  // body carries only what the header cannot: attempt count, usage, the
+  // agent slug.
+  const rows: Array<[string, string]> = [];
   if (item.attemptNumber > 1) rows.push(["Attempt", String(item.attemptNumber)]);
   const costChip = formatMetaChips({
     costMicros: item.costMicros,
@@ -612,14 +656,16 @@ function ThreadTaskDetail({
 
   return (
     <div className="stg:flex stg:flex-col stg:gap-2">
-      <dl className="stg:grid stg:grid-cols-[auto_1fr] stg:gap-x-4 stg:gap-y-1 stg:text-xs">
-        {rows.map(([label, value]) => (
-          <div key={label} className="stg:contents">
-            <dt className="stg:text-muted-foreground">{label}</dt>
-            <dd className="stg:text-foreground">{value}</dd>
-          </div>
-        ))}
-      </dl>
+      {rows.length > 0 && (
+        <dl className="stg:grid stg:grid-cols-[auto_1fr] stg:gap-x-4 stg:gap-y-1 stg:text-xs">
+          {rows.map(([label, value]) => (
+            <div key={label} className="stg:contents">
+              <dt className="stg:text-muted-foreground">{label}</dt>
+              <dd className="stg:text-foreground">{value}</dd>
+            </div>
+          ))}
+        </dl>
+      )}
 
       {item.error && (
         <BoundedContent>
@@ -637,25 +683,6 @@ function ThreadTaskDetail({
   );
 }
 
-function statusLabel(status: WorkflowThreadItem["status"]): string {
-  switch (status) {
-    case "waiting_approval":
-      return "Waiting for approval";
-    case "retrying":
-      return "Retrying";
-    case "running":
-      return "Running";
-    case "completed":
-      return "Completed";
-    case "failed":
-      return "Failed";
-    case "skipped":
-      return "Skipped";
-    case "pending":
-      return "Pending";
-  }
-}
-
 // ---------------------------------------------------------------------------
 // Status glyph — the shared thread-card set, colored by status token (T05)
 // ---------------------------------------------------------------------------

package/src/workflow/thread/task-presentation.ts

@@ -124,9 +124,18 @@ export function getTaskPresenter(
  * the output-envelope follow-up standardizes them (DD-T04-3) — stays a
  * clean one-line row with zero cost. `set_vars` earns its place from live
  * data: the runner writes the seeded variables to task output (T05, R2-5).
+ * `try_catch` earns it the same way: its output is the try (or catch.do)
+ * block's settled result — the `transform` class. `raise_error` earns it
+ * from the OTHER `showBody` arm: it always fails, and the preview body
+ * renders the full failure detail without a click (R6-5).
  *
- * Only genuinely body-less kinds (control flow, `wait`/`listen`, and the
- * snapshot fallback's `unspecified`) stay compact summary rows.
+ * Only genuinely body-less kinds stay compact summary rows: `wait`/
+ * `listen`, the snapshot fallback's `unspecified`, and the remaining
+ * control flow — including `switch_case`, DELIBERATELY (an R6-5
+ * refinement): its entire settled content is the one-word flow directive,
+ * carried by its always-visible preview line below; a body would only
+ * re-render the raw `{__flow_directive__}` marker, failing the "does the
+ * body carry content the one-line row cannot?" rule.
  */
 const PREVIEW_KINDS: ReadonlySet<WorkflowTaskKind> = new Set([
   WorkflowTaskKind.transform,
@@ -142,6 +151,8 @@ const PREVIEW_KINDS: ReadonlySet<WorkflowTaskKind> = new Set([
   WorkflowTaskKind.grpc_call,
   WorkflowTaskKind.activity_call,
   WorkflowTaskKind.run_workflow,
+  WorkflowTaskKind.try_catch,
+  WorkflowTaskKind.raise_error,
 ]);
 
 /** Default disclosure mode for a task kind. */
@@ -218,12 +229,17 @@ function defaultPreviewLine(state: DerivedTaskState): string | null {
       return waitLine(state);
     case WorkflowTaskKind.listen:
       return listenLine(state);
+    case WorkflowTaskKind.switch_case:
+      return switchCaseLine(state.outputSummary);
+    case WorkflowTaskKind.try_catch:
+      return tryCatchLine(state);
     default:
-      // Control flow (branch-taken / fork progress need graph topology the
-      // thread does not have — deferred), raise_error (the failure
-      // precedence already shows the message), the invocation kinds
-      // (pending the backend output-envelope follow-up), and the snapshot
-      // fallback's `unspecified` all stay status-only.
+      // Remaining control flow (for_each / fork progress need graph
+      // topology the thread does not have — deferred), raise_error (the
+      // failure precedence already shows the message; its preview body
+      // carries the full detail), the invocation kinds (pending the
+      // backend output-envelope follow-up), and the snapshot fallback's
+      // `unspecified` all stay status-only.
       return null;
   }
 }
@@ -354,6 +370,35 @@ function listenLine(state: DerivedTaskState): string | null {
   return null;
 }
 
+/**
+ * `→ approved-path` / `→ exit` — the flow directive the switch settled on
+ * (R6-5). The switch executor's only output is the `__flow_directive__`
+ * marker carrying the matched case's `then` (a target task name, or the
+ * `continue`/`end`/`exit` terminals), and `do-executor` writes raw task
+ * output to the event summary — so the branch taken is already on the
+ * wire. No case matched means no output: status-only, honestly.
+ */
+function switchCaseLine(output: JsonObject | null): string | null {
+  const directive = asString(output?.["__flow_directive__"]);
+  return directive ? `\u2192 ${directive}` : null;
+}
+
+/**
+ * `recovered after 2 attempts` / snippet of the settled block result
+ * (R6-5). The try task's own `task_retrying` events drive
+ * `attemptNumber`, so a completion above attempt 1 IS a catch-retry
+ * recovery. A catch.do-path recovery (no retry configured) is NOT
+ * distinguishable from plain success in the emitted data — deliberately
+ * unmarked: adding a marker to task output would leak presentation into
+ * workflow dataflow (`processTaskOutput` consumes it downstream).
+ */
+function tryCatchLine(state: DerivedTaskState): string | null {
+  if (state.status === "completed" && state.attemptNumber > 1) {
+    return `recovered after ${state.attemptNumber} attempts`;
+  }
+  return state.outputSummary ? valueSnippet(state.outputSummary) : null;
+}
+
 // ---------------------------------------------------------------------------
 // Struct-reading helpers (defensive by construction)
 // ---------------------------------------------------------------------------

package/src/workspace/WorkspaceSurface.tsx

@@ -695,8 +695,16 @@ function EditorArea({
     <div className="stg:flex stg:h-full stg:min-h-0 stg:flex-col">
       {/* Collapse control + tab strip. The far right is kept clear (pr-24):
           the session viewer floats its top-right controls (host
-          `headerActions` and the panel chip) over this region. */}
-      <div className="stg:flex stg:shrink-0 stg:items-stretch stg:border-b stg:border-border stg:pr-24">
+          `headerActions` and the panel chip) over this region. Fixed to the
+          shared HEADER_ROW_HEIGHT so this row's bottom border stays flush
+          with the sidebar facet header's — and so an empty tab strip (no
+          open editors) cannot collapse the row. */}
+      <div
+        className={cn(
+          HEADER_ROW_HEIGHT,
+          "stg:flex stg:shrink-0 stg:items-stretch stg:border-b stg:border-border stg:pr-24",
+        )}
+      >
         <Tooltip>
           <TooltipTrigger
             render={
@@ -843,9 +851,24 @@ function Breadcrumbs({
 // Shared sidebar chrome
 // ---------------------------------------------------------------------------
 
+/**
+ * One fixed height for every header row across the surface — the sidebar
+ * facet header AND the editor area's tab-strip row — so their bottom borders
+ * form a single continuous line across the panel. Fixed rather than
+ * padding-derived: the two rows have different content (micro-caps title vs
+ * text-xs tabs, sometimes no tabs at all), so padding math can never keep
+ * them aligned.
+ */
+const HEADER_ROW_HEIGHT = "stg:h-8";
+
 function SidebarHeader({ title }: { readonly title: string }) {
   return (
-    <div className="stg:shrink-0 stg:border-b stg:border-border stg:px-3 stg:py-2 stg:text-[0.65rem] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-muted-foreground">
+    <div
+      className={cn(
+        HEADER_ROW_HEIGHT,
+        "stg:flex stg:shrink-0 stg:items-center stg:border-b stg:border-border stg:px-3 stg:text-[0.65rem] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-muted-foreground",
+      )}
+    >
       {title}
     </div>
   );