@revenexx/studio-integrations 1.1.1 → 1.3.0

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

@@ -1,19 +1,36 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from "vue";
-import { Badge } from "@revenexx/studio";
+import {
+  Badge,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger
+} from "@revenexx/studio";
+import { DEFAULT_RUN_DIRECTION, DEFAULT_RUN_SORT } from "../../utils/runFeedQuery";
 import { RUN_STATUS_COLUMN_WIDTH, RUN_STATUS_WORDS, normalisedRunStatus, runStatusClass, runStatusLabel } from "../../utils/statusStyle";
+import { formatDuration } from "../../utils/formatDuration";
 import { TRIGGER_TYPE_WORDS, triggerTypeLabel } from "../../data/integrationNodeCatalog";
 const props = defineProps({
   runs: { type: Array, required: true },
   loading: { type: Boolean, required: false, default: false },
   emptyText: { type: String, required: false },
   pagination: { type: Boolean, required: false, default: true },
-  showWorkflow: { type: Boolean, required: false, default: true }
+  showWorkflow: { type: Boolean, required: false, default: true },
+  serverMode: { type: Boolean, required: false, default: false },
+  total: { type: Number, required: false, default: 0 },
+  perPage: { type: Number, required: false, default: 25 },
+  status: { type: Array, required: false },
+  triggerType: { type: String, required: false, default: "" },
+  sort: { type: null, required: false, default: DEFAULT_RUN_SORT },
+  direction: { type: String, required: false, default: DEFAULT_RUN_DIRECTION }
 });
-const emit = defineEmits(["changed"]);
+const emit = defineEmits(["changed", "narrow", "search", "page-size", "reorder"]);
+const page = defineModel("page", { type: Number, ...{ default: 1 } });
 const t = useIntegrationsT();
 const router = useRouter();
-const emptyText = computed(() => props.emptyText ?? t("integration.runs.table.empty"));
+const emptyText = computed(() => props.emptyText ?? (anyNarrowing.value || searchText.value ? t("integration.runs.table.empty.narrowed") : t("integration.runs.table.empty")));
 const now = ref(Date.now());
 let tick = null;
 onMounted(() => {
@@ -39,12 +56,6 @@ function formatRelative(iso) {
   if (ms < 864e5) return t("integration.common.time.hoursAgo", Math.floor(ms / 36e5));
   return t("integration.common.time.daysAgo", Math.floor(ms / 864e5));
 }
-function formatDuration(ms) {
-  if (ms == null) return "\u2014";
-  if (ms < 1e3) return `${ms}ms`;
-  if (ms < 6e4) return `${(ms / 1e3).toFixed(2)}s`;
-  return `${(ms / 6e4).toFixed(1)}m`;
-}
 function liveDuration(run) {
   if (!run.startedAt) return null;
   const start = Date.parse(run.startedAt);
@@ -52,7 +63,7 @@ function liveDuration(run) {
   const end = run.finishedAt ? Date.parse(run.finishedAt) : now.value;
   return end - start;
 }
-const filterTabs = computed(() => props.pagination ? [
+const filterTabs = computed(() => props.pagination && !props.serverMode ? [
   {
     key: "status",
     label: t("integration.runs.table.column.status"),
@@ -66,6 +77,54 @@ const filterTabs = computed(() => props.pagination ? [
     options: TRIGGER_TYPE_WORDS.map((v) => ({ value: v, label: triggerTypeLabel(v) }))
   }
 ] : void 0);
+const chosenStatus = computed(() => props.status ?? []);
+const anyNarrowing = computed(() => chosenStatus.value.length > 0 || props.triggerType !== "");
+function setStatus(word) {
+  emit("narrow", { status: word ? [word] : [] });
+}
+function setTrigger(kind) {
+  emit("narrow", { triggerType: kind ?? "" });
+}
+const statusApplied = computed(() => chosenStatus.value[0] ? runStatusLabel(chosenStatus.value[0]) : "");
+const triggerApplied = computed(() => props.triggerType ? triggerTypeLabel(props.triggerType) : "");
+const searchText = ref("");
+function onTableState(state) {
+  searchText.value = state.search;
+  emit("search", state.search);
+  if (state.pageSize !== props.perPage) emit("page-size", state.pageSize);
+}
+const tableSort = computed(() => ({
+  column: sortedColumn.value,
+  direction: sortedColumn.value ? props.direction : null
+}));
+function onTableSort(next) {
+  const sort = next.column ? SERVER_SORTS[next.column] : void 0;
+  if (!sort || !next.direction) {
+    emit("reorder", { sort: DEFAULT_RUN_SORT, direction: DEFAULT_RUN_DIRECTION });
+    return;
+  }
+  emit("reorder", { sort, direction: next.direction });
+}
+const SERVER_SORTS = {
+  started: "started_at",
+  duration: "duration"
+};
+function sortableColumn(key) {
+  return props.serverMode && key in SERVER_SORTS;
+}
+const sortedColumn = computed(() => {
+  const entry = Object.entries(SERVER_SORTS).find(([, value]) => value === props.sort);
+  return entry ? entry[0] : null;
+});
+const serverModels = computed(() => props.serverMode ? {
+  "sort": tableSort.value,
+  "onUpdate:sort": onTableSort,
+  // 1-based here, as the platform pages; the shared table counts from zero.
+  "page": page.value - 1,
+  "onUpdate:page": (p) => {
+    page.value = p + 1;
+  }
+} : {});
 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
@@ -74,17 +133,17 @@ const columns = computed(() => [
   // 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 }] : [],
+  { key: "status", label: t("integration.runs.table.column.status"), width: RUN_STATUS_COLUMN_WIDTH, sortable: sortableColumn("status"), sortGetter: (r) => runStatusLabel(r.status) },
+  ...props.showWorkflow ? [{ key: "workflow", label: t("integration.runs.table.column.workflow"), sortable: sortableColumn("workflow"), 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)
   // would misalign them. The flex share also lets the table fill the width.
   { key: "id", label: t("integration.runs.table.column.id"), width: "minmax(280px,1fr)", searchGetter: (r) => `${r.temporalRunId ?? ""} ${r.id}` },
   // Same rule as the status column above: the word on screen is what sorts and
   // what a search has to match.
-  { key: "trigger", label: t("integration.runs.table.column.trigger"), width: "120px", sortable: true, sortGetter: (r) => triggerTypeLabel(r.triggerType) },
-  { key: "started", label: t("integration.runs.table.column.started"), width: "120px", sortable: true, sortGetter: (r) => r.startedAt },
-  { key: "duration", label: t("integration.runs.table.column.duration"), width: "100px", sortable: true, sortGetter: (r) => r.durationMs ?? -1 },
+  { key: "trigger", label: t("integration.runs.table.column.trigger"), width: "120px", sortable: sortableColumn("trigger"), sortGetter: (r) => triggerTypeLabel(r.triggerType) },
+  { key: "started", label: t("integration.runs.table.column.started"), width: "120px", sortable: sortableColumn("started"), sortGetter: (r) => r.startedAt },
+  { key: "duration", label: t("integration.runs.table.column.duration"), width: "100px", sortable: sortableColumn("duration"), sortGetter: (r) => r.durationMs ?? -1 },
   { key: "actions", label: "", width: "52px" }
 ]);
 </script>
@@ -94,14 +153,66 @@ const columns = computed(() => [
     :data="runs"
     :columns="columns"
     :row-key="(r) => r.id"
-    :default-sort="{ column: 'started', direction: 'desc' }"
     :search="{ placeholder: t('integration.runs.table.search.placeholder') }"
     :filter-tabs="filterTabs"
+    :filter="serverMode ? { width: 'w-72', active: anyNarrowing } : false"
+    :server-mode="serverMode"
+    :total="total"
     :loading="loading"
-    :pagination="pagination"
+    :pagination="serverMode ? { pageSize: perPage } : pagination"
     :empty-text="emptyText"
+    v-bind="serverModels"
+    @state-change="onTableState"
     @row-click="(r) => openRun(r)"
   >
+    <!--
+      The narrowing, where a server-mode surface has to put it: the shared table
+      owns the popover, this page owns the selection. Its own in-memory control
+      (`filterTabs`) cannot be used here, because it compares the rows in hand and
+      those are one page.
+
+      Built to the same shape as that control on purpose — a dimension per
+      sub-menu, "All" first, one value at a time — so this list is narrowed by the
+      same gesture as the five that narrow what they hold, and one test helper
+      still addresses all six (`e2e/support/studio-table.ts`). What is NOT copied
+      is the count beside each option: the built-in counts the rows in hand, and
+      counting a page here would put a number next to "failed" that describes this
+      page rather than the history the option narrows.
+    -->
+    <template v-if="serverMode" #filter-menu>
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger class="gap-2">
+          <span class="flex-1">{{ t("integration.runs.table.column.status") }}</span>
+          <span v-if="statusApplied" class="text-xs text-primary">{{ statusApplied }}</span>
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent class="w-48">
+          <DropdownMenuItem @select="setStatus(null)">
+            {{ t("integration.runs.table.filter.all") }}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem v-for="word in RUN_STATUS_WORDS" :key="word" @select="setStatus(word)">
+            {{ runStatusLabel(word) }}
+          </DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger class="gap-2">
+          <span class="flex-1">{{ t("integration.runs.table.column.trigger") }}</span>
+          <span v-if="triggerApplied" class="text-xs text-primary">{{ triggerApplied }}</span>
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent class="w-48">
+          <DropdownMenuItem @select="setTrigger(null)">
+            {{ t("integration.runs.table.filter.all") }}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem v-for="kind in TRIGGER_TYPE_WORDS" :key="kind" @select="setTrigger(kind)">
+            {{ triggerTypeLabel(kind) }}
+          </DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+    </template>
+
     <template #cell-status="{ row: run }">
       <!-- `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

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

@@ -1,4 +1,5 @@
-import type { WorkflowRun } from '../../types/integrations.js';
+import type { RunStatus, TriggerType, WorkflowRun } from '../../types/integrations.js';
+import type { RunSort, RunSortDirection } from '../../utils/runFeedQuery.js';
 type __VLS_Props = {
     runs: WorkflowRun[];
     loading?: boolean;
@@ -7,14 +8,71 @@ type __VLS_Props = {
     pagination?: boolean;
     /** false inside a workflow — the context makes the column redundant. */
     showWorkflow?: boolean;
+    /**
+     * The owning list reads its page and its narrowing from the platform.
+     *
+     * The table then renders the rows it is handed and reports what the operator
+     * asked for, instead of narrowing and slicing an array. That is what lets the
+     * list reach past the newest hundred runs at all (PO-369).
+     */
+    serverMode?: boolean;
+    /** How many runs match the narrowing. The pager's "of 7"; server mode only. */
+    total?: number;
+    /**
+     * How many rows a page holds — the SAME number the page asks the platform for.
+     *
+     * The shared table works its footer's "showing 1–25 of 140" out from its own
+     * page size, so a table left on its default while the request asks for another
+     * number states a range that is simply wrong: it counted twenty where
+     * twenty-five had arrived.
+     */
+    perPage?: number;
+    /** The narrowing in force. Owned by the page, drawn here. */
+    status?: RunStatus[];
+    triggerType?: TriggerType | '';
+    /** The order the platform is reading the list in. Server mode only. */
+    sort?: RunSort;
+    direction?: RunSortDirection;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & {
+    /** 1-based, as the platform pages. The shared table counts from zero. */
+    'page'?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (text: string) => any;
     changed: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    narrow: (patch: {
+        status?: RunStatus[];
+        triggerType?: TriggerType | "";
+    }) => any;
+    "page-size": (size: number) => any;
+    reorder: (order: {
+        sort: RunSort;
+        direction: RunSortDirection;
+    }) => any;
+    "update:page": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSearch?: ((text: string) => any) | undefined;
     onChanged?: (() => any) | undefined;
+    onNarrow?: ((patch: {
+        status?: RunStatus[];
+        triggerType?: TriggerType | "";
+    }) => any) | undefined;
+    "onPage-size"?: ((size: number) => any) | undefined;
+    onReorder?: ((order: {
+        sort: RunSort;
+        direction: RunSortDirection;
+    }) => any) | undefined;
+    "onUpdate:page"?: ((value: number) => any) | undefined;
 }>, {
+    sort: RunSort;
     loading: boolean;
+    total: number;
+    direction: RunSortDirection;
+    triggerType: TriggerType | "";
+    perPage: number;
     pagination: boolean;
     showWorkflow: boolean;
+    serverMode: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -2,6 +2,7 @@
 import { computed, ref, watch } from "vue";
 import { RefreshCircle as Loader2 } from "#solar-icons";
 import { Badge, Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@revenexx/studio";
+import LoadingAnnouncement from "./LoadingAnnouncement.vue";
 import { useIntegrationsCredentials } from "../../composables/useIntegrationsCredentials";
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const emit = defineEmits(["created"]);
@@ -64,7 +65,15 @@ async function importAccount(account) {
         </DialogDescription>
       </DialogHeader>
 
-      <div v-if="sftp.loading.value && !activeAccounts.length" class="space-y-2">
+      <!-- Mounts with the dialog, like the one in the create dialog and with the same
+           limit written down there (PO-251). -->
+      <LoadingAnnouncement
+        :label="t('integration.credentials.sftpImport.title')"
+        :loading="sftp.loading.value && !activeAccounts.length"
+        :text="t('integration.credentials.sftpImport.state.loading')"
+      />
+
+      <div v-if="sftp.loading.value && !activeAccounts.length" aria-hidden="true" class="space-y-2">
         <div v-for="n in 3" :key="`sk-${n}`" class="h-9 rounded-md bg-black/[0.07] animate-pulse" />
       </div>
       <p v-else-if="!activeAccounts.length" class="py-4 text-center text-sm text-muted-foreground">

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

@@ -0,0 +1,16 @@
+import type { WorkflowStateRole, WorkflowStateVisibility } from '../../types/integrations.js';
+type __VLS_Props = {
+    open: boolean;
+    /** Fixed by the `state-ref` field that opened this. */
+    role: WorkflowStateRole;
+    /** Names the workflow already declares, so a collision is caught while typing. */
+    taken: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    declared: (namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    onDeclared?: ((namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,111 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@revenexx/studio";
+import { stateNamespaceErrorKey } from "../../utils/stateNamespaceName";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  role: { type: String, required: true },
+  taken: { type: Array, required: true }
+});
+const emit = defineEmits(["update:open", "declared"]);
+const t = useIntegrationsT();
+const name = ref("");
+const visibility = ref("private");
+watch(() => props.open, (isOpen) => {
+  if (!isOpen) return;
+  name.value = "";
+  visibility.value = "private";
+});
+const error = computed(() => {
+  const key = stateNamespaceErrorKey(name.value, props.taken);
+  return key ? t(key) : null;
+});
+function declare() {
+  const value = name.value.trim();
+  if (!value || error.value) return;
+  emit("declared", value, props.role, visibility.value);
+  emit("update:open", false);
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
+    <DialogContent class="max-w-[94vw] sm:max-w-lg">
+      <DialogHeader>
+        <DialogTitle>{{ t("integration.nodeConfig.state.create.title") }}</DialogTitle>
+        <DialogDescription class="text-sm">
+          {{ t("integration.nodeConfig.state.create.description", { role: t(`integration.workflows.state.role.${role}.label`) }) }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="space-y-3">
+        <div class="space-y-1">
+          <Label for="state-create-name" class="text-mono text-muted-foreground">
+            {{ t("integration.workflows.state.field.newName.label") }}
+          </Label>
+          <Input
+            id="state-create-name"
+            v-model="name"
+            class="h-8 bg-white font-mono text-sm"
+            :placeholder="t('integration.workflows.state.field.newName.placeholder')"
+            @keydown.enter.prevent="declare"
+          />
+          <p v-if="error" class="text-xs text-rose-600">{{ error }}</p>
+          <p class="text-xs text-muted-foreground">{{ t(`integration.workflows.state.role.${role}.hint`) }}</p>
+        </div>
+
+        <div class="space-y-1">
+          <Label for="state-create-visibility" class="text-mono text-muted-foreground">
+            {{ t("integration.workflows.state.field.visibility.label") }}
+          </Label>
+          <Select v-model="visibility">
+            <SelectTrigger
+              id="state-create-visibility"
+              :aria-label="t('integration.workflows.state.field.visibility.label')"
+              class="h-8 bg-white text-sm"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="private">
+                {{ t("integration.workflows.state.visibility.private.label") }}
+              </SelectItem>
+              <SelectItem value="shared">
+                {{ t("integration.workflows.state.visibility.shared.label") }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+          <!-- The same consequence the workflow-level dialog states, in the same
+               place relative to the control that chooses it. -->
+          <p class="text-xs text-muted-foreground">
+            {{ t(`integration.workflows.state.visibility.${visibility}.hint`) }}
+          </p>
+        </div>
+      </div>
+
+      <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="!name.trim() || !!error" @click="declare">
+          {{ t("integration.workflows.state.action.add") }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,16 @@
+import type { WorkflowStateRole, WorkflowStateVisibility } from '../../types/integrations.js';
+type __VLS_Props = {
+    open: boolean;
+    /** Fixed by the `state-ref` field that opened this. */
+    role: WorkflowStateRole;
+    /** Names the workflow already declares, so a collision is caught while typing. */
+    taken: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    declared: (namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    onDeclared?: ((namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -171,7 +171,7 @@ function onViewMouseDown(e) {
         v-for="(c, i) in STICKY_COLORS"
         :key="i"
         type="button"
-        class="size-5 rounded-full border transition hover:scale-110"
+        class="size-6 rounded-full border transition hover:scale-110"
         :class="(data.sticky.color ?? 0) === i ? 'ring-2 ring-black/25 ring-offset-1' : ''"
         :style="{ backgroundColor: c.bg, borderColor: c.border }"
         :title="t(c.nameKey)"

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

@@ -21,10 +21,12 @@ import {
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
 import { TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
+import LoadingAnnouncement from "./LoadingAnnouncement.vue";
 import TemplateCard from "./TemplateCard.vue";
 import WorkflowIconPicker from "./WorkflowIconPicker.vue";
 import WorkflowTagsInput from "./WorkflowTagsInput.vue";
 import { resolveLocalized } from "../../utils/localize";
+import { errorReason } from "../../utils/apiError";
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const t = useIntegrationsT();
 const router = useRouter();
@@ -102,7 +104,7 @@ async function submit() {
     open.value = false;
     await router.push(`/integrations/workflows/${created.id}`);
   } catch (e) {
-    error.value = e.message || t("integration.workflows.create.error.generic");
+    error.value = errorReason(e, t("integration.workflows.create.error.generic"));
   } finally {
     submitting.value = false;
   }
@@ -126,7 +128,7 @@ async function useTemplate(slug) {
     open.value = false;
     await router.push(`/integrations/workflows/${id}`);
   } catch (e) {
-    toast.error(e?.message ?? t("integration.workflows.create.toast.templateError"));
+    toast.error(errorReason(e, t("integration.workflows.create.toast.templateError")));
   } finally {
     instantiatingSlug.value = null;
   }
@@ -143,6 +145,19 @@ async function useTemplate(slug) {
       <!-- Switcher: the same TabBar the studio surfaces use. -->
       <TabBar v-model="mode" :tabs="modeTabs" class="-mt-1 shrink-0" />
 
+      <!-- Beside the switcher rather than inside the template half, and that is the
+           whole point: the dialog opens on the blank half, so a region placed in the
+           other branch would be inserted at the moment the reader switches to it —
+           with the catalogue already on its way and its own text already set, which is
+           a live region nothing was listening to. Out here it is in the dialog from
+           the moment it opens, and the text changes under a reader who is already
+           there (PO-251). -->
+      <LoadingAnnouncement
+        :label="t('integration.workflows.create.tab.template')"
+        :loading="mode === 'template' && templatesLoading && !templates.length"
+        :text="t('integration.workflows.create.template.state.loading')"
+      />
+
       <!-- ── Blank ─────────────────────────────────────────────────────────── -->
       <!-- -m-1/p-1 keeps the selection rings clear of the scroll clipping. -->
       <form v-if="mode === 'blank'" class="-m-1 max-h-[65vh] space-y-3 overflow-y-auto p-1" @submit.prevent="submit">
@@ -261,7 +276,7 @@ async function useTemplate(slug) {
           >
         </div>
 
-        <div v-if="templatesLoading && !templates.length" class="grid gap-2 p-1 sm:grid-cols-2">
+        <div v-if="templatesLoading && !templates.length" aria-hidden="true" class="grid gap-2 p-1 sm:grid-cols-2">
           <div v-for="n in 6" :key="`sk-tpl-${n}`" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
             <div class="flex items-center gap-2">
               <div class="size-7 rounded-md bg-black/[0.07] animate-pulse" />

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

@@ -0,0 +1,18 @@
+export type DeletableWorkflow = {
+    id: number;
+    name: string;
+};
+type __VLS_Props = {
+    workflow: DeletableWorkflow | null;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'open'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    deleted: (workflow: DeletableWorkflow) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onDeleted?: ((workflow: DeletableWorkflow) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,70 @@
+<script setup>
+import { ref, watch } from "vue";
+import { RefreshCircle as Loader2 } from "#solar-icons";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Button
+} from "@revenexx/studio";
+import { useIntegrationsWorkflows } from "../../composables/useIntegrationsWorkflows";
+import { errorReason } from "../../utils/apiError";
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  workflow: { type: [Object, null], required: true }
+});
+const emit = defineEmits(["deleted"]);
+const t = useIntegrationsT();
+const { remove } = useIntegrationsWorkflows();
+const busy = ref(false);
+const error = ref(null);
+watch(open, (o) => {
+  if (o) error.value = null;
+});
+async function confirm() {
+  const wf = props.workflow;
+  if (!wf || busy.value) return;
+  busy.value = true;
+  error.value = null;
+  try {
+    await remove(wf.id);
+    open.value = false;
+    emit("deleted", wf);
+  } catch (e) {
+    error.value = errorReason(e, t("integration.workflows.delete.error.generic"));
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<template>
+  <AlertDialog :open="open" @update:open="(v) => {
+  if (!v && !busy) open = false;
+}">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>{{ t("integration.workflows.delete.dialog.title") }}</AlertDialogTitle>
+        <AlertDialogDescription>
+          <span v-if="props.workflow">
+            <span class="font-medium text-foreground">{{ props.workflow.name }}</span>
+            {{ t("integration.workflows.delete.dialog.description") }}
+          </span>
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <p v-if="error" class="text-sm text-rose-600">{{ error }}</p>
+      <AlertDialogFooter>
+        <Button variant="outline" :disabled="busy" @click="open = false">
+          {{ t("integration.common.action.cancel") }}
+        </Button>
+        <Button class="bg-destructive text-white hover:bg-destructive/90" :disabled="busy" @click="confirm">
+          <Loader2 v-if="busy" :size="14" class="animate-spin" />
+          {{ busy ? t("integration.workflows.delete.action.deleting") : t("integration.common.action.delete") }}
+        </Button>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>

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

@@ -0,0 +1,18 @@
+export type DeletableWorkflow = {
+    id: number;
+    name: string;
+};
+type __VLS_Props = {
+    workflow: DeletableWorkflow | null;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'open'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    deleted: (workflow: DeletableWorkflow) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onDeleted?: ((workflow: DeletableWorkflow) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -3,6 +3,7 @@ import { computed, ref, watch } from "vue";
 import { RefreshCircle as Loader2 } from "#solar-icons";
 import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input } from "@revenexx/studio";
 import { useIntegrationsWorkflows } from "../../composables/useIntegrationsWorkflows";
+import { errorReason } from "../../utils/apiError";
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const props = defineProps({
   workflow: { type: [Object, null], required: true }
@@ -29,7 +30,7 @@ async function submit() {
     open.value = false;
     emit("duplicated", copy);
   } catch (e) {
-    error.value = e?.message || t("integration.workflows.duplicate.error.generic");
+    error.value = errorReason(e, t("integration.workflows.duplicate.error.generic"));
   } finally {
     busy.value = false;
   }