diff --git a/stories/workflow/step-graph.stories.tsx b/stories/workflow/step-graph.stories.tsx
index a66caa35..0ea39e7e 100644
--- a/stories/workflow/step-graph.stories.tsx
+++ b/stories/workflow/step-graph.stories.tsx
@@ -13,4 +13,29 @@ export const Compact = () => <StepGraph steps={STEPS} density="compact" />;
 
 export const Expanded = () => <StepGraph steps={STEPS} density="expanded" />;
 
+// A fan-out/fan-in: "Summarize" and "Draft options" both depend on "Watch
+// inbox" and both feed "Approve the reply". The layout still places nodes in
+// one straight line, in array order — `edges` only changes which connectors
+// draw, not where a node sits — so this is the shape of a small DAG the graph
+// can represent today, not a branched, multi-column layout.
+const BRANCHING_STEPS: StepGraphStep[] = [
+  { id: "1", title: "Watch inbox", kind: "auto", status: "completed" },
+  { id: "2", title: "Summarize the thread", kind: "agent", status: "completed" },
+  { id: "3", title: "Draft options", kind: "agent", status: "running" },
+  { id: "4", title: "Approve the reply", kind: "human", status: "pending" },
+];
+
+export const LinearDagEdges = () => (
+  <StepGraph
+    steps={BRANCHING_STEPS}
+    edges={[
+      { from: "1", to: "2" },
+      { from: "1", to: "3" },
+      { from: "2", to: "4" },
+      { from: "3", to: "4" },
+    ]}
+    density="expanded"
+  />
+);
+
 export const Empty = () => <StepGraph steps={[]} />;
diff --git a/stories/workflow/step-primitives.stories.tsx b/stories/workflow/step-primitives.stories.tsx
new file mode 100644
index 00000000..54ac9e6f
--- /dev/null
+++ b/stories/workflow/step-primitives.stories.tsx
@@ -0,0 +1,38 @@
+import { Step, StepDescription, StepIndicator, StepLabel, Steps, StepTitle } from "../../src/ui/step-primitives.js";
+
+export default { title: "Workflow / Step primitives" };
+
+export const Horizontal = () => (
+  <Steps orientation="horizontal">
+    <StepIndicator status="complete" index={0} />
+    <StepIndicator status="active" index={1} />
+    <StepIndicator status="incomplete" index={2} />
+  </Steps>
+);
+
+// The compound API's intended use: a caller wires status into each
+// `StepIndicator` itself, one `Step` row per entry.
+export const Vertical = () => (
+  <Steps orientation="vertical">
+    <Step>
+      <StepIndicator status="complete" index={0} />
+      <StepLabel>
+        <StepTitle>Collect requirements</StepTitle>
+        <StepDescription>Reviewed with the customer on Tuesday.</StepDescription>
+      </StepLabel>
+    </Step>
+    <Step>
+      <StepIndicator status="active" index={1} />
+      <StepLabel>
+        <StepTitle>Draft the proposal</StepTitle>
+        <StepDescription>In progress.</StepDescription>
+      </StepLabel>
+    </Step>
+    <Step>
+      <StepIndicator status="incomplete" index={2} />
+      <StepLabel>
+        <StepTitle>Send for signature</StepTitle>
+      </StepLabel>
+    </Step>
+  </Steps>
+);
diff --git a/stories/workflow/workflow-status-badge.stories.tsx b/stories/workflow/workflow-status-badge.stories.tsx
new file mode 100644
index 00000000..4ce1bc4f
--- /dev/null
+++ b/stories/workflow/workflow-status-badge.stories.tsx
@@ -0,0 +1,14 @@
+import { WorkflowStatusBadge } from "../../src/ui/workflow-status-badge.js";
+import { WORKFLOW_STATUS_LABEL, type WorkflowStatusTone } from "../../src/lib/workflow-registry.js";
+
+export default { title: "Workflow / Status badge" };
+
+const TONES: readonly WorkflowStatusTone[] = ["running", "awaiting", "done", "paused", "fail"];
+
+export const AllTones = () => (
+  <div className="flex flex-wrap gap-2">
+    {TONES.map((tone) => (
+      <WorkflowStatusBadge key={tone} tone={tone} label={WORKFLOW_STATUS_LABEL[tone]} />
+    ))}
+  </div>
+);