@revenexx/studio-integrations 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -0,0 +1,201 @@
+# @revenexx/studio-integrations
+
+## 0.6.0
+
+### Minor Changes
+
+- 3686d9e: The node inspector's controls report honest states — a field that is loading,
+  empty or unavailable says which, instead of all three looking alike — and the
+  trigger surface gains a payload form built from the trigger's own shape rather
+  than a free-text box. Rows keep stable keys, so editing one no longer re-orders
+  the rest.
+- 3686d9e: Activating a workflow the platform refuses now says why. The validation feedback
+  the service returns is surfaced in the editor instead of the activation failing
+  silently, and a refusal that carries no readable detail falls back to wording
+  that still tells the user what happened.
+- 3686d9e: Placing a node no longer forces its configuration open. Dropping a node onto the
+  canvas just places it; you open the settings when you want them, through an edit
+  affordance that now stays visible on the node card rather than appearing only on
+  hover. The affordance is shown only for nodes that actually have something to
+  configure.
+- 3686d9e: A node that ships in several versions lets you choose which one you place,
+  instead of the palette silently picking one. The chosen version is shown on the
+  node card, so a workflow built against an older version is readable on the
+  canvas.
+- 3686d9e: A node is now marked by its own symbol combined with a vendor badge, so two
+  nodes from the same vendor stay distinguishable while still reading as that
+  vendor's. The badge is drawn only where it adds something — including search
+  hits in the palette — and a node with no symbol of its own is marked honestly
+  rather than given a stand-in.
+
+  The component behind this is renamed `NodeLogo` → `NodeMark`. `NodeLogo` remains
+  as a shim so hosts that reference it keep working.
+
+- 3686d9e: The canvas says which output path leads the eye. Edges now carry importance
+  rather than colour, so the main path reads as the main path, and colour is
+  reserved for the two states where it means something — green for the ordinary
+  output, rose for the error output. The inspector's port dots use the same neutral
+  tone as the canvas, and an error port's label stays legible instead of being
+  tinted into the background.
+- 3686d9e: The mouse wheel zooms the canvas instead of panning it vertically — on the
+  editor and on the read-only canvases alike. The zoom readout announces its
+  percentage again, so the level is available to screen readers and not only to
+  the eye.
+- 3686d9e: Node cards drop the generated subtitle and surface the node's note instead. The
+  note is marked in the card's corner and its panel flips open from there, so a
+  card carries what somebody wrote about the node rather than a line derived from
+  its configuration. The marker is reachable from the keyboard, and the note's
+  description stays in the workflow tree rather than living only in the panel.
+- 3686d9e: A node can say what it is for. The description from the node's manifest is shown
+  in the inspector, and the note moves out of the settings into its own place, so
+  the text the vendor wrote and the text you wrote are no longer mixed into one
+  field. The explanation can be reached by pointer as well as keyboard, and Escape
+  closes the note without closing anything behind it. Whitespace alone no longer
+  counts as a note.
+- 3686d9e: A workflow variable has a value, not a default. The field is named for what it
+  actually is — the value the workflow runs with — which removes the suggestion
+  that something else would override it, and a variable can be marked as required
+  so an incomplete workflow is caught before it runs.
+- 3686d9e: Configuring a node is simpler. The configuration itself gets the dialog, with
+  mapping and testing available on call rather than competing for the same space,
+  and the separate outputs strip is gone — the third tab is **Output**. A setting
+  the last save refused is marked as such, so a rejected save says which field it
+  was about, and the dialog is sized to its content instead of leaving the fold to
+  hide a control. Switching away from a tab the bar no longer draws leaves nothing
+  selected behind.
+- 3686d9e: You can say when a workflow runs without writing cron. The schedules page offers
+  the choice directly, a schedule can fire several times a day, and every schedule
+  states when it next fires instead of showing an expression and leaving you to read
+  it.
+
+  The reading is exact rather than approximate: a step that does not divide its
+  field is no longer described as a plain interval, and a named weekday no longer
+  widens a schedule to the whole week.
+
+- 3686d9e: A webhook trigger can say who is allowed to call it. Protection profiles are
+  offered on the trigger, the secret behind one can be rotated, and exposing an
+  endpoint persists the default profile rather than leaving the webhook open until
+  somebody sets one.
+
+### Patch Changes
+
+- 3686d9e: The node inspector's credential picker separates the credential's name from its
+  state, and reports the state it was actually told rather than deriving one. A
+  deleted credential no longer reads as though none had been chosen — the dead
+  reference is announced, not only drawn — and a failed test keeps a readable
+  reason.
+- 3686d9e: **Tidy up** no longer leaves a node's outputs crossing each other. After an
+  auto-layout the out and error branches keep to their own lanes, and where one
+  output fans out to several nodes the edge bends are staggered — mirrored on both
+  sides — so sibling branches read alike instead of overlapping into a single
+  line.
+- 3686d9e: The hover toolbar no longer appears on canvases you cannot edit. On a run replay
+  or any other read-only canvas, **Duplicate** and **Delete** used to show up on
+  hover and do nothing; they are now absent instead of dead.
+- 3686d9e: **Tidy up** no longer routes a node's ordinary output and its error output across
+  each other. Branches are re-slotted so the two leave the spine without crossing,
+  and where the current order gives no answer the target node's id breaks the tie —
+  so the same workflow tidies up the same way every time.
+- 3686d9e: A node that ends the run no longer draws an output port. Stop and error nodes
+  declare no outputs, so the canvas gave them a port that could never lead
+  anywhere; that port is gone, and nothing can be connected to it by accident.
+- 3686d9e: The actions button on a workflow row has an accessible name. It is icon-only and
+  sits in a row that offers nothing else to address it by, so it now names the
+  workflow it acts on — `Actions for <workflow>` — instead of being unreachable to
+  anyone not using a pointer.
+- 3686d9e: Every form field and icon-only control in the studio has an accessible name, and
+  each page declares its main content landmark. The skip link now moves focus
+  rather than only changing the address, so it actually skips something, and the
+  icon picker keeps the name of the popover it opens from.
+- 3686d9e: **Delete** and **Backspace** no longer delete nodes while a dialog or panel
+  covers the canvas. The canvas stands its keyboard handling down for as long as an
+  overlay is open, so a keystroke meant for the text field in front of you cannot
+  remove a node behind it.
+- 3686d9e: The validation banner is summarised per node, and the nodes it names are marked
+  on the canvas — so a workflow that will not activate points at where the problem
+  is instead of listing findings you have to match up yourself. A finding the
+  platform attributes to no node carries only its message rather than being pinned
+  to an arbitrary one. Marks are held back while a node is being dragged, so the
+  re-sync no longer interrupts the drag.
+- 3686d9e: Running an incomplete workflow names the settings that are missing, the way the
+  activation gate already did — instead of a refusal you have to go looking for the
+  cause of. A finding the platform attributes to no node is named rather than only
+  counted, and a refusal that arrives with nothing readable in it no longer leaves
+  the user with no message at all.
+- 3686d9e: A credential's test result is no longer wiped by the reload that follows it. The
+  result you just produced stays on screen instead of disappearing the moment the
+  list refreshes, and a prototype key is no longer offered as though it were a
+  credential type.
+- 3686d9e: The template gallery says which kind of nothing it is showing — no templates at
+  all reads differently from nothing matching your search. A template's vendor can
+  be searched for, and three names that the detail page relied on but never put on
+  screen are now there, so what a template arrives wired with is readable before
+  you install it.
+- 3686d9e: The runs and schedules pages stop reporting figures they did not have. Missed
+  runs were collected before the workflows they belong to had arrived, so they came
+  out short; they are now collected once the list is in. Leaving the page no longer
+  takes the count with it, so coming back shows what ran, what runs next and what
+  never got to run rather than an empty summary.
+- 3686d9e: Two controls on the workflows list no longer claim a name derived from data that
+  had not loaded, so they are addressable as soon as the page is — including the
+  route to the create-workflow dialog, which sits behind two doors and had nothing
+  stable to reach it by.
+- 3686d9e: The audit log pages properly and closes properly. A second pager sat behind the
+  first and could disagree with it; there is now one. Searching for a person finds
+  them through the actor column rather than depending on the resource column
+  repeating the same value, and the one way of closing an opened record that never
+  worked now does.
+- 3686d9e: Credential dialogs no longer come up empty for a managed type. The managed types
+  ask whether the cockpit is actually there instead of assuming it, so the fields
+  are rendered when the source can answer and the dialog says what it cannot offer
+  when it cannot.
+- 3686d9e: The **Created** and **Updated** columns on the secrets list show something. They
+  were always empty; they now carry the dates the service records, a cell with no
+  date claims no timestamp rather than rendering an epoch, and the dates stay out
+  of the search box so filtering by name is not confused by them.
+- 3686d9e: Text that arrives from the API is localised by one resolver instead of fifteen
+  private copies, so a label resolves the same way wherever it is shown and a
+  missing translation falls back consistently rather than differently per page.
+- 3686d9e: Pages no longer render empty data while their load is still in flight. The ten
+  composables that each guarded their own load now share one guard that waits for
+  the load already running instead of handing back an empty result, so a second
+  caller is answered once the data is there. The workflows list stops claiming
+  "Never run" when the runs simply had not arrived yet.
+- 3686d9e: The dashboard's figures are there on the first visit rather than after a reload.
+  **Needs attention** reports the state now instead of every failure the workflow
+  has ever had, each figure that answers a click is a link and says its number, and
+  a request that is counted is recounted when it changes rather than going quiet.
+- 3686d9e: A failed run keeps the reason the platform recorded, and shows the moment the
+  failure happened rather than the moment the run started. Where the platform left
+  the reason empty the run says so, instead of presenting the blank as though
+  nothing had gone wrong.
+- 3686d9e: The dashboard's templates panel is named for what it offers rather than for a
+  ranking it never measured. It was headed "Popular templates" while showing no
+  measure of popularity; it now reads **Start from a template**.
+- 3686d9e: A connection can only leave an output and arrive at an input. Two input ports
+  could be joined to each other and the result saved, producing a workflow the
+  platform would never run; that is refused now. Connections already saved the wrong
+  way round are not repaired by this change — they have to be redrawn.
+- 3686d9e: Template categories are named from one source, so the filter and the cards cannot
+  disagree, and the category list names the two categories that actually ship rather
+  than one nobody could select. A template is presented by a single card component in
+  two densities instead of two implementations that had drifted apart, and what
+  choosing a card does is defined once.
+- 3686d9e: An audit entry opened from a row holds the keyboard and gives it back when it
+  closes. The panel used to leave focus in the row behind it, so the keyboard was
+  somewhere the user could no longer see.
+- 3686d9e: The template gallery says it is loading in words, not only as a shimmer, so the
+  wait is announced rather than being visible only to the eye — and a loading
+  gallery no longer looks exactly like an empty one. The announcement and the
+  placeholders are derived from the same condition, and the wait ends in words too.
+- 3686d9e: A port name comes back whole. A name containing `__` was cut at the separator, and
+  a handle id with no port name in it produced an empty string that read as a real
+  name; the first round-trips intact now and the second answers with nothing at all.
+- 3686d9e: The webhook and event trigger copy spells it **catalogue**, matching the rest of
+  the studio's British English — in the loading message, the payload hint and the
+  line shown when a topic has no sample payload.
+- 3686d9e: Saving a credential says what happened. A save that is refused states its reason
+  — in the dialog and at the field it concerns, where a scrolling form cannot hide
+  it — rather than the service's count of the other fields, and it reaches every
+  field it names. A save that lands closes the dialog. A refused edit says why too,
+  instead of failing silently.

package/README.md

@@ -60,6 +60,7 @@ cockpit monorepo under `packages/studio-integrations`).
 pnpm install     # runs the module `prepare` (nuxt-module-build)
 pnpm test        # vitest
 pnpm build       # dist/
+pnpm changeset   # record what your change does to the version
 ```
 
 Hosts to develop against:
@@ -77,7 +78,19 @@ Hosts to develop against:
 
 ## Release
 
-Bump `version` in `package.json` and push to `main` — CI
-(`.github/workflows/publish.yml`) publishes any version that isn't on npm
-yet, via npm Trusted Publishing (the trusted publisher on npmjs is bound to
-this repo + workflow file).
+Versioning is driven by [Changesets](https://github.com/changesets/changesets),
+so `version` in `package.json` is never edited by hand. Every pull request
+records what it does to the version — CI fails without it:
+
+```bash
+pnpm changeset          # pick patch/minor/major, then write the note
+pnpm changeset --empty  # …for a PR that intentionally releases nothing
+```
+
+Releasing is then merging a pull request. Pushes to `main` that carry changesets
+make CI open a **"Version Packages"** PR with the bump and `CHANGELOG.md`
+applied; merging that PR publishes to npm (Trusted Publishing over OIDC, no
+token) and notifies the cockpit.
+
+Full policy, the SemVer contract, and why publishing is deliberately not
+`changeset publish`: [`docs/versioning.md`](docs/versioning.md).

package/dist/module.json

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

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

@@ -19,6 +19,7 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
+import { resolveLocalized } from "../../utils/localize";
 const props = defineProps({
   open: { type: Boolean, required: true },
   credentialType: { type: [String, Array], required: false }
@@ -26,12 +27,6 @@ const props = defineProps({
 const emit = defineEmits(["update:open", "created"]);
 const { create, testInline, load, oauthAuthorizeUrl } = useIntegrationsCredentials();
 const { load: loadTypes, bySlug } = useCredentialTypes();
-function loc(v) {
-  if (!v) return "";
-  if (typeof v === "string") return v;
-  const o = v;
-  return o.en ?? o.de ?? Object.values(o)[0] ?? "";
-}
 function authKindLabel(k) {
   switch (k) {
     case "api-key":
@@ -75,7 +70,7 @@ watch(() => props.open, async (o) => {
   await loadTypes();
   if (allowedTypes.value.length === 1) {
     pickedType.value = allowedTypes.value[0];
-    form.name = loc(pickedType.value.name);
+    form.name = resolveLocalized(pickedType.value.name);
   } else {
     pickedType.value = null;
     form.name = "";
@@ -86,7 +81,7 @@ function pickType(t) {
   form.config = {};
   testResult.value = null;
   sourceActive.value = false;
-  if (!form.name) form.name = loc(t.name);
+  if (!form.name) form.name = resolveLocalized(t.name);
 }
 function buildConfigPayload() {
   const out = {};
@@ -173,7 +168,7 @@ async function submit() {
         >
           <IntegrationsCredentialLogo :type="t" :size="18" />
           <div class="min-w-0 truncate text-sm">
-            <span class="font-semibold">{{ loc(t.name) }}</span>
+            <span class="font-semibold">{{ resolveLocalized(t.name) }}</span>
             <span class="ml-1.5 text-muted-foreground">({{ authKindLabel(t.auth_kind) }})</span>
           </div>
         </button>
@@ -183,7 +178,7 @@ async function submit() {
       <div v-else class="space-y-3 py-1 max-h-[26rem] overflow-y-auto pr-1">
         <div class="flex items-center gap-2">
           <IntegrationsCredentialLogo :type="pickedType" :size="18" />
-          <div class="text-sm font-medium">{{ loc(pickedType.name) }}</div>
+          <div class="text-sm font-medium">{{ resolveLocalized(pickedType.name) }}</div>
           <button
             v-if="allowedTypes.length > 1"
             type="button"
@@ -206,10 +201,14 @@ async function submit() {
           @apply="(c) => Object.assign(form.config, c)"
         />
 
+        <!-- Each label names its own control (`for`/`id`): without it a screen
+             reader reads the field as unlabelled, and the label text cannot be
+             used to reach it at all. -->
         <div v-for="f in fieldsOf(pickedType)" v-show="!sourceActive" :key="f.key" class="space-y-1.5">
-          <Label>{{ loc(f.label) }}{{ f.required ? " *" : "" }}</Label>
+          <Label :for="`create-field-${f.key}`">{{ resolveLocalized(f.label) }}{{ f.required ? " *" : "" }}</Label>
           <Input
             v-if="f.type === 'secret'"
+            :id="`create-field-${f.key}`"
             :model-value="form.config[f.key] ?? ''"
             type="password"
             autocomplete="new-password"
@@ -218,30 +217,32 @@ async function submit() {
           />
           <Input
             v-else-if="f.type === 'number'"
+            :id="`create-field-${f.key}`"
             type="number"
             :model-value="form.config[f.key] ?? ''"
             class="bg-white"
             @update:model-value="(v) => form.config[f.key] = v === '' ? void 0 : Number(v)"
           />
           <div v-else-if="f.type === 'boolean'" class="flex items-center gap-2 pt-1">
-            <Switch :model-value="Boolean(form.config[f.key])" @update:model-value="(v) => form.config[f.key] = v" />
+            <Switch :id="`create-field-${f.key}`" :model-value="Boolean(form.config[f.key])" @update:model-value="(v) => form.config[f.key] = v" />
           </div>
           <Select
             v-else-if="f.type === 'select'"
             :model-value="form.config[f.key] ?? ''"
             @update:model-value="(v) => form.config[f.key] = v"
           >
-            <SelectTrigger class="bg-white">
+            <SelectTrigger :id="`create-field-${f.key}`" class="bg-white">
               <SelectValue placeholder="Pick one" />
             </SelectTrigger>
             <SelectContent>
               <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
-                {{ loc(opt.label) }}
+                {{ resolveLocalized(opt.label) }}
               </SelectItem>
             </SelectContent>
           </Select>
           <Input
             v-else
+            :id="`create-field-${f.key}`"
             :model-value="form.config[f.key] ?? ''"
             class="bg-white"
             @update:model-value="(v) => form.config[f.key] = v"

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

@@ -8,6 +8,12 @@ import {
   TrashBinTrash as Trash2
 } from "#solar-icons";
 import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
   Button,
   Dialog,
   DialogContent,
@@ -23,8 +29,11 @@ import {
   SelectTrigger,
   SelectValue
 } from "@revenexx/studio";
-import { toast } from "vue-sonner";
+import { toast } from "../../utils/notify";
+import { apiFieldErrors, refusalReason } from "../../utils/apiError";
 import { credentialState, relativeTime } from "../../utils/credentialState";
+import { hasRevenexxSource } from "../../utils/revenexxCredentialSource";
+import { resolveLocalized } from "../../utils/localize";
 const props = defineProps({
   open: { type: Boolean, required: true },
   credential: { type: [Object, null], required: true },
@@ -43,14 +52,17 @@ const saving = ref(false);
 const deleting = ref(false);
 const testing = ref(false);
 const liveTest = ref(null);
-const connecting = ref(false);
-function loc(v) {
-  if (!v) return "";
-  if (typeof v === "string") return v;
-  const o = v;
-  return o.en ?? o.de ?? Object.values(o)[0] ?? "";
+const saveError = ref(null);
+const fieldErrors = ref({});
+function configFieldAria(key) {
+  return fieldErrors.value[`config.${key}`] ? { "aria-invalid": "true", "aria-describedby": `detail-field-${key}-error` } : {};
+}
+function clearRefusal() {
+  saveError.value = null;
+  fieldErrors.value = {};
 }
-const typeName = computed(() => loc(props.type?.name) || props.credential?.credential_type_slug || "");
+const connecting = ref(false);
+const typeName = computed(() => resolveLocalized(props.type?.name) || props.credential?.credential_type_slug || "");
 const isOAuthAuthcode = computed(() => props.type?.auth_kind === "oauth2-authcode");
 const state = computed(() => props.credential ? credentialState(props.credential) : null);
 function fieldsOf(t) {
@@ -65,7 +77,7 @@ function formatDateTime(iso) {
   }
 }
 watch(
-  () => [props.open, props.credential?.id],
+  [() => props.open, () => props.credential?.id],
   () => {
     if (!props.open || !props.credential) return;
     tab.value = "credentials";
@@ -73,6 +85,7 @@ watch(
     form.config = { ...props.credential.public_config ?? {} };
     sourceActive.value = false;
     liveTest.value = null;
+    clearRefusal();
   },
   { immediate: true }
 );
@@ -100,20 +113,24 @@ async function runTest() {
 async function save() {
   if (!props.credential || !form.name.trim()) return;
   saving.value = true;
+  clearRefusal();
   try {
     await update(props.credential.id, { name: form.name.trim(), config: buildConfigPayload() });
-    toast.success("Credential updated");
     emit("changed");
     emit("update:open", false);
+    toast.success("Credential updated");
   } catch (e) {
-    toast.error(e?.message ?? "Could not save credential.");
+    fieldErrors.value = apiFieldErrors(e);
+    saveError.value = refusalReason(e, "Could not save credential.");
+    toast.error(saveError.value);
   } finally {
     saving.value = false;
   }
 }
+const pendingDelete = ref(false);
 async function destroy() {
   if (!props.credential) return;
-  if (!confirm(`Delete credential "${props.credential.name}"? Workflows referencing it will fail until re-bound.`)) return;
+  pendingDelete.value = false;
   deleting.value = true;
   try {
     await remove(props.credential.id);
@@ -208,58 +225,86 @@ async function connect() {
         <div class="space-y-3">
           <div class="space-y-1.5">
             <Label for="detail-cred-name">Name</Label>
-            <Input id="detail-cred-name" v-model="form.name" class="bg-white" />
+            <Input
+              id="detail-cred-name"
+              v-model="form.name"
+              class="bg-white"
+              :aria-invalid="fieldErrors.name ? 'true' : void 0"
+              :aria-describedby="fieldErrors.name ? 'detail-cred-name-error' : void 0"
+            />
+            <p v-if="fieldErrors.name" id="detail-cred-name-error" class="text-sm text-rose-700">
+              {{ fieldErrors.name }}
+            </p>
           </div>
 
-          <!-- "Use revenexx …" source picker (SFTP / Mail / API key) -->
+          <!-- "Use revenexx …" source picker (SFTP / Mail / API key) — mounted
+               only for the types it serves, which is tidiness rather than
+               protection: it renders nothing for any other type anyway. It used
+               to be protection, because the component resolved cockpit-only
+               sources at setup and mounting it elsewhere took this form down;
+               since PO-222 it asks instead (`utils/cockpitSources.ts`). -->
           <IntegrationsCredentialRevenexxSource
+            v-if="hasRevenexxSource(type?.slug)"
             :type="type"
             @update:active="(v) => sourceActive = v"
             @apply="(c) => Object.assign(form.config, c)"
           />
 
+          <!-- Each label names its own control (`for`/`id`): without it a
+               screen reader reads the field as unlabelled, and the label text
+               cannot be used to reach it at all. -->
           <div v-for="f in fieldsOf(type)" v-show="!sourceActive" :key="f.key" class="space-y-1.5">
-            <Label>{{ loc(f.label) }}{{ f.required ? " *" : "" }}</Label>
+            <Label :for="`detail-field-${f.key}`">{{ resolveLocalized(f.label) }}{{ f.required ? " *" : "" }}</Label>
 
             <Input
               v-if="f.type === 'secret'"
+              :id="`detail-field-${f.key}`"
               :model-value="form.config[f.key] ?? ''"
               type="password"
               autocomplete="new-password"
               placeholder="Leave blank to keep current"
               class="bg-white"
+              v-bind="configFieldAria(f.key)"
               @update:model-value="(v) => form.config[f.key] = v"
             />
             <Input
               v-else-if="f.type === 'number'"
+              :id="`detail-field-${f.key}`"
               type="number"
               :model-value="form.config[f.key] ?? ''"
               class="bg-white"
+              v-bind="configFieldAria(f.key)"
               @update:model-value="(v) => form.config[f.key] = v === '' ? void 0 : Number(v)"
             />
             <div v-else-if="f.type === 'boolean'" class="flex items-center gap-2 pt-1">
-              <Switch :model-value="Boolean(form.config[f.key])" @update:model-value="(v) => form.config[f.key] = v" />
+              <Switch :id="`detail-field-${f.key}`" :model-value="Boolean(form.config[f.key])" v-bind="configFieldAria(f.key)" @update:model-value="(v) => form.config[f.key] = v" />
             </div>
             <Select
               v-else-if="f.type === 'select'"
               :model-value="form.config[f.key] ?? ''"
               @update:model-value="(v) => form.config[f.key] = v"
             >
-              <SelectTrigger class="bg-white">
+              <SelectTrigger :id="`detail-field-${f.key}`" class="bg-white" v-bind="configFieldAria(f.key)">
                 <SelectValue placeholder="Pick one" />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
-                  {{ loc(opt.label) }}
+                  {{ resolveLocalized(opt.label) }}
                 </SelectItem>
               </SelectContent>
             </Select>
             <Input
               v-else
+              :id="`detail-field-${f.key}`"
               :model-value="form.config[f.key] ?? ''"
               class="bg-white"
+              v-bind="configFieldAria(f.key)"
               @update:model-value="(v) => form.config[f.key] = v"
             />
+
+            <p v-if="fieldErrors[`config.${f.key}`]" :id="`detail-field-${f.key}-error`" class="text-sm text-rose-700">
+              {{ fieldErrors[`config.${f.key}`] }}
+            </p>
           </div>
 
           <!-- Live test feedback (from the test the operator just ran) -->
@@ -271,6 +316,12 @@ async function connect() {
             {{ liveTest.ok ? "Connection ok." : liveTest.error ?? "Connection failed." }}
           </div>
 
+          <!-- The save was refused. Same rule as the create dialog: stated here, and at
+               the field where the service keyed it. -->
+          <div v-if="saveError" role="alert" class="rounded-md bg-rose-500/10 px-3 py-2 text-sm text-rose-700">
+            {{ saveError }}
+          </div>
+
           <div class="flex items-center gap-2 pt-1">
             <div class="flex-1" />
             <Button variant="outline" :disabled="testing || saving" @click="runTest">
@@ -327,7 +378,7 @@ async function connect() {
                 size="sm"
                 class="shrink-0 border-rose-500/40 text-rose-700 hover:bg-rose-500/10"
                 :disabled="deleting"
-                @click="destroy"
+                @click="pendingDelete = true"
               >
                 <Loader2 v-if="deleting" :size="14" class="mr-1 animate-spin" />
                 <Trash2 v-else :size="14" class="mr-1" />
@@ -337,6 +388,27 @@ async function connect() {
           </div>
         </div>
       </div>
+
+      <AlertDialog :open="pendingDelete" @update:open="(v) => pendingDelete = v">
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete credential?</AlertDialogTitle>
+            <AlertDialogDescription>
+              <span class="font-medium text-foreground">{{ credential?.name }}</span>
+              will be removed. Workflows that reference it will fail until they are re-bound to another credential.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <Button variant="outline" :disabled="deleting" @click="pendingDelete = false">
+              Cancel
+            </Button>
+            <Button class="bg-destructive text-white hover:bg-destructive/90" :disabled="deleting" @click="destroy">
+              <Loader2 v-if="deleting" :size="14" class="animate-spin" />
+              {{ deleting ? "Deleting\u2026" : "Delete" }}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </DialogContent>
   </Dialog>
 </template>