@revenexx/studio-integrations 0.1.4 → 0.3.0

package/dist/runtime/pages/integrations/workflows/[id].vue

@@ -1,12 +1,36 @@
 <script setup>
-import { computed, onMounted, ref, watch } from "vue";
-import { ArrowLeft, ClockCircle as Clock, History as HistoryIcon, RefreshCircle as Loader2, SidebarMinimalistic as PanelLeftOpen, Pause, Play, Diskette as Save, LinkRound as Webhook } from "#solar-icons";
-import { Button } from "@revenexx/studio";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { AltArrowLeft as ArrowLeft, AltArrowRight as Chevron, Copy as CopyIcon, Pause as PauseIcon, RefreshCircle as Loader2, Play, Refresh as RetryIcon, Diskette as Save } from "#solar-icons";
+import {
+  Badge,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea
+} from "@revenexx/studio";
 import WorkflowEditor from "../../../components/Integrations/WorkflowEditor.vue";
+import WorkflowHistoryPanel from "../../../components/Integrations/WorkflowHistoryPanel.vue";
+import WorkflowRunReplayPanel from "../../../components/Integrations/WorkflowRunReplayPanel.vue";
+import WorkflowSettingsDialog from "../../../components/Integrations/WorkflowSettingsDialog.vue";
+import WorkflowDuplicateDialog from "../../../components/Integrations/WorkflowDuplicateDialog.vue";
+import RunsTable from "../../../components/Integrations/RunsTable.vue";
+import RunDetailPanel from "../../../components/Integrations/RunDetailPanel.vue";
+import { toast } from "vue-sonner";
+import { IntegrationsApiError } from "../../../utils/apiError";
+import { payloadFieldsFromBlob } from "../../../data/payloadForm";
+import WorkflowIconView from "../../../components/Integrations/WorkflowIconView.vue";
 const route = useRoute();
 const router = useRouter();
 const { workflows, get, update, toggleActive } = useIntegrationsWorkflows();
-const { focused, toggle: toggleFocus, autoEnable } = useIntegrationsFocus();
+const { autoEnable } = useIntegrationsFocus();
 autoEnable();
 const id = computed(() => Number(route.params.id));
 const workflow = computed(() => workflows.value.find((w) => w.id === id.value) ?? null);
@@ -14,11 +38,9 @@ useHead({ title: () => `${workflow.value?.name ?? "Workflow"} \xB7 Revenexx Cock
 const tab = ref("editor");
 const tabs = [
   { key: "editor", label: "Editor" },
+  { key: "history", label: "History" },
   { key: "runs", label: "Runs" },
-  { key: "triggers", label: "Triggers" },
-  { key: "variables", label: "Variables" },
-  { key: "settings", label: "Settings" },
-  { key: "history", label: "History" }
+  { key: "dead-letters", label: "Missed runs" }
 ];
 const dirtyBlob = ref(null);
 const isDirty = computed(() => dirtyBlob.value !== null);
@@ -32,50 +54,360 @@ const reauthCredentials = computed(() => {
   const blob = JSON.stringify(dirtyBlob.value ?? workflow.value?.blob ?? {});
   return needsReauth.value.filter((c) => blob.includes(c.id));
 });
+const buildBlocked = computed(() => {
+  const s = workflow.value?.buildStatus;
+  return s === "pending" || s === "building" || s === "failed";
+});
+const buildWorking = computed(() => workflow.value?.buildStatus === "building" || workflow.value?.buildStatus === "pending");
+const buildNotice = computed(() => {
+  switch (workflow.value?.buildStatus) {
+    case "building":
+      return { tone: "info", text: "The workflow bundle is still building \u2014 runs are unavailable until it is ready." };
+    case "pending":
+      return { tone: "info", text: "The workflow bundle build is queued \u2014 runs are unavailable until it is ready." };
+    case "failed":
+      return {
+        tone: "error",
+        text: `The workflow bundle failed to build${workflow.value?.buildError ? `: ${workflow.value.buildError}` : "."} Save the workflow again to retry the build.`
+      };
+    default:
+      return null;
+  }
+});
 watch(id, async () => {
   const w = await get(id.value);
   if (!w) await router.push("/integrations/workflows");
   dirtyBlob.value = null;
+  if (tab.value === "runs") void loadRuns(1);
 }, { immediate: true });
 function onChange(blob) {
   dirtyBlob.value = blob;
 }
-const togglingTrigger = ref(null);
-async function toggleTrigger(trg) {
+const editorResetKey = ref(0);
+function discardChanges() {
+  dirtyBlob.value = null;
+  editorResetKey.value++;
+}
+const duplicateOpen = ref(false);
+const duplicateTarget = computed(() => workflow.value ? { id: workflow.value.id, name: workflow.value.name } : null);
+async function onDuplicated(copy) {
+  toast.success(`Duplicated as \u201C${copy.name}\u201D`);
+  await router.push(`/integrations/workflows/${copy.id}`);
+}
+async function onRevisionRestored() {
+  if (!workflow.value) return;
+  await get(workflow.value.id);
+  dirtyBlob.value = null;
+}
+const { trigger: triggerRun, loadForWorkflow, fetchRun, retryRun } = useIntegrationsRuns();
+const running = ref(false);
+const payloadText = ref("{}");
+const payloadError = ref(null);
+const primaryMode = computed(() => workflow.value?.execution_mode === "sync_only" ? "sync" : "async");
+const syncOpen = ref(false);
+const syncLoading = ref(false);
+const syncResponse = ref(null);
+const syncError = ref(null);
+const runModalMode = ref("sync");
+const runModalRunId = ref(null);
+function extractRunId(res) {
+  if (res && typeof res === "object" && "id" in res) {
+    const id2 = res.id;
+    if (id2 !== null && id2 !== void 0 && id2 !== "") return String(id2);
+  }
+  return null;
+}
+function viewRunFromModal(id2) {
+  syncOpen.value = false;
+  void router.push({ query: { ...route.query, run: id2 } });
+}
+function syncErrorMessage(e) {
+  if (e instanceof IntegrationsApiError) {
+    if (e.status === 504) return "Sync run timed out";
+    if (e.status === 422 && e.body?.status === "failed") return "Sync run failed";
+    return e.message || "Sync run failed";
+  }
+  return e?.message || "Sync run failed";
+}
+async function run(mode) {
   if (!workflow.value) return;
-  togglingTrigger.value = trg.id;
+  let payload;
+  try {
+    payload = JSON.parse(payloadText.value || "{}");
+  } catch {
+    payloadError.value = "Trigger payload is not valid JSON.";
+    return;
+  }
+  payloadError.value = null;
+  runModalMode.value = mode;
+  runModalRunId.value = null;
+  syncOpen.value = true;
+  syncLoading.value = true;
+  syncResponse.value = null;
+  syncError.value = null;
+  if (mode === "sync") {
+    try {
+      syncResponse.value = await triggerRun(workflow.value.id, payload, "sync");
+      runModalRunId.value = extractRunId(syncResponse.value);
+    } catch (e) {
+      syncError.value = syncErrorMessage(e);
+      if (e instanceof IntegrationsApiError) {
+        runModalRunId.value = extractRunId(e.body?.run);
+      }
+    } finally {
+      syncLoading.value = false;
+      void loadRuns(1);
+    }
+    return;
+  }
+  running.value = true;
+  try {
+    const res = await triggerRun(workflow.value.id, payload, "async");
+    runModalRunId.value = extractRunId(res);
+  } catch (e) {
+    syncError.value = e.message || "Could not start the run.";
+  } finally {
+    running.value = false;
+    syncLoading.value = false;
+    void loadRuns(1);
+  }
+}
+const payloadDriven = computed(() => payloadFieldsFromBlob(dirtyBlob.value ?? workflow.value?.blob ?? { nodes: [] }).length > 0);
+async function runFromEditor() {
+  if (!workflow.value) return;
+  if (payloadDriven.value) {
+    runPayloadOpen.value = true;
+    return;
+  }
+  await run(primaryMode.value);
+}
+const runPayloadOpen = ref(false);
+const definedEvents = useDefinedEvents();
+const eventLog = useIntegrationsEvents();
+const prefillBusy = ref(null);
+const eventTriggerTopic = computed(() => {
+  const trigger = (workflow.value?.blob.triggers ?? []).find((t) => t.type === "event");
+  const topic = trigger?.config?.event_type;
+  return typeof topic === "string" && topic.trim() !== "" ? topic.trim() : null;
+});
+watch(runPayloadOpen, (open) => {
+  if (open && eventTriggerTopic.value) void definedEvents.load();
+});
+const catalogSample = computed(() => {
+  if (!eventTriggerTopic.value) return null;
+  return definedEvents.emits.value.find((e) => e.topic === eventTriggerTopic.value)?.sample ?? null;
+});
+function envelope(topic, data, extra = {}) {
+  return JSON.stringify({
+    topic,
+    id: extra.id ?? "evt_sample00000000000000000000",
+    tenant_id: extra.tenant_id ?? "",
+    data,
+    metadata: extra.metadata ?? {},
+    time: extra.time ?? (/* @__PURE__ */ new Date()).toISOString()
+  }, null, 2);
+}
+function insertSampleEvent() {
+  const topic = eventTriggerTopic.value;
+  if (!topic || !catalogSample.value) return;
+  payloadText.value = envelope(topic, catalogSample.value);
+  payloadError.value = null;
+}
+async function insertLatestEvent() {
+  const topic = eventTriggerTopic.value;
+  if (!topic || prefillBusy.value) return;
+  prefillBusy.value = "latest";
+  try {
+    await eventLog.loadEvents();
+    const match = eventLog.events.value.filter((e) => e.topic === topic).sort((a, b) => (b.time ?? "").localeCompare(a.time ?? ""))[0];
+    if (!match) {
+      toast.info(`No received ${topic} event in the log yet.`);
+      return;
+    }
+    payloadText.value = envelope(topic, match.data, {
+      id: match.id,
+      tenant_id: match.tenantId ?? "",
+      metadata: match.metadata,
+      time: match.time
+    });
+    payloadError.value = null;
+  } finally {
+    prefillBusy.value = null;
+  }
+}
+async function runFromPayloadDialog(mode) {
+  await run(mode);
+  if (payloadError.value) return;
+  runPayloadOpen.value = false;
+}
+const RUNS_PER_PAGE = 25;
+const wfRuns = ref([]);
+const runsLoading = ref(false);
+const runsError = ref(null);
+const runsPage = ref(1);
+const runsTotal = ref(0);
+const runsLastPage = ref(1);
+let runsPoll = null;
+function stopRunsPoll() {
+  if (runsPoll) {
+    clearInterval(runsPoll);
+    runsPoll = null;
+  }
+}
+function startRunsPoll() {
+  stopRunsPoll();
+  runsPoll = setInterval(() => {
+    if (runsPage.value === 1) void loadRuns(1, { silent: true });
+  }, 3e3);
+}
+onUnmounted(stopRunsPoll);
+async function loadRuns(page = runsPage.value, opts = {}) {
+  if (!workflow.value) return;
+  if (!opts.silent) runsLoading.value = true;
+  runsError.value = null;
+  try {
+    const res = await loadForWorkflow(workflow.value.id, workflow.value.name, {
+      reconcile: page === 1,
+      page,
+      perPage: RUNS_PER_PAGE
+    });
+    wfRuns.value = res.runs;
+    runsTotal.value = res.total;
+    runsLastPage.value = res.lastPage;
+    runsPage.value = res.page;
+  } catch (e) {
+    runsError.value = e.message || "Could not load runs.";
+  } finally {
+    if (!opts.silent) runsLoading.value = false;
+  }
+}
+function goRunsPage(p) {
+  const next = Math.min(Math.max(1, p), runsLastPage.value);
+  if (next !== runsPage.value) void loadRuns(next);
+}
+watch(tab, (t) => {
+  if (t === "runs") {
+    void loadRuns(1);
+    startRunsPoll();
+  } else stopRunsPoll();
+});
+const settingsOpen = ref(false);
+const openRunId = computed(() => route.query.run != null ? String(route.query.run) : null);
+const runView = ref("details");
+const runViews = [
+  { key: "details", label: "Details" },
+  { key: "timeline", label: "Timeline" },
+  { key: "replay", label: "Replay" }
+];
+const openRun = ref(null);
+const openRunError = ref(null);
+async function loadOpenRun() {
+  if (!openRunId.value || !workflow.value) return;
+  openRunError.value = null;
+  try {
+    openRun.value = await fetchRun(workflow.value.id, openRunId.value, workflow.value.name);
+  } catch (e) {
+    openRunError.value = e?.message ?? "Could not load the run.";
+  }
+}
+watch(openRunId, () => {
+  runView.value = route.query.view === "replay" ? "replay" : "details";
+}, { immediate: true });
+watch([openRunId, () => workflow.value?.id], () => {
+  openRun.value = null;
+  openRunError.value = null;
+  if (openRunId.value && workflow.value) void loadOpenRun();
+}, { immediate: true });
+function closeRun(target) {
+  tab.value = target;
+  void router.replace({ query: { ...route.query, run: void 0, view: void 0 } });
+}
+const canRetryOpenRun = computed(() => !!openRun.value && ["succeeded", "failed", "cancelled"].includes(openRun.value.status));
+const retryBusy = ref(false);
+async function retryOpenRun() {
+  if (!openRun.value || retryBusy.value) return;
+  retryBusy.value = true;
+  try {
+    const res = await retryRun(openRun.value.workflowId, openRun.value.id);
+    const newId = res && typeof res === "object" && "id" in res ? String(res.id) : null;
+    toast.success(newId && newId !== openRun.value.id ? `Started run #${newId}` : "Retry requested");
+    void loadRuns(1, { silent: true });
+  } catch (e) {
+    toast.error(e?.message ?? "Could not retry the run.");
+  } finally {
+    retryBusy.value = false;
+  }
+}
+const EXECUTION_MODES = [
+  { value: "async_only", label: "Async only", hint: "Runs are always queued; the trigger returns immediately." },
+  { value: "sync_only", label: "Sync only", hint: "Runs block until they finish and return the result inline." },
+  { value: "caller_decides", label: "Caller decides", hint: "The caller chooses sync or async per run." }
+];
+const executionModeDraft = ref("async_only");
+watch(workflow, (w) => {
+  if (w) executionModeDraft.value = w.execution_mode ?? "async_only";
+}, { immediate: true });
+const savingMode = ref(false);
+function modeLabel(m) {
+  return m === "sync_only" ? "Sync" : m === "caller_decides" ? "Caller decides" : "Async";
+}
+async function saveExecutionMode(mode) {
+  if (!workflow.value || mode === workflow.value.execution_mode) return;
+  const prev = workflow.value.execution_mode ?? "async_only";
+  executionModeDraft.value = mode;
+  savingMode.value = true;
   saveError.value = null;
-  trg.active = !trg.active;
   try {
     await update(workflow.value.id, {
       name: workflow.value.name,
       description: workflow.value.description,
       blob: workflow.value.blob,
       active: workflow.value.active,
-      executionMode: workflow.value.execution_mode
+      executionMode: mode
     });
+    await get(workflow.value.id);
   } catch (e) {
-    trg.active = !trg.active;
-    saveError.value = e.message || "Could not update the trigger.";
+    executionModeDraft.value = prev;
+    saveError.value = e.message || "Could not update the execution mode.";
   } finally {
-    togglingTrigger.value = null;
+    savingMode.value = false;
   }
 }
-const { trigger: triggerRun } = useIntegrationsRuns();
-const running = ref(false);
-const runResult = ref(null);
-const runError = ref(null);
-async function runNow() {
+const savingMeta = ref(false);
+const tagSuggestions = computed(() => {
+  const all = /* @__PURE__ */ new Set();
+  for (const wf of workflows.value) for (const t of wf.blob.tags ?? []) all.add(t);
+  return [...all].sort();
+});
+async function saveWorkflowMeta(meta) {
   if (!workflow.value) return;
-  running.value = true;
-  runError.value = null;
-  runResult.value = null;
+  savingMeta.value = true;
+  saveError.value = null;
   try {
-    runResult.value = await triggerRun(workflow.value.id, {});
+    const blob = JSON.parse(JSON.stringify(dirtyBlob.value ?? workflow.value.blob));
+    blob.name = meta.name;
+    if (meta.description) blob.description = meta.description;
+    else delete blob.description;
+    if (meta.tags.length) blob.tags = [...meta.tags];
+    else delete blob.tags;
+    if (meta.icon) blob.icon = meta.icon;
+    else delete blob.icon;
+    await update(workflow.value.id, {
+      name: meta.name,
+      description: meta.description || null,
+      blob,
+      active: workflow.value.active,
+      executionMode: workflow.value.execution_mode
+    });
+    await get(workflow.value.id);
+    dirtyBlob.value = null;
+    toast.success("Appearance saved");
   } catch (e) {
-    runError.value = e.message || "Could not start the run.";
+    const msg = e.message || "Could not save the appearance.";
+    saveError.value = msg;
+    toast.error(msg);
   } finally {
-    running.value = false;
+    savingMeta.value = false;
   }
 }
 async function save() {
@@ -113,40 +445,85 @@ function formatDateTime(iso) {
          remaining height below the page header. -->
     <div class="flex h-full flex-col">
       <template v-if="workflow">
-        <PageHeader
-        :title="workflow.name"
-      >
+        <PageHeader :title="workflow.name">
+        <template #title>
+          <span class="inline-flex min-w-0 items-center gap-1.5">
+            <NuxtLink to="/integrations/workflows" class="font-normal text-muted-foreground/80 transition-colors hover:text-primary">Workflows</NuxtLink>
+            <Chevron :size="15" weight="Outline" class="text-muted-foreground/50" />
+            <!-- Run open: the breadcrumb extends — name and Runs become crumbs
+                 back into the workflow surface. -->
+            <template v-if="openRunId">
+              <button type="button" class="truncate font-normal text-muted-foreground/80 transition-colors hover:text-primary" @click="closeRun('editor')">{{ workflow.name }}</button>
+              <Chevron :size="15" weight="Outline" class="text-muted-foreground/50" />
+              <button type="button" class="font-normal text-muted-foreground/80 transition-colors hover:text-primary" @click="closeRun('runs')">Runs</button>
+              <Chevron :size="15" weight="Outline" class="text-muted-foreground/50" />
+              <!-- The Temporal run id IS the run's identity; the internal
+                   number only fills in until the run is handed off. -->
+              <span class="truncate font-mono">{{ openRun?.temporalRunId ?? `Run #${openRunId}` }}</span>
+            </template>
+            <template v-else>
+              <span class="flex size-7 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-500">
+                <WorkflowIconView :icon="workflow.blob.icon" :size="16" />
+              </span>
+              <span class="truncate">{{ workflow.name }}</span>
+              <Badge variant="outline" class="ml-1.5 border text-xs font-medium uppercase text-muted-foreground" :title="`Execution mode: ${modeLabel(workflow.execution_mode)}`">
+                {{ modeLabel(workflow.execution_mode) }}
+              </Badge>
+            </template>
+          </span>
+        </template>
         <template #actions>
-          <span v-if="isDirty" class="text-sm text-amber-600">Unsaved changes</span>
-          <Button
-            variant="ghost"
-            size="icon"
-            class="size-7"
-            :title="focused ? 'Show studio sidebar' : 'Hide studio sidebar'"
-            @click="toggleFocus"
-          >
-            <PanelLeftOpen :size="14" :class="focused ? '' : 'rotate-180'" />
-          </Button>
-          <Button variant="outline" class="h-7 text-sm" @click="toggleActive(workflow.id)">
-            <component :is="workflow.active ? Pause : Play" :size="12" />
-            {{ workflow.active ? "Pause" : "Activate" }}
-          </Button>
-          <Button class="h-7 text-sm" :disabled="!isDirty || saving" @click="save">
-            <Loader2 v-if="saving" :size="12" class="animate-spin" />
-            <Save v-else :size="12" />
-            {{ saving ? "Saving\u2026" : "Save" }}
-          </Button>
-          <NuxtLink to="/integrations/workflows">
-            <Button variant="ghost" class="h-7 text-sm">
+          <!-- Run open: run-scoped actions replace the workflow Save. -->
+          <template v-if="openRunId">
+            <Button v-if="canRetryOpenRun" variant="outline" class="h-7 text-sm" :disabled="retryBusy" @click="retryOpenRun">
+              <Loader2 v-if="retryBusy" :size="12" class="animate-spin" />
+              <RetryIcon v-else :size="12" />
+              Retry
+            </Button>
+            <Button class="h-7 text-sm" @click="closeRun('editor')">
               <ArrowLeft :size="12" />
-              Workflows
+              Back to Workflow
             </Button>
-          </NuxtLink>
+          </template>
+          <template v-else>
+            <span
+              v-if="buildWorking"
+              class="inline-flex h-7 items-center gap-1.5 rounded-md border border-sky-500/25 bg-sky-500/10 px-2.5 text-sm text-sky-700"
+              :title="buildNotice?.text"
+            >
+              <Loader2 :size="12" class="animate-spin" />
+              {{ workflow.buildStatus === "building" ? "Building bundle\u2026" : "Build queued\u2026" }}
+            </span>
+            <span v-if="isDirty" class="text-sm text-amber-600">Unsaved changes</span>
+            <Button variant="outline" class="h-7 text-sm" :disabled="saving" title="Duplicate this workflow" @click="duplicateOpen = true">
+              <CopyIcon :size="12" />
+              Duplicate
+            </Button>
+            <Button variant="outline" class="h-7 text-sm" :disabled="!isDirty || saving" title="Discard unsaved changes" @click="discardChanges">
+              Cancel
+            </Button>
+            <Button class="h-7 text-sm" :disabled="!isDirty || saving" @click="save">
+              <Loader2 v-if="saving" :size="12" class="animate-spin" />
+              <Save v-else :size="12" />
+              {{ saving ? "Saving\u2026" : "Save" }}
+            </Button>
+            <Button
+              :variant="workflow.active ? 'outline' : 'default'"
+              class="h-7 text-sm"
+              :class="workflow.active ? 'text-amber-700 hover:text-amber-800' : 'bg-emerald-600 text-white hover:bg-emerald-700'"
+              :title="workflow.active ? 'Pause this workflow' : 'Activate this workflow'"
+              @click="toggleActive(workflow.id)"
+            >
+              <component :is="workflow.active ? PauseIcon : Play" :size="12" />
+              {{ workflow.active ? "Pause" : "Activate" }}
+            </Button>
+          </template>
         </template>
 
       </PageHeader>
 
-      <TabBar v-model="tab" :tabs="tabs" class="shrink-0 px-4" />
+      <TabBar v-if="!openRunId" v-model="tab" :tabs="tabs" class="shrink-0 px-4" />
+      <TabBar v-else v-model="runView" :tabs="runViews" class="shrink-0 px-4" />
 
       <div v-if="saveError" class="border-b border-rose-500/20 bg-rose-500/5 px-4 py-2 text-sm text-rose-700">
         {{ saveError }}
@@ -161,166 +538,194 @@ function formatDateTime(iso) {
         </NuxtLink>.
       </div>
 
-      <!-- Editor tab — fills the remaining height inside the panel via
-           the flex wrapper in the studio layout. -->
-      <div v-if="tab === 'editor'" class="flex-1 min-h-0">
-        <WorkflowEditor :workflow="workflow" @change="onChange" />
-      </div>
-
-      <!-- Runs — trigger a run now; full run list lives on the Runs page. -->
-      <div v-else-if="tab === 'runs'" class="p-6 space-y-3">
-        <div class="rounded-lg border border-black/[0.06] bg-white p-4 flex items-center justify-between gap-3">
-          <div>
-            <h3 class="text-sm font-semibold">
-              Run this workflow
-            </h3>
-            <p class="mt-0.5 text-sm text-muted-foreground">
-              Triggers a manual run via the API. See all executions on the Runs page.
-            </p>
-          </div>
-          <Button :disabled="running" class="h-8 text-sm" @click="runNow">
-            <Loader2 v-if="running" :size="14" class="animate-spin" />
-            <Play v-else :size="14" />
-            {{ running ? "Starting\u2026" : "Run now" }}
-          </Button>
-        </div>
-        <div v-if="runError" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
-          {{ runError }}
-        </div>
-        <pre v-if="runResult" class="overflow-auto rounded-lg border border-black/[0.06] bg-slate-50 p-3 text-xs">{{ runResult }}</pre>
+      <!-- Only the FAILED build state banners (its message matters); the
+           working states live as the header chip — and inside a run the
+           workflow's build state is noise, so nothing shows at all. -->
+      <div
+        v-if="!openRunId && buildNotice && buildNotice.tone === 'error'"
+        class="border-b border-rose-500/20 bg-rose-500/5 px-4 py-2 text-sm text-rose-700"
+      >
+        {{ buildNotice.text }}
       </div>
 
-      <!-- Triggers tab — list of all triggers with sync to webhooks page -->
-      <div v-else-if="tab === 'triggers'" class="p-6 space-y-3">
-        <div
-          v-for="trg in workflow.blob.triggers"
-          :key="trg.id"
-          class="rounded-lg border border-black/[0.06] bg-white p-3 flex items-center gap-3"
-        >
-          <component
-            :is="trg.type === 'schedule' ? Clock : trg.type === 'webhook' ? Webhook : Play"
-            :size="18"
-            class="text-emerald-600"
-          />
-          <div class="flex-1 min-w-0">
-            <div class="text-sm font-medium">
-              {{ trg.type === "schedule" ? "Schedule" : trg.type === "webhook" ? "Webhook" : "Manual" }}
+      <!-- Nested run detail — overview/timeline panel or Replay canvas. -->
+      <template v-if="openRunId">
+        <div v-if="runView !== 'replay'" class="flex-1 overflow-y-auto p-4">
+          <div class="w-full">
+            <RunDetailPanel v-if="openRun" :run="openRun" :view="runView" @changed="loadOpenRun" />
+            <div v-else-if="openRunError" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+              {{ openRunError }}
             </div>
-            <div class="text-sm text-muted-foreground truncate font-mono">
-              <template v-if="trg.type === 'schedule'">
-                cron: {{ trg.config.cron }} ({{ trg.config.timezone ?? "UTC" }})
-              </template>
-              <template v-else-if="trg.type === 'webhook'">
-                {{ trg.config.method }} {{ trg.config.path }}
-              </template>
-              <template v-else>on demand</template>
+            <div v-else class="flex items-center gap-2 p-12 text-sm text-muted-foreground">
+              <Loader2 :size="16" class="animate-spin" /> Loading run…
             </div>
           </div>
-          <div class="flex shrink-0 items-center gap-2">
-            <span class="text-xs" :class="trg.active ? 'text-emerald-600' : 'text-muted-foreground'">
-              {{ trg.active ? "Active" : "Inactive" }}
-            </span>
-            <button
-              type="button"
-              :disabled="togglingTrigger === trg.id"
-              class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors disabled:opacity-50"
-              :class="trg.active ? 'bg-emerald-500' : 'bg-slate-300'"
-              :aria-pressed="trg.active"
-              :title="trg.active ? 'Deactivate trigger' : 'Activate trigger'"
-              @click="toggleTrigger(trg)"
-            >
-              <span
-                class="inline-block size-4 transform rounded-full bg-white shadow transition-transform"
-                :class="trg.active ? 'translate-x-[18px]' : 'translate-x-0.5'"
-              />
-            </button>
-          </div>
         </div>
-        <p class="text-xs text-muted-foreground">
-          A workflow run needs at least one <span class="font-medium">active</span> trigger.
-        </p>
+        <div v-else class="min-h-0 flex-1">
+          <WorkflowRunReplayPanel :workflow="workflow" :initial-run-id="openRunId" single />
+        </div>
+      </template>
+
+      <!-- Editor tab — fills the remaining height inside the panel via
+           the flex wrapper in the studio layout. -->
+      <div v-else-if="tab === 'editor'" class="flex-1 min-h-0">
+        <WorkflowEditor
+          :key="editorResetKey"
+          :workflow="workflow"
+          :run-busy="running || syncLoading"
+          @change="onChange"
+          @run="runFromEditor"
+          @toggle-active="toggleActive(workflow.id)"
+          @open-settings="settingsOpen = true"
+        />
       </div>
 
-      <!-- Variables tab -->
-      <div v-else-if="tab === 'variables'" class="p-6">
-        <div v-if="!Object.keys(workflow.blob.variables ?? {}).length" class="rounded-lg border border-black/[0.06] bg-white p-6 text-center text-sm text-muted-foreground">
-          No variables defined for this workflow.
+      <!-- Runs — this workflow's full execution history. Manual runs start
+           from the editor's Run split-button (payload via its lightbox). -->
+      <div v-else-if="tab === 'runs'" class="p-4 space-y-4 overflow-y-auto">
+        <div v-if="runsError" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+          {{ runsError }}
         </div>
-        <div v-else class="rounded-lg border border-black/[0.06] bg-white">
-          <div class="grid grid-cols-[1fr_120px_1fr] gap-2 border-b border-black/[0.06] px-3 py-2 text-mono text-muted-foreground">
-            <div>Key</div>
-            <div>Type</div>
-            <div>Default</div>
-          </div>
-          <div
-            v-for="(v, key) in workflow.blob.variables ?? {}"
-            :key="key"
-            class="grid grid-cols-[1fr_120px_1fr] gap-2 border-b border-black/[0.04] px-3 py-2 text-sm last:border-b-0"
-          >
-            <div class="font-mono">
-              {{ key }}
-            </div>
-            <div class="text-muted-foreground">
-              {{ v.type }}
-            </div>
-            <div class="font-mono truncate">
-              {{ JSON.stringify(v.default) }}
-            </div>
+
+        <RunsTable
+          :runs="wfRuns"
+          :loading="runsLoading"
+          :pagination="false"
+          :show-workflow="false"
+          empty-text="No runs yet — hit Run in the editor."
+          @changed="() => loadRuns()"
+        />
+
+        <!-- Server pagination — the endpoint pages, so the whole history is reachable. -->
+        <div v-if="runsLastPage > 1 || runsTotal > wfRuns.length" class="flex items-center justify-between text-sm text-muted-foreground">
+          <span class="tabular-nums">Page {{ runsPage }} / {{ runsLastPage }} · {{ runsTotal }} run{{ runsTotal === 1 ? "" : "s" }}</span>
+          <div class="flex gap-2">
+            <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="runsPage <= 1 || runsLoading" @click="goRunsPage(runsPage - 1)">
+              ← Newer
+            </Button>
+            <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="runsPage >= runsLastPage || runsLoading" @click="goRunsPage(runsPage + 1)">
+              Older →
+            </Button>
           </div>
         </div>
       </div>
 
-      <!-- Settings -->
-      <div v-else-if="tab === 'settings'" class="p-6 space-y-4 text-sm">
-        <div class="rounded-lg border border-black/[0.06] bg-white p-4 space-y-2">
-          <div class="text-mono text-muted-foreground">
-            Metadata
-          </div>
-          <div class="grid grid-cols-[120px_1fr] gap-y-2 gap-x-3 text-sm">
-            <div class="text-muted-foreground">
-              ID
-            </div><div class="font-mono">
-              {{ workflow.id }}
-            </div>
-            <div class="text-muted-foreground">
-              Definition
-            </div><div class="font-mono">
-              {{ workflow.blob_definition_version }}
-            </div>
-            <div class="text-muted-foreground">
-              Revision
-            </div><div class="font-mono">
-              r{{ workflow.revision }}
-            </div>
-            <div class="text-muted-foreground">
-              Created
-            </div><div>{{ formatDateTime(workflow.created_at) }}</div>
-            <div class="text-muted-foreground">
-              Updated
-            </div><div>{{ formatDateTime(workflow.updated_at) }}</div>
-          </div>
-        </div>
+      <!-- Dead letters — triggers that never produced a run -->
+      <div v-else-if="tab === 'dead-letters'" class="p-6 overflow-y-auto">
+        <IntegrationsDeadLettersPanel :workflow-id="workflow.id" />
       </div>
 
-      <!-- History -->
-      <div v-else-if="tab === 'history'" class="p-6">
-        <div class="rounded-lg border border-black/[0.06] bg-white p-6 text-center">
-          <div class="flex size-12 items-center justify-center rounded-full bg-slate-100 text-slate-500 mb-3 mx-auto">
-            <HistoryIcon :size="22" />
-          </div>
-          <h3 class="text-sm font-semibold">
-            {{ workflow.revision }} revision{{ workflow.revision === 1 ? "" : "s" }}
-          </h3>
-          <p class="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
-            Every save that changes the blob bumps the revision and snapshots the previous one. Once history endpoints land you'll be able to diff and roll back from here.
-          </p>
-        </div>
-        </div>
+      <!-- History — n8n-style: read-only canvas preview + revision list. -->
+      <div v-else-if="tab === 'history'" class="flex-1 min-h-0">
+        <WorkflowHistoryPanel :workflow="workflow" @restored="onRevisionRestored" />
+      </div>
       </template>
 
       <div v-else class="p-12 text-center text-sm text-muted-foreground">
         Loading…
       </div>
     </div>
+
+    <!-- Run-with-payload lightbox — opened by the editor Run split-button. -->
+    <Dialog v-model:open="runPayloadOpen">
+      <DialogContent class="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Run with payload</DialogTitle>
+          <DialogDescription class="text-sm">
+            Starts a manual run with this trigger payload. The result lands on the Runs tab.
+          </DialogDescription>
+        </DialogHeader>
+        <div v-if="eventTriggerTopic" class="flex flex-wrap items-center gap-1.5">
+          <span class="text-xs text-muted-foreground">Prefill <code class="font-mono">{{ eventTriggerTopic }}</code>:</span>
+          <Button
+            variant="outline"
+            class="h-7 text-xs"
+            :disabled="!catalogSample"
+            :title="catalogSample ? 'Insert the catalog sample payload' : 'The event catalog has no sample for this topic.'"
+            @click="insertSampleEvent"
+          >
+            Sample event
+          </Button>
+          <Button
+            variant="outline"
+            class="h-7 text-xs"
+            :disabled="prefillBusy !== null"
+            title="Insert the latest received event of this topic"
+            @click="insertLatestEvent"
+          >
+            <Loader2 v-if="prefillBusy === 'latest'" :size="12" class="animate-spin" />
+            Latest real event
+          </Button>
+        </div>
+        <div class="space-y-1">
+          <IntegrationsRunPayloadInput v-if="workflow" v-model="payloadText" :blob="workflow.blob" />
+          <p v-if="payloadError" class="text-xs text-rose-600">
+            {{ payloadError }}
+          </p>
+        </div>
+        <div v-if="workflow" class="flex items-center justify-end gap-2">
+          <template v-if="workflow.execution_mode === 'caller_decides'">
+            <Button
+              variant="outline"
+              :disabled="running || syncLoading || buildBlocked"
+              :title="buildBlocked ? 'The workflow bundle is not ready to run yet.' : void 0"
+              class="h-8 text-sm"
+              @click="runFromPayloadDialog('sync')"
+            >
+              <Loader2 v-if="syncLoading" :size="14" class="animate-spin" />
+              <Play v-else :size="14" />
+              Run (sync)
+            </Button>
+            <Button
+              :disabled="running || syncLoading || buildBlocked"
+              :title="buildBlocked ? 'The workflow bundle is not ready to run yet.' : void 0"
+              class="h-8 text-sm"
+              @click="runFromPayloadDialog('async')"
+            >
+              <Loader2 v-if="running" :size="14" class="animate-spin" />
+              <Play v-else :size="14" />
+              Run (async)
+            </Button>
+          </template>
+          <Button
+            v-else
+            :disabled="running || syncLoading || buildBlocked"
+            :title="buildBlocked ? 'The workflow bundle is not ready to run yet.' : void 0"
+            class="h-8 text-sm"
+            @click="runFromPayloadDialog(primaryMode)"
+          >
+            <Loader2 v-if="running || syncLoading" :size="14" class="animate-spin" />
+            <Play v-else :size="14" />
+            Run ({{ primaryMode }})
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+
+    <IntegrationsRunResponseModal
+      :open="syncOpen"
+      :loading="syncLoading"
+      :mode="runModalMode"
+      :response="syncResponse"
+      :error="syncError"
+      :run-id="runModalRunId"
+      @update:open="(v) => syncOpen = v"
+      @view-run="viewRunFromModal"
+    />
+
+    <WorkflowSettingsDialog
+      v-if="workflow"
+      v-model:open="settingsOpen"
+      :workflow="workflow"
+      :modes="EXECUTION_MODES"
+      :mode-draft="executionModeDraft"
+      :saving-mode="savingMode"
+      :saving-meta="savingMeta"
+      :tag-suggestions="tagSuggestions"
+      @change-mode="(m) => saveExecutionMode(m)"
+      @save-meta="saveWorkflowMeta"
+    />
+
+    <WorkflowDuplicateDialog v-model:open="duplicateOpen" :workflow="duplicateTarget" @duplicated="onDuplicated" />
   </IntegrationsLayout>
 </template>