@revenexx/studio-integrations 0.5.0 → 0.6.0

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

@@ -1,15 +1,15 @@
 <script setup>
 import { computed, ref, watch } from "vue";
-import TemplateFlowPreview from "../../components/Integrations/TemplateFlowPreview.vue";
+import TemplateCard from "../../components/Integrations/TemplateCard.vue";
 import WorkflowCreateDialog from "../../components/Integrations/WorkflowCreateDialog.vue";
 import { Pulse as Activity, DangerTriangle as AlertTriangle, ArrowRight, Box as Boxes, ClockCircle as Clock, Database, Layers, AddCircle as Plus, Radio, MagicStick as Sparkles, LinkRound as Webhook, Programming as Workflow } from "#solar-icons";
 import { Badge, Button } from "@revenexx/studio";
 useHead({ title: "Dashboard \xB7 Integration Studio" });
 const { workflows, activeCount: activeWorkflows, loading: workflowsLoading, load: loadWorkflows } = useIntegrationsWorkflows();
 const { runs, runningCount, failedCount, loading: runsLoading, load: loadRuns } = useIntegrationsRuns();
-const { popular, loading: templatesLoading, load: loadTemplates, ensureDetails } = useIntegrationsTemplates();
-watch(() => popular.value.map((t) => t.slug).join(","), () => {
-  if (popular.value.length) void ensureDetails(popular.value.map((t) => t.slug));
+const { startingPoints, loading: templatesLoading, load: loadTemplates, ensureDetails } = useIntegrationsTemplates();
+watch(() => startingPoints.value.map((t) => t.slug).join(","), () => {
+  if (startingPoints.value.length) void ensureDetails(startingPoints.value.map((t) => t.slug));
 }, { immediate: true });
 const { activeCount: schedulesActive, load: loadSchedules } = useIntegrationsSchedules();
 const { pendingCount: missedRuns, globalLoading: missedLoading, loadGlobal: loadMissedRuns } = useIntegrationsDeadLetters();
@@ -24,18 +24,18 @@ onMounted(() => {
   void loadSchedules();
   void loadMissedRuns();
 });
-const latestPerWorkflow = computed(() => {
+const latestByWorkflow = computed(() => {
   const seen = /* @__PURE__ */ new Set();
   const out = [];
   for (const r of runs.value) {
     if (seen.has(r.workflowId)) continue;
     seen.add(r.workflowId);
     out.push(r);
-    if (out.length >= 10) break;
   }
   return out;
 });
-const failedRecent = computed(() => runs.value.filter((r) => r.status === "failed").slice(0, 3));
+const latestPerWorkflow = computed(() => latestByWorkflow.value.slice(0, 10));
+const failedRecent = computed(() => latestByWorkflow.value.filter((r) => r.status === "failed").slice(0, 3));
 function formatRelative(iso) {
   if (!iso) return "\u2014";
   const ms = Date.now() - new Date(iso).getTime();
@@ -76,7 +76,7 @@ const kpis = computed(() => [
   {
     label: "Scheduled",
     value: schedulesActive.value,
-    sub: "cron triggers active",
+    sub: "scheduled triggers active",
     icon: Clock,
     tile: "bg-violet-500 text-white"
   },
@@ -118,13 +118,18 @@ const surfaces = [
     </PageHeader>
 
     <div class="p-4 space-y-4">
-      <!-- KPI strip -->
-      <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
+      <!-- KPI strip. Each tile carries its figure in its own name: the Missed-runs
+           tile is a link, and a link takes its name from its label instead of its
+           contents — named "Missed runs" alone it would announce less than the
+           three tiles beside it. -->
+      <div role="group" aria-label="Key figures" class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
         <component
           :is="k.to ? NuxtLinkComp : 'div'"
           v-for="k in kpis"
           :key="k.label"
           :to="k.to"
+          :role="k.to ? void 0 : 'group'"
+          :aria-label="`${k.label}: ${k.value}`"
           class="block rounded-lg border border-black/[0.06] bg-white p-3"
           :class="k.to ? 'transition hover:border-black/20' : ''"
         >
@@ -148,10 +153,10 @@ const surfaces = [
         </component>
       </div>
 
-      <!-- Two-column: recent runs + needs attention + popular templates -->
+      <!-- Two-column: recent runs + needs attention + templates to start from -->
       <div class="grid gap-4 lg:grid-cols-3">
         <!-- Recent runs ─ takes 2 cols -->
-        <div class="lg:col-span-2 rounded-lg border border-black/[0.06] bg-white">
+        <div role="group" aria-label="Latest executions" class="lg:col-span-2 rounded-lg border border-black/[0.06] bg-white">
           <div class="flex items-center justify-between border-b border-black/[0.06] px-3 py-2">
             <div class="flex items-center gap-2">
               <span class="flex size-6 items-center justify-center rounded-md bg-slate-100 text-slate-500">
@@ -164,11 +169,15 @@ const surfaces = [
             </NuxtLink>
           </div>
           <div>
-            <div
+            <!-- An entry is a link, not a div that answers a click: that is what
+                 makes it reachable by keyboard, and it is what gives it a name —
+                 the values it shows. A name written onto a plain row would be
+                 heard by nobody, because ARIA does not name a generic element. -->
+            <NuxtLink
               v-for="r in latestPerWorkflow"
               :key="r.id"
-              class="grid grid-cols-[90px_minmax(0,1fr)_100px_70px] items-center gap-2 border-b border-black/[0.04] px-3 py-2 text-sm last:border-b-0 cursor-pointer hover:bg-muted/30"
-              @click="$router.push({ path: `/integrations/workflows/${r.workflowId}`, query: { run: r.id } })"
+              :to="{ path: `/integrations/workflows/${r.workflowId}`, query: { run: r.id } }"
+              class="grid grid-cols-[90px_minmax(0,1fr)_100px_70px] items-center gap-2 border-b border-black/[0.04] px-3 py-2 text-sm last:border-b-0 hover:bg-muted/30"
             >
               <Badge variant="outline" :class="['border text-xs font-medium uppercase', statusClass(r.status)]">
                 {{ r.status }}
@@ -183,7 +192,7 @@ const surfaces = [
               <div class="text-sm text-muted-foreground tabular-nums text-right">
                 {{ r.durationMs == null ? "\u2026" : `${(r.durationMs / 1e3).toFixed(2)}s` }}
               </div>
-            </div>
+            </NuxtLink>
             <template v-if="latestLoading && !latestPerWorkflow.length">
               <div
                 v-for="n in 6"
@@ -206,7 +215,7 @@ const surfaces = [
         </div>
 
         <!-- Needs attention -->
-        <div class="rounded-lg border border-black/[0.06] bg-white">
+        <div role="group" aria-label="Needs attention" class="rounded-lg border border-black/[0.06] bg-white">
           <div class="flex items-center justify-between border-b border-black/[0.06] px-3 py-2">
             <div class="flex items-center gap-2">
               <span class="flex size-6 items-center justify-center rounded-md bg-slate-100 text-slate-500">
@@ -230,20 +239,24 @@ const surfaces = [
                 Triggers fired while their workflow couldn't run — review &amp; replay.
               </div>
             </NuxtLink>
-            <div
+            <!-- A link, for the same reason as the entries next door — and like
+                 the waiting-firings entry above it, which was one all along. -->
+            <NuxtLink
               v-for="r in failedRecent"
               :key="r.id"
-              class="space-y-1 border-b border-black/[0.04] px-3 py-2 text-sm last:border-b-0 cursor-pointer hover:bg-muted/30"
-              @click="$router.push(`/integrations/workflows/${r.workflowId}`)"
+              :to="`/integrations/workflows/${r.workflowId}`"
+              class="block space-y-1 border-b border-black/[0.04] px-3 py-2 text-sm last:border-b-0 hover:bg-muted/30"
             >
               <div class="font-medium truncate">{{ r.workflowName }}</div>
               <div class="text-sm text-rose-700 truncate" :title="r.errorMessage">
                 {{ r.errorMessage ?? "Failed." }}
               </div>
+              <!-- When it failed is when it ended, not when it set off: a run
+                   that broke after an hour would otherwise be dated an hour early. -->
               <div class="text-sm text-muted-foreground tabular-nums">
-                {{ formatRelative(r.startedAt) }}
+                {{ formatRelative(r.finishedAt ?? r.startedAt) }}
               </div>
-            </div>
+            </NuxtLink>
           </div>
           <div v-else class="px-3 py-6 text-center text-sm text-muted-foreground">
             All workflows healthy.
@@ -272,49 +285,41 @@ const surfaces = [
         </NuxtLink>
       </div>
 
-      <!-- Popular templates -->
-      <div class="rounded-lg border border-black/[0.06] bg-white">
+      <!-- Named for the offer it makes, not for a ranking nothing measures
+           (PO-238): every template's install count was nought, so the sort that
+           produced this list compared nothing at all. The wording deliberately
+           echoes the create-workflow dialog's "Start from template" tab — the same
+           offer, so the same words, rather than a second name for it. -->
+      <div role="group" aria-label="Start from a template" class="rounded-lg border border-black/[0.06] bg-white">
         <div class="flex items-center justify-between border-b border-black/[0.06] px-3 py-2">
           <div class="flex items-center gap-2">
             <span class="flex size-6 items-center justify-center rounded-md bg-slate-100 text-slate-500">
               <Sparkles :size="12" />
             </span>
-            <h3 class="text-sm font-semibold">Popular templates</h3>
+            <h3 class="text-sm font-semibold">Start from a template</h3>
           </div>
           <NuxtLink to="/integrations/templates" class="text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-1">
             See all <ArrowRight :size="11" />
           </NuxtLink>
         </div>
-        <div v-if="templatesLoading && !popular.length" class="grid gap-2 p-3 sm:grid-cols-2 lg:grid-cols-4">
+        <div v-if="templatesLoading && !startingPoints.length" class="grid gap-2 p-3 sm:grid-cols-2 lg:grid-cols-4">
           <div v-for="n in 4" :key="`sk-tpl-${n}`" class="rounded-md border border-black/[0.06] bg-white p-3 space-y-2">
             <div class="h-5 w-20 rounded bg-black/[0.07] animate-pulse" />
             <div class="h-3 w-3/4 rounded bg-black/[0.07] animate-pulse" />
             <div class="h-3 w-1/2 rounded bg-black/[0.05] animate-pulse" />
           </div>
         </div>
-        <div v-else-if="!popular.length" class="px-3 py-6 text-center text-sm text-muted-foreground">
+        <div v-else-if="!startingPoints.length" class="px-3 py-6 text-center text-sm text-muted-foreground">
           No templates registered yet.
         </div>
         <div v-else class="grid gap-2 p-3 sm:grid-cols-2 lg:grid-cols-4">
-          <NuxtLink
-            v-for="tpl in popular"
+          <TemplateCard
+            v-for="tpl in startingPoints"
             :key="tpl.slug"
+            :template="tpl"
+            density="compact"
             :to="`/integrations/templates/${tpl.slug}`"
-            class="flex flex-col overflow-hidden rounded-md border border-black/[0.06] bg-white transition hover:border-black/20 hover:shadow-sm"
-          >
-            <div class="relative h-20 shrink-0 border-b border-black/[0.06] bg-slate-50/70 [background-image:radial-gradient(circle,rgba(15,23,42,0.07)_1px,transparent_1px)] [background-size:12px_12px]">
-              <TemplateFlowPreview v-if="tpl.detailLoaded" :blob="tpl.blob" :height="80" class="px-1" />
-              <span class="absolute left-1.5 top-1.5 inline-flex items-center whitespace-nowrap rounded-full bg-slate-100 px-1.5 py-px text-[11px] font-medium uppercase text-slate-700">
-                {{ tpl.category }}
-              </span>
-            </div>
-            <div class="flex min-h-0 flex-1 flex-col p-3">
-              <div class="text-sm font-medium truncate">{{ tpl.name }}</div>
-              <p class="mt-1 text-sm text-muted-foreground line-clamp-2">
-                {{ tpl.description }}
-              </p>
-            </div>
-          </NuxtLink>
+          />
         </div>
       </div>
     </div>

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

@@ -27,7 +27,7 @@ onMounted(() => {
   void load(true);
   void loadGlobal(true);
   pollTimer = setInterval(() => {
-    if (hasActiveRuns.value) void load(true);
+    if (hasActiveRuns.value && !loading.value) void load(true);
   }, 3e3);
 });
 onUnmounted(() => {

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

@@ -1,6 +1,7 @@
 <script setup>
 import { ClockCircle as Clock, Globus as Globe } from "#solar-icons";
 import { Badge } from "@revenexx/studio";
+import { cadenceRank, describeCron } from "../../utils/schedule";
 useHead({ title: "Schedules \xB7 Integration Studio" });
 const router = useRouter();
 const { entries, activeCount, loading, load } = useIntegrationsSchedules();
@@ -22,8 +23,18 @@ function formatRelative(iso) {
   return new Date(iso).toLocaleString(void 0, { month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit" });
 }
 const columns = [
-  { key: "workflow", label: "Workflow", sortable: true, sortGetter: (e) => e.workflowName.toLowerCase(), searchGetter: (e) => `${e.workflowName} ${e.cron} ${e.timezone}` },
-  { key: "cron", label: "Cron", width: "180px", sortable: true, sortGetter: (e) => e.cron },
+  // Two columns share the slack, and the sentence gets the larger share of it:
+  // "Weekdays, hourly from 09:00 to 17:00" is what this page is for, while a
+  // workflow name is a label the reader recognises from its first few words.
+  // Both flex, so no width is left unused at the end of the row.
+  //
+  // The expression stays in the search text although the column no longer shows
+  // it: support quotes expressions, and a row has to be findable by the string
+  // someone was given.
+  { key: "workflow", label: "Workflow", width: "minmax(180px, 1fr)", sortable: true, sortGetter: (e) => e.workflowName.toLowerCase(), searchGetter: (e) => `${e.workflowName} ${e.cron ?? ""} ${e.timezone} ${describeCron(e.cron) ?? ""}` },
+  // Sorted by how often a schedule fires. The expression's characters would be
+  // meaningless here — the column shows a sentence.
+  { key: "cron", label: "When", width: "minmax(260px, 1.4fr)", sortable: true, sortGetter: (e) => cadenceRank(e.cron) },
   { key: "timezone", label: "Timezone", width: "140px", sortable: true, sortGetter: (e) => e.timezone },
   { key: "nextRun", label: "Next run", width: "140px", sortable: true, sortGetter: (e) => e.nextRunAt ?? "" },
   { key: "lastRun", label: "Last run", width: "140px", sortable: true, sortGetter: (e) => e.lastRunAt ?? "" },
@@ -35,7 +46,7 @@ const columns = [
   <IntegrationsLayout>
     <PageHeader
       title="Schedules"
-      description="Every cron-driven trigger across your workflows. Click a row to open the workflow."
+      description="Every scheduled trigger across your workflows. Click a row to open the workflow."
     >
       <template #actions>
         <span class="text-sm text-muted-foreground">
@@ -51,7 +62,7 @@ const columns = [
         :columns="columns"
         :row-key="(e2) => e2.id"
         :default-sort="{ column: 'nextRun', direction: 'asc' }"
-        :search="{ placeholder: 'Search by workflow, cron, timezone\u2026' }"
+        :search="{ placeholder: 'Search by workflow, schedule, timezone\u2026' }"
         :filter="true"
         empty-text="No schedules yet. Add a schedule trigger to any workflow."
         @row-click="(e2) => router.push(`/integrations/workflows/${e2.workflowId}`)"
@@ -67,8 +78,33 @@ const columns = [
           </div>
         </template>
 
+        <!--
+          The sentence is the answer, and the expression is not on the page: the
+          question this column asks is "when does this run", which an expression
+          answers in a language the reader may not speak. It is still one hover
+          away — support quotes expressions — and it still stands alone in the one
+          case where nothing else would be true: a schedule the studio cannot say
+          in words, which is one no picker built either.
+        -->
         <template #cell-cron="{ row: e }">
-          <code class="font-mono text-sm truncate">{{ e.cron }}</code>
+          <div class="min-w-0">
+            <!-- The sentence wraps rather than truncating: a schedule that fires
+                 at several named times is a long sentence, and half of one is
+                 the wrong half. Its title is the expression, so there is no
+                 tooltip left to carry the rest of the words. -->
+            <div v-if="describeCron(e.cron)" aria-label="When it fires" :title="e.cron ?? void 0" class="text-sm leading-snug">
+              {{ describeCron(e.cron) }}
+            </div>
+            <template v-else-if="e.cron">
+              <div aria-label="When it fires" class="text-sm truncate">
+                Custom schedule
+              </div>
+              <code aria-label="Cron expression" class="block font-mono text-xs text-muted-foreground truncate">{{ e.cron }}</code>
+            </template>
+            <div v-else aria-label="When it fires" class="text-sm text-muted-foreground truncate">
+              No schedule set
+            </div>
+          </div>
         </template>
 
         <template #cell-timezone="{ row: e }">
@@ -78,12 +114,20 @@ const columns = [
           </div>
         </template>
 
+        <!--
+          The two time cells carry the name their column header states, so each is
+          addressable by what it is rather than by how it is typeset. It is not the
+          accessible name a screen reader hears — the cell is a plain span, and
+          ARIA prohibits naming a generic element — that needs row and cell
+          semantics in the shared table (PO-233, and a gap in
+          `specs/accessibility.md`).
+        -->
         <template #cell-nextRun="{ row: e }">
-          <span class="text-sm tabular-nums">{{ formatRelative(e.nextRunAt) }}</span>
+          <span aria-label="Next run" class="text-sm tabular-nums">{{ formatRelative(e.nextRunAt) }}</span>
         </template>
 
         <template #cell-lastRun="{ row: e }">
-          <span class="text-sm tabular-nums text-muted-foreground">{{ formatRelative(e.lastRunAt) }}</span>
+          <span aria-label="Last run" class="text-sm tabular-nums text-muted-foreground">{{ formatRelative(e.lastRunAt) }}</span>
         </template>
 
         <template #cell-status="{ row: e }">

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

@@ -71,18 +71,18 @@ async function confirmDelete() {
   deleting.value = false;
   pendingDelete.value = null;
 }
-function formatDateTime(iso) {
+function formatDate(iso) {
   if (!iso) return "\u2014";
   try {
-    return new Date(iso).toLocaleString(void 0, { month: "short", day: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" });
+    return new Date(iso).toLocaleDateString(void 0, { month: "short", day: "2-digit", year: "numeric" });
   } catch {
     return iso;
   }
 }
 const columns = [
   { key: "key", label: "Key", sortable: true, sortGetter: (s) => s.key.toLowerCase() },
-  { key: "created", label: "Created", width: "160px", sortable: true, sortGetter: (s) => s.created_at },
-  { key: "updated", label: "Updated", width: "160px", sortable: true, sortGetter: (s) => s.updated_at },
+  { key: "created", label: "Created", width: "160px", sortable: true, sortGetter: (s) => s.created_at, searchGetter: () => "" },
+  { key: "updated", label: "Updated", width: "160px", sortable: true, sortGetter: (s) => s.updated_at, searchGetter: () => "" },
   { key: "actions", label: "", width: "40px", toggleable: false }
 ];
 </script>
@@ -136,6 +136,7 @@ const columns = [
                   <button
                     type="button"
                     class="absolute right-1 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded text-muted-foreground hover:text-foreground"
+                    :aria-label="showValue ? 'Hide value' : 'Show value'"
                     @click="showValue = !showValue"
                   >
                     <component :is="showValue ? EyeOff : Eye" :size="14" />
@@ -188,19 +189,40 @@ const columns = [
           </div>
         </template>
 
+        <!--
+          `time` carries the full timestamp the cell no longer prints, and the
+          label says which date this is and whose — the table is a div grid, so
+          a date read on its own is otherwise a number without a column.
+
+          A date the service did not send is a plain span: `time` promises a
+          machine-readable moment, either in `datetime` or as its own text, and
+          the dash is neither — `datetime=""` would be an empty promise instead
+          of none. The label stays either way, because it is what ties the cell
+          to its row and column.
+        -->
         <template #cell-created="{ row: s }">
-          <span class="text-sm tabular-nums text-muted-foreground">{{ formatDateTime(s.created_at) }}</span>
+          <component
+            :is="s.created_at ? 'time' : 'span'"
+            :datetime="s.created_at || void 0"
+            :aria-label="`Created for ${s.key}: ${formatDate(s.created_at)}`"
+            class="text-sm tabular-nums whitespace-nowrap text-muted-foreground"
+          >{{ formatDate(s.created_at) }}</component>
         </template>
 
         <template #cell-updated="{ row: s }">
-          <span class="text-sm tabular-nums text-muted-foreground">{{ formatDateTime(s.updated_at) }}</span>
+          <component
+            :is="s.updated_at ? 'time' : 'span'"
+            :datetime="s.updated_at || void 0"
+            :aria-label="`Updated for ${s.key}: ${formatDate(s.updated_at)}`"
+            class="text-sm tabular-nums whitespace-nowrap text-muted-foreground"
+          >{{ formatDate(s.updated_at) }}</component>
         </template>
 
         <template #cell-actions="{ row: s }">
           <div @click.stop>
             <DropdownMenu>
               <DropdownMenuTrigger as-child>
-                <Button variant="ghost" size="icon" class="size-7">
+                <Button variant="ghost" size="icon" class="size-7" :aria-label="`Actions for ${s.key}`">
                   <MoreHorizontal :size="14" />
                 </Button>
               </DropdownMenuTrigger>

package/dist/runtime/pages/integrations/templates/[slug].vue

@@ -20,8 +20,9 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import TemplateFlowPreview from "../../../components/Integrations/TemplateFlowPreview.vue";
-import NodeLogo from "../../../components/Integrations/NodeLogo.vue";
-import { TEMPLATE_CATEGORIES } from "../../../data/integrationTemplates";
+import NodeMark from "../../../components/Integrations/NodeMark.vue";
+import { templateCategoryLabel, templatePackageLabel } from "../../../data/integrationTemplates";
+import { describeCron } from "../../../utils/schedule";
 const SELECT_LATER = "__later__";
 const route = useRoute();
 const router = useRouter();
@@ -91,7 +92,10 @@ function firstSentence(text) {
 const TRIGGER_ICON = { schedule: Clock, webhook: Webhook, manual: Play, event: Zap };
 const triggerChips = computed(() => (tpl.value?.blob.triggers ?? []).map((t) => {
   let label = t.type.charAt(0).toUpperCase() + t.type.slice(1);
-  if (t.type === "schedule" && t.config?.cron) label = `Schedule \xB7 ${t.config.cron}${t.config.timezone ? ` (${t.config.timezone})` : ""}`;
+  if (t.type === "schedule" && t.config?.cron) {
+    const when = describeCron(String(t.config.cron)) ?? String(t.config.cron);
+    label = `Schedule \xB7 ${when}${t.config.timezone ? ` (${t.config.timezone})` : ""}`;
+  }
   if (t.type === "webhook" && t.config?.path) label = `Webhook \xB7 ${t.config.path}`;
   if (t.type === "manual") label = "Run on demand";
   return { key: t.id, icon: TRIGGER_ICON[t.type] ?? Zap, label };
@@ -104,7 +108,9 @@ const variables = computed(() => Object.entries(tpl.value?.blob.variables ?? {})
 const variableColumns = [
   { key: "key", label: "Variable", width: "minmax(0,180px)", sortable: true },
   { key: "description", label: "Description" },
-  { key: "default", label: "Default", width: "minmax(0,200px)" }
+  // Stored as `default` in the blob, but it *is* the value the workflow runs
+  // with — see `specs/workflow-variables.md`.
+  { key: "default", label: "Value", width: "minmax(0,200px)" }
 ];
 const credentialReqs = computed(() => reqs.value?.credentialTypes ?? []);
 const secretReqs = computed(() => reqs.value?.secrets ?? []);
@@ -126,17 +132,8 @@ const secretChecks = computed(() => {
 const missingSecrets = computed(() => secretChecks.value.filter((s) => !s.present).length);
 const missingCredentials = computed(() => credentialReqs.value.filter((c) => !ofType(c.slug).length).length);
 const setupReady = computed(() => missingSecrets.value === 0 && missingCredentials.value === 0);
-const packageLabel = computed(() => {
-  const pkg = tpl.value?.package;
-  if (!pkg) return null;
-  const tail = (pkg.name.split("/").pop() ?? pkg.name).replace(/^integrations-nodes-/, "");
-  if (tail === "core") return null;
-  return pkg.label ?? tail.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(" ");
-});
-const categoryLabel = computed(() => {
-  const cat = tpl.value?.category;
-  return TEMPLATE_CATEGORIES.find((c) => c.key === cat)?.label ?? (cat ? cat.charAt(0).toUpperCase() + cat.slice(1) : "");
-});
+const packageLabel = computed(() => tpl.value ? templatePackageLabel(tpl.value) : null);
+const categoryLabel = computed(() => templateCategoryLabel(tpl.value?.category ?? ""));
 const installOpen = ref(false);
 const installing = ref(false);
 const installError = ref(null);
@@ -207,7 +204,7 @@ function levelDot(level) {
             <Loader2 :size="18" class="animate-spin text-muted-foreground/50" />
           </div>
           <div class="absolute left-3 top-3 flex items-center gap-1.5">
-            <span class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
+            <span v-if="categoryLabel" class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
               {{ categoryLabel }}
             </span>
             <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
@@ -233,8 +230,13 @@ function levelDot(level) {
         <div class="grid gap-4 lg:grid-cols-3">
           <div class="lg:col-span-2 space-y-4">
             <!-- About: the registry description, rendered -->
-            <div v-if="descriptionHtml" class="rounded-lg border border-black/[0.06] bg-white p-4">
-              <h3 class="text-sm font-semibold mb-2">About this template</h3>
+            <div
+              v-if="descriptionHtml"
+              role="region"
+              aria-labelledby="tpl-about-heading"
+              class="rounded-lg border border-black/[0.06] bg-white p-4"
+            >
+              <h3 id="tpl-about-heading" class="text-sm font-semibold mb-2">About this template</h3>
               <div
                 class="text-sm leading-relaxed text-foreground/90 space-y-2 [&_h1]:text-sm [&_h1]:font-semibold [&_h2]:text-sm [&_h2]:font-semibold [&_h3]:text-sm [&_h3]:font-semibold [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:list-disc [&_ul]:pl-5 [&_li]:mt-1 [&_code]:rounded [&_code]:bg-slate-100 [&_code]:px-1 [&_code]:py-px [&_code]:font-mono [&_code]:text-[13px] [&_a]:text-primary [&_a]:underline [&_strong]:font-semibold"
                 v-html="descriptionHtml"
@@ -242,8 +244,12 @@ function levelDot(level) {
             </div>
 
             <!-- Step by step, humanized from the actual nodes -->
-            <div class="rounded-lg border border-black/[0.06] bg-white p-4">
-              <h3 class="text-sm font-semibold mb-3">Step by step</h3>
+            <div
+              role="region"
+              aria-labelledby="tpl-steps-heading"
+              class="rounded-lg border border-black/[0.06] bg-white p-4"
+            >
+              <h3 id="tpl-steps-heading" class="text-sm font-semibold mb-3">Step by step</h3>
               <ol v-if="steps.length" class="space-y-2.5">
                 <li
                   v-for="(step, i) in steps"
@@ -254,7 +260,7 @@ function levelDot(level) {
                     {{ i + 1 }}
                   </span>
                   <span class="flex size-7 shrink-0 items-center justify-center rounded-md bg-white ring-1 ring-black/[0.08]">
-                    <NodeLogo :manifest="step.manifest" :size="15" />
+                    <NodeMark :manifest="step.manifest" :size="15" :badge="false" />
                   </span>
                   <span class="min-w-0 pt-0.5">
                     <span class="block text-sm font-medium text-foreground">{{ step.label }}</span>
@@ -268,8 +274,17 @@ function levelDot(level) {
             </div>
 
             <!-- Variables the operator can tune after install -->
-            <div v-if="variables.length" class="rounded-lg border border-black/[0.06] bg-white p-4">
-              <h3 class="text-sm font-semibold mb-1">Variables you can tune</h3>
+            <!-- Named by its own heading rather than by a copy of it: two strings
+                 saying the same thing drift, and the test only holds one of them.
+                 `role` stays because this is a div — a bare <section> would be a
+                 region on its own, this one has to say so. -->
+            <div
+              v-if="variables.length"
+              role="region"
+              aria-labelledby="tpl-variables-heading"
+              class="rounded-lg border border-black/[0.06] bg-white p-4"
+            >
+              <h3 id="tpl-variables-heading" class="text-sm font-semibold mb-1">Variables you can tune</h3>
               <p class="text-sm text-muted-foreground mb-3">Set once after install, used across the workflow.</p>
               <DataTable
                 :data="variables"
@@ -296,7 +311,11 @@ function levelDot(level) {
           <!-- Setup rail -->
           <div class="space-y-3">
             <!-- Readiness + CTA -->
-            <div class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2.5">
+            <!-- `aria-label` deliberately, unlike the two panels below: this one
+                 shows no heading of its own, so there is no visible string to
+                 point `aria-labelledby` at. Copy this pattern only for a panel
+                 that genuinely has none. -->
+            <div role="group" aria-label="Setup readiness" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2.5">
               <div v-if="setupReady" class="flex items-center gap-1.5 text-sm text-emerald-700">
                 <CheckCircle2 :size="14" />
                 Everything is ready to install.
@@ -349,8 +368,11 @@ function levelDot(level) {
               </div>
             </div>
 
-            <div v-if="credentialReqs.length" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
-              <div class="flex items-center gap-1.5 text-mono text-muted-foreground">
+            <!-- Named by the label it shows, like the variables panel above: an
+                 invented name is a second string saying the same thing, and it is
+                 what a screen reader hears instead of what is written. -->
+            <div v-if="credentialReqs.length" role="group" aria-labelledby="tpl-credentials-label" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
+              <div id="tpl-credentials-label" class="flex items-center gap-1.5 text-mono text-muted-foreground">
                 <Key :size="11" /> Credentials
               </div>
               <ul class="space-y-1">
@@ -378,9 +400,9 @@ function levelDot(level) {
               <NuxtLink to="/integrations/credentials" class="block text-sm text-primary hover:underline">Manage credentials →</NuxtLink>
             </div>
 
-            <div v-if="secretChecks.length" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
+            <div v-if="secretChecks.length" role="group" aria-labelledby="tpl-secrets-label" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
               <div class="flex items-center gap-2">
-                <span class="text-mono text-muted-foreground">Required secrets</span>
+                <span id="tpl-secrets-label" class="text-mono text-muted-foreground">Required secrets</span>
                 <span v-if="missingSecrets > 0" class="flex items-center gap-1 text-sm text-amber-700">
                   <ShieldAlert :size="11" />
                   {{ missingSecrets }} missing
@@ -472,14 +494,14 @@ function levelDot(level) {
                 first, or install now and wire it up in the editor.
               </p>
               <div v-for="nodeId in nodesFor(req.usedBy)" v-else :key="nodeId" class="space-y-1">
-                <Label class="text-xs text-muted-foreground font-mono">node {{ nodeId }}</Label>
+                <Label :for="`tpl-cred-${nodeId}`" class="text-xs text-muted-foreground font-mono">node {{ nodeId }}</Label>
                 <Select
                   :model-value="bindings[nodeId] ?? SELECT_LATER"
                   @update:model-value="(v2) => {
   bindings[nodeId] = v2 ?? SELECT_LATER;
 }"
                 >
-                  <SelectTrigger class="bg-white">
+                  <SelectTrigger :id="`tpl-cred-${nodeId}`" class="bg-white">
                     <SelectValue placeholder="Select later" />
                   </SelectTrigger>
                   <SelectContent>