@revenexx/studio-integrations 0.5.0 → 0.6.0

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

@@ -18,6 +18,7 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
+import { resolveDisplayName } from "../../utils/localize";
 const props = defineProps({
   open: { type: Boolean, required: true },
   variables: { type: Object, required: true }
@@ -89,9 +90,7 @@ function applyJsonDraft(key, type) {
   }
 }
 function descriptionText(v) {
-  const d = v.description;
-  if (!d) return "";
-  return typeof d === "string" ? d : d.en ?? Object.values(d)[0] ?? "";
+  return resolveDisplayName(v.description);
 }
 function writeDescription(key, text) {
   const cur = props.variables[key];
@@ -148,6 +147,8 @@ async function copyUsage(key) {
         <div
           v-for="[key, v] in entries"
           :key="key"
+          role="group"
+          :aria-label="`Variable ${key}`"
           class="rounded-lg border border-black/[0.06] bg-white p-3"
         >
           <div class="flex items-center gap-2">
@@ -161,13 +162,6 @@ async function copyUsage(key) {
               <Copy :size="12" />
             </button>
             <div class="flex-1" />
-            <label class="flex items-center gap-1.5 text-sm text-muted-foreground">
-              Required
-              <Switch
-                :model-value="v.required === true"
-                @update:model-value="(val) => patchVar(key, { required: val || void 0 })"
-              />
-            </label>
             <button
               type="button"
               class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
@@ -179,10 +173,15 @@ async function copyUsage(key) {
           </div>
 
           <div class="mt-2 grid gap-2 sm:grid-cols-[8rem_1fr]">
+            <!-- One row per variable, so every id carries its key — otherwise
+                 the labels of the second row point at the first row's fields. -->
             <div class="space-y-1">
-              <Label class="text-mono text-muted-foreground">Type</Label>
+              <Label :for="`var-${key}-type`" class="text-mono text-muted-foreground">Type</Label>
               <Select :model-value="v.type" @update:model-value="(t) => changeType(key, t)">
-                <SelectTrigger class="h-8 bg-white text-sm">
+                <!-- Both: the `id` lets the visible Label's `for` resolve, and the
+                     `aria-label` names the trigger without relying on an engine
+                     naming a button from a <label> — see the sweep's docblock. -->
+                <SelectTrigger :id="`var-${key}-type`" aria-label="Type" class="h-8 bg-white text-sm">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -192,31 +191,43 @@ async function copyUsage(key) {
             </div>
 
             <div class="space-y-1">
-              <Label class="text-mono text-muted-foreground">
-                Default{{ v.required ? " (ignored while required)" : "" }}
-              </Label>
+              <!-- "Value", not "Default": PO-206. The `for`/`id` still name the
+                   blob field, which is called `default` and stays that way. -->
+              <Label :for="`var-${key}-default`" class="text-mono text-muted-foreground">Value</Label>
 
+              <!-- Only one of these renders, so they share the one `id` the Label
+                   points at. The labelable ones take their name from that Label —
+                   one string, and renaming it turns the tests red instead of
+                   leaving them green against changed copy. -->
               <Input
                 v-if="v.type === 'string'"
+                :id="`var-${key}-default`"
                 :model-value="typeof v.default === 'string' ? v.default : ''"
                 class="h-8 bg-white text-sm"
                 @update:model-value="(val) => patchVar(key, { default: String(val) })"
               />
               <Input
                 v-else-if="v.type === 'number'"
+                :id="`var-${key}-default`"
                 type="number"
                 :model-value="typeof v.default === 'number' ? v.default : ''"
                 class="h-8 bg-white text-sm"
                 @update:model-value="(val) => patchVar(key, { default: val === '' ? void 0 : Number(val) })"
               />
               <div v-else-if="v.type === 'boolean'" class="flex h-8 items-center">
+                <!-- Named out loud: a Switch is a `button role="switch"`, and
+                     HTML-AAM does not name a button from a <label> — Chromium
+                     does, other engines need not. -->
                 <Switch
+                  :id="`var-${key}-default`"
                   :model-value="v.default === true"
+                  aria-label="Value"
                   @update:model-value="(val) => patchVar(key, { default: val })"
                 />
               </div>
               <div v-else>
                 <textarea
+                  :id="`var-${key}-default`"
                   :value="jsonDrafts[key] ?? ''"
                   rows="3"
                   spellcheck="false"
@@ -232,8 +243,9 @@ async function copyUsage(key) {
           </div>
 
           <div class="mt-2 space-y-1">
-            <Label class="text-mono text-muted-foreground">Description</Label>
+            <Label :for="`var-${key}-desc`" class="text-mono text-muted-foreground">Description</Label>
             <Input
+              :id="`var-${key}-desc`"
               :model-value="descriptionText(v)"
               class="h-8 bg-white text-sm"
               placeholder="What this variable is for"
@@ -244,9 +256,10 @@ async function copyUsage(key) {
 
         <!-- Add row -->
         <div class="rounded-lg border border-dashed border-black/[0.12] p-3">
-          <Label class="text-mono text-muted-foreground">New variable</Label>
+          <Label for="var-new-key" class="text-mono text-muted-foreground">New variable</Label>
           <div class="mt-1 flex items-center gap-2">
             <Input
+              id="var-new-key"
               v-model="newKey"
               class="h-8 flex-1 bg-white font-mono text-sm"
               placeholder="e.g. base_url"

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

@@ -1,6 +1,7 @@
 <script setup>
 import { RefreshCircle as Loader2, MenuDots as MoreHorizontal } from "#solar-icons";
 import { toast } from "vue-sonner";
+import { apiValidationIssues } from "../../utils/apiError";
 import WorkflowDuplicateDialog from "./WorkflowDuplicateDialog.vue";
 import WorkflowIconView from "./WorkflowIconView.vue";
 import { Layers } from "#solar-icons";
@@ -48,7 +49,7 @@ watch(groupByTags, (on) => {
   } catch {
   }
 });
-const { runs, load: loadRuns, list: listRuns } = useIntegrationsRuns();
+const { runs, loaded: runsLoaded, load: loadRuns, list: listRuns } = useIntegrationsRuns();
 onMounted(() => {
   void loadRuns();
 });
@@ -86,6 +87,18 @@ async function confirmDelete() {
     deleting.value = false;
   }
 }
+async function onToggleActive(wf) {
+  try {
+    await toggleActive(wf.id);
+  } catch (e) {
+    const issues = apiValidationIssues(e);
+    if (issues.length) {
+      toast.error(`Can\u2019t activate \u201C${wf.name}\u201D \u2014 ${issues.length} validation issue${issues.length === 1 ? "" : "s"} to fix. Open the editor to resolve them.`);
+      return;
+    }
+    toast.error(e?.message ?? "Could not change the workflow status.");
+  }
+}
 function statusBadge(wf) {
   if (!wf.active) return { label: "Paused", class: "bg-slate-100 text-slate-700 border-slate-200" };
   if (wf.revision === 0) return { label: "Draft", class: "bg-amber-500/10 text-amber-700 border-amber-500/20" };
@@ -238,14 +251,28 @@ const columns = [
       </div>
     </template>
 
+    <!-- The badge word alone ("Paused", "Failed") also matches a column header
+         and the neighbouring column's own words, so each badge carries its
+         workflow's name — the rows are plain divs with nothing else to tie a
+         value to the workflow it belongs to. -->
     <template #cell-status="{ row: wf }">
-      <Badge variant="outline" :class="['border text-xs font-medium uppercase', statusBadge(wf).class]">
+      <Badge
+        variant="outline"
+        :class="['border text-xs font-medium uppercase', statusBadge(wf).class]"
+        :aria-label="`${wf.name}: ${statusBadge(wf).label}`"
+      >
         {{ statusBadge(wf).label }}
       </Badge>
     </template>
 
+    <!-- A response without a build state renders `—`; naming that would announce
+         "<name> build: —", which claims nothing in more words. No state, no name. -->
     <template #cell-build="{ row: wf }">
-      <Badge variant="outline" :class="['border text-xs font-medium uppercase', buildState(wf).class]">
+      <Badge
+        variant="outline"
+        :class="['border text-xs font-medium uppercase', buildState(wf).class]"
+        :aria-label="wf.buildStatus ? `${wf.name} build: ${buildState(wf).label}` : void 0"
+      >
         {{ buildState(wf).label }}
       </Badge>
     </template>
@@ -273,14 +300,25 @@ const columns = [
 
     <template #cell-lastRun="{ row: wf }">
       <div v-if="lastRunFor(wf.id)" class="flex items-center gap-2 min-w-0">
-        <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0', runBadge(lastRunFor(wf.id).status).class]">
+        <Badge
+          variant="outline"
+          :class="['border text-xs font-medium uppercase shrink-0', runBadge(lastRunFor(wf.id).status).class]"
+          :aria-label="`${wf.name} last run: ${runBadge(lastRunFor(wf.id).status).label}`"
+        >
           {{ runBadge(lastRunFor(wf.id).status).label }}
         </Badge>
         <span class="text-sm tabular-nums text-muted-foreground truncate">
           {{ formatDateTime(lastRunFor(wf.id).startedAt) }}
         </span>
       </div>
-      <span v-else class="text-sm text-muted-foreground">—</span>
+      <!-- Runs arrive after the rows do, so until they are in, "never run" is
+           not known — the bare `—` says nothing, and that is the honest answer.
+           The name is only claimed once there is something to claim it from. -->
+      <span
+        v-else
+        class="text-sm text-muted-foreground"
+        :aria-label="runsLoaded ? `${wf.name} last run: Never run` : void 0"
+      >—</span>
     </template>
 
     <template #cell-updated="{ row: wf }">
@@ -293,7 +331,9 @@ const columns = [
       <div @click.stop>
         <DropdownMenu>
           <DropdownMenuTrigger as-child>
-            <Button variant="ghost" size="icon" class="size-7">
+            <!-- Icon-only, so it needs a name of its own — the rows are plain
+                 divs, which leaves nothing else to address this button by. -->
+            <Button variant="ghost" size="icon" class="size-7" :aria-label="`Actions for ${wf.name}`">
               <MoreHorizontal :size="14" />
             </Button>
           </DropdownMenuTrigger>
@@ -306,7 +346,7 @@ const columns = [
             <DropdownMenuItem @select="askDuplicate(wf)">
               Duplicate
             </DropdownMenuItem>
-            <DropdownMenuItem @select="toggleActive(wf.id)">
+            <DropdownMenuItem @select="onToggleActive(wf)">
               {{ wf.active ? "Pause" : "Activate" }}
             </DropdownMenuItem>
             <DropdownMenuSeparator />

package/dist/runtime/composables/useCredentialTypes.js

@@ -1,10 +1,12 @@
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
+import { useLoadGate } from "./useLoadGate.js";
 export function useCredentialTypes() {
   const types = useState("integrations.credentialTypes", () => []);
   const loading = useState("integrations.credentialTypes.loading", () => false);
   const error = useState("integrations.credentialTypes.error", () => null);
   const loaded = useState("integrations.credentialTypes.loaded", () => false);
+  const gate = useLoadGate("integrations.credentialTypes", { loading, loaded });
   const api = useIntegrationsApi();
   function normalize(res) {
     const obj = res;
@@ -17,9 +19,7 @@ export function useCredentialTypes() {
     return e?.message ?? fallback;
   }
   async function load(force = false) {
-    if (loading.value) return types.value;
-    if (loaded.value && !force) return types.value;
-    loading.value = true;
+    if (!await gate.claim(force)) return types.value;
     error.value = null;
     try {
       types.value = normalize(await api.get("/credential-types"));
@@ -27,7 +27,7 @@ export function useCredentialTypes() {
     } catch (e) {
       error.value = captureError(e, "Could not load credential types.");
     } finally {
-      loading.value = false;
+      gate.release();
     }
     return types.value;
   }

package/dist/runtime/composables/useIntegrationsAudit.js

@@ -1,11 +1,13 @@
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
+import { useLoadGate } from "./useLoadGate.js";
 export function useIntegrationsAudit() {
   const api = useIntegrationsApi();
   const entries = useState("int.audit.entries", () => []);
   const nextCursor = useState("int.audit.cursor", () => null);
   const loading = useState("int.audit.loading", () => false);
   const error = useState("int.audit.error", () => null);
+  const gate = useLoadGate("int.audit", { loading });
   function qs(filters, cursor) {
     const p = new URLSearchParams();
     if (filters.sub) p.set("sub", filters.sub);
@@ -16,8 +18,7 @@ export function useIntegrationsAudit() {
     return p.toString();
   }
   async function load(filters = {}, append = false) {
-    if (loading.value) return;
-    loading.value = true;
+    if (!await gate.claim()) return;
     error.value = null;
     try {
       const res = await api.get(
@@ -29,7 +30,7 @@ export function useIntegrationsAudit() {
     } catch (e) {
       error.value = e instanceof IntegrationsApiError ? e.message : e?.message ?? "Could not load the audit log.";
     } finally {
-      loading.value = false;
+      gate.release();
     }
   }
   function loadMore(filters = {}) {

package/dist/runtime/composables/useIntegrationsCredentials.js

@@ -1,11 +1,13 @@
 import { computed } from "vue";
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
+import { useLoadGate } from "./useLoadGate.js";
 export function useIntegrationsCredentials() {
   const credentials = useState("integrations.credentials", () => []);
   const loading = useState("integrations.credentials.loading", () => false);
   const error = useState("integrations.credentials.error", () => null);
   const loaded = useState("integrations.credentials.loaded", () => false);
+  const gate = useLoadGate("integrations.credentials", { loading, loaded });
   const api = useIntegrationsApi();
   function normalize(res) {
     const obj = res;
@@ -21,9 +23,7 @@ export function useIntegrationsCredentials() {
     return e?.message ?? fallback;
   }
   async function load(force = false) {
-    if (loading.value) return credentials.value;
-    if (loaded.value && !force) return credentials.value;
-    loading.value = true;
+    if (!await gate.claim(force)) return credentials.value;
     error.value = null;
     try {
       credentials.value = normalize(await api.get("/credentials"));
@@ -31,7 +31,7 @@ export function useIntegrationsCredentials() {
     } catch (e) {
       error.value = captureError(e, "Could not load credentials.");
     } finally {
-      loading.value = false;
+      gate.release();
     }
     return credentials.value;
   }

package/dist/runtime/composables/useIntegrationsDeadLetters.js

@@ -1,5 +1,6 @@
 import { computed } from "vue";
 import { useIntegrationsApi } from "./integrationsApi.js";
+import { useLoadGate } from "./useLoadGate.js";
 export function useIntegrationsDeadLetters() {
   const api = useIntegrationsApi();
   async function list(workflowId, opts = {}) {
@@ -17,15 +18,14 @@ export function useIntegrationsDeadLetters() {
   }
   const replay = (id) => api.post(`/dead-letters/${id}/replay`, {});
   const discard = (id) => api.post(`/dead-letters/${id}/discard`, {});
-  const { workflows, load: loadWorkflows } = useIntegrationsWorkflows();
+  const { workflows, load: loadWorkflows, loaded: workflowsLoaded } = useIntegrationsWorkflows();
   const globalItems = useState("integrations.deadletters.global", () => []);
   const globalLoading = useState("integrations.deadletters.global.loading", () => false);
   const globalLoaded = useState("integrations.deadletters.global.loaded", () => false);
+  const gate = useLoadGate("integrations.deadletters.global", { loading: globalLoading, loaded: globalLoaded });
   const pendingCount = computed(() => globalItems.value.filter((i) => i.status === "pending").length);
   async function loadGlobal(force = false) {
-    if (globalLoading.value) return globalItems.value;
-    if (globalLoaded.value && !force) return globalItems.value;
-    globalLoading.value = true;
+    if (!await gate.claim(force)) return globalItems.value;
     try {
       await loadWorkflows();
       const MAX_PAGES = 20;
@@ -41,10 +41,11 @@ export function useIntegrationsDeadLetters() {
         return out;
       }));
       globalItems.value = per.flatMap((p) => p.status === "fulfilled" ? p.value : []).sort((a, b) => new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime());
-      globalLoaded.value = true;
+      globalLoaded.value = workflowsLoaded.value && per.every((p) => p.status === "fulfilled");
     } finally {
-      globalLoading.value = false;
+      gate.release();
     }
+    return globalItems.value;
   }
   return { list, replay, discard, loadGlobal, globalItems, globalLoading, pendingCount };
 }

package/dist/runtime/composables/useIntegrationsNodes.js

@@ -2,15 +2,15 @@ import { applyNodeCatalog, findManifest } from "../data/integrationNodeCatalog.j
 import { resolveLocalized } from "../utils/localize.js";
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
+import { useLoadGate } from "./useLoadGate.js";
 export function useIntegrationsNodes() {
   const loading = useState("integrations.nodes.loading", () => false);
   const error = useState("integrations.nodes.error", () => null);
   const loaded = useState("integrations.nodes.loaded", () => false);
+  const gate = useLoadGate("integrations.nodes", { loading, loaded });
   const api = useIntegrationsApi();
   async function load(force = false) {
-    if (loading.value) return;
-    if (loaded.value && !force) return;
-    loading.value = true;
+    if (!await gate.claim(force)) return;
     error.value = null;
     try {
       const res = await api.get("/nodes");
@@ -29,7 +29,7 @@ export function useIntegrationsNodes() {
       applyNodeCatalog([]);
       error.value = e instanceof IntegrationsApiError ? e.message : e?.message ?? "Could not load nodes.";
     } finally {
-      loading.value = false;
+      gate.release();
     }
   }
   return { loading, error, loaded, load, findManifest, resolveLocalized };

package/dist/runtime/composables/useIntegrationsRuns.js

@@ -1,6 +1,7 @@
 import { computed } from "vue";
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
+import { useLoadGate } from "./useLoadGate.js";
 function mapStatus(status) {
   switch (status) {
     case "completed":
@@ -29,9 +30,10 @@ export function useIntegrationsRuns() {
   const error = useState("integrations.runs.error", () => null);
   const loaded = useState("integrations.runs.loaded", () => false);
   const reconciling = useState("integrations.runs.reconciling", () => false);
+  const gate = useLoadGate("integrations.runs", { loading, loaded });
   const SYNC_LIMIT = 5;
   const api = useIntegrationsApi();
-  const { workflows, load: loadWorkflows } = useIntegrationsWorkflows();
+  const { workflows, load: loadWorkflows, loaded: workflowsLoaded } = useIntegrationsWorkflows();
   function mapRun(r, workflowName) {
     const startedMs = r.started_at ? new Date(r.started_at).getTime() : null;
     const finishedMs = r.completed_at ? new Date(r.completed_at).getTime() : null;
@@ -45,15 +47,18 @@ export function useIntegrationsRuns() {
       triggerType: "manual",
       startedAt: r.started_at ?? "",
       finishedAt: r.completed_at ?? null,
+      // The list carries the reason a run failed; dropping it here was why every
+      // failure read the same wherever the list is shown. An empty string is not
+      // a reason — it has to fall through to whatever the surface says instead,
+      // or it renders as a blank line where the sentence belongs.
+      errorMessage: r.error || void 0,
       // Derived from the timestamps — the list payload carries no duration.
       durationMs: startedMs != null && finishedMs != null && finishedMs >= startedMs ? finishedMs - startedMs : null,
       steps: []
     };
   }
   async function load(force = false) {
-    if (loading.value) return runs.value;
-    if (loaded.value && !force) return runs.value;
-    loading.value = true;
+    if (!await gate.claim(force)) return runs.value;
     error.value = null;
     try {
       await loadWorkflows();
@@ -92,11 +97,11 @@ export function useIntegrationsRuns() {
           reconciling.value = false;
         }
       }
-      loaded.value = true;
+      loaded.value = workflowsLoaded.value && perWorkflow.every((p) => p.status === "fulfilled");
     } catch (e) {
       error.value = e instanceof IntegrationsApiError ? e.message : e?.message ?? "Could not load runs.";
     } finally {
-      loading.value = false;
+      gate.release();
     }
     return runs.value;
   }

package/dist/runtime/composables/useIntegrationsSchedules.d.ts

@@ -4,6 +4,10 @@ import type { ScheduleEntry } from '../types/integrations.js';
  * sourced from the real triggers sub-resource (useIntegrationsTriggers).
  * Next/last-run timestamps are mocked deterministically (no telemetry
  * endpoint yet).
+ *
+ * Unordered on purpose: the page's table sorts, by its own default and by
+ * whichever column the operator clicks, so an order established here would be
+ * replaced before anyone saw it.
  */
 export declare function useIntegrationsSchedules(): {
     entries: import("vue").ComputedRef<ScheduleEntry[]>;

package/dist/runtime/composables/useIntegrationsSchedules.js

@@ -1,4 +1,5 @@
 import { computed } from "vue";
+import { scheduleTimezone } from "../utils/schedule.js";
 export function useIntegrationsSchedules() {
   const { all, loading, loadAll } = useIntegrationsTriggers();
   const entries = computed(
@@ -10,13 +11,19 @@ export function useIntegrationsSchedules() {
         workflowId: t.workflow_id,
         workflowName: t.workflowName,
         triggerId,
-        cron: String(cfg.cron ?? "* * * * *"),
-        timezone: String(cfg.timezone ?? "UTC"),
+        // Never invented: a trigger without an expression says so on the page.
+        // Standing in `* * * * *` for it would read as "every minute", and with
+        // the expression no longer on screen that guess would be invisible.
+        cron: typeof cfg.cron === "string" && cfg.cron.trim() !== "" ? cfg.cron : null,
+        // The schedule's own zone, or the platform's default where it has none —
+        // from the same helper the trigger settings read, so one schedule cannot
+        // be shown in two zones on two screens.
+        timezone: scheduleTimezone(cfg.timezone),
         active: t.active,
         nextRunAt: t.active ? mockNextRun(t.workflow_id, triggerId) : null,
         lastRunAt: t.active ? mockLastRun(t.workflow_id, triggerId) : null
       };
-    }).sort((a, b) => a.cron.localeCompare(b.cron))
+    })
   );
   const total = computed(() => entries.value.length);
   const activeCount = computed(() => entries.value.filter((e) => e.active).length);

package/dist/runtime/composables/useIntegrationsSecrets.js

@@ -1,32 +1,35 @@
 import { computed } from "vue";
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
+import { useLoadGate } from "./useLoadGate.js";
 const KEY_PATTERN = /^[A-Z0-9_]+$/;
 export function useIntegrationsSecrets() {
   const secrets = useState("integrations.secrets", () => []);
   const loading = useState("integrations.secrets.loading", () => false);
   const error = useState("integrations.secrets.error", () => null);
   const loaded = useState("integrations.secrets.loaded", () => false);
+  const gate = useLoadGate("integrations.secrets", { loading, loaded });
   const api = useIntegrationsApi();
   function isValidKey(key) {
     return KEY_PATTERN.test(key);
   }
   function normalize(res) {
     const obj = res;
+    if (Array.isArray(obj?.data)) return obj.data.map(toRecord);
+    if (Array.isArray(obj?.secrets)) return obj.secrets.map(toRecord);
     if (Array.isArray(obj?.keys)) return obj.keys.map((key) => ({ key, created_at: "", updated_at: "" }));
-    if (Array.isArray(obj?.data)) return obj.data;
-    if (Array.isArray(obj?.secrets)) return obj.secrets;
-    if (Array.isArray(res)) return res;
+    if (Array.isArray(res)) return res.map(toRecord);
     return [];
   }
+  function toRecord(r) {
+    return { key: r.key ?? "", created_at: r.created_at ?? "", updated_at: r.updated_at ?? "" };
+  }
   function captureError(e, fallback) {
     if (e instanceof IntegrationsApiError) return e.message;
     return e?.message ?? fallback;
   }
   async function load(force = false) {
-    if (loading.value) return secrets.value;
-    if (loaded.value && !force) return secrets.value;
-    loading.value = true;
+    if (!await gate.claim(force)) return secrets.value;
     error.value = null;
     try {
       secrets.value = normalize(await api.get("/secrets"));
@@ -34,7 +37,7 @@ export function useIntegrationsSecrets() {
     } catch (e) {
       error.value = captureError(e, "Could not load secrets.");
     } finally {
-      loading.value = false;
+      gate.release();
     }
     return secrets.value;
   }

package/dist/runtime/composables/useIntegrationsTemplates.d.ts

@@ -5,7 +5,7 @@ export declare function useIntegrationsTemplates(): {
     loading: any;
     error: any;
     total: import("vue").ComputedRef<any>;
-    popular: import("vue").ComputedRef<any[]>;
+    startingPoints: import("vue").ComputedRef<any>;
     load: (force?: boolean) => Promise<WorkflowTemplate[]>;
     list: () => WorkflowTemplate[];
     get: (slug: string) => WorkflowTemplate | null;

package/dist/runtime/composables/useIntegrationsTemplates.js

@@ -2,6 +2,7 @@ import { computed } from "vue";
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
 import { resolveLocalized } from "../utils/localize.js";
+import { useLoadGate } from "./useLoadGate.js";
 const BLOB_VERSION = "v0-draft";
 const INDUSTRY_VALUES = ["mechanical-engineering", "chemicals", "wholesale", "manufacturing", "retail", "any"];
 function plainExcerpt(md) {
@@ -34,14 +35,18 @@ function mapListItem(api) {
     triggerTypes: api.triggerTypes ?? [],
     images: api.images ?? [],
     package: api.package ? { name: api.package.name, label: api.package.label ?? null } : null,
-    category: api.category ?? "sync",
+    // The registry documents this field as free-form and returns it as nullable,
+    // so "no category" is a state and not an error. It used to become `sync` —
+    // a category nothing publishes, so the studio was badging a template with a
+    // name no publisher had chosen. Empty travels instead, and every surface that
+    // draws a chip leaves it out rather than filling it in (PO-243).
+    category: api.category || "",
     industries: mapIndustries(api.industries),
     vendors: api.vendors ?? [],
     requiredSecrets: [],
     level: api.level ?? "beginner",
     outline: [],
     nodeCount: 0,
-    installs: 0,
     publisher: publisherFor(api.slug, api.vendors ?? []),
     updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
     blob: emptyBlob(resolveLocalized(api.name)),
@@ -83,6 +88,7 @@ export function useIntegrationsTemplates() {
   const loaded = useState("integrations.templates.loaded", () => false);
   const loading = useState("integrations.templates.loading", () => false);
   const error = useState("integrations.templates.error", () => null);
+  const gate = useLoadGate("integrations.templates", { loading, loaded });
   const api = useIntegrationsApi();
   function unwrap(res) {
     return res?.data ?? res;
@@ -91,9 +97,7 @@ export function useIntegrationsTemplates() {
     return e instanceof IntegrationsApiError ? e.message : e?.message ?? fallback;
   }
   async function load(force = false) {
-    if (loading.value) return templates.value;
-    if (loaded.value && !force) return templates.value;
-    loading.value = true;
+    if (!await gate.claim(force)) return templates.value;
     error.value = null;
     try {
       const list2 = unwrap(await api.get("/templates")) ?? [];
@@ -104,7 +108,7 @@ export function useIntegrationsTemplates() {
       templates.value = [];
       loaded.value = true;
     } finally {
-      loading.value = false;
+      gate.release();
     }
     return templates.value;
   }
@@ -165,6 +169,6 @@ export function useIntegrationsTemplates() {
     return instantiate(slug);
   }
   const total = computed(() => templates.value.length);
-  const popular = computed(() => [...templates.value].sort((a, b) => b.installs - a.installs).slice(0, 4));
-  return { templates, loaded, loading, error, total, popular, load, list, get, fetchDetail, ensureDetails, requirements, instantiate, install };
+  const startingPoints = computed(() => templates.value.slice(0, 4));
+  return { templates, loaded, loading, error, total, startingPoints, load, list, get, fetchDetail, ensureDetails, requirements, instantiate, install };
 }