@revenexx/studio-integrations 0.5.1 → 0.7.0

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

@@ -14,6 +14,7 @@ const props = defineProps({
   run: { type: Object, required: true }
 });
 const emit = defineEmits(["changed"]);
+const t = useIntegrationsT();
 const router = useRouter();
 const { cancelRun, terminateRun, retryRun, resumeRun } = useIntegrationsRuns();
 function viewDetails() {
@@ -26,8 +27,31 @@ const isActive = computed(() => props.run.status === "running" || props.run.stat
 const isTerminal = computed(() => ["succeeded", "failed", "cancelled"].includes(props.run.status));
 const canResume = computed(() => props.run.status === "failed");
 const hasAny = computed(() => isActive.value || isTerminal.value);
-const LABEL = { cancel: "Cancel", terminate: "Terminate", retry: "Retry", resume: "Resume" };
 const busy = ref(false);
+function actionLabel(a) {
+  switch (a) {
+    case "cancel":
+      return t("integration.runs.menu.cancel");
+    case "terminate":
+      return t("integration.runs.menu.terminate");
+    case "retry":
+      return t("integration.runs.menu.retry");
+    case "resume":
+      return t("integration.runs.menu.resume");
+  }
+}
+function actionErrorFallback(a) {
+  switch (a) {
+    case "cancel":
+      return t("integration.runs.error.cancel");
+    case "terminate":
+      return t("integration.runs.error.terminate");
+    case "retry":
+      return t("integration.runs.error.retry");
+    case "resume":
+      return t("integration.runs.error.resume");
+  }
+}
 async function runAction(a) {
   if (busy.value) return;
   busy.value = true;
@@ -49,18 +73,18 @@ async function runAction(a) {
     }
     const newId = res && typeof res === "object" && "id" in res ? String(res.id) : null;
     toast.success(
-      (a === "retry" || a === "resume") && newId && newId !== String(props.run.id) ? `Started run #${newId}` : `${LABEL[a]} requested`
+      (a === "retry" || a === "resume") && newId && newId !== String(props.run.id) ? t("integration.runs.toast.action.started", { id: newId }) : t("integration.runs.toast.action.requested", { action: actionLabel(a) })
     );
     emit("changed");
   } catch (e) {
-    toast.error(e?.message ?? `Could not ${LABEL[a].toLowerCase()} the run.`);
+    toast.error(e?.message ?? actionErrorFallback(a));
   } finally {
     busy.value = false;
   }
 }
 function confirmTerminate() {
-  toast(`Terminate run #${props.run.id}?`, {
-    action: { label: "Terminate", onClick: () => void runAction("terminate") }
+  toast(t("integration.runs.toast.terminate.confirm", { id: props.run.id }), {
+    action: { label: actionLabel("terminate"), onClick: () => void runAction("terminate") }
   });
 }
 </script>
@@ -68,19 +92,21 @@ function confirmTerminate() {
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
-      <Button variant="ghost" size="icon" class="size-7" :disabled="busy" @click.stop>
+      <!-- Icon-only, so it needs a name of its own — the run id is the only
+           thing that tells two rows' menus apart. -->
+      <Button variant="ghost" size="icon" class="size-7" :disabled="busy" :aria-label="t('integration.runs.menu.aria.actions', { id: run.id })" @click.stop>
         <MoreHorizontal :size="16" />
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end" class="w-40" @click.stop>
-      <DropdownMenuItem @select="viewDetails">View details</DropdownMenuItem>
-      <DropdownMenuItem @select="viewReplay">Replay</DropdownMenuItem>
+      <DropdownMenuItem @select="viewDetails">{{ t("integration.runs.menu.viewDetails") }}</DropdownMenuItem>
+      <DropdownMenuItem @select="viewReplay">{{ t("integration.runs.menu.replay") }}</DropdownMenuItem>
       <DropdownMenuSeparator v-if="hasAny" />
-      <DropdownMenuItem v-if="isActive" @select="runAction('cancel')">Cancel run</DropdownMenuItem>
-      <DropdownMenuItem v-if="isActive" class="text-rose-600" @select="confirmTerminate">Terminate</DropdownMenuItem>
+      <DropdownMenuItem v-if="isActive" @select="runAction('cancel')">{{ actionLabel("cancel") }}</DropdownMenuItem>
+      <DropdownMenuItem v-if="isActive" class="text-rose-600" @select="confirmTerminate">{{ actionLabel("terminate") }}</DropdownMenuItem>
       <DropdownMenuSeparator v-if="isActive && (canResume || isTerminal)" />
-      <DropdownMenuItem v-if="canResume" @select="runAction('resume')">Resume</DropdownMenuItem>
-      <DropdownMenuItem v-if="isTerminal" @select="runAction('retry')">Retry</DropdownMenuItem>
+      <DropdownMenuItem v-if="canResume" @select="runAction('resume')">{{ actionLabel("resume") }}</DropdownMenuItem>
+      <DropdownMenuItem v-if="isTerminal" @select="runAction('retry')">{{ actionLabel("retry") }}</DropdownMenuItem>
     </DropdownMenuContent>
   </DropdownMenu>
 </template>

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

@@ -4,11 +4,13 @@ import { Download as DownloadIcon, RefreshCircle as RefreshIcon } from "#solar-i
 import { Badge, Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@revenexx/studio";
 import { runStatusLabel, statusClass } from "../../utils/statusStyle";
 import { IntegrationsApiError } from "../../utils/apiError";
+import { createPollBudget, SAFETY_POLL_MS } from "../../utils/pollBudget";
 const props = defineProps({
   run: { type: Object, required: true },
   view: { type: String, required: false, default: "details" }
 });
 const emit = defineEmits(["changed"]);
+const t = useIntegrationsT();
 const {
   getRun,
   getDetails,
@@ -23,6 +25,9 @@ const {
 const DETAILS_POLL_MS = 3e3;
 const HISTORY_POLL_MS = 1e4;
 const HISTORY_PAGE_SIZE = 50;
+const { delivering: realtimeDelivering, runTick, lastRunEvent } = useIntegrationsRealtime();
+const summaryBudget = createPollBudget({ intervalMs: DETAILS_POLL_MS, liveIntervalMs: SAFETY_POLL_MS });
+const historyBudget = createPollBudget({ intervalMs: HISTORY_POLL_MS, liveIntervalMs: SAFETY_POLL_MS });
 const COCKPIT_TERMINAL = /* @__PURE__ */ new Set(["succeeded", "failed", "cancelled"]);
 const API_TERMINAL = /* @__PURE__ */ new Set(["completed", "failed", "cancelled", "terminated", "timed_out"]);
 const runData = ref(null);
@@ -127,9 +132,9 @@ function eventAttributes(ev) {
   return pick(ev, ["attributes"]);
 }
 function eventColor(type) {
-  const t = type.toLowerCase();
-  if (t.includes("failed") || t.includes("terminated")) return "text-rose-600";
-  if (t.includes("completed")) return "text-emerald-600";
+  const t2 = type.toLowerCase();
+  if (t2.includes("failed") || t2.includes("terminated")) return "text-rose-600";
+  if (t2.includes("completed")) return "text-emerald-600";
   return "text-foreground";
 }
 function statusOf(e) {
@@ -141,29 +146,29 @@ function genericMsg(e, fallback) {
 }
 function detailsErrMsg(e) {
   const s = statusOf(e);
-  if (s === 410) return "History is no longer available (retention expired and no snapshot).";
-  if (s === 503) return "Temporal is currently unavailable.";
-  return genericMsg(e, "Could not load Temporal details.");
+  if (s === 410) return t("integration.runs.detail.error.details.expired");
+  if (s === 503) return t("integration.runs.detail.error.details.unavailable");
+  return genericMsg(e, t("integration.runs.detail.error.details.generic"));
 }
 function historyErrMsg(e) {
   const s = statusOf(e);
-  if (s === 410) return "History is no longer available.";
-  if (s === 422) return "Pagination cursor invalidated \u2014 reset.";
-  return genericMsg(e, "Could not load history.");
+  if (s === 410) return t("integration.runs.detail.error.history.expired");
+  if (s === 422) return t("integration.runs.detail.error.history.cursorInvalid");
+  return genericMsg(e, t("integration.runs.detail.error.history.generic"));
 }
 function stackErrMsg(e) {
   const s = statusOf(e);
-  if (s === 409) return "Workflow is no longer running.";
-  if (s === 410) return "Unknown to Temporal.";
-  if (s === 503) return "Temporal unavailable.";
-  return genericMsg(e, "Could not load stack trace.");
+  if (s === 409) return t("integration.runs.detail.error.stack.notRunning");
+  if (s === 410) return t("integration.runs.detail.error.stack.unknown");
+  if (s === 503) return t("integration.runs.detail.error.stack.unavailable");
+  return genericMsg(e, t("integration.runs.detail.error.stack.generic"));
 }
 function stepsErrMsg(e) {
   const s = statusOf(e);
-  if (s === 409) return "Run has not been handed off to Temporal yet.";
-  if (s === 410) return "Execution history is no longer available.";
-  if (s === 503) return "Temporal is currently unavailable.";
-  return genericMsg(e, "Could not load steps.");
+  if (s === 409) return t("integration.runs.detail.notHandedOff");
+  if (s === 410) return t("integration.runs.detail.error.steps.expired");
+  if (s === 503) return t("integration.runs.detail.error.details.unavailable");
+  return genericMsg(e, t("integration.runs.detail.error.steps.generic"));
 }
 function fmtMs(ms) {
   if (ms == null) return "\u2014";
@@ -174,7 +179,7 @@ function fmtMs(ms) {
 function activityName(a) {
   const at = a ? a.activity_type ?? a.activityType : void 0;
   if (typeof at === "string") return at;
-  return pickStr(at, ["name"]) ?? "Activity";
+  return pickStr(at, ["name"]) ?? t("integration.runs.detail.timeline.label.activity");
 }
 const timeline = computed(() => {
   const evs = timelineEvents.value;
@@ -189,7 +194,7 @@ const timeline = computed(() => {
     const ts = timeOf(ev);
     if (!Number.isFinite(ts)) continue;
     if (type === "workflow_execution_started") {
-      wf = { label: "Workflow", kind: "workflow", sched: ts, start: ts, end: null, ok: true, events: [ev] };
+      wf = { label: t("integration.runs.detail.timeline.label.workflow"), kind: "workflow", sched: ts, start: ts, end: null, ok: true, events: [ev] };
     } else if (type.startsWith("workflow_execution_")) {
       if (wf) {
         wf.end = ts;
@@ -199,7 +204,7 @@ const timeline = computed(() => {
     } else if (type === "activity_task_scheduled") {
       cycles.set(eventId(ev), { label: activityName(attrsOf(ev)), kind: "activity", sched: ts, start: null, end: null, ok: true, events: [ev] });
     } else if (type === "workflow_task_scheduled") {
-      cycles.set(eventId(ev), { label: "Workflow task", kind: "wf-task", sched: ts, start: null, end: null, ok: true, events: [ev] });
+      cycles.set(eventId(ev), { label: t("integration.runs.detail.timeline.label.workflowTask"), kind: "wf-task", sched: ts, start: null, end: null, ok: true, events: [ev] });
     } else if (type === "activity_task_started" || type === "workflow_task_started") {
       const c = cycles.get(refOf(ev, ["scheduled_event_id", "scheduledEventId"]));
       if (c) {
@@ -214,7 +219,7 @@ const timeline = computed(() => {
         c.events.push(ev);
       }
     } else if (type === "timer_started") {
-      cycles.set(eventId(ev), { label: "Timer", kind: "timer", sched: ts, start: ts, end: null, ok: true, events: [ev] });
+      cycles.set(eventId(ev), { label: t("integration.runs.detail.timeline.label.timer"), kind: "timer", sched: ts, start: ts, end: null, ok: true, events: [ev] });
     } else if (type === "timer_fired" || type === "timer_canceled") {
       const c = cycles.get(refOf(ev, ["started_event_id", "startedEventId"]));
       if (c) {
@@ -266,8 +271,8 @@ function timelineBarClass(row) {
 }
 const timelineDetail = ref(null);
 function timelineRowStatus(row) {
-  if (row.durationMs == null) return "running";
-  return row.ok ? "succeeded" : "failed";
+  if (row.durationMs == null) return t("integration.runs.status.running");
+  return t(row.ok ? "integration.runs.status.succeeded" : "integration.runs.status.failed");
 }
 function fmtClock(ms) {
   try {
@@ -277,6 +282,7 @@ function fmtClock(ms) {
   }
 }
 async function loadSummary() {
+  summaryBudget.spend();
   summaryLoading.value = true;
   summaryError.value = null;
   try {
@@ -353,6 +359,7 @@ async function loadTimelineEvents() {
     historyError.value = null;
     return;
   }
+  historyBudget.spend();
   if (!timelineEvents.value.length) historyLoading.value = true;
   historyError.value = null;
   try {
@@ -389,6 +396,7 @@ function startPollingIfNeeded() {
   stopPolling();
   if (isTerminal.value) return;
   summaryTimer = setInterval(() => {
+    if (!summaryBudget.due(realtimeDelivering.value)) return;
     void loadSummary().then(() => {
       if (isTerminal.value) {
         stopPolling();
@@ -399,9 +407,23 @@ function startPollingIfNeeded() {
     });
   }, DETAILS_POLL_MS);
   historyTimer = setInterval(() => {
+    if (!historyBudget.due(realtimeDelivering.value)) return;
     void loadTimelineEvents();
   }, HISTORY_POLL_MS);
 }
+function refreshFromEvent() {
+  void loadSummary().then(() => {
+    if (isTerminal.value) stopPolling();
+    void loadDetails();
+    void loadSteps();
+  });
+  void loadTimelineEvents();
+}
+watch(runTick, () => {
+  const event = lastRunEvent.value;
+  if (event && event.topicId !== props.run.id) return;
+  refreshFromEvent();
+});
 function resetState() {
   runData.value = null;
   summaryError.value = null;
@@ -422,12 +444,42 @@ function resetState() {
   actionError.value = null;
   actionNotice.value = null;
 }
-const ACTION_LABELS = {
-  cancel: "Cancel",
-  terminate: "Terminate",
-  retry: "Retry",
-  resume: "Resume"
-};
+function actionLabel(a) {
+  switch (a) {
+    case "cancel":
+      return t("integration.runs.action.cancel");
+    case "terminate":
+      return t("integration.runs.action.terminate");
+    case "retry":
+      return t("integration.runs.action.retry");
+    case "resume":
+      return t("integration.runs.action.resume");
+  }
+}
+function confirmQuestion(a) {
+  switch (a) {
+    case "cancel":
+      return t("integration.runs.confirm.cancel");
+    case "terminate":
+      return t("integration.runs.confirm.terminate");
+    case "retry":
+      return t("integration.runs.confirm.retry");
+    case "resume":
+      return t("integration.runs.confirm.resume");
+  }
+}
+function actionErrorFallback(a) {
+  switch (a) {
+    case "cancel":
+      return t("integration.runs.error.cancel");
+    case "terminate":
+      return t("integration.runs.error.terminate");
+    case "retry":
+      return t("integration.runs.error.retry");
+    case "resume":
+      return t("integration.runs.error.resume");
+  }
+}
 const apiStatusRaw = computed(() => pickStr(runData.value, ["status"]));
 const isActive = computed(() => !isTerminal.value);
 const canStop = computed(() => isActive.value && hasTemporal.value);
@@ -476,13 +528,13 @@ async function confirmAction() {
         break;
     }
     const newId = pickStr(res, ["id"]);
-    actionNotice.value = (a === "retry" || a === "resume") && newId && newId !== String(props.run.id) ? `Started run #${newId}.` : `${ACTION_LABELS[a]} requested.`;
+    actionNotice.value = (a === "retry" || a === "resume") && newId && newId !== String(props.run.id) ? t("integration.runs.notice.started", { id: newId }) : t("integration.runs.notice.requested", { action: actionLabel(a) });
     armed.value = null;
     await loadAll();
     startPollingIfNeeded();
     emit("changed");
   } catch (e) {
-    actionError.value = genericMsg(e, `Could not ${ACTION_LABELS[a].toLowerCase()} the run.`);
+    actionError.value = genericMsg(e, actionErrorFallback(a));
   } finally {
     actionBusy.value = false;
   }
@@ -498,7 +550,7 @@ async function confirmAction() {
       <div v-if="hasActions" class="flex items-center gap-2">
         <!-- confirm step: one click arms, second confirms -->
         <template v-if="armed">
-          <span class="text-sm text-muted-foreground">{{ ACTION_LABELS[armed] }} this run?</span>
+          <span class="text-sm text-muted-foreground">{{ confirmQuestion(armed) }}</span>
           <Button
             size="sm"
             :class="armed === 'terminate' ? 'bg-rose-600 hover:bg-rose-700 text-white' : ''"
@@ -506,14 +558,14 @@ async function confirmAction() {
             @click="confirmAction"
           >
             <RefreshIcon v-if="actionBusy" :size="14" class="mr-1 animate-spin" />
-            Confirm
+            {{ t("integration.common.action.confirm") }}
           </Button>
-          <Button variant="ghost" size="sm" :disabled="actionBusy" @click="disarm">Back</Button>
+          <Button variant="ghost" size="sm" :disabled="actionBusy" @click="disarm">{{ t("integration.runs.action.back") }}</Button>
         </template>
         <template v-else>
-          <Button v-if="canStop" variant="outline" size="sm" @click="arm('cancel')">Cancel run</Button>
-          <Button v-if="canStop" variant="outline" size="sm" class="text-rose-600 hover:bg-rose-500/10" @click="arm('terminate')">Terminate</Button>
-          <Button v-if="canResume" variant="outline" size="sm" @click="arm('resume')">Resume</Button>
+          <Button v-if="canStop" variant="outline" size="sm" @click="arm('cancel')">{{ actionLabel("cancel") }}</Button>
+          <Button v-if="canStop" variant="outline" size="sm" class="text-rose-600 hover:bg-rose-500/10" @click="arm('terminate')">{{ actionLabel("terminate") }}</Button>
+          <Button v-if="canResume" variant="outline" size="sm" @click="arm('resume')">{{ actionLabel("resume") }}</Button>
         </template>
       </div>
 
@@ -529,7 +581,7 @@ async function confirmAction() {
       <section class="rounded-md border border-black/[0.06] bg-white p-4 space-y-3">
         <div class="grid gap-x-6 gap-y-3 sm:grid-cols-2 xl:grid-cols-4">
           <div>
-            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Status</div>
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.field.status") }}</div>
             <div class="mt-0.5">
               <Badge variant="outline" :class="['border text-xs font-medium uppercase', statusClass(dStatus ?? run.status)]">
                 {{ runStatusLabel(dStatus ?? run.status) }}
@@ -537,31 +589,31 @@ async function confirmAction() {
             </div>
           </div>
           <div>
-            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Started</div>
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.field.started") }}</div>
             <div class="tabular-nums">{{ fmt(startedAt) }}</div>
           </div>
           <div>
-            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Completed</div>
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.field.completed") }}</div>
             <div class="tabular-nums">{{ fmt(completedAt) }}</div>
           </div>
           <div>
-            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">History Length</div>
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.field.historyLength") }}</div>
             <div class="tabular-nums">{{ dHistoryLength ?? "\u2014" }}</div>
           </div>
           <div class="min-w-0">
-            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Workflow</div>
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.field.workflow") }}</div>
             <div class="truncate font-mono text-xs leading-5" :title="temporalWorkflowId ?? '\u2014'">{{ temporalWorkflowId ?? "\u2014" }}</div>
           </div>
           <div class="min-w-0">
-            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Run ID</div>
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.field.runId") }}</div>
             <div class="truncate font-mono text-xs leading-5" :title="temporalRunId ?? '\u2014'">{{ temporalRunId ?? "\u2014" }}</div>
           </div>
           <div class="min-w-0">
-            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Workflow Type</div>
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.field.workflowType") }}</div>
             <div class="truncate font-mono text-xs leading-5">{{ dWorkflowType ?? "\u2014" }}</div>
           </div>
           <div class="min-w-0">
-            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Task Queue</div>
+            <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.field.taskQueue") }}</div>
             <div class="truncate font-mono text-xs leading-5">{{ dTaskQueue ?? "\u2014" }}</div>
           </div>
         </div>
@@ -578,7 +630,7 @@ async function confirmAction() {
 
       <!-- Result — full width below the overview. -->
       <section v-if="hasResult" class="rounded-md border border-black/[0.06] bg-white p-4 space-y-2">
-        <h4 class="font-mono text-xs uppercase tracking-wide text-muted-foreground">Result</h4>
+        <h4 class="font-mono text-xs uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.result.title") }}</h4>
         <div v-if="resultLinks.length" class="flex flex-wrap gap-1.5">
           <a
             v-for="link in resultLinks"
@@ -598,18 +650,18 @@ async function confirmAction() {
       <!-- Stack Trace (non-terminal runs only, lazy) -->
       <section v-if="!isTerminal" class="rounded-md border border-black/[0.06] bg-white p-4 space-y-3">
         <div class="flex items-center gap-2 border-b border-black/[0.06] pb-2">
-          <h4 class="font-mono text-xs uppercase tracking-wide text-muted-foreground">Stack Trace</h4>
+          <h4 class="font-mono text-xs uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.stackTrace.title") }}</h4>
           <div class="flex-1" />
           <Button variant="outline" size="sm" :disabled="stackLoading" @click="loadStack">
-            {{ stackEnabled ? "\u21BB Reload" : "Load" }}
+            {{ stackEnabled ? t("integration.runs.detail.stackTrace.action.reload") : t("integration.runs.detail.stackTrace.action.load") }}
           </Button>
         </div>
 
         <p v-if="!stackEnabled" class="text-xs text-muted-foreground">
-          Load to query the running worker for its current call stack.
+          {{ t("integration.runs.detail.stackTrace.hint") }}
         </p>
         <div v-else-if="stackLoading" class="flex items-center gap-2 text-muted-foreground">
-          <RefreshIcon :size="14" class="animate-spin" /> Querying worker…
+          <RefreshIcon :size="14" class="animate-spin" /> {{ t("integration.runs.detail.stackTrace.loading") }}
         </div>
         <p v-else-if="stackError" class="text-rose-700">{{ stackError }}</p>
         <pre
@@ -624,18 +676,18 @@ async function confirmAction() {
       <!-- Steps (per-node projection) -->
       <section v-if="hasTemporal" class="rounded-md border border-black/[0.06] bg-white p-4 space-y-3">
         <div class="flex items-center gap-2 border-b border-black/[0.06] pb-2">
-          <h4 class="font-mono text-xs uppercase tracking-wide text-muted-foreground">Steps</h4>
+          <h4 class="font-mono text-xs uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.steps.title") }}</h4>
           <div class="flex-1" />
           <Button variant="outline" size="sm" :disabled="stepsLoading" @click="toggleStepPayloads">
-            {{ stepsWithPayloads ? "Hide payloads" : "Show payloads" }}
+            {{ stepsWithPayloads ? t("integration.runs.detail.steps.action.hidePayloads") : t("integration.runs.detail.steps.action.showPayloads") }}
           </Button>
         </div>
 
         <p v-if="stepsError" class="text-rose-700">{{ stepsError }}</p>
         <div v-else-if="stepsLoading && !steps.length" class="flex items-center gap-2 text-muted-foreground">
-          <RefreshIcon :size="14" class="animate-spin" /> Loading steps…
+          <RefreshIcon :size="14" class="animate-spin" /> {{ t("integration.runs.detail.steps.loading") }}
         </div>
-        <p v-else-if="!steps.length" class="text-muted-foreground">No steps projected yet.</p>
+        <p v-else-if="!steps.length" class="text-muted-foreground">{{ t("integration.runs.detail.steps.empty") }}</p>
         <ol v-else class="space-y-1">
           <li
             v-for="(st, i) in steps"
@@ -651,7 +703,7 @@ async function confirmAction() {
               <div class="min-w-0 flex-1">
                 <div class="font-mono text-xs truncate">{{ st.node_slug || st.node_id }}</div>
                 <div class="text-[10px] text-muted-foreground truncate">
-                  {{ st.node_id }}<template v-if="st.branch"> · branch {{ st.branch }}</template><template v-if="st.attempt"> · attempt {{ st.attempt + 1 }}</template>
+                  {{ st.node_id }}<template v-if="st.branch"> · {{ t("integration.runs.detail.steps.branchLabel") }} {{ st.branch }}</template><template v-if="st.attempt"> · {{ t("integration.runs.detail.steps.attemptLabel") }} {{ st.attempt + 1 }}</template>
                 </div>
               </div>
               <span class="text-xs text-muted-foreground tabular-nums shrink-0">{{ fmtMs(st.duration_ms) }}</span>
@@ -663,16 +715,16 @@ async function confirmAction() {
             <div v-if="expandedStep === i" class="px-3 pb-3 space-y-2">
               <template v-if="stepsWithPayloads">
                 <div class="space-y-1">
-                  <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Input</div>
+                  <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.steps.field.input") }}</div>
                   <pre class="rounded-md bg-muted/40 p-3 text-xs overflow-x-auto max-h-40">{{ st.input === void 0 ? "\u2014" : json(st.input) }}</pre>
                 </div>
                 <div class="space-y-1">
-                  <div class="text-[10px] uppercase tracking-wide text-muted-foreground">Output</div>
+                  <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.steps.field.output") }}</div>
                   <pre class="rounded-md bg-muted/40 p-3 text-xs overflow-x-auto max-h-40">{{ st.output === void 0 ? "\u2014" : json(st.output) }}</pre>
                 </div>
               </template>
               <p v-else class="text-xs text-muted-foreground">
-                Enable “Show payloads” to load this step's input and output.
+                {{ t("integration.runs.detail.steps.payloadHint") }}
               </p>
             </div>
           </li>
@@ -683,14 +735,14 @@ async function confirmAction() {
            opens the underlying events in a lightbox. -->
       <section v-if="hasTemporal" class="rounded-md border border-black/[0.06] bg-white p-4 space-y-3">
         <div class="flex items-center gap-2 border-b border-black/[0.06] pb-2">
-          <h4 class="font-mono text-xs uppercase tracking-wide text-muted-foreground">History</h4>
+          <h4 class="font-mono text-xs uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.history.title") }}</h4>
         </div>
 
         <p v-if="historyError" class="text-rose-700">{{ historyError }}</p>
         <div v-else-if="historyLoading && !timeline" class="flex items-center gap-2 text-muted-foreground">
-          <RefreshIcon :size="14" class="animate-spin" /> Loading history…
+          <RefreshIcon :size="14" class="animate-spin" /> {{ t("integration.runs.detail.history.loading") }}
         </div>
-        <p v-else-if="!timeline" class="text-muted-foreground">No history events.</p>
+        <p v-else-if="!timeline" class="text-muted-foreground">{{ t("integration.runs.detail.history.empty") }}</p>
         <div v-else class="rounded-md border border-black/[0.05] bg-slate-50/60 p-2">
           <div class="relative">
             <div class="pointer-events-none absolute inset-y-0 left-1/4 border-l border-black/[0.05]" />
@@ -735,7 +787,7 @@ async function confirmAction() {
       </section>
 
       <p v-if="!hasTemporal" class="text-muted-foreground">
-        Run has not been handed off to Temporal yet.
+        {{ t("integration.runs.detail.notHandedOff") }}
       </p>
     </template>
 

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

@@ -1,13 +1,16 @@
 <script setup>
-import { computed, ref, watch } from "vue";
-import { Paperclip, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import { computed, ref, useId, watch } from "vue";
+import { Paperclip, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import { Input, Switch, Textarea } from "@revenexx/studio";
 import { buildPayload, payloadFieldsFromBlob, splitPayload } from "../../data/payloadForm";
 const props = defineProps({
   blob: { type: Object, required: true }
 });
 const model = defineModel({ type: String, ...{ default: "{}" } });
+const t = useIntegrationsT();
 const fields = computed(() => payloadFieldsFromBlob(props.blob));
+const uid = useId();
+const fieldId = (path) => `${uid}-${path}`;
 const textValues = ref({});
 const files = ref({});
 const extras = ref({});
@@ -45,7 +48,7 @@ function toggleExpert(on) {
     return;
   }
   if (!hydrateForm()) {
-    parseNote.value = "The JSON does not parse \u2014 fix it before switching back to the form.";
+    parseNote.value = t("integration.runs.payload.parseError");
     return;
   }
   parseNote.value = null;
@@ -94,19 +97,26 @@ function prettyBytes(n) {
   <div class="space-y-2">
     <div v-if="fields.length" class="flex items-center justify-between">
       <span class="text-xs font-medium text-muted-foreground">
-        {{ expert ? "Trigger payload (JSON)" : "Trigger payload" }}
+        {{ expert ? t("integration.runs.payload.label.json") : t("integration.runs.payload.label.form") }}
       </span>
+      <!-- The Switch is a `button role="switch"`, and HTML-AAM does not name a
+           button from a wrapping <label> — Chromium does, other engines need
+           not. The explicit name is what the promise rests on. -->
       <label class="flex items-center gap-1.5 text-xs text-muted-foreground">
-        <Switch :model-value="expert" @update:model-value="toggleExpert" />
-        Expert (JSON)
+        <Switch :aria-label="t('integration.runs.payload.expertToggle.label')" :model-value="expert" @update:model-value="toggleExpert" />
+        {{ t("integration.runs.payload.expertToggle.label") }}
       </label>
     </div>
-    <label v-else class="text-xs font-medium text-muted-foreground">Trigger payload (JSON)</label>
+    <span v-else class="text-xs font-medium text-muted-foreground">{{ t("integration.runs.payload.label.json") }}</span>
 
     <!-- ── Form mode: fields derived from the blob's payload references ──── -->
     <div v-if="!expert && fields.length" class="space-y-3">
       <div v-for="field in fields" :key="`${field.kind}:${field.path}`" class="space-y-1">
-        <label class="text-xs font-medium">{{ field.label }}</label>
+        <!-- A file field has no control to point at once a file is attached —
+             the drop zone is replaced by the file's own row — so there the
+             caption stays a caption and the controls name themselves. -->
+        <label v-if="field.kind === 'file'" class="text-xs font-medium">{{ field.label }}</label>
+        <label v-else :for="fieldId(field.path)" class="text-xs font-medium">{{ field.label }}</label>
 
         <template v-if="field.kind === 'file'">
           <div
@@ -118,9 +128,10 @@ function prettyBytes(n) {
             @drop.prevent="onDrop(field.path, $event)"
           >
             <Paperclip :size="14" />
-            Drop a file here or click to choose
+            {{ t("integration.runs.payload.file.dropHint") }}
             <input
               type="file"
+              :aria-label="field.label"
               class="absolute inset-0 cursor-pointer opacity-0"
               @change="onPick(field.path, $event)"
             >
@@ -132,19 +143,21 @@ function prettyBytes(n) {
             <button
               type="button"
               class="flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:bg-muted/60 hover:text-rose-600"
-              title="Remove file"
+              :title="t('integration.runs.payload.file.remove.title')"
+              :aria-label="t('integration.runs.payload.file.remove.aria', { field: field.label })"
               @click="detach(field.path)"
             >
-              <Trash2 :size="13" />
+              <TrashBin :size="13" />
             </button>
           </div>
           <p v-if="files[field.path] && files[field.path].size > WARN_BYTES" class="text-xs text-amber-700">
-            Large file — payloads beyond ~25 MB can exceed the workflow bus limits. Prefer the SFTP or IO routes for big files.
+            {{ t("integration.runs.payload.file.tooLarge") }}
           </p>
         </template>
 
         <template v-else>
           <Input
+            :id="fieldId(field.path)"
             :model-value="textValues[field.path] ?? ''"
             class="h-8 text-sm"
             :placeholder="`\${{ trigger.payload.${field.path} }}`"
@@ -155,7 +168,7 @@ function prettyBytes(n) {
         </template>
       </div>
       <p v-if="Object.keys(extras).length" class="text-xs text-muted-foreground">
-        Additional payload keys from the expert view are kept: {{ Object.keys(extras).join(", ") }}
+        {{ t("integration.runs.payload.extrasNote", { keys: Object.keys(extras).join(", ") }) }}
       </p>
     </div>
 
@@ -163,6 +176,7 @@ function prettyBytes(n) {
     <template v-else>
       <Textarea
         v-model="model"
+        :aria-label="t('integration.runs.payload.label.json')"
         :rows="8"
         spellcheck="false"
         class="font-mono text-xs"