@stigmer/react 1.0.4 → 2.0.0

package/src/workflow/useDiagnoseExecutionFlow.ts

@@ -13,6 +13,7 @@ import {
   extractWorkflowYaml,
   type ExtractedWorkflowYaml,
 } from "./extract-workflow-yaml";
+import { WORKFLOW_DIAGNOSIS_RESPONSE_SCHEMA } from "./architect-response-schema";
 
 /**
  * Lifecycle phases for the workflow execution diagnosis flow.
@@ -174,12 +175,32 @@ export function useDiagnoseExecutionFlow(
         setCompletedExecutions((prev) => [...prev, stream.execution!]);
       }
 
-      const result = extractWorkflowYaml(stream.execution);
-      if (result) {
-        setExtracted(result);
-        setPhase("complete");
+      // Primary: read from structured output (deterministic)
+      const structuredOutput = stream.execution?.status?.structuredOutput as
+        | Record<string, unknown>
+        | undefined;
+
+      if (structuredOutput) {
+        const action = structuredOutput.action as string | undefined;
+        const yaml = structuredOutput.yaml as string | undefined;
+        const explanation = structuredOutput.explanation as string | undefined;
+
+        if (action === "fix_yaml" && yaml) {
+          setExtracted({ yaml, explanation: explanation ?? "" });
+          setPhase("complete");
+        } else {
+          // diagnosis or clarification — no YAML fix
+          setPhase("ready");
+        }
       } else {
-        setPhase("ready");
+        // Fallback: regex extraction (backward compat / extraction failure)
+        const result = extractWorkflowYaml(stream.execution);
+        if (result) {
+          setExtracted(result);
+          setPhase("complete");
+        } else {
+          setPhase("ready");
+        }
       }
 
       setActiveExecutionId(null);
@@ -227,6 +248,7 @@ export function useDiagnoseExecutionFlow(
         org: orgRef.current,
         sessionId: activeSessionId,
         message,
+        structuredOutputSchema: WORKFLOW_DIAGNOSIS_RESPONSE_SCHEMA,
       });
 
       setActiveExecutionId(newExecutionId);
@@ -284,6 +306,7 @@ export function useDiagnoseExecutionFlow(
           org: orgRef.current,
           sessionId: activeSessionId,
           message: trimmed,
+          structuredOutputSchema: WORKFLOW_DIAGNOSIS_RESPONSE_SCHEMA,
         });
 
         setActiveExecutionId(newExecutionId);

package/src/workflow/useExecutionAnnouncements.ts

@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { DerivedTaskState } from "../internal/store/workflow-execution-event-store";
+
+/**
+ * Behavior hook that generates screen reader announcements when task
+ * execution states change. Diffs the `taskStates` map on each update
+ * and produces human-readable announcement strings.
+ *
+ * Returns the latest announcement string for rendering in an
+ * `aria-live="polite"` region. The string changes on each new event,
+ * allowing the live region to announce it.
+ */
+export function useExecutionAnnouncements(
+  taskStates: ReadonlyMap<string, DerivedTaskState>,
+): string {
+  const [announcement, setAnnouncement] = useState("");
+  const prevStatesRef = useRef<ReadonlyMap<string, DerivedTaskState>>(new Map());
+
+  useEffect(() => {
+    const prev = prevStatesRef.current;
+    const announcements: string[] = [];
+
+    for (const [name, state] of taskStates) {
+      const prevState = prev.get(name);
+      const prevStatus = prevState?.status;
+
+      if (prevStatus === state.status) continue;
+
+      switch (state.status) {
+        case "running":
+          announcements.push(`Task ${name} started`);
+          break;
+        case "completed":
+          announcements.push(`Task ${name} completed`);
+          break;
+        case "failed":
+          announcements.push(
+            state.error
+              ? `Task ${name} failed: ${state.error.slice(0, 80)}`
+              : `Task ${name} failed`,
+          );
+          break;
+        case "waiting_approval":
+          announcements.push(`Approval required for task ${name}`);
+          break;
+        case "retrying":
+          announcements.push(`Task ${name} retrying, attempt ${state.attemptNumber}`);
+          break;
+      }
+    }
+
+    if (announcements.length > 0) {
+      setAnnouncement(announcements.join(". "));
+    }
+
+    prevStatesRef.current = taskStates;
+  }, [taskStates]);
+
+  return announcement;
+}

package/src/workflow/useExplainWorkflowFlow.ts

@@ -0,0 +1,182 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { getUserMessage } from "@stigmer/sdk";
+import { useCreateSession } from "../session/useCreateSession";
+import { useCreateAgentExecution } from "../execution/useCreateAgentExecution";
+import { useExecutionStream } from "../execution/useExecutionStream";
+import { isTerminalPhase } from "../execution/execution-phases";
+import { useConversationStoreRef } from "../internal/store";
+import { WORKFLOW_ARCHITECT_RESPONSE_SCHEMA } from "./architect-response-schema";
+
+/**
+ * Lifecycle phases for the workflow explain flow.
+ *
+ * Simplified single-turn flow (no multi-turn, no YAML extraction):
+ * - `idle` — not started
+ * - `starting` — creating session + execution
+ * - `streaming` — agent is working
+ * - `complete` — explanation received
+ * - `error` — something failed
+ */
+export type ExplainPhase = "idle" | "starting" | "streaming" | "complete" | "error";
+
+/** Options for {@link useExplainWorkflowFlow}. */
+export interface UseExplainWorkflowFlowOptions {
+  /** Organization slug. */
+  readonly org: string;
+  /** Current workflow YAML to explain. */
+  readonly currentYaml: string;
+  /** Called on error. */
+  readonly onError?: (message: string) => void;
+}
+
+/** Return value of {@link useExplainWorkflowFlow}. */
+export interface UseExplainWorkflowFlowReturn {
+  readonly phase: ExplainPhase;
+  readonly explanation: string | null;
+  readonly execution: AgentExecution | null;
+  readonly isStreaming: boolean;
+  readonly error: string | null;
+  readonly explain: () => Promise<void>;
+  readonly reset: () => void;
+}
+
+const AGENT_REF = { org: "", slug: "workflow-architect" } as const;
+
+const EXPLAIN_PROMPT_PREFIX =
+  "Please explain the following workflow in plain language. " +
+  "Describe what each task does, how data flows between them, " +
+  "and any branching or error handling logic. " +
+  "Do NOT suggest any changes — just explain what it does.\n\n";
+
+/**
+ * Behavior hook for the "Explain Workflow" feature.
+ *
+ * Single-turn flow using the `workflow-architect` agent with
+ * `action: "no_changes"` (explanation only, no YAML returned).
+ *
+ * @since T14 (AI-Assisted Workflow Creation)
+ */
+export function useExplainWorkflowFlow(
+  options: UseExplainWorkflowFlowOptions,
+): UseExplainWorkflowFlowReturn {
+  const { org, currentYaml, onError } = options;
+
+  const [phase, setPhase] = useState<ExplainPhase>("idle");
+  const [executionId, setExecutionId] = useState<string | null>(null);
+  const [explanation, setExplanation] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const orgRef = useRef(org);
+  orgRef.current = org;
+  const yamlRef = useRef(currentYaml);
+  yamlRef.current = currentYaml;
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+  const prevTerminalRef = useRef(false);
+
+  const { create: createSession } = useCreateSession();
+  const { create: createExecution } = useCreateAgentExecution();
+  const conversationStore = useConversationStoreRef();
+  const stream = useExecutionStream(executionId, {
+    store: conversationStore,
+  });
+
+  // Terminal phase detection — extract explanation
+  useEffect(() => {
+    if (phase !== "streaming") return;
+
+    const isTerminal =
+      stream.phase !== ExecutionPhase.EXECUTION_PHASE_UNSPECIFIED &&
+      isTerminalPhase(stream.phase);
+
+    if (isTerminal && !prevTerminalRef.current) {
+      prevTerminalRef.current = true;
+
+      const structuredOutput = stream.execution?.status?.structuredOutput as
+        | Record<string, unknown>
+        | undefined;
+
+      if (structuredOutput?.explanation) {
+        setExplanation(structuredOutput.explanation as string);
+      }
+
+      setPhase("complete");
+      setExecutionId(null);
+    }
+  }, [phase, stream.phase, stream.execution]);
+
+  // Stream error surfacing
+  useEffect(() => {
+    if (stream.error && phase === "streaming") {
+      const msg = getUserMessage(stream.error, "Agent stream interrupted");
+      setPhase("error");
+      setError(msg);
+      onErrorRef.current?.(msg);
+    }
+  }, [stream.error, phase]);
+
+  const explain = useCallback(async () => {
+    if (phase !== "idle" && phase !== "error" && phase !== "complete") return;
+
+    setPhase("starting");
+    setError(null);
+    setExplanation(null);
+    prevTerminalRef.current = false;
+
+    try {
+      const { sessionId } = await createSession({
+        org: orgRef.current,
+        agentRef: { ...AGENT_REF, org: orgRef.current },
+      });
+
+      const message =
+        EXPLAIN_PROMPT_PREFIX +
+        "```yaml\n" +
+        yamlRef.current +
+        "\n```";
+
+      const { executionId: newExecId } = await createExecution({
+        org: orgRef.current,
+        sessionId,
+        message,
+        structuredOutputSchema: WORKFLOW_ARCHITECT_RESPONSE_SCHEMA,
+      });
+
+      setExecutionId(newExecId);
+      setPhase("streaming");
+    } catch (err) {
+      const msg = getUserMessage(
+        err,
+        "Failed to start the Workflow Architect agent",
+      );
+      setPhase("error");
+      setError(msg);
+      onErrorRef.current?.(msg);
+    }
+  }, [phase, createSession, createExecution]);
+
+  const reset = useCallback(() => {
+    setPhase("idle");
+    setExecutionId(null);
+    setExplanation(null);
+    setError(null);
+    prevTerminalRef.current = false;
+  }, []);
+
+  return useMemo(
+    () => ({
+      phase,
+      explanation,
+      execution: stream.execution,
+      isStreaming: stream.isStreaming || stream.isConnecting,
+      error,
+      explain,
+      reset,
+    }),
+    [phase, explanation, stream.execution, stream.isStreaming, stream.isConnecting, error, explain, reset],
+  );
+}

package/src/workflow/useFollowExecution.ts

@@ -0,0 +1,240 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { Node, Viewport } from "@xyflow/react";
+import { useReactFlow } from "@xyflow/react";
+import type { CanvasTaskNodeData } from "./workflow-graph-conversions";
+import { getAnimationDuration } from "./motion-preference";
+
+/**
+ * Follow-execution state machine states.
+ *
+ * - `auto_fit`: Initial state — viewport fitted to all nodes.
+ * - `following`: Camera actively tracking the running task.
+ * - `user_control`: User manually panned/zoomed — follow is paused.
+ */
+export type FollowState = "auto_fit" | "following" | "user_control";
+
+/** Options for {@link useFollowExecution}. */
+export interface UseFollowExecutionOptions {
+  /** Whether follow-execution behavior is enabled (typically true when execution is running). */
+  readonly enabled: boolean;
+  /** The name of the currently active task (running or waiting_approval). */
+  readonly activeTaskName: string | null;
+  /** React Flow nodes array — used to find the active node's position. */
+  readonly nodes: readonly Node[];
+  /** Whether the initial fitView has completed. Follow waits for this. */
+  readonly didInitialFit: boolean;
+  /** Whether the execution has reached a terminal state. */
+  readonly isTerminal: boolean;
+  /**
+   * Pixel width of panels (e.g. inspector) that reduce effective viewport width.
+   * The follow center is offset leftward to account for this occluded area.
+   * Defaults to 0.
+   */
+  readonly panelOffsetPx?: number;
+}
+
+/** Return value of {@link useFollowExecution}. */
+export interface UseFollowExecutionReturn {
+  /** Current state machine state. */
+  readonly followState: FollowState;
+  /** Whether follow is currently active (state === "following"). */
+  readonly isFollowing: boolean;
+  /** Toggle follow back on after user took manual control. */
+  readonly enableFollow: () => void;
+  /** Disable follow (user wants manual control). */
+  readonly disableFollow: () => void;
+  /**
+   * Pass to React Flow's `onMoveStart` to detect user-initiated viewport changes.
+   * When event is not null (real user interaction), transitions to user_control.
+   */
+  readonly handleMoveStart: (event: MouseEvent | TouchEvent | null, viewport: Viewport) => void;
+}
+
+const MIN_FOLLOW_ZOOM = 1.0;
+const FOLLOW_ANIMATION_MS = 400;
+const FOLLOW_DEBOUNCE_MS = 150;
+
+/** Inputs for the pure centering computation. */
+export interface FollowCenterInput {
+  /** Node position x in flow coordinates. */
+  readonly nodeX: number;
+  /** Node position y in flow coordinates. */
+  readonly nodeY: number;
+  /** Node width in flow coordinates. */
+  readonly nodeWidth: number;
+  /** Node height in flow coordinates. */
+  readonly nodeHeight: number;
+  /** Current viewport zoom level. */
+  readonly currentZoom: number;
+  /** Pixel width of an overlay panel occluding the viewport. 0 = no occlusion. */
+  readonly panelOffsetPx: number;
+}
+
+/** Result of the centering computation. */
+export interface FollowCenterResult {
+  /** X coordinate to pass to React Flow's setCenter. */
+  readonly x: number;
+  /** Y coordinate to pass to React Flow's setCenter. */
+  readonly y: number;
+  /** Zoom level to pass to React Flow's setCenter. */
+  readonly zoom: number;
+}
+
+/**
+ * Pure function that computes the viewport center point for following an
+ * active node. Extracted from hook internals for testability (DD-003).
+ *
+ * When `panelOffsetPx > 0`, the center is shifted leftward in flow coordinates
+ * so the node appears centered in the *unoccluded* portion of the viewport.
+ * The shift is inversely proportional to zoom (larger zoom → smaller shift).
+ */
+export function computeFollowCenter(input: FollowCenterInput): FollowCenterResult {
+  const centerX = input.nodeX + input.nodeWidth / 2;
+  const centerY = input.nodeY + input.nodeHeight / 2;
+
+  const offsetX = input.panelOffsetPx > 0
+    ? (input.panelOffsetPx / 2) / input.currentZoom
+    : 0;
+
+  return {
+    x: centerX - offsetX,
+    y: centerY,
+    zoom: Math.max(input.currentZoom, MIN_FOLLOW_ZOOM),
+  };
+}
+
+/** Inputs for the follow-selection decision. */
+export interface FollowSelectionInput {
+  /** Whether the follow state machine is in "following" state. */
+  readonly isFollowing: boolean;
+  /** The currently active (running/waiting) task name, or null. */
+  readonly activeTaskName: string | null;
+  /** The currently selected task name in the graph, or null. */
+  readonly currentSelectedTask: string | null;
+}
+
+/**
+ * Pure function that determines whether follow-selection should update
+ * the selected task. Returns the task name to select, or `null` when
+ * no change is needed. Extracted for testability (DD-003).
+ *
+ * Selection should update when all three conditions hold:
+ * 1. Follow is active (`isFollowing`)
+ * 2. An active task exists (`activeTaskName`)
+ * 3. The active task differs from the current selection
+ */
+export function computeFollowSelection(input: FollowSelectionInput): string | null {
+  if (!input.isFollowing || !input.activeTaskName) return null;
+  if (input.activeTaskName === input.currentSelectedTask) return null;
+  return input.activeTaskName;
+}
+
+/**
+ * Behavior hook implementing a follow-execution state machine for the
+ * workflow execution graph viewport.
+ *
+ * State machine transitions:
+ * - auto_fit → following: first active task detected after initial fit
+ * - following → user_control: user pans/zooms manually (event !== null)
+ * - user_control → following: user clicks the "Follow" toggle
+ * - following → following: active task changes (pan to new node)
+ * - any → auto_fit: execution reaches terminal state (re-fit all)
+ *
+ * Respects prefers-reduced-motion for all viewport animations.
+ * Offsets center point for inspector panel width.
+ * Never zooms OUT — only ensures minimum zoom of 1.0.
+ */
+export function useFollowExecution(options: UseFollowExecutionOptions): UseFollowExecutionReturn {
+  const { enabled, activeTaskName, nodes, didInitialFit, isTerminal, panelOffsetPx = 0 } = options;
+  const { setCenter, getZoom, fitView } = useReactFlow();
+
+  const [followState, setFollowState] = useState<FollowState>("auto_fit");
+  const lastPannedTaskRef = useRef<string | null>(null);
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Transition to auto_fit when execution completes
+  useEffect(() => {
+    if (isTerminal && followState !== "auto_fit") {
+      setFollowState("auto_fit");
+      lastPannedTaskRef.current = null;
+      fitView({ padding: 0.15, duration: getAnimationDuration(300) });
+    }
+  }, [isTerminal, followState, fitView]);
+
+  // Core follow logic: pan to active task when it changes
+  useEffect(() => {
+    if (!enabled || !didInitialFit || followState !== "following") return;
+    if (!activeTaskName || activeTaskName === lastPannedTaskRef.current) return;
+
+    const targetNode = nodes.find(
+      (n) => (n.data as CanvasTaskNodeData).taskName === activeTaskName,
+    );
+    if (!targetNode) return;
+
+    // Debounce rapid task changes (e.g., very fast sequential tasks)
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    debounceTimerRef.current = setTimeout(() => {
+      const nodeWidth = targetNode.width ?? targetNode.measured?.width ?? 200;
+      const nodeHeight = targetNode.height ?? targetNode.measured?.height ?? 56;
+
+      const center = computeFollowCenter({
+        nodeX: targetNode.position.x,
+        nodeY: targetNode.position.y,
+        nodeWidth,
+        nodeHeight,
+        currentZoom: getZoom(),
+        panelOffsetPx,
+      });
+      const duration = getAnimationDuration(FOLLOW_ANIMATION_MS);
+
+      setCenter(center.x, center.y, { zoom: center.zoom, duration });
+      lastPannedTaskRef.current = activeTaskName;
+    }, FOLLOW_DEBOUNCE_MS);
+
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [enabled, didInitialFit, followState, activeTaskName, nodes, setCenter, getZoom, panelOffsetPx]);
+
+  // Transition from auto_fit to following when first active task appears
+  useEffect(() => {
+    if (!enabled || !didInitialFit) return;
+    if (followState === "auto_fit" && activeTaskName) {
+      setFollowState("following");
+    }
+  }, [enabled, didInitialFit, followState, activeTaskName]);
+
+  // Detect user-initiated viewport changes to transition to user_control
+  const handleMoveStart = useCallback(
+    (event: MouseEvent | TouchEvent | null, _viewport: Viewport) => {
+      if (event !== null && followState === "following") {
+        setFollowState("user_control");
+      }
+    },
+    [followState],
+  );
+
+  const enableFollow = useCallback(() => {
+    setFollowState("following");
+    lastPannedTaskRef.current = null; // Force re-pan to current active task
+  }, []);
+
+  const disableFollow = useCallback(() => {
+    setFollowState("user_control");
+  }, []);
+
+  return {
+    followState,
+    isFollowing: followState === "following",
+    enableFollow,
+    disableFollow,
+    handleMoveStart,
+  };
+}

package/src/workflow/useInstanceEnvKeys.ts

@@ -0,0 +1,94 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
+import { useStigmer } from "../hooks";
+
+/** Return value of {@link useInstanceEnvKeys}. */
+export interface UseInstanceEnvKeysReturn {
+  /** Set of env var keys provided by the instance's bound environments. */
+  readonly instanceEnvKeys: Set<string>;
+  /** `true` while environment fetches are in flight. */
+  readonly isLoading: boolean;
+}
+
+const EMPTY_SET: Set<string> = new Set();
+
+/**
+ * Resolves the selected instance's `environmentRefs` into the set of
+ * env var keys those environments provide.
+ *
+ * When `instance` is `null` or has no `environmentRefs`, returns an
+ * empty set immediately. Otherwise fetches each referenced environment
+ * and collects all keys from their `spec.data` maps.
+ *
+ * Used by the run dialog to determine which declared env vars are
+ * already satisfied by the instance's bound environments, so validation
+ * can be relaxed and the UI can indicate "provided by instance".
+ */
+export function useInstanceEnvKeys(
+  instance: WorkflowInstance | null | undefined,
+  org: string,
+): UseInstanceEnvKeysReturn {
+  const stigmer = useStigmer();
+  const [keys, setKeys] = useState<Set<string>>(EMPTY_SET);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const refs = instance?.spec?.environmentRefs;
+  const refKey = useMemo(
+    () => (refs ?? []).map((r) => `${r.org || org}/${r.slug}`).join(","),
+    [refs, org],
+  );
+
+  const stigmerRef = useRef(stigmer);
+  stigmerRef.current = stigmer;
+
+  useEffect(() => {
+    if (!refs || refs.length === 0) {
+      setKeys(EMPTY_SET);
+      setIsLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    setIsLoading(true);
+
+    const resolveKeys = async () => {
+      try {
+        const results = await Promise.all(
+          refs.map((ref) =>
+            stigmerRef.current.environment.getByReference({
+              org: ref.org || org,
+              slug: ref.slug,
+            }),
+          ),
+        );
+
+        if (cancelled) return;
+
+        const collected = new Set<string>();
+        for (const env of results) {
+          if (env?.spec?.data) {
+            for (const key of Object.keys(env.spec.data)) {
+              collected.add(key);
+            }
+          }
+        }
+        setKeys(collected);
+      } catch {
+        if (!cancelled) {
+          setKeys(EMPTY_SET);
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    resolveKeys();
+    return () => { cancelled = true; };
+  }, [refKey, org]);
+
+  return { instanceEnvKeys: keys, isLoading };
+}

package/src/workflow/useRefineWorkflowFlow.ts

@@ -13,6 +13,7 @@ import {
   extractWorkflowYaml,
   type ExtractedWorkflowYaml,
 } from "./extract-workflow-yaml";
+import { WORKFLOW_ARCHITECT_RESPONSE_SCHEMA } from "./architect-response-schema";
 
 /**
  * Lifecycle phases for the workflow refinement flow.
@@ -148,12 +149,33 @@ export function useRefineWorkflowFlow(
         setCompletedExecutions((prev) => [...prev, stream.execution!]);
       }
 
-      const result = extractWorkflowYaml(stream.execution);
-      if (result) {
-        setExtracted(result);
-        setPhase("complete");
+      // Primary: read from structured output (deterministic)
+      const structuredOutput = stream.execution?.status?.structuredOutput as
+        | Record<string, unknown>
+        | undefined;
+
+      if (structuredOutput) {
+        const action = structuredOutput.action as string | undefined;
+        const yaml = structuredOutput.yaml as string | undefined;
+        const explanation = structuredOutput.explanation as string | undefined;
+
+        if (action === "generated_yaml" && yaml) {
+          setExtracted({ yaml, explanation: explanation ?? "" });
+          setPhase("complete");
+        } else if (action === "clarification" || action === "no_changes") {
+          setPhase("ready");
+        } else {
+          setPhase("ready");
+        }
       } else {
-        setPhase("ready");
+        // Fallback: regex extraction (backward compat / extraction failure)
+        const result = extractWorkflowYaml(stream.execution);
+        if (result) {
+          setExtracted(result);
+          setPhase("complete");
+        } else {
+          setPhase("ready");
+        }
       }
 
       setExecutionId(null);
@@ -239,6 +261,7 @@ export function useRefineWorkflowFlow(
           org: orgRef.current,
           sessionId: activeSessionId,
           message,
+          structuredOutputSchema: WORKFLOW_ARCHITECT_RESPONSE_SCHEMA,
         });
 
         setExecutionId(newExecutionId);