@revenexx/studio-integrations 0.1.3 → 0.2.0

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, inject, ref, watch } from "vue";
 import { Handle, Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
 import * as Lucide from "lucide-vue-next";
@@ -13,6 +13,7 @@ defineOptions({ inheritAttrs: false });
 defineEmits(["updateNodeInternals"]);
 const manifest = computed(() => findManifest(props.data.nodeSlug, props.data.nodeVersion));
 const category = computed(() => NODE_CATEGORIES.find((c) => c.key === manifest.value?.category));
+const hasLogo = computed(() => (manifest.value?.images ?? []).some((i) => i.category === "logo"));
 function iconFor(name) {
   if (!name) return Lucide.Box;
   const cleaned = (name.includes(":") ? name.split(":").pop() : name).split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
@@ -20,18 +21,32 @@ function iconFor(name) {
 }
 function labelText(value) {
   if (!value) return "";
-  return typeof value === "string" ? value : Object.values(value)[0] ?? "";
+  return typeof value === "string" ? value : value.en ?? Object.values(value)[0] ?? "";
 }
 const title = computed(
   () => labelText(props.data.name) || labelText(manifest.value?.name) || props.data.nodeSlug
 );
-const description = computed(() => labelText(manifest.value?.description));
 const inputRequired = computed(() => manifest.value?.input?.required !== false);
-const outputs = computed(() => {
-  const m = manifest.value;
-  if (!m) return [{ name: "default", kind: "default", label: "out" }];
+const subtitleKeys = computed(() => {
+  const fields = manifest.value?.config ?? [];
+  const driving = /* @__PURE__ */ new Set();
+  for (const f of fields) for (const dep of f.dependsOn ?? []) driving.add(dep);
+  const drivingSelects = fields.filter((f) => f.type === "select" && driving.has(f.key)).map((f) => f.key);
+  if (drivingSelects.length) return drivingSelects;
+  return fields.filter((f) => f.type === "select" || f.type === "multiselect").slice(0, 2).map((f) => f.key);
+});
+function scalarText(v) {
+  if (Array.isArray(v)) {
+    return v.filter((x) => ["string", "number", "boolean"].includes(typeof x)).map((x) => String(x).trim()).filter(Boolean).join(", ");
+  }
+  return ["string", "number", "boolean"].includes(typeof v) ? String(v).trim() : "";
+}
+const subtitle = computed(
+  () => subtitleKeys.value.map((k) => scalarText(props.data.config?.[k])).filter((s) => s !== "").join(" \xB7 ")
+);
+function portsFromOutputs(list) {
   const ports = [];
-  for (const o of m.outputs ?? []) {
+  for (const o of list) {
     if (o.name) {
       ports.push({ name: o.name, kind: o.kind, label: labelText(o.label) || o.name });
     } else if (o.sourceFromConfig) {
@@ -50,20 +65,32 @@ const outputs = computed(() => {
       }
     }
   }
+  return ports;
+}
+const resolvePending = computed(() => (manifest.value?.outputs ?? []).some((o) => o.resolveOutputs === true) && !Array.isArray(props.data.__resolvedOutputs));
+const outputs = computed(() => {
+  const resolved = props.data.__resolvedOutputs;
+  if (Array.isArray(resolved) && resolved.length) {
+    const ports2 = portsFromOutputs(resolved);
+    if (!ports2.length) ports2.push({ name: "default", kind: "default", label: "out" });
+    return ports2;
+  }
+  const m = manifest.value;
+  if (!m) return [{ name: "default", kind: "default", label: "out" }];
+  const ports = portsFromOutputs(m.outputs ?? []);
   if (!ports.length) ports.push({ name: "default", kind: "default", label: "out" });
   return ports;
 });
-function handleColorClass(kind) {
-  if (kind === "error") return "!bg-rose-400";
-  if (kind === "branch") return "!bg-violet-400";
-  return "!bg-slate-400";
+function portTone(p) {
+  if (p.name === "true") return { handle: "!bg-emerald-500", label: "text-emerald-600" };
+  if (p.name === "false") return { handle: "!bg-amber-400", label: "text-amber-600" };
+  if (p.kind === "error") return { handle: "!bg-rose-500", label: "text-rose-600" };
+  if (p.kind === "branch") return { handle: "!bg-violet-500", label: "text-violet-600" };
+  return { handle: "!bg-slate-500", label: "text-slate-500" };
 }
-function legendDotClass(kind) {
-  if (kind === "error") return "bg-rose-400";
-  if (kind === "branch") return "bg-violet-400";
-  return "bg-slate-400";
-}
-const SIDES = ["top", "right", "bottom", "left"];
+const showPortLabels = computed(() => resolvePending.value || outputs.value.length > 1 || outputs.value.some((p) => p.kind !== "default"));
+const IN_SIDES = ["top"];
+const OUT_SIDES = ["bottom"];
 function sideToPosition(s) {
   return s === "top" ? Position.Top : s === "right" ? Position.Right : s === "bottom" ? Position.Bottom : Position.Left;
 }
@@ -73,33 +100,31 @@ function distributedStyle(side, i, total) {
   return { top: pct };
 }
 const flow = useVueFlow();
+const hovered = ref(false);
+let hoverTimer = null;
+function onHoverEnter() {
+  if (hoverTimer) clearTimeout(hoverTimer);
+  hovered.value = true;
+}
+function onHoverLeave() {
+  if (hoverTimer) clearTimeout(hoverTimer);
+  hoverTimer = setTimeout(() => {
+    hovered.value = false;
+  }, 200);
+}
+watch(subtitle, () => flow.updateNodeInternals([props.id]));
+const nodeActions = inject("workflow-node-actions", null);
 function duplicate() {
-  const offset = 80;
-  const newId = `n-${Date.now()}`;
-  flow.addNodes([{
-    id: newId,
-    type: "workflow",
-    position: {
-      x: (props.data.position?.x ?? 0) + offset,
-      y: (props.data.position?.y ?? 0) + offset
-    },
-    data: {
-      ...props.data,
-      id: newId,
-      position: {
-        x: (props.data.position?.x ?? 0) + offset,
-        y: (props.data.position?.y ?? 0) + offset
-      }
-    }
-  }]);
+  nodeActions?.duplicate(props.id);
 }
 function remove() {
-  flow.removeNodes([props.id]);
+  if (nodeActions) nodeActions.remove(props.id);
+  else flow.removeNodes([props.id]);
 }
 </script>
 
 <template>
-  <NodeToolbar :position="Position.Top" :offset="36" class="flex items-center gap-1 rounded-md border border-black/[0.08] bg-white px-1 py-1 shadow-md">
+  <NodeToolbar :is-visible="hovered || selected" :position="Position.Top" :offset="8" class="flex items-center gap-1 rounded-md border border-black/[0.08] bg-white px-1 py-1 shadow-md" @mouseenter="onHoverEnter" @mouseleave="onHoverLeave">
     <button
       type="button"
       class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-foreground/80 hover:bg-muted/50"
@@ -119,22 +144,23 @@ function remove() {
     </button>
   </NodeToolbar>
 
-  <!-- Input handles: one per side, centered on each edge. -->
+  <!-- Input: ONE logical input, attachable from the left or the top — both
+       dots feed the same `__in` port. Clearly visible, ring + shadow. -->
   <template v-if="inputRequired">
     <Handle
-      v-for="side in SIDES"
+      v-for="side in IN_SIDES"
       :id="`__in__${side}`"
       :key="`in-${side}`"
       type="target"
       :position="sideToPosition(side)"
-      class="!size-2 !rounded-full !border-2 !border-white !bg-slate-400 opacity-70 transition-all hover:!size-2.5 hover:!bg-slate-600 hover:opacity-100"
+      title="Input"
+      class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm transition-all hover:!size-3.5 hover:!bg-slate-700"
     />
   </template>
 
-  <!-- Output handles: each port exposed on all 4 sides, distributed evenly
-       per side so multi-output nodes (success/error, switch cases) don't
-       overlap. -->
-  <template v-for="side in SIDES" :key="`side-${side}`">
+  <!-- Output handles: right + bottom, distributed per side. Color encodes the
+       port semantics (true/false/error/branch/default), matching the edges. -->
+  <template v-for="side in OUT_SIDES" :key="`side-${side}`">
     <Handle
       v-for="(p, i) in outputs"
       :id="`${p.name}__${side}`"
@@ -143,58 +169,62 @@ function remove() {
       :position="sideToPosition(side)"
       :title="p.label"
       :style="distributedStyle(side, i, outputs.length)"
-      class="!size-2 !rounded-full !border-2 !border-white opacity-70 transition-all hover:!size-2.5 hover:opacity-100"
-      :class="handleColorClass(p.kind)"
+      class="!size-3 !rounded-full !border-2 !border-white !shadow-sm transition-all hover:!size-3.5"
+      :class="portTone(p).handle"
     />
   </template>
 
+  <!-- The card itself — deliberately minimal: icon, name, what it's set to.
+       Everything else lives in the config lightbox. -->
   <div
-    class="w-[240px] rounded-lg border bg-white transition-all duration-150"
-    :class="selected ? 'border-emerald-500/50 shadow-[0_0_0_2px_rgba(16,185,129,0.18)]' : 'border-black/[0.08] shadow-sm hover:shadow-md hover:border-black/[0.16]'"
+    class="relative w-[220px] rounded-lg border bg-white transition-all duration-150"
+    @mouseenter="onHoverEnter"
+    @mouseleave="onHoverLeave"
+    :class="[
+  selected ? 'border-emerald-500/50 shadow-[0_0_0_2px_rgba(16,185,129,0.18)]' : 'border-black/[0.08] shadow-sm hover:shadow-md hover:border-black/[0.16]',
+  showPortLabels ? 'pb-3.5' : ''
+]"
   >
-    <div class="flex items-center gap-2 px-3 pt-2.5 pb-1.5">
-      <span class="flex size-7 shrink-0 items-center justify-center rounded-md" :class="category?.color ?? 'bg-muted text-foreground'">
-        <component :is="iconFor(manifest?.icon)" :size="14" :stroke-width="2.25" />
+    <!-- Port labels sit ABOVE their bottom dots, inside the card's label
+         strip, whenever ports are distinguishable (true/false, error, cases). -->
+    <template v-if="showPortLabels">
+      <!-- Dynamic ports resolving (server round-trip, slower for external
+           nodes) — a spinner instead of the incomplete static set. -->
+      <span
+        v-if="resolvePending"
+        class="pointer-events-none absolute bottom-1 left-1/2 flex -translate-x-1/2 select-none items-center gap-1 whitespace-nowrap text-[9px] font-semibold uppercase tracking-wide text-muted-foreground"
+      >
+        <Lucide.LoaderCircle :size="9" class="animate-spin" />
+        Ports
+      </span>
+      <template v-else>
+        <span
+          v-for="(p, i) in outputs"
+          :key="`plabel-${p.name}`"
+          class="pointer-events-none absolute bottom-1 select-none whitespace-nowrap text-[9px] font-semibold uppercase tracking-wide"
+          :class="portTone(p).label"
+          :style="{ left: `${(i + 1) / (outputs.length + 1) * 100}%`, transform: 'translateX(-50%)' }"
+        >
+          {{ p.label }}
+        </span>
+      </template>
+    </template>
+    <div class="flex items-center gap-2.5 px-3 py-2.5">
+      <span
+        class="flex size-8 shrink-0 items-center justify-center rounded-md"
+        :class="hasLogo ? 'bg-white ring-1 ring-black/[0.06]' : category?.color ?? 'bg-muted text-foreground'"
+      >
+        <IntegrationsNodeLogo v-if="hasLogo" :manifest="manifest" :size="18" />
+        <component :is="iconFor(manifest?.icon)" v-else :size="15" :stroke-width="2.25" />
       </span>
       <div class="min-w-0 flex-1">
         <div class="text-sm font-semibold leading-tight text-foreground truncate">
           {{ title }}
         </div>
-        <div class="text-sm text-muted-foreground truncate font-mono">
-          {{ data.nodeSlug }}<span class="opacity-60">@{{ data.nodeVersion }}</span>
+        <div v-if="subtitle" class="mt-0.5 text-sm text-muted-foreground truncate" :title="subtitle">
+          {{ subtitle }}
         </div>
       </div>
     </div>
-
-    <p v-if="description" class="px-3 pb-2 text-sm text-muted-foreground line-clamp-2">
-      {{ description }}
-    </p>
-
-    <div
-      v-if="outputs.length"
-      class="border-t border-black/[0.04] bg-muted/20 px-3 py-1.5 rounded-b-lg"
-    >
-      <div
-        v-for="p in outputs"
-        :key="p.name"
-        class="flex items-center gap-1.5 py-0.5 text-sm"
-      >
-        <span class="size-1.5 rounded-full shrink-0" :class="legendDotClass(p.kind)" />
-        <span
-          class="font-mono truncate"
-          :class="p.kind === 'error' ? 'text-rose-600' : p.kind === 'branch' ? 'text-violet-600' : 'text-foreground/70'"
-        >
-          {{ p.label }}
-        </span>
-      </div>
-    </div>
-
-    <div
-      v-if="data.retry"
-      class="flex items-center gap-1.5 border-t border-black/[0.04] px-3 py-1 text-sm text-muted-foreground"
-    >
-      <Lucide.RotateCcw :size="10" />
-      <span>Retry × {{ data.retry.maxAttempts }} · {{ data.retry.strategy ?? "linear" }}</span>
-    </div>
   </div>
 </template>

package/dist/runtime/components/Integrations/WorkflowNodeView.vue.d.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;

package/dist/runtime/components/Integrations/WorkflowRunReplayPanel.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;
+    /** Preselect a run (deep-link from the Runs table). */
+    initialRunId?: string | null;
+    /** Replay ONLY the initial run: no run list, no browsing (run detail view). */
+    single?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;