@revenexx/studio-integrations 0.6.0 → 1.0.0

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

@@ -11,9 +11,7 @@ import {
   AltArrowRight as Next,
   Play,
   Pause,
-  RefreshCircle as Loader2,
-  ClockCircle as Clock,
-  LinkRound as Webhook
+  RefreshCircle as Loader2
 } from "#solar-icons";
 import { Badge, Button } from "@revenexx/studio";
 import { toast } from "vue-sonner";
@@ -26,6 +24,8 @@ import StickyNoteView from "./StickyNoteView.vue";
 import GroupFrameView from "./GroupFrameView.vue";
 import WorkflowEdgeView from "./WorkflowEdgeView.vue";
 import { findManifest } from "../../data/integrationNodeCatalog";
+import { triggerGlyph } from "../../data/triggerGlyphs";
+import { SAFETY_POLL_MS } from "../../utils/pollBudget";
 import { runStatusLabel, statusClass } from "../../utils/statusStyle";
 const props = defineProps({
   workflow: { type: Object, required: true },
@@ -33,9 +33,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);
@@ -53,7 +58,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;
   }
@@ -91,16 +96,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;
@@ -173,7 +185,7 @@ 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) {
   return kind === "error" ? "#cbd5e1" : "#94a3b8";
 }
@@ -230,7 +242,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 };
   };
@@ -244,17 +256,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,
@@ -274,7 +286,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 };
   };
@@ -395,7 +407,7 @@ function pretty(v) {
   }
 }
 function triggerIcon(type) {
-  return type === "schedule" ? Clock : type === "webhook" ? Webhook : Play;
+  return triggerGlyph(type);
 }
 const activeStepTitle = computed(() => {
   const s = activeStep.value;
@@ -458,12 +470,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>
@@ -479,14 +491,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>
@@ -497,17 +509,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>
@@ -517,10 +529,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)">
@@ -531,59 +543,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>
 
@@ -612,7 +624,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">
@@ -625,7 +637,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.d.vue.ts

@@ -4,33 +4,32 @@ export interface ExecutionModeOption {
     label: string;
     hint: string;
 }
+/** What this dialog edits — the values as they stand, saved or not. */
+export interface WorkflowSettingsValues {
+    name: string;
+    description: string;
+    tags: string[];
+    icon: WorkflowIcon | null;
+    executionMode: string;
+}
 type __VLS_Props = {
     open: boolean;
     workflow: Workflow;
     modes: ExecutionModeOption[];
-    modeDraft: string;
-    savingMode?: boolean;
-    savingMeta?: boolean;
+    /**
+     * The values to edit: the editor's unsaved ones where it has any, the saved ones
+     * otherwise. Reopening the dialog therefore shows what the operator last entered
+     * rather than what the platform still holds.
+     */
+    current: WorkflowSettingsValues;
     /** Tag suggestions (tags already used across the tenant's workflows). */
     tagSuggestions?: string[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (args_0: boolean) => any;
-    "change-mode": (mode: string) => any;
-    "save-meta": (meta: {
-        name: string;
-        description: string;
-        tags: string[];
-        icon: WorkflowIcon | null;
-    }) => any;
+    apply: (values: WorkflowSettingsValues) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
-    "onChange-mode"?: ((mode: string) => any) | undefined;
-    "onSave-meta"?: ((meta: {
-        name: string;
-        description: string;
-        tags: string[];
-        icon: WorkflowIcon | null;
-    }) => any) | undefined;
+    onApply?: ((values: WorkflowSettingsValues) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,11 +1,11 @@
 <script setup>
-import { ref, watch } from "vue";
-import { RefreshCircle as Loader2 } from "#solar-icons";
+import { computed, ref, watch } from "vue";
 import {
   Button,
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   Input,
@@ -23,23 +23,35 @@ const props = defineProps({
   open: { type: Boolean, required: true },
   workflow: { type: Object, required: true },
   modes: { type: Array, required: true },
-  modeDraft: { type: String, required: true },
-  savingMode: { type: Boolean, required: false },
-  savingMeta: { type: Boolean, required: false },
+  current: { type: Object, required: true },
   tagSuggestions: { type: Array, required: false }
 });
-const emit = defineEmits(["update:open", "change-mode", "save-meta"]);
+const emit = defineEmits(["update:open", "apply"]);
+const t = useIntegrationsT();
 const nameDraft = ref("");
 const descriptionDraft = ref("");
 const tagsDraft = ref([]);
 const iconDraft = ref(null);
+const modeDraft = ref("");
 watch(() => props.open, (v) => {
   if (!v) return;
-  nameDraft.value = props.workflow.name;
-  descriptionDraft.value = props.workflow.description ?? "";
-  tagsDraft.value = [...props.workflow.blob.tags ?? []];
-  iconDraft.value = props.workflow.blob.icon ?? null;
+  nameDraft.value = props.current.name;
+  descriptionDraft.value = props.current.description;
+  tagsDraft.value = [...props.current.tags];
+  iconDraft.value = props.current.icon;
+  modeDraft.value = props.current.executionMode;
 }, { immediate: true });
+const edited = computed(() => ({
+  name: nameDraft.value.trim(),
+  description: descriptionDraft.value.trim(),
+  tags: tagsDraft.value,
+  icon: iconDraft.value,
+  executionMode: modeDraft.value
+}));
+function applyAndClose() {
+  if (JSON.stringify(edited.value) !== JSON.stringify(props.current)) emit("apply", edited.value);
+  emit("update:open", false);
+}
 function formatDateTime(iso) {
   if (!iso) return "\u2014";
   try {
@@ -54,25 +66,26 @@ 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 }}”.
+          <!-- The name as it stands, drafted included: this dialog is where a rename is
+               typed, so naming the workflow by its stored name here contradicts the
+               field directly below. -->
+          {{ t("integration.workflows.settings.dialog.description", { name: current.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)"
+              v-model="modeDraft"
             >
               <!-- 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 :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">
@@ -80,7 +93,6 @@ function formatDateTime(iso) {
                 </SelectItem>
               </SelectContent>
             </Select>
-            <Loader2 v-if="savingMode" :size="14" class="shrink-0 animate-spin text-muted-foreground" />
           </div>
           <p class="text-xs text-muted-foreground">
             {{ modes.find((m2) => m2.value === modeDraft)?.hint }}
@@ -88,55 +100,55 @@ 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">
-            <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" />
+            <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">
-            <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." />
+            <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">
-            <Label for="wf-set-tags" class="text-sm font-normal text-muted-foreground">Tags</Label>
+            <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">
-            <Label id="wf-set-icon-label" class="text-sm font-normal text-muted-foreground">Icon</Label>
+            <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
-              size="sm"
-              class="h-7 text-sm"
-              :disabled="savingMeta || !nameDraft.trim()"
-              @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
-            </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>
       </div>
+
+      <!-- Cancel / Done, the pair every dialog in the editor closes on. Done reaches
+           the workflow's unsaved state; the header's Save reaches the platform. -->
+      <DialogFooter>
+        <Button variant="outline" size="sm" class="h-8" @click="emit('update:open', false)">
+          {{ t("integration.common.action.cancel") }}
+        </Button>
+        <Button size="sm" class="h-8" :disabled="!nameDraft.trim()" @click="applyAndClose">
+          {{ t("integration.workflows.settings.action.done") }}
+        </Button>
+      </DialogFooter>
     </DialogContent>
   </Dialog>
 </template>

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

@@ -4,33 +4,32 @@ export interface ExecutionModeOption {
     label: string;
     hint: string;
 }
+/** What this dialog edits — the values as they stand, saved or not. */
+export interface WorkflowSettingsValues {
+    name: string;
+    description: string;
+    tags: string[];
+    icon: WorkflowIcon | null;
+    executionMode: string;
+}
 type __VLS_Props = {
     open: boolean;
     workflow: Workflow;
     modes: ExecutionModeOption[];
-    modeDraft: string;
-    savingMode?: boolean;
-    savingMeta?: boolean;
+    /**
+     * The values to edit: the editor's unsaved ones where it has any, the saved ones
+     * otherwise. Reopening the dialog therefore shows what the operator last entered
+     * rather than what the platform still holds.
+     */
+    current: WorkflowSettingsValues;
     /** Tag suggestions (tags already used across the tenant's workflows). */
     tagSuggestions?: string[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (args_0: boolean) => any;
-    "change-mode": (mode: string) => any;
-    "save-meta": (meta: {
-        name: string;
-        description: string;
-        tags: string[];
-        icon: WorkflowIcon | null;
-    }) => any;
+    apply: (values: WorkflowSettingsValues) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
-    "onChange-mode"?: ((mode: string) => any) | undefined;
-    "onSave-meta"?: ((meta: {
-        name: string;
-        description: string;
-        tags: string[];
-        icon: WorkflowIcon | null;
-    }) => any) | undefined;
+    onApply?: ((values: WorkflowSettingsValues) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -5,6 +5,7 @@ const props = defineProps({
   suggestions: { type: Array, required: false, default: () => [] },
   inputId: { type: String, required: false }
 });
+const t = useIntegrationsT();
 const draft = ref("");
 const inputRef = ref(null);
 const listId = useId();
@@ -15,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 === ",") {
@@ -33,17 +34,17 @@ function onKeydown(e) {
     @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}`"
-        :aria-label="`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>
@@ -57,7 +58,7 @@ function onKeydown(e) {
       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()"
     >