@revenexx/studio-integrations 0.1.4 → 0.3.0

package/dist/runtime/components/Integrations/WorkflowRunReplayPanel.vue

@@ -0,0 +1,654 @@
+<script setup>
+import { computed, markRaw, nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from "vue";
+import {
+  MarkerType,
+  PanOnScrollMode,
+  VueFlow,
+  useVueFlow
+} from "@vue-flow/core";
+import { Background } from "@vue-flow/background";
+import {
+  AltArrowLeft as Prev,
+  AltArrowRight as Next,
+  Play,
+  Pause,
+  RefreshCircle as Loader2,
+  ClockCircle as Clock,
+  LinkRound as Webhook
+} from "#solar-icons";
+import { Badge, Button } from "@revenexx/studio";
+import { toast } from "vue-sonner";
+import "@vue-flow/core/dist/style.css";
+import "@vue-flow/core/dist/theme-default.css";
+import WorkflowNodeView from "./WorkflowNodeView.vue";
+import NodeDynamicOutputsResolver from "./NodeDynamicOutputsResolver.vue";
+import WorkflowTriggerView from "./WorkflowTriggerView.vue";
+import StickyNoteView from "./StickyNoteView.vue";
+import GroupFrameView from "./GroupFrameView.vue";
+import WorkflowEdgeView from "./WorkflowEdgeView.vue";
+import { findManifest } from "../../data/integrationNodeCatalog";
+import { runStatusLabel, statusClass } from "../../utils/statusStyle";
+const props = defineProps({
+  workflow: { type: Object, required: true },
+  initialRunId: { type: [String, null], required: false },
+  single: { type: Boolean, required: false }
+});
+const { loadForWorkflow, getSteps } = useIntegrationsRuns();
+const TERMINAL = /* @__PURE__ */ new Set(["completed", "succeeded", "failed", "cancelled", "terminated"]);
+const STEPS_POLL_MS = 4e3;
+const PLAY_INTERVAL_MS = 3e3;
+const runs = ref([]);
+const runsPage = ref(1);
+const runsLastPage = ref(1);
+const runsLoading = ref(false);
+const selectedRunId = ref(null);
+async function loadRuns(reset = false) {
+  if (runsLoading.value) return;
+  runsLoading.value = true;
+  try {
+    const res = await loadForWorkflow(props.workflow.id, props.workflow.name, {
+      page: reset ? 1 : runsPage.value,
+      reconcile: true
+    });
+    runs.value = reset ? res.runs : [...runs.value, ...res.runs];
+    runsPage.value = res.page;
+    runsLastPage.value = res.lastPage;
+  } catch (e) {
+    toast.error(e?.message ?? "Could not load the runs.");
+  } finally {
+    runsLoading.value = false;
+  }
+}
+function loadMoreRuns() {
+  if (runsPage.value >= runsLastPage.value) return;
+  runsPage.value += 1;
+  void loadRuns();
+}
+const steps = ref([]);
+const stepsSource = ref(null);
+const runStatus = ref(null);
+const stepsLoading = ref(false);
+const stepsError = ref(null);
+let pollTimer = null;
+function stopPoll() {
+  if (pollTimer) {
+    window.clearTimeout(pollTimer);
+    pollTimer = null;
+  }
+}
+async function loadSteps(runId, isPoll = false) {
+  if (!isPoll) {
+    stepsLoading.value = true;
+    stepsError.value = null;
+  }
+  try {
+    const res = await getSteps(props.workflow.id, runId, true);
+    if (selectedRunId.value !== runId) return;
+    steps.value = res.steps ?? [];
+    stepsSource.value = res.source ?? null;
+    runStatus.value = String(res.run?.status ?? "");
+    if (!isPoll) cursor.value = Math.max(0, steps.value.length - 1);
+    stopPoll();
+    if (runStatus.value && !TERMINAL.has(runStatus.value)) {
+      pollTimer = window.setTimeout(() => {
+        void loadSteps(runId, true);
+      }, STEPS_POLL_MS);
+    }
+  } catch (e) {
+    if (selectedRunId.value === runId) {
+      stepsError.value = e?.message ?? "Could not load the run steps.";
+    }
+  } finally {
+    if (!isPoll) stepsLoading.value = false;
+  }
+}
+function selectRun(id) {
+  if (selectedRunId.value === id) return;
+  selectedRunId.value = id;
+  playing.value = false;
+  steps.value = [];
+  stepsError.value = null;
+  cursor.value = 0;
+  stopPoll();
+  void loadSteps(id);
+}
+onBeforeUnmount(stopPoll);
+const cursor = ref(0);
+const playing = ref(false);
+let playTimer = null;
+const safeCursor = computed(() => steps.value.length === 0 ? 0 : Math.min(cursor.value, steps.value.length - 1));
+const activeStep = computed(() => steps.value[safeCursor.value]);
+function seek(i) {
+  playing.value = false;
+  cursor.value = Math.max(0, Math.min(i, steps.value.length - 1));
+}
+function togglePlay() {
+  if (!playing.value && safeCursor.value >= steps.value.length - 1) {
+    cursor.value = 0;
+    playing.value = true;
+    return;
+  }
+  playing.value = !playing.value;
+}
+watch([playing, safeCursor, () => steps.value.length], () => {
+  if (playTimer) {
+    window.clearTimeout(playTimer);
+    playTimer = null;
+  }
+  if (!playing.value || safeCursor.value >= steps.value.length - 1) return;
+  playTimer = window.setTimeout(() => {
+    const next = Math.min(safeCursor.value + 1, steps.value.length - 1);
+    cursor.value = next;
+    if (next >= steps.value.length - 1) playing.value = false;
+  }, PLAY_INTERVAL_MS);
+});
+onBeforeUnmount(() => {
+  if (playTimer) window.clearTimeout(playTimer);
+});
+const preview = useVueFlow("workflow-run-replay");
+preview.onPaneReady(() => {
+  preview.updateNodeInternals(vfNodes.value.map((n) => n.id));
+  void preview.fitView({ padding: 0.2, maxZoom: 1 });
+});
+provide("workflow-node-actions", { duplicate: () => {
+}, remove: () => {
+} });
+const dynamicOutputs = ref({});
+const dynamicOutputNodes = computed(() => props.workflow.blob.nodes.filter((n) => {
+  const m = findManifest(n.nodeSlug, n.nodeVersion);
+  return (m?.outputs ?? []).some((o) => o.resolveOutputs === true);
+}));
+function onResolvedOutputs(nodeId, outputs) {
+  dynamicOutputs.value = { ...dynamicOutputs.value, [nodeId]: outputs };
+  void nextTick(() => preview.updateNodeInternals([nodeId]));
+}
+const reachedStatus = computed(() => {
+  const m = /* @__PURE__ */ new Map();
+  for (let i = 0; i <= safeCursor.value && i < steps.value.length; i++) {
+    const s = steps.value[i];
+    m.set(s.node_id, s.status);
+  }
+  return m;
+});
+const finalStatus = computed(() => {
+  const m = /* @__PURE__ */ new Map();
+  for (const s of steps.value) m.set(s.node_id, s.status);
+  return m;
+});
+const runNodeIds = computed(() => new Set(steps.value.map((s) => s.node_id)));
+const triggerIds = computed(() => new Set(props.workflow.blob.triggers.map((t) => t.id)));
+function edgeColorByKind(kind) {
+  switch (kind) {
+    case "success":
+      return "#10b981";
+    case "error":
+      return "#f43f5e";
+    case "branch-true":
+      return "#10b981";
+    case "branch-false":
+      return "#f59e0b";
+    case "branch":
+      return "#8b5cf6";
+    default:
+      return "#94a3b8";
+  }
+}
+const GROUP_PAD = 24;
+const GROUP_LABEL_ROOM = 26;
+function previewGroupNodes(blob, nodePos) {
+  return (blob.groups ?? []).map((g, i) => {
+    let minX = Number.POSITIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (const id of g.nodeIds) {
+      const pos = nodePos(id);
+      minX = Math.min(minX, pos.x);
+      minY = Math.min(minY, pos.y);
+      maxX = Math.max(maxX, pos.x + 220);
+      maxY = Math.max(maxY, pos.y + 64);
+    }
+    if (!Number.isFinite(minX)) return null;
+    return {
+      id: g.id,
+      type: "group",
+      position: { x: Math.round(minX - GROUP_PAD), y: Math.round(minY - GROUP_PAD - GROUP_LABEL_ROOM) },
+      zIndex: -50 + i,
+      draggable: false,
+      selectable: false,
+      data: {
+        group: { ...g, collapsed: false },
+        rect: {
+          width: Math.round(maxX - minX + GROUP_PAD * 2),
+          height: Math.round(maxY - minY + GROUP_PAD * 2 + GROUP_LABEL_ROOM)
+        },
+        memberCount: g.nodeIds.length
+      }
+    };
+  }).filter((n) => n !== null);
+}
+function stickyArea(s) {
+  return (s.size?.width ?? 240) * (s.size?.height ?? 160);
+}
+function replayNodeClass(id, type) {
+  if (type === "sticky") return "replay-dim";
+  if (type === "trigger") return steps.value.length ? "replay-node-ok" : "";
+  const final = finalStatus.value.get(id);
+  if (!final) return "replay-dim";
+  const reached = reachedStatus.value.has(id);
+  const tone = final === "failed" ? "replay-node-failed" : final === "running" ? "replay-node-running" : "replay-node-ok";
+  const active = activeStep.value?.node_id === id ? " replay-node-active" : "";
+  return `${tone}${reached ? "" : " replay-unreached"}${active}`;
+}
+const vfNodes = computed(() => {
+  const blob = props.workflow.blob;
+  const triggerPos = (id, i) => blob.triggerPositions?.[id] ?? { x: -40, y: 60 + i * 140 };
+  const posOf = (id) => {
+    const wn = blob.nodes.find((n) => n.id === id);
+    if (wn) return { x: wn.position?.x ?? 0, y: wn.position?.y ?? 0 };
+    const ti = blob.triggers.findIndex((t) => t.id === id);
+    if (ti >= 0) return triggerPos(id, ti);
+    return { x: 0, y: 0 };
+  };
+  const stickies = [...blob.stickies ?? []].sort((a, b) => stickyArea(b) - stickyArea(a));
+  return [
+    ...previewGroupNodes(blob, posOf),
+    ...stickies.map((s, i) => ({
+      id: s.id,
+      type: "sticky",
+      position: { x: s.position.x, y: s.position.y },
+      zIndex: -100 + i,
+      draggable: false,
+      class: "replay-dim",
+      data: { sticky: s, onUpdate: () => {
+      }, onRemove: () => {
+      } }
+    })),
+    ...blob.triggers.map((t, i) => ({
+      id: t.id,
+      type: "trigger",
+      position: triggerPos(t.id, i),
+      draggable: false,
+      class: replayNodeClass(t.id, "trigger"),
+      data: t
+    })),
+    ...blob.nodes.map((n) => ({
+      id: n.id,
+      type: "workflow",
+      position: n.position ?? { x: 240, y: 80 },
+      draggable: false,
+      class: replayNodeClass(n.id, "workflow"),
+      data: { ...n, __resolvedOutputs: dynamicOutputs.value[n.id] }
+    }))
+  ];
+});
+watch(() => vfNodes.value.map((n) => n.id).join("|"), () => {
+  void nextTick(() => preview.updateNodeInternals(vfNodes.value.map((n) => n.id)));
+});
+const vfEdges = computed(() => {
+  const blob = props.workflow.blob;
+  const nodePos = (id) => {
+    const wn = blob.nodes.find((n) => n.id === id);
+    if (wn) return { x: wn.position?.x ?? 0, y: wn.position?.y ?? 0 };
+    const ti = blob.triggers.findIndex((t) => t.id === id);
+    if (ti >= 0) return blob.triggerPositions?.[id] ?? { x: -40, y: 60 + ti * 140 };
+    return { x: 0, y: 0 };
+  };
+  const pickSourceSide = (_sourceId, _targetId) => "bottom";
+  const opposite = (s) => s === "top" ? "bottom" : s === "right" ? "left" : s === "bottom" ? "top" : "right";
+  const edgeKind = (sourceNodeId, output) => {
+    const wn = blob.nodes.find((n) => n.id === sourceNodeId);
+    if (!wn) return "default";
+    const manifest = findManifest(wn.nodeSlug, wn.nodeVersion);
+    if (!manifest) return "default";
+    if (output === "true") return "branch-true";
+    if (output === "false") return "branch-false";
+    if (output === "error") return "error";
+    const outs = [...manifest.outputs ?? [], ...dynamicOutputs.value[sourceNodeId] ?? []];
+    const portDef = outs.find((o) => o.name === output);
+    if (portDef) {
+      if (portDef.kind === "error") return "error";
+      if (portDef.kind === "branch") return "branch";
+      return "success";
+    }
+    for (const o of manifest.outputs ?? []) {
+      if (o.sourceFromConfig) {
+        if (o.kind === "error") return "error";
+        if (o.kind === "branch") return "branch";
+      }
+    }
+    return "default";
+  };
+  return blob.edges.map((e) => {
+    const kind = edgeKind(e.from.nodeId, e.from.output);
+    const wn = blob.nodes.find((n) => n.id === e.from.nodeId);
+    const manifest = wn ? findManifest(wn.nodeSlug, wn.nodeVersion) : null;
+    const isBranchPort = (manifest?.outputs ?? []).some((o) => o.sourceFromConfig) || ["true", "false", "error"].includes(e.from.output);
+    const srcSide = pickSourceSide(e.from.nodeId, e.to.nodeId);
+    const sourceRan = triggerIds.value.has(e.from.nodeId) ? steps.value.length > 0 : runNodeIds.value.has(e.from.nodeId);
+    const traversed = sourceRan && runNodeIds.value.has(e.to.nodeId);
+    const targetReached = reachedStatus.value.has(e.to.nodeId);
+    return {
+      id: e.id,
+      source: e.from.nodeId,
+      target: e.to.nodeId,
+      sourceHandle: `${e.from.output}__${srcSide}`,
+      targetHandle: `__in__${opposite(srcSide)}`,
+      type: "flow",
+      selectable: false,
+      animated: traversed && !targetReached,
+      data: {
+        kind,
+        label: isBranchPort ? e.from.output : void 0,
+        ...traversed ? { replay: { ahead: !targetReached } } : {}
+      },
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        width: 16,
+        height: 16,
+        color: traversed ? "#3b82f6" : edgeColorByKind(kind)
+      }
+    };
+  });
+});
+watch([activeStep, safeCursor], () => {
+  const id = activeStep.value?.node_id;
+  if (!id) return;
+  void nextTick(() => {
+    const node = preview.findNode(id);
+    if (!node) return;
+    const w = node.dimensions?.width ?? 220;
+    const h = node.dimensions?.height ?? 60;
+    preview.setCenter(node.position.x + w / 2, node.position.y + h / 2, { zoom: 1, duration: 400 });
+  });
+});
+function onNodeClick(nodeId) {
+  const idx = steps.value.findIndex((s) => s.node_id === nodeId);
+  if (idx < 0) return;
+  playing.value = false;
+  cursor.value = idx;
+}
+const nodeTypes = {
+  workflow: markRaw(WorkflowNodeView),
+  trigger: markRaw(WorkflowTriggerView),
+  sticky: markRaw(StickyNoteView),
+  group: markRaw(GroupFrameView)
+};
+const edgeTypes = {
+  flow: markRaw(WorkflowEdgeView)
+};
+preview.onNodeClick((evt) => {
+  if (evt.node.type === "workflow") onNodeClick(evt.node.id);
+});
+function formatDateTime(iso) {
+  if (!iso) return "\u2014";
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return String(iso);
+  }
+}
+function formatTime(iso) {
+  if (!iso) return "\u2014";
+  try {
+    return new Date(iso).toLocaleTimeString();
+  } catch {
+    return String(iso);
+  }
+}
+function formatDuration(ms) {
+  if (ms == null) return "\u2014";
+  if (ms < 1e3) return `${ms} ms`;
+  if (ms < 6e4) return `${(ms / 1e3).toFixed(1)} s`;
+  return `${Math.floor(ms / 6e4)}m ${Math.round(ms % 6e4 / 1e3)}s`;
+}
+function pretty(v) {
+  try {
+    return JSON.stringify(v, null, 2);
+  } catch {
+    return String(v);
+  }
+}
+function triggerIcon(type) {
+  return type === "schedule" ? Clock : type === "webhook" ? Webhook : Play;
+}
+const activeStepTitle = computed(() => {
+  const s = activeStep.value;
+  if (!s) return "";
+  return `${s.node_slug || s.node_id}${s.attempt > 0 ? ` (#${s.attempt + 1})` : ""}`;
+});
+onMounted(async () => {
+  if (props.single && props.initialRunId) {
+    selectRun(props.initialRunId);
+    return;
+  }
+  await loadRuns(true);
+  const initial = props.initialRunId && runs.value.some((r) => r.id === props.initialRunId) ? props.initialRunId : runs.value[0]?.id;
+  if (initial) selectRun(initial);
+});
+watch(() => props.initialRunId, (id) => {
+  if (!id) return;
+  if (props.single) {
+    selectRun(id);
+    return;
+  }
+  if (runs.value.some((r) => r.id === id)) selectRun(id);
+});
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-1">
+    <!-- Canvas + transport -->
+    <div class="flex min-w-0 flex-1 flex-col">
+      <div class="relative min-h-0 flex-1 bg-[#f7f6fb]">
+        <VueFlow
+          id="workflow-run-replay"
+          :nodes="vfNodes"
+          :edges="vfEdges"
+          :node-types="nodeTypes"
+          :edge-types="edgeTypes"
+          :default-edge-options="{ type: 'flow' }"
+          :nodes-draggable="false"
+          :nodes-connectable="false"
+          :edges-updatable="false"
+          :pan-on-scroll-mode="PanOnScrollMode.Free"
+          :delete-key-code="null"
+          :min-zoom="0.25"
+          :max-zoom="2"
+        >
+          <Background pattern-color="#cbd5e1" :gap="20" :size="1.2" />
+        </VueFlow>
+
+        <!-- Headless dynamic-output resolvers — render nothing. -->
+        <NodeDynamicOutputsResolver
+          v-for="n in dynamicOutputNodes"
+          :key="`dyn-out-${n.id}`"
+          :node-id="n.id"
+          :slug="n.nodeSlug"
+          :version="n.nodeVersion"
+          :config="n.config ?? {}"
+          :static-outputs="findManifest(n.nodeSlug, n.nodeVersion)?.outputs ?? []"
+          @resolved="onResolvedOutputs"
+        />
+
+        <!-- Which run is on the canvas -->
+        <div class="absolute top-3 left-3 z-10 flex items-center gap-2 rounded-lg border border-black/[0.08] bg-white/95 px-2.5 py-1.5 text-sm shadow-sm backdrop-blur-sm">
+          <Play :size="13" class="text-muted-foreground" />
+          <span class="font-medium">{{ selectedRunId ? `Run #${selectedRunId}` : "Pick a run" }}</span>
+          <Badge v-if="runStatus" variant="outline" class="border text-xs font-medium uppercase" :class="statusClass(runStatus)">
+            {{ runStatusLabel(runStatus) }}
+          </Badge>
+          <Badge v-if="stepsSource" variant="outline" class="border text-xs font-medium uppercase text-muted-foreground">
+            {{ stepsSource === "temporal" ? "Live" : "Snapshot" }}
+          </Badge>
+          <Loader2 v-if="stepsLoading" :size="13" class="animate-spin text-muted-foreground" />
+        </div>
+
+        <div v-if="stepsError" class="absolute inset-x-3 top-14 z-10 rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+          {{ stepsError }}
+        </div>
+      </div>
+
+      <!-- Transport bar -->
+      <div class="flex shrink-0 items-center gap-3 border-t border-black/[0.06] bg-white px-4 py-2.5">
+        <template v-if="steps.length">
+          <div class="flex items-center gap-1">
+            <Button variant="ghost" size="sm" class="h-7" :disabled="safeCursor === 0" @click="seek(safeCursor - 1)">
+              <Prev :size="13" />
+              Prev
+            </Button>
+            <Button size="sm" class="h-7" @click="togglePlay">
+              <component :is="playing ? Pause : Play" :size="13" class="mr-1" />
+              {{ playing ? "Pause" : "Play" }}
+            </Button>
+            <Button variant="ghost" size="sm" class="h-7" :disabled="safeCursor >= steps.length - 1" @click="seek(safeCursor + 1)">
+              Next
+              <Next :size="13" />
+            </Button>
+          </div>
+
+          <input
+            type="range"
+            :min="0"
+            :max="steps.length - 1"
+            :value="safeCursor"
+            class="h-1.5 flex-1 cursor-pointer accent-primary"
+            aria-label="Replay step"
+            @input="seek(Number($event.target.value))"
+          >
+
+          <span class="shrink-0 text-sm tabular-nums text-muted-foreground">
+            Step {{ safeCursor + 1 }}/{{ steps.length }}
+            <span class="font-mono">· {{ activeStepTitle }}</span>
+          </span>
+        </template>
+        <p v-else-if="!stepsLoading" class="text-sm text-muted-foreground">
+          {{ selectedRunId ? "No steps recorded for this run." : "Pick a run on the right to replay it." }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Debug panel — the ACTIVE step, live with the cursor: status, timings,
+         branch, error and payloads, so no lightbox is needed. -->
+    <aside class="flex w-[32rem] shrink-0 flex-col border-l border-black/[0.06] bg-white">
+      <div class="flex items-center gap-2 border-b border-black/[0.06] px-3 py-2">
+        <div class="min-w-0 flex-1">
+          <div class="truncate font-mono text-sm font-medium">{{ activeStepTitle || "Debug" }}</div>
+          <div class="text-xs tabular-nums text-muted-foreground">
+            <template v-if="steps.length">Step {{ safeCursor + 1 }} / {{ steps.length }}</template>
+            <template v-else>No step selected</template>
+          </div>
+        </div>
+        <Badge v-if="activeStep" variant="outline" class="shrink-0 border text-xs font-medium uppercase" :class="statusClass(activeStep.status)">
+          {{ runStatusLabel(activeStep.status) }}
+        </Badge>
+      </div>
+
+      <div v-if="activeStep" class="min-h-0 flex-1 space-y-4 overflow-y-auto p-3">
+        <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
+          <div>
+            <div class="text-mono text-muted-foreground">Attempt</div>
+            <div class="tabular-nums">{{ activeStep.attempt + 1 }}</div>
+          </div>
+          <div>
+            <div class="text-mono text-muted-foreground">Duration</div>
+            <div class="tabular-nums">{{ formatDuration(activeStep.duration_ms) }}</div>
+          </div>
+          <div>
+            <div class="text-mono text-muted-foreground">Started</div>
+            <div class="tabular-nums">{{ formatTime(activeStep.started_at) }}</div>
+          </div>
+          <div>
+            <div class="text-mono text-muted-foreground">Completed</div>
+            <div class="tabular-nums">{{ formatTime(activeStep.completed_at) }}</div>
+          </div>
+        </div>
+
+        <div v-if="activeStep.branch" class="text-sm">
+          <div class="text-mono text-muted-foreground mb-1">Branch</div>
+          <code class="rounded bg-black/[0.05] px-1.5 py-0.5 font-mono">{{ activeStep.branch }}</code>
+        </div>
+
+        <div v-if="activeStep.error" class="text-sm">
+          <div class="text-mono text-muted-foreground mb-1">Error</div>
+          <pre class="max-h-40 overflow-auto rounded-md border border-rose-500/20 bg-rose-500/5 p-2 font-mono text-sm text-rose-700">{{ activeStep.error }}</pre>
+        </div>
+
+        <div v-if="activeStep.input !== void 0 && activeStep.input !== null" class="text-sm">
+          <div class="text-mono text-muted-foreground mb-1">Input</div>
+          <pre class="max-h-56 overflow-auto rounded-md border border-black/[0.06] bg-muted/20 p-2 font-mono text-sm">{{ pretty(activeStep.input) }}</pre>
+        </div>
+
+        <div v-if="activeStep.config !== void 0 && activeStep.config !== null" class="text-sm">
+          <div class="text-mono text-muted-foreground mb-1">Config</div>
+          <pre class="max-h-56 overflow-auto rounded-md border border-black/[0.06] bg-muted/20 p-2 font-mono text-sm">{{ pretty(activeStep.config) }}</pre>
+        </div>
+
+        <div v-if="activeStep.output !== void 0 && activeStep.output !== null" class="text-sm">
+          <div class="text-mono text-muted-foreground mb-1">Output</div>
+          <pre class="max-h-56 overflow-auto rounded-md border border-black/[0.06] bg-muted/20 p-2 font-mono text-sm">{{ pretty(activeStep.output) }}</pre>
+        </div>
+      </div>
+      <p v-else class="p-4 text-sm text-muted-foreground">
+        The active step's status, timings and payloads land here while the replay walks the run.
+      </p>
+    </aside>
+
+    <!-- Run list — hidden in single mode (the run detail replays ONE run). -->
+    <aside v-if="!single" class="flex w-80 shrink-0 flex-col border-l border-black/[0.06] bg-white">
+      <div class="border-b border-black/[0.06] px-3 py-2">
+        <div class="text-sm font-semibold">Runs</div>
+        <p class="text-sm text-muted-foreground">
+          Click through the executions to replay them on the canvas.
+        </p>
+      </div>
+
+      <div class="flex-1 space-y-1 overflow-y-auto p-2">
+        <button
+          v-for="r in runs"
+          :key="r.id"
+          type="button"
+          class="w-full rounded-lg border p-2.5 text-left transition"
+          :class="selectedRunId === r.id ? 'border-primary/40 bg-primary/[0.04]' : 'border-transparent hover:border-black/[0.08] hover:bg-muted/30'"
+          @click="selectRun(r.id)"
+        >
+          <div class="flex items-center justify-between gap-2">
+            <span class="flex min-w-0 items-center gap-1.5 text-sm font-medium">
+              <component :is="triggerIcon(r.triggerType)" :size="12" class="shrink-0 text-muted-foreground" />
+              <span class="truncate">#{{ r.id }}</span>
+            </span>
+            <Badge variant="outline" class="shrink-0 border text-xs font-medium uppercase" :class="statusClass(r.status)">
+              {{ r.status }}
+            </Badge>
+          </div>
+          <div class="mt-0.5 flex items-center justify-between gap-2 text-sm text-muted-foreground">
+            <span class="tabular-nums">{{ formatDateTime(r.startedAt) }}</span>
+            <span class="tabular-nums">{{ formatDuration(r.durationMs) }}</span>
+          </div>
+        </button>
+
+        <p v-if="!runs.length && !runsLoading" class="px-2 py-6 text-center text-sm text-muted-foreground">
+          No runs yet — trigger one from the editor's Run button.
+        </p>
+
+        <div v-if="runsLoading" class="flex justify-center py-3">
+          <Loader2 :size="15" class="animate-spin text-muted-foreground" />
+        </div>
+        <Button
+          v-else-if="runsPage < runsLastPage"
+          variant="ghost"
+          size="sm"
+          class="w-full text-sm"
+          @click="loadMoreRuns"
+        >
+          Load older runs
+        </Button>
+      </div>
+    </aside>
+
+  </div>
+</template>
+
+<style>
+.vue-flow__node.replay-dim{opacity:.35}.vue-flow__node.replay-unreached{opacity:.45}.vue-flow__node.replay-node-ok{filter:drop-shadow(0 0 5px rgba(16,185,129,.45))}.vue-flow__node.replay-node-failed{filter:drop-shadow(0 0 5px rgba(244,63,94,.5))}.vue-flow__node.replay-node-running{filter:drop-shadow(0 0 5px rgba(14,165,233,.5))}.vue-flow__node.replay-node-active{filter:drop-shadow(0 0 10px rgba(59,130,246,.65))}
+</style>

package/dist/runtime/components/Integrations/WorkflowRunReplayPanel.vue.d.ts

@@ -0,0 +1,12 @@
+import '@vue-flow/core/dist/style.css';
+import '@vue-flow/core/dist/theme-default.css';
+import type { Workflow } from '../../types/integrations.js';
+type __VLS_Props = {
+    workflow: Workflow;
+    /** Preselect a run (deep-link from the Runs table). */
+    initialRunId?: string | null;
+    /** Replay ONLY the initial run: no run list, no browsing (run detail view). */
+    single?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;