@revenexx/studio-integrations 0.6.0 → 1.0.0

package/README.md

@@ -30,6 +30,33 @@ supply a token/tenant through the platform provider (override
 `usePlatformAuth` / `usePlatformTenant`, or the standalone defaults read
 `NUXT_PUBLIC_DEV_TOKEN` / `NUXT_PUBLIC_DEV_TENANT`).
 
+### Language
+
+The studio speaks English and German. That covers both halves of a screen: the
+text node packages publish (names, descriptions, settings) **and** the studio's
+own chrome — headings, buttons, tabs, empty states, toasts. Both fall back to
+English. The studio has no switcher of its own, so hand the choice over one of
+two ways:
+
+```ts
+// nuxt.config.ts — a language that does not change
+export default defineNuxtConfig({
+  studioIntegrations: { locale: 'de' }, // or NUXT_PUBLIC_STUDIO_INTEGRATIONS_LOCALE
+})
+```
+
+```ts
+// a host plugin — a language the user switches while the app is running
+const { setLocale } = useIntegrationsLocale()
+watch(hostLocale, l => setLocale(l), { immediate: true })
+```
+
+A switch reaches surfaces that are already open; nothing is refetched. With
+neither wired, the studio is English. The module carries its own message
+catalogue (`runtime/i18n/messages/*.json`) — it never reads the host's, and needs
+no i18n library installed in the host. See
+[`docs/interface-language.md`](docs/interface-language.md).
+
 ## ⚠️ Tailwind: you MUST scan this package
 
 The module ships its runtime as source-ish `.vue`; Tailwind generates the
@@ -63,6 +90,10 @@ pnpm build       # dist/
 pnpm changeset   # record what your change does to the version
 ```
 
+Branch off `main` as `feature/<desc>`, `fix/<desc>` or `chore/<desc>` — GitHub refuses
+the first push of any other name, and `main` itself takes a reviewed pull request with
+CI green: [`docs/branch-protection.md`](docs/branch-protection.md).
+
 Hosts to develop against:
 
 * **Playground** (`playground/`, in this repo): thin standalone Nuxt host that

package/dist/module.d.mts

@@ -1,6 +1,22 @@
 import * as _nuxt_schema from '@nuxt/schema';
 export * from '../dist/runtime/types/integrations.js';
 
-declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
+interface ModuleOptions {
+    /**
+     * The language the studio renders in, as a BCP-47 tag (`en`, `de`, `de-CH`).
+     *
+     * This is the *initial* language and the whole of the contract for a host
+     * whose language never changes. A host with a switcher leaves it alone and
+     * calls `useIntegrationsLocale().setLocale()` instead — its plugins run after
+     * this module's, so the two do not fight over the value.
+     *
+     * It reaches the runtime through `runtimeConfig.public.studioIntegrations`,
+     * so a deployment can override it with
+     * `NUXT_PUBLIC_STUDIO_INTEGRATIONS_LOCALE` without a rebuild.
+     */
+    locale?: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

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

package/dist/module.mjs

@@ -1,6 +1,6 @@
-import { existsSync, readdirSync, statSync } from 'node:fs';
+import { readdirSync, statSync, existsSync } from 'node:fs';
 import { join } from 'node:path';
-import { defineNuxtModule, createResolver, hasNuxtModule, installModule, addComponentsDir, addImportsDir, extendPages } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, installModule, addComponentsDir, addImportsDir, extendPages } from '@nuxt/kit';
 
 function toSegment(name) {
   if (name.startsWith("[...")) return `:${name.slice(4, -1)}(.*)*`;
@@ -22,14 +22,22 @@ function scanRoutes(dir, baseUrl, baseName) {
   }
   return routes;
 }
+
 const module$1 = defineNuxtModule({
   meta: {
     name: "@revenexx/studio-integrations",
     configKey: "studioIntegrations"
   },
-  async setup(_options, nuxt) {
+  defaults: {
+    locale: "en"
+  },
+  async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
     const runtime = resolve("./runtime");
+    const publicConfig = nuxt.options.runtimeConfig.public;
+    const configured = publicConfig.studioIntegrations ?? {};
+    publicConfig.studioIntegrations = { ...configured, locale: configured.locale ?? options.locale };
+    addPlugin(resolve("./runtime/plugins/locale"));
     if (!hasNuxtModule("@solar-icons/nuxt", nuxt)) {
       await installModule("@solar-icons/nuxt", {
         namePrefix: "Solar",
@@ -52,6 +60,7 @@ const module$1 = defineNuxtModule({
     nuxt.options.build.transpile.push(runtime);
     addComponentsDir({ path: join(runtime, "components"), pathPrefix: true });
     addImportsDir(join(runtime, "composables"));
+    addPlugin(join(runtime, "plugins", "realtime.client"));
     extendPages((pages) => {
       const pagesDir = join(runtime, "pages", "integrations");
       if (!existsSync(pagesDir)) return;

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

@@ -25,29 +25,30 @@ const props = defineProps({
   credentialType: { type: [String, Array], required: false }
 });
 const emit = defineEmits(["update:open", "created"]);
+const t = useIntegrationsT();
 const { create, testInline, load, oauthAuthorizeUrl } = useIntegrationsCredentials();
 const { load: loadTypes, bySlug } = useCredentialTypes();
 function authKindLabel(k) {
   switch (k) {
     case "api-key":
-      return "API Key";
+      return t("integration.credentials.shared.authKind.apiKey");
     case "oauth2-authcode":
     case "oauth2-client-credentials":
-      return "OAuth2";
+      return t("integration.credentials.shared.authKind.oauth2");
     case "basic-auth":
-      return "Basic Auth";
+      return t("integration.credentials.shared.authKind.basicAuth");
     case "static":
-      return "Static";
+      return t("integration.credentials.shared.authKind.static");
     case "secret":
-      return "Secret";
+      return t("integration.credentials.shared.authKind.secret");
     default:
       return k ?? "";
   }
 }
 const allowedSlugs = computed(() => {
-  const t = props.credentialType;
-  if (!t) return [];
-  return (Array.isArray(t) ? t : [t]).map((s) => s.trim()).filter(Boolean);
+  const t2 = props.credentialType;
+  if (!t2) return [];
+  return (Array.isArray(t2) ? t2 : [t2]).map((s) => s.trim()).filter(Boolean);
 });
 const allowedTypes = computed(() => allowedSlugs.value.map((s) => bySlug(s)).filter((x) => !!x));
 const pickedType = ref(null);
@@ -56,11 +57,11 @@ const sourceActive = ref(false);
 const saving = ref(false);
 const testing = ref(false);
 const testResult = ref(null);
-function fieldsOf(t) {
-  return t?.fields ?? [];
+function fieldsOf(t2) {
+  return t2?.fields ?? [];
 }
-function isOAuthAuthcode(t) {
-  return t?.auth_kind === "oauth2-authcode";
+function isOAuthAuthcode(t2) {
+  return t2?.auth_kind === "oauth2-authcode";
 }
 watch(() => props.open, async (o) => {
   if (!o) return;
@@ -76,12 +77,12 @@ watch(() => props.open, async (o) => {
     form.name = "";
   }
 }, { immediate: true });
-function pickType(t) {
-  pickedType.value = t;
+function pickType(t2) {
+  pickedType.value = t2;
   form.config = {};
   testResult.value = null;
   sourceActive.value = false;
-  if (!form.name) form.name = resolveLocalized(t.name);
+  if (!form.name) form.name = resolveLocalized(t2.name);
 }
 function buildConfigPayload() {
   const out = {};
@@ -130,14 +131,14 @@ async function submit() {
       config: buildConfigPayload()
     });
     await load(true);
-    toast.success("Credential created");
+    toast.success(t("integration.credentials.toast.created"));
     if (isOAuthAuthcode(pickedType.value)) {
       void connect(created.id);
     }
     emit("created", created.id);
     emit("update:open", false);
   } catch (e) {
-    toast.error(e?.message ?? "Could not create credential.");
+    toast.error(e?.message ?? t("integration.credentials.createDialog.error.create"));
   } finally {
     saving.value = false;
   }
@@ -148,16 +149,16 @@ async function submit() {
   <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
     <DialogContent class="sm:max-w-lg">
       <DialogHeader>
-        <DialogTitle>New credential</DialogTitle>
+        <DialogTitle>{{ t("integration.credentials.shared.dialog.title.create") }}</DialogTitle>
         <DialogDescription class="text-sm">
-          Create a credential for this node without leaving the editor.
+          {{ t("integration.credentials.createDialog.description") }}
         </DialogDescription>
       </DialogHeader>
 
       <!-- Choose the type when the field accepts more than one -->
       <div v-if="!pickedType" class="space-y-2 py-1">
         <p v-if="!allowedTypes.length" class="text-sm text-muted-foreground">
-          No credential type available for this field.
+          {{ t("integration.credentials.createDialog.noTypeAvailable") }}
         </p>
         <button
           v-for="t in allowedTypes"
@@ -185,13 +186,13 @@ async function submit() {
             class="ml-auto text-sm text-muted-foreground hover:text-foreground"
             @click="pickedType = null"
           >
-            Change type
+            {{ t("integration.credentials.createDialog.action.changeType") }}
           </button>
         </div>
 
         <div class="space-y-1.5">
-          <Label for="cred-name">Name</Label>
-          <Input id="cred-name" v-model="form.name" class="bg-white" placeholder="e.g. Production key" />
+          <Label for="cred-name">{{ t("integration.credentials.shared.field.name.label") }}</Label>
+          <Input id="cred-name" v-model="form.name" class="bg-white" :placeholder="t('integration.credentials.createDialog.field.name.placeholder')" />
         </div>
 
         <!-- "Use revenexx …" source picker (SFTP / Mail / API key) -->
@@ -232,7 +233,7 @@ async function submit() {
             @update:model-value="(v) => form.config[f.key] = v"
           >
             <SelectTrigger :id="`create-field-${f.key}`" class="bg-white">
-              <SelectValue placeholder="Pick one" />
+              <SelectValue :placeholder="t('integration.credentials.shared.field.select.placeholder')" />
             </SelectTrigger>
             <SelectContent>
               <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
@@ -250,7 +251,7 @@ async function submit() {
         </div>
 
         <p v-if="isOAuthAuthcode(pickedType)" class="text-sm text-muted-foreground">
-          After saving, a window opens to connect with the provider.
+          {{ t("integration.credentials.shared.oauthHint") }}
         </p>
 
         <div
@@ -258,7 +259,10 @@ async function submit() {
           class="rounded-md px-3 py-2 text-sm"
           :class="testResult.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
         >
-          {{ testResult.ok ? "Connection ok." : testResult.error ?? "Connection failed." }}
+          <!-- The type's own sentence, either way. This is the surface where it is
+               worth the most: nothing is stored yet, so the operator is deciding
+               whether these access data reach what they meant (specs/credential-test.md). -->
+          {{ testResult.ok ? testResult.message ?? t("integration.credentials.shared.test.ok") : testResult.error ?? testResult.message ?? t("integration.credentials.shared.test.failed") }}
         </div>
       </div>
 
@@ -267,11 +271,11 @@ async function submit() {
           <Button variant="outline" :disabled="saving || testing" @click="runTest">
             <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
             <TestIcon v-else :size="14" class="mr-1" />
-            Connect
+            {{ t("integration.credentials.shared.action.testConnection") }}
           </Button>
           <Button :disabled="saving || !form.name.trim()" @click="submit">
             <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
-            Save
+            {{ t("integration.common.action.save") }}
           </Button>
         </div>
       </DialogFooter>

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

@@ -5,7 +5,7 @@ import {
   CloseCircle as XCircle,
   RefreshCircle as Loader2,
   TestTube as TestIcon,
-  TrashBinTrash as Trash2
+  TrashBinMinimalistic as TrashBin
 } from "#solar-icons";
 import {
   AlertDialog,
@@ -40,12 +40,13 @@ const props = defineProps({
   type: { type: [Object, null], required: true }
 });
 const emit = defineEmits(["update:open", "changed"]);
+const t = useIntegrationsT();
 const { update, remove, test, oauthAuthorizeUrl, load } = useIntegrationsCredentials();
 const tab = ref("credentials");
-const tabs = [
-  { key: "credentials", label: "Credentials" },
-  { key: "details", label: "Details" }
-];
+const tabs = computed(() => [
+  { key: "credentials", label: t("integration.credentials.detail.tab.credentials") },
+  { key: "details", label: t("integration.credentials.detail.tab.details") }
+]);
 const form = reactive({ name: "", config: {} });
 const sourceActive = ref(false);
 const saving = ref(false);
@@ -65,8 +66,8 @@ const connecting = ref(false);
 const typeName = computed(() => resolveLocalized(props.type?.name) || props.credential?.credential_type_slug || "");
 const isOAuthAuthcode = computed(() => props.type?.auth_kind === "oauth2-authcode");
 const state = computed(() => props.credential ? credentialState(props.credential) : null);
-function fieldsOf(t) {
-  return t?.fields ?? [];
+function fieldsOf(t2) {
+  return t2?.fields ?? [];
 }
 function formatDateTime(iso) {
   if (!iso) return "\u2014";
@@ -118,10 +119,10 @@ async function save() {
     await update(props.credential.id, { name: form.name.trim(), config: buildConfigPayload() });
     emit("changed");
     emit("update:open", false);
-    toast.success("Credential updated");
+    toast.success(t("integration.credentials.toast.updated"));
   } catch (e) {
     fieldErrors.value = apiFieldErrors(e);
-    saveError.value = refusalReason(e, "Could not save credential.");
+    saveError.value = refusalReason(e, t("integration.credentials.error.save"));
     toast.error(saveError.value);
   } finally {
     saving.value = false;
@@ -134,11 +135,11 @@ async function destroy() {
   deleting.value = true;
   try {
     await remove(props.credential.id);
-    toast.success("Credential deleted");
+    toast.success(t("integration.credentials.toast.deleted"));
     emit("changed");
     emit("update:open", false);
   } catch (e) {
-    toast.error(e?.message ?? "Could not delete credential.");
+    toast.error(e?.message ?? t("integration.credentials.error.delete"));
   } finally {
     deleting.value = false;
   }
@@ -154,7 +155,7 @@ async function connect() {
         window.removeEventListener("message", onMessage);
         await load(true);
         emit("changed");
-        toast.success("Connected");
+        toast.success(t("integration.credentials.toast.connected"));
       }
     };
     window.addEventListener("message", onMessage);
@@ -167,7 +168,7 @@ async function connect() {
       }
     }, 1e3);
   } catch (e) {
-    toast.error(e?.message ?? "Could not start OAuth connect.");
+    toast.error(e?.message ?? t("integration.credentials.error.oauthConnect"));
   } finally {
     connecting.value = false;
   }
@@ -210,21 +211,27 @@ async function connect() {
               @click="connect"
             >
               <Loader2 v-if="connecting" :size="13" class="mr-1 animate-spin" />
-              Reconnect
+              {{ t("integration.credentials.detail.action.reconnect") }}
             </Button>
           </div>
-          <p v-if="state.key === 'failed' && state.message" class="mt-1 text-sm break-words opacity-90">
+          <!-- The stored sentence, and only while nothing fresher is on screen. The
+               live box below shows the result of a test just run, and the reload that
+               follows it puts the very same sentence here — so both would print it
+               twice, and past the length the platform truncates at, twice differently.
+               The freshly returned one wins, being whole (specs/credential-test.md
+               AC-1). -->
+          <p v-if="state.message && !liveTest" class="mt-1 text-sm break-words opacity-90">
             {{ state.message }}
           </p>
           <p v-else-if="state.key === 'untested'" class="mt-1 text-sm opacity-80">
-            Run a test to verify these credentials actually connect.
+            {{ t("integration.credentials.detail.state.untestedHint") }}
           </p>
         </div>
 
         <!-- Editable fields -->
         <div class="space-y-3">
           <div class="space-y-1.5">
-            <Label for="detail-cred-name">Name</Label>
+            <Label for="detail-cred-name">{{ t("integration.credentials.shared.field.name.label") }}</Label>
             <Input
               id="detail-cred-name"
               v-model="form.name"
@@ -262,7 +269,7 @@ async function connect() {
               :model-value="form.config[f.key] ?? ''"
               type="password"
               autocomplete="new-password"
-              placeholder="Leave blank to keep current"
+              :placeholder="t('integration.credentials.shared.field.secret.placeholder')"
               class="bg-white"
               v-bind="configFieldAria(f.key)"
               @update:model-value="(v) => form.config[f.key] = v"
@@ -285,7 +292,7 @@ async function connect() {
               @update:model-value="(v) => form.config[f.key] = v"
             >
               <SelectTrigger :id="`detail-field-${f.key}`" class="bg-white" v-bind="configFieldAria(f.key)">
-                <SelectValue placeholder="Pick one" />
+                <SelectValue :placeholder="t('integration.credentials.shared.field.select.placeholder')" />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
@@ -313,7 +320,7 @@ async function connect() {
             class="rounded-md px-3 py-2 text-sm"
             :class="liveTest.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
           >
-            {{ liveTest.ok ? "Connection ok." : liveTest.error ?? "Connection failed." }}
+            {{ liveTest.ok ? liveTest.message ?? t("integration.credentials.shared.test.ok") : liveTest.error ?? liveTest.message ?? t("integration.credentials.shared.test.failed") }}
           </div>
 
           <!-- The save was refused. Same rule as the create dialog: stated here, and at
@@ -327,11 +334,11 @@ async function connect() {
             <Button variant="outline" :disabled="testing || saving" @click="runTest">
               <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
               <TestIcon v-else :size="14" class="mr-1" />
-              Connect
+              {{ t("integration.credentials.shared.action.testConnection") }}
             </Button>
             <Button :disabled="saving || !form.name.trim()" @click="save">
               <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
-              Save
+              {{ t("integration.common.action.save") }}
             </Button>
           </div>
         </div>
@@ -341,37 +348,37 @@ async function connect() {
         <!-- Tab 2: Details -->
         <div v-else class="space-y-5 max-h-[62vh] overflow-y-auto pr-1 pt-4">
           <div class="grid grid-cols-[9rem_1fr] gap-x-4 gap-y-2 text-sm">
-            <span class="text-muted-foreground">Type</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.type") }}</span>
             <span>{{ typeName }}</span>
 
-            <span class="text-muted-foreground">Type slug</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.typeSlug") }}</span>
             <span class="font-mono text-xs">{{ credential.credential_type_slug }}</span>
 
-            <span class="text-muted-foreground">Version</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.version") }}</span>
             <span class="font-mono text-xs">{{ type?.version ?? "\u2014" }}</span>
 
-            <span class="text-muted-foreground">Auth kind</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.authKind") }}</span>
             <span class="font-mono text-xs">{{ type?.auth_kind ?? "\u2014" }}</span>
 
-            <span class="text-muted-foreground">Last tested</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.lastTested") }}</span>
             <span class="tabular-nums">{{ formatDateTime(credential.last_test_at) }}</span>
 
-            <span class="text-muted-foreground">Credential ID</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.id") }}</span>
             <span class="font-mono text-xs break-all">{{ credential.id }}</span>
 
-            <span class="text-muted-foreground">Created</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.created") }}</span>
             <span class="tabular-nums">{{ formatDateTime(credential.created_at) }}</span>
 
-            <span class="text-muted-foreground">Updated</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.updated") }}</span>
             <span class="tabular-nums">{{ formatDateTime(credential.updated_at) }}</span>
           </div>
 
           <!-- Danger zone -->
           <div class="rounded-lg border border-rose-500/30 bg-rose-500/[0.03] p-3">
-            <div class="text-sm font-semibold text-rose-700">Danger zone</div>
+            <div class="text-sm font-semibold text-rose-700">{{ t("integration.credentials.detail.dangerZone.title") }}</div>
             <div class="mt-1.5 flex items-center justify-between gap-3">
               <p class="text-sm text-muted-foreground">
-                Deleting this credential breaks any workflow that references it until it's re-bound.
+                {{ t("integration.credentials.detail.dangerZone.description") }}
               </p>
               <Button
                 variant="outline"
@@ -381,8 +388,8 @@ async function connect() {
                 @click="pendingDelete = true"
               >
                 <Loader2 v-if="deleting" :size="14" class="mr-1 animate-spin" />
-                <Trash2 v-else :size="14" class="mr-1" />
-                Delete credential
+                <TrashBin v-else :size="14" class="mr-1" />
+                {{ t("integration.credentials.detail.action.deleteCredential") }}
               </Button>
             </div>
           </div>
@@ -392,19 +399,19 @@ async function connect() {
       <AlertDialog :open="pendingDelete" @update:open="(v) => pendingDelete = v">
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete credential?</AlertDialogTitle>
+            <AlertDialogTitle>{{ t("integration.credentials.shared.confirm.delete.title") }}</AlertDialogTitle>
             <AlertDialogDescription>
               <span class="font-medium text-foreground">{{ credential?.name }}</span>
-              will be removed. Workflows that reference it will fail until they are re-bound to another credential.
+              {{ t("integration.credentials.shared.confirm.delete.body") }}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <Button variant="outline" :disabled="deleting" @click="pendingDelete = false">
-              Cancel
+              {{ t("integration.common.action.cancel") }}
             </Button>
             <Button class="bg-destructive text-white hover:bg-destructive/90" :disabled="deleting" @click="destroy">
               <Loader2 v-if="deleting" :size="14" class="animate-spin" />
-              {{ deleting ? "Deleting\u2026" : "Delete" }}
+              {{ deleting ? t("integration.common.state.deleting") : t("integration.common.action.delete") }}
             </Button>
           </AlertDialogFooter>
         </AlertDialogContent>