@revenexx/studio-integrations 0.6.0 → 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,31 +55,31 @@ 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);
@@ -115,7 +133,7 @@ onUnmounted(() => document.removeEventListener("keydown", onKeydown));
 
 <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>
@@ -132,10 +150,10 @@ onUnmounted(() => document.removeEventListener("keydown", onKeydown));
         :row-key="(e) => e.id"
         :default-sort="{ column: 'when', direction: 'desc' }"
         :pagination="false"
-        :search="{ placeholder: 'Search action, resource, actor\u2026' }"
+        :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 }">
@@ -151,7 +169,7 @@ onUnmounted(() => document.removeEventListener("keydown", onKeydown));
           </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>
@@ -159,7 +177,7 @@ onUnmounted(() => document.removeEventListener("keydown", onKeydown));
       </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>
 
@@ -178,7 +196,7 @@ onUnmounted(() => document.removeEventListener("keydown", onKeydown));
         <button
           type="button"
           tabindex="-1"
-          aria-label="Dismiss entry details"
+          :aria-label="t('integration.audit.panel.dismiss.aria')"
           class="flex-1 bg-black/20 backdrop-blur-[1px]"
           @click="selected = null"
         />
@@ -195,27 +213,27 @@ onUnmounted(() => document.removeEventListener("keydown", onKeydown));
           ref="panelEl"
           role="dialog"
           aria-modal="true"
-          aria-label="Audit entry details"
+          :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" aria-label="Close entry details" 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>

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 {
@@ -20,10 +21,10 @@ onMounted(() => {
   <main class="flex min-h-screen items-center justify-center bg-white text-center">
     <div class="space-y-2">
       <h1 class="text-sm font-medium text-foreground">
-        Connection complete
+        {{ 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>
   </main>