@revenexx/studio-integrations 0.1.3 → 0.2.0

package/dist/runtime/pages/integrations/workflows/index.vue

@@ -2,11 +2,13 @@
 import { AddCircle as Plus } from "#solar-icons";
 import { Button } from "@revenexx/studio";
 import WorkflowsTable from "../../../components/Integrations/WorkflowsTable.vue";
+import WorkflowCreateDialog from "../../../components/Integrations/WorkflowCreateDialog.vue";
 useHead({ title: "Workflows \xB7 Revenexx Cockpit" });
-const { workflows, load } = useIntegrationsWorkflows();
+const { workflows, loading, load } = useIntegrationsWorkflows();
 onMounted(() => {
   void load();
 });
+const createOpen = ref(false);
 </script>
 
 <template>
@@ -15,17 +17,17 @@ onMounted(() => {
       title="Workflows"
     >
       <template #actions>
-        <NuxtLink to="/integrations/workflows/new">
-          <Button class="h-7 text-sm">
-            <Plus :size="14" />
-            New workflow
-          </Button>
-        </NuxtLink>
+        <Button class="h-7 text-sm" @click="createOpen = true">
+          <Plus :size="14" />
+          New workflow
+        </Button>
       </template>
     </PageHeader>
 
     <div class="p-4">
-      <WorkflowsTable :workflows="workflows" />
+      <WorkflowsTable :workflows="workflows" :loading="loading" />
     </div>
+
+    <WorkflowCreateDialog v-model:open="createOpen" />
   </IntegrationsLayout>
 </template>

package/dist/runtime/types/integrations.d.ts

@@ -37,6 +37,12 @@ export interface WorkflowNodeRetry {
     backoffSeconds?: number;
     strategy?: RetryStrategy;
 }
+/**
+ * What the engine does when a node still fails after its retries: `fail`
+ * (default) fails the run; `route` records the failure as the node's `error`
+ * output so a wired error edge handles it. Stop and Error always fails.
+ */
+export type WorkflowNodeOnError = 'route' | 'fail';
 export interface WorkflowNodePosition {
     x: number;
     y: number;
@@ -48,10 +54,19 @@ export interface WorkflowNode {
     /** semver pin for the chosen manifest version. */
     nodeVersion: string;
     name?: LocalizedString;
+    /** Optional editor-only note/comment on this node instance (blob `nodes[].notes`). */
+    notes?: string;
     /** Free-form key→value config, validated against the node manifest. */
     config: Record<string, unknown>;
     position?: WorkflowNodePosition;
     retry?: WorkflowNodeRetry;
+    onError?: WorkflowNodeOnError;
+    /**
+     * Per-node execution timeout in seconds (engine start-to-close, 1..7200).
+     * Absent = engine default (10 minutes). For long-running orchestration
+     * nodes, e.g. waiting on a bulk import job.
+     */
+    timeoutSeconds?: number;
 }
 export interface WorkflowEdge {
     id: string;
@@ -64,6 +79,49 @@ export interface WorkflowEdge {
         input?: string;
     };
 }
+/** Editor-only node group: a canvas frame owning member nodes (blob `groups[]`). */
+export interface WorkflowGroup {
+    id: string;
+    label: LocalizedString;
+    /** Member node/trigger handles. */
+    nodeIds: string[];
+    /** Palette index 0..6 (shares the sticky palette). */
+    color?: number;
+    /** Collapsed groups render as one compact card; members hide. */
+    collapsed?: boolean;
+    /** Manually resized frame; absent = derived from the members' bounding box. */
+    rect?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+/** Editor-only sticky note on the canvas (engine-irrelevant; blob `stickies[]`). */
+export interface WorkflowSticky {
+    id: string;
+    /** Note text; markdown-lite (`#`/`##`/`###` headings, `**bold**`), line breaks kept. */
+    content: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    /** Absent → the editor's 240x160 default. */
+    size?: {
+        width: number;
+        height: number;
+    };
+    /** Palette index 0..6 (0 = amber default). */
+    color?: number;
+}
+/** Editor-only workflow icon (BlobDef `icon`): a curated solar icon name or a node-package image URL. */
+export interface WorkflowIcon {
+    kind: 'solar' | 'image';
+    /** Icon-library name (kind=solar). */
+    name?: string;
+    /** Image URL, e.g. a node-package logo (kind=image). */
+    src?: string;
+}
 export interface WorkflowBlob {
     nodeManifestVersion: string;
     name: LocalizedString;
@@ -77,8 +135,22 @@ export interface WorkflowBlob {
         x: number;
         y: number;
     }>;
+    /** Canvas sticky notes (engine-irrelevant annotations, BlobDef `stickies`). */
+    stickies?: WorkflowSticky[];
+    /** Canvas node groups (engine-irrelevant frames, BlobDef `groups`). */
+    groups?: WorkflowGroup[];
+    /** Organisational tags for grouping/filtering (engine-irrelevant, BlobDef `tags`). */
+    tags?: string[];
+    /** Workflow icon shown in lists and headers (engine-irrelevant, BlobDef `icon`). */
+    icon?: WorkflowIcon;
 }
 export type WorkflowExecutionMode = 'async_only' | 'sync_only' | 'caller_decides';
+/**
+ * Build state of a workflow's executable bundle (backend `build_status`). Source
+ * of truth for runnability — the worker pool only runs a workflow once its
+ * bundle is `ready`; the API rejects runs with 409 in any other state.
+ */
+export type WorkflowBuildStatus = 'pending' | 'building' | 'ready' | 'failed';
 export interface Workflow {
     id: number;
     name: string;
@@ -88,6 +160,10 @@ export interface Workflow {
     active: boolean;
     revision: number;
     execution_mode?: WorkflowExecutionMode;
+    /** Bundle build state; `null` on legacy rows the builder never touched. */
+    buildStatus: WorkflowBuildStatus | null;
+    /** Human-readable build failure reason, present when `buildStatus === 'failed'`. */
+    buildError: string | null;
     created_at: string;
     updated_at: string;
 }
@@ -106,12 +182,18 @@ export interface NodeManifestOutput {
     dataType: NodeDataType;
     description?: LocalizedString;
     sourceFromConfig?: string;
+    /** When true, the node's outputs for this manifest are resolved dynamically
+     *  via config:resolve with target 'outputs' (later phase; harmless now). */
+    resolveOutputs?: boolean;
     fallback?: {
         name: string;
         label?: LocalizedString;
     };
+    /** Declared field names of this output's payload, when the manifest
+     *  publishes them. Author-time schema only, never live run data. */
+    fields?: string[] | Record<string, unknown>;
 }
-export type ConfigFieldType = 'string' | 'number' | 'boolean' | 'select' | 'multiselect' | 'object' | 'array' | 'expression' | 'secret-ref' | 'credentials-ref';
+export type ConfigFieldType = 'string' | 'number' | 'boolean' | 'select' | 'multiselect' | 'object' | 'array' | 'expression' | 'secret-ref' | 'credentials-ref' | 'dynamic-schema';
 export interface ConfigFieldOption {
     value: string | number | boolean;
     label: LocalizedString;
@@ -126,12 +208,20 @@ export interface ConfigField {
     placeholder?: LocalizedString;
     expressionAllowed?: boolean;
     options?: ConfigFieldOption[];
+    /** When true, this field's `options` are resolved at author-time via
+     *  config:resolve with target === this field's `key` (see useNodeConfigResolve). */
+    dynamic?: boolean;
     /** sub-fields when type === 'object' (one level deep) */
     properties?: ConfigField[];
     /** item type when type === 'array' */
     items?: ConfigField;
-    /** credential type slug the field binds to when type === 'credentials-ref' (e.g. 'revenexx:business-central'). */
-    credentialType?: string;
+    /** credential type slug(s) the field binds to when type === 'credentials-ref'
+     *  (e.g. 'revenexx:business-central'). An array lets a node accept more than
+     *  one credential type; the picker merges the tenant's credentials across all. */
+    credentialType?: string | string[];
+    /** keys of other config fields this field's options/schema depend on. The
+     *  driving `select` fields also form the node's canvas subtitle. */
+    dependsOn?: string[];
     validation?: {
         pattern?: string;
         min?: number;
@@ -140,6 +230,20 @@ export interface ConfigField {
         maxLength?: number;
     };
 }
+export interface ResolveOption {
+    value: string | number | boolean;
+    label?: LocalizedString;
+}
+export interface NodeConfigResolveResult {
+    options?: ResolveOption[];
+    fields?: ConfigField[];
+    outputs?: NodeManifestOutput[];
+}
+export type ResolveErrorKind = 'building' | 'runtime' | 'forbidden' | 'notfound' | 'generic';
+export interface NodeConfigResolveError {
+    kind: ResolveErrorKind;
+    message: string;
+}
 export interface NodeManifest {
     slug: string;
     version: string;
@@ -148,9 +252,27 @@ export interface NodeManifest {
     description?: LocalizedString;
     /** lucide-vue-next icon name OR mdi:icon-id. */
     icon?: string;
+    /**
+     * Curated palette group path (e.g. ["Business Central", "Sales Orders"]).
+     * Optional manifest field; when absent the palette derives a path from the
+     * source package + slug heuristics.
+     */
+    groups?: LocalizedString[];
+    /** Brand images (category `logo` drives palette/canvas rendering); src is a signed URL. */
+    images?: Array<{
+        src: string;
+        alt?: LocalizedString;
+        title?: LocalizedString;
+        category?: string;
+    }>;
     input: NodeManifestInput;
     outputs: NodeManifestOutput[];
     config?: ConfigField[];
+    /** Source package (editor-side enrichment from GET /nodes; not manifest data). */
+    __package?: {
+        name: string;
+        label: string | null;
+    };
 }
 export interface SecretRecord {
     key: string;
@@ -178,12 +300,21 @@ export interface CredentialTypeField {
     };
 }
 /** A globally-registered credential type — drives the dynamic credential form. */
+/** A brand/logo image shipped with a credential type. `src` is a short-lived
+ *  signed URL minted by the credential-types API (ManifestImageUrlSigner). */
+export interface CredentialTypeImage {
+    src: string;
+    alt?: LocalizedString;
+    category?: 'logo' | 'icon' | 'banner' | 'screenshot' | 'other' | string;
+}
 export interface CredentialType {
     slug: string;
     version: string;
     name: LocalizedString;
     description?: LocalizedString;
     icon?: string;
+    /** Signed logo/brand image URLs from the API (prefer `category: 'logo'`). */
+    images?: CredentialTypeImage[];
     auth_kind: AuthKind;
     fields: CredentialTypeField[];
 }
@@ -196,6 +327,10 @@ export interface Credential {
     status: CredentialStatus;
     /** non-secret field values only (whitelisted types). */
     public_config?: Record<string, unknown>;
+    /** Outcome of the last connection test (persisted by the API). Null when never tested. */
+    last_test_at?: string | null;
+    last_test_ok?: boolean | null;
+    last_test_message?: string | null;
     created_at: string;
     updated_at: string;
 }
@@ -250,12 +385,30 @@ export interface ScheduleEntry {
     nextRunAt: string | null;
     lastRunAt: string | null;
 }
-export type TemplateCategory = 'sync' | 'notification' | 'enrichment' | 'fulfilment' | 'reporting' | 'finance';
+export type TemplateCategory = 'sync' | 'notification' | 'enrichment' | 'fulfilment' | 'reporting' | 'finance' | 'commerce' | 'sales';
 export interface WorkflowTemplate {
     /** kebab-case stable id. */
     slug: string;
     name: string;
+    /** Plain one-liner for cards and pickers (shortDescription, or a de-markdowned excerpt). */
     description: string;
+    /** The full registry description as Markdown; rendered on the detail page. */
+    descriptionMd: string;
+    /** Trigger types from the catalogue listing (schedule/webhook/manual/event). */
+    triggerTypes: TriggerType[];
+    /** Registry images (banner/screenshot categories, signed URLs). */
+    images: Array<{
+        src: string;
+        category?: string;
+        alt?: unknown;
+    }>;
+    /** True once the heavy definition blob has been merged via fetchDetail. */
+    detailLoaded?: boolean;
+    /** Source node package this template ships with (e.g. Business Central). */
+    package?: {
+        name: string;
+        label: string | null;
+    } | null;
     category: TemplateCategory;
     industries: Array<'mechanical-engineering' | 'chemicals' | 'wholesale' | 'manufacturing' | 'retail' | 'any'>;
     /** Vendor slugs this template wires together (used to compute prerequisites). */
@@ -325,11 +478,42 @@ export interface WorkflowRunNodeStep {
     attempt: number;
     durationMs: number | null;
 }
+export interface RunStepRow {
+    node_id: string;
+    node_slug: string;
+    activity_type: string;
+    status: string;
+    attempt: number;
+    scheduled_event_id: number | null;
+    duration_ms: number | null;
+    branch?: string | null;
+    error?: string | null;
+    input?: unknown;
+    output?: unknown;
+    /** Resolved node config for this step (present with include_payloads). */
+    config?: unknown;
+    scheduled_at?: string | null;
+    started_at?: string | null;
+    completed_at?: string | null;
+}
+export interface DeadLetterRow {
+    id: number;
+    workflow_id: number;
+    trigger_id: string | null;
+    source: string | null;
+    trigger_handle: string | null;
+    reason: string | null;
+    status: 'pending' | 'replayed' | 'discarded' | string;
+    created_at: string | null;
+    updated_at: string | null;
+}
 export interface WorkflowRun {
     id: string;
     workflowId: number;
     workflowName: string;
     status: RunStatus;
+    /** Temporal run id for this execution; null when the row predates Temporal. */
+    temporalRunId?: string | null;
     triggerId: string;
     triggerType: TriggerType;
     startedAt: string;
@@ -348,6 +532,8 @@ export interface OutpostEvent {
     id: string;
     /** Topic the event was published on, e.g. "order.created". */
     topic: string;
+    /** Tenant slug from the envelope (empty when the source omits it). */
+    tenantId?: string;
     /** ISO timestamp the event was received. */
     time: string;
     /** Whether delivery may be retried (eligible_for_retry). */

package/dist/runtime/utils/credentialState.d.ts

@@ -0,0 +1,28 @@
+import type { Credential } from '../types/integrations.js';
+/**
+ * The honest, operator-facing state of a credential — derived from the
+ * persisted connection-test result, NOT from `status` (which only tracks the
+ * OAuth refresh lifecycle and defaults to `active` on create, so it can't say
+ * whether the access data actually works).
+ *
+ *   needs_reauth  → an OAuth refresh failed; reconnect required
+ *   connected     → the last connection test passed
+ *   failed        → the last connection test failed (see `message`)
+ *   untested      → never tested — deliberately distinct from a passing test
+ */
+export type CredentialConnState = 'connected' | 'failed' | 'needs_reauth' | 'untested';
+export interface CredentialStateInfo {
+    key: CredentialConnState;
+    label: string;
+    /** Badge/pill classes for this state. */
+    toneClass: string;
+    /** Failure detail, when the state is `failed`. */
+    message?: string | null;
+    /** When the underlying result was recorded (ISO). */
+    at?: string | null;
+}
+type TestableCredential = Pick<Credential, 'status' | 'last_test_ok' | 'last_test_at' | 'last_test_message'>;
+export declare function credentialState(c: TestableCredential): CredentialStateInfo;
+/** "just now" / "3m ago" / "2h ago" / "5d ago" / a date. Empty for no timestamp. */
+export declare function relativeTime(iso?: string | null): string;
+export {};

package/dist/runtime/utils/credentialState.js

@@ -0,0 +1,29 @@
+const TONE = {
+  connected: "bg-emerald-500/10 border-emerald-500/20 text-emerald-700",
+  failed: "bg-rose-500/10 border-rose-500/20 text-rose-700",
+  needs_reauth: "bg-amber-500/10 border-amber-500/20 text-amber-700",
+  untested: "bg-slate-500/10 border-slate-500/20 text-slate-600"
+};
+export function credentialState(c) {
+  if (c.status === "needs_reauth") {
+    return { key: "needs_reauth", label: "Needs reconnect", toneClass: TONE.needs_reauth, at: c.last_test_at };
+  }
+  if (c.last_test_ok === true) {
+    return { key: "connected", label: "Connected", toneClass: TONE.connected, at: c.last_test_at };
+  }
+  if (c.last_test_ok === false) {
+    return { key: "failed", label: "Failed", toneClass: TONE.failed, message: c.last_test_message, at: c.last_test_at };
+  }
+  return { key: "untested", label: "Not Connected", toneClass: TONE.untested };
+}
+export function relativeTime(iso) {
+  if (!iso) return "";
+  const t = new Date(iso).getTime();
+  if (Number.isNaN(t)) return "";
+  const ms = Date.now() - t;
+  if (ms < 6e4) return "just now";
+  if (ms < 36e5) return `${Math.floor(ms / 6e4)}m ago`;
+  if (ms < 864e5) return `${Math.floor(ms / 36e5)}h ago`;
+  if (ms < 30 * 864e5) return `${Math.floor(ms / 864e5)}d ago`;
+  return new Date(iso).toLocaleDateString();
+}

package/dist/runtime/utils/localize.d.ts

@@ -4,6 +4,8 @@
  * object `{de:"…", en:"…"}` (the HTTP client does JSON decoding automatically).
  * JSON-encoded strings like `'{"de":"…","en":"…"}'` are also handled.
  *
- * Priority: 1) current browser locale language, 2) "en", 3) first key found.
+ * Priority: 1) "en", 2) first key found. English is the cockpit default —
+ * there is no working language switcher yet; browser-locale preference
+ * returns together with the switcher.
  */
 export declare function resolveLocalized(value: unknown): string;

package/dist/runtime/utils/localize.js

@@ -4,8 +4,7 @@ export function resolveLocalized(value) {
     const map = value;
     const keys = Object.keys(map);
     if (!keys.length) return "";
-    const lang = typeof navigator !== "undefined" ? navigator.language?.split("-")[0]?.toLowerCase() ?? "en" : "en";
-    const picked = map[lang] ?? map["en"] ?? map[keys[0]];
+    const picked = map["en"] ?? map[keys[0]];
     return typeof picked === "string" ? picked : "";
   }
   if (typeof value !== "string") return String(value);

package/dist/runtime/utils/statusStyle.d.ts

@@ -13,3 +13,9 @@ export declare function statusTone(status: string | null | undefined): StatusTon
 export declare function statusClass(status: string | null | undefined): string;
 /** Tone classes directly (when you already have a tone). */
 export declare function toneClass(tone: StatusTone): string;
+/**
+ * Raw API/Temporal run vocabulary → the cockpit's run-status labels, so a run
+ * never reads "completed" in one surface and "succeeded" in another. Unknown
+ * statuses pass through lowercased.
+ */
+export declare function runStatusLabel(status: string | null | undefined): string;

package/dist/runtime/utils/statusStyle.js

@@ -76,3 +76,18 @@ export function statusClass(status) {
 export function toneClass(tone) {
   return TONE_CLASS[tone];
 }
+export function runStatusLabel(status) {
+  if (!status) return "";
+  const s = String(status).toLowerCase().replace(/[\s-]+/g, "_");
+  switch (s) {
+    case "completed":
+      return "succeeded";
+    case "pending":
+      return "queued";
+    case "terminated":
+    case "timed_out":
+      return "failed";
+    default:
+      return s;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revenexx/studio-integrations",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "type": "module",
   "description": "Integration Studio (core: workflows, node editor, runs, schedules, credentials, secrets, audit) as a standalone, publishable Nuxt module.",
   "main": "./dist/module.mjs",
@@ -25,14 +25,24 @@
   "peerDependencies": {
     "@dagrejs/dagre": "^3.0.0",
     "@revenexx/studio": "*",
+    "@solar-icons/nuxt": "^1.2.0",
+    "@tiptap/core": "^3.28.0",
+    "@tiptap/extension-document": "^3.28.0",
+    "@tiptap/extension-history": "^3.28.0",
+    "@tiptap/extension-paragraph": "^3.28.0",
+    "@tiptap/extension-text": "^3.28.0",
+    "@tiptap/pm": "^3.28.0",
+    "@tiptap/vue-3": "^3.28.0",
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/controls": "^1.1.3",
     "@vue-flow/core": "^1.48.2",
     "@vue-flow/minimap": "^1.5.4",
+    "@vue-flow/node-toolbar": "^1.1.1",
     "lucide-vue-next": "^1.0.0",
     "nuxt": "^4.0.0",
     "vue": "^3.5.0",
-    "@revenexx/studio-shared": "0.1.1"
+    "vue-sonner": "^2.0.0",
+    "@revenexx/studio-shared": "0.1.2"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^1.0.2",

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

@@ -1,169 +0,0 @@
-<script setup>
-import { computed, ref, watch } from "vue";
-import { RefreshCircle as Loader2, ArrowRightUp as OpenIcon } from "#solar-icons";
-import {
-  Badge,
-  Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle
-} from "@revenexx/studio";
-import { statusClass } from "../../utils/statusStyle";
-const props = defineProps({
-  open: { type: Boolean, required: true },
-  run: { type: [Object, null], required: true }
-});
-const emit = defineEmits(["update:open"]);
-const router = useRouter();
-const { getRun, getHistory, getStackTrace } = useIntegrationsRuns();
-const loading = ref(false);
-const result = ref(null);
-const history = ref([]);
-const historySource = ref(null);
-const stackTrace = ref(null);
-const loadError = ref(null);
-function fmt(iso) {
-  if (!iso) return "\u2014";
-  try {
-    return new Date(iso).toLocaleString();
-  } catch {
-    return iso;
-  }
-}
-function fmtDuration(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`;
-}
-const hasResult = computed(() => result.value != null && Object.keys(result.value).length > 0);
-async function load() {
-  const run = props.run;
-  if (!run) return;
-  loading.value = true;
-  loadError.value = null;
-  result.value = null;
-  history.value = [];
-  stackTrace.value = null;
-  try {
-    const [runRes, histRes] = await Promise.allSettled([
-      getRun(run.workflowId, run.id),
-      getHistory(run.workflowId, run.id, { page_size: 50 })
-    ]);
-    if (runRes.status === "fulfilled") {
-      result.value = runRes.value?.result ?? null;
-    }
-    if (histRes.status === "fulfilled") {
-      history.value = histRes.value?.data ?? [];
-      historySource.value = histRes.value?.source ?? null;
-    }
-    if (run.status === "running" || run.status === "failed") {
-      try {
-        stackTrace.value = await getStackTrace(run.workflowId, run.id);
-      } catch {
-        stackTrace.value = null;
-      }
-    }
-  } catch (e) {
-    loadError.value = e?.message ?? "Could not load run details.";
-  } finally {
-    loading.value = false;
-  }
-}
-watch(() => [props.open, props.run?.id], () => {
-  if (props.open && props.run) void load();
-}, { immediate: true });
-function openWorkflow() {
-  if (props.run) router.push(`/integrations/workflows/${props.run.workflowId}`);
-}
-function eventLabel(ev) {
-  return String(ev.event_type ?? ev.eventType ?? ev.type ?? "event");
-}
-</script>
-
-<template>
-  <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
-    <DialogContent class="sm:max-w-2xl">
-      <DialogHeader>
-        <DialogTitle class="flex items-center gap-2">
-          <span class="truncate">{{ run?.workflowName ?? "Run" }}</span>
-          <Badge v-if="run" variant="outline" :class="['text-sm border', statusClass(run.status)]">
-            {{ run.status }}
-          </Badge>
-        </DialogTitle>
-        <DialogDescription class="font-mono text-sm">
-          Run {{ run?.id }}
-        </DialogDescription>
-      </DialogHeader>
-
-      <div v-if="run" class="space-y-4 max-h-[32rem] overflow-y-auto pr-1">
-        <!-- Facts -->
-        <div class="grid grid-cols-2 gap-x-6 gap-y-1 text-sm">
-          <div class="flex justify-between"><span class="text-muted-foreground">Trigger</span><span>{{ run.triggerType }}</span></div>
-          <div class="flex justify-between"><span class="text-muted-foreground">Duration</span><span class="tabular-nums">{{ fmtDuration(run.durationMs) }}</span></div>
-          <div class="flex justify-between"><span class="text-muted-foreground">Started</span><span class="tabular-nums">{{ fmt(run.startedAt) }}</span></div>
-          <div class="flex justify-between"><span class="text-muted-foreground">Finished</span><span class="tabular-nums">{{ fmt(run.finishedAt) }}</span></div>
-        </div>
-
-        <div v-if="run.errorMessage" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
-          {{ run.errorMessage }}
-        </div>
-
-        <div v-if="loading" class="flex items-center gap-2 text-sm text-muted-foreground">
-          <Loader2 :size="14" class="animate-spin" /> Loading details…
-        </div>
-        <div v-else-if="loadError" class="text-sm text-rose-700">
-          {{ loadError }}
-        </div>
-
-        <template v-else>
-          <!-- Result -->
-          <section v-if="hasResult" class="space-y-1">
-            <h4 class="text-mono text-muted-foreground">
-              Result
-            </h4>
-            <pre class="rounded-md bg-muted/40 p-3 text-sm overflow-x-auto max-h-56">{{ JSON.stringify(result, null, 2) }}</pre>
-          </section>
-
-          <!-- History -->
-          <section v-if="history.length" class="space-y-1">
-            <h4 class="text-mono text-muted-foreground">
-              History <span v-if="historySource">· {{ historySource }}</span>
-            </h4>
-            <ol class="space-y-1">
-              <li
-                v-for="(ev, i) in history"
-                :key="i"
-                class="flex items-center gap-2 rounded-md border border-black/[0.05] bg-white px-2 py-1 text-sm"
-              >
-                <span class="tabular-nums text-muted-foreground w-8 shrink-0">{{ ev.event_id ?? i + 1 }}</span>
-                <span class="font-mono truncate">{{ eventLabel(ev) }}</span>
-              </li>
-            </ol>
-          </section>
-
-          <!-- Stack trace -->
-          <section v-if="stackTrace" class="space-y-1">
-            <h4 class="text-mono text-muted-foreground">
-              Stack trace
-            </h4>
-            <pre class="rounded-md bg-slate-900 text-slate-100 p-3 text-sm overflow-x-auto max-h-56">{{ stackTrace }}</pre>
-          </section>
-
-          <p v-if="!hasResult && !history.length && !stackTrace" class="text-sm text-muted-foreground">
-            No execution detail available for this run yet.
-          </p>
-        </template>
-      </div>
-
-      <div class="flex justify-end pt-2">
-        <Button variant="outline" size="sm" @click="openWorkflow">
-          <OpenIcon :size="14" class="mr-1" />
-          Open workflow
-        </Button>
-      </div>
-    </DialogContent>
-  </Dialog>
-</template>