@revenexx/studio-integrations 0.5.1 → 0.7.0

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

@@ -1,9 +1,12 @@
 <script setup>
-import { computed, inject, ref, watch } from "vue";
+import { computed, inject, nextTick, 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";
+import { Copy, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import { NODE_CATEGORIES, findManifest } from "../../data/integrationNodeCatalog";
+import { isTerminalManifest } from "../../data/nodeInputData";
+import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
 const props = defineProps({
   id: { type: String, required: true },
   data: { type: Object, required: true },
@@ -11,44 +14,28 @@ const props = defineProps({
 });
 defineOptions({ inheritAttrs: false });
 defineEmits(["updateNodeInternals"]);
+const t = useIntegrationsT();
 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("");
-  return Lucide[cleaned] || Lucide.Box;
-}
-function labelText(value) {
-  if (!value) return "";
-  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
+  () => resolveDisplayName(props.data.name) || resolveLocalized(manifest.value?.name) || props.data.nodeSlug
 );
 const inputRequired = computed(() => manifest.value?.input?.required !== false);
-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 ")
-);
+const invalidFields = computed(() => props.data.__invalidFields ?? []);
+const invalidLabel = computed(() => t("integration.canvas.node.badge.invalidConfig", invalidFields.value.length, { fields: invalidFields.value.join(", ") }));
+const notes = computed(() => (props.data.notes ?? "").trim());
+const noteOpen = ref(false);
+const noteReady = ref(false);
+const notePanel = ref(null);
+const notePlacement = ref(Position.Bottom);
+const noteMaxHeight = ref(0);
+let noteTimer = null;
+const notePanelId = computed(() => `node-note-${props.id}`);
 function portsFromOutputs(list) {
   const ports = [];
   for (const o of list) {
     if (o.name) {
-      ports.push({ name: o.name, kind: o.kind, label: labelText(o.label) || o.name });
+      ports.push({ name: o.name, kind: o.kind, label: resolveLocalized(o.label) || o.name });
     } else if (o.sourceFromConfig) {
       const raw = props.data.config?.[o.sourceFromConfig];
       const values = Array.isArray(raw) ? raw : [];
@@ -60,7 +47,7 @@ function portsFromOutputs(list) {
         ports.push({
           name: o.fallback.name,
           kind: o.kind,
-          label: labelText(o.fallback.label) || o.fallback.name
+          label: resolveLocalized(o.fallback.label) || o.fallback.name
         });
       }
     }
@@ -69,24 +56,48 @@ function portsFromOutputs(list) {
 }
 const resolvePending = computed(() => (manifest.value?.outputs ?? []).some((o) => o.resolveOutputs === true) && !Array.isArray(props.data.__resolvedOutputs));
 const outputs = computed(() => {
+  const m = manifest.value;
+  if (isTerminalManifest(m)) return [];
   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" });
+    if (!ports2.length) ports2.push({ name: "default", kind: "default", label: t("integration.canvas.node.port.outputFallback") });
     return ports2;
   }
-  const m = manifest.value;
-  if (!m) return [{ name: "default", kind: "default", label: "out" }];
+  if (!m) return [{ name: "default", kind: "default", label: t("integration.canvas.node.port.outputFallback") }];
   const ports = portsFromOutputs(m.outputs ?? []);
-  if (!ports.length) ports.push({ name: "default", kind: "default", label: "out" });
+  if (!ports.length) ports.push({ name: "default", kind: "default", label: t("integration.canvas.node.port.outputFallback") });
   return ports;
 });
+function portSemantic(p) {
+  if (p.name === "true") return "branch-true";
+  if (p.name === "false") return "branch-false";
+  if (p.name === "error" || p.kind === "error") return "error";
+  if (p.name === "done") return "success";
+  if (p.kind === "branch") return "branch";
+  const portDef = (manifest.value?.outputs ?? []).find((o) => o.name === p.name);
+  return portDef ? "success" : "default";
+}
 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" };
+  switch (portSemantic(p)) {
+    case "success":
+    case "branch-true":
+    // Switch cases / iterator `item`: a taken branch is a normal continuation,
+    // so it reads green like any other output rather than a special colour.
+    case "branch":
+      return { handle: "!bg-emerald-500", label: "text-emerald-600" };
+    // `false` is the neutral "didn't match" route, not a warning — muted slate
+    // so it recedes behind the green primary path (matches `default`).
+    case "branch-false":
+      return { handle: "!bg-slate-500", label: "text-slate-500" };
+    // Soft rose dot marks the error port; the LABEL stays neutral slate (not
+    // rose) so it's legible without a red-alert pull that would out-shout the
+    // green success label. Colour lives on the dot, the label just names it.
+    case "error":
+      return { handle: "!bg-rose-300", label: "text-slate-500" };
+    default:
+      return { handle: "!bg-slate-500", label: "text-slate-500" };
+  }
 }
 const showPortLabels = computed(() => resolvePending.value || outputs.value.length > 1 || outputs.value.some((p) => p.kind !== "default"));
 const IN_SIDES = ["top"];
@@ -112,38 +123,107 @@ function onHoverLeave() {
     hovered.value = false;
   }, 200);
 }
-watch(subtitle, () => flow.updateNodeInternals([props.id]));
+watch(() => Boolean(props.data.nodeVersion), () => flow.updateNodeInternals([props.id]));
+const NOTE_GAP = 6;
+const NOTE_TOOLBAR_CLEARANCE = 42;
+const canvasBottomInset = inject("workflow-canvas-bottom-inset", null);
+const noteTopOffset = ref(NOTE_GAP);
+async function openNote(ev) {
+  holdNote();
+  if (noteOpen.value) return;
+  const card = ev.currentTarget?.closest(".vue-flow__node");
+  noteTopOffset.value = nodeActions && (hovered.value || props.selected) ? NOTE_TOOLBAR_CLEARANCE : NOTE_GAP;
+  noteOpen.value = true;
+  noteReady.value = false;
+  await nextTick();
+  const bounds = flow.vueFlowRef.value?.getBoundingClientRect();
+  if (notePanel.value && card && bounds) {
+    const rect = card.getBoundingClientRect();
+    const floor = Math.min(bounds.bottom, window.innerHeight) - (canvasBottomInset?.() ?? 0);
+    const ceiling = Math.max(bounds.top, 0);
+    const below = floor - rect.bottom - NOTE_GAP;
+    const above = rect.top - ceiling - noteTopOffset.value;
+    const flip = notePanel.value.offsetHeight > below && above > below;
+    notePlacement.value = flip ? Position.Top : Position.Bottom;
+    noteMaxHeight.value = Math.max(80, Math.floor(flip ? above : below));
+  }
+  noteReady.value = true;
+}
+function holdNote() {
+  if (noteTimer) clearTimeout(noteTimer);
+  noteTimer = null;
+}
+function releaseNote() {
+  if (noteTimer) clearTimeout(noteTimer);
+  noteTimer = setTimeout(() => {
+    noteOpen.value = false;
+  }, 250);
+}
 const nodeActions = inject("workflow-node-actions", null);
+const canConfigure = computed(() => typeof nodeActions?.configure === "function");
+function configure() {
+  nodeActions?.configure?.(props.id);
+}
 function duplicate() {
   nodeActions?.duplicate(props.id);
 }
 function remove() {
-  if (nodeActions) nodeActions.remove(props.id);
-  else flow.removeNodes([props.id]);
+  nodeActions?.remove(props.id);
 }
 </script>
 
 <template>
-  <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">
+  <!-- No node-actions injected → read-only canvas (e.g. run replay): the
+       duplicate/delete affordance would be dead, so don't offer it. -->
+  <!-- Icon-only, so each action carries a name — and it names the node, not
+       just the verb: the editor header has its own Duplicate (the workflow),
+       and "Duplicate" alone would be the same announcement for both. -->
+  <NodeToolbar v-if="nodeActions" :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"
-      title="Duplicate"
+      :title="t('integration.canvas.node.action.duplicate')"
+      :aria-label="t('integration.canvas.node.action.duplicateAria')"
       @click="duplicate"
     >
-      <Lucide.Copy :size="11" />
+      <Copy :size="11" />
     </button>
     <div class="h-4 w-px bg-black/10" />
     <button
       type="button"
       class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-rose-600 hover:bg-rose-50"
-      title="Delete"
+      :title="t('integration.common.action.delete')"
+      :aria-label="t('integration.canvas.node.action.deleteAria')"
       @click="remove"
     >
-      <Lucide.Trash2 :size="11" />
+      <TrashBin :size="11" />
     </button>
   </NodeToolbar>
 
+  <!-- The note itself, hanging off the corner the badge sits in — below the card
+       by default, above it when a long note would otherwise run past the bottom
+       of the canvas. A NodeToolbar rather than an in-card panel: it escapes the
+       node's stacking context, so the text can't end up behind a neighbour. -->
+  <NodeToolbar
+    v-if="notes"
+    :is-visible="noteOpen"
+    :position="notePlacement"
+    align="end"
+    :offset="notePlacement === Position.Top ? noteTopOffset : NOTE_GAP"
+    class="nowheel max-w-[240px] overflow-y-auto overscroll-contain rounded-lg border border-black/[0.08] bg-white px-2.5 py-2 text-left shadow-lg"
+    :class="noteReady ? '' : 'invisible'"
+    :style="noteMaxHeight ? { maxHeight: `${noteMaxHeight}px` } : void 0"
+    @mouseenter="holdNote"
+    @mouseleave="releaseNote"
+  >
+    <div ref="notePanel" role="tooltip">
+      <div class="mb-1 text-[8px] font-semibold uppercase tracking-[0.08em] text-muted-foreground/60">
+        {{ t("integration.canvas.node.note.heading") }}
+      </div>
+      <p class="whitespace-pre-wrap break-words text-[11px] leading-snug text-foreground/80">{{ notes }}</p>
+    </div>
+  </NodeToolbar>
+
   <!-- 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">
@@ -153,7 +233,7 @@ function remove() {
       :key="`in-${side}`"
       type="target"
       :position="sideToPosition(side)"
-      title="Input"
+      :title="t('integration.canvas.node.handle.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>
@@ -181,10 +261,66 @@ function remove() {
     @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]',
+  selected ? 'border-emerald-500/50 shadow-[0_0_0_2px_rgba(16,185,129,0.18)]' : invalidFields.length ? 'border-amber-500/70 shadow-[0_0_0_2px_rgba(245,158,11,0.22)] hover:shadow-md' : 'border-black/[0.08] shadow-sm hover:shadow-md hover:border-black/[0.16]',
   showPortLabels ? 'pb-3.5' : ''
 ]"
   >
+    <!-- Incomplete settings at the last save: the count, amber, at the corner
+         the input handles leave free. Hoverable on purpose — the count alone
+         doesn't say what is wrong, so the title spells it out and lists the
+         fields; `nodrag` keeps that hover from starting a card drag. -->
+    <span
+      v-if="invalidFields.length"
+      role="img"
+      :aria-label="invalidLabel"
+      :title="invalidLabel"
+      class="nodrag absolute -left-2 -top-2 z-10 flex cursor-help items-center gap-0.5 rounded-full bg-amber-500 px-1.5 py-0.5 text-[9px] font-bold leading-none text-white shadow-sm"
+    >
+      <Lucide.TriangleAlert :size="9" :stroke-width="2.5" />
+      {{ invalidFields.length }}
+    </span>
+    <!-- Always-visible edit affordance: single click opens the config lightbox.
+         (Double-click on the whole card works too.) Hidden in read-only hosts
+         that don't provide `configure`. `nodrag` so pressing it never starts a
+         node drag; `.stop` so it doesn't bubble to pane/canvas. -->
+    <button
+      v-if="canConfigure"
+      type="button"
+      class="nodrag absolute right-1.5 top-1.5 z-10 flex size-5 items-center justify-center rounded text-muted-foreground/50 transition-colors hover:bg-muted hover:text-foreground"
+      :title="t('integration.canvas.node.action.configure')"
+      :aria-label="t('integration.canvas.node.action.configure')"
+      @click.stop="configure"
+      @mousedown.stop
+      @dblclick.stop
+    >
+      <Lucide.Pencil :size="11" />
+    </button>
+    <!-- Note badge, mirroring the edit affordance into the opposite corner. Its
+         hit area is the whole 20px square, not the 12px glyph. Sits clear of the
+         port-label strip when there is one; `nodrag` + `.stop` so grabbing it
+         neither drags the node nor opens the config. -->
+    <button
+      v-if="notes"
+      type="button"
+      class="nodrag absolute right-1.5 z-10 flex size-5 items-center justify-center rounded text-muted-foreground/45 transition-colors hover:bg-muted hover:text-foreground"
+      :class="showPortLabels ? 'bottom-4' : 'bottom-1.5'"
+      :aria-label="t('integration.canvas.node.note.heading')"
+      :aria-describedby="notePanelId"
+      @mouseenter="openNote"
+      @mouseleave="releaseNote"
+      @focus="openNote"
+      @blur="releaseNote"
+      @click.stop
+      @mousedown.stop
+      @dblclick.stop
+    >
+      <Lucide.MessageSquareText :size="12" :stroke-width="2.25" />
+    </button>
+    <!-- The badge's description. `sr-only` keeps it out of the picture and out of
+         the layout (it is absolutely positioned, so the card's height — which
+         feeds the handle positions — is untouched), while keeping it in the
+         accessibility tree, where the visible panel cannot be relied on. -->
+    <span v-if="notes" :id="notePanelId" class="sr-only">{{ notes }}</span>
     <!-- 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">
@@ -195,7 +331,7 @@ function remove() {
         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
+        {{ t("integration.canvas.node.port.resolving") }}
       </span>
       <template v-else>
         <span
@@ -212,17 +348,23 @@ function remove() {
     <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'"
+        :class="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" />
+        <IntegrationsNodeMark :manifest="manifest" :size="18" />
       </span>
       <div class="min-w-0 flex-1">
         <div class="text-sm font-semibold leading-tight text-foreground truncate">
           {{ title }}
         </div>
-        <div v-if="subtitle" class="mt-0.5 text-sm text-muted-foreground truncate" :title="subtitle">
-          {{ subtitle }}
+        <!-- Meta line: the pinned version, small + muted but always visible so
+             you can tell which version an instance runs without opening the
+             inspector. Left-aligned and on the second line, clear of the
+             top-right edit affordance (PO-192). -->
+        <div v-if="data.nodeVersion" class="mt-0.5 flex items-center gap-1.5 text-sm text-muted-foreground">
+          <span
+            class="shrink-0 text-[10px] font-medium leading-none tabular-nums text-muted-foreground/55"
+            :title="t('integration.canvas.node.meta.versionTitle', { version: data.nodeVersion })"
+          >v{{ data.nodeVersion }}</span>
         </div>
       </div>
     </div>

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

@@ -5,6 +5,10 @@ interface NodeData extends WorkflowNode {
      *  editor without persisting to the blob. When present and non-empty, these
      *  drive the rendered handles instead of the static manifest computation. */
     __resolvedOutputs?: NodeManifestOutput[];
+    /** Config keys the backend reported as incomplete at the last save (PO-209),
+     *  injected by the editor the same non-persisting way. Read-only canvases
+     *  (run replay, history preview) never pass them, so nothing is marked there. */
+    __invalidFields?: string[];
 }
 type __VLS_Props = {
     id: string;