From 9e7c63ef03e0ec722a576e8f8acba53ab685770f Mon Sep 17 00:00:00 2001
From: Thomas Kosiewski <tk@coder.com>
Date: Wed, 24 Jun 2026 13:48:08 +0200
Subject: [PATCH] feat: add Workflows right-sidebar tab with live run streaming

Implement the "Workflows Tab" design (imported from claude.ai/design) so a
workspace's durable workflow runs get a dedicated, live observation surface in
the right sidebar instead of relying on the large in-chat workflow tool card.

Backend
- workflows.subscribe: push stream (initial snapshot + per-write deltas) of a
  workspace's top-level runs. WorkflowService is constructed per oRPC request, so
  it can't be the singleton event source a subscription needs; instead every run
  mutation already flows through WorkflowRunStore.writeRunFile, which now notifies
  a module-level workflowRunStreamHub that the subscribe handler listens to. This
  decouples "who runs the workflow" (chat tool, CLI, background, crash recovery)
  from "who is watching it".
- workflows.listScripts: enumerates runnable workflow scripts (built-in + project
  + global skills exposing a workflow.js) for the empty-state launcher, reusing
  the existing resolver/skill discovery and surfacing each script's declared args.

Frontend
- A pure, unit-tested projector folds the intentionally-lean run record
  (events + steps; steps carry no phase/title/usage) into the phase->step view the
  tab renders: phase assignment by event sequence, titles from task events,
  durations from timestamps, final report/error from events.
- Timeline UI: run header (interrupt / resume / retry-from-checkpoint / re-run),
  phases (collapsed by default so a 20+ step fan-out stays scannable, with
  expandable phase info objects), expandable steps with per-step output +
  structured output, run history, and an empty-state launcher with a per-arg
  input form. The final report is collapsible and renders the full structured
  output returned to the agent, not just the summary chips.
- The tab is gated on the dynamic-workflows experiment (it is that feature's
  observation surface) and added to the layout via the same per-experiment effect
  the memory/browser tabs use, with a live active-run count badge on the label.

When the tab is available, the in-chat workflow tool card auto-collapses by
default (any status); without it the prior behavior (auto-collapse completed runs
only) is preserved, so behavior and the existing tests are unchanged when the
experiment is off.

Deferred deliberately: per-step token/cost (sub-agent usage rolls up into the
parent workspace and isn't reliably queryable by task once a step completes) and
converting a live foreground run to backgrounded (needs runner detach support;
Interrupt covers the stop case). The projector/UI already accept a usage overlay
for when per-step usage capture lands.

Change-Id: I2bc47dc9c850af7b7d232c36aea18c4464fbdb78
Signed-off-by: Thomas Kosiewski <tk@coder.com>
---
 .../features/RightSidebar/RightSidebar.tsx    |  21 +
 .../features/RightSidebar/Tabs/TabLabels.tsx  |  30 +
 .../Tabs/TabLabels.workflows.test.tsx         |  67 +++
 .../features/RightSidebar/Tabs/index.ts       |   1 +
 .../features/RightSidebar/Tabs/tabConfig.ts   |   9 +
 .../RightSidebar/Tabs/tabRegistry.tsx         |  10 +
 .../RightSidebar/Workflows/WorkflowBadges.tsx |  60 ++
 .../Workflows/WorkflowEmptyState.tsx          | 242 +++++++++
 .../Workflows/WorkflowRunHeader.tsx           | 187 +++++++
 .../Workflows/WorkflowRunHistory.tsx          |  72 +++
 .../Workflows/WorkflowTimeline.tsx            | 379 +++++++++++++
 .../RightSidebar/Workflows/WorkflowsTab.tsx   | 139 +++++
 .../Workflows/projectWorkflowRun.test.ts      | 513 ++++++++++++++++++
 .../Workflows/projectWorkflowRun.ts           | 392 +++++++++++++
 .../RightSidebar/Workflows/useWorkflowRuns.ts |  99 ++++
 .../Workflows/workflowDisplay.test.ts         | 101 ++++
 .../RightSidebar/Workflows/workflowDisplay.ts | 144 +++++
 .../Tools/WorkflowRunToolCall.test.tsx        |   8 +
 .../features/Tools/WorkflowRunToolCall.tsx    |  17 +-
 src/common/orpc/schemas.ts                    |   2 +
 src/common/orpc/schemas/api.ts                |  16 +-
 src/common/orpc/schemas/workflow.ts           |  23 +
 src/common/types/workflow.ts                  |   4 +
 src/node/orpc/router.ts                       | 101 ++++
 .../services/workflows/WorkflowRunStore.ts    |   5 +
 .../services/workflows/WorkflowService.ts     |   4 +-
 .../workflows/workflowRunStreamHub.ts         |  43 ++
 .../workflows/workflowScriptDiscovery.ts      |  78 +++
 28 files changed, 2760 insertions(+), 7 deletions(-)
 create mode 100644 src/browser/features/RightSidebar/Tabs/TabLabels.workflows.test.tsx
 create mode 100644 src/browser/features/RightSidebar/Workflows/WorkflowBadges.tsx
 create mode 100644 src/browser/features/RightSidebar/Workflows/WorkflowEmptyState.tsx
 create mode 100644 src/browser/features/RightSidebar/Workflows/WorkflowRunHeader.tsx
 create mode 100644 src/browser/features/RightSidebar/Workflows/WorkflowRunHistory.tsx
 create mode 100644 src/browser/features/RightSidebar/Workflows/WorkflowTimeline.tsx
 create mode 100644 src/browser/features/RightSidebar/Workflows/WorkflowsTab.tsx
 create mode 100644 src/browser/features/RightSidebar/Workflows/projectWorkflowRun.test.ts
 create mode 100644 src/browser/features/RightSidebar/Workflows/projectWorkflowRun.ts
 create mode 100644 src/browser/features/RightSidebar/Workflows/useWorkflowRuns.ts
 create mode 100644 src/browser/features/RightSidebar/Workflows/workflowDisplay.test.ts
 create mode 100644 src/browser/features/RightSidebar/Workflows/workflowDisplay.ts
 create mode 100644 src/node/services/workflows/workflowRunStreamHub.ts
 create mode 100644 src/node/services/workflows/workflowScriptDiscovery.ts

diff --git a/src/browser/features/RightSidebar/RightSidebar.tsx b/src/browser/features/RightSidebar/RightSidebar.tsx
index bb1f03db5e..2845d0c608 100644
--- a/src/browser/features/RightSidebar/RightSidebar.tsx
+++ b/src/browser/features/RightSidebar/RightSidebar.tsx
@@ -674,6 +674,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
   const desktopExperimentEnabled = useExperimentValue(EXPERIMENT_IDS.PORTABLE_DESKTOP);
   const browserExperimentEnabled = useExperimentValue(EXPERIMENT_IDS.AGENT_BROWSER);
   const memoryExperimentEnabled = useExperimentValue(EXPERIMENT_IDS.MEMORY);
+  const workflowsExperimentEnabled = useExperimentValue(EXPERIMENT_IDS.DYNAMIC_WORKFLOWS);
   // Child task workspaces can't run goal actions — backend rejects them
   // via `WorkspaceGoalService.assertParentWorkspace`. We use this flag
   // both to hide the Goal tab below and to gate any inline goal UX.
@@ -980,6 +981,26 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
     });
   }, [memoryExperimentEnabled, initialActiveTab, setLayoutRaw]);
 
+  // Workflows tab follows the dynamic-workflows experiment (same shape as the memory tab):
+  // experimental tabs are added/removed from the persisted layout here, not via tabConfig's
+  // featureFlag (which only filters the Add-Tool picker / command palette).
+  React.useEffect(() => {
+    setLayoutRaw((prevRaw) => {
+      const prev = parseRightSidebarLayoutState(prevRaw, initialActiveTab);
+      const hasWorkflows = collectAllTabs(prev.root).includes("workflows");
+
+      if (workflowsExperimentEnabled && !hasWorkflows) {
+        return addTabToFocusedTabset(prev, "workflows", false);
+      }
+
+      if (!workflowsExperimentEnabled && hasWorkflows) {
+        return removeTabEverywhere(prev, "workflows");
+      }
+
+      return prev;
+    });
+  }, [workflowsExperimentEnabled, initialActiveTab, setLayoutRaw]);
+
   React.useEffect(() => {
     setLayoutRaw((prevRaw) => {
       const prev = parseRightSidebarLayoutState(prevRaw, initialActiveTab);
diff --git a/src/browser/features/RightSidebar/Tabs/TabLabels.tsx b/src/browser/features/RightSidebar/Tabs/TabLabels.tsx
index 333ce8fdd9..5bf7821259 100644
--- a/src/browser/features/RightSidebar/Tabs/TabLabels.tsx
+++ b/src/browser/features/RightSidebar/Tabs/TabLabels.tsx
@@ -16,6 +16,7 @@ import {
   Sparkles,
   Target,
   Terminal as TerminalIcon,
+  Workflow,
   X,
 } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/browser/components/Tooltip/Tooltip";
@@ -221,6 +222,35 @@ export const GoalTabLabel: React.FC<GoalTabLabelProps> = ({ workspaceId }) => {
   );
 };
 
+interface WorkflowsTabLabelProps {
+  workspaceId: string;
+}
+
+/**
+ * Workflows tab label. Subscribes to the workspace's sidebar state to surface a
+ * pulsing accent count of currently-active (pending/running/backgrounded) runs,
+ * mirroring how the Goal/Stats labels expose live workspace signals.
+ */
+export const WorkflowsTabLabel: React.FC<WorkflowsTabLabelProps> = ({ workspaceId }) => {
+  const sidebarState = useOptionalWorkspaceSidebarState(workspaceId);
+  const activeCount = sidebarState?.activeWorkflowRunCount ?? 0;
+  return (
+    <span className="inline-flex items-center gap-1">
+      <Workflow className="h-3 w-3 shrink-0" />
+      Workflows
+      {activeCount > 0 && (
+        <span
+          className="text-accent inline-flex items-center gap-1 text-[10px] tabular-nums"
+          aria-label={`${activeCount} running workflow${activeCount === 1 ? "" : "s"}`}
+        >
+          <span className="bg-accent inline-block h-[6px] w-[6px] animate-pulse rounded-full motion-reduce:animate-none" />
+          {activeCount}
+        </span>
+      )}
+    </span>
+  );
+};
+
 export function OutputTabLabel() {
   return <>Output</>;
 }
diff --git a/src/browser/features/RightSidebar/Tabs/TabLabels.workflows.test.tsx b/src/browser/features/RightSidebar/Tabs/TabLabels.workflows.test.tsx
new file mode 100644
index 0000000000..6111651391
--- /dev/null
+++ b/src/browser/features/RightSidebar/Tabs/TabLabels.workflows.test.tsx
@@ -0,0 +1,67 @@
+import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
+import { cleanup, render } from "@testing-library/react";
+
+import { installDom } from "../../../../../tests/ui/dom";
+import type { WorkspaceSidebarState } from "@/browser/stores/WorkspaceStore";
+
+// The label subscribes to the workspace sidebar store to surface a live count
+// of active workflow runs. Mock the hook so these tests stay focused on the
+// badge's gating without a real workspace store.
+let mockedSidebarState: WorkspaceSidebarState | null = null;
+void mock.module("@/browser/stores/WorkspaceStore", () => ({
+  useOptionalWorkspaceSidebarState: () => mockedSidebarState,
+  useWorkspaceUsage: () => ({ sessionTotal: null, liveCostUsage: null }),
+}));
+
+import { WorkflowsTabLabel } from "./TabLabels";
+
+function makeSidebarState(activeWorkflowRunCount: number): WorkspaceSidebarState {
+  // Only activeWorkflowRunCount matters for this label; keep the fixture narrow.
+  const state: Partial<WorkspaceSidebarState> = { activeWorkflowRunCount };
+  return state as WorkspaceSidebarState;
+}
+
+describe("WorkflowsTabLabel", () => {
+  let cleanupDom: (() => void) | null = null;
+
+  beforeEach(() => {
+    cleanupDom = installDom();
+    mockedSidebarState = null;
+  });
+
+  afterEach(() => {
+    cleanup();
+    cleanupDom?.();
+    cleanupDom = null;
+    mockedSidebarState = null;
+  });
+
+  test("shows no count badge when there are no active runs", () => {
+    mockedSidebarState = makeSidebarState(0);
+
+    const { container, getByText } = render(<WorkflowsTabLabel workspaceId="w1" />);
+
+    expect(getByText("Workflows")).toBeTruthy();
+    // No active-run accent when the workspace has nothing running.
+    expect(container.querySelector(".text-accent")).toBeNull();
+  });
+
+  test("shows the active-run count badge when runs are in flight", () => {
+    mockedSidebarState = makeSidebarState(3);
+
+    const { container, getByText } = render(<WorkflowsTabLabel workspaceId="w1" />);
+
+    const badge = container.querySelector(".text-accent");
+    expect(badge).not.toBeNull();
+    expect(getByText("3")).toBeTruthy();
+  });
+
+  test("renders without a badge when sidebar state is unavailable", () => {
+    mockedSidebarState = null;
+
+    const { container, getByText } = render(<WorkflowsTabLabel workspaceId="w1" />);
+
+    expect(getByText("Workflows")).toBeTruthy();
+    expect(container.querySelector(".text-accent")).toBeNull();
+  });
+});
diff --git a/src/browser/features/RightSidebar/Tabs/index.ts b/src/browser/features/RightSidebar/Tabs/index.ts
index 0f101f7649..1a6ce85b47 100644
--- a/src/browser/features/RightSidebar/Tabs/index.ts
+++ b/src/browser/features/RightSidebar/Tabs/index.ts
@@ -34,4 +34,5 @@ export {
   DebugTabLabel,
   DesktopTabLabel,
   GoalTabLabel,
+  WorkflowsTabLabel,
 } from "./TabLabels";
diff --git a/src/browser/features/RightSidebar/Tabs/tabConfig.ts b/src/browser/features/RightSidebar/Tabs/tabConfig.ts
index 7d99ad771d..0d22e926cd 100644
--- a/src/browser/features/RightSidebar/Tabs/tabConfig.ts
+++ b/src/browser/features/RightSidebar/Tabs/tabConfig.ts
@@ -53,6 +53,15 @@ const TAB_CONFIG_DEF = {
     defaultOrder: 35,
     paletteKeywords: ["goal", "target", "objective"],
   },
+  workflows: {
+    name: "Workflows",
+    contentClassName: "overflow-y-auto p-[15px]",
+    // Gated on the same experiment that enables durable workflows — the tab is
+    // their observation surface, so a separate flag would just be a second toggle.
+    featureFlag: EXPERIMENT_IDS.DYNAMIC_WORKFLOWS,
+    defaultOrder: 36,
+    paletteKeywords: ["workflow", "workflows", "orchestration", "agents", "run"],
+  },
   memory: {
     name: "Memory",
     contentClassName: "overflow-hidden p-0",
diff --git a/src/browser/features/RightSidebar/Tabs/tabRegistry.tsx b/src/browser/features/RightSidebar/Tabs/tabRegistry.tsx
index fec368c503..4cee5a73c0 100644
--- a/src/browser/features/RightSidebar/Tabs/tabRegistry.tsx
+++ b/src/browser/features/RightSidebar/Tabs/tabRegistry.tsx
@@ -23,6 +23,7 @@ import { BrowserTab } from "@/browser/features/RightSidebar/BrowserTab";
 import { DevToolsTab } from "@/browser/features/RightSidebar/DevToolsTab";
 import { GoalTab, type GoalCreateIntent } from "@/browser/features/RightSidebar/GoalTab";
 import { MemoryTab } from "@/browser/features/RightSidebar/Memory/MemoryTab";
+import { WorkflowsTab } from "@/browser/features/RightSidebar/Workflows/WorkflowsTab";
 import type { GoalSnapshot, GoalStatus } from "@/common/types/goal";
 import type { ReviewNoteData } from "@/common/types/review";
 import { BASE_TAB_IDS, TAB_CONFIG, type BaseTabType, type TabConfig } from "./tabConfig";
@@ -36,6 +37,7 @@ import {
   OutputTabLabel,
   ReviewTabLabel,
   StatsTabLabel,
+  WorkflowsTabLabel,
 } from "./TabLabels";
 
 export {
@@ -163,6 +165,14 @@ const TAB_RENDERERS = {
     Label: MemoryTabLabel,
     renderPanel: (ctx) => <MemoryTab workspaceId={ctx.workspaceId} />,
   },
+  workflows: {
+    Label: ({ workspaceId }) => <WorkflowsTabLabel workspaceId={workspaceId} />,
+    renderPanel: (ctx) => (
+      <ErrorBoundary workspaceInfo="Workflows tab">
+        <WorkflowsTab workspaceId={ctx.workspaceId} />
+      </ErrorBoundary>
+    ),
+  },
   desktop: {
     Label: DesktopTabLabel,
     renderPanel: (ctx) => (
diff --git a/src/browser/features/RightSidebar/Workflows/WorkflowBadges.tsx b/src/browser/features/RightSidebar/Workflows/WorkflowBadges.tsx
new file mode 100644
index 0000000000..59cf23369e
--- /dev/null
+++ b/src/browser/features/RightSidebar/Workflows/WorkflowBadges.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { Check, Circle, Pause, X } from "lucide-react";
+
+import type { WorkflowRunStatus, WorkflowScriptScope } from "@/common/types/workflow";
+import { WORKFLOW_STATUS_META, WORKFLOW_TONE_VAR, type WorkflowTone } from "./workflowDisplay";
+
+/** Small pulsing dot used to mark live / running work. */
+export const WorkflowLiveDot: React.FC<{ tone?: WorkflowTone; className?: string }> = (props) => (
+  <span
+    className={`inline-block h-[7px] w-[7px] shrink-0 animate-pulse rounded-full motion-reduce:animate-none ${props.className ?? ""}`}
+    style={{ background: WORKFLOW_TONE_VAR[props.tone ?? "running"] }}
+    aria-hidden="true"
+  />
+);
+
+const WorkflowStatusIcon: React.FC<{ status: WorkflowRunStatus; color: string }> = (props) => {
+  if (props.status === "completed") {
+    return <Check className="h-3 w-3 shrink-0" style={{ color: props.color }} />;
+  }
+  if (props.status === "failed") {
+    return <X className="h-3 w-3 shrink-0" style={{ color: props.color }} />;
+  }
+  if (props.status === "backgrounded" || props.status === "interrupted") {
+    return <Pause className="h-3 w-3 shrink-0" style={{ color: props.color }} />;
+  }
+  return <Circle className="h-3 w-3 shrink-0" style={{ color: props.color }} />;
+};
+
+/** Run status pill — colored by status tone; pulses while running. */
+export const WorkflowStatusPill: React.FC<{ status: WorkflowRunStatus; pulse?: boolean }> = (
+  props
+) => {
+  const meta = WORKFLOW_STATUS_META[props.status];
+  const color = WORKFLOW_TONE_VAR[meta.tone];
+  const isLive = props.status === "running";
+  return (
+    <span
+      className="inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-semibold whitespace-nowrap"
+      style={{
+        color,
+        borderColor: `color-mix(in srgb, ${color} 35%, transparent)`,
+        background: `color-mix(in srgb, ${color} 12%, transparent)`,
+      }}
+    >
+      {isLive && props.pulse !== false ? (
+        <WorkflowLiveDot tone={meta.tone} />
+      ) : (
+        <WorkflowStatusIcon status={props.status} color={color} />
+      )}
+      {meta.label}
+    </span>
+  );
+};
+
+/** Where the workflow script came from. */
+export const WorkflowScopeBadge: React.FC<{ scope: WorkflowScriptScope }> = (props) => (
+  <span className="border-border text-muted rounded border px-1.5 py-px text-[9.5px] font-semibold tracking-wide uppercase">
+    {props.scope}
+  </span>
+);
diff --git a/src/browser/features/RightSidebar/Workflows/WorkflowEmptyState.tsx b/src/browser/features/RightSidebar/Workflows/WorkflowEmptyState.tsx
new file mode 100644
index 0000000000..111fe85b56
--- /dev/null
+++ b/src/browser/features/RightSidebar/Workflows/WorkflowEmptyState.tsx
@@ -0,0 +1,242 @@
+import React from "react";
+import { BookOpen, Play, Workflow } from "lucide-react";
+
+import type { AvailableWorkflow, WorkflowArgSummary } from "@/common/types/workflow";
+
+import { WorkflowScopeBadge } from "./WorkflowBadges";
+import { stringifyWorkflowArgValue } from "./projectWorkflowRun";
+
+/** Coerce a raw input string to the arg's declared type (best-effort). */
+function coerceArgValue(arg: WorkflowArgSummary, raw: string | boolean): unknown {
+  if (typeof raw === "boolean") {
+    return raw;
+  }
+  const trimmed = raw.trim();
+  if (trimmed.length === 0) {
+    return undefined;
+  }
+  if (arg.types.includes("integer")) {
+    // Only accept a whole integer; leave partial input ("1.9", "10abc") as a string so the
+    // backend validates and reports it instead of parseInt silently truncating it.
+    return /^[+-]?\d+$/.test(trimmed) ? Number.parseInt(trimmed, 10) : trimmed;
+  }
+  if (arg.types.includes("number")) {
+    const parsed = Number(trimmed);
+    return Number.isNaN(parsed) ? trimmed : parsed;
+  }
+  return trimmed;
+}
+
+const WorkflowRunForm: React.FC<{
+  script: AvailableWorkflow;
+  busy: boolean;
+  onSubmit: (args: Record<string, unknown>) => void;
+}> = (props) => {
+  const [values, setValues] = React.useState<Record<string, string | boolean>>(() => {
+    // Seed required boolean args that have no default to `false` so their (unchecked) state is a
+    // submittable value: otherwise Start stays disabled on the only visible `false` state and the
+    // user has to check-then-uncheck the box to launch with false.
+    const initial: Record<string, string | boolean> = {};
+    for (const arg of props.script.args) {
+      if (arg.required && arg.default === undefined && arg.types.includes("boolean")) {
+        initial[arg.name] = false;
+      }
+    }
+    return initial;
+  });
+
+  const submit = () => {
+    const args: Record<string, unknown> = {};
+    for (const arg of props.script.args) {
+      const raw = values[arg.name];
+      // Skip fields the user never touched (including booleans) so the backend applies the
+      // script's declared default / omit semantics — matching slash & chat launches — rather
+      // than us forcing a value like `false`.
+      if (raw === undefined) {
+        continue;
+      }
+      const coerced = coerceArgValue(arg, raw);
+      if (coerced !== undefined) {
+        args[arg.name] = coerced;
+      }
+    }
+    props.onSubmit(args);
+  };
+
+  const missingRequired = props.script.args.some((arg) => {
+    // Optional args, and required args that declare a default, never block Start: submit omits the
+    // untouched field and the backend applies the default before validating required (slash/chat).
+    if (!arg.required || arg.default !== undefined) {
+      return false;
+    }
+    // A required boolean with no default needs an explicit value; since submit omits untouched
+    // fields, block Start until the user sets the checkbox (toggling it defines true/false).
+    if (arg.types.includes("boolean")) {
+      return values[arg.name] === undefined;
+    }
+    return String(values[arg.name] ?? "").trim().length === 0;
+  });
+
+  return (
+    <div className="border-border mt-2 flex flex-col gap-2 border-t pt-2.5">
+      {props.script.args.map((arg) => {
+        const isBoolean = arg.types.includes("boolean");
+        return (
+          <label key={arg.name} className="flex flex-col gap-1 text-[11.5px]">
+            <span className="text-content-secondary flex items-center gap-1.5">
+              <span className="font-mono">{arg.name}</span>
+              {arg.required && <span className="text-danger">*</span>}
+              <span className="text-muted">{arg.types.join(" | ")}</span>
+            </span>
+            {isBoolean ? (
+              <input
+                type="checkbox"
+                className="h-3.5 w-3.5 self-start"
+                // Reflect the declared default when untouched so the checkbox shows the value that
+                // will actually run (submit omits untouched fields → backend applies the default).
+                checked={
+                  typeof values[arg.name] === "boolean"
+                    ? (values[arg.name] as boolean)
+                    : arg.default === true
+                }
+                onChange={(event) =>
+                  setValues((previous) => ({ ...previous, [arg.name]: event.target.checked }))
+                }
+              />
+            ) : (
+              <input
+                type="text"
+                className="border-border bg-background text-foreground rounded-md border px-2 py-1 text-xs"
+                placeholder={
+                  arg.default != null ? `default: ${stringifyWorkflowArgValue(arg.default)}` : ""
+                }
+                value={typeof values[arg.name] === "string" ? (values[arg.name] as string) : ""}
+                onChange={(event) =>
+                  setValues((previous) => ({ ...previous, [arg.name]: event.target.value }))
+                }
+              />
+            )}
+          </label>
+        );
+      })}
+      <button
+        type="button"
+        disabled={props.busy || missingRequired}
+        onClick={submit}
+        className="border-accent bg-accent inline-flex items-center gap-1 self-start rounded-md border px-2.5 py-1.5 text-xs font-medium text-white transition-colors hover:opacity-90 disabled:cursor-default disabled:opacity-50"
+      >
+        <Play className="h-3 w-3" /> Start
+      </button>
+    </div>
+  );
+};
+
+interface WorkflowEmptyStateProps {
+  scripts: AvailableWorkflow[];
+  onRun: (script: AvailableWorkflow, args: Record<string, unknown>) => void;
+  // Keyed by scriptPath (unique) rather than descriptor.name, which can collide across skill
+  // workflows that omit meta.name (both normalize to "workflow").
+  busyScriptPath: string | null;
+}
+
+/**
+ * Shown when a workspace has no workflow runs yet: explains what workflows are
+ * and lists the scripts available to run. Scripts with declared args reveal an
+ * inline form; arg-less scripts start immediately.
+ */
+export const WorkflowEmptyState: React.FC<WorkflowEmptyStateProps> = (props) => {
+  const [configuring, setConfiguring] = React.useState<string | null>(null);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col items-center gap-2 px-4 pt-5 pb-2 text-center">
+        <span
+          className="text-accent grid h-12 w-12 place-items-center rounded-xl border"
+          style={{
+            background: "color-mix(in srgb, var(--color-accent) 12%, transparent)",
+            borderColor: "color-mix(in srgb, var(--color-accent) 30%, transparent)",
+          }}
+        >
+          <Workflow className="h-6 w-6" />
+        </span>
+        <div className="text-content-primary text-[15px] font-semibold">No workflow runs yet</div>
+        <div className="text-muted max-w-[330px] text-[12.5px] leading-relaxed">
+          Workflows are deterministic JavaScript that orchestrate sub-agents — fan out, gather,
+          verify, synthesize. Run one to see live progress here.
+        </div>
+      </div>
+
+      {props.scripts.length > 0 && (
+        <>
+          <div className="text-muted flex items-center gap-1.5 text-[11px] font-semibold tracking-wide uppercase">
+            <BookOpen className="h-3 w-3" /> Available workflows
+          </div>
+          <div className="flex flex-col gap-1.5">
+            {props.scripts.map((script) => {
+              const isConfiguring = configuring === script.scriptPath;
+              const isBusy = props.busyScriptPath === script.scriptPath;
+              const onRunClick = () => {
+                if (!script.descriptor.executable) {
+                  return;
+                }
+                if (script.args.length === 0) {
+                  props.onRun(script, {});
+                  return;
+                }
+                setConfiguring(isConfiguring ? null : script.scriptPath);
+              };
+              return (
+                <div
+                  key={script.scriptPath}
+                  className="border-border bg-surface-secondary rounded-lg border px-3 py-2.5"
+                >
+                  <div className="flex items-center gap-2.5">
+                    <div className="min-w-0 flex-1">
+                      <div className="text-content-primary flex items-center gap-1.5 text-[13px] font-semibold">
+                        <span className="truncate">{script.descriptor.name}</span>
+                        <WorkflowScopeBadge scope={script.descriptor.scope} />
+                      </div>
+                      <div className="text-muted mt-0.5 text-[11.5px] leading-snug">
+                        {script.descriptor.description}
+                      </div>
+                      {!script.descriptor.executable && script.descriptor.blockedReason != null && (
+                        <div className="text-danger mt-0.5 text-[11px]">
+                          {script.descriptor.blockedReason}
+                        </div>
+                      )}
+                    </div>
+                    <button
+                      type="button"
+                      disabled={
+                        !script.descriptor.executable || (props.busyScriptPath != null && !isBusy)
+                      }
+                      onClick={onRunClick}
+                      className="border-accent bg-accent inline-flex shrink-0 items-center gap-1 rounded-md border px-2.5 py-1.5 text-xs font-medium text-white transition-colors hover:opacity-90 disabled:cursor-default disabled:opacity-50"
+                    >
+                      <Play className="h-3 w-3" /> Run
+                    </button>
+                  </div>
+                  {isConfiguring && (
+                    <WorkflowRunForm
+                      script={script}
+                      busy={isBusy}
+                      onSubmit={(args) => props.onRun(script, args)}
+                    />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </>
+      )}
+
+      <div className="text-muted pt-1 text-center text-[11.5px]">
+        Or start one from chat with{" "}
+        <span className="border-border bg-surface-secondary rounded border px-1.5 py-px font-mono">
+          /
+        </span>
+        , or author one in <span className="text-content-secondary font-mono">.mux/workflows/</span>
+      </div>
+    </div>
+  );
+};
diff --git a/src/browser/features/RightSidebar/Workflows/WorkflowRunHeader.tsx b/src/browser/features/RightSidebar/Workflows/WorkflowRunHeader.tsx
new file mode 100644
index 0000000000..efc8904e2b
--- /dev/null
+++ b/src/browser/features/RightSidebar/Workflows/WorkflowRunHeader.tsx
@@ -0,0 +1,187 @@
+import React from "react";
+import { Check, Clock, Coins, Play, RotateCcw, Square, Workflow } from "lucide-react";
+
+import { useAPI } from "@/browser/contexts/API";
+import type { WorkflowRunRecord } from "@/common/types/workflow";
+import { canRetryWorkflowFromCheckpoint } from "@/common/utils/workflowRetryEligibility";
+
+import { WorkflowScopeBadge, WorkflowStatusPill } from "./WorkflowBadges";
+import type { WorkflowRunView } from "./projectWorkflowRun";
+import {
+  formatWorkflowCost,
+  formatWorkflowDuration,
+  formatWorkflowTokens,
+} from "./workflowDisplay";
+
+const BTN_BASE =
+  "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium transition-colors disabled:cursor-default disabled:opacity-50";
+const BTN_DEFAULT = `${BTN_BASE} border-border bg-surface-secondary text-foreground hover:bg-hover`;
+const BTN_ACCENT = `${BTN_BASE} border-accent bg-accent text-white hover:opacity-90`;
+
+/** Resolvable script path to re-invoke this run with, or null when the record stores none. */
+function runScriptPath(run: WorkflowRunRecord): string | null {
+  return (
+    run.workflow.canonicalScriptPath ??
+    run.workflow.sourcePath ??
+    run.workflow.requestedScriptPath ??
+    null
+  );
+}
+
+interface WorkflowRunHeaderProps {
+  workspaceId: string;
+  run: WorkflowRunRecord;
+  view: WorkflowRunView;
+  /** Bumped after a control action so the panel can refocus the (now-active) run. */
+  onAfterAction?: () => void;
+}
+
+export const WorkflowRunHeader: React.FC<WorkflowRunHeaderProps> = (props) => {
+  const { api } = useAPI();
+  const [busy, setBusy] = React.useState(false);
+  const [actionError, setActionError] = React.useState<string | null>(null);
+
+  const run = props.run;
+  const view = props.view;
+  const isLive = run.status === "running" || run.status === "backgrounded";
+  const canRetry = run.status === "failed" && canRetryWorkflowFromCheckpoint(run);
+  // Legacy/persisted records can lack a stored script path; workflows.start rejects a bare
+  // workflow name, so only offer Re-run when a resolvable path exists.
+  const rerunScriptPath = runScriptPath(run);
+  const canRerun = rerunScriptPath != null;
+
+  const runAction = async (action: () => Promise<unknown>) => {
+    if (api == null || busy) {
+      return;
+    }
+    setBusy(true);
+    setActionError(null);
+    try {
+      await action();
+      props.onAfterAction?.();
+    } catch (error) {
+      setActionError(error instanceof Error ? error.message : "Workflow action failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  // Click handlers return void (fire-and-forget into runAction, which owns the busy
+  // guard + error state) so they satisfy onClick's void-return contract.
+  const interrupt = () => {
+    void runAction(() =>
+      api!.workflows.interrupt({ workspaceId: props.workspaceId, runId: run.id })
+    );
+  };
+  const resume = () => {
+    void runAction(() => api!.workflows.resume({ workspaceId: props.workspaceId, runId: run.id }));
+  };
+  const retry = () => {
+    void runAction(() =>
+      api!.workflows.retryFromCheckpoint({ workspaceId: props.workspaceId, runId: run.id })
+    );
+  };
+  const rerun = () => {
+    if (rerunScriptPath == null) {
+      return;
+    }
+    void runAction(() =>
+      api!.workflows.start({
+        workspaceId: props.workspaceId,
+        scriptPath: rerunScriptPath,
+        args: run.args,
+        // Background the re-run so the action returns immediately; the new run streams
+        // into the tab via the subscription.
+        runInBackground: true,
+      })
+    );
+  };
+
+  return (
+    <div className="border-border flex flex-col gap-2.5 border-b pb-3.5">
+      <div className="flex items-center gap-2">
+        <span className="text-accent flex min-w-0 items-center gap-2">
+          <Workflow className="h-[15px] w-[15px] shrink-0" />
+          <span className="text-content-primary truncate text-[15px] font-semibold">
+            {run.workflow.name}
+          </span>
+          <WorkflowScopeBadge scope={run.workflow.scope} />
+        </span>
+        <span className="ml-auto">
+          <WorkflowStatusPill status={run.status} />
+        </span>
+      </div>
+
+      {view.argEntries.length > 0 && (
+        <div className="flex flex-col gap-1">
+          {view.argEntries.map((entry, index) => (
+            <div
+              key={entry.key ?? index}
+              className="border-border bg-surface-secondary text-content-secondary flex gap-1.5 rounded-md border px-2 py-1 text-xs"
+            >
+              {entry.key != null && (
+                <span className="text-muted shrink-0 font-mono text-[11px]">{entry.key}</span>
+              )}
+              {/* Wrap long values across lines so the full arg is visible, not truncated to one row. */}
+              <span className="min-w-0 break-words whitespace-pre-wrap">{entry.value}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="text-muted flex flex-wrap items-center gap-3 text-[11.5px] tabular-nums">
+        <span className="inline-flex items-center gap-1">
+          <Clock className="h-3 w-3" />
+          {formatWorkflowDuration(view.stats.elapsedMs)}
+          {isLive ? " elapsed" : ""}
+        </span>
+        <span className="inline-flex items-center gap-1">
+          <Check className="h-3 w-3" />
+          {view.stats.done}/{view.stats.total} steps
+        </span>
+        {view.stats.usage != null && (
+          <span className="inline-flex items-center gap-1">
+            <Coins className="h-3 w-3" />
+            {formatWorkflowTokens(view.stats.usage.tokens)} tok ·{" "}
+            {formatWorkflowCost(view.stats.usage.costUsd)}
+          </span>
+        )}
+        <span className="ml-auto font-mono text-[10.5px] opacity-70">{run.id}</span>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {isLive ? (
+          <button type="button" className={BTN_DEFAULT} onClick={interrupt} disabled={busy}>
+            <Square className="h-3 w-3" /> Interrupt
+          </button>
+        ) : run.status === "interrupted" ? (
+          <>
+            <button type="button" className={BTN_ACCENT} onClick={resume} disabled={busy}>
+              <Play className="h-3 w-3" /> Resume
+            </button>
+            {canRerun && (
+              <button type="button" className={BTN_DEFAULT} onClick={rerun} disabled={busy}>
+                <RotateCcw className="h-3 w-3" /> Re-run
+              </button>
+            )}
+          </>
+        ) : (
+          <>
+            {canRetry && (
+              <button type="button" className={BTN_ACCENT} onClick={retry} disabled={busy}>
+                <Play className="h-3 w-3" /> Retry from checkpoint
+              </button>
+            )}
+            {canRerun && (
+              <button type="button" className={BTN_DEFAULT} onClick={rerun} disabled={busy}>
+                <RotateCcw className="h-3 w-3" /> Re-run
+              </button>
+            )}
+          </>
+        )}
+      </div>
+
+      {actionError != null && <div className="text-danger text-xs">{actionError}</div>}
+    </div>
+  );
+};
diff --git a/src/browser/features/RightSidebar/Workflows/WorkflowRunHistory.tsx b/src/browser/features/RightSidebar/Workflows/WorkflowRunHistory.tsx
new file mode 100644
index 0000000000..b2c00f1756
--- /dev/null
+++ b/src/browser/features/RightSidebar/Workflows/WorkflowRunHistory.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { Check, History, Pause, X } from "lucide-react";
+
+import type { WorkflowRunRecord, WorkflowRunStatus } from "@/common/types/workflow";
+
+import { stringifyWorkflowArgValue } from "./projectWorkflowRun";
+import { WORKFLOW_STATUS_META, WORKFLOW_TONE_VAR, formatWorkflowTimeAgo } from "./workflowDisplay";
+
+function primaryArgValue(args: unknown): string {
+  if (args != null && typeof args === "object" && !Array.isArray(args)) {
+    const values = Object.values(args as Record<string, unknown>);
+    return values.length > 0 ? stringifyWorkflowArgValue(values[0]) : "";
+  }
+  return stringifyWorkflowArgValue(args);
+}
+
+const HistoryStatusIcon: React.FC<{ status: WorkflowRunStatus }> = (props) => {
+  const color = WORKFLOW_TONE_VAR[WORKFLOW_STATUS_META[props.status].tone];
+  if (props.status === "completed") {
+    return <Check className="h-3.5 w-3.5 shrink-0" style={{ color }} />;
+  }
+  if (props.status === "failed") {
+    return <X className="h-3.5 w-3.5 shrink-0" style={{ color }} />;
+  }
+  return <Pause className="h-3.5 w-3.5 shrink-0" style={{ color }} />;
+};
+
+interface WorkflowRunHistoryProps {
+  runs: WorkflowRunRecord[];
+  activeRunId: string | null;
+  onOpen: (run: WorkflowRunRecord) => void;
+}
+
+/** Compact, clickable list of prior runs (everything but the focused run). */
+export const WorkflowRunHistory: React.FC<WorkflowRunHistoryProps> = (props) => {
+  if (props.runs.length === 0) {
+    return null;
+  }
+  return (
+    <div className="flex flex-col gap-2 pt-1">
+      <div className="text-muted flex items-center gap-1.5 text-[11px] font-semibold tracking-wide uppercase">
+        <History className="h-3 w-3" /> Run history
+      </div>
+      <div className="flex flex-col gap-1">
+        {props.runs.map((run) => {
+          const isActive = run.id === props.activeRunId;
+          return (
+            <button
+              key={run.id}
+              type="button"
+              onClick={() => props.onOpen(run)}
+              className={`hover:bg-surface-secondary flex w-full items-center gap-2.5 rounded-lg border px-2.5 py-2 text-left transition-colors ${
+                isActive ? "border-border bg-surface-secondary" : "border-transparent"
+              }`}
+            >
+              <HistoryStatusIcon status={run.status} />
+              <span className="flex min-w-0 flex-1 flex-col">
+                <span className="text-content-primary truncate text-[12.5px] font-medium">
+                  {run.workflow.name}
+                </span>
+                <span className="text-muted truncate text-[11px]">{primaryArgValue(run.args)}</span>
+              </span>
+              <span className="text-muted shrink-0 text-[11px]">
+                {formatWorkflowTimeAgo(run.updatedAt)}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
diff --git a/src/browser/features/RightSidebar/Workflows/WorkflowTimeline.tsx b/src/browser/features/RightSidebar/Workflows/WorkflowTimeline.tsx
new file mode 100644
index 0000000000..39263ae20d
--- /dev/null
+++ b/src/browser/features/RightSidebar/Workflows/WorkflowTimeline.tsx
@@ -0,0 +1,379 @@
+import React from "react";
+import {
+  AlertTriangle,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  Coins,
+  FileText,
+  GitBranch,
+  Layers,
+  ListTree,
+  X,
+  Zap,
+} from "lucide-react";
+
+import { MarkdownRenderer } from "@/browser/features/Messages/MarkdownRenderer";
+import { WorkflowJsonBlock } from "@/browser/features/Tools/WorkflowToolShared";
+
+import { WorkflowLiveDot } from "./WorkflowBadges";
+import type { WorkflowPhaseView, WorkflowRunView, WorkflowStepView } from "./projectWorkflowRun";
+import {
+  WORKFLOW_TONE_VAR,
+  formatWorkflowCost,
+  formatWorkflowDuration,
+  formatWorkflowTokens,
+  getWorkflowStepTone,
+  hasDisplayableWorkflowReport,
+  workflowStructuredOutputEntries,
+} from "./workflowDisplay";
+
+const ASK_MODE_BORDER = "color-mix(in srgb, var(--color-ask-mode) 35%, transparent)";
+
+const WorkflowStepNode: React.FC<{ step: WorkflowStepView; color: string }> = (props) => {
+  if (props.step.status === "running") {
+    return <WorkflowLiveDot />;
+  }
+  if (props.step.status === "completed") {
+    return <Check className="h-2.5 w-2.5" style={{ color: props.color }} />;
+  }
+  if (props.step.status === "failed") {
+    return <X className="h-2.5 w-2.5" style={{ color: props.color }} />;
+  }
+  // interrupted
+  return <span className="h-1.5 w-1.5 rounded-full" style={{ background: props.color }} />;
+};
+
+/**
+ * Disclosure state that opens when `failed` is initially true AND auto-opens if the value
+ * transitions to true later — e.g. a live run whose phase/step fails after it first mounted while
+ * running, where a plain `useState(failed)` would keep the stale collapsed state. Uses React's
+ * "adjust state during render" pattern (no effect). The user can still collapse it afterward;
+ * only a fresh false→true transition forces it open.
+ */
+function useDisclosureOpenOnFailure(
+  failed: boolean
+): readonly [boolean, React.Dispatch<React.SetStateAction<boolean>>] {
+  const [open, setOpen] = React.useState(failed);
+  const [prevFailed, setPrevFailed] = React.useState(failed);
+  if (failed !== prevFailed) {
+    setPrevFailed(failed);
+    if (failed) {
+      setOpen(true);
+    }
+  }
+  return [open, setOpen] as const;
+}
+
+const WorkflowStepRow: React.FC<{ step: WorkflowStepView; isLast: boolean }> = (props) => {
+  const step = props.step;
+  const expandable = step.status === "completed" || step.status === "failed";
+  // Surface failures by default (including live failures that arrive after the row mounted while
+  // running); otherwise stay collapsed for scanability.
+  const [open, setOpen] = useDisclosureOpenOnFailure(step.status === "failed");
+  const color = WORKFLOW_TONE_VAR[getWorkflowStepTone(step.status)];
+  const showReport = hasDisplayableWorkflowReport(
+    step.result?.reportMarkdown,
+    step.result?.structuredOutput !== undefined
+  );
+
+  return (
+    <div className="flex gap-3">
+      <div className="relative flex w-[18px] shrink-0 flex-col items-center">
+        <span
+          className="bg-background z-10 mt-2 grid h-[17px] w-[17px] place-items-center rounded-full border"
+          style={{ borderColor: color }}
+        >
+          <WorkflowStepNode step={step} color={color} />
+        </span>
+        {!props.isLast && <span className="bg-border w-px flex-1" />}
+      </div>
+      <div className="min-w-0 flex-1 pt-0.5 pb-2">
+        <button
+          type="button"
+          disabled={!expandable}
+          onClick={() => setOpen((value) => !value)}
+          className="enabled:hover:bg-surface-secondary flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left disabled:cursor-default"
+          aria-expanded={expandable ? open : undefined}
+        >
+          <span className="text-foreground min-w-0 flex-1 truncate text-[13px]">{step.title}</span>
+          {step.status === "completed" && step.durationMs != null && (
+            <span className="text-muted shrink-0 text-[11px] tabular-nums">
+              {formatWorkflowDuration(step.durationMs)}
+            </span>
+          )}
+          {step.status === "running" && (
+            <span className="text-accent shrink-0 text-[11px]">running…</span>
+          )}
+          {step.status === "failed" && (
+            <span className="shrink-0 text-[11px]" style={{ color }}>
+              failed
+            </span>
+          )}
+          {expandable &&
+            (open ? (
+              <ChevronDown className="text-muted h-3 w-3 shrink-0" />
+            ) : (
+              <ChevronRight className="text-muted h-3 w-3 shrink-0" />
+            ))}
+        </button>
+
+        {open && expandable && (
+          <div className="border-border bg-surface-primary mx-2 mb-1.5 rounded-lg border p-3">
+            {step.status === "failed" ? (
+              <div className="flex gap-2 text-[12.5px] leading-relaxed" style={{ color }}>
+                <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                <span>{step.error ?? "Sub-agent failed"}</span>
+              </div>
+            ) : (
+              <>
+                {step.result?.title != null && step.result.title.length > 0 && (
+                  <div className="text-content-primary mb-1.5 text-xs font-semibold">
+                    {step.result.title}
+                  </div>
+                )}
+                {showReport && (
+                  <div className="text-content-secondary text-[12.5px]">
+                    <MarkdownRenderer content={step.result!.reportMarkdown} />
+                  </div>
+                )}
+                {step.result?.structuredOutput !== undefined && (
+                  <div className="mt-2.5 flex flex-col gap-1">
+                    <div className="text-muted text-[10px] font-semibold tracking-wide uppercase">
+                      Structured output
+                    </div>
+                    <WorkflowJsonBlock
+                      value={step.result.structuredOutput}
+                      className="max-h-[220px]"
+                      ariaLabel={`Structured output for ${step.title}`}
+                    />
+                  </div>
+                )}
+                <div className="border-border text-muted mt-2.5 flex flex-wrap gap-3 border-t pt-2 text-[11px] tabular-nums">
+                  {step.durationMs != null && (
+                    <span className="inline-flex items-center gap-1">
+                      <Clock className="h-3 w-3" /> {formatWorkflowDuration(step.durationMs)}
+                    </span>
+                  )}
+                  {step.usage?.tokens != null && (
+                    <span className="inline-flex items-center gap-1">
+                      <Zap className="h-3 w-3" /> {formatWorkflowTokens(step.usage.tokens)} tok
+                    </span>
+                  )}
+                  {step.usage?.costUsd != null && (
+                    <span className="inline-flex items-center gap-1">
+                      <Coins className="h-3 w-3" /> {formatWorkflowCost(step.usage.costUsd)}
+                    </span>
+                  )}
+                  {step.taskId != null && <span className="font-mono">task {step.taskId}</span>}
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const WorkflowPhaseSection: React.FC<{ phase: WorkflowPhaseView }> = (props) => {
+  const phase = props.phase;
+  const allDone = phase.total > 0 && phase.done === phase.total;
+  // Phase events can carry a structured `details` info object (e.g. {angleCount, maxSources}).
+  const detailObject =
+    phase.details != null && typeof phase.details === "object" ? phase.details : null;
+  const hasInfo = phase.detail != null || detailObject != null;
+  // The header collapses the whole phase body (its details + steps) in one click. Collapsed by
+  // default to keep a fanned-out run (20+ steps) scannable — except failed phases, which start
+  // open so the failure (and the failed step's error) is visible without a manual expand.
+  const hasBody = phase.steps.length > 0 || hasInfo;
+  const [open, setOpen] = useDisclosureOpenOnFailure(phase.failed);
+
+  const headerContent = (
+    <>
+      <span className="border-border bg-surface-secondary text-content-secondary grid h-[22px] w-[22px] shrink-0 place-items-center rounded-md border">
+        <Layers className="h-3 w-3" />
+      </span>
+      {phase.label.length > 0 && (
+        <span className="text-content-primary text-[13px] font-semibold">{phase.label}</span>
+      )}
+      {phase.total > 0 && (
+        <span className="text-muted text-[11px] tabular-nums">
+          {phase.done}/{phase.total}
+        </span>
+      )}
+      {phase.steps.length > 1 && (
+        <span
+          className="text-ask-mode inline-flex items-center gap-1 rounded border px-1.5 py-px text-[10px]"
+          style={{ borderColor: ASK_MODE_BORDER }}
+        >
+          <GitBranch className="h-2.5 w-2.5" /> parallel
+        </span>
+      )}
+      <span className="ml-auto flex items-center gap-1.5">
+        {phase.running ? (
+          <WorkflowLiveDot />
+        ) : phase.failed ? (
+          <AlertTriangle className="h-3 w-3" style={{ color: WORKFLOW_TONE_VAR.destructive }} />
+        ) : allDone ? (
+          <Check className="text-success h-3 w-3" />
+        ) : null}
+        {hasBody &&
+          (open ? (
+            <ChevronDown className="text-muted h-3 w-3" />
+          ) : (
+            <ChevronRight className="text-muted h-3 w-3" />
+          ))}
+      </span>
+    </>
+  );
+
+  return (
+    <div>
+      {hasBody ? (
+        <button
+          type="button"
+          onClick={() => setOpen((value) => !value)}
+          className="hover:bg-surface-secondary flex w-full items-center gap-2 rounded-md py-1.5 text-left"
+          aria-expanded={open}
+        >
+          {headerContent}
+        </button>
+      ) : (
+        <div className="flex items-center gap-2 py-1.5">{headerContent}</div>
+      )}
+      {open && hasInfo && (
+        <div className="mb-1.5 ml-[30px] flex flex-col gap-1">
+          {phase.detail != null && (
+            <div className="text-content-secondary text-[12px]">{phase.detail}</div>
+          )}
+          {detailObject != null && (
+            <WorkflowJsonBlock
+              value={detailObject}
+              className="max-h-[200px]"
+              ariaLabel={`${phase.label} details`}
+            />
+          )}
+        </div>
+      )}
+      {open && phase.steps.length > 0 && (
+        <div className="flex flex-col">
+          {phase.steps.map((step, index) => (
+            <WorkflowStepRow
+              key={step.stepId}
+              step={step}
+              isLast={index === phase.steps.length - 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const WorkflowFinalReport: React.FC<{ view: WorkflowRunView }> = (props) => {
+  // Collapsible (expanded by default) so a long report/structured output can be folded away.
+  const [open, setOpen] = React.useState(true);
+  const result = props.view.result;
+  if (result == null) {
+    return null;
+  }
+  const stats = workflowStructuredOutputEntries(result.structuredOutput);
+  const showReport = hasDisplayableWorkflowReport(
+    result.reportMarkdown,
+    result.structuredOutput !== undefined
+  );
+  // The full machine-readable result returned to the agent/model. Treat an explicit `null` as
+  // present (render it) — only `undefined` means "no structured output", matching the step
+  // renderer and chat card; `!= null` would hide a valid null output and leave an empty report.
+  const hasStructuredOutput = result.structuredOutput !== undefined;
+  return (
+    <div
+      className="bg-surface-primary flex flex-col gap-2.5 rounded-xl border p-3.5"
+      style={{ borderColor: "color-mix(in srgb, var(--color-success) 30%, var(--color-border))" }}
+    >
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="text-muted flex w-full items-center gap-1.5 text-[11px] font-semibold tracking-wide uppercase"
+        aria-expanded={open}
+      >
+        <FileText className="h-3 w-3" /> Final report
+        <span className="ml-auto">
+          {open ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+        </span>
+      </button>
+      {open && (
+        <>
+          {showReport && (
+            <div className="text-content-secondary text-[12.5px]">
+              <MarkdownRenderer content={result.reportMarkdown} />
+            </div>
+          )}
+          {stats.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {stats.map((stat) => (
+                <span
+                  key={stat.key}
+                  className="border-border bg-surface-secondary text-muted rounded-md border px-2 py-0.5 text-[11px] tabular-nums"
+                >
+                  <b className="text-content-primary font-semibold">{stat.value}</b> {stat.key}
+                </span>
+              ))}
+            </div>
+          )}
+          {hasStructuredOutput && (
+            <div className="flex flex-col gap-1">
+              <div className="text-muted text-[10px] font-semibold tracking-wide uppercase">
+                Structured output
+              </div>
+              <WorkflowJsonBlock
+                value={result.structuredOutput}
+                className="max-h-[280px]"
+                ariaLabel="Workflow structured output"
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+/** "Timeline" run body: a vertical stream of phases and their agent steps. */
+export const WorkflowTimeline: React.FC<{ view: WorkflowRunView }> = (props) => {
+  const view = props.view;
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Surface a run-level failure (e.g. setup/compile/eval errors that occur before any step)
+          so a failed run never shows just "No steps yet" with no reason. */}
+      {view.errorMessage != null && view.status === "failed" && (
+        <div
+          className="flex gap-2 rounded-lg border p-3 text-[12.5px] leading-relaxed"
+          style={{
+            color: WORKFLOW_TONE_VAR.destructive,
+            borderColor: "color-mix(in srgb, var(--color-danger) 35%, transparent)",
+            background: "color-mix(in srgb, var(--color-danger) 10%, transparent)",
+          }}
+        >
+          <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+          <span>{view.errorMessage}</span>
+        </div>
+      )}
+      <WorkflowFinalReport view={view} />
+      <div className="flex flex-col gap-1">
+        <div className="text-muted flex items-center gap-1.5 text-[11px] font-semibold tracking-wide uppercase">
+          <ListTree className="h-3 w-3" /> Step stream
+        </div>
+        {view.phases.length === 0 ? (
+          <div className="text-muted px-2 py-3 text-xs">No steps yet.</div>
+        ) : (
+          view.phases.map((phase) => (
+            <WorkflowPhaseSection key={phase.name || "__ungrouped"} phase={phase} />
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/src/browser/features/RightSidebar/Workflows/WorkflowsTab.tsx b/src/browser/features/RightSidebar/Workflows/WorkflowsTab.tsx
new file mode 100644
index 0000000000..9f9532c0f4
--- /dev/null
+++ b/src/browser/features/RightSidebar/Workflows/WorkflowsTab.tsx
@@ -0,0 +1,139 @@
+import React from "react";
+import { ChevronLeft } from "lucide-react";
+
+import { useAPI } from "@/browser/contexts/API";
+import type { AvailableWorkflow } from "@/common/types/workflow";
+
+import { WorkflowEmptyState } from "./WorkflowEmptyState";
+import { WorkflowRunHeader } from "./WorkflowRunHeader";
+import { WorkflowRunHistory } from "./WorkflowRunHistory";
+import { WorkflowTimeline } from "./WorkflowTimeline";
+import { projectWorkflowRun, selectPrimaryWorkflowRun } from "./projectWorkflowRun";
+import { useWorkflowRuns } from "./useWorkflowRuns";
+
+/**
+ * Right-sidebar Workflows tab: a live, scannable view of the workspace's
+ * durable workflow runs. Focuses the most recent active run by default; the
+ * run-history list lets the user pin any prior run into focus.
+ */
+export const WorkflowsTab: React.FC<{ workspaceId: string }> = (props) => {
+  const { api } = useAPI();
+  const { runs, loading, error } = useWorkflowRuns(props.workspaceId);
+  const [overrideRunId, setOverrideRunId] = React.useState<string | null>(null);
+  const [scripts, setScripts] = React.useState<AvailableWorkflow[]>([]);
+  const [busyScriptPath, setBusyScriptPath] = React.useState<string | null>(null);
+  const [runError, setRunError] = React.useState<string | null>(null);
+
+  // Discover runnable scripts for the empty-state list (one per workspace).
+  React.useEffect(() => {
+    // Reset launcher state first so a workspace switch never shows or launches a stale script
+    // from the previous workspace — including if the new fetch is still pending or fails.
+    setScripts([]);
+    setBusyScriptPath(null);
+    setRunError(null);
+    if (api == null) {
+      return;
+    }
+    let ignore = false;
+    api.workflows
+      .listScripts({ workspaceId: props.workspaceId })
+      .then((result) => {
+        if (!ignore) {
+          setScripts(result);
+        }
+      })
+      .catch(() => {
+        // Non-fatal: the empty state still renders, just without the script list.
+      });
+    return () => {
+      ignore = true;
+    };
+  }, [api, props.workspaceId]);
+
+  const runScript = async (script: AvailableWorkflow, args: Record<string, unknown>) => {
+    if (api == null || busyScriptPath != null) {
+      return;
+    }
+    setBusyScriptPath(script.scriptPath);
+    setRunError(null);
+    try {
+      await api.workflows.start({
+        workspaceId: props.workspaceId,
+        scriptPath: script.scriptPath,
+        args,
+        // Background the launch so the call returns immediately; the run then streams
+        // into the tab via the subscription and becomes the focused run.
+        runInBackground: true,
+      });
+      setOverrideRunId(null);
+    } catch (startError) {
+      setRunError(startError instanceof Error ? startError.message : "Failed to start workflow");
+    } finally {
+      setBusyScriptPath(null);
+    }
+  };
+
+  if (error != null) {
+    return <div className="text-danger text-sm">Failed to load workflows: {error}</div>;
+  }
+
+  if (loading && runs.length === 0) {
+    return <div className="text-muted text-sm">Loading workflow runs…</div>;
+  }
+
+  if (runs.length === 0) {
+    return (
+      <div className="flex flex-col gap-2">
+        {runError != null && <div className="text-danger text-xs">{runError}</div>}
+        <WorkflowEmptyState
+          scripts={scripts}
+          onRun={(script, args) => void runScript(script, args)}
+          busyScriptPath={busyScriptPath}
+        />
+      </div>
+    );
+  }
+
+  const overrideRun =
+    overrideRunId != null ? (runs.find((run) => run.id === overrideRunId) ?? null) : null;
+  const focusedRun = overrideRun ?? selectPrimaryWorkflowRun(runs);
+  const view = focusedRun != null ? projectWorkflowRun(focusedRun) : null;
+  const historyRuns = focusedRun != null ? runs.filter((run) => run.id !== focusedRun.id) : runs;
+
+  return (
+    <div className="flex flex-col gap-4">
+      {overrideRun != null && (
+        <button
+          type="button"
+          onClick={() => setOverrideRunId(null)}
+          className="border-border bg-surface-secondary text-content-secondary hover:bg-hover inline-flex w-fit items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors"
+        >
+          <ChevronLeft className="h-3 w-3" /> Back to current run
+        </button>
+      )}
+
+      {focusedRun != null && view != null && (
+        // Key by run id so switching runs gives the header/timeline fresh state — otherwise a
+        // prior run's action error or a same-named failed phase's collapsed disclosure state
+        // would carry over (and useDisclosureOpenOnFailure wouldn't auto-open the new failure).
+        <React.Fragment key={focusedRun.id}>
+          <WorkflowRunHeader
+            workspaceId={props.workspaceId}
+            run={focusedRun}
+            view={view}
+            onAfterAction={() => setOverrideRunId(null)}
+          />
+          <WorkflowTimeline view={view} />
+        </React.Fragment>
+      )}
+
+      {runError != null && <div className="text-danger text-xs">{runError}</div>}
+
+      <WorkflowRunHistory
+        runs={historyRuns}
+        activeRunId={overrideRun?.id ?? null}
+        onOpen={(run) => setOverrideRunId(run.id)}
+      />
+    </div>
+  );
+};
diff --git a/src/browser/features/RightSidebar/Workflows/projectWorkflowRun.test.ts b/src/browser/features/RightSidebar/Workflows/projectWorkflowRun.test.ts
new file mode 100644
index 0000000000..321dc46fb0
--- /dev/null
+++ b/src/browser/features/RightSidebar/Workflows/projectWorkflowRun.test.ts
@@ -0,0 +1,513 @@
+import { describe, expect, test } from "bun:test";
+
+import type {
+  WorkflowRunEvent,
+  WorkflowRunRecord,
+  WorkflowStepRecord,
+} from "@/common/types/workflow";
+import {
+  projectWorkflowRun,
+  selectPrimaryWorkflowRun,
+  type WorkflowStepUsage,
+} from "./projectWorkflowRun";
+
+const BASE = Date.parse("2026-06-23T14:31:00.000Z");
+const at = (seconds: number): string => new Date(BASE + seconds * 1000).toISOString();
+
+function makeRun(overrides: Partial<WorkflowRunRecord>): WorkflowRunRecord {
+  return {
+    id: "wfr_test",
+    workspaceId: "ws-main",
+    workflow: {
+      name: "deep-research",
+      description: "Fan out research, verify, synthesize.",
+      scope: "built-in",
+      sourcePath: "skill://deep-research/workflow.js",
+      sourceKind: "skill",
+      executable: true,
+    },
+    source: "export default function () {}",
+    sourceHash: "sha256:test",
+    args: { question: "What are the durability guarantees of JS workflows?" },
+    status: "running",
+    createdAt: at(0),
+    updatedAt: at(74),
+    events: [],
+    steps: [],
+    ...overrides,
+  };
+}
+
+// A representative in-flight deep-research run: scope → search-fetch (fan-out)
+// → verify (one still running) → synthesize (announced, no steps yet).
+function makeRunningResearchRun(): WorkflowRunRecord {
+  const events: WorkflowRunEvent[] = [
+    { sequence: 1, type: "status", at: at(1), status: "running" },
+    { sequence: 2, type: "phase", at: at(2), name: "Scope", details: "Decompose the question" },
+    {
+      sequence: 3,
+      type: "task",
+      at: at(2),
+      stepId: "scope",
+      taskId: "ws-scope",
+      status: "started",
+      title: "Scope research angles",
+    },
+    {
+      sequence: 4,
+      type: "task",
+      at: at(14),
+      stepId: "scope",
+      taskId: "ws-scope",
+      status: "completed",
+      title: "Scope research angles",
+    },
+    { sequence: 5, type: "phase", at: at(15), name: "Search & Fetch" },
+    {
+      sequence: 6,
+      type: "task",
+      at: at(15),
+      stepId: "search-1",
+      taskId: "ws-search-1",
+      status: "started",
+      title: "Search: Broad overview",
+    },
+    {
+      sequence: 7,
+      type: "task",
+      at: at(27),
+      stepId: "search-1",
+      taskId: "ws-search-1",
+      status: "completed",
+      title: "Search: Broad overview",
+    },
+    {
+      sequence: 8,
+      type: "task",
+      at: at(28),
+      stepId: "fetch-1a",
+      taskId: "ws-fetch-1a",
+      status: "started",
+      title: "Fetch: arxiv.org",
+    },
+    {
+      sequence: 9,
+      type: "task",
+      at: at(46),
+      stepId: "fetch-1a",
+      taskId: "ws-fetch-1a",
+      status: "completed",
+      title: "Fetch: arxiv.org",
+    },
+    { sequence: 10, type: "phase", at: at(53), name: "Verify" },
+    {
+      sequence: 11,
+      type: "task",
+      at: at(53),
+      stepId: "verify-1",
+      taskId: "ws-verify-1",
+      status: "started",
+      title: "Verify claim 1",
+    },
+    {
+      sequence: 12,
+      type: "task",
+      at: at(74),
+      stepId: "verify-1",
+      taskId: "ws-verify-1",
+      status: "completed",
+      title: "Verify claim 1",
+    },
+    {
+      sequence: 13,
+      type: "task",
+      at: at(53),
+      stepId: "verify-2",
+      taskId: "ws-verify-2",
+      status: "started",
+      title: "Verify claim 2",
+    },
+    // Synthesize phase announced before any of its steps start (pending phase).
+    { sequence: 14, type: "phase", at: at(81), name: "Synthesize" },
+  ];
+  const steps: WorkflowStepRecord[] = [
+    {
+      stepId: "scope",
+      inputHash: "h1",
+      status: "completed",
+      taskId: "ws-scope",
+      startedAt: at(2),
+      completedAt: at(14),
+      result: {
+        reportMarkdown: "5 angles",
+        title: "5 research angles",
+        structuredOutput: { angles: 5 },
+      },
+    },
+    {
+      stepId: "search-1",
+      inputHash: "h2",
+      status: "completed",
+      taskId: "ws-search-1",
+      startedAt: at(15),
+      completedAt: at(27),
+      result: { reportMarkdown: "6 results" },
+    },
+    {
+      stepId: "fetch-1a",
+      inputHash: "h3",
+      status: "completed",
+      taskId: "ws-fetch-1a",
+      startedAt: at(28),
+      completedAt: at(46),
+      result: { reportMarkdown: "4 claims" },
+    },
+    {
+      stepId: "verify-1",
+      inputHash: "h4",
+      status: "completed",
+      taskId: "ws-verify-1",
+      startedAt: at(53),
+      completedAt: at(74),
+      result: { reportMarkdown: "confirmed" },
+    },
+    {
+      stepId: "verify-2",
+      inputHash: "h5",
+      status: "started",
+      taskId: "ws-verify-2",
+      startedAt: at(53),
+    },
+  ];
+  return makeRun({ status: "running", events, steps, updatedAt: at(74) });
+}
+
+describe("projectWorkflowRun — phase grouping & step folding", () => {
+  const view = projectWorkflowRun(makeRunningResearchRun());
+
+  test("derives phases in declared order with labels from the phase name", () => {
+    expect(view.phases.map((phase) => phase.name)).toEqual([
+      "Scope",
+      "Search & Fetch",
+      "Verify",
+      "Synthesize",
+    ]);
+    expect(view.phases.map((phase) => phase.label)).toEqual([
+      "Scope",
+      "Search & Fetch",
+      "Verify",
+      "Synthesize",
+    ]);
+    expect(view.phases[0].detail).toBe("Decompose the question");
+    expect(view.phases[0].details).toBe("Decompose the question");
+  });
+
+  test("assigns each step to the phase current at its first task event", () => {
+    const phaseOf = (stepId: string) =>
+      view.steps.find((step) => step.stepId === stepId)?.phaseName;
+    expect(phaseOf("scope")).toBe("Scope");
+    expect(phaseOf("search-1")).toBe("Search & Fetch");
+    expect(phaseOf("fetch-1a")).toBe("Search & Fetch");
+    expect(phaseOf("verify-1")).toBe("Verify");
+    expect(phaseOf("verify-2")).toBe("Verify");
+  });
+
+  test("counts done/observed per phase and flags a running phase", () => {
+    const verify = view.phases.find((phase) => phase.name === "Verify");
+    expect(verify).toMatchObject({ done: 1, total: 2, running: true, failed: false });
+    expect(verify?.steps.map((step) => step.stepId)).toEqual(["verify-1", "verify-2"]);
+
+    // Announced-but-empty phase: no steps observed yet, so total is 0 (not "planned").
+    const synthesize = view.phases.find((phase) => phase.name === "Synthesize");
+    expect(synthesize).toMatchObject({ done: 0, total: 0, running: false });
+    expect(synthesize?.steps).toHaveLength(0);
+  });
+
+  test("maps the persisted 'started' status to 'running' and derives duration", () => {
+    const scope = view.steps.find((step) => step.stepId === "scope");
+    expect(scope?.status).toBe("completed");
+    expect(scope?.durationMs).toBe(12_000);
+
+    const verify2 = view.steps.find((step) => step.stepId === "verify-2");
+    expect(verify2?.status).toBe("running");
+    expect(verify2?.durationMs).toBeUndefined();
+  });
+
+  test("prefers the task-event title for each step", () => {
+    expect(view.steps.find((step) => step.stepId === "fetch-1a")?.title).toBe("Fetch: arxiv.org");
+  });
+
+  test("aggregates run stats and arg entries", () => {
+    expect(view.stats).toMatchObject({ total: 5, done: 4, running: 1, failed: 0 });
+    expect(view.stats.elapsedMs).toBe(74_000);
+    expect(view.argEntries).toEqual([
+      { key: "question", value: "What are the durability guarantees of JS workflows?" },
+    ]);
+    expect(view.result).toBeNull();
+  });
+});
+
+describe("projectWorkflowRun — phase details", () => {
+  test("preserves a phase's structured details object for the expandable info panel", () => {
+    const events: WorkflowRunEvent[] = [
+      {
+        sequence: 1,
+        type: "phase",
+        at: at(1),
+        name: "search-fetch",
+        details: { angleCount: 5, maxSources: 15 },
+      },
+      {
+        sequence: 2,
+        type: "task",
+        at: at(1),
+        stepId: "s1",
+        taskId: "ws-s1",
+        status: "started",
+        title: "Search",
+      },
+    ];
+    const steps: WorkflowStepRecord[] = [
+      { stepId: "s1", inputHash: "h", status: "started", taskId: "ws-s1", startedAt: at(1) },
+    ];
+    const phase = projectWorkflowRun(makeRun({ events, steps })).phases.find(
+      (candidate) => candidate.name === "search-fetch"
+    );
+    expect(phase?.details).toEqual({ angleCount: 5, maxSources: 15 });
+    // A structured object yields no human-readable `detail` string.
+    expect(phase?.detail).toBeUndefined();
+  });
+});
+
+describe("projectWorkflowRun — non-task step events", () => {
+  test("assigns phases to patch and nested-workflow steps, not only task steps", () => {
+    const events: WorkflowRunEvent[] = [
+      { sequence: 1, type: "phase", at: at(1), name: "apply" },
+      {
+        sequence: 2,
+        type: "patch",
+        at: at(1),
+        stepId: "patch-1",
+        sourceTaskId: "ws-src",
+        status: "started",
+      },
+      {
+        sequence: 3,
+        type: "patch",
+        at: at(4),
+        stepId: "patch-1",
+        sourceTaskId: "ws-src",
+        status: "applied",
+      },
+      { sequence: 4, type: "phase", at: at(5), name: "delegate" },
+      {
+        sequence: 5,
+        type: "workflow",
+        at: at(5),
+        stepId: "wf-1",
+        runId: "wfr_child01",
+        name: "deep-research",
+        status: "started",
+      },
+    ];
+    const steps: WorkflowStepRecord[] = [
+      {
+        stepId: "patch-1",
+        inputHash: "h",
+        status: "completed",
+        startedAt: at(1),
+        completedAt: at(4),
+      },
+      { stepId: "wf-1", inputHash: "h", status: "started", startedAt: at(5) },
+    ];
+    const view = projectWorkflowRun(makeRun({ events, steps }));
+
+    // Steps recorded via patch/workflow events still land in the active phase (regression:
+    // previously only task events seeded phase assignment, dropping these to "Other steps").
+    expect(view.steps.find((step) => step.stepId === "patch-1")?.phaseName).toBe("apply");
+    expect(view.steps.find((step) => step.stepId === "wf-1")?.phaseName).toBe("delegate");
+    // Nested-workflow steps take their title from the child workflow name.
+    expect(view.steps.find((step) => step.stepId === "wf-1")?.title).toBe("deep-research");
+    // Nothing falls into the implicit ungrouped bucket.
+    expect(view.phases.some((phase) => phase.name === "")).toBe(false);
+  });
+});
+
+describe("projectWorkflowRun — title & result fallbacks", () => {
+  test("falls back to result title, then stepId, when no task title exists", () => {
+    const events: WorkflowRunEvent[] = [
+      { sequence: 1, type: "phase", at: at(1), name: "Work" },
+      // task events without a title (legacy events)
+      { sequence: 2, type: "task", at: at(1), stepId: "a", taskId: "ws-a", status: "started" },
+      { sequence: 3, type: "task", at: at(5), stepId: "a", taskId: "ws-a", status: "completed" },
+      { sequence: 4, type: "task", at: at(1), stepId: "b", taskId: "ws-b", status: "started" },
+    ];
+    const steps: WorkflowStepRecord[] = [
+      {
+        stepId: "a",
+        inputHash: "h",
+        status: "completed",
+        taskId: "ws-a",
+        startedAt: at(1),
+        completedAt: at(5),
+        result: { reportMarkdown: "x", title: "Result A title" },
+      },
+      { stepId: "b", inputHash: "h", status: "started", taskId: "ws-b", startedAt: at(1) },
+    ];
+    const view = projectWorkflowRun(makeRun({ events, steps }));
+    expect(view.steps.find((step) => step.stepId === "a")?.title).toBe("Result A title");
+    expect(view.steps.find((step) => step.stepId === "b")?.title).toBe("b");
+  });
+});
+
+describe("projectWorkflowRun — terminal states", () => {
+  test("extracts the final report and surfaces a step failure", () => {
+    const events: WorkflowRunEvent[] = [
+      { sequence: 1, type: "phase", at: at(1), name: "Search & Fetch" },
+      {
+        sequence: 2,
+        type: "task",
+        at: at(1),
+        stepId: "fetch",
+        taskId: "ws-fetch",
+        status: "started",
+        title: "Fetch: ieee.org",
+      },
+      {
+        sequence: 3,
+        type: "task",
+        at: at(8),
+        stepId: "fetch",
+        taskId: "ws-fetch",
+        status: "failed",
+        title: "Fetch: ieee.org",
+      },
+      { sequence: 4, type: "error", at: at(8), message: "web_fetch timed out after 30s" },
+      { sequence: 5, type: "status", at: at(8), status: "failed" },
+    ];
+    const steps: WorkflowStepRecord[] = [
+      {
+        stepId: "fetch",
+        inputHash: "h",
+        status: "failed",
+        taskId: "ws-fetch",
+        startedAt: at(1),
+        completedAt: at(8),
+        error: "web_fetch timed out after 30s (ieee.org 403)",
+      },
+    ];
+    const view = projectWorkflowRun(makeRun({ status: "failed", events, steps, updatedAt: at(8) }));
+
+    expect(view.stats).toMatchObject({ total: 1, done: 0, failed: 1, running: 0 });
+    expect(view.phases[0]).toMatchObject({ name: "Search & Fetch", failed: true });
+    expect(view.steps[0]).toMatchObject({
+      status: "failed",
+      error: "web_fetch timed out after 30s (ieee.org 403)",
+    });
+    expect(view.errorMessage).toBe("web_fetch timed out after 30s");
+    expect(view.result).toBeNull();
+  });
+
+  test("uses the last result event when several are present", () => {
+    const events: WorkflowRunEvent[] = [
+      { sequence: 1, type: "result", at: at(1), result: { reportMarkdown: "draft" } },
+      {
+        sequence: 2,
+        type: "result",
+        at: at(2),
+        result: { reportMarkdown: "final", structuredOutput: { findings: 4 } },
+      },
+      { sequence: 3, type: "status", at: at(2), status: "completed" },
+    ];
+    const view = projectWorkflowRun(makeRun({ status: "completed", events, updatedAt: at(2) }));
+    expect(view.result).toEqual({ reportMarkdown: "final", structuredOutput: { findings: 4 } });
+  });
+});
+
+describe("projectWorkflowRun — phase-less & arg shapes", () => {
+  test("renders steps in a single flat group when no phase was announced", () => {
+    const events: WorkflowRunEvent[] = [
+      {
+        sequence: 1,
+        type: "task",
+        at: at(1),
+        stepId: "only",
+        taskId: "ws-only",
+        status: "completed",
+        title: "Do it",
+      },
+    ];
+    const steps: WorkflowStepRecord[] = [
+      {
+        stepId: "only",
+        inputHash: "h",
+        status: "completed",
+        taskId: "ws-only",
+        startedAt: at(1),
+        completedAt: at(3),
+      },
+    ];
+    const view = projectWorkflowRun(makeRun({ events, steps }));
+    expect(view.phases).toHaveLength(1);
+    expect(view.phases[0]).toMatchObject({ name: "", label: "Steps" });
+    expect(view.steps[0].phaseName).toBeNull();
+  });
+
+  test("represents a primitive positional arg as a single keyless entry", () => {
+    const view = projectWorkflowRun(makeRun({ args: 3541 }));
+    expect(view.argEntries).toEqual([{ key: null, value: "3541" }]);
+  });
+
+  test("represents an empty/absent arg object as no entries", () => {
+    expect(projectWorkflowRun(makeRun({ args: {} })).argEntries).toEqual([]);
+  });
+});
+
+describe("projectWorkflowRun — usage overlay", () => {
+  test("attaches per-step usage by taskId and sums the run total", () => {
+    const usageByTaskId = new Map<string, WorkflowStepUsage>([
+      ["ws-scope", { tokens: 18_400, costUsd: 0.07 }],
+      ["ws-verify-1", { tokens: 22_100, costUsd: 0.11 }],
+    ]);
+    const view = projectWorkflowRun(makeRunningResearchRun(), { usageByTaskId });
+
+    expect(view.steps.find((step) => step.stepId === "scope")?.usage).toEqual({
+      tokens: 18_400,
+      costUsd: 0.07,
+    });
+    // A step whose task has no usage entry stays undefined.
+    expect(view.steps.find((step) => step.stepId === "fetch-1a")?.usage).toBeUndefined();
+    expect(view.stats.usage?.tokens).toBe(40_500);
+    expect(view.stats.usage?.costUsd).toBeCloseTo(0.18, 5);
+  });
+
+  test("omits run usage entirely when no overlay is supplied", () => {
+    expect(projectWorkflowRun(makeRunningResearchRun()).stats.usage).toBeUndefined();
+  });
+});
+
+describe("selectPrimaryWorkflowRun", () => {
+  const run = (id: string, status: WorkflowRunRecord["status"], updatedAt: string) => ({
+    id,
+    status,
+    updatedAt,
+  });
+
+  test("prefers the most recently updated active run over terminal runs", () => {
+    const runs = [
+      run("done-recent", "completed", at(100)),
+      run("running-old", "running", at(10)),
+      run("bg-newer", "backgrounded", at(20)),
+    ];
+    expect(selectPrimaryWorkflowRun(runs)?.id).toBe("bg-newer");
+  });
+
+  test("falls back to the most recently updated run when none are active", () => {
+    const runs = [run("old", "completed", at(10)), run("new", "failed", at(50))];
+    expect(selectPrimaryWorkflowRun(runs)?.id).toBe("new");
+  });
+
+  test("returns null for an empty list", () => {
+    expect(selectPrimaryWorkflowRun([])).toBeNull();
+  });
+});
diff --git a/src/browser/features/RightSidebar/Workflows/projectWorkflowRun.ts b/src/browser/features/RightSidebar/Workflows/projectWorkflowRun.ts
new file mode 100644
index 0000000000..8e39b49bf7
--- /dev/null
+++ b/src/browser/features/RightSidebar/Workflows/projectWorkflowRun.ts
@@ -0,0 +1,392 @@
+/**
+ * Projects a durable `WorkflowRunRecord` into the view-model the Workflows tab
+ * renders (the "Timeline" layout: phases → steps).
+ *
+ * Why a projector: the persisted run record is intentionally lean. A
+ * `WorkflowStepRecord` carries only `{ stepId, status, taskId, timestamps,
+ * result, error }` — it has no phase, title, or per-step usage. Those are
+ * reconstructed here from the ordered event log:
+ *   - phase grouping comes from `phase` events (a step belongs to the phase
+ *     that was current at its first `task` event, by sequence);
+ *   - the step title comes from its `task` event (falling back to the step's
+ *     result title, then the stepId);
+ *   - duration is derived from the step timestamps;
+ *   - per-step token/cost usage is an optional overlay (a step's `taskId` is
+ *     the child task workspace id, so the caller can resolve usage by task id).
+ *
+ * Keeping this pure (no React, no IPC) makes the non-trivial folding logic unit
+ * testable and keeps the components dumb.
+ */
+import {
+  isActiveWorkflowRunStatus,
+  type StructuredTaskOutput,
+  type WorkflowResult,
+  type WorkflowRunEvent,
+  type WorkflowRunRecord,
+  type WorkflowRunStatus,
+  type WorkflowStepStatus,
+} from "@/common/types/workflow";
+
+/** UI-facing step status. The persisted "started" maps to "running". */
+export type WorkflowStepDisplayStatus = "running" | "completed" | "failed" | "interrupted";
+
+export interface WorkflowStepUsage {
+  tokens?: number;
+  costUsd?: number;
+}
+
+export interface WorkflowStepView {
+  stepId: string;
+  /** Child task workspace id, when the step spawned a sub-agent. */
+  taskId?: string;
+  status: WorkflowStepDisplayStatus;
+  /** Human title (task title or nested-workflow name → step result title → stepId). */
+  title: string;
+  /** Owning phase name, or null when no phase was announced before the step. */
+  phaseName: string | null;
+  startedAt: string;
+  completedAt?: string;
+  /** Wall-clock duration once the step has settled. */
+  durationMs?: number;
+  result?: StructuredTaskOutput;
+  error?: string;
+  /** Optional usage overlay resolved from the step's task workspace. */
+  usage?: WorkflowStepUsage;
+}
+
+export interface WorkflowPhaseView {
+  /** Phase id; "" for the implicit bucket holding steps with no announced phase. */
+  name: string;
+  label: string;
+  detail?: string;
+  /** Raw `details` from the phase event — often a structured info object the UI can expand. */
+  details?: unknown;
+  steps: WorkflowStepView[];
+  /** Completed steps observed so far in this phase. */
+  done: number;
+  /**
+   * Steps observed so far in this phase. NOT the eventual count: the run record
+   * never declares how many steps a phase will ultimately spawn, so totals grow
+   * as steps start. Render as "done / observed", not "done / planned".
+   */
+  total: number;
+  running: boolean;
+  failed: boolean;
+}
+
+export interface WorkflowRunStats {
+  total: number;
+  done: number;
+  running: number;
+  failed: number;
+  /** updatedAt − createdAt; the components can show a live ticker on top. */
+  elapsedMs: number;
+  /** Aggregate usage, present only when a usage overlay was supplied. */
+  usage?: WorkflowStepUsage;
+}
+
+export interface WorkflowArgEntry {
+  /** null for a single positional/primitive arg with no name. */
+  key: string | null;
+  value: string;
+}
+
+export interface WorkflowRunView {
+  id: string;
+  workflow: WorkflowRunRecord["workflow"];
+  status: WorkflowRunStatus;
+  argEntries: WorkflowArgEntry[];
+  createdAt: string;
+  updatedAt: string;
+  phases: WorkflowPhaseView[];
+  steps: WorkflowStepView[];
+  /** Final report, present once a `result` event has been recorded. */
+  result: WorkflowResult | null;
+  /** Last `error` event message — surfaces a run-level failure with no step error. */
+  errorMessage: string | null;
+  stats: WorkflowRunStats;
+}
+
+export interface ProjectWorkflowRunOptions {
+  /** Per-task usage keyed by the step's `taskId` (child task workspace id). */
+  usageByTaskId?: ReadonlyMap<string, WorkflowStepUsage>;
+}
+
+const STEP_STATUS_TO_DISPLAY: Record<WorkflowStepStatus, WorkflowStepDisplayStatus> = {
+  started: "running",
+  completed: "completed",
+  failed: "failed",
+  interrupted: "interrupted",
+};
+
+function parseTime(iso: string): number {
+  const value = Date.parse(iso);
+  return Number.isFinite(value) ? value : 0;
+}
+
+/** Render an arbitrary workflow arg value for display (primitives verbatim, else JSON). */
+export function stringifyWorkflowArgValue(value: unknown): string {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (value == null) {
+    return "";
+  }
+  try {
+    return JSON.stringify(value) ?? "";
+  } catch {
+    return "[unserializable]";
+  }
+}
+
+function deriveArgEntries(args: unknown): WorkflowArgEntry[] {
+  if (args != null && typeof args === "object" && !Array.isArray(args)) {
+    return Object.entries(args as Record<string, unknown>).map(([key, value]) => ({
+      key,
+      value: stringifyWorkflowArgValue(value),
+    }));
+  }
+  const value = stringifyWorkflowArgValue(args);
+  return value.length > 0 ? [{ key: null, value }] : [];
+}
+
+// Phase events carry a freeform `details` JSON value; pull a human detail string
+// out of it when present (string, or an object with a detail-ish field).
+function derivePhaseDetail(details: unknown): string | undefined {
+  if (typeof details === "string") {
+    return details.length > 0 ? details : undefined;
+  }
+  if (details != null && typeof details === "object" && !Array.isArray(details)) {
+    const record = details as Record<string, unknown>;
+    for (const key of ["detail", "description", "summary"]) {
+      const candidate = record[key];
+      if (typeof candidate === "string" && candidate.length > 0) {
+        return candidate;
+      }
+    }
+  }
+  return undefined;
+}
+
+function buildPhaseView(
+  name: string,
+  label: string,
+  detail: string | undefined,
+  details: unknown,
+  steps: WorkflowStepView[]
+): WorkflowPhaseView {
+  return {
+    name,
+    label,
+    detail,
+    details,
+    steps,
+    done: steps.filter((step) => step.status === "completed").length,
+    total: steps.length,
+    running: steps.some((step) => step.status === "running"),
+    failed: steps.some((step) => step.status === "failed"),
+  };
+}
+
+// Events that belong to a step. Steps are recorded via task events (agent steps) and also via
+// patch (apply-patch), workflow (nested-workflow), and legacy action/validation events. Phase
+// assignment keys off the first of ANY of these per stepId so every step lands in its phase.
+function stepBearingEventStepId(event: WorkflowRunEvent): string | null {
+  switch (event.type) {
+    case "task":
+    case "workflow":
+    case "patch":
+    case "action":
+    case "validation":
+      return event.stepId;
+    default:
+      return null;
+  }
+}
+
+export function projectWorkflowRun(
+  run: WorkflowRunRecord,
+  options: ProjectWorkflowRunOptions = {}
+): WorkflowRunView {
+  const events = run.events;
+
+  // Named phases in first-appearance order, plus an ordered index of phase
+  // changes so each step can be assigned the phase current at its first task.
+  const phaseOrder: string[] = [];
+  const phaseMeta = new Map<string, { label: string; detail?: string; details?: unknown }>();
+  const phaseChanges: Array<{ sequence: number; name: string }> = [];
+  for (const event of events) {
+    if (event.type === "phase") {
+      if (!phaseMeta.has(event.name)) {
+        phaseOrder.push(event.name);
+        phaseMeta.set(event.name, {
+          label: event.name,
+          detail: derivePhaseDetail(event.details),
+          details: event.details,
+        });
+      }
+      phaseChanges.push({ sequence: event.sequence, name: event.name });
+    }
+  }
+
+  // First step-bearing event sequence + title per step. A step can be recorded via task,
+  // patch, workflow, action, or validation events, so phase assignment must use whichever of
+  // those comes first — keying only off task events would drop patch/nested-workflow steps into
+  // the ungrouped bucket even when a phase was active.
+  const stepFirstEventSeq = new Map<string, number>();
+  const stepTitle = new Map<string, string>();
+  for (const event of events) {
+    const stepId = stepBearingEventStepId(event);
+    if (stepId == null) {
+      continue;
+    }
+    if (!stepFirstEventSeq.has(stepId)) {
+      stepFirstEventSeq.set(stepId, event.sequence);
+    }
+    if (!stepTitle.has(stepId)) {
+      if (event.type === "task" && event.title != null && event.title.length > 0) {
+        stepTitle.set(stepId, event.title);
+      } else if (event.type === "workflow") {
+        // Nested-workflow steps have no task title; use the child workflow's name.
+        stepTitle.set(stepId, event.name);
+      }
+    }
+  }
+
+  // phaseChanges is already in ascending sequence order (event order).
+  const phaseAtSequence = (sequence: number): string | null => {
+    let current: string | null = null;
+    for (const change of phaseChanges) {
+      if (change.sequence <= sequence) {
+        current = change.name;
+      } else {
+        break;
+      }
+    }
+    return current;
+  };
+
+  const usageByTaskId = options.usageByTaskId;
+
+  const steps: WorkflowStepView[] = run.steps.map((step) => {
+    const startSequence = stepFirstEventSeq.get(step.stepId);
+    const phaseName = startSequence != null ? phaseAtSequence(startSequence) : null;
+    const durationMs =
+      step.completedAt != null
+        ? Math.max(0, parseTime(step.completedAt) - parseTime(step.startedAt))
+        : undefined;
+    const usage = step.taskId != null ? usageByTaskId?.get(step.taskId) : undefined;
+    return {
+      stepId: step.stepId,
+      taskId: step.taskId,
+      status: STEP_STATUS_TO_DISPLAY[step.status],
+      title: stepTitle.get(step.stepId) ?? step.result?.title ?? step.stepId,
+      phaseName,
+      startedAt: step.startedAt,
+      completedAt: step.completedAt,
+      durationMs,
+      result: step.result,
+      error: step.error,
+      usage,
+    };
+  });
+
+  // Group steps by phase, preserving declared phase order.
+  const stepsByPhase = new Map<string | null, WorkflowStepView[]>();
+  for (const step of steps) {
+    const bucket = stepsByPhase.get(step.phaseName);
+    if (bucket != null) {
+      bucket.push(step);
+    } else {
+      stepsByPhase.set(step.phaseName, [step]);
+    }
+  }
+
+  const phases: WorkflowPhaseView[] = [];
+  for (const name of phaseOrder) {
+    const meta = phaseMeta.get(name);
+    phases.push(
+      buildPhaseView(
+        name,
+        meta?.label ?? name,
+        meta?.detail,
+        meta?.details,
+        stepsByPhase.get(name) ?? []
+      )
+    );
+  }
+  const ungrouped = stepsByPhase.get(null) ?? [];
+  if (ungrouped.length > 0) {
+    // Steps with no announced phase precede the named phases chronologically. When
+    // the run declares no phases at all, this is the sole flat group.
+    const label = phaseOrder.length === 0 ? "Steps" : "Other steps";
+    phases.unshift(buildPhaseView("", label, undefined, undefined, ungrouped));
+  }
+
+  let result: WorkflowResult | null = null;
+  let errorMessage: string | null = null;
+  for (const event of events) {
+    if (event.type === "result") {
+      result = event.result;
+    } else if (event.type === "error") {
+      errorMessage = event.message;
+    }
+  }
+
+  let usageTotal: WorkflowStepUsage | undefined;
+  if (usageByTaskId != null) {
+    let tokens = 0;
+    let costUsd = 0;
+    let hasUsage = false;
+    for (const step of steps) {
+      if (step.usage == null) {
+        continue;
+      }
+      tokens += step.usage.tokens ?? 0;
+      costUsd += step.usage.costUsd ?? 0;
+      hasUsage = true;
+    }
+    if (hasUsage) {
+      usageTotal = { tokens, costUsd };
+    }
+  }
+
+  return {
+    id: run.id,
+    workflow: run.workflow,
+    status: run.status,
+    argEntries: deriveArgEntries(run.args),
+    createdAt: run.createdAt,
+    updatedAt: run.updatedAt,
+    phases,
+    steps,
+    result,
+    errorMessage,
+    stats: {
+      total: steps.length,
+      done: steps.filter((step) => step.status === "completed").length,
+      running: steps.filter((step) => step.status === "running").length,
+      failed: steps.filter((step) => step.status === "failed").length,
+      elapsedMs: Math.max(0, parseTime(run.updatedAt) - parseTime(run.createdAt)),
+      usage: usageTotal,
+    },
+  };
+}
+
+/**
+ * Picks the run the tab should focus by default: the most recently updated
+ * active (pending/running/backgrounded) run, else the most recently updated run.
+ */
+export function selectPrimaryWorkflowRun<
+  T extends Pick<WorkflowRunRecord, "id" | "status" | "updatedAt">,
+>(runs: readonly T[]): T | null {
+  if (runs.length === 0) {
+    return null;
+  }
+  const active = runs.filter((run) => isActiveWorkflowRunStatus(run.status));
+  const pool = active.length > 0 ? active : runs;
+  return [...pool].sort((a, b) => parseTime(b.updatedAt) - parseTime(a.updatedAt))[0] ?? null;
+}
diff --git a/src/browser/features/RightSidebar/Workflows/useWorkflowRuns.ts b/src/browser/features/RightSidebar/Workflows/useWorkflowRuns.ts
new file mode 100644
index 0000000000..cd8255d6a2
--- /dev/null
+++ b/src/browser/features/RightSidebar/Workflows/useWorkflowRuns.ts
@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react";
+
+import { useAPI } from "@/browser/contexts/API";
+import { isAbortError } from "@/browser/utils/isAbortError";
+import type { WorkflowRunRecord, WorkflowRunStreamEvent } from "@/common/types/workflow";
+import { assertNever } from "@/common/utils/assertNever";
+
+export interface UseWorkflowRunsResult {
+  /** Top-level runs for the workspace, most-recently-updated first. */
+  runs: WorkflowRunRecord[];
+  /** True until the first snapshot arrives. */
+  loading: boolean;
+  error: string | null;
+}
+
+function recency(run: WorkflowRunRecord): number {
+  const value = Date.parse(run.updatedAt);
+  return Number.isFinite(value) ? value : 0;
+}
+
+/**
+ * Live workflow-run feed for one workspace. Subscribes to `workflows.subscribe`
+ * (snapshot + per-write deltas) and keeps a local id→record map in sync, so the
+ * tab reflects step/status progress in real time without polling. Mirrors
+ * `useDevToolsSubscription`.
+ */
+export function useWorkflowRuns(workspaceId: string): UseWorkflowRunsResult {
+  const { api } = useAPI();
+  const [runsById, setRunsById] = useState<Map<string, WorkflowRunRecord>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!api) {
+      setRunsById(new Map());
+      setLoading(false);
+      return;
+    }
+
+    setRunsById(new Map());
+    setLoading(true);
+    setError(null);
+
+    const controller = new AbortController();
+    const { signal } = controller;
+    let iterator: AsyncIterator<WorkflowRunStreamEvent> | null = null;
+
+    const subscribe = async () => {
+      const subscribedIterator = await api.workflows.subscribe({ workspaceId }, { signal });
+      if (signal.aborted) {
+        void subscribedIterator.return?.();
+        return;
+      }
+      iterator = subscribedIterator;
+
+      for await (const event of subscribedIterator) {
+        if (signal.aborted) {
+          break;
+        }
+        switch (event.type) {
+          case "snapshot":
+            setRunsById(new Map(event.runs.map((run) => [run.id, run])));
+            setLoading(false);
+            break;
+          case "run-changed":
+            setRunsById((previous) => {
+              const next = new Map(previous);
+              next.set(event.run.id, event.run);
+              return next;
+            });
+            break;
+          default:
+            assertNever(event);
+        }
+      }
+    };
+
+    subscribe().catch((subscriptionError: unknown) => {
+      if (signal.aborted || isAbortError(subscriptionError)) {
+        return;
+      }
+      setError(
+        subscriptionError instanceof Error
+          ? subscriptionError.message
+          : "Workflow subscription failed"
+      );
+      setLoading(false);
+    });
+
+    return () => {
+      controller.abort();
+      void iterator?.return?.();
+    };
+  }, [api, workspaceId]);
+
+  // React Compiler memoizes this derivation; no manual useMemo needed.
+  const runs = [...runsById.values()].sort((a, b) => recency(b) - recency(a));
+  return { runs, loading, error };
+}
diff --git a/src/browser/features/RightSidebar/Workflows/workflowDisplay.test.ts b/src/browser/features/RightSidebar/Workflows/workflowDisplay.test.ts
new file mode 100644
index 0000000000..86501ad5c1
--- /dev/null
+++ b/src/browser/features/RightSidebar/Workflows/workflowDisplay.test.ts
@@ -0,0 +1,101 @@
+import { describe, expect, test } from "bun:test";
+
+import { STRUCTURED_WORKFLOW_REPORT_PLACEHOLDER_MARKDOWN } from "@/common/constants/workflowReports";
+import {
+  formatWorkflowCost,
+  formatWorkflowDuration,
+  formatWorkflowTimeAgo,
+  formatWorkflowTokens,
+  hasDisplayableWorkflowReport,
+  workflowStructuredOutputEntries,
+} from "./workflowDisplay";
+
+describe("formatWorkflowDuration", () => {
+  test("sub-minute durations render as seconds", () => {
+    expect(formatWorkflowDuration(12_000)).toBe("12s");
+    expect(formatWorkflowDuration(0)).toBe("0s");
+  });
+  test("minute-plus durations render as minutes and seconds", () => {
+    expect(formatWorkflowDuration(72_000)).toBe("1m 12s");
+    expect(formatWorkflowDuration(125_000)).toBe("2m 5s");
+  });
+  test("missing duration renders an em dash", () => {
+    expect(formatWorkflowDuration(null)).toBe("—");
+    expect(formatWorkflowDuration(undefined)).toBe("—");
+  });
+});
+
+describe("formatWorkflowTokens", () => {
+  test("keeps one decimal under 10k and drops it at/above 10k", () => {
+    expect(formatWorkflowTokens(950)).toBe("950");
+    expect(formatWorkflowTokens(9_200)).toBe("9.2k");
+    expect(formatWorkflowTokens(41_000)).toBe("41k");
+  });
+  test("missing token count renders an em dash", () => {
+    expect(formatWorkflowTokens(null)).toBe("—");
+  });
+});
+
+describe("formatWorkflowCost", () => {
+  test("collapses tiny positive costs to a threshold label", () => {
+    expect(formatWorkflowCost(0.004)).toBe("$<0.01");
+  });
+  test("formats normal costs with two decimals", () => {
+    expect(formatWorkflowCost(0.11)).toBe("$0.11");
+    expect(formatWorkflowCost(0)).toBe("$0.00");
+  });
+  test("missing cost renders an em dash", () => {
+    expect(formatWorkflowCost(null)).toBe("—");
+  });
+});
+
+describe("formatWorkflowTimeAgo", () => {
+  const now = Date.parse("2026-06-23T14:33:00.000Z");
+  test("buckets by minute / hour / day relative to now", () => {
+    expect(formatWorkflowTimeAgo("2026-06-23T14:32:40.000Z", now)).toBe("just now");
+    expect(formatWorkflowTimeAgo("2026-06-23T14:28:00.000Z", now)).toBe("5m ago");
+    expect(formatWorkflowTimeAgo("2026-06-23T11:33:00.000Z", now)).toBe("3h ago");
+    expect(formatWorkflowTimeAgo("2026-06-21T14:33:00.000Z", now)).toBe("2d ago");
+  });
+});
+
+describe("hasDisplayableWorkflowReport", () => {
+  test("suppresses the structured-output placeholder but keeps real markdown", () => {
+    expect(
+      hasDisplayableWorkflowReport(STRUCTURED_WORKFLOW_REPORT_PLACEHOLDER_MARKDOWN, true)
+    ).toBe(false);
+    // The same placeholder is worth showing when there's no structured output to stand in for it.
+    expect(
+      hasDisplayableWorkflowReport(STRUCTURED_WORKFLOW_REPORT_PLACEHOLDER_MARKDOWN, false)
+    ).toBe(true);
+    expect(hasDisplayableWorkflowReport("## Findings\n- real", true)).toBe(true);
+  });
+  test("treats empty / missing markdown as non-displayable", () => {
+    expect(hasDisplayableWorkflowReport("", false)).toBe(false);
+    expect(hasDisplayableWorkflowReport("   ", false)).toBe(false);
+    expect(hasDisplayableWorkflowReport(null, false)).toBe(false);
+  });
+});
+
+describe("workflowStructuredOutputEntries", () => {
+  test("keeps primitive entries and drops nested/array values", () => {
+    expect(
+      workflowStructuredOutputEntries({
+        findings: 4,
+        confirmed: true,
+        label: "x",
+        nested: { a: 1 },
+        list: [1],
+      })
+    ).toEqual([
+      { key: "findings", value: "4" },
+      { key: "confirmed", value: "true" },
+      { key: "label", value: "x" },
+    ]);
+  });
+  test("returns nothing for non-object inputs", () => {
+    expect(workflowStructuredOutputEntries(null)).toEqual([]);
+    expect(workflowStructuredOutputEntries([1, 2])).toEqual([]);
+    expect(workflowStructuredOutputEntries("nope")).toEqual([]);
+  });
+});
diff --git a/src/browser/features/RightSidebar/Workflows/workflowDisplay.ts b/src/browser/features/RightSidebar/Workflows/workflowDisplay.ts
new file mode 100644
index 0000000000..0035e3a2d3
--- /dev/null
+++ b/src/browser/features/RightSidebar/Workflows/workflowDisplay.ts
@@ -0,0 +1,144 @@
+/**
+ * Presentation helpers for the Workflows tab: status → label/tone mapping, tone
+ * → token color, and the small formatters the run header / timeline share.
+ * Pure (no JSX) so it can be imported anywhere and unit tested.
+ */
+import { STRUCTURED_WORKFLOW_REPORT_PLACEHOLDER_MARKDOWN } from "@/common/constants/workflowReports";
+import type { WorkflowRunStatus } from "@/common/types/workflow";
+import type { WorkflowStepDisplayStatus } from "./projectWorkflowRun";
+
+export type WorkflowTone = "muted" | "running" | "warning" | "success" | "destructive";
+
+export interface WorkflowStatusMeta {
+  label: string;
+  tone: WorkflowTone;
+}
+
+export const WORKFLOW_STATUS_META: Record<WorkflowRunStatus, WorkflowStatusMeta> = {
+  pending: { label: "Pending", tone: "muted" },
+  running: { label: "Running", tone: "running" },
+  backgrounded: { label: "Backgrounded", tone: "warning" },
+  interrupted: { label: "Interrupted", tone: "warning" },
+  completed: { label: "Completed", tone: "success" },
+  failed: { label: "Failed", tone: "destructive" },
+};
+
+/**
+ * Tone → CSS custom property. Colored chrome (pills, status dots, rail nodes)
+ * uses these vars directly via inline style / color-mix so the accent reads
+ * correctly across themes — never hardcoded hex.
+ */
+export const WORKFLOW_TONE_VAR: Record<WorkflowTone, string> = {
+  muted: "var(--color-muted)",
+  running: "var(--color-accent)",
+  warning: "var(--color-warning)",
+  success: "var(--color-success)",
+  destructive: "var(--color-danger)",
+};
+
+export function getWorkflowStepTone(status: WorkflowStepDisplayStatus): WorkflowTone {
+  switch (status) {
+    case "running":
+      return "running";
+    case "completed":
+      return "success";
+    case "failed":
+      return "destructive";
+    case "interrupted":
+      return "warning";
+  }
+}
+
+/** "12s" / "1m 12s"; em dash when unknown. */
+export function formatWorkflowDuration(ms: number | null | undefined): string {
+  if (ms == null) {
+    return "—";
+  }
+  const totalSeconds = Math.max(0, Math.round(ms / 1000));
+  if (totalSeconds < 60) {
+    return `${totalSeconds}s`;
+  }
+  const minutes = Math.floor(totalSeconds / 60);
+  return `${minutes}m ${totalSeconds % 60}s`;
+}
+
+/** Compact token count: 9.2k / 41k. */
+export function formatWorkflowTokens(tokens: number | null | undefined): string {
+  if (tokens == null) {
+    return "—";
+  }
+  if (tokens >= 1000) {
+    return `${(tokens / 1000).toFixed(tokens >= 10_000 ? 0 : 1)}k`;
+  }
+  return String(tokens);
+}
+
+export function formatWorkflowCost(costUsd: number | null | undefined): string {
+  if (costUsd == null) {
+    return "—";
+  }
+  if (costUsd > 0 && costUsd < 0.01) {
+    return "$<0.01";
+  }
+  return `$${costUsd.toFixed(2)}`;
+}
+
+/** Coarse relative time for run-history rows ("just now" / "5m ago" / "3h ago" / "2d ago"). */
+export function formatWorkflowTimeAgo(iso: string, now: number = Date.now()): string {
+  const then = Date.parse(iso);
+  if (!Number.isFinite(then)) {
+    return "";
+  }
+  const minutes = Math.round((now - then) / 60_000);
+  if (minutes < 1) {
+    return "just now";
+  }
+  if (minutes < 60) {
+    return `${minutes}m ago`;
+  }
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    return `${hours}h ago`;
+  }
+  return `${Math.floor(hours / 24)}d ago`;
+}
+
+/**
+ * Whether a report's markdown is worth rendering. Schema-shaped agent reports
+ * carry only `structuredOutput` plus a placeholder markdown for backend
+ * compatibility — rendering that placeholder would be noise, so suppress it when
+ * structured output is present. Mirrors WorkflowRunToolCall's gating.
+ */
+export function hasDisplayableWorkflowReport(
+  reportMarkdown: string | null | undefined,
+  hasStructuredOutput: boolean
+): reportMarkdown is string {
+  if (reportMarkdown == null) {
+    return false;
+  }
+  const trimmed = reportMarkdown.trim();
+  if (trimmed.length === 0) {
+    return false;
+  }
+  return !(trimmed === STRUCTURED_WORKFLOW_REPORT_PLACEHOLDER_MARKDOWN && hasStructuredOutput);
+}
+
+/** Structured-output entries that are safe to render as compact stat chips. */
+export function workflowStructuredOutputEntries(
+  structuredOutput: unknown
+): Array<{ key: string; value: string }> {
+  if (
+    structuredOutput == null ||
+    typeof structuredOutput !== "object" ||
+    Array.isArray(structuredOutput)
+  ) {
+    return [];
+  }
+  const entries: Array<{ key: string; value: string }> = [];
+  for (const [key, value] of Object.entries(structuredOutput as Record<string, unknown>)) {
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      entries.push({ key, value: String(value) });
+    }
+  }
+  return entries;
+}
diff --git a/src/browser/features/Tools/WorkflowRunToolCall.test.tsx b/src/browser/features/Tools/WorkflowRunToolCall.test.tsx
index ed456ecb88..1fb13e3a65 100644
--- a/src/browser/features/Tools/WorkflowRunToolCall.test.tsx
+++ b/src/browser/features/Tools/WorkflowRunToolCall.test.tsx
@@ -103,6 +103,14 @@ void mock.module("@/browser/components/Dialog/Dialog", () => ({
   ),
 }));
 
+// WorkflowRunToolCall reads the dynamic-workflows experiment to decide whether to auto-collapse.
+// Force it off so these tests are hermetic: in the full bun-test suite, cross-file experiment
+// state (shared happy-dom localStorage) can otherwise flip the card to collapsed and hide the
+// expanded content these tests assert.
+void mock.module("@/browser/contexts/ExperimentsContext", () => ({
+  useExperimentValue: () => false,
+}));
+
 import { WorkflowResumeToolCall, WorkflowRunToolCall } from "./WorkflowRunToolCall";
 
 function APIHarness(props: { client: unknown; children: ReactNode }) {
diff --git a/src/browser/features/Tools/WorkflowRunToolCall.tsx b/src/browser/features/Tools/WorkflowRunToolCall.tsx
index 9ee576ad53..ba8721eb19 100644
--- a/src/browser/features/Tools/WorkflowRunToolCall.tsx
+++ b/src/browser/features/Tools/WorkflowRunToolCall.tsx
@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
 
 import { APIContext, type APIClient } from "@/browser/contexts/API";
+import { useExperimentValue } from "@/browser/contexts/ExperimentsContext";
 import {
   Dialog,
   DialogContent,
@@ -13,6 +14,7 @@ import {
   useOptionalCommandRegistry,
   type CommandAction,
 } from "@/browser/contexts/CommandRegistryContext";
+import { EXPERIMENT_IDS } from "@/common/constants/experiments";
 import { STRUCTURED_WORKFLOW_REPORT_PLACEHOLDER_MARKDOWN } from "@/common/constants/workflowReports";
 import type {
   WorkflowRunEvent,
@@ -817,8 +819,6 @@ function WorkflowTaskRow(props: {
   );
 }
 
-const AUTO_COLLAPSE_WORKFLOW_STATUSES = new Set(["completed"]);
-
 const REFRESHING_WORKFLOW_STATUSES = new Set(["pending", "running", "backgrounded"]);
 
 const FOREGROUND_WORKFLOW_DISCOVERY_SKEW_MS = 1_000;
@@ -1017,15 +1017,22 @@ export const WorkflowRunToolCall: React.FC<WorkflowRunToolCallProps> = ({
   const displayRows = getWorkflowDisplayRows(events);
   const headerStatus = toToolStatus(displayStatus);
   const workspaceStore = useWorkspaceStoreRaw();
+  // The Workflows right-sidebar tab (gated on the dynamic-workflows experiment) is the primary
+  // surface for run detail, so when it's available the in-chat card is redundant.
+  const workflowsTabEnabled = useExperimentValue(EXPERIMENT_IDS.DYNAMIC_WORKFLOWS);
   const {
     expanded,
     setLocalExpanded,
     toggleExpanded,
     markInteracted: markExpansionInteracted,
   } = useAutoCollapsingToolExpansion(true, {
-    // Completed workflow runs can contain large reports and event logs. Collapse them for
-    // scanability without persisting that automatic presentation choice as user intent.
-    autoCollapsed: AUTO_COLLAPSE_WORKFLOW_STATUSES.has(displayStatus),
+    // With the Workflows tab available (dynamic-workflows experiment on), auto-collapse the
+    // in-chat card for ANY status — the tab is the primary detail surface. Without the tab,
+    // preserve the prior behavior of auto-collapsing only completed runs (which can carry large
+    // reports/event logs). But never auto-collapse a tool-error card: pre-run failures (invalid
+    // args / unresolved script path) create no durable run, so the Workflows tab has nothing to
+    // show and the failure reason lives only here. Manual expansion always wins, per run.
+    autoCollapsed: (workflowsTabEnabled || displayStatus === "completed") && errorResult == null,
     resetKey: runId,
   });
 
diff --git a/src/common/orpc/schemas.ts b/src/common/orpc/schemas.ts
index 3fce929ab0..1597178de0 100644
--- a/src/common/orpc/schemas.ts
+++ b/src/common/orpc/schemas.ts
@@ -106,6 +106,7 @@ export {
 
 // Workflow schemas
 export {
+  AvailableWorkflowSchema,
   JsonValueSchema,
   StructuredTaskOutputSchema,
   WorkflowArgSummarySchema,
@@ -121,6 +122,7 @@ export {
   WorkflowRunRecordSchema,
   WorkflowRunStatusSchema,
   WorkflowRunStatusTransitionSchema,
+  WorkflowRunStreamEventSchema,
   WorkflowStepRecordSchema,
   WorkflowStepStatusSchema,
 } from "./schemas/workflow";
diff --git a/src/common/orpc/schemas/api.ts b/src/common/orpc/schemas/api.ts
index 9e3d9595cd..0fa37dee67 100644
--- a/src/common/orpc/schemas/api.ts
+++ b/src/common/orpc/schemas/api.ts
@@ -78,7 +78,13 @@ import {
   AgentSkillPackageSchema,
   SkillNameSchema,
 } from "./agentSkill";
-import { WorkflowRunIdSchema, WorkflowRunRecordSchema, WorkflowRunStatusSchema } from "./workflow";
+import {
+  AvailableWorkflowSchema,
+  WorkflowRunIdSchema,
+  WorkflowRunRecordSchema,
+  WorkflowRunStatusSchema,
+  WorkflowRunStreamEventSchema,
+} from "./workflow";
 import {
   AgentDefinitionDescriptorSchema,
   AgentDefinitionPackageSchema,
@@ -1846,6 +1852,14 @@ export const workflows = {
       invocationMessagePersisted: z.boolean().optional(),
     }),
   },
+  subscribe: {
+    input: z.object({ workspaceId: z.string().min(1) }).strict(),
+    output: eventIterator(WorkflowRunStreamEventSchema),
+  },
+  listScripts: {
+    input: z.object({ workspaceId: z.string().min(1) }).strict(),
+    output: z.array(AvailableWorkflowSchema),
+  },
 };
 
 // Name generation for new workspaces (decoupled from workspace creation)
diff --git a/src/common/orpc/schemas/workflow.ts b/src/common/orpc/schemas/workflow.ts
index 11d572140e..75864e73d8 100644
--- a/src/common/orpc/schemas/workflow.ts
+++ b/src/common/orpc/schemas/workflow.ts
@@ -253,3 +253,26 @@ export const WorkflowRunRecordSchema = z.object({
   events: WorkflowEventSequenceSchema,
   steps: z.array(WorkflowStepRecordSchema),
 });
+
+// Live stream events for `workflows.subscribe`: an initial snapshot of all
+// top-level runs, then a full-record delta whenever any run is persisted. The
+// client upserts by id, so a snapshot followed by an in-flight delta converges.
+export const WorkflowRunStreamEventSchema = z.discriminatedUnion("type", [
+  z.object({
+    type: z.literal("snapshot"),
+    runs: z.array(WorkflowRunRecordSchema),
+  }),
+  z.object({
+    type: z.literal("run-changed"),
+    run: WorkflowRunRecordSchema,
+  }),
+]);
+
+// A workflow script available to run in a workspace, with its declared args, for
+// the Workflows tab's empty-state launcher. `scriptPath` is the canonical path
+// to pass back to `workflows.start`.
+export const AvailableWorkflowSchema = z.object({
+  descriptor: WorkflowScriptDescriptorSchema,
+  scriptPath: z.string().min(1),
+  args: z.array(WorkflowArgSummarySchema),
+});
diff --git a/src/common/types/workflow.ts b/src/common/types/workflow.ts
index 9f60f2430d..51dd9e55dd 100644
--- a/src/common/types/workflow.ts
+++ b/src/common/types/workflow.ts
@@ -1,5 +1,6 @@
 import type { z } from "zod";
 import type {
+  AvailableWorkflowSchema,
   StructuredTaskOutputSchema,
   WorkflowArgSummarySchema,
   WorkflowScriptDescriptorSchema,
@@ -12,6 +13,7 @@ import type {
   WorkflowRunParentSchema,
   WorkflowRunRecordSchema,
   WorkflowRunStatusSchema,
+  WorkflowRunStreamEventSchema,
   WorkflowStepRecordSchema,
   WorkflowStepStatusSchema,
 } from "@/common/orpc/schemas";
@@ -32,6 +34,8 @@ export type WorkflowRunEvent = z.infer<typeof WorkflowRunEventSchema>;
 export type WorkflowStepRecord = z.infer<typeof WorkflowStepRecordSchema>;
 export type WorkflowRunParent = z.infer<typeof WorkflowRunParentSchema>;
 export type WorkflowRunRecord = z.infer<typeof WorkflowRunRecordSchema>;
+export type WorkflowRunStreamEvent = z.infer<typeof WorkflowRunStreamEventSchema>;
+export type AvailableWorkflow = z.infer<typeof AvailableWorkflowSchema>;
 
 const ACTIVE_WORKFLOW_RUN_STATUSES = new Set<WorkflowRunStatus>([
   "pending",
diff --git a/src/node/orpc/router.ts b/src/node/orpc/router.ts
index 3cf99bd4b3..b6b81fc19d 100644
--- a/src/node/orpc/router.ts
+++ b/src/node/orpc/router.ts
@@ -102,6 +102,7 @@ import * as fsPromises from "fs/promises";
 import * as path from "node:path";
 
 import type { DevToolsEvent } from "@/common/types/devtools";
+import type { WorkflowRunStreamEvent } from "@/common/types/workflow";
 import type { MuxMessage } from "@/common/types/message";
 import { coerceThinkingLevel } from "@/common/types/thinking";
 import { normalizeLegacyMuxMetadata } from "@/node/utils/messages/legacy";
@@ -115,6 +116,8 @@ import {
 import { getErrorMessage } from "@/common/utils/errors";
 import { CHAT_FILE_NAME, CHAT_ARCHIVE_FILE_NAME } from "@/common/constants/paths";
 import { WorkflowRunStore } from "@/node/services/workflows/WorkflowRunStore";
+import { workflowRunStreamHub } from "@/node/services/workflows/workflowRunStreamHub";
+import { discoverWorkflowScripts } from "@/node/services/workflows/workflowScriptDiscovery";
 import {
   WorkflowService,
   type WorkflowBackgroundRunTerminalEvent,
@@ -2049,6 +2052,104 @@ export const router = (authToken?: string) => {
           }
           return { ...result, invocationMessagePersisted };
         }),
+      // Live run stream for the Workflows tab. Mirrors devtools.subscribe (queue +
+      // resolve-next async generator). The event source is the module-level
+      // workflowRunStreamHub, fed by WorkflowRunStore on every durable write, so
+      // updates surface regardless of which flow is executing the run.
+      subscribe: t
+        .input(schemas.workflows.subscribe.input)
+        .output(schemas.workflows.subscribe.output)
+        .handler(async function* ({ context, input, signal }) {
+          assertDynamicWorkflowsEnabled(context);
+          let resolveNext: ((value: WorkflowRunStreamEvent | null) => void) | null = null;
+          const queue: WorkflowRunStreamEvent[] = [];
+          let ended = false;
+
+          const push = (event: WorkflowRunStreamEvent) => {
+            if (ended) {
+              return;
+            }
+            if (resolveNext) {
+              const resolve = resolveNext;
+              resolveNext = null;
+              resolve(event);
+              return;
+            }
+            queue.push(event);
+          };
+
+          // Register before snapshotting so writes between the two are queued, not dropped.
+          // Only top-level runs are surfaced (mirrors listRuns); nested child runs are an
+          // implementation detail of their parent.
+          const unsubscribe = workflowRunStreamHub.subscribe(input.workspaceId, (run) => {
+            if (run.parentWorkflow != null) {
+              return;
+            }
+            push({ type: "run-changed", run });
+          });
+
+          const onAbort = () => {
+            if (ended) {
+              return;
+            }
+            ended = true;
+            if (resolveNext) {
+              const resolve = resolveNext;
+              resolveNext = null;
+              resolve(null);
+            }
+          };
+
+          if (signal) {
+            if (signal.aborted) {
+              onAbort();
+            } else {
+              signal.addEventListener("abort", onAbort, { once: true });
+            }
+          }
+
+          try {
+            const { service, projectTrusted } = await resolveWorkflowContext(
+              context,
+              input.workspaceId
+            );
+            await service.resumeCrashedRuns({ workspaceId: input.workspaceId, projectTrusted });
+            const runs = await service.listRuns({ workspaceId: input.workspaceId });
+            yield { type: "snapshot", runs };
+
+            while (!ended) {
+              const queuedEvent = queue.shift();
+              if (queuedEvent) {
+                yield queuedEvent;
+                continue;
+              }
+
+              const event = await new Promise<WorkflowRunStreamEvent | null>((resolve) => {
+                resolveNext = resolve;
+              });
+
+              if (event == null || ended) {
+                break;
+              }
+
+              yield event;
+            }
+          } finally {
+            ended = true;
+            signal?.removeEventListener("abort", onAbort);
+            unsubscribe();
+          }
+        }),
+      listScripts: t
+        .input(schemas.workflows.listScripts.input)
+        .output(schemas.workflows.listScripts.output)
+        .handler(async ({ context, input }) => {
+          const { runtime, workspacePath, projectTrusted } = await resolveWorkflowContext(
+            context,
+            input.workspaceId
+          );
+          return discoverWorkflowScripts({ runtime, workspacePath, projectTrusted });
+        }),
     },
     providers: {
       list: t
diff --git a/src/node/services/workflows/WorkflowRunStore.ts b/src/node/services/workflows/WorkflowRunStore.ts
index d9f779b756..041d06987e 100644
--- a/src/node/services/workflows/WorkflowRunStore.ts
+++ b/src/node/services/workflows/WorkflowRunStore.ts
@@ -26,6 +26,7 @@ import {
 import assert from "@/common/utils/assert";
 import { getErrorMessage } from "@/common/utils/errors";
 import { log } from "@/node/services/log";
+import { workflowRunStreamHub } from "@/node/services/workflows/workflowRunStreamHub";
 
 const WorkflowRunStatusSnapshotSchema = WorkflowRunRecordSchema.pick({
   id: true,
@@ -952,6 +953,10 @@ export class WorkflowRunStore {
   private async writeRunFile(runId: string, run: WorkflowRunRecord): Promise<void> {
     const runForDisk = WorkflowRunRecordSchema.parse(run);
     await writeJsonAtomic(this.runFile(runId), runForDisk);
+    // Notify live subscribers (workflows.subscribe) after the durable write. The hub is a
+    // module-level bus, so any store instance — regardless of which flow constructed it —
+    // feeds the same stream. Persist-before-notify keeps disk and observers consistent.
+    workflowRunStreamHub.notifyRunPersisted(runForDisk);
   }
 
   getStepArtifactsDir(runId: string, stepId: string, inputHash: string): string {
diff --git a/src/node/services/workflows/WorkflowService.ts b/src/node/services/workflows/WorkflowService.ts
index c4a9acbda4..0b63b60f12 100644
--- a/src/node/services/workflows/WorkflowService.ts
+++ b/src/node/services/workflows/WorkflowService.ts
@@ -890,7 +890,9 @@ export class WorkflowService {
   }
 }
 
-function buildWorkflowScriptDescriptor(script: ResolvedWorkflowScript): WorkflowScriptDescriptor {
+export function buildWorkflowScriptDescriptor(
+  script: ResolvedWorkflowScript
+): WorkflowScriptDescriptor {
   return {
     name: getWorkflowScriptDefinitionName(script),
     description:
diff --git a/src/node/services/workflows/workflowRunStreamHub.ts b/src/node/services/workflows/workflowRunStreamHub.ts
new file mode 100644
index 0000000000..444201b686
--- /dev/null
+++ b/src/node/services/workflows/workflowRunStreamHub.ts
@@ -0,0 +1,43 @@
+import { EventEmitter } from "node:events";
+
+import type { WorkflowRunRecord } from "@/common/types/workflow";
+
+/**
+ * Process-wide pub/sub for workflow run mutations.
+ *
+ * `WorkflowRunStore` is constructed per workspace in many call sites (the oRPC
+ * router, the CLI, the Workflow tool running inside a chat turn via aiService,
+ * taskService, crash recovery, …), so there is no single service instance the
+ * `workflows.subscribe` stream could listen to. Instead every store writes
+ * through the one `writeRunFile` choke-point and notifies this module-level
+ * hub, which the subscribe handler listens to — decoupling "who ran the
+ * workflow" from "who is watching it".
+ */
+class WorkflowRunStreamHub extends EventEmitter {
+  constructor() {
+    super();
+    // Each open Workflows tab adds a listener; lift Node's default 10-listener cap so
+    // many concurrent subscribers don't trip a spurious leak warning.
+    this.setMaxListeners(0);
+  }
+
+  private channel(workspaceId: string): string {
+    return `run:${workspaceId}`;
+  }
+
+  /** Called by WorkflowRunStore after every durable run write. */
+  notifyRunPersisted(run: WorkflowRunRecord): void {
+    this.emit(this.channel(run.workspaceId), run);
+  }
+
+  /** Subscribe to run changes for one workspace; returns an unsubscribe fn. */
+  subscribe(workspaceId: string, listener: (run: WorkflowRunRecord) => void): () => void {
+    const channel = this.channel(workspaceId);
+    this.on(channel, listener);
+    return () => {
+      this.off(channel, listener);
+    };
+  }
+}
+
+export const workflowRunStreamHub = new WorkflowRunStreamHub();
diff --git a/src/node/services/workflows/workflowScriptDiscovery.ts b/src/node/services/workflows/workflowScriptDiscovery.ts
new file mode 100644
index 0000000000..86b0daf79c
--- /dev/null
+++ b/src/node/services/workflows/workflowScriptDiscovery.ts
@@ -0,0 +1,78 @@
+import type { AgentSkillDescriptor, SkillName } from "@/common/types/agentSkill";
+import type { AvailableWorkflow } from "@/common/types/workflow";
+import { getErrorMessage } from "@/common/utils/errors";
+import type { Runtime } from "@/node/runtime/Runtime";
+import { discoverAgentSkills } from "@/node/services/agentSkills/agentSkillsService";
+import { getBuiltInSkillDescriptors } from "@/node/services/agentSkills/builtInSkillDefinitions";
+import { log } from "@/node/services/log";
+
+import { buildWorkflowScriptDescriptor } from "./WorkflowService";
+import { parseWorkflowMetadata, summarizeWorkflowArgs } from "./workflowMetadata";
+import { resolveWorkflowScript } from "./workflowScriptResolver";
+
+/** Conventional entry file for a workflow-bearing skill (e.g. deep-research). */
+const WORKFLOW_SKILL_ENTRY = "workflow.js";
+
+export interface DiscoverWorkflowScriptsInput {
+  runtime: Runtime;
+  workspacePath: string;
+  projectTrusted: boolean;
+}
+
+/**
+ * Enumerate the workflow scripts a workspace can run, for the Workflows tab's
+ * empty-state launcher. There is no first-class workflow registry, so we probe
+ * every known skill (built-in + project + global) for a `workflow.js` entry by
+ * attempting to resolve it — a skill that resolves is a workflow; anything that
+ * throws (no entry, or project trust missing) is skipped.
+ *
+ * Standalone `.mux/workflows/*.js` files are intentionally not enumerated here:
+ * they're an advanced, trust-gated path still launchable from chat. Skill-based
+ * workflows cover the common case.
+ */
+export async function discoverWorkflowScripts(
+  input: DiscoverWorkflowScriptsInput
+): Promise<AvailableWorkflow[]> {
+  const skillNames: SkillName[] = [];
+  const seen = new Set<string>();
+  const addSkill = (descriptor: AgentSkillDescriptor) => {
+    if (!seen.has(descriptor.name)) {
+      seen.add(descriptor.name);
+      skillNames.push(descriptor.name);
+    }
+  };
+
+  // Built-ins aren't part of discoverAgentSkills' project/global scan, so seed them first;
+  // readAgentSkill resolves by precedence (project > global > built-in) when names collide.
+  getBuiltInSkillDescriptors().forEach(addSkill);
+  try {
+    (await discoverAgentSkills(input.runtime, input.workspacePath)).forEach(addSkill);
+  } catch (error) {
+    log.warn(`Workflow script discovery: failed to enumerate skills: ${getErrorMessage(error)}`);
+  }
+
+  const available: AvailableWorkflow[] = [];
+  for (const skillName of skillNames) {
+    try {
+      const resolved = await resolveWorkflowScript({
+        scriptPath: `skill://${skillName}/${WORKFLOW_SKILL_ENTRY}`,
+        runtime: input.runtime,
+        workspacePath: input.workspacePath,
+        projectTrusted: input.projectTrusted,
+      });
+      available.push({
+        descriptor: buildWorkflowScriptDescriptor(resolved),
+        scriptPath: resolved.canonicalScriptPath,
+        args: summarizeWorkflowArgs(parseWorkflowMetadata(resolved.source)) ?? [],
+      });
+    } catch {
+      // Skip non-workflow skills (no workflow.js), untrusted project skills, AND scripts whose
+      // arg metadata fails to parse/summarize — keeping the whole body in the per-skill catch so
+      // one malformed workflow can't abort discovery and hide every other workflow.
+      continue;
+    }
+  }
+
+  available.sort((a, b) => a.descriptor.name.localeCompare(b.descriptor.name));
+  return available;
+}