@revenexx/studio-integrations 0.5.1 → 0.6.0

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

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

@@ -1,9 +1,11 @@
 <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 { 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 },
@@ -13,42 +15,28 @@ 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("");
-  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);
+const invalidFields = computed(() => props.data.__invalidFields ?? []);
+const invalidLabel = computed(() => {
+  const n = invalidFields.value.length;
+  return `Config incomplete \u2014 ${n} setting${n === 1 ? "" : "s"} still need${n === 1 ? "s" : ""} fixing: ${invalidFields.value.join(", ")}`;
 });
-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 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 +48,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 +57,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" });
     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 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,23 +124,67 @@ 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"
+      aria-label="Duplicate node"
       @click="duplicate"
     >
       <Lucide.Copy :size="11" />
@@ -138,12 +194,37 @@ function remove() {
       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"
+      aria-label="Delete node"
       @click="remove"
     >
       <Lucide.Trash2 :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">
+        Note
+      </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">
@@ -181,10 +262,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="Configure"
+      aria-label="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="Note"
+      :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">
@@ -212,17 +349,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="`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;

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

@@ -2,7 +2,6 @@
 import { computed, markRaw, nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from "vue";
 import {
   MarkerType,
-  PanOnScrollMode,
   VueFlow,
   useVueFlow
 } from "@vue-flow/core";
@@ -150,9 +149,7 @@ preview.onPaneReady(() => {
   preview.updateNodeInternals(vfNodes.value.map((n) => n.id));
   void preview.fitView({ padding: 0.2, maxZoom: 1 });
 });
-provide("workflow-node-actions", { duplicate: () => {
-}, remove: () => {
-} });
+provide("workflow-node-actions", null);
 const dynamicOutputs = ref({});
 const dynamicOutputNodes = computed(() => props.workflow.blob.nodes.filter((n) => {
   const m = findManifest(n.nodeSlug, n.nodeVersion);
@@ -178,20 +175,7 @@ const finalStatus = computed(() => {
 const runNodeIds = computed(() => new Set(steps.value.map((s) => s.node_id)));
 const triggerIds = computed(() => new Set(props.workflow.blob.triggers.map((t) => t.id)));
 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";
-  }
+  return kind === "error" ? "#cbd5e1" : "#94a3b8";
 }
 const GROUP_PAD = 24;
 const GROUP_LABEL_ROOM = 26;
@@ -304,6 +288,7 @@ const vfEdges = computed(() => {
     if (output === "true") return "branch-true";
     if (output === "false") return "branch-false";
     if (output === "error") return "error";
+    if (output === "done") return "success";
     const outs = [...manifest.outputs ?? [], ...dynamicOutputs.value[sourceNodeId] ?? []];
     const portDef = outs.find((o) => o.name === output);
     if (portDef) {
@@ -323,7 +308,7 @@ const vfEdges = computed(() => {
     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 isBranchPort = (manifest?.outputs ?? []).some((o) => o.sourceFromConfig) || ["true", "false"].includes(e.from.output);
     const srcSide = pickSourceSide(e.from.nodeId, e.to.nodeId);
     const sourceRan = triggerIds.value.has(e.from.nodeId) ? steps.value.length > 0 : runNodeIds.value.has(e.from.nodeId);
     const traversed = sourceRan && runNodeIds.value.has(e.to.nodeId);
@@ -451,7 +436,6 @@ watch(() => props.initialRunId, (id) => {
           :nodes-draggable="false"
           :nodes-connectable="false"
           :edges-updatable="false"
-          :pan-on-scroll-mode="PanOnScrollMode.Free"
           :delete-key-code="null"
           :min-zoom="0.25"
           :max-zoom="2"

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

@@ -9,6 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
   Input,
+  Label,
   Select,
   SelectContent,
   SelectItem,
@@ -68,7 +69,9 @@ function formatDateTime(iso) {
               :disabled="savingMode"
               @update:model-value="(v) => emit('change-mode', v)"
             >
-              <SelectTrigger class="h-8 w-full bg-white text-sm">
+              <!-- Named explicitly: the section caption above says "Execution",
+                   which is not a name the control itself carries. -->
+              <SelectTrigger aria-label="Execution mode" class="h-8 w-full bg-white text-sm">
                 <SelectValue placeholder="Pick a mode" />
               </SelectTrigger>
               <SelectContent>
@@ -86,21 +89,24 @@ function formatDateTime(iso) {
 
         <div class="rounded-lg border border-black/[0.06] bg-white p-4 space-y-3">
           <div class="text-mono text-muted-foreground">Appearance</div>
+          <!-- Real labels, not styled captions: each one names its own control
+               (`for`/`id`), otherwise a screen reader reads four unlabelled
+               fields in a row. -->
           <div class="space-y-1.5">
-            <div class="text-sm text-muted-foreground">Name</div>
-            <Input v-model="nameDraft" class="bg-white" placeholder="Workflow name" />
+            <Label for="wf-set-name" class="text-sm font-normal text-muted-foreground">Name</Label>
+            <Input id="wf-set-name" v-model="nameDraft" class="bg-white" placeholder="Workflow name" />
           </div>
           <div class="space-y-1.5">
-            <div class="text-sm text-muted-foreground">Description</div>
-            <Textarea v-model="descriptionDraft" rows="2" class="bg-white" placeholder="What this workflow does and why it exists." />
+            <Label for="wf-set-desc" class="text-sm font-normal text-muted-foreground">Description</Label>
+            <Textarea id="wf-set-desc" v-model="descriptionDraft" rows="2" class="bg-white" placeholder="What this workflow does and why it exists." />
           </div>
           <div class="space-y-1.5">
-            <div class="text-sm text-muted-foreground">Tags</div>
-            <WorkflowTagsInput v-model="tagsDraft" :suggestions="tagSuggestions ?? []" />
+            <Label for="wf-set-tags" class="text-sm font-normal text-muted-foreground">Tags</Label>
+            <WorkflowTagsInput v-model="tagsDraft" input-id="wf-set-tags" :suggestions="tagSuggestions ?? []" />
           </div>
           <div class="space-y-1.5">
-            <div class="text-sm text-muted-foreground">Icon</div>
-            <WorkflowIconPicker v-model="iconDraft" />
+            <Label id="wf-set-icon-label" class="text-sm font-normal text-muted-foreground">Icon</Label>
+            <WorkflowIconPicker v-model="iconDraft" trigger-labelledby="wf-set-icon-label" />
           </div>
           <div class="flex justify-end">
             <Button

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

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     suggestions?: string[];
+    inputId?: string;
 };
 type __VLS_PublicProps = __VLS_Props & {
     modelValue?: string[];

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

@@ -2,7 +2,8 @@
 import { ref, useId } from "vue";
 const model = defineModel({ type: Array, ...{ default: () => [] } });
 const props = defineProps({
-  suggestions: { type: Array, required: false, default: () => [] }
+  suggestions: { type: Array, required: false, default: () => [] },
+  inputId: { type: String, required: false }
 });
 const draft = ref("");
 const inputRef = ref(null);
@@ -28,7 +29,7 @@ function onKeydown(e) {
 
 <template>
   <div
-    class="flex min-h-9 cursor-text flex-wrap items-center gap-1 rounded-md border border-black/[0.08] bg-white px-2 py-1.5"
+    class="flex min-h-9 cursor-text flex-wrap items-center gap-1 rounded-md border border-black/[0.08] bg-white px-2 py-1.5 focus-within:ring-2 focus-within:ring-primary/40"
     @click="inputRef?.focus()"
   >
     <span
@@ -41,12 +42,16 @@ function onKeydown(e) {
         type="button"
         class="text-muted-foreground transition hover:text-foreground"
         :title="`Remove ${t}`"
+        :aria-label="`Remove ${t}`"
         @click.stop="remove(t)"
       >
         ×
       </button>
     </span>
+    <!-- No ring of its own: the wrapper above is the field the user sees, and
+         it carries the focus ring via focus-within. -->
     <input
+      :id="props.inputId"
       ref="inputRef"
       v-model="draft"
       type="text"

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

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     suggestions?: string[];
+    inputId?: string;
 };
 type __VLS_PublicProps = __VLS_Props & {
     modelValue?: string[];

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

@@ -3,6 +3,8 @@ import { computed, ref } from "vue";
 import { Handle, Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
 import { ClockCircle as Clock, Play, TrashBinMinimalistic as Trash2, LinkRound as Webhook, Bolt } from "#solar-icons";
+import { resolveDisplayName } from "../../utils/localize";
+import { describeCron } from "../../utils/schedule";
 const props = defineProps({
   id: { type: String, required: true },
   data: { type: Object, required: true },
@@ -15,7 +17,7 @@ const icon = computed(() => {
 });
 const subtitle = computed(() => {
   const c = props.data.config;
-  if (props.data.type === "schedule") return c.cron ?? "no cron set";
+  if (props.data.type === "schedule") return describeCron(c.cron) ?? c.cron ?? "no schedule set";
   if (props.data.type === "webhook") return `${c.method ?? "POST"} ${c.path ?? "/"}`;
   if (props.data.type === "event") return c.event_type ? `on ${c.event_type}` : "no event set";
   return "On demand";
@@ -23,7 +25,7 @@ const subtitle = computed(() => {
 const title = computed(() => {
   const n = props.data.name;
   if (!n) return props.data.type.charAt(0).toUpperCase() + props.data.type.slice(1);
-  return typeof n === "string" ? n : n.en ?? Object.values(n)[0];
+  return resolveDisplayName(n);
 });
 const hovered = ref(false);
 let hoverTimer = null;