@revenexx/studio-integrations 0.6.0 → 0.7.0

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

@@ -24,6 +24,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["restored"]);
 const revisionsApi = useIntegrationsRevisions();
+const t = useIntegrationsT();
 const entries = ref([]);
 const page = ref(1);
 const lastPage = ref(1);
@@ -110,7 +111,7 @@ function buildPreview(blob) {
   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 triggerPos(id, ti);
     return { x: 0, y: 0 };
   };
@@ -149,16 +150,16 @@ function buildPreview(blob) {
       position: { x: s.position.x, y: s.position.y },
       zIndex: -100 + i,
       draggable: false,
-      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,
-      data: t
+      data: t2
     })),
     ...blob.nodes.map((n) => ({
       id: n.id,
@@ -218,23 +219,23 @@ async function select(revision) {
       buildPreview(detail.blob);
     }
   } catch (e) {
-    toast.error(e?.message ?? "Could not load the revision.");
+    toast.error(e?.message ?? t("integration.history.toast.loadRevisionFailed"));
   } finally {
     detailLoading.value = false;
   }
 }
 async function restoreRevision(rev) {
-  if (!confirm(`Restore revision ${rev.revision}? The current version is archived first, then the workflow is rebuilt from this snapshot.`)) return;
+  if (!confirm(t("integration.history.confirm.restore", { revision: rev.revision }))) return;
   restoring.value = rev.revision;
   try {
     await revisionsApi.restore(props.workflow.id, rev.revision);
-    toast.success(`Revision ${rev.revision} restored`);
+    toast.success(t("integration.history.toast.restored", { revision: rev.revision }));
     detailCache.clear();
     emit("restored");
     await loadList(true);
     void select(null);
   } catch (e) {
-    toast.error(e?.message ?? "Could not restore the revision.");
+    toast.error(e?.message ?? t("integration.history.toast.restoreFailed"));
   } finally {
     restoring.value = null;
   }
@@ -259,7 +260,7 @@ const nodeTypes = {
 const edgeTypes = {
   flow: markRaw(WorkflowEdgeView)
 };
-const previewTitle = computed(() => selected.value === null ? `Current version \xB7 revision ${props.workflow.revision}` : `Revision ${selected.value} (read-only)`);
+const previewTitle = computed(() => selected.value === null ? t("integration.history.preview.title.current", { revision: props.workflow.revision }) : t("integration.history.preview.title.revision", { revision: selected.value }));
 onMounted(() => {
   void loadList(true);
   void select(null);
@@ -311,9 +312,9 @@ onMounted(() => {
     <!-- Revision list -->
     <aside 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">Version history</div>
+        <div class="text-sm font-semibold">{{ t("integration.history.heading.title") }}</div>
         <p class="text-sm text-muted-foreground">
-          Every save archives the previous revision; the newest one is what runs while the workflow is active.
+          {{ t("integration.history.heading.description") }}
         </p>
       </div>
 
@@ -327,17 +328,17 @@ onMounted(() => {
         >
           <div class="flex items-center justify-between gap-2">
             <span class="text-sm font-medium tabular-nums">{{ formatDateTime(workflow.updated_at) }}</span>
-            <Badge variant="outline" class="text-xs font-medium uppercase border-emerald-500/30 text-emerald-700">Current</Badge>
+            <Badge variant="outline" class="text-xs font-medium uppercase border-emerald-500/30 text-emerald-700">{{ t("integration.history.badge.current") }}</Badge>
             <Badge
               variant="outline"
               class="text-xs font-medium uppercase"
               :class="workflow.active ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700' : 'border-black/[0.08] text-muted-foreground'"
-              :title="workflow.active ? 'Triggers are armed; this revision is what runs.' : 'Workflow is paused; activating runs this revision.'"
+              :title="workflow.active ? t('integration.history.badge.activeHint') : t('integration.history.badge.pausedHint')"
             >
-              {{ workflow.active ? "Active" : "Paused" }}
+              {{ workflow.active ? t("integration.history.badge.active") : t("integration.history.badge.paused") }}
             </Badge>
           </div>
-          <div class="mt-0.5 text-sm text-muted-foreground">Revision {{ workflow.revision }}</div>
+          <div class="mt-0.5 text-sm text-muted-foreground">{{ t("integration.history.list.revisionLabel", { revision: workflow.revision }) }}</div>
         </button>
 
         <!-- Archived revisions -->
@@ -351,7 +352,7 @@ onMounted(() => {
             <div class="flex items-center justify-between gap-2">
               <span class="text-sm font-medium tabular-nums">{{ formatDateTime(rev.archived_at) }}</span>
             </div>
-            <div class="mt-0.5 text-sm text-muted-foreground">Revision {{ rev.revision }}</div>
+            <div class="mt-0.5 text-sm text-muted-foreground">{{ t("integration.history.list.revisionLabel", { revision: rev.revision }) }}</div>
           </button>
           <div class="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 transition group-hover:opacity-100">
             <Button
@@ -362,13 +363,13 @@ onMounted(() => {
               @click.stop="restoreRevision(rev)"
             >
               <Loader2 v-if="restoring === rev.revision" :size="11" class="mr-1 animate-spin" />
-              Restore
+              {{ t("integration.history.action.restore") }}
             </Button>
           </div>
         </div>
 
         <p v-if="!entries.length && !listLoading" class="px-2 py-6 text-center text-sm text-muted-foreground">
-          No archived revisions yet — save a change to create the first snapshot.
+          {{ t("integration.history.state.empty") }}
         </p>
         <p v-if="revisionsApi.error.value" class="px-2 py-2 text-sm text-rose-600">
           {{ revisionsApi.error.value }}
@@ -393,7 +394,7 @@ onMounted(() => {
           class="w-full text-sm"
           @click="loadMore"
         >
-          Load older revisions
+          {{ t("integration.history.action.loadMore") }}
         </Button>
       </div>
     </aside>

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

@@ -8,6 +8,7 @@ const model = defineModel({ type: [Object, null], ...{ default: null } });
 const props = defineProps({
   triggerLabelledby: { type: String, required: false }
 });
+const t = useIntegrationsT();
 const valueId = useId();
 const triggerLabelledby = computed(
   () => props.triggerLabelledby ? `${props.triggerLabelledby} ${valueId}` : void 0
@@ -26,10 +27,10 @@ function isImage(id) {
   return (imageIdFromSrc(model.value.src) ?? model.value.src) === id;
 }
 const selectedLabel = computed(() => {
-  if (!model.value) return "Default icon";
-  if (model.value.kind === "solar") return model.value.name ?? "Icon";
+  if (!model.value) return t("integration.workflows.iconPicker.label.default");
+  if (model.value.kind === "solar") return model.value.name ?? t("integration.workflows.iconPicker.label.iconFallback");
   const id = imageIdFromSrc(model.value.src) ?? model.value.src;
-  return logos.value.find((l) => l.id === id)?.label ?? "Image";
+  return logos.value.find((l) => l.id === id)?.label ?? t("integration.workflows.iconPicker.label.imageFallback");
 });
 </script>
 
@@ -57,8 +58,8 @@ const selectedLabel = computed(() => {
             type="button"
             class="flex size-8 items-center justify-center rounded-md border text-sm text-muted-foreground transition hover:bg-muted/50"
             :class="!model ? 'border-emerald-500/40 bg-emerald-500/10' : 'border-transparent'"
-            title="No icon (default glyph)"
-            aria-label="No icon (default glyph)"
+            :title="t('integration.workflows.iconPicker.action.none')"
+            :aria-label="t('integration.workflows.iconPicker.action.none')"
             @click="pick(null)"
           >
             —
@@ -77,7 +78,7 @@ const selectedLabel = computed(() => {
         </div>
 
         <template v-if="logos.length">
-          <div class="text-mono text-muted-foreground">Integrations</div>
+          <div class="text-mono text-muted-foreground">{{ t("integration.workflows.iconPicker.section.integrations") }}</div>
           <div class="flex flex-wrap gap-1">
             <button
               v-for="l in logos"

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

@@ -3,6 +3,7 @@ import { computed, inject, nextTick, ref, watch } from "vue";
 import { Handle, Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
 import * as Lucide from "lucide-vue-next";
+import { Copy, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import { NODE_CATEGORIES, findManifest } from "../../data/integrationNodeCatalog";
 import { isTerminalManifest } from "../../data/nodeInputData";
 import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
@@ -13,6 +14,7 @@ const props = defineProps({
 });
 defineOptions({ inheritAttrs: false });
 defineEmits(["updateNodeInternals"]);
+const t = useIntegrationsT();
 const manifest = computed(() => findManifest(props.data.nodeSlug, props.data.nodeVersion));
 const category = computed(() => NODE_CATEGORIES.find((c) => c.key === manifest.value?.category));
 const title = computed(
@@ -20,10 +22,7 @@ const title = computed(
 );
 const inputRequired = computed(() => manifest.value?.input?.required !== false);
 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(", ")}`;
-});
+const invalidLabel = computed(() => t("integration.canvas.node.badge.invalidConfig", invalidFields.value.length, { fields: invalidFields.value.join(", ") }));
 const notes = computed(() => (props.data.notes ?? "").trim());
 const noteOpen = ref(false);
 const noteReady = ref(false);
@@ -62,12 +61,12 @@ const outputs = computed(() => {
   const resolved = props.data.__resolvedOutputs;
   if (Array.isArray(resolved) && resolved.length) {
     const ports2 = portsFromOutputs(resolved);
-    if (!ports2.length) ports2.push({ name: "default", kind: "default", label: "out" });
+    if (!ports2.length) ports2.push({ name: "default", kind: "default", label: t("integration.canvas.node.port.outputFallback") });
     return ports2;
   }
-  if (!m) return [{ name: "default", kind: "default", label: "out" }];
+  if (!m) return [{ name: "default", kind: "default", label: t("integration.canvas.node.port.outputFallback") }];
   const ports = portsFromOutputs(m.outputs ?? []);
-  if (!ports.length) ports.push({ name: "default", kind: "default", label: "out" });
+  if (!ports.length) ports.push({ name: "default", kind: "default", label: t("integration.canvas.node.port.outputFallback") });
   return ports;
 });
 function portSemantic(p) {
@@ -183,21 +182,21 @@ function remove() {
     <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"
+      :title="t('integration.canvas.node.action.duplicate')"
+      :aria-label="t('integration.canvas.node.action.duplicateAria')"
       @click="duplicate"
     >
-      <Lucide.Copy :size="11" />
+      <Copy :size="11" />
     </button>
     <div class="h-4 w-px bg-black/10" />
     <button
       type="button"
       class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-rose-600 hover:bg-rose-50"
-      title="Delete"
-      aria-label="Delete node"
+      :title="t('integration.common.action.delete')"
+      :aria-label="t('integration.canvas.node.action.deleteAria')"
       @click="remove"
     >
-      <Lucide.Trash2 :size="11" />
+      <TrashBin :size="11" />
     </button>
   </NodeToolbar>
 
@@ -219,7 +218,7 @@ function remove() {
   >
     <div ref="notePanel" role="tooltip">
       <div class="mb-1 text-[8px] font-semibold uppercase tracking-[0.08em] text-muted-foreground/60">
-        Note
+        {{ t("integration.canvas.node.note.heading") }}
       </div>
       <p class="whitespace-pre-wrap break-words text-[11px] leading-snug text-foreground/80">{{ notes }}</p>
     </div>
@@ -234,7 +233,7 @@ function remove() {
       :key="`in-${side}`"
       type="target"
       :position="sideToPosition(side)"
-      title="Input"
+      :title="t('integration.canvas.node.handle.input')"
       class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm transition-all hover:!size-3.5 hover:!bg-slate-700"
     />
   </template>
@@ -288,8 +287,8 @@ function remove() {
       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"
+      :title="t('integration.canvas.node.action.configure')"
+      :aria-label="t('integration.canvas.node.action.configure')"
       @click.stop="configure"
       @mousedown.stop
       @dblclick.stop
@@ -305,7 +304,7 @@ function remove() {
       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-label="t('integration.canvas.node.note.heading')"
       :aria-describedby="notePanelId"
       @mouseenter="openNote"
       @mouseleave="releaseNote"
@@ -332,7 +331,7 @@ function remove() {
         class="pointer-events-none absolute bottom-1 left-1/2 flex -translate-x-1/2 select-none items-center gap-1 whitespace-nowrap text-[9px] font-semibold uppercase tracking-wide text-muted-foreground"
       >
         <Lucide.LoaderCircle :size="9" class="animate-spin" />
-        Ports
+        {{ t("integration.canvas.node.port.resolving") }}
       </span>
       <template v-else>
         <span
@@ -364,7 +363,7 @@ function remove() {
         <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}`"
+            :title="t('integration.canvas.node.meta.versionTitle', { version: data.nodeVersion })"
           >v{{ data.nodeVersion }}</span>
         </div>
       </div>

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

@@ -26,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 },
@@ -33,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);
@@ -53,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;
   }
@@ -91,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;
@@ -173,7 +186,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 +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 };
   };
@@ -244,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,
@@ -274,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 };
   };
@@ -458,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>
@@ -479,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>
@@ -497,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>
@@ -517,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)">
@@ -531,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>
 
@@ -612,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">
@@ -625,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>