@revenexx/studio-integrations 0.5.1 → 0.7.0

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";
@@ -27,6 +26,7 @@ import StickyNoteView from "./StickyNoteView.vue";
 import GroupFrameView from "./GroupFrameView.vue";
 import WorkflowEdgeView from "./WorkflowEdgeView.vue";
 import { findManifest } from "../../data/integrationNodeCatalog";
+import { SAFETY_POLL_MS } from "../../utils/pollBudget";
 import { runStatusLabel, statusClass } from "../../utils/statusStyle";
 const props = defineProps({
   workflow: { type: Object, required: true },
@@ -34,9 +34,14 @@ const props = defineProps({
   single: { type: Boolean, required: false }
 });
 const { loadForWorkflow, getSteps } = useIntegrationsRuns();
+const t = useIntegrationsT();
 const TERMINAL = /* @__PURE__ */ new Set(["completed", "succeeded", "failed", "cancelled", "terminated"]);
 const STEPS_POLL_MS = 4e3;
 const PLAY_INTERVAL_MS = 3e3;
+const { delivering: realtimeDelivering, runTick, lastRunEvent } = useIntegrationsRealtime();
+function stepsPollDelay() {
+  return realtimeDelivering.value ? SAFETY_POLL_MS : STEPS_POLL_MS;
+}
 const runs = ref([]);
 const runsPage = ref(1);
 const runsLastPage = ref(1);
@@ -54,7 +59,7 @@ async function loadRuns(reset = false) {
     runsPage.value = res.page;
     runsLastPage.value = res.lastPage;
   } catch (e) {
-    toast.error(e?.message ?? "Could not load the runs.");
+    toast.error(e?.message ?? t("integration.replay.toast.loadRunsFailed"));
   } finally {
     runsLoading.value = false;
   }
@@ -92,16 +97,23 @@ async function loadSteps(runId, isPoll = false) {
     if (runStatus.value && !TERMINAL.has(runStatus.value)) {
       pollTimer = window.setTimeout(() => {
         void loadSteps(runId, true);
-      }, STEPS_POLL_MS);
+      }, stepsPollDelay());
     }
   } catch (e) {
     if (selectedRunId.value === runId) {
-      stepsError.value = e?.message ?? "Could not load the run steps.";
+      stepsError.value = e?.message ?? t("integration.replay.error.loadStepsFailed");
     }
   } finally {
     if (!isPoll) stepsLoading.value = false;
   }
 }
+watch(runTick, () => {
+  const runId = selectedRunId.value;
+  if (!runId) return;
+  const event = lastRunEvent.value;
+  if (event && event.topicId !== runId) return;
+  void loadSteps(runId, true);
+});
 function selectRun(id) {
   if (selectedRunId.value === id) return;
   selectedRunId.value = id;
@@ -150,9 +162,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);
@@ -176,22 +186,9 @@ const finalStatus = computed(() => {
   return m;
 });
 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)));
+const triggerIds = computed(() => new Set(props.workflow.blob.triggers.map((t2) => t2.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;
@@ -246,7 +243,7 @@ const vfNodes = computed(() => {
   const posOf = (id) => {
     const wn = blob.nodes.find((n) => n.id === id);
     if (wn) return { x: wn.position?.x ?? 0, y: wn.position?.y ?? 0 };
-    const ti = blob.triggers.findIndex((t) => t.id === id);
+    const ti = blob.triggers.findIndex((t2) => t2.id === id);
     if (ti >= 0) return triggerPos(id, ti);
     return { x: 0, y: 0 };
   };
@@ -260,17 +257,17 @@ const vfNodes = computed(() => {
       zIndex: -100 + i,
       draggable: false,
       class: "replay-dim",
-      data: { sticky: s, onUpdate: () => {
-      }, onRemove: () => {
-      } }
+      // No callbacks: that absence is what makes the note read-only — it then
+      // draws no toolbar, no resize handle and does not open for typing (PO-284).
+      data: { sticky: s }
     })),
-    ...blob.triggers.map((t, i) => ({
-      id: t.id,
+    ...blob.triggers.map((t2, i) => ({
+      id: t2.id,
       type: "trigger",
-      position: triggerPos(t.id, i),
+      position: triggerPos(t2.id, i),
       draggable: false,
-      class: replayNodeClass(t.id, "trigger"),
-      data: t
+      class: replayNodeClass(t2.id, "trigger"),
+      data: t2
     })),
     ...blob.nodes.map((n) => ({
       id: n.id,
@@ -290,7 +287,7 @@ const vfEdges = computed(() => {
   const nodePos = (id) => {
     const wn = blob.nodes.find((n) => n.id === id);
     if (wn) return { x: wn.position?.x ?? 0, y: wn.position?.y ?? 0 };
-    const ti = blob.triggers.findIndex((t) => t.id === id);
+    const ti = blob.triggers.findIndex((t2) => t2.id === id);
     if (ti >= 0) return blob.triggerPositions?.[id] ?? { x: -40, y: 60 + ti * 140 };
     return { x: 0, y: 0 };
   };
@@ -304,6 +301,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 +321,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 +449,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"
@@ -474,12 +471,12 @@ watch(() => props.initialRunId, (id) => {
         <!-- Which run is on the canvas -->
         <div class="absolute top-3 left-3 z-10 flex items-center gap-2 rounded-lg border border-black/[0.08] bg-white/95 px-2.5 py-1.5 text-sm shadow-sm backdrop-blur-sm">
           <Play :size="13" class="text-muted-foreground" />
-          <span class="font-medium">{{ selectedRunId ? `Run #${selectedRunId}` : "Pick a run" }}</span>
+          <span class="font-medium">{{ selectedRunId ? t("integration.replay.canvas.runLabel", { id: selectedRunId }) : t("integration.replay.canvas.pickRun") }}</span>
           <Badge v-if="runStatus" variant="outline" class="border text-xs font-medium uppercase" :class="statusClass(runStatus)">
             {{ runStatusLabel(runStatus) }}
           </Badge>
           <Badge v-if="stepsSource" variant="outline" class="border text-xs font-medium uppercase text-muted-foreground">
-            {{ stepsSource === "temporal" ? "Live" : "Snapshot" }}
+            {{ stepsSource === "temporal" ? t("integration.replay.badge.live") : t("integration.replay.badge.snapshot") }}
           </Badge>
           <Loader2 v-if="stepsLoading" :size="13" class="animate-spin text-muted-foreground" />
         </div>
@@ -495,14 +492,14 @@ watch(() => props.initialRunId, (id) => {
           <div class="flex items-center gap-1">
             <Button variant="ghost" size="sm" class="h-7" :disabled="safeCursor === 0" @click="seek(safeCursor - 1)">
               <Prev :size="13" />
-              Prev
+              {{ t("integration.replay.transport.action.prev") }}
             </Button>
             <Button size="sm" class="h-7" @click="togglePlay">
               <component :is="playing ? Pause : Play" :size="13" class="mr-1" />
-              {{ playing ? "Pause" : "Play" }}
+              {{ playing ? t("integration.replay.transport.action.pause") : t("integration.replay.transport.action.play") }}
             </Button>
             <Button variant="ghost" size="sm" class="h-7" :disabled="safeCursor >= steps.length - 1" @click="seek(safeCursor + 1)">
-              Next
+              {{ t("integration.replay.transport.action.next") }}
               <Next :size="13" />
             </Button>
           </div>
@@ -513,17 +510,17 @@ watch(() => props.initialRunId, (id) => {
             :max="steps.length - 1"
             :value="safeCursor"
             class="h-1.5 flex-1 cursor-pointer accent-primary"
-            aria-label="Replay step"
+            :aria-label="t('integration.replay.transport.scrubberAria')"
             @input="seek(Number($event.target.value))"
           >
 
           <span class="shrink-0 text-sm tabular-nums text-muted-foreground">
-            Step {{ safeCursor + 1 }}/{{ steps.length }}
+            {{ t("integration.replay.transport.stepCounter", { current: safeCursor + 1, total: steps.length }) }}
             <span class="font-mono">· {{ activeStepTitle }}</span>
           </span>
         </template>
         <p v-else-if="!stepsLoading" class="text-sm text-muted-foreground">
-          {{ selectedRunId ? "No steps recorded for this run." : "Pick a run on the right to replay it." }}
+          {{ selectedRunId ? t("integration.replay.state.noSteps") : t("integration.replay.state.pickRunHint") }}
         </p>
       </div>
     </div>
@@ -533,10 +530,10 @@ watch(() => props.initialRunId, (id) => {
     <aside class="flex w-[32rem] shrink-0 flex-col border-l border-black/[0.06] bg-white">
       <div class="flex items-center gap-2 border-b border-black/[0.06] px-3 py-2">
         <div class="min-w-0 flex-1">
-          <div class="truncate font-mono text-sm font-medium">{{ activeStepTitle || "Debug" }}</div>
+          <div class="truncate font-mono text-sm font-medium">{{ activeStepTitle || t("integration.replay.debug.titleFallback") }}</div>
           <div class="text-xs tabular-nums text-muted-foreground">
-            <template v-if="steps.length">Step {{ safeCursor + 1 }} / {{ steps.length }}</template>
-            <template v-else>No step selected</template>
+            <template v-if="steps.length">{{ t("integration.replay.debug.stepCounter", { current: safeCursor + 1, total: steps.length }) }}</template>
+            <template v-else>{{ t("integration.replay.debug.noStepSelected") }}</template>
           </div>
         </div>
         <Badge v-if="activeStep" variant="outline" class="shrink-0 border text-xs font-medium uppercase" :class="statusClass(activeStep.status)">
@@ -547,59 +544,59 @@ watch(() => props.initialRunId, (id) => {
       <div v-if="activeStep" class="min-h-0 flex-1 space-y-4 overflow-y-auto p-3">
         <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
           <div>
-            <div class="text-mono text-muted-foreground">Attempt</div>
+            <div class="text-mono text-muted-foreground">{{ t("integration.replay.debug.field.attempt") }}</div>
             <div class="tabular-nums">{{ activeStep.attempt + 1 }}</div>
           </div>
           <div>
-            <div class="text-mono text-muted-foreground">Duration</div>
+            <div class="text-mono text-muted-foreground">{{ t("integration.replay.debug.field.duration") }}</div>
             <div class="tabular-nums">{{ formatDuration(activeStep.duration_ms) }}</div>
           </div>
           <div>
-            <div class="text-mono text-muted-foreground">Started</div>
+            <div class="text-mono text-muted-foreground">{{ t("integration.replay.debug.field.started") }}</div>
             <div class="tabular-nums">{{ formatTime(activeStep.started_at) }}</div>
           </div>
           <div>
-            <div class="text-mono text-muted-foreground">Completed</div>
+            <div class="text-mono text-muted-foreground">{{ t("integration.replay.debug.field.completed") }}</div>
             <div class="tabular-nums">{{ formatTime(activeStep.completed_at) }}</div>
           </div>
         </div>
 
         <div v-if="activeStep.branch" class="text-sm">
-          <div class="text-mono text-muted-foreground mb-1">Branch</div>
+          <div class="text-mono text-muted-foreground mb-1">{{ t("integration.replay.debug.field.branch") }}</div>
           <code class="rounded bg-black/[0.05] px-1.5 py-0.5 font-mono">{{ activeStep.branch }}</code>
         </div>
 
         <div v-if="activeStep.error" class="text-sm">
-          <div class="text-mono text-muted-foreground mb-1">Error</div>
+          <div class="text-mono text-muted-foreground mb-1">{{ t("integration.replay.debug.field.error") }}</div>
           <pre class="max-h-40 overflow-auto rounded-md border border-rose-500/20 bg-rose-500/5 p-2 font-mono text-sm text-rose-700">{{ activeStep.error }}</pre>
         </div>
 
         <div v-if="activeStep.input !== void 0 && activeStep.input !== null" class="text-sm">
-          <div class="text-mono text-muted-foreground mb-1">Input</div>
+          <div class="text-mono text-muted-foreground mb-1">{{ t("integration.replay.debug.field.input") }}</div>
           <pre class="max-h-56 overflow-auto rounded-md border border-black/[0.06] bg-muted/20 p-2 font-mono text-sm">{{ pretty(activeStep.input) }}</pre>
         </div>
 
         <div v-if="activeStep.config !== void 0 && activeStep.config !== null" class="text-sm">
-          <div class="text-mono text-muted-foreground mb-1">Config</div>
+          <div class="text-mono text-muted-foreground mb-1">{{ t("integration.replay.debug.field.config") }}</div>
           <pre class="max-h-56 overflow-auto rounded-md border border-black/[0.06] bg-muted/20 p-2 font-mono text-sm">{{ pretty(activeStep.config) }}</pre>
         </div>
 
         <div v-if="activeStep.output !== void 0 && activeStep.output !== null" class="text-sm">
-          <div class="text-mono text-muted-foreground mb-1">Output</div>
+          <div class="text-mono text-muted-foreground mb-1">{{ t("integration.replay.debug.field.output") }}</div>
           <pre class="max-h-56 overflow-auto rounded-md border border-black/[0.06] bg-muted/20 p-2 font-mono text-sm">{{ pretty(activeStep.output) }}</pre>
         </div>
       </div>
       <p v-else class="p-4 text-sm text-muted-foreground">
-        The active step's status, timings and payloads land here while the replay walks the run.
+        {{ t("integration.replay.debug.emptyHint") }}
       </p>
     </aside>
 
     <!-- Run list — hidden in single mode (the run detail replays ONE run). -->
     <aside v-if="!single" class="flex w-80 shrink-0 flex-col border-l border-black/[0.06] bg-white">
       <div class="border-b border-black/[0.06] px-3 py-2">
-        <div class="text-sm font-semibold">Runs</div>
+        <div class="text-sm font-semibold">{{ t("integration.replay.runsList.heading") }}</div>
         <p class="text-sm text-muted-foreground">
-          Click through the executions to replay them on the canvas.
+          {{ t("integration.replay.runsList.description") }}
         </p>
       </div>
 
@@ -628,7 +625,7 @@ watch(() => props.initialRunId, (id) => {
         </button>
 
         <p v-if="!runs.length && !runsLoading" class="px-2 py-6 text-center text-sm text-muted-foreground">
-          No runs yet — trigger one from the editor's Run button.
+          {{ t("integration.replay.runsList.empty") }}
         </p>
 
         <div v-if="runsLoading" class="flex justify-center py-3">
@@ -641,7 +638,7 @@ watch(() => props.initialRunId, (id) => {
           class="w-full text-sm"
           @click="loadMoreRuns"
         >
-          Load older runs
+          {{ t("integration.replay.runsList.loadMore") }}
         </Button>
       </div>
     </aside>

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

@@ -9,6 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
   Input,
+  Label,
   Select,
   SelectContent,
   SelectItem,
@@ -28,6 +29,7 @@ const props = defineProps({
   tagSuggestions: { type: Array, required: false }
 });
 const emit = defineEmits(["update:open", "change-mode", "save-meta"]);
+const t = useIntegrationsT();
 const nameDraft = ref("");
 const descriptionDraft = ref("");
 const tagsDraft = ref([]);
@@ -53,23 +55,25 @@ function formatDateTime(iso) {
   <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
     <DialogContent class="sm:max-w-lg">
       <DialogHeader>
-        <DialogTitle>Workflow settings</DialogTitle>
+        <DialogTitle>{{ t("integration.workflows.settings.dialog.title") }}</DialogTitle>
         <DialogDescription class="text-sm">
-          Execution behavior and metadata for “{{ workflow.name }}”.
+          {{ t("integration.workflows.settings.dialog.description", { name: workflow.name }) }}
         </DialogDescription>
       </DialogHeader>
 
       <div class="space-y-4 text-sm">
         <div class="rounded-lg border border-black/[0.06] bg-white p-4 space-y-3">
-          <div class="text-mono text-muted-foreground">Execution</div>
+          <div class="text-mono text-muted-foreground">{{ t("integration.workflows.settings.section.execution") }}</div>
           <div class="flex items-center gap-2">
             <Select
               :model-value="modeDraft"
               :disabled="savingMode"
               @update:model-value="(v) => emit('change-mode', v)"
             >
-              <SelectTrigger class="h-8 w-full bg-white text-sm">
-                <SelectValue placeholder="Pick a mode" />
+              <!-- Named explicitly: the section caption above says "Execution",
+                   which is not a name the control itself carries. -->
+              <SelectTrigger :aria-label="t('integration.workflows.settings.field.executionMode.aria')" class="h-8 w-full bg-white text-sm">
+                <SelectValue :placeholder="t('integration.workflows.settings.field.executionMode.placeholder')" />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem v-for="m in modes" :key="m.value" :value="m.value">
@@ -85,22 +89,25 @@ function formatDateTime(iso) {
         </div>
 
         <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>
+          <div class="text-mono text-muted-foreground">{{ t("integration.workflows.settings.section.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">{{ t("integration.workflows.settings.field.name.label") }}</Label>
+            <Input id="wf-set-name" v-model="nameDraft" class="bg-white" :placeholder="t('integration.workflows.settings.field.name.placeholder')" />
           </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">{{ t("integration.workflows.settings.field.description.label") }}</Label>
+            <Textarea id="wf-set-desc" v-model="descriptionDraft" rows="2" class="bg-white" :placeholder="t('integration.workflows.settings.field.description.placeholder')" />
           </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">{{ t("integration.workflows.settings.field.tags.label") }}</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">{{ t("integration.workflows.settings.field.icon.label") }}</Label>
+            <WorkflowIconPicker v-model="iconDraft" trigger-labelledby="wf-set-icon-label" />
           </div>
           <div class="flex justify-end">
             <Button
@@ -110,23 +117,23 @@ function formatDateTime(iso) {
               @click="emit('save-meta', { name: nameDraft.trim(), description: descriptionDraft.trim(), tags: tagsDraft, icon: iconDraft })"
             >
               <Loader2 v-if="savingMeta" :size="12" class="animate-spin" />
-              Save changes
+              {{ t("integration.workflows.settings.action.save") }}
             </Button>
           </div>
         </div>
 
         <div class="rounded-lg border border-black/[0.06] bg-white p-4 space-y-2">
-          <div class="text-mono text-muted-foreground">Metadata</div>
+          <div class="text-mono text-muted-foreground">{{ t("integration.workflows.settings.section.metadata") }}</div>
           <div class="grid grid-cols-[110px_1fr] gap-x-3 gap-y-2">
-            <span class="text-muted-foreground">ID</span>
+            <span class="text-muted-foreground">{{ t("integration.workflows.settings.meta.id") }}</span>
             <span class="font-mono">{{ workflow.id }}</span>
-            <span class="text-muted-foreground">Definition</span>
+            <span class="text-muted-foreground">{{ t("integration.workflows.settings.meta.definition") }}</span>
             <span class="font-mono">{{ workflow.blob_definition_version }}</span>
-            <span class="text-muted-foreground">Revision</span>
+            <span class="text-muted-foreground">{{ t("integration.workflows.settings.meta.revision") }}</span>
             <span class="font-mono">r{{ workflow.revision }}</span>
-            <span class="text-muted-foreground">Created</span>
+            <span class="text-muted-foreground">{{ t("integration.workflows.settings.meta.created") }}</span>
             <span>{{ formatDateTime(workflow.created_at) }}</span>
-            <span class="text-muted-foreground">Updated</span>
+            <span class="text-muted-foreground">{{ t("integration.workflows.settings.meta.updated") }}</span>
             <span>{{ formatDateTime(workflow.updated_at) }}</span>
           </div>
         </div>

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,8 +2,10 @@
 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 t = useIntegrationsT();
 const draft = ref("");
 const inputRef = ref(null);
 const listId = useId();
@@ -14,7 +16,7 @@ function commit() {
   if (!model.value.includes(tag)) model.value = [...model.value, tag];
 }
 function remove(tag) {
-  model.value = model.value.filter((t) => t !== tag);
+  model.value = model.value.filter((t2) => t2 !== tag);
 }
 function onKeydown(e) {
   if (e.key === "Enter" || e.key === ",") {
@@ -28,31 +30,35 @@ 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
-      v-for="t in model"
-      :key="t"
+      v-for="tag in model"
+      :key="tag"
       class="inline-flex items-center gap-1 rounded-md border border-black/[0.06] bg-muted/50 px-1.5 py-0.5 text-xs text-foreground"
     >
-      {{ t }}
+      {{ tag }}
       <button
         type="button"
         class="text-muted-foreground transition hover:text-foreground"
-        :title="`Remove ${t}`"
-        @click.stop="remove(t)"
+        :title="t('integration.workflows.tagsInput.action.remove', { tag })"
+        :aria-label="t('integration.workflows.tagsInput.action.remove', { tag })"
+        @click.stop="remove(tag)"
       >
         ×
       </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"
       :list="listId"
       class="h-6 min-w-24 flex-1 bg-transparent text-sm focus:outline-none"
-      :placeholder="model.length ? 'Add tag\u2026' : 'Add tags \u2014 Enter confirms\u2026'"
+      :placeholder="model.length ? t('integration.workflows.tagsInput.placeholder.add') : t('integration.workflows.tagsInput.placeholder.addFirst')"
       @keydown="onKeydown"
       @blur="commit()"
     >

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

@@ -2,7 +2,10 @@
 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 { ClockCircle as Clock, Play, TrashBinMinimalistic as TrashBin, LinkRound as Webhook, Bolt } from "#solar-icons";
+import { resolveDisplayName } from "../../utils/localize";
+import { triggerTypeLabel } from "../../data/integrationNodeCatalog";
+import { describeCron } from "../../utils/schedule";
 const props = defineProps({
   id: { type: String, required: true },
   data: { type: Object, required: true },
@@ -10,20 +13,21 @@ const props = defineProps({
 });
 defineOptions({ inheritAttrs: false });
 defineEmits(["updateNodeInternals"]);
+const t = useIntegrationsT();
 const icon = computed(() => {
   return props.data.type === "schedule" ? Clock : props.data.type === "webhook" ? Webhook : props.data.type === "event" ? Bolt : Play;
 });
 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 ?? t("integration.canvas.trigger.subtitle.noSchedule");
   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";
+  if (props.data.type === "event") return c.event_type ? t("integration.canvas.trigger.subtitle.onEvent", { event: c.event_type }) : t("integration.canvas.trigger.subtitle.noEvent");
+  return t("integration.canvas.trigger.subtitle.onDemand");
 });
 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];
+  if (!n) return triggerTypeLabel(props.data.type);
+  return resolveDisplayName(n);
 });
 const hovered = ref(false);
 let hoverTimer = null;
@@ -52,10 +56,11 @@ function sideToPosition(s) {
     <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.trigger.action.deleteAria')"
       @click="remove"
     >
-      <Trash2 :size="11" />
+      <TrashBin :size="11" />
     </button>
   </NodeToolbar>
 
@@ -84,8 +89,8 @@ function sideToPosition(s) {
       </div>
     </div>
     <div class="flex items-center justify-between border-t border-emerald-500/15 bg-emerald-500/[0.04] rounded-b-md px-3 py-1 text-mono text-emerald-700/80 font-semibold">
-      <span>Trigger · {{ data.type }}</span>
-      <span v-if="data.active === false" class="text-amber-600">Inactive</span>
+      <span>{{ t("integration.canvas.badge.trigger") }} · {{ data.type }}</span>
+      <span v-if="data.active === false" class="text-amber-600">{{ t("integration.canvas.trigger.badge.inactive") }}</span>
     </div>
   </div>