@revenexx/studio-integrations 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @revenexx/studio-integrations
 
+## 1.1.1
+
+### Patch Changes
+
+- 77ea454: A workflow's Runs tab no longer puts the operator back on the newest page while
+  they are paging. The tab's own refresh used to consult the page that last arrived
+  rather than the page that was asked for, so a refresh falling due between "show me
+  the older runs" and those runs arriving won the race and undid the click. It now
+  leaves a pending page alone, and a refresh that was already on its way no longer
+  draws over the page the operator asked for.
+- ddb95eb: The `{ }` button beside a node setting is no longer announced as its own glyph.
+  It now carries a name saying what it does and what it opens ("Insert expression —
+  available data for this setting", and the German equivalent), reports whether the
+  list of available data is open, and points at that list while it is there.
+
+  It can also be operated from the keyboard at all now: it acted on a mouse press
+  alone, so Enter and Space did nothing, and Escape while it had focus closed the whole
+  node configuration dialog instead of the list. Nothing changes for a pointer.
+
+- ec8f025: A run row no longer offers actions the platform will refuse. A run that has been
+  accepted but not started yet has no execution to act on, and the API answers a
+  cancel, a terminate or a resume for it with a 409 — so the row now withholds all
+  three, the way the run's own record already does, instead of turning the click into
+  an error toast.
+
+  Two German words on the same menu are fixed with it: the row's "Retry" and the
+  record's were shipped untranslated, and the entry that opens a run's replay said
+  "Wiederholen", which reads as an offer to run it again. They now read "Erneut
+  ausführen" and "Wiedergabe" — the word the replay surface itself already uses.
+
+- 0de6228: A run's outcome is no longer cut off or drawn over the workflow name beside it. The
+  Status column in both lists of runs — the Runs page and the dashboard's latest runs —
+  was a fixed width measured against the English words, so the German
+  "fehlgeschlagen" ran out of its cell; the dashboard's own column was narrower still,
+  and even "erfolgreich" overflowed it. Both now share one track that keeps a floor and
+  grows to the widest word on the page, in whatever language the studio is read.
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@revenexx/studio-integrations",
   "configKey": "studioIntegrations",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, inject, onBeforeUnmount, onMounted, ref, useId, watch } from "vue";
 import { Editor, EditorContent } from "@tiptap/vue-3";
 import { Node } from "@tiptap/core";
 import Document from "@tiptap/extension-document";
@@ -158,10 +158,16 @@ const filteredSections = computed(() => {
 });
 const open = ref(false);
 const wrapRef = ref(null);
+const triggerRef = ref(null);
+const listOpen = computed(() => open.value && hasSuggestions.value);
+const pickerId = useId();
 function toggle() {
   if (!open.value && !hasSuggestions.value) return;
   open.value = !open.value;
 }
+function onTriggerClick(e) {
+  if (e.detail === 0) toggle();
+}
 function onFocusOut(e) {
   if (wrapRef.value && e.relatedTarget instanceof globalThis.Node && wrapRef.value.contains(e.relatedTarget)) return;
   open.value = false;
@@ -173,6 +179,13 @@ function onKeydown(e) {
     open.value = false;
   }
 }
+function onPickerKeydown(e) {
+  if (e.key !== "Escape" || !open.value) return;
+  e.stopPropagation();
+  e.preventDefault();
+  open.value = false;
+  triggerRef.value?.focus();
+}
 function onDocMousedown(e) {
   if (wrapRef.value && !wrapRef.value.contains(e.target)) open.value = false;
 }
@@ -188,7 +201,11 @@ function insert(expr) {
 </script>
 
 <template>
-  <div ref="wrapRef" class="relative" @focusout="onFocusOut">
+  <!-- `keydown` on the widget rather than on the editor alone: with focus on the
+       trigger, Escape used to reach the configuration lightbox and close the whole
+       dialog. The editor keeps its own handler, which stops the event before it
+       arrives here. -->
+  <div ref="wrapRef" class="relative" @focusout="onFocusOut" @keydown="onKeydown">
     <div class="flex items-center gap-1">
       <div
         class="expr-editor relative h-8 min-w-0 flex-1 overflow-hidden rounded-md border bg-white px-2 text-sm transition focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-ring"
@@ -200,12 +217,22 @@ function insert(expr) {
         >{{ placeholder }}</span>
         <EditorContent :editor="editor" class="h-full" @keydown="onKeydown" />
       </div>
+      <!-- The name says what the button does AND what it opens, because the glyph
+           says neither; `aria-expanded` says whether the list is there, and
+           `aria-controls` only while it is — an id pointing at nothing is worse
+           than no link. See the docblock on `listOpen` for why this is not the
+           shared popover. -->
       <button
+        ref="triggerRef"
         type="button"
         :title="t('integration.nodeConfig.expression.insertTitle')"
+        :aria-label="t('integration.nodeConfig.expression.insertAria')"
+        :aria-expanded="listOpen"
+        :aria-controls="listOpen ? pickerId : void 0"
         class="flex h-8 shrink-0 items-center rounded-md border border-black/[0.08] bg-white px-1.5 font-mono text-sm text-muted-foreground transition hover:text-foreground hover:bg-muted/30"
-        :class="open ? 'ring-2 ring-emerald-500/40' : ''"
+        :class="listOpen ? 'ring-2 ring-emerald-500/40' : ''"
         @mousedown.prevent="toggle"
+        @click="onTriggerClick"
       >
         {{ triggerLabel }}
       </button>
@@ -224,8 +251,10 @@ function insert(expr) {
          here and in the panel beside the form — and a popup nothing can address
          is a popup nothing can test either. -->
     <div
-      v-if="open && hasSuggestions"
+      v-if="listOpen"
+      :id="pickerId"
       role="group"
+      @keydown="onPickerKeydown"
       :aria-label="t('integration.nodeConfig.expression.picker.aria')"
       class="absolute right-0 top-full z-50 mt-1 flex max-h-72 w-80 flex-col rounded-md border border-black/[0.08] bg-white text-sm shadow-lg"
     >

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

@@ -23,9 +23,10 @@ function viewDetails() {
 function viewReplay() {
   void router.push({ path: `/integrations/workflows/${props.run.workflowId}`, query: { run: props.run.id, view: "replay" } });
 }
-const isActive = computed(() => props.run.status === "running" || props.run.status === "queued");
+const hasExecution = computed(() => !!props.run.temporalRunId);
+const isActive = computed(() => (props.run.status === "running" || props.run.status === "queued") && hasExecution.value);
 const isTerminal = computed(() => ["succeeded", "failed", "cancelled"].includes(props.run.status));
-const canResume = computed(() => props.run.status === "failed");
+const canResume = computed(() => props.run.status === "failed" && hasExecution.value);
 const hasAny = computed(() => isActive.value || isTerminal.value);
 const busy = ref(false);
 function actionLabel(a) {

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

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from "vue";
 import { Badge } from "@revenexx/studio";
-import { RUN_STATUS_WORDS, normalisedRunStatus, runStatusClass, runStatusLabel } from "../../utils/statusStyle";
+import { RUN_STATUS_COLUMN_WIDTH, RUN_STATUS_WORDS, normalisedRunStatus, runStatusClass, runStatusLabel } from "../../utils/statusStyle";
 import { TRIGGER_TYPE_WORDS, triggerTypeLabel } from "../../data/integrationNodeCatalog";
 const props = defineProps({
   runs: { type: Array, required: true },
@@ -70,7 +70,11 @@ const columns = computed(() => [
   // Sorted and searched by the word on screen, not by the raw field: a column
   // with no `searchGetter` is searched through its `sortGetter`, so a German
   // reader typing the status they can see has to find the row that shows it.
-  { key: "status", label: t("integration.runs.table.column.status"), width: "100px", sortable: true, sortGetter: (r) => runStatusLabel(r.status) },
+  // One floor for both lists of runs, this one and the dashboard's, rather than a
+  // number guessed twice — see `RUN_STATUS_COLUMN_WIDTH` for how it was chosen and
+  // why the track cannot be elastic. At the 100px it used to be, the German
+  // "fehlgeschlagen" ran out of its cell and under the workflow name (PO-362).
+  { key: "status", label: t("integration.runs.table.column.status"), width: RUN_STATUS_COLUMN_WIDTH, sortable: true, sortGetter: (r) => runStatusLabel(r.status) },
   ...props.showWorkflow ? [{ key: "workflow", label: t("integration.runs.table.column.workflow"), sortable: true, sortGetter: (r) => r.workflowName.toLowerCase(), searchGetter: (r) => r.workflowName }] : [],
   // Fixed floor wide enough for a full UUID, flexible above it — header and
   // body rows are separate grids, so a content-sized track (max-content)
@@ -99,7 +103,15 @@ const columns = computed(() => [
     @row-click="(r) => openRun(r)"
   >
     <template #cell-status="{ row: run }">
-      <Badge variant="outline" :class="['border text-xs font-medium uppercase', runStatusClass(run.status)]">
+      <!-- `max-w-full` is the net, not the fix: a word wider than the column above is
+           then clipped inside its own cell instead of being drawn over the one beside
+           it, and the `title` keeps it readable. A hard clip, not an ellipsis — the
+           badge is an inline-flex box, where `text-overflow` does not apply. -->
+      <Badge
+        variant="outline"
+        :title="runStatusLabel(run.status)"
+        :class="['border text-xs font-medium uppercase max-w-full', runStatusClass(run.status)]"
+      >
         {{ runStatusLabel(run.status) }}
       </Badge>
     </template>

package/dist/runtime/i18n/messages/de.json

@@ -520,6 +520,7 @@
   "integration.nodeConfig.dynamicSchema.resolving": "Felder werden geladen…",
   "integration.nodeConfig.expression.badge.title": "Akzeptiert ${{ … }}-Ausdrücke",
   "integration.nodeConfig.expression.insertTitle": "Ausdruck einfügen",
+  "integration.nodeConfig.expression.insertAria": "Ausdruck einfügen — verfügbare Daten für diese Einstellung",
   "integration.nodeConfig.expression.picker.aria": "Verfügbare Daten für diese Einstellung",
   "integration.nodeConfig.expression.picker.empty": "Nichts entspricht „{query}“.",
   "integration.nodeConfig.expression.picker.filterAria": "Verfügbare Daten filtern",
@@ -829,7 +830,7 @@
   "integration.runs.action.back": "Zurück",
   "integration.runs.action.cancel": "Run stoppen",
   "integration.runs.action.resume": "Fortsetzen",
-  "integration.runs.action.retry": "Retry",
+  "integration.runs.action.retry": "Erneut ausführen",
   "integration.runs.action.terminate": "Terminieren",
   "integration.runs.confirm.cancel": "Diesen Run stoppen?",
   "integration.runs.confirm.resume": "Diesen Run fortsetzen?",
@@ -889,9 +890,9 @@
   "integration.runs.list.header.title": "Runs",
   "integration.runs.menu.aria.actions": "Aktionen für Run #{id}",
   "integration.runs.menu.cancel": "Run stoppen",
-  "integration.runs.menu.replay": "Wiederholen",
+  "integration.runs.menu.replay": "Wiedergabe",
   "integration.runs.menu.resume": "Fortsetzen",
-  "integration.runs.menu.retry": "Retry",
+  "integration.runs.menu.retry": "Erneut ausführen",
   "integration.runs.menu.terminate": "Terminieren",
   "integration.runs.menu.viewDetails": "Details anzeigen",
   "integration.runs.notice.requested": "{action} angefordert.",

package/dist/runtime/i18n/messages/en.json

@@ -520,6 +520,7 @@
   "integration.nodeConfig.dynamicSchema.resolving": "Resolving fields…",
   "integration.nodeConfig.expression.badge.title": "Accepts ${{ … }} expressions",
   "integration.nodeConfig.expression.insertTitle": "Insert expression",
+  "integration.nodeConfig.expression.insertAria": "Insert expression — available data for this setting",
   "integration.nodeConfig.expression.picker.aria": "Available data for this setting",
   "integration.nodeConfig.expression.picker.empty": "Nothing matches “{query}”.",
   "integration.nodeConfig.expression.picker.filterAria": "Filter available data",

package/dist/runtime/pages/integrations/index.vue

@@ -6,7 +6,8 @@ import WorkflowCreateDialog from "../../components/Integrations/WorkflowCreateDi
 import { Pulse as Activity, DangerTriangle as AlertTriangle, ArrowRight, Box as Boxes, ClockCircle as Clock, Database, Layers, AddCircle as Plus, Radio, MagicStick as Sparkles, LinkRound as Webhook, Programming as Workflow } from "#solar-icons";
 import { Badge, Button } from "@revenexx/studio";
 import { servedPaths } from "../../utils/servedPaths";
-import { runStatusClass, runStatusLabel } from "../../utils/statusStyle";
+import { RUN_STATUS_COLUMN_WIDTH, runStatusClass, runStatusLabel } from "../../utils/statusStyle";
+const LATEST_RUN_COLUMNS = `${RUN_STATUS_COLUMN_WIDTH} minmax(0,1fr) 100px 70px`;
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.dashboard.head.title") });
 const { workflows, activeCount: activeWorkflows, loading: workflowsLoading, load: loadWorkflows } = useIntegrationsWorkflows();
@@ -177,9 +178,18 @@ function surfaceCards() {
               v-for="r in latestPerWorkflow"
               :key="r.id"
               :to="{ path: `/integrations/workflows/${r.workflowId}`, query: { run: r.id } }"
-              class="grid grid-cols-[90px_minmax(0,1fr)_100px_70px] items-center gap-2 border-b border-black/[0.04] px-3 py-2 text-sm last:border-b-0 hover:bg-muted/30"
+              class="grid items-center gap-2 border-b border-black/[0.04] px-3 py-2 text-sm last:border-b-0 hover:bg-muted/30"
+              :style="{ gridTemplateColumns: LATEST_RUN_COLUMNS }"
             >
-              <Badge variant="outline" :class="['border text-xs font-medium uppercase', runStatusClass(r.status)]">
+              <!-- The runs list's own track, not a second guess: this panel was the
+                   narrower of the two at 90px, so three German words ran out of it,
+                   "erfolgreich" included (PO-362). `max-w-full` is the net behind it,
+                   and it clips rather than ellipsing — see the runs list. -->
+              <Badge
+                variant="outline"
+                :title="runStatusLabel(r.status)"
+                :class="['border text-xs font-medium uppercase max-w-full', runStatusClass(r.status)]"
+              >
                 {{ runStatusLabel(r.status) }}
               </Badge>
               <div class="truncate">
@@ -197,7 +207,8 @@ function surfaceCards() {
               <div
                 v-for="n in 6"
                 :key="`sk-run-${n}`"
-                class="grid grid-cols-[90px_minmax(0,1fr)_100px_70px] items-center gap-2 border-b border-black/[0.04] px-3 py-2.5 last:border-b-0"
+                class="grid items-center gap-2 border-b border-black/[0.04] px-3 py-2.5 last:border-b-0"
+                :style="{ gridTemplateColumns: LATEST_RUN_COLUMNS }"
               >
                 <div class="h-5 w-16 rounded bg-black/[0.07] animate-pulse" />
                 <div class="space-y-1.5">

package/dist/runtime/pages/integrations/workflows/[id].vue

@@ -397,6 +397,9 @@ const runsError = ref(null);
 const runsPage = ref(1);
 const runsTotal = ref(0);
 const runsLastPage = ref(1);
+const runsWanted = ref(1);
+let runsSeq = 0;
+let runsLoadingSeq = 0;
 const RUNS_POLL_MS = 3e3;
 const { delivering: realtimeDelivering, runTick, lastRunEvent, buildTick, lastBuildEvent } = useIntegrationsRealtime();
 const runsBudget = createPollBudget({ intervalMs: RUNS_POLL_MS, liveIntervalMs: SAFETY_POLL_MS });
@@ -410,12 +413,14 @@ function stopRunsPoll() {
 function startRunsPoll() {
   stopRunsPoll();
   runsPoll = setInterval(() => {
-    if (runsPage.value === 1 && runsBudget.due(realtimeDelivering.value)) void loadRuns(1, { silent: true });
+    if (!runsLoading.value && runsWanted.value === 1 && runsBudget.due(realtimeDelivering.value)) {
+      void loadRuns(1, { silent: true });
+    }
   }, RUNS_POLL_MS);
 }
 onUnmounted(stopRunsPoll);
 watch(runTick, () => {
-  if (tab.value !== "runs" || runsPage.value !== 1) return;
+  if (tab.value !== "runs" || runsWanted.value !== 1 || runsLoading.value) return;
   const eventWorkflow = workflowIdOf(lastRunEvent.value);
   if (eventWorkflow && eventWorkflow !== String(workflow.value?.id ?? "")) return;
   void loadRuns(1, { silent: true });
@@ -426,10 +431,15 @@ watch(buildTick, () => {
   if (eventWorkflow && eventWorkflow !== String(workflow.value.id)) return;
   void get(workflow.value.id);
 });
-async function loadRuns(page = runsPage.value, opts = {}) {
+async function loadRuns(page = runsWanted.value, opts = {}) {
   if (!workflow.value) return;
+  runsWanted.value = page;
+  const seq = ++runsSeq;
   runsBudget.spend();
-  if (!opts.silent) runsLoading.value = true;
+  if (!opts.silent) {
+    runsLoading.value = true;
+    runsLoadingSeq = seq;
+  }
   runsError.value = null;
   try {
     const res = await loadForWorkflow(workflow.value.id, workflow.value.name, {
@@ -437,19 +447,23 @@ async function loadRuns(page = runsPage.value, opts = {}) {
       page,
       perPage: RUNS_PER_PAGE
     });
+    if (seq !== runsSeq) return;
     wfRuns.value = res.runs;
     runsTotal.value = res.total;
     runsLastPage.value = res.lastPage;
     runsPage.value = res.page;
+    runsWanted.value = res.page;
   } catch (e) {
+    if (seq !== runsSeq) return;
     runsError.value = e.message || t("integration.editor.runs.error.load");
+    runsWanted.value = runsPage.value;
   } finally {
-    if (!opts.silent) runsLoading.value = false;
+    if (!opts.silent && seq === runsLoadingSeq) runsLoading.value = false;
   }
 }
 function goRunsPage(p) {
   const next = Math.min(Math.max(1, p), runsLastPage.value);
-  if (next !== runsPage.value) void loadRuns(next);
+  if (next !== runsWanted.value) void loadRuns(next);
 }
 watch(tab, (t2) => {
   if (t2 === "runs") {
@@ -912,10 +926,10 @@ function formatDateTime(iso) {
         <div v-if="runsLastPage > 1 || runsTotal > wfRuns.length" class="flex items-center justify-between text-sm text-muted-foreground">
           <span class="tabular-nums">{{ t("integration.editor.runs.pagination.page", { page: runsPage, lastPage: runsLastPage }) }} · {{ t("integration.editor.runs.pagination.count", runsTotal) }}</span>
           <div class="flex gap-2">
-            <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="runsPage <= 1 || runsLoading" @click="goRunsPage(runsPage - 1)">
+            <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="runsWanted <= 1 || runsLoading" @click="goRunsPage(runsWanted - 1)">
               {{ t("integration.editor.runs.pagination.newer") }}
             </Button>
-            <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="runsPage >= runsLastPage || runsLoading" @click="goRunsPage(runsPage + 1)">
+            <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="runsWanted >= runsLastPage || runsLoading" @click="goRunsPage(runsWanted + 1)">
               {{ t("integration.editor.runs.pagination.older") }}
             </Button>
           </div>

package/dist/runtime/utils/statusStyle.d.ts

@@ -23,6 +23,30 @@ export declare function toneClass(tone: StatusTone): string;
  * order. It used to keep its own copy of the list, so a sixth word added here
  * would have been labelled everywhere and silently missing from that menu. */
 export declare const RUN_STATUS_WORDS: readonly ["running", "succeeded", "failed", "cancelled", "queued"];
+/**
+ * How wide a list draws its Status column, as a grid track.
+ *
+ * A fixed width, and it has to be one: the shared table gives the header row, every
+ * body row and every skeleton row a grid of their own, so a content-sized track
+ * (`max-content`, `auto`, `fit-content`) is resolved per row and a row holding a
+ * longer word would step out of line with the header and with the rows around it.
+ * The `id` column below says the same thing, and this constant was `minmax(136px,
+ * max-content)` for one commit because that warning was read too late.
+ *
+ * So the number is the promise, and it is a floor rather than a measurement. The
+ * column stood at 100px, which fitted every English word with room to spare and let
+ * the German "fehlgeschlagen" — 126px as a rendered badge on the machine this was
+ * measured on — run out of its cell and under the workflow name beside it (PO-362).
+ * 160px is that word plus a quarter, because the rendered width is not ours to know:
+ * a font that failed to load, a browser zoom or a reader's own minimum font size all
+ * move it, and one of those is why a first attempt at 136 was still reported cut.
+ *
+ * What happens when it is still not enough, and why that is survivable: the badge
+ * carries `max-w-full`, so it is clipped inside its own cell rather than drawn over
+ * the column beside it, and the whole word stays readable in its `title`. Raising
+ * this number is the fix at that point — not making the track elastic.
+ */
+export declare const RUN_STATUS_COLUMN_WIDTH = "160px";
 /**
  * Raw API/Temporal run vocabulary → the cockpit's run-status labels, so a run
  * never reads "completed" in one surface and "succeeded" in another. This IS

package/dist/runtime/utils/statusStyle.js

@@ -77,6 +77,7 @@ export function toneClass(tone) {
   return TONE_CLASS[tone];
 }
 export const RUN_STATUS_WORDS = ["running", "succeeded", "failed", "cancelled", "queued"];
+export const RUN_STATUS_COLUMN_WIDTH = "160px";
 const RUN_STATUS_WORD_SET = new Set(RUN_STATUS_WORDS);
 export function normalisedRunStatus(status) {
   if (!status) return "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revenexx/studio-integrations",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "type": "module",
   "description": "Integration Studio (core: workflows, node editor, runs, schedules, credentials, secrets, audit) as a standalone, publishable Nuxt module.",
   "repository": {