fix(workflow): bundle build & register workflow

- Add missing agent deps to template package.json so bun workspace
  resolution works during `bun build` (workflow-agent-cursor for develop,
  workflow-agent-hermes + workflow-execute for solve-issue)
- Create scripts/build-bundles.sh that builds both template bundles into
  dist/*.esm.js with correct --external flags for runtime-symlinked packages
- Add build:bundles script to root package.json
- Extend ensureUncagedWorkflowSymlink to also symlink workflow-util,
  workflow-execute, and workflow-register (needed by externalized bundles)
- Defer agent creation in develop bundle-entry.ts via lazy init so
  requireEnv('WORKFLOW_LLM_API_KEY') only throws at first invocation,
  not at import() time (fixes workflowAsAgent crash)
- Document that env vars must be set before the first worker spawn
  (workers are persistent and don't inherit later env changes)

Fixes #206

Co-authored-by: Cursor <cursoragent@cursor.com>

package.json

@@ -6,6 +6,7 @@
   ],
   "scripts": {
     "build": "bunx tsc --build",
+    "build:bundles": "bash scripts/build-bundles.sh",
     "check": "bunx tsc --build && biome check .",
     "typecheck": "bunx tsc --build",
     "format": "biome format --write .",

packages/cli-workflow/src/commands/serve/routes-workflow.ts

@@ -1,9 +1,14 @@
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import type { WorkflowDescriptor } from "@uncaged/workflow-protocol";
 import {
   getRegisteredWorkflow,
   listRegisteredWorkflowNames,
   readWorkflowRegistry,
+  validateWorkflowDescriptor,
 } from "@uncaged/workflow-register";
 import { Hono } from "hono";
+import { parse as parseYaml } from "yaml";
 
 export function createWorkflowRoutes(storageRoot: string): Hono {
   const app = new Hono();
@@ -35,7 +40,17 @@ export function createWorkflowRoutes(storageRoot: string): Hono {
     if (entry === null) {
       return c.json({ error: `workflow not found: ${name}` }, 404);
     }
-    return c.json({ name, ...entry });
+    let descriptor: WorkflowDescriptor | null = null;
+    try {
+      const yamlPath = join(storageRoot, "bundles", `${entry.hash}.yaml`);
+      const yamlText = await readFile(yamlPath, "utf8");
+      const parsed: unknown = parseYaml(yamlText);
+      const validated = validateWorkflowDescriptor(parsed);
+      descriptor = validated.ok ? validated.value : null;
+    } catch {
+      descriptor = null;
+    }
+    return c.json({ name, ...entry, descriptor });
   });
 
   app.get("/:name/history", async (c) => {

packages/workflow-cas/.gitignore

@@ -0,0 +1 @@
+workflow-cas

packages/workflow-dashboard/package.json

@@ -9,6 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@dagrejs/dagre": "^3.0.0",
+    "@xyflow/react": "^12.10.2",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-markdown": "^10.1.0",

packages/workflow-dashboard/src/api.ts

@@ -104,6 +104,36 @@ export type WorkflowResultRecord = {
 
 export type ThreadRecord = ThreadStartRecord | RoleRecord | WorkflowResultRecord;
 
+export type WorkflowGraphEdge = {
+  from: string;
+  to: string;
+  condition: string;
+  conditionDescription: string | null;
+};
+
+export type WorkflowGraph = {
+  edges: readonly WorkflowGraphEdge[];
+};
+
+export type WorkflowRoleDescriptor = {
+  description: string;
+  schema: Record<string, unknown>;
+};
+
+export type WorkflowDescriptor = {
+  description: string;
+  roles: Record<string, WorkflowRoleDescriptor>;
+  graph: WorkflowGraph;
+};
+
+export type WorkflowDetail = {
+  name: string;
+  hash: string;
+  timestamp: number;
+  history: unknown[];
+  descriptor: WorkflowDescriptor | null;
+};
+
 // ── Gateway endpoints ───────────────────────────────────────────────
 
 export function listAgents(): Promise<AgentEndpoint[]> {
@@ -117,6 +147,17 @@ export function listWorkflows(agent: string): Promise<{ workflows: WorkflowSumma
   return fetchJson(agentBase(agent), "/workflows");
 }
 
+export async function getWorkflowDescriptor(
+  agent: string,
+  name: string,
+): Promise<WorkflowDescriptor | null> {
+  const res = await fetchJson<WorkflowDetail>(
+    agentBase(agent),
+    `/workflows/${encodeURIComponent(name)}`,
+  );
+  return res.descriptor;
+}
+
 export function listThreads(agent: string): Promise<{ threads: ThreadSummary[] }> {
   return fetchJson(agentBase(agent), "/threads");
 }

packages/workflow-dashboard/src/components/record-card.tsx

@@ -56,11 +56,11 @@ function StartCard({ record }: { record: ThreadStartRecord }) {
   );
 }
 
-function RoleMessage({ record }: { record: RoleRecord }) {
+function RoleMessage({ record, highlighted }: { record: RoleRecord; highlighted: boolean }) {
   const color = roleColor(record.role);
   return (
     <div
-      className="p-3 rounded-lg border text-sm"
+      className={`p-3 rounded-lg border text-sm ${highlighted ? "wf-record-card-highlight" : ""}`}
       style={{ background: "var(--color-surface)", borderColor: "var(--color-border)" }}
     >
       <div className="flex items-center gap-2 mb-2">
@@ -114,12 +114,17 @@ function ResultCard({ record }: { record: WorkflowResultRecord }) {
   );
 }
 
-export function RecordCard({ record }: { record: ThreadRecord }) {
+type RecordCardProps = {
+  record: ThreadRecord;
+  highlighted: boolean;
+};
+
+export function RecordCard({ record, highlighted }: RecordCardProps) {
   switch (record.type) {
     case "thread-start":
       return <StartCard record={record} />;
     case "role":
-      return <RoleMessage record={record} />;
+      return <RoleMessage record={record} highlighted={highlighted} />;
     case "workflow-result":
       return <ResultCard record={record} />;
   }

packages/workflow-dashboard/src/components/thread-detail.tsx

@@ -1,8 +1,17 @@
-import { useEffect, useRef, useState } from "react";
-import { getThread, killThread, pauseThread, resumeThread } from "../api.ts";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  getThread,
+  getWorkflowDescriptor,
+  killThread,
+  pauseThread,
+  resumeThread,
+  type ThreadRecord,
+  type WorkflowDescriptor,
+} from "../api.ts";
 import { useFetch } from "../hooks.ts";
 import { useSSE } from "../use-sse.ts";
 import { RecordCard } from "./record-card.tsx";
+import { type NodeState, WorkflowGraph } from "./workflow-graph/index.ts";
 
 type Props = {
   agent: string;
@@ -10,11 +19,94 @@ type Props = {
   onBack: () => void;
 };
 
+function extractWorkflowName(records: readonly ThreadRecord[]): string | null {
+  for (const r of records) {
+    if (r.type === "thread-start") return r.workflow;
+  }
+  return null;
+}
+
+type GraphPanelProps = {
+  descriptor: WorkflowDescriptor;
+  workflowName: string | null;
+  nodeStates: Map<string, NodeState>;
+  onNodeClick: ((roleName: string) => void) | null;
+};
+
+function GraphPanel({ descriptor, workflowName, nodeStates, onNodeClick }: GraphPanelProps) {
+  const [open, setOpen] = useState(true);
+  const edgeCount = descriptor.graph.edges.length;
+  return (
+    <div
+      className="mb-4 rounded-lg border overflow-hidden"
+      style={{ borderColor: "var(--color-border)", background: "var(--color-surface)" }}
+    >
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center justify-between px-3 py-2 text-xs"
+        style={{ color: "var(--color-text-muted)" }}
+      >
+        <span className="font-mono">
+          {open ? "▼" : "▶"} Workflow graph
+          {workflowName !== null && (
+            <span className="ml-2" style={{ color: "var(--color-text)" }}>
+              {workflowName}
+            </span>
+          )}
+        </span>
+        <span>
+          {edgeCount} edge{edgeCount === 1 ? "" : "s"}
+        </span>
+      </button>
+      {open && (
+        <div style={{ height: 300, width: "100%" }}>
+          <WorkflowGraph
+            graph={descriptor.graph}
+            roles={descriptor.roles}
+            nodeStates={nodeStates}
+            onNodeClick={onNodeClick}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function computeNodeStates(records: readonly ThreadRecord[]): Map<string, NodeState> {
+  const states = new Map<string, NodeState>();
+  const roleRecords = records.filter(
+    (r): r is Extract<ThreadRecord, { type: "role" }> => r.type === "role",
+  );
+  const hasResult = records.some((r) => r.type === "workflow-result");
+
+  for (let i = 0; i < roleRecords.length; i++) {
+    const role = roleRecords[i].role;
+    const isLast = i === roleRecords.length - 1;
+    states.set(role, !hasResult && isLast ? "active" : "completed");
+  }
+
+  if (roleRecords.length > 0) {
+    states.set("__start__", "completed");
+  }
+  if (hasResult) {
+    states.set("__end__", "completed");
+    for (const [k, v] of states) {
+      if (v === "active") states.set(k, "completed");
+    }
+  }
+
+  return states;
+}
+
 export function ThreadDetail({ agent, threadId, onBack }: Props) {
   const sse = useSSE(agent, threadId);
   const { status, data, error } = useFetch(() => getThread(agent, threadId), [agent, threadId]);
   const [actionStatus, setActionStatus] = useState<string | null>(null);
   const recordsEndRef = useRef<HTMLDivElement>(null);
+  const firstCardByRoleRef = useRef<Map<string, HTMLDivElement>>(new Map());
+  const highlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [highlightedRole, setHighlightedRole] = useState<string | null>(null);
 
   const liveActive = sse.connected && !sse.completed;
   const records = liveActive
@@ -23,6 +115,46 @@ export function ThreadDetail({ agent, threadId, onBack }: Props) {
       ? data.records
       : ([] as typeof sse.records);
 
+  const workflowName = useMemo(() => extractWorkflowName(records), [records]);
+
+  const descriptorFetch = useFetch<WorkflowDescriptor | null>(
+    () =>
+      workflowName === null ? Promise.resolve(null) : getWorkflowDescriptor(agent, workflowName),
+    [agent, workflowName],
+  );
+
+  const descriptor = descriptorFetch.status === "ok" ? descriptorFetch.data : null;
+  const nodeStates = useMemo(() => computeNodeStates(records), [records]);
+
+  const firstIndexByRole = useMemo(() => {
+    const m = new Map<string, number>();
+    for (let i = 0; i < records.length; i++) {
+      const r = records[i];
+      if (r.type === "role" && !m.has(r.role)) {
+        m.set(r.role, i);
+      }
+    }
+    return m;
+  }, [records]);
+
+  const handleGraphNodeClick = useCallback((roleName: string) => {
+    const el = firstCardByRoleRef.current.get(roleName);
+    if (el == null) return;
+    el.scrollIntoView({ behavior: "smooth", block: "center" });
+    if (highlightTimerRef.current !== null) clearTimeout(highlightTimerRef.current);
+    setHighlightedRole(roleName);
+    highlightTimerRef.current = setTimeout(() => {
+      setHighlightedRole(null);
+      highlightTimerRef.current = null;
+    }, 1500);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (highlightTimerRef.current !== null) clearTimeout(highlightTimerRef.current);
+    };
+  }, []);
+
   // biome-ignore lint/correctness/useExhaustiveDependencies: scroll when the rendered record list grows
   useEffect(() => {
     recordsEndRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -95,6 +227,15 @@ export function ThreadDetail({ agent, threadId, onBack }: Props) {
         </p>
       )}
 
+      {descriptor !== null && descriptor.graph.edges.length > 0 && (
+        <GraphPanel
+          descriptor={descriptor}
+          workflowName={workflowName}
+          nodeStates={nodeStates}
+          onNodeClick={handleGraphNodeClick}
+        />
+      )}
+
       {status === "loading" && !liveActive && records.length === 0 && (
         <p style={{ color: "var(--color-text-muted)" }}>Loading...</p>
       )}
@@ -103,9 +244,26 @@ export function ThreadDetail({ agent, threadId, onBack }: Props) {
       )}
       {(status === "ok" || liveActive || records.length > 0) && (
         <div className="space-y-3">
-          {records.map((r, i) => (
-            <RecordCard key={`${threadId}-${i}`} record={r} />
-          ))}
+          {records.map((r, i) => {
+            const key = `${threadId}-${i}`;
+            if (r.type === "role") {
+              const isFirstForRole = firstIndexByRole.get(r.role) === i;
+              const flash = highlightedRole === r.role;
+              return (
+                <div
+                  key={key}
+                  ref={(el) => {
+                    if (!isFirstForRole) return;
+                    if (el !== null) firstCardByRoleRef.current.set(r.role, el);
+                    else firstCardByRoleRef.current.delete(r.role);
+                  }}
+                >
+                  <RecordCard record={r} highlighted={flash} />
+                </div>
+              );
+            }
+            return <RecordCard key={key} record={r} highlighted={false} />;
+          })}
           <div ref={recordsEndRef} aria-hidden />
         </div>
       )}

packages/workflow-dashboard/src/components/workflow-graph/condition-edge.tsx

@@ -0,0 +1,76 @@
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  type EdgeProps,
+  getBezierPath,
+  getSmoothStepPath,
+} from "@xyflow/react";
+import type { ConditionEdgeData } from "./types.ts";
+
+export function ConditionEdge(props: EdgeProps) {
+  const {
+    id,
+    source,
+    target,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    data,
+    markerEnd,
+  } = props;
+  const edgeData = data as ConditionEdgeData | undefined;
+  const isFallback = edgeData?.isFallback ?? false;
+  const isSelfLoop = source === target;
+
+  const [path, labelX, labelY] = isSelfLoop
+    ? getSmoothStepPath({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+        borderRadius: 20,
+      })
+    : getBezierPath({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+      });
+
+  const stroke = isFallback ? "var(--color-text-muted)" : "var(--color-text)";
+  const strokeDasharray = isFallback ? "5 4" : undefined;
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={path}
+        markerEnd={markerEnd}
+        style={{ stroke, strokeWidth: 1.5, strokeDasharray }}
+      />
+      {edgeData && !isFallback && edgeData.condition !== "" && (
+        <EdgeLabelRenderer>
+          <div
+            className="absolute px-1.5 py-0.5 rounded text-[10px] font-mono pointer-events-auto"
+            style={{
+              transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+              background: "var(--color-bg)",
+              border: "1px solid var(--color-border)",
+              color: "var(--color-text)",
+            }}
+            title={edgeData.conditionDescription ?? undefined}
+          >
+            {edgeData.condition}
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+}

packages/workflow-dashboard/src/components/workflow-graph/index.ts

@@ -0,0 +1,2 @@
+export type { NodeState } from "./types.ts";
+export { WorkflowGraph } from "./workflow-graph.tsx";

packages/workflow-dashboard/src/components/workflow-graph/role-node.tsx

@@ -0,0 +1,69 @@
+import { Handle, type NodeProps, Position } from "@xyflow/react";
+import type { RoleNodeData } from "./types.ts";
+
+function borderColor(state: RoleNodeData["state"]): string {
+  switch (state) {
+    case "completed":
+      return "var(--color-success)";
+    case "active":
+      return "var(--color-accent)";
+    default:
+      return "var(--color-border)";
+  }
+}
+
+function stateIcon(state: RoleNodeData["state"]): string | null {
+  if (state === "completed") return "✓";
+  if (state === "active") return "●";
+  return null;
+}
+
+export function RoleNode(props: NodeProps) {
+  const data = props.data as RoleNodeData;
+  const icon = stateIcon(data.state);
+  const isActive = data.state === "active";
+  const handleStyle = {
+    background: "var(--color-text-muted)",
+    width: 6,
+    height: 6,
+    border: "none",
+  } as const;
+
+  return (
+    <div
+      className={`px-3 py-2 rounded-md border-2 text-xs font-medium cursor-pointer ${isActive ? "wf-node-pulse" : ""}`}
+      style={{
+        width: 180,
+        height: 60,
+        background: "var(--color-surface)",
+        borderColor: borderColor(data.state),
+        color: "var(--color-text)",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        boxSizing: "border-box",
+      }}
+      title={data.description}
+    >
+      <Handle type="target" position={Position.Top} style={handleStyle} isConnectable={false} />
+      <div className="flex items-center gap-1.5 font-mono">
+        {icon !== null && (
+          <span
+            style={{
+              color: data.state === "active" ? "var(--color-accent)" : "var(--color-success)",
+            }}
+          >
+            {icon}
+          </span>
+        )}
+        <span className="truncate">{data.label}</span>
+      </div>
+      {data.description !== "" && (
+        <div className="text-[10px] truncate mt-0.5" style={{ color: "var(--color-text-muted)" }}>
+          {data.description}
+        </div>
+      )}
+      <Handle type="source" position={Position.Bottom} style={handleStyle} isConnectable={false} />
+    </div>
+  );
+}

packages/workflow-dashboard/src/components/workflow-graph/terminal-node.tsx

@@ -0,0 +1,57 @@
+import { Handle, type NodeProps, Position } from "@xyflow/react";
+import type { TerminalNodeData } from "./types.ts";
+
+function borderColor(state: TerminalNodeData["state"]): string {
+  switch (state) {
+    case "completed":
+      return "var(--color-success)";
+    case "active":
+      return "var(--color-accent)";
+    default:
+      return "var(--color-border)";
+  }
+}
+
+function bgColor(state: TerminalNodeData["state"]): string {
+  if (state === "completed") return "var(--color-success)";
+  if (state === "active") return "var(--color-accent)";
+  return "var(--color-surface)";
+}
+
+export function TerminalNode(props: NodeProps) {
+  const data = props.data as TerminalNodeData;
+  const isStart = data.kind === "start";
+  const isActive = data.state === "active";
+  const handleStyle = {
+    background: "var(--color-text-muted)",
+    width: 6,
+    height: 6,
+    border: "none",
+  } as const;
+
+  return (
+    <div
+      className={`rounded-full border-2 flex items-center justify-center text-[10px] font-bold ${isActive ? "wf-node-pulse" : ""}`}
+      style={{
+        width: 40,
+        height: 40,
+        background: bgColor(data.state),
+        borderColor: borderColor(data.state),
+        color: data.state === "default" ? "var(--color-text-muted)" : "var(--color-bg)",
+      }}
+      title={isStart ? "Start" : "End"}
+    >
+      {isStart ? (
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          style={handleStyle}
+          isConnectable={false}
+        />
+      ) : (
+        <Handle type="target" position={Position.Top} style={handleStyle} isConnectable={false} />
+      )}
+      {isStart ? "▶" : "■"}
+    </div>
+  );
+}

packages/workflow-dashboard/src/components/workflow-graph/types.ts

@@ -0,0 +1,29 @@
+import type { WorkflowGraphEdge } from "../../api.ts";
+
+export type NodeState = "default" | "completed" | "active";
+
+export type TerminalKind = "start" | "end";
+
+export type RoleNodeData = {
+  label: string;
+  description: string;
+  state: NodeState;
+  [key: string]: unknown;
+};
+
+export type TerminalNodeData = {
+  kind: TerminalKind;
+  state: NodeState;
+  [key: string]: unknown;
+};
+
+export type ConditionEdgeData = {
+  condition: string;
+  conditionDescription: string | null;
+  isFallback: boolean;
+  [key: string]: unknown;
+};
+
+export type GraphInput = {
+  edges: readonly WorkflowGraphEdge[];
+};

packages/workflow-dashboard/src/components/workflow-graph/use-layout.ts

@@ -0,0 +1,127 @@
+import Dagre from "@dagrejs/dagre";
+import type { Edge, Node } from "@xyflow/react";
+import { useMemo } from "react";
+import type { WorkflowGraphEdge } from "../../api.ts";
+import type { ConditionEdgeData, NodeState, RoleNodeData, TerminalNodeData } from "./types.ts";
+
+const START_ID = "__start__";
+const END_ID = "__end__";
+const ROLE_NODE_WIDTH = 180;
+const ROLE_NODE_HEIGHT = 60;
+const TERMINAL_NODE_SIZE = 40;
+
+type LayoutInput = {
+  edges: readonly WorkflowGraphEdge[];
+  roles: Record<string, { description: string }>;
+  nodeStates: Map<string, NodeState>;
+};
+
+type LayoutResult = {
+  nodes: Node[];
+  edges: Edge[];
+};
+
+function collectNodeIds(edges: readonly WorkflowGraphEdge[]): Set<string> {
+  const ids = new Set<string>();
+  for (const e of edges) {
+    ids.add(e.from);
+    ids.add(e.to);
+  }
+  return ids;
+}
+
+function nodeSize(id: string): { width: number; height: number } {
+  if (id === START_ID || id === END_ID) {
+    return { width: TERMINAL_NODE_SIZE, height: TERMINAL_NODE_SIZE };
+  }
+  return { width: ROLE_NODE_WIDTH, height: ROLE_NODE_HEIGHT };
+}
+
+function buildRoleNode(
+  id: string,
+  pos: { x: number; y: number },
+  roles: Record<string, { description: string }>,
+  state: NodeState,
+): Node<RoleNodeData> {
+  const description = roles[id]?.description ?? "";
+  return {
+    id,
+    type: "role",
+    position: pos,
+    data: { label: id, description, state },
+    draggable: false,
+  };
+}
+
+function buildTerminalNode(
+  id: string,
+  pos: { x: number; y: number },
+  state: NodeState,
+): Node<TerminalNodeData> {
+  return {
+    id,
+    type: "terminal",
+    position: pos,
+    data: { kind: id === START_ID ? "start" : "end", state },
+    draggable: false,
+    selectable: false,
+  };
+}
+
+function edgeKey(e: WorkflowGraphEdge): string {
+  return `${e.from}->${e.to}::${e.condition}`;
+}
+
+function buildEdge(e: WorkflowGraphEdge): Edge<ConditionEdgeData> {
+  const isFallback = e.condition === "FALLBACK";
+  return {
+    id: edgeKey(e),
+    source: e.from,
+    target: e.to,
+    type: "condition",
+    data: {
+      condition: e.condition,
+      conditionDescription: e.conditionDescription,
+      isFallback,
+    },
+  };
+}
+
+export function useLayout(input: LayoutInput): LayoutResult {
+  return useMemo(() => {
+    const ids = collectNodeIds(input.edges);
+
+    const g = new Dagre.graphlib.Graph({ multigraph: true }).setDefaultEdgeLabel(() => ({}));
+    g.setGraph({ rankdir: "TB", nodesep: 60, ranksep: 80 });
+
+    for (const id of ids) {
+      const size = nodeSize(id);
+      g.setNode(id, { width: size.width, height: size.height });
+    }
+    for (const e of input.edges) {
+      if (e.from === e.to) {
+        continue;
+      }
+      g.setEdge(e.from, e.to, {}, edgeKey(e));
+    }
+
+    Dagre.layout(g);
+
+    const nodes: Node[] = [];
+    for (const id of ids) {
+      const dagNode = g.node(id);
+      const size = nodeSize(id);
+      const pos = { x: dagNode.x - size.width / 2, y: dagNode.y - size.height / 2 };
+      const state = input.nodeStates.get(id) ?? "default";
+      if (id === START_ID || id === END_ID) {
+        nodes.push(buildTerminalNode(id, pos, state));
+      } else {
+        nodes.push(buildRoleNode(id, pos, input.roles, state));
+      }
+    }
+
+    const edges: Edge[] = input.edges.map(buildEdge);
+
+    return { nodes, edges };
+  }, [input.edges, input.roles, input.nodeStates]);
+}

packages/workflow-dashboard/src/components/workflow-graph/workflow-graph.tsx

@@ -0,0 +1,79 @@
+import {
+  Background,
+  type EdgeTypes,
+  MarkerType,
+  type Node,
+  type NodeTypes,
+  type OnNodeClick,
+  ReactFlow,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { useMemo } from "react";
+import type { WorkflowGraph as WorkflowGraphData } from "../../api.ts";
+import { ConditionEdge } from "./condition-edge.tsx";
+import { RoleNode } from "./role-node.tsx";
+import { TerminalNode } from "./terminal-node.tsx";
+import type { NodeState } from "./types.ts";
+import { useLayout } from "./use-layout.ts";
+
+type Props = {
+  graph: WorkflowGraphData;
+  roles: Record<string, { description: string }>;
+  nodeStates: Map<string, NodeState>;
+  onNodeClick: ((roleName: string) => void) | null;
+};
+
+const nodeTypes: NodeTypes = {
+  role: RoleNode,
+  terminal: TerminalNode,
+};
+
+const edgeTypes: EdgeTypes = {
+  condition: ConditionEdge,
+};
+
+function handleRoleNodeClick(onRoleClick: (roleName: string) => void, node: Node): void {
+  if (node.type !== "role") return;
+  onRoleClick(node.id);
+}
+
+export function WorkflowGraph({ graph, roles, nodeStates, onNodeClick }: Props) {
+  const layout = useLayout({ edges: graph.edges, roles, nodeStates });
+
+  const onNodeClickHandler: OnNodeClick | undefined =
+    onNodeClick !== null ? (_e, node) => handleRoleNodeClick(onNodeClick, node) : undefined;
+
+  const styledEdges = useMemo(
+    () =>
+      layout.edges.map((e) => ({
+        ...e,
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          width: 14,
+          height: 14,
+          color: "var(--color-text)",
+        },
+      })),
+    [layout.edges],
+  );
+
+  return (
+    <ReactFlow
+      nodes={layout.nodes}
+      edges={styledEdges}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      onNodeClick={onNodeClickHandler}
+      fitView
+      fitViewOptions={{ padding: 0.15 }}
+      nodesDraggable={false}
+      nodesConnectable={false}
+      elementsSelectable={false}
+      proOptions={{ hideAttribution: true }}
+      colorMode="dark"
+      style={{ background: "var(--color-bg)" }}
+    >
+      <Background color="var(--color-border)" gap={20} size={1} />
+    </ReactFlow>
+  );
+}

packages/workflow-dashboard/src/index.css

@@ -19,3 +19,33 @@ body {
   color: var(--color-text);
   font-family: "Inter", system-ui, -apple-system, sans-serif;
 }
+
+@keyframes wf-node-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(124, 109, 240, 0.55);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(124, 109, 240, 0);
+  }
+}
+
+.wf-node-pulse {
+  animation: wf-node-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes wf-record-card-highlight {
+  0% {
+    border-color: var(--color-accent);
+  }
+  35% {
+    border-color: var(--color-accent);
+  }
+  100% {
+    border-color: var(--color-border);
+  }
+}
+
+.wf-record-card-highlight {
+  animation: wf-record-card-highlight 1.5s ease-out forwards;
+}

packages/workflow-execute/.gitignore

@@ -0,0 +1 @@
+workflow-execute

packages/workflow-protocol/.gitignore

@@ -0,0 +1 @@
+workflow-protocol

packages/workflow-register/.gitignore

@@ -0,0 +1 @@
+workflow-register

packages/workflow-register/src/bundle/ensure-uncaged-workflow-symlink.ts

@@ -48,6 +48,9 @@ export async function ensureUncagedWorkflowSymlink(storageRoot: string): Promise
     { name: "workflow-runtime", dir: siblingPackageDir("workflow-runtime") },
     { name: "workflow-cas", dir: siblingPackageDir("workflow-cas") },
     { name: "workflow-protocol", dir: siblingPackageDir("workflow-protocol") },
+    { name: "workflow-util", dir: siblingPackageDir("workflow-util") },
+    { name: "workflow-execute", dir: siblingPackageDir("workflow-execute") },
+    { name: "workflow-register", dir: siblingPackageDir("workflow-register") },
   ];
 
   for (const pkg of packages) {

packages/workflow-runtime/.gitignore

@@ -0,0 +1 @@
+workflow-runtime

packages/workflow-template-develop/bundle-entry.ts

@@ -2,19 +2,17 @@
  * develop bundle entry — 小橘 🍊
  *
  * All roles use cursor-agent with workspace auto-extracted from context.
+ *
+ * ENV VARS: WORKFLOW_LLM_API_KEY (required), WORKFLOW_LLM_BASE_URL,
+ * WORKFLOW_LLM_MODEL, WORKFLOW_CURSOR_MODEL, WORKFLOW_CURSOR_TIMEOUT.
+ * Must be set before the first worker spawn — workers are persistent and
+ * do not pick up env changes after initial import.
  */
 import { createCursorAgent } from "@uncaged/workflow-agent-cursor";
+import type { AgentContext, AgentFn, AgentFnResult } from "@uncaged/workflow-runtime";
 import { createWorkflow } from "@uncaged/workflow-runtime";
 import { buildDevelopDescriptor, developWorkflowDefinition } from "./src/index.js";
 
-function requireEnv(name: string): string {
-  const value = process.env[name];
-  if (value === undefined || value === "") {
-    throw new Error(`missing required env var: ${name}`);
-  }
-  return value;
-}
-
 function optionalEnv(name: string): string | null {
   const value = process.env[name];
   if (value === undefined || value === "") {
@@ -23,23 +21,39 @@ function optionalEnv(name: string): string | null {
   return value;
 }
 
-const llmProvider = {
-  baseUrl:
-    optionalEnv("WORKFLOW_LLM_BASE_URL") ?? "https://dashscope.aliyuncs.com/compatible-mode/v1",
-  apiKey: requireEnv("WORKFLOW_LLM_API_KEY"),
-  model: optionalEnv("WORKFLOW_LLM_MODEL") ?? "qwen-plus",
-};
+function requireEnv(name: string): string {
+  const value = process.env[name];
+  if (value === undefined || value === "") {
+    throw new Error(`missing required env var: ${name}`);
+  }
+  return value;
+}
 
-const agent = createCursorAgent({
-  model: optionalEnv("WORKFLOW_CURSOR_MODEL"),
-  timeout: optionalEnv("WORKFLOW_CURSOR_TIMEOUT")
-    ? Number(optionalEnv("WORKFLOW_CURSOR_TIMEOUT"))
-    : 0,
-  workspace: null,
-  llmProvider,
-});
+function createLazyAgent(): AgentFn {
+  let cached: AgentFn | null = null;
+  return (ctx: AgentContext): Promise<AgentFnResult> => {
+    if (cached === null) {
+      const llmProvider = {
+        baseUrl:
+          optionalEnv("WORKFLOW_LLM_BASE_URL") ??
+          "https://dashscope.aliyuncs.com/compatible-mode/v1",
+        apiKey: requireEnv("WORKFLOW_LLM_API_KEY"),
+        model: optionalEnv("WORKFLOW_LLM_MODEL") ?? "qwen-plus",
+      };
+      cached = createCursorAgent({
+        model: optionalEnv("WORKFLOW_CURSOR_MODEL"),
+        timeout: optionalEnv("WORKFLOW_CURSOR_TIMEOUT")
+          ? Number(optionalEnv("WORKFLOW_CURSOR_TIMEOUT"))
+          : 0,
+        workspace: null,
+        llmProvider,
+      });
+    }
+    return cached(ctx);
+  };
+}
 
-const wf = createWorkflow(developWorkflowDefinition, { agent, overrides: null });
+const wf = createWorkflow(developWorkflowDefinition, { agent: createLazyAgent(), overrides: null });
 
 export const descriptor = buildDevelopDescriptor();
 export const run = wf;

packages/workflow-template-develop/package.json

@@ -12,6 +12,7 @@
     "test": "bun test"
   },
   "dependencies": {
+    "@uncaged/workflow-agent-cursor": "workspace:*",
     "@uncaged/workflow-register": "workspace:*",
     "@uncaged/workflow-runtime": "workspace:*",
     "zod": "^4.0.0"

packages/workflow-template-solve-issue/bundle-entry.ts

@@ -3,6 +3,10 @@
  *
  * preparer + submitter → hermes agent
  * developer → workflow-as-agent (delegates to "develop" workflow)
+ *
+ * ENV VARS: WORKFLOW_HERMES_MODEL, WORKFLOW_HERMES_TIMEOUT.
+ * Must be set before the first worker spawn — workers are persistent and
+ * do not pick up env changes after initial import.
  */
 import { createHermesAgent } from "@uncaged/workflow-agent-hermes";
 import { workflowAsAgent } from "@uncaged/workflow-execute";

packages/workflow-template-solve-issue/package.json

@@ -12,13 +12,14 @@
     "test": "bun test"
   },
   "dependencies": {
+    "@uncaged/workflow-agent-hermes": "workspace:*",
+    "@uncaged/workflow-execute": "workspace:*",
     "@uncaged/workflow-register": "workspace:*",
     "@uncaged/workflow-runtime": "workspace:*",
     "zod": "^4.0.0"
   },
   "devDependencies": {
     "@uncaged/workflow-cas": "workspace:*",
-    "@uncaged/workflow-execute": "workspace:*",
     "@uncaged/workflow-protocol": "workspace:*"
   }
 }

packages/workflow-util/.gitignore

@@ -0,0 +1 @@
+workflow-util

scripts/build-bundles.sh

@@ -0,0 +1,43 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# Packages externalized from bundles — resolved at runtime via symlinks
+# created by ensureUncagedWorkflowSymlink in workflow-register.
+EXTERNAL=(
+  --external @uncaged/workflow-runtime
+  --external @uncaged/workflow-protocol
+  --external @uncaged/workflow-cas
+  --external @uncaged/workflow-util
+  --external @uncaged/workflow-execute
+  --external @uncaged/workflow-register
+)
+
+REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+cd "$REPO_ROOT"
+
+mkdir -p dist
+
+echo "Building develop bundle..."
+bun build packages/workflow-template-develop/bundle-entry.ts \
+  --bundle --format esm --target bun \
+  "${EXTERNAL[@]}" \
+  --outfile dist/develop.esm.js
+
+echo "Building solve-issue bundle..."
+bun build packages/workflow-template-solve-issue/bundle-entry.ts \
+  --bundle --format esm --target bun \
+  "${EXTERNAL[@]}" \
+  --outfile dist/solve-issue.esm.js
+
+echo "Done. Bundles written to dist/"
+
+# Register bundles if --register flag is passed
+if [[ "${1:-}" == "--register" ]]; then
+  STORAGE_ROOT="${UNCAGED_WORKFLOW_STORAGE_ROOT:-${WORKFLOW_STORAGE_ROOT:-$HOME/.uncaged/workflow}}"
+  echo "Registering bundles..."
+  for bundle in develop solve-issue; do
+    cp "dist/${bundle}.esm.js" "$STORAGE_ROOT/${bundle}.esm.js"
+    uncaged-workflow workflow add "$bundle" "$STORAGE_ROOT/${bundle}.esm.js"
+  done
+  echo "Bundles registered."
+fi