@revenexx/studio-integrations 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,140 @@
 # @revenexx/studio-integrations
 
+## 2.1.0
+
+### Minor Changes
+
+- 6ff6833: A workflow can be exported to a file and imported again, into the same environment or
+  another: Export as file in a workflow's row actions and in the editor's actions menu, Import
+  from file in the New workflow dialog, and Import from file… in the editor to replace a
+  workflow's content. The file never carries credentials, secret values or a webhook's
+  address; an import creates a paused workflow, or replaces the editor's content as
+  unsaved changes that keep each webhook's address and leave an active workflow running
+  until a valid version is saved (PO-525).
+- 9721bc2: PO-537: inside a palette folder, the nodes stand in the order their package gives
+  them rather than in the alphabetical order of their identifiers.
+
+  A node that states its place (`paletteOrder` in its manifest) comes first; the rest
+  follow in the order the package lists them, which the Integrations API now reports
+  as `package_position`; a node for which neither is known still falls back to its
+  identifier. So "Send Email" leads Brevo's Email folder instead of "Cancel Scheduled
+  Email".
+
+  Where a folder holds nodes of several packages, each package orders only its own:
+  no node takes a place another package's node held. Against an API that does not
+  report `package_position` yet, folders keep today's order.
+
+- 1820289: A run's record now shows what the run returned per step: one block for each step, under the name it carries on the canvas, in the order of the steps in the workflow — the way the dialog after a run already shows it. Before, the record printed the result as one object keyed by internal node ids, in an order the run never took. A result the workflow's steps cannot account for, because the workflow has changed since the run, say, is still shown whole.
+- 6cc8b71: A node's optional settings fold only after its last required setting. Before, every optional setting from the fourth on was folded wherever it stood, so a setting between two required ones vanished from the middle of the form, and one "Show n optional settings" control opened settings in two separate places. Everything up to the last required setting is now always shown, and the fold is one tail at the end — Brevo's Double Opt-in, for one, now shows "Never on lists" and folds only "Attributes".
+- 664725b: A mapped value in a node's setting can now be changed where it stands. Click it
+  to select it, then click it again or press Enter, and it opens as the expression
+  it stands for;
+  once the caret or the focus leaves it, it reads as its source again. Until now it
+  could only be deleted and written again, which for a condition meant retyping the
+  whole expression to correct one character (PO-544).
+- 7fd02ea: The node palette's folders now stand alphabetically on every level, in the
+  language the studio is shown in and regardless of case. Until now a folder stood
+  where its first node's internal identifier fell in the catalogue, so Test Nodes
+  appeared between PostBin and Shipcloud. SFTP is no longer pinned directly after
+  FTP; the nodes inside a folder keep the order their package gives them (PO-545).
+- 7525758: A Core folder in the node palette is one folder in every language (PO-546). The studio now names the Core folders it knows — Flow, Data, Text & Formats, Files, Web, Messaging, FTP / SFTP — from its own translations, by their English name, so a node that names no folder, or one an older release left registered with an out-of-date name, no longer opens a second folder (_Data_ beside _Daten_, _Flow_ beside _Ablauf_). Every one of them has its own icon. A path of two levels no longer files a node under Integrations — only an app package or a logo does — so Core can nest a folder; a subfolder without a logo shows the first image its nodes carry.
+
+### Patch Changes
+
+- ddcbdbd: The Schedules page says why a schedule will not fire, in the Next run column: its
+  workflow is inactive or not built, its schedule cannot be read, its timezone is
+  unknown, or its rhythm never comes round. Until now every one of these read as a
+  bare dash beside a live badge. A paused schedule and one with no schedule set keep
+  the dash, because the row already says so (PO-261).
+- ebbc148: Nothing a user sees changes. The module now declares `@solar-icons/vue`, which its
+  components already import through `@solar-icons/nuxt`. A host that typechecks and
+  sees every `#solar-icons` import reported as a missing export has to declare
+  `@solar-icons/vue` itself: the type declaration is generated into the host's own
+  `.nuxt`, so it is resolved from the host's dependencies, not this module's (PO-281).
+- fd5a78e: Nothing a user sees changes. The module is linted now, and the first run's fixes ship
+  in it: unused imports and dead helpers removed, the pattern that finds `${{ … }}` in a
+  setting no longer slows down on long unclosed input, and the OAuth popup renders one
+  root element (PO-305).
+- d9f4742: Cancelling a run from its row in either run list now asks first, the way terminating
+  already did and the way the run's record asks before both. A cancelled run cannot be
+  resumed, only retried from the start, so a slip in the row's menu was as final as a
+  terminate (PO-336).
+- 271de84: A run the platform reports as `canceled` — Temporal's spelling — or in another letter case (`COMPLETED`) now reads the same in the Runs list as at its own record. The list used to draw such a run as _failed_ while the record called it _cancelled_ or _succeeded_; both now read the platform's status through one table.
+- 90d9ae3: "How long ago" reads the same everywhere it is shown: the dashboard's Latest executions and
+  Needs attention panels, the runs list's Started column and a credential's last
+  check. Under ten seconds is "just now", from there to a minute it counts seconds
+  ("40s ago") — the dashboard used to say "just now" for the whole minute — and on
+  the dashboard and the runs list that count keeps moving between realtime events.
+  From thirty days on it is a date in the studio's language instead of a count like
+  "412d ago". A timestamp that cannot be read shows "—"; the dashboard used to print
+  "NaNd ago" (PO-393).
+- 60ef22a: The Shipcloud package's node icons draw as icons rather than as grey boxes.
+
+  A node declares its icon as an `mdi:` name and the studio renders Lucide, so the
+  two vocabularies are bridged by a table. A name in neither the table nor Lucide's
+  own spelling silently becomes a generic box — which is what the Shipcloud package
+  got for its nodes. Eight names now map: `truck-delivery`,
+  `package-variant-closed-plus`, `map-marker-path`, `package-variant-remove`,
+  `truck-check-outline`, `file-document-outline`, `file-plus-outline` and
+  `map-marker-radius-outline`.
+
+  The table also has a test now, including one that fails on an entry pointing at a
+  Lucide component that does not exist: a wrong entry looks exactly like a missing
+  one, and neither says anything.
+
+- 78e99d6: A number typed into a setting's mapped-value mode is kept as a number, not as text
+  (PO-521).
+
+  **A numeric setting has two boxes and only one of them kept the number.** The plain
+  one wrote what was typed as a number; the box beside it — the one that also takes a
+  value mapped from elsewhere in the workflow — wrote the raw text through. Brightness
+  50 was stored as `"50"`, the workflow saved without a word, and the run stopped with
+  `Config field 'brightness' must be of type number.` Nothing in that field could fix
+  it, because the field itself is what produced the text. Reported from the Philips Hue
+  **Set Light** node, where every value the author touched was text and the one they
+  left at its default was a number.
+
+  The rule now lives in one place: a numeric setting keeps the number, an emptied box
+  is no value rather than `''`, a mapped value is left exactly as it was typed, and
+  text denoting no number is kept as typed so the operator sees what they wrote rather
+  than finding the box silently emptied. Text in one of the three base notations —
+  `0x10`, `0b101`, `0o17` — counts as no number here, since the platform refuses it on
+  the way in and storing 16, 5 or 15 would put a value in the workflow nobody typed.
+
+  **When the conversion happens differs by box, and has to.** The plain one converts as
+  it is typed. The mapped-value box shows a document rather than a line of text, and it
+  re-projects that document whenever it disagrees with the value it is given — so it
+  stores what was typed and converts when it is left. Converting there on every
+  keystroke would rebuild the document under the operator's cursor: a number typed over
+  what the box already held would keep only its last digit, and `0.4` could never be
+  typed at all, because half-way through it is `0.` — a number worth `0`, whose text has
+  no dot in it. The range a
+  setting allows is read through the same rule, so a workflow **saved before this
+  change** — its number still stored as text — is marked in the dialog instead of
+  reading as sound until the run refuses it.
+
+  A yes/no setting has the same shape of defect and is deliberately untouched; it is
+  recorded in the Gaps of `specs/node-configuration.md`, with why.
+
+  The platform half of PO-521 ships separately: cross-validation now reads a numeric
+  setting's value as the number it denotes, which is what lets the workflows already
+  saved this way run again without anything rewriting them.
+
+- 2632bae: A credential type's logo sits in a smaller box: 8 px larger than the symbol instead of
+  16, so 24 px on the Credentials list instead of 32, with the type picker and the
+  credential dialogs shrinking in step. The generic key shown for a type without a logo
+  shrinks with it (PO-527).
+- 1159568: PO-542: nodes whose icon the studio could not translate no longer draw as an
+  empty box.
+
+  Node packages name their icons in one vocabulary and the studio draws another, so
+  each name goes through a table; a name missing from it fell back to the generic box
+  without a word. The table now covers the names the packages ship today — all of
+  Philips Hue and PostBin, sixteen Brevo nodes, the notifications nodes, and one each
+  in core and DeepL. The four chat brands (Discord, Microsoft Teams, Telegram,
+  WhatsApp) have no counterpart in the drawing set and get a neutral messaging
+  symbol; their vendor logo still marks them.
+
 ## 2.0.0
 
 ### Major Changes

package/README.md

@@ -86,6 +86,7 @@ cockpit monorepo under `packages/studio-integrations`).
 ```bash
 pnpm install     # runs the module `prepare` (nuxt-module-build)
 pnpm test        # vitest
+pnpm lint        # eslint — `pnpm lint --fix` fixes what has a fix, layout above all
 pnpm build       # dist/
 pnpm changeset   # record what your change does to the version
 ```

package/dist/module.json

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

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

@@ -149,16 +149,16 @@ async function submit() {
           {{ t("integration.credentials.createDialog.noTypeAvailable") }}
         </p>
         <button
-          v-for="t in allowedTypes"
-          :key="t.slug"
+          v-for="type in allowedTypes"
+          :key="type.slug"
           type="button"
           class="flex w-full items-center gap-2 rounded-lg border border-black/[0.08] p-3 text-left transition hover:border-black/20 hover:bg-muted/30"
-          @click="pickType(t)"
+          @click="pickType(type)"
         >
-          <IntegrationsCredentialLogo :type="t" :size="18" />
+          <IntegrationsCredentialLogo :type="type" :size="18" />
           <div class="min-w-0 truncate text-sm">
-            <span class="font-semibold">{{ resolveLocalized(t.name) }}</span>
-            <span class="ml-1.5 text-muted-foreground">({{ authKindLabel(t.auth_kind) }})</span>
+            <span class="font-semibold">{{ resolveLocalized(type.name) }}</span>
+            <span class="ml-1.5 text-muted-foreground">({{ authKindLabel(type.auth_kind) }})</span>
           </div>
         </button>
       </div>

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

@@ -31,7 +31,9 @@ import {
 } from "@revenexx/studio";
 import { toast } from "../../utils/notify";
 import { apiRefusal, errorReason } from "../../utils/apiError";
-import { credentialState, relativeTime } from "../../utils/credentialState";
+import { credentialState } from "../../utils/credentialState";
+import { relativeTime } from "../../utils/relativeTime";
+import { useNow } from "../../composables/useNow";
 import { hasRevenexxSource } from "../../utils/revenexxCredentialSource";
 import { resolveLocalized } from "../../utils/localize";
 const props = defineProps({
@@ -41,6 +43,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:open", "changed"]);
 const t = useIntegrationsT();
+const now = useNow();
 const { update, remove, test, oauthAuthorizeUrl, load } = useIntegrationsCredentials();
 const tab = ref("credentials");
 const tabs = computed(() => [
@@ -204,167 +207,167 @@ async function connect() {
              scrolling pane and the block below it are siblings, as they were when the
              pane was the whole tab, so nothing about the spacing around them moves. -->
         <template v-if="tab === 'credentials'">
-        <div class="space-y-5 max-h-[62vh] overflow-y-auto pr-1 pt-4">
-        <!-- Connection state — the headline answer: are these credentials correct? -->
-        <div class="rounded-lg border p-3" :class="state.toneClass">
-          <div class="flex items-center gap-2">
-            <CheckCircle2 v-if="state.key === 'connected'" :size="16" class="shrink-0" />
-            <XCircle v-else-if="state.key === 'failed'" :size="16" class="shrink-0" />
-            <span class="font-medium">{{ state.label }}</span>
-            <span v-if="state.at" class="text-sm opacity-70">· verified {{ relativeTime(state.at) }}</span>
-            <div class="flex-1" />
-            <Button
-              v-if="isOAuthAuthcode"
-              size="sm"
-              variant="outline"
-              class="bg-white/60"
-              :disabled="connecting"
-              @click="connect"
-            >
-              <Loader2 v-if="connecting" :size="13" class="mr-1 animate-spin" />
-              {{ t("integration.credentials.detail.action.reconnect") }}
-            </Button>
-          </div>
-          <!-- The stored sentence, and only while nothing fresher is on screen. The
+          <div class="space-y-5 max-h-[62vh] overflow-y-auto pr-1 pt-4">
+            <!-- Connection state — the headline answer: are these credentials correct? -->
+            <div class="rounded-lg border p-3" :class="state.toneClass">
+              <div class="flex items-center gap-2">
+                <CheckCircle2 v-if="state.key === 'connected'" :size="16" class="shrink-0" />
+                <XCircle v-else-if="state.key === 'failed'" :size="16" class="shrink-0" />
+                <span class="font-medium">{{ state.label }}</span>
+                <span v-if="state.at" class="text-sm opacity-70">· verified {{ relativeTime(state.at, now) }}</span>
+                <div class="flex-1" />
+                <Button
+                  v-if="isOAuthAuthcode"
+                  size="sm"
+                  variant="outline"
+                  class="bg-white/60"
+                  :disabled="connecting"
+                  @click="connect"
+                >
+                  <Loader2 v-if="connecting" :size="13" class="mr-1 animate-spin" />
+                  {{ t("integration.credentials.detail.action.reconnect") }}
+                </Button>
+              </div>
+              <!-- The stored sentence, and only while nothing fresher is on screen. The
                live box below shows the result of a test just run, and the reload that
                follows it puts the very same sentence here — so both would print it
                twice, and past the length the platform truncates at, twice differently.
                The freshly returned one wins, being whole (specs/credential-test.md
                AC-1). -->
-          <p v-if="state.message && !liveTest" class="mt-1 text-sm break-words opacity-90">
-            {{ state.message }}
-          </p>
-          <p v-else-if="state.key === 'untested'" class="mt-1 text-sm opacity-80">
-            {{ t("integration.credentials.detail.state.untestedHint") }}
-          </p>
-        </div>
+              <p v-if="state.message && !liveTest" class="mt-1 text-sm break-words opacity-90">
+                {{ state.message }}
+              </p>
+              <p v-else-if="state.key === 'untested'" class="mt-1 text-sm opacity-80">
+                {{ t("integration.credentials.detail.state.untestedHint") }}
+              </p>
+            </div>
 
-        <!-- Editable fields -->
-        <div class="space-y-3">
-          <div class="space-y-1.5">
-            <Label for="detail-cred-name">{{ t("integration.credentials.shared.field.name.label") }}</Label>
-            <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>
+            <!-- Editable fields -->
+            <div class="space-y-3">
+              <div class="space-y-1.5">
+                <Label for="detail-cred-name">{{ t("integration.credentials.shared.field.name.label") }}</Label>
+                <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) — mounted
+              <!-- "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) => {
+              <IntegrationsCredentialRevenexxSource
+                v-if="hasRevenexxSource(type?.slug)"
+                :type="type"
+                @update:active="(v) => {
   sourceActive = v;
   clearRefusal();
 }"
-            @apply="(c) => Object.assign(form.config, c)"
-          />
+                @apply="(c) => Object.assign(form.config, c)"
+              />
 
-          <!-- Each label names its own control (`for`/`id`): without it a
+              <!-- 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 :for="`detail-field-${f.key}`">{{ resolveLocalized(f.label) }}{{ f.required ? " *" : "" }}</Label>
+              <div v-for="f in fieldsOf(type)" v-show="!sourceActive" :key="f.key" class="space-y-1.5">
+                <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="t('integration.credentials.shared.field.secret.placeholder')"
-              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 :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 :id="`detail-field-${f.key}`" class="bg-white" v-bind="configFieldAria(f.key)">
-                <SelectValue :placeholder="t('integration.credentials.shared.field.select.placeholder')" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
-                  {{ 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"
-            />
+                <Input
+                  v-if="f.type === 'secret'"
+                  :id="`detail-field-${f.key}`"
+                  :model-value="form.config[f.key] ?? ''"
+                  type="password"
+                  autocomplete="new-password"
+                  :placeholder="t('integration.credentials.shared.field.secret.placeholder')"
+                  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 :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 :id="`detail-field-${f.key}`" class="bg-white" v-bind="configFieldAria(f.key)">
+                    <SelectValue :placeholder="t('integration.credentials.shared.field.select.placeholder')" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
+                      {{ 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>
+                <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) -->
-          <div
-            v-if="liveTest"
-            class="rounded-md px-3 py-2 text-sm"
-            :class="liveTest.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
-          >
-            {{ liveTest.ok ? liveTest.message ?? t("integration.credentials.shared.test.ok") : liveTest.error ?? liveTest.message ?? t("integration.credentials.shared.test.failed") }}
-          </div>
+              <!-- Live test feedback (from the test the operator just ran) -->
+              <div
+                v-if="liveTest"
+                class="rounded-md px-3 py-2 text-sm"
+                :class="liveTest.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
+              >
+                {{ liveTest.ok ? liveTest.message ?? t("integration.credentials.shared.test.ok") : liveTest.error ?? liveTest.message ?? t("integration.credentials.shared.test.failed") }}
+              </div>
 
-        </div>
+            </div>
 
-        </div>
+          </div>
 
-        <!-- Outside the scrolling pane on purpose, the way the create dialog has it:
+          <!-- Outside the scrolling pane on purpose, the way the create dialog has it:
              a refusal puts the operator in the first marked field, which scrolls that
              pane back to the top — and a summary rendered at the end of the form would
              be carried out of sight by the very focus meant to make the refusal
              visible. What is marked at a field is not repeated here; what has no field
              to be marked at would otherwise be silent. -->
-        <div v-if="summaryReasons.length" role="alert" class="mt-3 space-y-1 rounded-md bg-rose-500/10 px-3 py-2 text-sm text-rose-700">
-          <!-- Keyed by position: two undrawn keys can be refused with the same
+          <div v-if="summaryReasons.length" role="alert" class="mt-3 space-y-1 rounded-md bg-rose-500/10 px-3 py-2 text-sm text-rose-700">
+            <!-- Keyed by position: two undrawn keys can be refused with the same
                sentence, and a duplicate key is how one of them goes unrendered. -->
-          <p v-for="(reason, i) in summaryReasons" :key="i">{{ reason }}</p>
-        </div>
+            <p v-for="(reason, i) in summaryReasons" :key="i">{{ reason }}</p>
+          </div>
 
-        <div class="flex items-center gap-2 pt-3">
-          <div class="flex-1" />
-          <Button variant="outline" :disabled="testing || saving" @click="runTest">
-            <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
-            <TestIcon v-else :size="14" class="mr-1" />
-            {{ t("integration.credentials.shared.action.testConnection") }}
-          </Button>
-          <Button :disabled="saving || !form.name.trim()" @click="save">
-            <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
-            {{ t("integration.common.action.save") }}
-          </Button>
-        </div>
+          <div class="flex items-center gap-2 pt-3">
+            <div class="flex-1" />
+            <Button variant="outline" :disabled="testing || saving" @click="runTest">
+              <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
+              <TestIcon v-else :size="14" class="mr-1" />
+              {{ t("integration.credentials.shared.action.testConnection") }}
+            </Button>
+            <Button :disabled="saving || !form.name.trim()" @click="save">
+              <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
+              {{ t("integration.common.action.save") }}
+            </Button>
+          </div>
         </template>
 
         <!-- Tab 2: Details -->

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

@@ -5,7 +5,7 @@ const props = defineProps({
   type: { type: [Object, null], required: false },
   size: { type: Number, required: false }
 });
-const box = computed(() => (props.size ?? 16) + 16);
+const box = computed(() => (props.size ?? 16) + 8);
 const glyph = computed(() => props.size ?? 16);
 const logoSrc = computed(() => {
   const imgs = props.type?.images;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref, useId, watch } from "vue";
+import { computed, ref, useId, watch } from "vue";
 import {
   AddCircle as Plus,
   CheckCircle as Check,

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

@@ -51,16 +51,16 @@ const filtered = computed(() => {
         {{ t("integration.credentials.typePicker.empty", { query }) }}
       </p>
       <button
-        v-for="t in filtered"
-        :key="t.slug"
+        v-for="type in filtered"
+        :key="type.slug"
         type="button"
         class="flex w-full items-center gap-2.5 rounded-md px-2 py-2 text-left transition hover:bg-muted/50"
-        @click="emit('pick', t)"
+        @click="emit('pick', type)"
       >
-        <IntegrationsCredentialLogo :type="t" :size="16" />
+        <IntegrationsCredentialLogo :type="type" :size="16" />
         <div class="min-w-0 flex-1 truncate text-sm">
-          <span class="font-medium">{{ resolveLocalized(t.name) || t.slug }}</span>
-          <span class="ml-1.5 text-muted-foreground">({{ authKindLabel(t.auth_kind) }})</span>
+          <span class="font-medium">{{ resolveLocalized(type.name) || type.slug }}</span>
+          <span class="ml-1.5 text-muted-foreground">({{ authKindLabel(type.auth_kind) }})</span>
         </div>
       </button>
     </div>

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

@@ -21,7 +21,9 @@ type __VLS_Props = {
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
+    blur: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onBlur?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;