@revenexx/studio-integrations 0.5.1 → 0.7.0

package/dist/runtime/i18n/translate.d.ts

@@ -0,0 +1,83 @@
+/**
+ * The studio's own interface strings, and the function that reads one.
+ *
+ * **Why the module carries a catalogue at all.** `@revenexx/studio-integrations`
+ * is published. It renders inside the cockpit, which has vue-i18n and a
+ * catalogue of its own, and it renders inside the playground host and any other
+ * consumer, which have neither. Its chrome — every heading, button, empty state
+ * and toast in `runtime/` — is the module's text, not the host's, so the module
+ * ships it. A host cannot be asked to carry `integration.*` keys it has never
+ * seen, and the module cannot reach into a catalogue it does not own.
+ *
+ * **Why not vue-i18n.** Adding it here would either duplicate the host's
+ * instance or force every consumer to install it. The resolution rules a flat
+ * catalogue actually needs are small — a fallback chain, `{named}`
+ * interpolation and the `singular | plural` pipe — and they are below, tested,
+ * in eighty lines. The message format is deliberately vue-i18n's, so the
+ * catalogue can be handed to the cockpit's tooling (or to a translator working
+ * from it) without a conversion step.
+ *
+ * **Where the language comes from.** {@link studioLocale}, which is the seam
+ * PO-229 built for the API's bilingual text — the host sets it once with
+ * `useIntegrationsLocale().setLocale()` or `studioIntegrations.locale`, and both
+ * halves of a screen follow the same value. Reading it here is also what makes
+ * the chrome reactive: every call site is inside a template or a `computed()`,
+ * so each becomes a subscriber to the language without a line changing.
+ */
+/** The languages the module ships. Anything else falls back to English. */
+export declare const MESSAGES: Readonly<Record<string, Record<string, string>>>;
+/** The language every key is guaranteed to exist in. */
+export declare const FALLBACK_LOCALE = "en";
+/** Interpolation values for a message with `{placeholders}`. */
+export type TranslateNamed = Record<string, unknown>;
+/**
+ * The call shapes a caller may use — vue-i18n's, so that moving a key between
+ * this catalogue and the cockpit's is a copy and not a rewrite.
+ */
+export interface Translate {
+    (key: string): string;
+    (key: string, named: TranslateNamed): string;
+    (key: string, plural: number): string;
+    (key: string, plural: number, named: TranslateNamed): string;
+}
+/**
+ * Which catalogue answers for a BCP-47 tag: the exact tag, then the language
+ * without its region (so `de-CH` reads `de` rather than English), then English.
+ */
+export declare function messagesFor(locale: string): Record<string, string>;
+/**
+ * The raw message for a key, or `undefined`.
+ *
+ * An empty value counts as missing — a translator clearing a cell must not
+ * blank the UI, it must fall through to English.
+ */
+export declare function lookup(key: string, locale: string): string | undefined;
+/** Replace `{name}` with the value given for it. An unknown name is left alone. */
+export declare function interpolate(message: string, values: TranslateNamed): string;
+/**
+ * Pick a branch out of `singular | plural`.
+ *
+ * vue-i18n's default rule, which is what the catalogue is written against: two
+ * branches select on `count === 1`, three add a zero branch. Both languages the
+ * module ships have two plural forms; the third branch exists so a catalogue
+ * that wants "no runs / one run / n runs" can say so without new machinery.
+ *
+ * A message without a pipe is returned whole — passing a count to a key that
+ * has no plural form is harmless, the reverse is not.
+ */
+export declare function selectPlural(message: string, count: number): string;
+/**
+ * Resolve a key in a named language. `translate` is this, in the studio's.
+ *
+ * A key with no message anywhere is returned unchanged, which is the same
+ * promise the host bridge in `@revenexx/studio-shared` makes: a missing key is
+ * a visible defect on screen and never a blank, and never a crash.
+ */
+export declare function translateIn(locale: string, key: string, ...args: unknown[]): string;
+/**
+ * Translate a key in the language the host set.
+ *
+ * Reads {@link studioLocale} on every call rather than closing over it, so a
+ * `computed()` that translated once re-runs on a language switch.
+ */
+export declare const translate: Translate;

package/dist/runtime/i18n/translate.js

@@ -0,0 +1,41 @@
+import { studioLocale } from "../utils/localize.js";
+import de from "./messages/de.json" with { type: "json" };
+import en from "./messages/en.json" with { type: "json" };
+export const MESSAGES = Object.freeze({
+  en,
+  de
+});
+export const FALLBACK_LOCALE = "en";
+export function messagesFor(locale) {
+  const wanted = (locale || "").toLowerCase();
+  const base = wanted.split("-")[0];
+  return MESSAGES[wanted] ?? MESSAGES[base] ?? MESSAGES[FALLBACK_LOCALE];
+}
+export function lookup(key, locale) {
+  const primary = messagesFor(locale)[key];
+  if (primary) return primary;
+  const fallback = MESSAGES[FALLBACK_LOCALE][key];
+  return fallback || void 0;
+}
+export function interpolate(message, values) {
+  if (!message.includes("{")) return message;
+  return message.replace(/\{(\w+)\}/g, (whole, name) => name in values ? String(values[name]) : whole);
+}
+export function selectPlural(message, count) {
+  if (!message.includes("|")) return message;
+  const branches = message.split("|").map((part) => part.trim());
+  if (branches.length === 2) return branches[count === 1 ? 0 : 1];
+  if (branches.length >= 3) return branches[count === 0 ? 0 : count === 1 ? 1 : 2];
+  return branches[0];
+}
+export function translateIn(locale, key, ...args) {
+  const message = lookup(key, locale);
+  if (message === void 0) return key;
+  const [first, second] = args;
+  const count = typeof first === "number" ? first : void 0;
+  const named = typeof first === "object" && first !== null ? first : second;
+  const branch = count === void 0 ? message : selectPlural(message, count);
+  const values = count === void 0 ? named ?? {} : { n: count, count, ...named ?? {} };
+  return interpolate(branch, values);
+}
+export const translate = ((key, ...args) => translateIn(studioLocale(), key, ...args));

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

@@ -11,7 +11,8 @@ import {
 } from "#solar-icons";
 import { Badge, Button } from "@revenexx/studio";
 import { toast } from "vue-sonner";
-useHead({ title: "Audit Log \xB7 Integration Studio" });
+const t = useIntegrationsT();
+useHead({ title: () => t("integration.audit.head.title") });
 const { entries, loading, error, hasMore, load, loadMore } = useIntegrationsAudit();
 const resourceTypes = ["credential", "secret", "workflow", "trigger", "workflow_run"];
 const actions = ["create", "update", "delete", "run.started", "run.finished", "run.failed"];
@@ -25,11 +26,28 @@ function actionTone(a) {
   if (a === "delete" || a === "run.failed") return "bg-rose-500/10 text-rose-700 border-rose-500/20";
   return "bg-violet-500/10 text-violet-700 border-violet-500/20";
 }
+const resourceTypeKeys = {
+  credential: "integration.audit.resourceType.credential",
+  secret: "integration.audit.resourceType.secret",
+  workflow: "integration.audit.resourceType.workflow",
+  trigger: "integration.audit.resourceType.trigger",
+  workflow_run: "integration.audit.resourceType.workflowRun"
+};
+const actionKeys = {
+  "create": "integration.audit.action.create",
+  "update": "integration.audit.action.update",
+  "delete": "integration.audit.action.delete",
+  "run.started": "integration.audit.action.runStarted",
+  "run.finished": "integration.audit.action.runFinished",
+  "run.failed": "integration.audit.action.runFailed"
+};
 function prettyAction(a) {
-  return a.replace(".", " ");
+  const key = actionKeys[a];
+  return key ? t(key) : a.replace(".", " ");
 }
-function prettyType(t) {
-  return t.replace("_", " ");
+function prettyType(rt) {
+  const key = resourceTypeKeys[rt];
+  return key ? t(key) : rt.replace("_", " ");
 }
 function resourceName(e) {
   return e.metadata?.name || e.resource_id || "\u2014";
@@ -37,51 +55,105 @@ function resourceName(e) {
 function fmtDate(iso) {
   return iso ? new Date(iso).toLocaleString() : "\u2014";
 }
-const filterTabs = [
+const filterTabs = computed(() => [
   {
     key: "resource",
-    label: "Resource",
+    label: t("integration.audit.table.column.resource"),
     getter: (e) => e.resource_type,
-    options: resourceTypes.map((t) => ({ value: t, label: prettyType(t) }))
+    options: resourceTypes.map((rt) => ({ value: rt, label: prettyType(rt) }))
   },
   {
     key: "action",
-    label: "Action",
+    label: t("integration.audit.table.column.action"),
     getter: (e) => e.action,
     options: actions.map((a) => ({ value: a, label: prettyAction(a) }))
   }
-];
-const columns = [
-  { key: "action", label: "Action", width: "130px", sortable: true, sortGetter: (e) => e.action },
-  { key: "resource", label: "Resource", sortable: true, sortGetter: (e) => `${e.resource_type} ${resourceName(e)}`, searchGetter: (e) => `${e.resource_type} ${resourceName(e)} ${e.action} ${e.actor_sub ?? ""}` },
-  { key: "actor", label: "Actor", width: "170px", sortable: true, sortGetter: (e) => e.actor_sub ?? "" },
-  { key: "when", label: "When", width: "180px", sortable: true, sortGetter: (e) => e.created_at }
-];
+]);
+const columns = computed(() => [
+  { key: "action", label: t("integration.audit.table.column.action"), width: "130px", sortable: true, sortGetter: (e) => e.action },
+  { key: "resource", label: t("integration.audit.table.column.resource"), sortable: true, sortGetter: (e) => `${e.resource_type} ${resourceName(e)}`, searchGetter: (e) => `${e.resource_type} ${resourceName(e)} ${e.action} ${e.actor_sub ?? ""}` },
+  { key: "actor", label: t("integration.audit.table.column.actor"), width: "170px", sortable: true, sortGetter: (e) => e.actor_sub ?? "" },
+  { key: "when", label: t("integration.audit.table.column.when"), width: "180px", sortable: true, sortGetter: (e) => e.created_at }
+]);
 const selected = ref(null);
-function copy(t) {
-  if (t && navigator.clipboard) {
-    navigator.clipboard.writeText(t);
-    toast.success("Copied");
+function copy(t2) {
+  if (t2 && navigator.clipboard) {
+    navigator.clipboard.writeText(t2);
+    toast.success(t("integration.audit.toast.copied"));
   }
 }
+const panelEl = ref(null);
+let opener = null;
+function tabStops() {
+  const root = panelEl.value;
+  if (!root) return [];
+  const sel = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+  return [...root.querySelectorAll(sel)].filter((el) => el.offsetParent !== null);
+}
+function onKeydown(e) {
+  if (e.key === "Escape") {
+    selected.value = null;
+    return;
+  }
+  if (e.key !== "Tab") return;
+  const root = panelEl.value;
+  if (!root) return;
+  const stops = tabStops();
+  if (!stops.length) {
+    e.preventDefault();
+    root.focus();
+    return;
+  }
+  const first = stops[0];
+  const last = stops[stops.length - 1];
+  const active = document.activeElement;
+  const inside = active instanceof Node && root.contains(active);
+  if (e.shiftKey && (!inside || active === first || active === root)) {
+    e.preventDefault();
+    last.focus();
+  } else if (!e.shiftKey && (!inside || active === last)) {
+    e.preventDefault();
+    first.focus();
+  }
+}
+watch(selected, async (entry, previous) => {
+  if (entry) {
+    document.addEventListener("keydown", onKeydown);
+    if (!previous) opener = document.activeElement;
+    await nextTick();
+    panelEl.value?.focus();
+  } else {
+    document.removeEventListener("keydown", onKeydown);
+    if (opener?.isConnected) opener.focus();
+    opener = null;
+  }
+});
+onUnmounted(() => document.removeEventListener("keydown", onKeydown));
 </script>
 
 <template>
   <IntegrationsLayout>
-    <PageHeader title="Audit Log" description="Who changed what, and when. Append-only, per-tenant — credentials, secrets, workflows, triggers and runs." />
+    <PageHeader :title="t('integration.audit.header.title')" :description="t('integration.audit.header.description')" />
 
     <div class="p-4 space-y-3">
       <p v-if="error" class="text-sm text-rose-700">{{ error }}</p>
 
+      <!-- `:pagination="false"` — one pagination, not two. The feed is loaded a
+           page at a time by "Load more" below; the table's own pager (on by
+           default, twenty rows) would then hold the entries just fetched behind a
+           control nobody asked for, so the operator presses "Load more" and sees
+           nothing change. `templates/[slug].vue` and `workflows/[id].vue` switch
+           it off for the same reason. -->
       <DataTable
         :data="entries"
         :columns="columns"
         :row-key="(e) => e.id"
         :default-sort="{ column: 'when', direction: 'desc' }"
-        :search="{ placeholder: 'Search action, resource, actor\u2026' }"
+        :pagination="false"
+        :search="{ placeholder: t('integration.audit.search.placeholder') }"
         :filter-tabs="filterTabs"
         :loading="loading"
-        empty-text="No audit entries match."
+        :empty-text="t('integration.audit.state.empty')"
         @row-click="(e) => selected = e"
       >
         <template #cell-action="{ row }">
@@ -97,7 +169,7 @@ function copy(t) {
           </div>
         </template>
         <template #cell-actor="{ row }">
-          <span class="text-sm font-mono text-muted-foreground truncate">{{ row.actor_sub ?? "system" }}</span>
+          <span class="text-sm font-mono text-muted-foreground truncate">{{ row.actor_sub ?? t("integration.audit.actor.system") }}</span>
         </template>
         <template #cell-when="{ row }">
           <span class="text-sm text-muted-foreground">{{ fmtDate(row.created_at) }}</span>
@@ -105,42 +177,73 @@ function copy(t) {
       </DataTable>
 
       <div v-if="hasMore" class="flex justify-center pt-1">
-        <Button variant="outline" size="sm" :disabled="loading" @click="loadMore()">{{ loading ? "Loading\u2026" : "Load more" }}</Button>
+        <Button variant="outline" size="sm" :disabled="loading" @click="loadMore()">{{ loading ? t("integration.common.state.loading") : t("integration.audit.action.loadMore") }}</Button>
       </div>
     </div>
 
     <!-- Detail flyout -->
     <Transition name="drawer">
-      <div v-if="selected" class="fixed inset-0 z-50 flex" @keydown.esc="selected = null">
-        <div class="flex-1 bg-black/20 backdrop-blur-[1px]" @click="selected = null" />
-        <aside class="w-full max-w-md overflow-y-auto border-l border-black/[0.06] bg-white shadow-xl">
+      <div v-if="selected" class="fixed inset-0 z-50 flex">
+        <!-- Clicking away dismisses the panel, and that is a pointer gesture by
+             design: the two routes that do not need a pointer — Escape and
+             `Close entry details` — are both inside the panel, where the Tab trap
+             keeps the focus. So this element is deliberately out of reach.
+             `tabindex="-1"` says so at the element rather than leaving it to the
+             trap, and `aria-modal` on the panel beside it already keeps the whole
+             overlay out of what a screen reader is offered. It stays a button and
+             keeps its name so that the day the trap changes, the fallback is a
+             named control rather than a clickable div. -->
+        <button
+          type="button"
+          tabindex="-1"
+          :aria-label="t('integration.audit.panel.dismiss.aria')"
+          class="flex-1 bg-black/20 backdrop-blur-[1px]"
+          @click="selected = null"
+        />
+        <!-- A dialog rather than a complementary landmark (PO-245). It covers the
+             page, holds the focus and closes on Escape, which is what a dialog is;
+             announcing it as supporting content beside the page while trapping the
+             focus inside it would be two answers to one question. `aria-modal` is
+             what tells a screen reader not to wander into what the overlay hides.
+             `tabindex="-1"` is what makes the container focusable at all, so
+             opening the panel can put the operator in it — see `onKeydown` above.
+             Still named: the shell has an <aside> for the sidebar, and this panel
+             needs to be tellable from it and addressable by a test. -->
+        <div
+          ref="panelEl"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="t('integration.audit.panel.title.aria')"
+          tabindex="-1"
+          class="drawer-panel w-full max-w-md overflow-y-auto border-l border-black/[0.06] bg-white shadow-xl outline-none"
+        >
           <div class="sticky top-0 z-10 flex items-center gap-2 border-b border-black/[0.06] bg-white/90 backdrop-blur px-4 py-3">
             <Badge variant="outline" :class="['border text-xs font-medium uppercase', actionTone(selected.action)]">{{ prettyAction(selected.action) }}</Badge>
             <span class="text-sm font-semibold text-[#0B0522] capitalize">{{ prettyType(selected.resource_type) }}</span>
-            <Button variant="ghost" size="sm" class="ml-auto h-7 w-7 p-0" @click="selected = null"><Close :size="15" /></Button>
+            <Button variant="ghost" size="sm" :aria-label="t('integration.audit.panel.close.aria')" class="ml-auto h-7 w-7 p-0" @click="selected = null"><Close :size="15" /></Button>
           </div>
           <div class="p-4 space-y-4 text-sm">
             <div class="space-y-1.5">
-              <div class="flex justify-between gap-2"><span class="text-muted-foreground">Resource</span><span class="font-medium text-right">{{ resourceName(selected) }}</span></div>
-              <div v-if="selected.resource_id" class="flex justify-between gap-2"><span class="text-muted-foreground">ID</span><code class="font-mono text-xs">{{ selected.resource_id }}</code></div>
-              <div class="flex justify-between gap-2"><span class="text-muted-foreground">Actor</span><code class="font-mono text-xs">{{ selected.actor_sub ?? "system" }}</code></div>
-              <div class="flex justify-between gap-2"><span class="text-muted-foreground">When</span><span>{{ fmtDate(selected.created_at) }}</span></div>
-              <div v-if="selected.tenant_id" class="flex justify-between gap-2"><span class="text-muted-foreground">Tenant</span><span>{{ selected.tenant_id }}</span></div>
+              <div class="flex justify-between gap-2"><span class="text-muted-foreground">{{ t("integration.audit.table.column.resource") }}</span><span class="font-medium text-right">{{ resourceName(selected) }}</span></div>
+              <div v-if="selected.resource_id" class="flex justify-between gap-2"><span class="text-muted-foreground">{{ t("integration.audit.detail.id") }}</span><code class="font-mono text-xs">{{ selected.resource_id }}</code></div>
+              <div class="flex justify-between gap-2"><span class="text-muted-foreground">{{ t("integration.audit.table.column.actor") }}</span><code class="font-mono text-xs">{{ selected.actor_sub ?? t("integration.audit.actor.system") }}</code></div>
+              <div class="flex justify-between gap-2"><span class="text-muted-foreground">{{ t("integration.audit.table.column.when") }}</span><span>{{ fmtDate(selected.created_at) }}</span></div>
+              <div v-if="selected.tenant_id" class="flex justify-between gap-2"><span class="text-muted-foreground">{{ t("integration.audit.detail.tenant") }}</span><span>{{ selected.tenant_id }}</span></div>
             </div>
             <div v-if="selected.metadata && Object.keys(selected.metadata).length">
               <div class="mb-1 flex items-center justify-between">
-                <span class="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Details</span>
-                <button class="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground" @click="copy(JSON.stringify(selected.metadata, null, 2))"><CopyIcon :size="12" /> copy</button>
+                <span class="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">{{ t("integration.audit.detail.detailsHeading") }}</span>
+                <button class="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground" @click="copy(JSON.stringify(selected.metadata, null, 2))"><CopyIcon :size="12" /> {{ t("integration.audit.action.copy") }}</button>
               </div>
               <pre class="overflow-x-auto rounded-md bg-[#0B0522] p-3 text-xs leading-relaxed text-[#E6E1F5]"><code>{{ JSON.stringify(selected.metadata, null, 2) }}</code></pre>
             </div>
           </div>
-        </aside>
+        </div>
       </div>
     </Transition>
   </IntegrationsLayout>
 </template>
 
 <style scoped>
-.drawer-enter-active,.drawer-leave-active{transition:opacity .2s ease}.drawer-enter-active aside,.drawer-leave-active aside{transition:transform .25s cubic-bezier(.22,1,.36,1)}.drawer-enter-from,.drawer-leave-to{opacity:0}.drawer-enter-from aside,.drawer-leave-to aside{transform:translateX(100%)}
+.drawer-enter-active,.drawer-leave-active{transition:opacity .2s ease}.drawer-enter-active .drawer-panel,.drawer-leave-active .drawer-panel{transition:transform .25s cubic-bezier(.22,1,.36,1)}.drawer-enter-from,.drawer-leave-to{opacity:0}.drawer-enter-from .drawer-panel,.drawer-leave-to .drawer-panel{transform:translateX(100%)}
 </style>

package/dist/runtime/pages/integrations/credentials/oauth-complete.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { onMounted, ref } from "vue";
 definePageMeta({ layout: false });
+const t = useIntegrationsT();
 const closing = ref(true);
 onMounted(() => {
   try {
@@ -15,14 +16,16 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex min-h-screen items-center justify-center bg-white text-center">
+  <!-- Own landmark and heading: this popup renders without the studio shell
+       (`layout: false`), so it would otherwise be the one page with neither. -->
+  <main class="flex min-h-screen items-center justify-center bg-white text-center">
     <div class="space-y-2">
-      <p class="text-sm font-medium text-foreground">
-        Connection complete
-      </p>
+      <h1 class="text-sm font-medium text-foreground">
+        {{ t("integration.credentials.oauthComplete.title") }}
+      </h1>
       <p class="text-sm text-muted-foreground">
-        {{ closing ? "You can close this window." : "Done \u2014 closing\u2026" }}
+        {{ closing ? t("integration.credentials.oauthComplete.hint.open") : t("integration.credentials.oauthComplete.hint.closing") }}
       </p>
     </div>
-  </div>
+  </main>
 </template>