@revenexx/studio-integrations 0.5.0 → 0.6.0

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

@@ -20,6 +20,12 @@ type __VLS_Props = {
     dynamicOutputs?: Record<string, NodeManifestOutput[]>;
     /** Workflow id — enables sampling real values from the latest run. */
     workflowId?: number | string;
+    /**
+     * Config key → why the LAST SAVE refused it. Not live validation: the server
+     * is the only judge, so a fix shows once it is saved. Absent for a node the
+     * last save had no complaint about.
+     */
+    refusedFields?: Record<string, string>;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;

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

@@ -1,3 +1,15 @@
+/**
+ * @deprecated Use `NodeMark` directly. This is a thin back-compat shim kept so
+ * that hosts still referencing the auto-registered `<IntegrationsNodeLogo>`
+ * (e.g. integrations/studio-ui `local-nodes.vue`) keep resolving the component
+ * after PO-194 renamed NodeLogo → NodeMark. Auto-registered components are
+ * public API surface for the hosts, so a silent delete breaks them at a
+ * different repo's build, invisible to this repo's CI.
+ *
+ * The old NodeLogo rendered "logo OR glyph, logo preferred" — exactly
+ * `NodeMark`'s `logo-only` behaviour (logo when present, glyph fallback). Drop
+ * this shim one release after the hosts have migrated to `NodeMark`.
+ */
 import type { NodeManifest } from '../../types/integrations.js';
 type __VLS_Props = {
     manifest: NodeManifest | null;

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

@@ -1,38 +1,10 @@
 <script setup>
-import { computed, ref, watch } from "vue";
-import * as Lucide from "lucide-vue-next";
-const props = defineProps({
+defineProps({
   manifest: { type: [Object, null], required: true },
   size: { type: Number, required: false, default: 16 }
 });
-const failed = ref(false);
-watch(() => props.manifest?.slug, () => {
-  failed.value = false;
-});
-const logoSrc = computed(() => {
-  const imgs = props.manifest?.images ?? [];
-  const logo = imgs.find((i) => i.category === "logo") ?? imgs[0];
-  return logo?.src ?? null;
-});
-const glyph = computed(() => {
-  const name = props.manifest?.icon;
-  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;
-});
 </script>
 
 <template>
-  <img
-    v-if="logoSrc && !failed"
-    :src="logoSrc"
-    :width="size"
-    :height="size"
-    class="shrink-0 rounded-[3px] object-contain"
-    :style="{ width: `${size}px`, height: `${size}px` }"
-    alt=""
-    loading="lazy"
-    @error="failed = true"
-  >
-  <component :is="glyph" v-else :size="size" />
+  <IntegrationsNodeMark :manifest="manifest" :size="size" logo-only />
 </template>

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

@@ -1,3 +1,15 @@
+/**
+ * @deprecated Use `NodeMark` directly. This is a thin back-compat shim kept so
+ * that hosts still referencing the auto-registered `<IntegrationsNodeLogo>`
+ * (e.g. integrations/studio-ui `local-nodes.vue`) keep resolving the component
+ * after PO-194 renamed NodeLogo → NodeMark. Auto-registered components are
+ * public API surface for the hosts, so a silent delete breaks them at a
+ * different repo's build, invisible to this repo's CI.
+ *
+ * The old NodeLogo rendered "logo OR glyph, logo preferred" — exactly
+ * `NodeMark`'s `logo-only` behaviour (logo when present, glyph fallback). Drop
+ * this shim one release after the hosts have migrated to `NodeMark`.
+ */
 import type { NodeManifest } from '../../types/integrations.js';
 type __VLS_Props = {
     manifest: NodeManifest | null;

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

@@ -0,0 +1,15 @@
+import type { NodeManifest } from '../../types/integrations.js';
+type __VLS_Props = {
+    manifest: NodeManifest | null;
+    size?: number;
+    /** Render only the vendor logo (folder/group rows), never the glyph+badge composite. */
+    logoOnly?: boolean;
+    /** Overlay the vendor logo as a corner badge. Off in rows that already name the vendor. */
+    badge?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+    badge: boolean;
+    logoOnly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,79 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { nodeIcon } from "../../data/nodeIcons";
+const props = defineProps({
+  manifest: { type: [Object, null], required: true },
+  size: { type: Number, required: false, default: 16 },
+  logoOnly: { type: Boolean, required: false, default: false },
+  badge: { type: Boolean, required: false, default: true }
+});
+const failed = ref(false);
+const { load: reloadCatalog } = useIntegrationsNodes();
+const refreshed = ref(false);
+watch(() => props.manifest?.slug, () => {
+  failed.value = false;
+  refreshed.value = false;
+});
+function onImageError() {
+  if (!refreshed.value) {
+    refreshed.value = true;
+    void reloadCatalog(true);
+    return;
+  }
+  failed.value = true;
+}
+function onImageLoad() {
+  refreshed.value = false;
+}
+const logoSrc = computed(() => {
+  const imgs = props.manifest?.images ?? [];
+  const logo = imgs.find((i) => i.category === "logo") ?? imgs[0];
+  return logo?.src ?? null;
+});
+const hasIcon = computed(() => typeof props.manifest?.icon === "string" && props.manifest.icon.trim() !== "");
+const glyph = computed(() => nodeIcon(props.manifest?.icon));
+const logoOk = computed(() => !!logoSrc.value && !failed.value);
+const logoPrimary = computed(() => logoOk.value && (props.logoOnly || !hasIcon.value));
+const composite = computed(() => props.badge && !props.logoOnly && logoOk.value && hasIcon.value);
+const badgeSize = computed(() => Math.max(12, Math.round(props.size * 0.72)));
+</script>
+
+<template>
+  <!-- Logo as the primary mark (folder rows, or a node without its own glyph). -->
+  <img
+    v-if="logoPrimary"
+    :src="logoSrc"
+    :width="size"
+    :height="size"
+    class="shrink-0 rounded-[3px] object-contain"
+    :style="{ width: `${size}px`, height: `${size}px` }"
+    alt=""
+    loading="lazy"
+    @error="onImageError"
+    @load="onImageLoad"
+  >
+  <!-- Per-node glyph, with the vendor logo as a plated corner badge when present. -->
+  <span
+    v-else
+    class="relative inline-flex shrink-0"
+    :style="{ width: `${size}px`, height: `${size}px` }"
+  >
+    <component :is="glyph" :size="size" :stroke-width="2.25" />
+    <!-- The badge deliberately sits 3px OUTSIDE this box (integrations-ui
+         geometry): it overlaps the glyph's corner instead of shrinking the
+         glyph. Consequence for call sites — a chip hosting a mark has to leave
+         its overflow visible; an `overflow-hidden` wrapper clips the badge. -->
+    <img
+      v-if="composite"
+      :src="logoSrc"
+      :width="badgeSize"
+      :height="badgeSize"
+      class="absolute rounded-[3px] bg-white object-contain p-px ring-1 ring-black/10"
+      :style="{ width: `${badgeSize}px`, height: `${badgeSize}px`, right: '-3px', bottom: '-3px' }"
+      alt=""
+      loading="lazy"
+      @error="onImageError"
+      @load="onImageLoad"
+    >
+  </span>
+</template>

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

@@ -0,0 +1,15 @@
+import type { NodeManifest } from '../../types/integrations.js';
+type __VLS_Props = {
+    manifest: NodeManifest | null;
+    size?: number;
+    /** Render only the vendor logo (folder/group rows), never the glyph+badge composite. */
+    logoOnly?: boolean;
+    /** Overlay the vendor logo as a corner badge. Off in rows that already name the vendor. */
+    badge?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+    badge: boolean;
+    logoOnly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,21 @@
+import type { PortEntry } from '../../data/nodeInputData.js';
+/**
+ * The ports a node hands downstream, with their declared fields and whatever
+ * sample value is known for each.
+ *
+ * Rendered from one place — the Output tab (specs/node-inspector.md AC-4). It
+ * keeps its own file for readability rather than for reuse: the schema list is
+ * a self-contained tree with its own type glyphs and sample formatting, and
+ * inlining it would bury the tab's own markup.
+ *
+ * It was briefly read from a second place, an always-visible summary strip
+ * above the form. That was AC-5, retired before it ever held — see the Gaps
+ * section of the spec. Do not go looking for the second call site.
+ */
+type __VLS_Props = {
+    ports: PortEntry[];
+    /** Sample preview for a port, or for one field of it; null when unknown. */
+    valueAt: (port: string, field?: string) => string | null;
+};
+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;

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

@@ -0,0 +1,42 @@
+<script setup>
+import { portDotClass } from "../../data/portTone";
+defineProps({
+  ports: { type: Array, required: true },
+  valueAt: { type: Function, required: true }
+});
+const TYPE_GLYPHS = {
+  string: { char: "A", cls: "text-sky-600" },
+  number: { char: "#", cls: "text-amber-600" },
+  integer: { char: "#", cls: "text-amber-600" },
+  boolean: { char: "\u2713", cls: "text-emerald-600" },
+  object: { char: "{}", cls: "text-violet-600" },
+  array: { char: "[]", cls: "text-violet-600" }
+};
+function typeGlyph(dataType) {
+  return dataType ? TYPE_GLYPHS[dataType] ?? null : null;
+}
+</script>
+
+<template>
+  <div>
+    <div v-for="p in ports" :key="p.name" class="mb-3 space-y-1">
+      <div class="flex items-center gap-1.5">
+        <span class="size-1.5 rounded-full" :class="portDotClass(p.kind, p.name)" />
+        <span class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{{ p.name }}</span>
+      </div>
+      <div v-if="p.fields.length" class="space-y-0.5">
+        <div v-for="f in p.fields" :key="f.name" class="flex min-w-0 items-baseline gap-1 font-mono text-[11px]">
+          <span v-if="typeGlyph(f.dataType)" class="shrink-0 font-semibold" :class="typeGlyph(f.dataType).cls">{{ typeGlyph(f.dataType).char }}</span>
+          <span class="shrink-0 text-slate-700">{{ f.name }}</span>
+          <span v-if="valueAt(p.name, f.name) !== null" class="min-w-0 truncate text-slate-400">: {{ valueAt(p.name, f.name) }}</span>
+        </div>
+      </div>
+      <p v-else class="text-[11px] leading-snug text-muted-foreground">
+        No declared fields<template v-if="valueAt(p.name) !== null">; sampled: <span class="font-mono">{{ valueAt(p.name) }}</span></template>.
+      </p>
+    </div>
+    <p v-if="!ports.length" class="text-xs leading-snug text-muted-foreground">
+      This node declares no outputs.
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,21 @@
+import type { PortEntry } from '../../data/nodeInputData.js';
+/**
+ * The ports a node hands downstream, with their declared fields and whatever
+ * sample value is known for each.
+ *
+ * Rendered from one place — the Output tab (specs/node-inspector.md AC-4). It
+ * keeps its own file for readability rather than for reuse: the schema list is
+ * a self-contained tree with its own type glyphs and sample formatting, and
+ * inlining it would bury the tab's own markup.
+ *
+ * It was briefly read from a second place, an always-visible summary strip
+ * above the form. That was AC-5, retired before it ever held — see the Gaps
+ * section of the spec. Do not go looking for the second call site.
+ */
+type __VLS_Props = {
+    ports: PortEntry[];
+    /** Sample preview for a port, or for one field of it; null when unknown. */
+    valueAt: (port: string, field?: string) => string | null;
+};
+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;

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

@@ -2,6 +2,8 @@
 import { computed, ref, watch } from "vue";
 import * as Lucide from "lucide-vue-next";
 import { INTEGRATION_NODE_CATALOG, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
+import { nodeIcon } from "../../data/nodeIcons";
+import { resolveLocalized } from "../../utils/localize";
 const { load: loadNodes } = useIntegrationsNodes();
 onMounted(() => {
   void loadNodes();
@@ -10,15 +12,7 @@ const emit = defineEmits(["insert"]);
 const search = ref("");
 const searchInput = ref(null);
 defineExpose({ focusSearch: () => searchInput.value?.focus() });
-function loc(value) {
-  if (!value) return "";
-  return typeof value === "string" ? value : value.en ?? Object.values(value)[0] ?? "";
-}
-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;
-}
+const iconFor = nodeIcon;
 const CORE_GROUP_BY_CATEGORY = {
   control: "Flow",
   transform: "Data",
@@ -61,7 +55,7 @@ function hasLogo(m) {
 }
 function groupPath(m) {
   if (m.groups?.length) {
-    const path = m.groups.map((g) => loc(g)).filter(Boolean);
+    const path = m.groups.map((g) => resolveLocalized(g)).filter(Boolean);
     if (isIntegration(m) || !path.length) return path;
     return [CORE_LABEL_ALIAS[path[0]] ?? path[0], ...path.slice(1)];
   }
@@ -91,6 +85,31 @@ const latestManifests = computed(() => {
   }
   return out;
 });
+const versionsBySlug = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const m of INTEGRATION_NODE_CATALOG) {
+    const list = map.get(m.slug);
+    if (list) list.push(m);
+    else map.set(m.slug, [m]);
+  }
+  return map;
+});
+function versionsOf(slug) {
+  return versionsBySlug.value.get(slug) ?? [];
+}
+const selectedVersion = ref({});
+function setSelectedVersion(slug, version) {
+  selectedVersion.value = { ...selectedVersion.value, [slug]: version };
+}
+function effVersion(m) {
+  const sel = selectedVersion.value[m.slug];
+  return sel && versionsOf(m.slug).some((v) => v.version === sel) ? sel : m.version;
+}
+function effManifest(m) {
+  const v = effVersion(m);
+  if (v === m.version) return m;
+  return versionsOf(m.slug).find((x) => x.version === v) ?? m;
+}
 const tree = computed(() => {
   const apps = makeGroup("Integrations");
   const core = makeGroup("Core");
@@ -166,7 +185,7 @@ const searchHits = computed(() => {
   const scope = currentGroup.value ? subtreeManifests(currentGroup.value) : latestManifests.value.filter((m) => m.category !== "trigger");
   const hits = [];
   for (const m of scope) {
-    const hay = `${loc(m.name)} ${m.slug} ${loc(m.description)}`.toLowerCase();
+    const hay = `${resolveLocalized(m.name)} ${m.slug} ${resolveLocalized(m.description)}`.toLowerCase();
     if (hay.includes(q)) hits.push({ manifest: m, path: groupPath(m) });
     if (hits.length >= 50) break;
   }
@@ -175,7 +194,7 @@ const searchHits = computed(() => {
 const matchedTriggers = computed(() => {
   const q = search.value.trim().toLowerCase();
   if (!q || currentGroup.value) return [];
-  const matches = (t) => loc(t.name).toLowerCase().includes(q) || t.type.includes(q) || loc(t.description).toLowerCase().includes(q);
+  const matches = (t) => resolveLocalized(t.name).toLowerCase().includes(q) || t.type.includes(q) || resolveLocalized(t.description).toLowerCase().includes(q);
   return TRIGGER_TEMPLATES.filter(matches);
 });
 const nodeDrag = useNodeDrag();
@@ -205,24 +224,31 @@ function logoSrcOf(m) {
   const imgs = m.images ?? [];
   return (imgs.find((i) => i.category === "logo") ?? imgs[0])?.src ?? null;
 }
-function onManifestDragStart(m, ev) {
+const paletteDragEnabled = ref(true);
+function onVersionSelectLeave(ev) {
+  const el = ev.currentTarget;
+  if (el && el !== el.ownerDocument.activeElement) paletteDragEnabled.value = true;
+}
+function onManifestDragStart(leaf, ev) {
   if (!ev.dataTransfer) return;
+  const m = effManifest(leaf);
   ev.dataTransfer.setData("application/integration-node", JSON.stringify({ kind: "manifest", slug: m.slug, version: m.version }));
   ev.dataTransfer.effectAllowed = "move";
-  setCustomDragImage(ev, loc(m.name), logoSrcOf(m), "#8b5cf6");
+  setCustomDragImage(ev, resolveLocalized(m.name), logoSrcOf(m), "#8b5cf6");
   nodeDrag.start({ kind: "manifest", manifest: m });
 }
 function onTriggerDragStart(tpl, ev) {
   if (!ev.dataTransfer) return;
   ev.dataTransfer.setData("application/integration-node", JSON.stringify({ kind: "trigger", type: tpl.type }));
   ev.dataTransfer.effectAllowed = "move";
-  setCustomDragImage(ev, loc(tpl.name), null, "#10b981");
+  setCustomDragImage(ev, resolveLocalized(tpl.name), null, "#10b981");
   nodeDrag.start({ kind: "trigger", tpl });
 }
 function onDragEnd() {
   nodeDrag.end();
 }
-function insertManifest(m) {
+function insertManifest(leaf) {
+  const m = effManifest(leaf);
   emit("insert", { kind: "manifest", slug: m.slug, version: m.version });
 }
 function insertTrigger(tpl) {
@@ -234,6 +260,9 @@ function categoryColor(label) {
   const cat = NODE_CATEGORIES.find((c) => c.label === label || CORE_GROUP_BY_CATEGORY[String(c.key)] === label);
   return cat?.color ?? "bg-slate-100 text-slate-500";
 }
+function nodeCategoryColor(m) {
+  return NODE_CATEGORIES.find((c) => c.key === m.category)?.color ?? "bg-slate-100 text-slate-500";
+}
 watch(tree, () => {
   if (stack.value.length && !triggersLevel.value && !currentGroup.value) stack.value = [];
 });
@@ -264,6 +293,7 @@ const searching = computed(() => search.value.trim().length > 0);
           ref="searchInput"
           v-model="search"
           type="text"
+          :aria-label="stack.length ? `Search in ${levelTitle}` : 'Search all nodes'"
           :placeholder="stack.length ? `Search in ${levelTitle}\u2026` : 'Search all nodes\u2026'"
           class="h-7 w-full rounded-md border border-black/[0.08] bg-white pl-7 pr-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/40"
           @keydown.esc="search ? search = '' : stack.length && popLevel()"
@@ -305,7 +335,7 @@ const searching = computed(() => search.value.trim().length > 0);
                   <component :is="iconFor(t.icon)" :size="13" />
                 </span>
                 <div class="min-w-0">
-                  <div class="truncate text-sm font-medium">{{ loc(t.name) }}</div>
+                  <div class="truncate text-sm font-medium">{{ resolveLocalized(t.name) }}</div>
                   <div class="text-xs leading-snug text-muted-foreground">Trigger</div>
                 </div>
               </div>
@@ -318,18 +348,36 @@ const searching = computed(() => search.value.trim().length > 0);
               v-for="hit in searchHits"
               :key="`${hit.manifest.slug}@${hit.manifest.version}`"
               class="group flex cursor-grab items-start gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
-              draggable="true"
-              :title="loc(hit.manifest.name)"
+              :draggable="paletteDragEnabled"
+              :title="resolveLocalized(hit.manifest.name)"
               @dragstart="onManifestDragStart(hit.manifest, $event)"
               @dragend="onDragEnd"
               @click="insertManifest(hit.manifest)"
             >
-              <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="categoryColor(hit.path[0] ?? '')">
-                <IntegrationsNodeLogo :manifest="hit.manifest" :size="13" />
+              <span class="flex size-8 shrink-0 items-center justify-center rounded-md" :class="nodeCategoryColor(hit.manifest)">
+                <IntegrationsNodeMark :manifest="hit.manifest" :size="18" :badge="false" />
               </span>
               <div class="min-w-0 flex-1">
-                <div class="truncate text-sm font-medium">{{ loc(hit.manifest.name) }}</div>
-                <div class="text-xs leading-snug text-muted-foreground">{{ loc(hit.manifest.description) }}</div>
+                <div class="flex items-center gap-1.5">
+                  <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ resolveLocalized(hit.manifest.name) }}</span>
+                  <select
+                    v-if="versionsOf(hit.manifest.slug).length > 1"
+                    :value="effVersion(hit.manifest)"
+                    class="shrink-0 rounded border border-black/10 bg-white px-1 py-px text-xs tabular-nums text-muted-foreground"
+                    :aria-label="`Version to insert for ${resolveLocalized(hit.manifest.name)}`"
+                    @click.stop
+                    @mousedown.stop
+                    @change.stop="setSelectedVersion(hit.manifest.slug, $event.target.value)"
+                    @mouseenter="paletteDragEnabled = false"
+                    @mouseleave="onVersionSelectLeave"
+                    @focus="paletteDragEnabled = false"
+                    @blur="paletteDragEnabled = true"
+                  >
+                    <option v-for="v in versionsOf(hit.manifest.slug)" :key="v.version" :value="v.version">v{{ v.version }}</option>
+                  </select>
+                  <span v-else class="shrink-0 text-xs tabular-nums text-muted-foreground/60">v{{ hit.manifest.version }}</span>
+                </div>
+                <div class="text-xs leading-snug text-muted-foreground">{{ resolveLocalized(hit.manifest.description) }}</div>
                 <div class="truncate text-xs text-muted-foreground/70">{{ hit.path.join(" \u203A ") }}</div>
               </div>
             </div>
@@ -342,7 +390,7 @@ const searching = computed(() => search.value.trim().length > 0);
               :key="t.id"
               class="group flex cursor-grab items-center gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
               draggable="true"
-              :title="loc(t.name)"
+              :title="resolveLocalized(t.name)"
               @dragstart="onTriggerDragStart(t, $event)"
                 @dragend="onDragEnd"
               @click="insertTrigger(t)"
@@ -351,8 +399,8 @@ const searching = computed(() => search.value.trim().length > 0);
                 <component :is="iconFor(t.icon)" :size="13" />
               </span>
               <div class="min-w-0">
-                <div class="truncate text-sm font-medium">{{ loc(t.name) }}</div>
-                <div class="text-xs leading-snug text-muted-foreground">{{ loc(t.description) }}</div>
+                <div class="truncate text-sm font-medium">{{ resolveLocalized(t.name) }}</div>
+                <div class="text-xs leading-snug text-muted-foreground">{{ resolveLocalized(t.description) }}</div>
               </div>
             </div>
           </template>
@@ -400,7 +448,7 @@ const searching = computed(() => search.value.trim().length > 0);
                 @click="pushPath(['__apps', label])"
               >
                 <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-white ring-1 ring-black/[0.06]">
-                  <IntegrationsNodeLogo v-if="groupLogoManifest(group)" :manifest="groupLogoManifest(group)" :size="14" />
+                  <IntegrationsNodeMark v-if="groupLogoManifest(group)" :manifest="groupLogoManifest(group)" :size="14" logo-only />
                   <Lucide.Package v-else :size="13" class="text-violet-600" />
                 </span>
                 <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ label }}</span>
@@ -423,7 +471,7 @@ const searching = computed(() => search.value.trim().length > 0);
                 class="flex size-6 shrink-0 items-center justify-center rounded-md"
                 :class="groupLogoManifest(group) ? 'bg-white ring-1 ring-black/[0.06]' : 'bg-slate-100 text-slate-500'"
               >
-                <IntegrationsNodeLogo v-if="groupLogoManifest(group)" :manifest="groupLogoManifest(group)" :size="14" />
+                <IntegrationsNodeMark v-if="groupLogoManifest(group)" :manifest="groupLogoManifest(group)" :size="14" logo-only />
                 <Lucide.FolderOpen v-else :size="13" />
               </span>
               <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ label }}</span>
@@ -435,18 +483,36 @@ const searching = computed(() => search.value.trim().length > 0);
               v-for="m in currentGroup.leaves"
               :key="`${m.slug}@${m.version}`"
               class="group flex cursor-grab items-start gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
-              draggable="true"
-              :title="loc(m.name)"
+              :draggable="paletteDragEnabled"
+              :title="resolveLocalized(m.name)"
               @dragstart="onManifestDragStart(m, $event)"
               @dragend="onDragEnd"
               @click="insertManifest(m)"
             >
-              <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="hasLogo(m) ? 'bg-white ring-1 ring-black/[0.06]' : categoryColor(groupPath(m)[0] ?? '')">
-                <IntegrationsNodeLogo :manifest="m" :size="14" />
+              <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="nodeCategoryColor(m)">
+                <IntegrationsNodeMark :manifest="m" :size="14" :badge="false" />
               </span>
               <div class="min-w-0 flex-1">
-                <div class="truncate text-sm font-medium">{{ loc(m.name) }}</div>
-                <div class="text-xs leading-snug text-muted-foreground">{{ loc(m.description) }}</div>
+                <div class="flex items-center gap-1.5">
+                  <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ resolveLocalized(m.name) }}</span>
+                  <select
+                    v-if="versionsOf(m.slug).length > 1"
+                    :value="effVersion(m)"
+                    class="shrink-0 rounded border border-black/10 bg-white px-1 py-px text-xs tabular-nums text-muted-foreground"
+                    :aria-label="`Version to insert for ${resolveLocalized(m.name)}`"
+                    @click.stop
+                    @mousedown.stop
+                    @change.stop="setSelectedVersion(m.slug, $event.target.value)"
+                    @mouseenter="paletteDragEnabled = false"
+                    @mouseleave="onVersionSelectLeave"
+                    @focus="paletteDragEnabled = false"
+                    @blur="paletteDragEnabled = true"
+                  >
+                    <option v-for="v in versionsOf(m.slug)" :key="v.version" :value="v.version">v{{ v.version }}</option>
+                  </select>
+                  <span v-else class="shrink-0 text-xs tabular-nums text-muted-foreground/60">v{{ m.version }}</span>
+                </div>
+                <div class="text-xs leading-snug text-muted-foreground">{{ resolveLocalized(m.description) }}</div>
               </div>
             </div>
           </template>

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

@@ -173,7 +173,9 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
             :model-value="row.method"
             @update:model-value="(v) => setRow(idx, { method: String(v) })"
           >
-            <SelectTrigger class="h-7 w-40 shrink-0 bg-white text-sm">
+            <!-- A repeating row has no room for visible labels, so each
+                 control names itself and says which row it is. -->
+            <SelectTrigger :aria-label="`Filter ${idx + 1} \u2014 comparison`" class="h-7 w-40 shrink-0 bg-white text-sm">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -184,6 +186,7 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
           </Select>
           <Input
             v-if="rowMeta[idx]?.attribute"
+            :aria-label="`Filter ${idx + 1} \u2014 field`"
             :model-value="row.attribute"
             placeholder="field"
             class="h-7 w-36 shrink-0 bg-white font-mono text-sm"
@@ -191,6 +194,7 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
           />
           <Input
             v-if="rowMeta[idx]?.values !== 'none'"
+            :aria-label="`Filter ${idx + 1} \u2014 value`"
             :model-value="row.values"
             :placeholder="rowMeta[idx]?.values === 'list' ? 'value, value, \u2026' : 'value'"
             class="h-7 min-w-0 flex-1 bg-white text-sm"
@@ -200,6 +204,7 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
         </template>
         <Input
           v-else
+          :aria-label="`Filter ${idx + 1} \u2014 raw text`"
           :model-value="row.text"
           class="h-7 min-w-0 flex-1 bg-white font-mono text-sm"
           title="This entry is not in the builder vocabulary; edit it as text or in the JSON view."
@@ -207,6 +212,7 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
         />
         <button
           type="button"
+          :aria-label="`Remove filter ${idx + 1}`"
           class="flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:text-rose-600"
           @click="removeRow(idx)"
         >
@@ -227,6 +233,7 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
 
     <template v-else>
       <Textarea
+        aria-label="Filters as JSON"
         :model-value="jsonDraft"
         :rows="6"
         spellcheck="false"

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

@@ -68,7 +68,9 @@ function confirmTerminate() {
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
-      <Button variant="ghost" size="icon" class="size-7" :disabled="busy" @click.stop>
+      <!-- Icon-only, so it needs a name of its own — the run id is the only
+           thing that tells two rows' menus apart. -->
+      <Button variant="ghost" size="icon" class="size-7" :disabled="busy" :aria-label="`Actions for run #${run.id}`" @click.stop>
         <MoreHorizontal :size="16" />
       </Button>
     </DropdownMenuTrigger>