@revenexx/studio-integrations 0.1.4 → 0.3.0

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

@@ -0,0 +1,777 @@
+<script setup>
+import { computed, onUnmounted, ref, watch } from "vue";
+import { Download as DownloadIcon, RefreshCircle as RefreshIcon } from "#solar-icons";
+import { Badge, Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@revenexx/studio";
+import { runStatusLabel, statusClass } from "../../utils/statusStyle";
+import { IntegrationsApiError } from "../../utils/apiError";
+const props = defineProps({
+  run: { type: Object, required: true },
+  view: { type: String, required: false, default: "details" }
+});
+const emit = defineEmits(["changed"]);
+const {
+  getRun,
+  getDetails,
+  getSteps,
+  getHistory,
+  getStackTrace,
+  cancelRun,
+  terminateRun,
+  retryRun,
+  resumeRun
+} = useIntegrationsRuns();
+const DETAILS_POLL_MS = 3e3;
+const HISTORY_POLL_MS = 1e4;
+const HISTORY_PAGE_SIZE = 50;
+const COCKPIT_TERMINAL = /* @__PURE__ */ new Set(["succeeded", "failed", "cancelled"]);
+const API_TERMINAL = /* @__PURE__ */ new Set(["completed", "failed", "cancelled", "terminated", "timed_out"]);
+const runData = ref(null);
+const summaryLoading = ref(false);
+const summaryError = ref(null);
+const details = ref(null);
+const detailsLoading = ref(false);
+const detailsError = ref(null);
+const steps = ref([]);
+const stepsLoading = ref(false);
+const stepsError = ref(null);
+const stepsWithPayloads = ref(false);
+const expandedStep = ref(null);
+const historyLoading = ref(false);
+const historyError = ref(null);
+const stackEnabled = ref(false);
+const stackTrace = ref(null);
+const stackLoading = ref(false);
+const stackError = ref(null);
+let summaryTimer = null;
+let historyTimer = null;
+function pick(obj, keys) {
+  if (!obj || typeof obj !== "object") return void 0;
+  const o = obj;
+  for (const k of keys) if (o[k] != null) return o[k];
+  return void 0;
+}
+function pickStr(obj, keys) {
+  const v = pick(obj, keys);
+  return v == null ? null : String(v);
+}
+function unwrapRun(res) {
+  if (!res || typeof res !== "object") return null;
+  const o = res;
+  if ("data" in o && o.data && typeof o.data === "object" && !("status" in o) && !("temporal_run_id" in o)) {
+    return o.data;
+  }
+  return o;
+}
+function isNonEmptyObject(v) {
+  return !!v && typeof v === "object" && !Array.isArray(v) && Object.keys(v).length > 0;
+}
+function fmt(iso) {
+  if (!iso) return "\u2014";
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return String(iso);
+  }
+}
+function json(x) {
+  return JSON.stringify(x, null, 2);
+}
+const startedAt = computed(() => pickStr(runData.value, ["started_at", "startedAt"]) ?? props.run.startedAt ?? null);
+const completedAt = computed(() => pickStr(runData.value, ["completed_at", "completedAt"]) ?? props.run.finishedAt ?? null);
+const errorMessage = computed(() => pickStr(runData.value, ["error", "errorMessage"]) ?? props.run.errorMessage ?? null);
+const temporalWorkflowId = computed(() => pickStr(runData.value, ["temporal_workflow_id", "temporalWorkflowId"]));
+const temporalRunId = computed(() => pickStr(runData.value, ["temporal_run_id", "temporalRunId"]) ?? props.run.temporalRunId ?? null);
+const hasTemporal = computed(() => !!temporalWorkflowId.value && !!temporalRunId.value);
+const runResult = computed(() => pick(runData.value, ["result"]));
+const resultLinks = computed(() => {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const walk = (value, path) => {
+    if (typeof value === "string") {
+      const key = path[path.length - 1] ?? "";
+      if (/url$/i.test(key) && /^https?:\/\//.test(value) && !seen.has(value)) {
+        seen.add(value);
+        out.push({ label: path.slice(-2).join("."), url: value });
+      }
+      return;
+    }
+    if (Array.isArray(value)) value.forEach((v, i) => walk(v, [...path, String(i)]));
+    else if (value !== null && typeof value === "object") {
+      for (const [k, v] of Object.entries(value)) walk(v, [...path, k]);
+    }
+  };
+  walk(runResult.value, []);
+  return out.slice(0, 8);
+});
+const hasResult = computed(() => runResult.value != null && (typeof runResult.value !== "object" || Object.keys(runResult.value).length > 0));
+const isTerminal = computed(() => {
+  const apiStatus = pickStr(runData.value, ["status"]);
+  if (apiStatus) return API_TERMINAL.has(apiStatus);
+  return COCKPIT_TERMINAL.has(props.run.status);
+});
+const dStatus = computed(() => pickStr(details.value, ["status"]));
+const dWorkflowType = computed(() => pickStr(details.value, ["workflow_type", "workflowType"]));
+const dTaskQueue = computed(() => pickStr(details.value, ["task_queue", "taskQueue"]));
+const dHistoryLength = computed(() => pick(details.value, ["history_length", "historyLength"]));
+function eventId(ev) {
+  const v = pick(ev, ["event_id", "eventId"]);
+  return typeof v === "number" ? v : Number(v ?? 0);
+}
+function eventType(ev) {
+  return pickStr(ev, ["event_type", "eventType", "type"]) ?? "event";
+}
+function eventTime(ev) {
+  return fmt(pickStr(ev, ["event_time", "eventTime"]));
+}
+function eventAttributes(ev) {
+  return pick(ev, ["attributes"]);
+}
+function eventColor(type) {
+  const t = type.toLowerCase();
+  if (t.includes("failed") || t.includes("terminated")) return "text-rose-600";
+  if (t.includes("completed")) return "text-emerald-600";
+  return "text-foreground";
+}
+function statusOf(e) {
+  return e instanceof IntegrationsApiError ? e.status : null;
+}
+function genericMsg(e, fallback) {
+  if (e instanceof IntegrationsApiError) return e.message || fallback;
+  return e?.message ?? fallback;
+}
+function detailsErrMsg(e) {
+  const s = statusOf(e);
+  if (s === 410) return "History is no longer available (retention expired and no snapshot).";
+  if (s === 503) return "Temporal is currently unavailable.";
+  return genericMsg(e, "Could not load Temporal details.");
+}
+function historyErrMsg(e) {
+  const s = statusOf(e);
+  if (s === 410) return "History is no longer available.";
+  if (s === 422) return "Pagination cursor invalidated \u2014 reset.";
+  return genericMsg(e, "Could not load history.");
+}
+function stackErrMsg(e) {
+  const s = statusOf(e);
+  if (s === 409) return "Workflow is no longer running.";
+  if (s === 410) return "Unknown to Temporal.";
+  if (s === 503) return "Temporal unavailable.";
+  return genericMsg(e, "Could not load stack trace.");
+}
+function stepsErrMsg(e) {
+  const s = statusOf(e);
+  if (s === 409) return "Run has not been handed off to Temporal yet.";
+  if (s === 410) return "Execution history is no longer available.";
+  if (s === 503) return "Temporal is currently unavailable.";
+  return genericMsg(e, "Could not load steps.");
+}
+function fmtMs(ms) {
+  if (ms == null) return "\u2014";
+  if (ms < 1e3) return `${ms}ms`;
+  if (ms < 6e4) return `${(ms / 1e3).toFixed(2)}s`;
+  return `${(ms / 6e4).toFixed(1)}m`;
+}
+function activityName(a) {
+  const at = a ? a.activity_type ?? a.activityType : void 0;
+  if (typeof at === "string") return at;
+  return pickStr(at, ["name"]) ?? "Activity";
+}
+const timeline = computed(() => {
+  const evs = timelineEvents.value;
+  if (!evs.length) return null;
+  const timeOf = (ev) => Date.parse(pickStr(ev, ["event_time", "eventTime"]) ?? "");
+  const attrsOf = (ev) => pick(ev, ["attributes"]);
+  const refOf = (ev, keys) => Number(pick(attrsOf(ev), keys) ?? Number.NaN);
+  const cycles = /* @__PURE__ */ new Map();
+  let wf = null;
+  for (const ev of evs) {
+    const type = eventType(ev);
+    const ts = timeOf(ev);
+    if (!Number.isFinite(ts)) continue;
+    if (type === "workflow_execution_started") {
+      wf = { label: "Workflow", kind: "workflow", sched: ts, start: ts, end: null, ok: true, events: [ev] };
+    } else if (type.startsWith("workflow_execution_")) {
+      if (wf) {
+        wf.end = ts;
+        wf.ok = type === "workflow_execution_completed";
+        wf.events.push(ev);
+      }
+    } else if (type === "activity_task_scheduled") {
+      cycles.set(eventId(ev), { label: activityName(attrsOf(ev)), kind: "activity", sched: ts, start: null, end: null, ok: true, events: [ev] });
+    } else if (type === "workflow_task_scheduled") {
+      cycles.set(eventId(ev), { label: "Workflow task", kind: "wf-task", sched: ts, start: null, end: null, ok: true, events: [ev] });
+    } else if (type === "activity_task_started" || type === "workflow_task_started") {
+      const c = cycles.get(refOf(ev, ["scheduled_event_id", "scheduledEventId"]));
+      if (c) {
+        c.start = ts;
+        c.events.push(ev);
+      }
+    } else if (type.startsWith("activity_task_") || type.startsWith("workflow_task_")) {
+      const c = cycles.get(refOf(ev, ["scheduled_event_id", "scheduledEventId"]));
+      if (c) {
+        c.end = ts;
+        c.ok = type.endsWith("_completed");
+        c.events.push(ev);
+      }
+    } else if (type === "timer_started") {
+      cycles.set(eventId(ev), { label: "Timer", kind: "timer", sched: ts, start: ts, end: null, ok: true, events: [ev] });
+    } else if (type === "timer_fired" || type === "timer_canceled") {
+      const c = cycles.get(refOf(ev, ["started_event_id", "startedEventId"]));
+      if (c) {
+        c.end = ts;
+        c.ok = type === "timer_fired";
+        c.events.push(ev);
+      }
+    }
+  }
+  const all = [...wf ? [wf] : [], ...cycles.values()].sort((a, b) => a.sched - b.sched);
+  if (!all.length) return null;
+  const t0 = Math.min(...all.map((c) => c.sched));
+  const tEnd = Math.max(t0 + 1, ...all.map((c) => c.end ?? c.start ?? c.sched));
+  const span = tEnd - t0;
+  const rows = all.map((c, i) => {
+    const start = c.start ?? c.sched;
+    const end = c.end ?? start;
+    const leftPct = (start - t0) / span * 100;
+    const widthPct = Math.max((end - start) / span * 100, 0.6);
+    const spaceRight = 100 - (leftPct + widthPct);
+    return {
+      key: `${i}-${c.label}`,
+      label: c.label,
+      kind: c.kind,
+      ok: c.ok,
+      durationMs: c.end != null ? c.end - start : null,
+      events: c.events,
+      waitLeftPct: (c.sched - t0) / span * 100,
+      waitWidthPct: Math.max((start - c.sched) / span * 100, 0),
+      leftPct,
+      widthPct,
+      labelMode: spaceRight >= 25 ? "after" : leftPct >= 25 ? "before" : "inside"
+    };
+  });
+  return { t0, tEnd, span, rows };
+});
+function timelineBarClass(row) {
+  if (!row.ok) return "bg-rose-500 group-hover:bg-rose-600";
+  switch (row.kind) {
+    case "workflow":
+      return "bg-emerald-600 group-hover:bg-emerald-700";
+    case "wf-task":
+      return "bg-slate-300 group-hover:bg-slate-400";
+    case "timer":
+      return "bg-amber-500 group-hover:bg-amber-600";
+    default:
+      return "bg-emerald-500 group-hover:bg-emerald-600";
+  }
+}
+const timelineDetail = ref(null);
+function timelineRowStatus(row) {
+  if (row.durationMs == null) return "running";
+  return row.ok ? "succeeded" : "failed";
+}
+function fmtClock(ms) {
+  try {
+    return new Date(ms).toLocaleTimeString();
+  } catch {
+    return "";
+  }
+}
+async function loadSummary() {
+  summaryLoading.value = true;
+  summaryError.value = null;
+  try {
+    const res = await getRun(props.run.workflowId, props.run.id);
+    runData.value = unwrapRun(res);
+  } catch (e) {
+    summaryError.value = genericMsg(e, "Could not load run.");
+  } finally {
+    summaryLoading.value = false;
+  }
+}
+async function loadDetails() {
+  if (!hasTemporal.value) {
+    details.value = null;
+    detailsError.value = null;
+    return;
+  }
+  detailsLoading.value = true;
+  detailsError.value = null;
+  try {
+    const res = await getDetails(props.run.workflowId, props.run.id);
+    details.value = res?.data ?? null;
+  } catch (e) {
+    detailsError.value = detailsErrMsg(e);
+    details.value = null;
+  } finally {
+    detailsLoading.value = false;
+  }
+}
+async function loadSteps() {
+  if (!hasTemporal.value) {
+    steps.value = [];
+    stepsError.value = null;
+    return;
+  }
+  stepsLoading.value = true;
+  stepsError.value = null;
+  try {
+    const res = await getSteps(props.run.workflowId, props.run.id, stepsWithPayloads.value);
+    steps.value = res?.steps ?? [];
+  } catch (e) {
+    stepsError.value = stepsErrMsg(e);
+    steps.value = [];
+  } finally {
+    stepsLoading.value = false;
+  }
+}
+function toggleStepPayloads() {
+  stepsWithPayloads.value = !stepsWithPayloads.value;
+  expandedStep.value = null;
+  void loadSteps();
+}
+function toggleStep(i) {
+  expandedStep.value = expandedStep.value === i ? null : i;
+}
+async function loadStack() {
+  stackEnabled.value = true;
+  stackLoading.value = true;
+  stackError.value = null;
+  try {
+    stackTrace.value = await getStackTrace(props.run.workflowId, props.run.id);
+  } catch (e) {
+    stackError.value = stackErrMsg(e);
+    stackTrace.value = null;
+  } finally {
+    stackLoading.value = false;
+  }
+}
+const timelineEvents = ref([]);
+const TIMELINE_MAX_PAGES = 40;
+async function loadTimelineEvents() {
+  if (!hasTemporal.value) {
+    timelineEvents.value = [];
+    historyError.value = null;
+    return;
+  }
+  if (!timelineEvents.value.length) historyLoading.value = true;
+  historyError.value = null;
+  try {
+    const out = [];
+    let token;
+    for (let i = 0; i < TIMELINE_MAX_PAGES; i++) {
+      const res = await getHistory(props.run.workflowId, props.run.id, { page_token: token, page_size: HISTORY_PAGE_SIZE });
+      out.push(...res?.data ?? []);
+      token = res?.next_page_token ?? void 0;
+      if (!token) break;
+    }
+    timelineEvents.value = out;
+  } catch (e) {
+    historyError.value = historyErrMsg(e);
+  } finally {
+    historyLoading.value = false;
+  }
+}
+async function loadAll() {
+  await loadSummary();
+  await Promise.allSettled([loadDetails(), loadSteps(), loadTimelineEvents()]);
+}
+function stopPolling() {
+  if (summaryTimer) {
+    clearInterval(summaryTimer);
+    summaryTimer = null;
+  }
+  if (historyTimer) {
+    clearInterval(historyTimer);
+    historyTimer = null;
+  }
+}
+function startPollingIfNeeded() {
+  stopPolling();
+  if (isTerminal.value) return;
+  summaryTimer = setInterval(() => {
+    void loadSummary().then(() => {
+      if (isTerminal.value) {
+        stopPolling();
+        return;
+      }
+      void loadDetails();
+      void loadSteps();
+    });
+  }, DETAILS_POLL_MS);
+  historyTimer = setInterval(() => {
+    void loadTimelineEvents();
+  }, HISTORY_POLL_MS);
+}
+function resetState() {
+  runData.value = null;
+  summaryError.value = null;
+  details.value = null;
+  detailsError.value = null;
+  steps.value = [];
+  stepsError.value = null;
+  stepsWithPayloads.value = false;
+  expandedStep.value = null;
+  historyError.value = null;
+  timelineEvents.value = [];
+  timelineDetail.value = null;
+  stackEnabled.value = false;
+  stackTrace.value = null;
+  stackError.value = null;
+  armed.value = null;
+  actionBusy.value = false;
+  actionError.value = null;
+  actionNotice.value = null;
+}
+const ACTION_LABELS = {
+  cancel: "Cancel",
+  terminate: "Terminate",
+  retry: "Retry",
+  resume: "Resume"
+};
+const apiStatusRaw = computed(() => pickStr(runData.value, ["status"]));
+const isActive = computed(() => !isTerminal.value);
+const canStop = computed(() => isActive.value && hasTemporal.value);
+const canResume = computed(() => {
+  const failed = apiStatusRaw.value ? apiStatusRaw.value === "failed" : props.run.status === "failed";
+  return failed && hasTemporal.value;
+});
+const hasActions = computed(() => canStop.value || canResume.value);
+const armed = ref(null);
+const actionBusy = ref(false);
+const actionError = ref(null);
+const actionNotice = ref(null);
+watch(() => props.run.id, () => {
+  stopPolling();
+  resetState();
+  void loadAll().then(startPollingIfNeeded);
+}, { immediate: true });
+onUnmounted(stopPolling);
+function arm(a) {
+  armed.value = a;
+  actionError.value = null;
+  actionNotice.value = null;
+}
+function disarm() {
+  armed.value = null;
+}
+async function confirmAction() {
+  if (!armed.value) return;
+  const a = armed.value;
+  actionBusy.value = true;
+  actionError.value = null;
+  try {
+    let res = null;
+    switch (a) {
+      case "cancel":
+        res = await cancelRun(props.run.workflowId, props.run.id);
+        break;
+      case "terminate":
+        res = await terminateRun(props.run.workflowId, props.run.id);
+        break;
+      case "retry":
+        res = await retryRun(props.run.workflowId, props.run.id);
+        break;
+      case "resume":
+        res = await resumeRun(props.run.workflowId, props.run.id);
+        break;
+    }
+    const newId = pickStr(res, ["id"]);
+    actionNotice.value = (a === "retry" || a === "resume") && newId && newId !== String(props.run.id) ? `Started run #${newId}.` : `${ACTION_LABELS[a]} requested.`;
+    armed.value = null;
+    await loadAll();
+    startPollingIfNeeded();
+    emit("changed");
+  } catch (e) {
+    actionError.value = genericMsg(e, `Could not ${ACTION_LABELS[a].toLowerCase()} the run.`);
+  } finally {
+    actionBusy.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4 text-sm">
+    <!-- ── Details view: overview strip + result. ─────────────────────────── -->
+    <template v-if="view === 'details'">
+      <!-- Toolbar — only the status-gated stop/resume actions; hidden entirely
+           for a terminal run (Retry sits in the page header, data auto-polls). -->
+      <div v-if="hasActions" class="flex items-center gap-2">
+        <!-- confirm step: one click arms, second confirms -->
+        <template v-if="armed">
+          <span class="text-sm text-muted-foreground">{{ ACTION_LABELS[armed] }} this run?</span>
+          <Button
+            size="sm"
+            :class="armed === 'terminate' ? 'bg-rose-600 hover:bg-rose-700 text-white' : ''"
+            :disabled="actionBusy"
+            @click="confirmAction"
+          >
+            <RefreshIcon v-if="actionBusy" :size="14" class="mr-1 animate-spin" />
+            Confirm
+          </Button>
+          <Button variant="ghost" size="sm" :disabled="actionBusy" @click="disarm">Back</Button>
+        </template>
+        <template v-else>
+          <Button v-if="canStop" variant="outline" size="sm" @click="arm('cancel')">Cancel run</Button>
+          <Button v-if="canStop" variant="outline" size="sm" class="text-rose-600 hover:bg-rose-500/10" @click="arm('terminate')">Terminate</Button>
+          <Button v-if="canResume" variant="outline" size="sm" @click="arm('resume')">Resume</Button>
+        </template>
+      </div>
+
+      <!-- Action feedback -->
+      <div v-if="actionError" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+        {{ actionError }}
+      </div>
+      <div v-else-if="actionNotice" class="rounded-md border border-emerald-500/20 bg-emerald-500/5 px-3 py-2 text-sm text-emerald-700">
+        {{ actionNotice }}
+      </div>
+
+      <!-- Overview — summary + the Temporal facts merged into one strip. -->
+      <section class="rounded-md border border-black/[0.06] bg-white p-4 space-y-3">
+        <div class="grid gap-x-6 gap-y-3 sm:grid-cols-2 xl:grid-cols-4">
+          <div>
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Status</div>
+            <div class="mt-0.5">
+              <Badge variant="outline" :class="['border text-xs font-medium uppercase', statusClass(dStatus ?? run.status)]">
+                {{ runStatusLabel(dStatus ?? run.status) }}
+              </Badge>
+            </div>
+          </div>
+          <div>
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Started</div>
+            <div class="tabular-nums">{{ fmt(startedAt) }}</div>
+          </div>
+          <div>
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Completed</div>
+            <div class="tabular-nums">{{ fmt(completedAt) }}</div>
+          </div>
+          <div>
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">History Length</div>
+            <div class="tabular-nums">{{ dHistoryLength ?? "\u2014" }}</div>
+          </div>
+          <div class="min-w-0">
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Workflow</div>
+            <div class="truncate font-mono text-xs leading-5" :title="temporalWorkflowId ?? '\u2014'">{{ temporalWorkflowId ?? "\u2014" }}</div>
+          </div>
+          <div class="min-w-0">
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Run ID</div>
+            <div class="truncate font-mono text-xs leading-5" :title="temporalRunId ?? '\u2014'">{{ temporalRunId ?? "\u2014" }}</div>
+          </div>
+          <div class="min-w-0">
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Workflow Type</div>
+            <div class="truncate font-mono text-xs leading-5">{{ dWorkflowType ?? "\u2014" }}</div>
+          </div>
+          <div class="min-w-0">
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Task Queue</div>
+            <div class="truncate font-mono text-xs leading-5">{{ dTaskQueue ?? "\u2014" }}</div>
+          </div>
+        </div>
+        <div v-if="errorMessage" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-rose-700">
+          {{ errorMessage }}
+        </div>
+        <div v-if="summaryError" class="text-rose-700">
+          {{ summaryError }}
+        </div>
+        <div v-if="detailsError" class="text-rose-700">
+          {{ detailsError }}
+        </div>
+      </section>
+
+      <!-- Result — full width below the overview. -->
+      <section v-if="hasResult" class="rounded-md border border-black/[0.06] bg-white p-4 space-y-2">
+        <h4 class="font-mono text-xs uppercase tracking-wide text-muted-foreground">Result</h4>
+        <div v-if="resultLinks.length" class="flex flex-wrap gap-1.5">
+          <a
+            v-for="link in resultLinks"
+            :key="link.url"
+            :href="link.url"
+            target="_blank"
+            rel="noopener"
+            class="inline-flex items-center gap-1 rounded-md border border-emerald-500/30 bg-emerald-500/[0.06] px-2 py-1 text-xs font-medium text-emerald-700 transition hover:bg-emerald-500/[0.12]"
+          >
+            <DownloadIcon :size="11" />
+            {{ link.label }}
+          </a>
+        </div>
+        <pre class="rounded-md bg-muted/40 p-3 text-xs overflow-x-auto max-h-[28rem]">{{ json(runResult) }}</pre>
+      </section>
+
+      <!-- Stack Trace (non-terminal runs only, lazy) -->
+      <section v-if="!isTerminal" class="rounded-md border border-black/[0.06] bg-white p-4 space-y-3">
+        <div class="flex items-center gap-2 border-b border-black/[0.06] pb-2">
+          <h4 class="font-mono text-xs uppercase tracking-wide text-muted-foreground">Stack Trace</h4>
+          <div class="flex-1" />
+          <Button variant="outline" size="sm" :disabled="stackLoading" @click="loadStack">
+            {{ stackEnabled ? "\u21BB Reload" : "Load" }}
+          </Button>
+        </div>
+
+        <p v-if="!stackEnabled" class="text-xs text-muted-foreground">
+          Load to query the running worker for its current call stack.
+        </p>
+        <div v-else-if="stackLoading" class="flex items-center gap-2 text-muted-foreground">
+          <RefreshIcon :size="14" class="animate-spin" /> Querying worker…
+        </div>
+        <p v-else-if="stackError" class="text-rose-700">{{ stackError }}</p>
+        <pre
+          v-else-if="stackTrace"
+          class="rounded-md bg-slate-900 text-slate-100 p-3 text-xs overflow-auto max-h-56 whitespace-pre-wrap leading-relaxed"
+        >{{ stackTrace }}</pre>
+      </section>
+    </template>
+
+    <!-- ── Timeline view: steps + the stacked history. ─────────────────────── -->
+    <template v-else>
+      <!-- Steps (per-node projection) -->
+      <section v-if="hasTemporal" class="rounded-md border border-black/[0.06] bg-white p-4 space-y-3">
+        <div class="flex items-center gap-2 border-b border-black/[0.06] pb-2">
+          <h4 class="font-mono text-xs uppercase tracking-wide text-muted-foreground">Steps</h4>
+          <div class="flex-1" />
+          <Button variant="outline" size="sm" :disabled="stepsLoading" @click="toggleStepPayloads">
+            {{ stepsWithPayloads ? "Hide payloads" : "Show payloads" }}
+          </Button>
+        </div>
+
+        <p v-if="stepsError" class="text-rose-700">{{ stepsError }}</p>
+        <div v-else-if="stepsLoading && !steps.length" class="flex items-center gap-2 text-muted-foreground">
+          <RefreshIcon :size="14" class="animate-spin" /> Loading steps…
+        </div>
+        <p v-else-if="!steps.length" class="text-muted-foreground">No steps projected yet.</p>
+        <ol v-else class="space-y-1">
+          <li
+            v-for="(st, i) in steps"
+            :key="`${st.node_id}-${st.scheduled_event_id ?? i}`"
+            class="rounded-md border border-black/[0.05] bg-white overflow-hidden"
+          >
+            <button
+              type="button"
+              class="w-full flex items-center gap-3 px-3 py-2 text-left"
+              @click="toggleStep(i)"
+            >
+              <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0', statusClass(st.status)]">{{ runStatusLabel(st.status) }}</Badge>
+              <div class="min-w-0 flex-1">
+                <div class="font-mono text-xs truncate">{{ st.node_slug || st.node_id }}</div>
+                <div class="text-[10px] text-muted-foreground truncate">
+                  {{ st.node_id }}<template v-if="st.branch"> · branch {{ st.branch }}</template><template v-if="st.attempt"> · attempt {{ st.attempt + 1 }}</template>
+                </div>
+              </div>
+              <span class="text-xs text-muted-foreground tabular-nums shrink-0">{{ fmtMs(st.duration_ms) }}</span>
+              <span class="text-[10px] text-muted-foreground shrink-0">{{ expandedStep === i ? "\u25BC" : "\u25B6" }}</span>
+            </button>
+            <div v-if="st.error" class="px-3 pb-2 -mt-1">
+              <div class="rounded-md border border-rose-500/20 bg-rose-500/5 px-2 py-1 text-xs text-rose-700 break-words">{{ st.error }}</div>
+            </div>
+            <div v-if="expandedStep === i" class="px-3 pb-3 space-y-2">
+              <template v-if="stepsWithPayloads">
+                <div class="space-y-1">
+                  <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Input</div>
+                  <pre class="rounded-md bg-muted/40 p-3 text-xs overflow-x-auto max-h-40">{{ st.input === void 0 ? "\u2014" : json(st.input) }}</pre>
+                </div>
+                <div class="space-y-1">
+                  <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Output</div>
+                  <pre class="rounded-md bg-muted/40 p-3 text-xs overflow-x-auto max-h-40">{{ st.output === void 0 ? "\u2014" : json(st.output) }}</pre>
+                </div>
+              </template>
+              <p v-else class="text-xs text-muted-foreground">
+                Enable “Show payloads” to load this step's input and output.
+              </p>
+            </div>
+          </li>
+        </ol>
+      </section>
+
+      <!-- History — the stacked timeline. Hover recolors a span, clicking it
+           opens the underlying events in a lightbox. -->
+      <section v-if="hasTemporal" class="rounded-md border border-black/[0.06] bg-white p-4 space-y-3">
+        <div class="flex items-center gap-2 border-b border-black/[0.06] pb-2">
+          <h4 class="font-mono text-xs uppercase tracking-wide text-muted-foreground">History</h4>
+        </div>
+
+        <p v-if="historyError" class="text-rose-700">{{ historyError }}</p>
+        <div v-else-if="historyLoading && !timeline" class="flex items-center gap-2 text-muted-foreground">
+          <RefreshIcon :size="14" class="animate-spin" /> Loading history…
+        </div>
+        <p v-else-if="!timeline" class="text-muted-foreground">No history events.</p>
+        <div v-else class="rounded-md border border-black/[0.05] bg-slate-50/60 p-2">
+          <div class="relative">
+            <div class="pointer-events-none absolute inset-y-0 left-1/4 border-l border-black/[0.05]" />
+            <div class="pointer-events-none absolute inset-y-0 left-2/4 border-l border-black/[0.05]" />
+            <div class="pointer-events-none absolute inset-y-0 left-3/4 border-l border-black/[0.05]" />
+            <div class="relative space-y-0.5">
+              <button
+                v-for="row in timeline.rows"
+                :key="`tl-${row.key}`"
+                type="button"
+                class="group relative block h-7 w-full cursor-pointer rounded text-left transition hover:bg-black/[0.03]"
+                @click="timelineDetail = row"
+              >
+                <div
+                  v-if="row.waitWidthPct > 0.2"
+                  class="absolute top-[7px] h-3.5 rounded-full bg-amber-400/50"
+                  :style="{ left: `${row.waitLeftPct}%`, width: `${row.waitWidthPct}%` }"
+                />
+                <div
+                  class="absolute top-[7px] h-3.5 rounded-full transition-colors"
+                  :class="timelineBarClass(row)"
+                  :style="{ left: `${row.leftPct}%`, width: `${row.widthPct}%` }"
+                  :title="`${row.label} \xB7 ${fmtMs(row.durationMs)}`"
+                />
+                <div
+                  class="absolute top-0 flex h-7 items-center gap-1.5 whitespace-nowrap text-xs"
+                  :class="row.labelMode === 'after' ? '' : '-translate-x-full'"
+                  :style="row.labelMode === 'after' ? { left: `calc(${row.leftPct + row.widthPct}% + 6px)` } : row.labelMode === 'before' ? { left: `calc(${row.leftPct}% - 6px)` } : { left: `calc(${row.leftPct + row.widthPct}% - 8px)` }"
+                >
+                  <span class="font-mono" :class="row.labelMode === 'inside' ? 'text-white' : ''">{{ row.label }}</span>
+                  <span class="tabular-nums" :class="row.labelMode === 'inside' ? 'text-white/80' : 'text-muted-foreground'">{{ fmtMs(row.durationMs) }}</span>
+                </div>
+              </button>
+            </div>
+          </div>
+          <div class="mt-1 flex justify-between font-mono text-[10px] tabular-nums text-muted-foreground">
+            <span>{{ fmtClock(timeline.t0) }}</span>
+            <span>{{ fmtClock(timeline.t0 + timeline.span / 2) }}</span>
+            <span>{{ fmtClock(timeline.tEnd) }}</span>
+          </div>
+        </div>
+      </section>
+
+      <p v-if="!hasTemporal" class="text-muted-foreground">
+        Run has not been handed off to Temporal yet.
+      </p>
+    </template>
+
+    <!-- Span lightbox — the paired events behind a timeline bar. -->
+    <Dialog :open="!!timelineDetail" @update:open="(v) => {
+  if (!v) timelineDetail = null;
+}">
+      <DialogContent class="sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle class="flex items-center gap-2">
+            <span class="truncate font-mono text-base">{{ timelineDetail?.label }}</span>
+            <Badge
+              v-if="timelineDetail"
+              variant="outline"
+              :class="['border text-xs font-medium uppercase', statusClass(timelineRowStatus(timelineDetail))]"
+            >{{ timelineRowStatus(timelineDetail) }}</Badge>
+            <span v-if="timelineDetail" class="text-sm tabular-nums text-muted-foreground">{{ fmtMs(timelineDetail.durationMs) }}</span>
+          </DialogTitle>
+        </DialogHeader>
+        <ol v-if="timelineDetail" class="max-h-[65vh] space-y-1 overflow-y-auto pr-1 text-sm">
+          <li
+            v-for="ev in timelineDetail.events"
+            :key="eventId(ev)"
+            class="overflow-hidden rounded-md border border-black/[0.05]"
+          >
+            <div class="flex items-center gap-3 px-3 py-2">
+              <span class="w-10 shrink-0 font-mono text-xs text-muted-foreground">#{{ eventId(ev) }}</span>
+              <span class="min-w-0 flex-1 truncate font-mono text-xs" :class="eventColor(eventType(ev))">{{ eventType(ev) }}</span>
+              <span class="shrink-0 text-[10px] text-muted-foreground">{{ eventTime(ev) }}</span>
+            </div>
+            <div v-if="isNonEmptyObject(eventAttributes(ev))" class="px-3 pb-3">
+              <pre class="max-h-56 overflow-x-auto rounded-md bg-muted/40 p-3 text-xs">{{ json(eventAttributes(ev)) }}</pre>
+            </div>
+          </li>
+        </ol>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>