@revenexx/studio-integrations 0.1.4 → 0.3.0

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

@@ -1,14 +1,21 @@
 import '@vue-flow/core/dist/style.css';
 import '@vue-flow/core/dist/theme-default.css';
-import '@vue-flow/controls/dist/style.css';
 import '@vue-flow/minimap/dist/style.css';
 import type { Workflow, WorkflowBlob } from '../../types/integrations.js';
 type __VLS_Props = {
     workflow: Workflow;
+    /** Busy flag for the control-pane Play button (a run is being triggered). */
+    runBusy?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (blob: WorkflowBlob) => any;
+    run: () => any;
+    toggleActive: () => any;
+    openSettings: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onChange?: ((blob: WorkflowBlob) => any) | undefined;
+    onRun?: (() => any) | undefined;
+    onToggleActive?: (() => any) | undefined;
+    onOpenSettings?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -0,0 +1,12 @@
+import '@vue-flow/core/dist/style.css';
+import '@vue-flow/core/dist/theme-default.css';
+import type { Workflow } from '../../types/integrations.js';
+type __VLS_Props = {
+    workflow: Workflow;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    restored: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRestored?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,417 @@
+<script setup>
+import { computed, markRaw, nextTick, onMounted, provide, ref, watch } from "vue";
+import {
+  MarkerType,
+  PanOnScrollMode,
+  VueFlow,
+  useVueFlow
+} from "@vue-flow/core";
+import { Background } from "@vue-flow/background";
+import { History as HistoryIcon, RefreshCircle as Loader2 } from "#solar-icons";
+import { Badge, Button } from "@revenexx/studio";
+import { toast } from "vue-sonner";
+import "@vue-flow/core/dist/style.css";
+import "@vue-flow/core/dist/theme-default.css";
+import WorkflowNodeView from "./WorkflowNodeView.vue";
+import WorkflowTriggerView from "./WorkflowTriggerView.vue";
+import StickyNoteView from "./StickyNoteView.vue";
+import GroupFrameView from "./GroupFrameView.vue";
+import WorkflowEdgeView from "./WorkflowEdgeView.vue";
+import NodeDynamicOutputsResolver from "./NodeDynamicOutputsResolver.vue";
+import { findManifest } from "../../data/integrationNodeCatalog";
+import { useIntegrationsRevisions } from "../../composables/useIntegrationsRevisions";
+const props = defineProps({
+  workflow: { type: Object, required: true }
+});
+const emit = defineEmits(["restored"]);
+const revisionsApi = useIntegrationsRevisions();
+const entries = ref([]);
+const page = ref(1);
+const lastPage = ref(1);
+const listLoading = ref(false);
+const selected = ref(null);
+const detailLoading = ref(false);
+const restoring = ref(null);
+const detailCache = /* @__PURE__ */ new Map();
+async function loadList(reset = false) {
+  if (listLoading.value) return;
+  listLoading.value = true;
+  try {
+    const target = reset ? 1 : page.value;
+    const res = await revisionsApi.list(props.workflow.id, target);
+    entries.value = reset ? res.revisions : [...entries.value, ...res.revisions];
+    page.value = res.meta.current_page;
+    lastPage.value = res.meta.last_page;
+  } catch {
+  } finally {
+    listLoading.value = false;
+  }
+}
+function loadMore() {
+  if (page.value >= lastPage.value) return;
+  page.value += 1;
+  void loadList();
+}
+const previewBlob = ref(props.workflow.blob);
+const dynamicOutputs = ref({});
+const dynamicOutputNodes = computed(() => previewBlob.value.nodes.filter((n) => {
+  const m = findManifest(n.nodeSlug, n.nodeVersion);
+  return (m?.outputs ?? []).some((o) => o.resolveOutputs === true);
+}));
+function onResolvedOutputs(nodeId, outputs) {
+  dynamicOutputs.value = { ...dynamicOutputs.value, [nodeId]: outputs };
+  buildPreview(previewBlob.value);
+}
+const previewNodes = ref([]);
+const previewEdges = ref([]);
+const preview = useVueFlow("workflow-history-preview");
+provide("workflow-node-actions", { duplicate: () => {
+}, remove: () => {
+} });
+function edgeColorByKind(kind) {
+  switch (kind) {
+    case "success":
+      return "#10b981";
+    case "error":
+      return "#f43f5e";
+    case "branch-true":
+      return "#10b981";
+    case "branch-false":
+      return "#f59e0b";
+    case "branch":
+      return "#8b5cf6";
+    default:
+      return "#94a3b8";
+  }
+}
+const GROUP_PAD = 24;
+const GROUP_LABEL_ROOM = 26;
+function previewGroupNodes(blob, nodePos) {
+  return (blob.groups ?? []).map((g, i) => {
+    let minX = Number.POSITIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (const id of g.nodeIds) {
+      const pos = nodePos(id);
+      minX = Math.min(minX, pos.x);
+      minY = Math.min(minY, pos.y);
+      maxX = Math.max(maxX, pos.x + 220);
+      maxY = Math.max(maxY, pos.y + 64);
+    }
+    if (!Number.isFinite(minX)) return null;
+    return {
+      id: g.id,
+      type: "group",
+      position: { x: Math.round(minX - GROUP_PAD), y: Math.round(minY - GROUP_PAD - GROUP_LABEL_ROOM) },
+      zIndex: -50 + i,
+      draggable: false,
+      selectable: false,
+      data: {
+        group: { ...g, collapsed: false },
+        rect: {
+          width: Math.round(maxX - minX + GROUP_PAD * 2),
+          height: Math.round(maxY - minY + GROUP_PAD * 2 + GROUP_LABEL_ROOM)
+        },
+        memberCount: g.nodeIds.length
+      }
+    };
+  }).filter((n) => n !== null);
+}
+function stickyArea(s) {
+  return (s.size?.width ?? 240) * (s.size?.height ?? 160);
+}
+function buildPreview(blob) {
+  const triggerPos = (id, i) => blob.triggerPositions?.[id] ?? { x: -40, y: 60 + i * 140 };
+  const nodePos = (id) => {
+    const wn = blob.nodes.find((n) => n.id === id);
+    if (wn) return { x: wn.position?.x ?? 0, y: wn.position?.y ?? 0 };
+    const ti = blob.triggers.findIndex((t) => t.id === id);
+    if (ti >= 0) return triggerPos(id, ti);
+    return { x: 0, y: 0 };
+  };
+  const pickSourceSide = (_sourceId, _targetId) => "bottom";
+  const opposite = (s) => s === "top" ? "bottom" : s === "right" ? "left" : s === "bottom" ? "top" : "right";
+  const edgeKind = (sourceNodeId, output) => {
+    const wn = blob.nodes.find((n) => n.id === sourceNodeId);
+    if (!wn) return "default";
+    const manifest = findManifest(wn.nodeSlug, wn.nodeVersion);
+    if (!manifest) return "default";
+    if (output === "true") return "branch-true";
+    if (output === "false") return "branch-false";
+    if (output === "error") return "error";
+    const outs = [...manifest.outputs ?? [], ...dynamicOutputs.value[sourceNodeId] ?? []];
+    const portDef = outs.find((o) => o.name === output);
+    if (portDef) {
+      if (portDef.kind === "error") return "error";
+      if (portDef.kind === "branch") return "branch";
+      return "success";
+    }
+    for (const o of manifest.outputs ?? []) {
+      if (o.sourceFromConfig) {
+        if (o.kind === "error") return "error";
+        if (o.kind === "branch") return "branch";
+      }
+    }
+    return "default";
+  };
+  const stickies = [...blob.stickies ?? []].sort((a, b) => stickyArea(b) - stickyArea(a));
+  previewNodes.value = [
+    ...previewGroupNodes(blob, nodePos),
+    ...stickies.map((s, i) => ({
+      id: s.id,
+      type: "sticky",
+      position: { x: s.position.x, y: s.position.y },
+      zIndex: -100 + i,
+      draggable: false,
+      data: { sticky: s, onUpdate: () => {
+      }, onRemove: () => {
+      } }
+    })),
+    ...blob.triggers.map((t, i) => ({
+      id: t.id,
+      type: "trigger",
+      position: triggerPos(t.id, i),
+      draggable: false,
+      data: t
+    })),
+    ...blob.nodes.map((n) => ({
+      id: n.id,
+      type: "workflow",
+      position: n.position ?? { x: 240, y: 80 },
+      draggable: false,
+      data: { ...n, __resolvedOutputs: dynamicOutputs.value[n.id] }
+    }))
+  ];
+  previewEdges.value = blob.edges.map((e) => {
+    const kind = edgeKind(e.from.nodeId, e.from.output);
+    const wn = blob.nodes.find((n) => n.id === e.from.nodeId);
+    const manifest = wn ? findManifest(wn.nodeSlug, wn.nodeVersion) : null;
+    const isBranchPort = (manifest?.outputs ?? []).some((o) => o.sourceFromConfig) || ["true", "false", "error"].includes(e.from.output);
+    const srcSide = pickSourceSide(e.from.nodeId, e.to.nodeId);
+    return {
+      id: e.id,
+      source: e.from.nodeId,
+      target: e.to.nodeId,
+      sourceHandle: `${e.from.output}__${srcSide}`,
+      targetHandle: `__in__${opposite(srcSide)}`,
+      type: "flow",
+      selectable: false,
+      data: { kind, label: isBranchPort ? e.from.output : void 0 },
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        width: 16,
+        height: 16,
+        color: edgeColorByKind(kind)
+      }
+    };
+  });
+  void nextTick(() => {
+    preview.updateNodeInternals(previewNodes.value.map((n) => n.id));
+    void preview.fitView({ padding: 0.2, duration: 250, maxZoom: 1 });
+  });
+}
+async function select(revision) {
+  selected.value = revision;
+  if (revision === null) {
+    previewBlob.value = props.workflow.blob;
+    buildPreview(props.workflow.blob);
+    return;
+  }
+  const cached = detailCache.get(revision);
+  if (cached) {
+    previewBlob.value = cached;
+    buildPreview(cached);
+    return;
+  }
+  detailLoading.value = true;
+  try {
+    const detail = await revisionsApi.get(props.workflow.id, revision);
+    detailCache.set(revision, detail.blob);
+    if (selected.value === revision) {
+      previewBlob.value = detail.blob;
+      buildPreview(detail.blob);
+    }
+  } catch (e) {
+    toast.error(e?.message ?? "Could not load the revision.");
+  } finally {
+    detailLoading.value = false;
+  }
+}
+async function restoreRevision(rev) {
+  if (!confirm(`Restore revision ${rev.revision}? The current version is archived first, then the workflow is rebuilt from this snapshot.`)) return;
+  restoring.value = rev.revision;
+  try {
+    await revisionsApi.restore(props.workflow.id, rev.revision);
+    toast.success(`Revision ${rev.revision} restored`);
+    detailCache.clear();
+    emit("restored");
+    await loadList(true);
+    void select(null);
+  } catch (e) {
+    toast.error(e?.message ?? "Could not restore the revision.");
+  } finally {
+    restoring.value = null;
+  }
+}
+watch(() => props.workflow.revision, () => {
+  if (selected.value === null) buildPreview(props.workflow.blob);
+});
+function formatDateTime(iso) {
+  if (!iso) return "\u2014";
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return String(iso);
+  }
+}
+const nodeTypes = {
+  workflow: markRaw(WorkflowNodeView),
+  trigger: markRaw(WorkflowTriggerView),
+  sticky: markRaw(StickyNoteView),
+  group: markRaw(GroupFrameView)
+};
+const edgeTypes = {
+  flow: markRaw(WorkflowEdgeView)
+};
+const previewTitle = computed(() => selected.value === null ? `Current version \xB7 revision ${props.workflow.revision}` : `Revision ${selected.value} (read-only)`);
+onMounted(() => {
+  void loadList(true);
+  void select(null);
+});
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-1">
+    <!-- Read-only canvas preview -->
+    <div class="relative flex-1 min-w-0 bg-[#f7f6fb]">
+      <VueFlow
+        id="workflow-history-preview"
+        v-model:nodes="previewNodes"
+        v-model:edges="previewEdges"
+        :node-types="nodeTypes"
+        :edge-types="edgeTypes"
+        :default-edge-options="{ type: 'flow' }"
+        :nodes-draggable="false"
+        :nodes-connectable="false"
+        :elements-selectable="false"
+        :edges-updatable="false"
+        :pan-on-scroll-mode="PanOnScrollMode.Free"
+        :delete-key-code="null"
+        :min-zoom="0.25"
+        :max-zoom="2"
+      >
+        <Background pattern-color="#cbd5e1" :gap="20" :size="1.2" />
+      </VueFlow>
+
+      <!-- Headless dynamic-output resolvers — render nothing. -->
+      <NodeDynamicOutputsResolver
+        v-for="n in dynamicOutputNodes"
+        :key="`dyn-out-${n.id}`"
+        :node-id="n.id"
+        :slug="n.nodeSlug"
+        :version="n.nodeVersion"
+        :config="n.config ?? {}"
+        :static-outputs="findManifest(n.nodeSlug, n.nodeVersion)?.outputs ?? []"
+        @resolved="onResolvedOutputs"
+      />
+
+      <!-- Which version is on the canvas -->
+      <div class="absolute top-3 left-3 z-10 flex items-center gap-2 rounded-lg border border-black/[0.08] bg-white/95 px-2.5 py-1.5 text-sm shadow-sm backdrop-blur-sm">
+        <HistoryIcon :size="13" class="text-muted-foreground" />
+        <span class="font-medium">{{ previewTitle }}</span>
+        <Loader2 v-if="detailLoading" :size="13" class="animate-spin text-muted-foreground" />
+      </div>
+    </div>
+
+    <!-- Revision list -->
+    <aside class="flex w-80 shrink-0 flex-col border-l border-black/[0.06] bg-white">
+      <div class="border-b border-black/[0.06] px-3 py-2">
+        <div class="text-sm font-semibold">Version history</div>
+        <p class="text-sm text-muted-foreground">
+          Every save archives the previous revision; the newest one is what runs while the workflow is active.
+        </p>
+      </div>
+
+      <div class="flex-1 overflow-y-auto p-2 space-y-1">
+        <!-- Current (live) version -->
+        <button
+          type="button"
+          class="group w-full rounded-lg border p-2.5 text-left transition"
+          :class="selected === null ? 'border-primary/40 bg-primary/[0.04]' : 'border-transparent hover:border-black/[0.08] hover:bg-muted/30'"
+          @click="select(null)"
+        >
+          <div class="flex items-center justify-between gap-2">
+            <span class="text-sm font-medium tabular-nums">{{ formatDateTime(workflow.updated_at) }}</span>
+            <Badge variant="outline" class="text-xs font-medium uppercase border-emerald-500/30 text-emerald-700">Current</Badge>
+            <Badge
+              variant="outline"
+              class="text-xs font-medium uppercase"
+              :class="workflow.active ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700' : 'border-black/[0.08] text-muted-foreground'"
+              :title="workflow.active ? 'Triggers are armed; this revision is what runs.' : 'Workflow is paused; activating runs this revision.'"
+            >
+              {{ workflow.active ? "Active" : "Paused" }}
+            </Badge>
+          </div>
+          <div class="mt-0.5 text-sm text-muted-foreground">Revision {{ workflow.revision }}</div>
+        </button>
+
+        <!-- Archived revisions -->
+        <div
+          v-for="rev in entries"
+          :key="rev.id"
+          class="group relative w-full rounded-lg border transition"
+          :class="selected === rev.revision ? 'border-primary/40 bg-primary/[0.04]' : 'border-transparent hover:border-black/[0.08] hover:bg-muted/30'"
+        >
+          <button type="button" class="w-full p-2.5 text-left" @click="select(rev.revision)">
+            <div class="flex items-center justify-between gap-2">
+              <span class="text-sm font-medium tabular-nums">{{ formatDateTime(rev.archived_at) }}</span>
+            </div>
+            <div class="mt-0.5 text-sm text-muted-foreground">Revision {{ rev.revision }}</div>
+          </button>
+          <div class="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 transition group-hover:opacity-100">
+            <Button
+              variant="outline"
+              size="sm"
+              class="h-6 bg-white text-sm"
+              :disabled="restoring !== null"
+              @click.stop="restoreRevision(rev)"
+            >
+              <Loader2 v-if="restoring === rev.revision" :size="11" class="mr-1 animate-spin" />
+              Restore
+            </Button>
+          </div>
+        </div>
+
+        <p v-if="!entries.length && !listLoading" class="px-2 py-6 text-center text-sm text-muted-foreground">
+          No archived revisions yet — save a change to create the first snapshot.
+        </p>
+        <p v-if="revisionsApi.error.value" class="px-2 py-2 text-sm text-rose-600">
+          {{ revisionsApi.error.value }}
+        </p>
+
+        <div v-if="listLoading && !entries.length" class="space-y-2 px-2 py-2">
+          <div v-for="n in 5" :key="`sk-rev-${n}`" class="flex items-center gap-3 py-1.5">
+            <div class="size-7 shrink-0 rounded-md bg-black/[0.07] animate-pulse" />
+            <div class="min-w-0 flex-1 space-y-1.5">
+              <div class="h-3 w-1/3 rounded bg-black/[0.07] animate-pulse" />
+              <div class="h-3 w-1/2 rounded bg-black/[0.05] animate-pulse" />
+            </div>
+          </div>
+        </div>
+        <div v-else-if="listLoading" class="flex justify-center py-3">
+          <Loader2 :size="15" class="animate-spin text-muted-foreground" />
+        </div>
+        <Button
+          v-else-if="page < lastPage"
+          variant="ghost"
+          size="sm"
+          class="w-full text-sm"
+          @click="loadMore"
+        >
+          Load older revisions
+        </Button>
+      </div>
+    </aside>
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+import '@vue-flow/core/dist/style.css';
+import '@vue-flow/core/dist/theme-default.css';
+import type { Workflow } from '../../types/integrations.js';
+type __VLS_Props = {
+    workflow: Workflow;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    restored: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRestored?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,10 @@
+import type { WorkflowIcon } from '../../types/integrations.js';
+type __VLS_PublicProps = {
+    modelValue?: WorkflowIcon | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: WorkflowIcon | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: WorkflowIcon | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,89 @@
+<script setup>
+import { computed, ref } from "vue";
+import { AltArrowDown as ChevronDown } from "#solar-icons";
+import { Popover, PopoverContent, PopoverTrigger } from "@revenexx/studio";
+import { WORKFLOW_SOLAR_ICONS, imageIdFromSrc, nodeLogoOptions } from "../../data/workflowIconCatalog";
+import WorkflowIconView from "./WorkflowIconView.vue";
+const model = defineModel({ type: [Object, null], ...{ default: null } });
+const open = ref(false);
+const logos = computed(() => nodeLogoOptions());
+function pick(icon) {
+  model.value = icon;
+  open.value = false;
+}
+function isSolar(name) {
+  return model.value?.kind === "solar" && model.value.name === name;
+}
+function isImage(id) {
+  if (model.value?.kind !== "image") return false;
+  return (imageIdFromSrc(model.value.src) ?? model.value.src) === id;
+}
+const selectedLabel = computed(() => {
+  if (!model.value) return "Default icon";
+  if (model.value.kind === "solar") return model.value.name ?? "Icon";
+  const id = imageIdFromSrc(model.value.src) ?? model.value.src;
+  return logos.value.find((l) => l.id === id)?.label ?? "Image";
+});
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <button
+        type="button"
+        class="flex h-9 w-full items-center gap-2 rounded-md border border-black/[0.08] bg-white px-2.5 text-left text-sm transition hover:border-black/20"
+      >
+        <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-500">
+          <WorkflowIconView :icon="model" :size="14" />
+        </span>
+        <span class="min-w-0 flex-1 truncate" :class="model ? '' : 'text-muted-foreground'">
+          {{ selectedLabel }}
+        </span>
+        <ChevronDown :size="14" class="shrink-0 text-muted-foreground" />
+      </button>
+    </PopoverTrigger>
+    <PopoverContent align="start" class="w-80 rounded-lg border border-black/[0.06] bg-white p-2 shadow-lg">
+      <div class="max-h-64 space-y-2 overflow-y-auto pr-1">
+        <div class="flex flex-wrap gap-1">
+          <button
+            type="button"
+            class="flex size-8 items-center justify-center rounded-md border text-sm text-muted-foreground transition hover:bg-muted/50"
+            :class="!model ? 'border-emerald-500/40 bg-emerald-500/10' : 'border-transparent'"
+            title="No icon (default glyph)"
+            @click="pick(null)"
+          >
+            —
+          </button>
+          <button
+            v-for="(comp, name) in WORKFLOW_SOLAR_ICONS"
+            :key="name"
+            type="button"
+            class="flex size-8 items-center justify-center rounded-md border text-slate-600 transition hover:bg-muted/50"
+            :class="isSolar(String(name)) ? 'border-emerald-500/40 bg-emerald-500/10' : 'border-transparent'"
+            :title="String(name)"
+            @click="pick({ kind: 'solar', name: String(name) })"
+          >
+            <component :is="comp" :size="16" />
+          </button>
+        </div>
+
+        <template v-if="logos.length">
+          <div class="text-mono text-muted-foreground">Integrations</div>
+          <div class="flex flex-wrap gap-1">
+            <button
+              v-for="l in logos"
+              :key="l.id"
+              type="button"
+              class="flex size-8 items-center justify-center rounded-md border transition hover:bg-muted/50"
+              :class="isImage(l.id) ? 'border-emerald-500/40 bg-emerald-500/10' : 'border-black/[0.06] bg-white'"
+              :title="l.label"
+              @click="pick({ kind: 'image', src: l.id })"
+            >
+              <img :src="l.src" class="size-4 object-contain" alt="">
+            </button>
+          </div>
+        </template>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>

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

@@ -0,0 +1,10 @@
+import type { WorkflowIcon } from '../../types/integrations.js';
+type __VLS_PublicProps = {
+    modelValue?: WorkflowIcon | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: WorkflowIcon | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: WorkflowIcon | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,10 @@
+import type { WorkflowIcon } from '../../types/integrations.js';
+type __VLS_Props = {
+    icon?: WorkflowIcon | null;
+    size?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    icon: WorkflowIcon | null;
+    size: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,35 @@
+<script setup>
+import { computed, onMounted } from "vue";
+import { freshImageSrc, imageIdFromSrc, solarIconFor } from "../../data/workflowIconCatalog";
+import { useIntegrationsNodes } from "../../composables/useIntegrationsNodes";
+const props = defineProps({
+  icon: { type: [Object, null], required: false, default: null },
+  size: { type: Number, required: false, default: 14 }
+});
+const { load } = useIntegrationsNodes();
+onMounted(() => {
+  if (props.icon?.kind === "image") void load();
+});
+const resolvedSrc = computed(() => {
+  if (props.icon?.kind !== "image" || !props.icon.src) return null;
+  const fresh = freshImageSrc(props.icon.src);
+  if (fresh) return fresh;
+  if (imageIdFromSrc(props.icon.src)) return null;
+  return /^https?:\/\//.test(props.icon.src) ? props.icon.src : null;
+});
+</script>
+
+<template>
+  <img
+    v-if="resolvedSrc"
+    :src="resolvedSrc"
+    :style="{ width: `${props.size}px`, height: `${props.size}px` }"
+    class="object-contain"
+    alt=""
+  >
+  <component
+    :is="solarIconFor(props.icon?.kind === 'solar' ? props.icon.name : void 0)"
+    v-else
+    :size="props.size"
+  />
+</template>

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

@@ -0,0 +1,10 @@
+import type { WorkflowIcon } from '../../types/integrations.js';
+type __VLS_Props = {
+    icon?: WorkflowIcon | null;
+    size?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    icon: WorkflowIcon | null;
+    size: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,6 +1,10 @@
-import type { WorkflowNode } from '../../types/integrations.js';
+import type { NodeManifestOutput, WorkflowNode } from '../../types/integrations.js';
 interface NodeData extends WorkflowNode {
     __selected?: boolean;
+    /** Server-resolved + merged output ports (PO-143 Phase 3), injected by the
+     *  editor without persisting to the blob. When present and non-empty, these
+     *  drive the rendered handles instead of the static manifest computation. */
+    __resolvedOutputs?: NodeManifestOutput[];
 }
 type __VLS_Props = {
     id: string;