@revenexx/studio-integrations 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,232 @@
 # @revenexx/studio-integrations
 
+## 0.7.0
+
+### Minor Changes
+
+- f7ddd90: The run surfaces now update from pushed platform events, not only from their own
+  refresh.
+
+  Where a host has Talkback configured, the Runs list, a workflow's Runs tab, a run's
+  record and the replay canvas react to the run and workflow lifecycle the integrations
+  service publishes — so a run that finishes is on screen in about a second instead of
+  up to three, and a run started from the API, a schedule or an MCP tool appears on an
+  idle list that previously had no reason to ask. `workflow.deleted` also takes its runs
+  off the list, which no `run.deleted` event exists to do.
+
+  A run's record follows the same reports, and it now re-reads everything it shows when
+  the run it is open on ends — the status it displays comes from a different request
+  than the one an ending run used to trigger, so a record left open on a finishing run
+  could keep showing the state before it ended. That is fixed for the reported route;
+  the three-second poll behind it is unchanged.
+
+  While events are actually arriving, each surface's own refresh slows to every 30
+  seconds and stays as the backstop rather than stopping — the connection signal
+  available today cannot tell a quiet socket from a dead one, so a list that stopped
+  converging was not a trade worth making. **A connection that reports nothing is
+  treated as no connection**: the slower refresh is taken only once something has been
+  delivered, so a tenant whose event catalogue does not release these topics to browsers
+  keeps the cadence it always had rather than becoming the slowest configuration of the
+  three. If the connection drops and comes back having missed more than the platform can
+  replay, every surface reads again instead of waiting for a report that no longer
+  exists.
+
+  With no Talkback host configured — the default — nothing is subscribed, neither
+  `@revenexx/talkback-js` nor `centrifuge` is loaded, and every surface polls exactly as
+  before.
+
+  **This raises the floor for `@revenexx/studio-shared` to `^0.3.0`**, which is the
+  release that carries the realtime seam. A host installing this module gets the newer
+  one automatically; a host that pins studio-shared itself has to move with it, or it
+  will end up with two copies and no realtime at all.
+
+  Realtime needs `@revenexx/talkback-js` and `centrifuge` in the host application —
+  they are optional peers of studio-shared, so a host that never sets a Talkback host
+  installs neither.
+
+- 9ef81b8: The studio reads in the language your application chose, both halves of the
+  screen at once.
+
+  Until now every surface was English. Two things change that. The text the node
+  packages publish — a node's name, what it is for, the label and example of every
+  setting it offers, a credential type's fields, a template's whole description —
+  has been shipping in German as well as English all along, and was being discarded
+  on the way to the screen; it is now resolved in the reader's language. And the
+  studio's own chrome — headings, buttons, tabs, table headers, empty states,
+  toasts, confirmations — is read from a message catalogue the module carries
+  itself, in English and German.
+
+  You do not need an i18n library installed, and the module never reads your
+  catalogue, a cookie or a browser setting: the language comes from you. Wire one
+  of two ways.
+
+  A language that does not change, in `nuxt.config.ts`:
+
+  ```ts
+  export default defineNuxtConfig({
+    modules: ["@revenexx/studio-integrations"],
+    studioIntegrations: { locale: "de" },
+  });
+  ```
+
+  Deployments can override that with `NUXT_PUBLIC_STUDIO_INTEGRATIONS_LOCALE`
+  without a rebuild.
+
+  A language the user switches while the app is running, from a plugin of yours:
+
+  ```ts
+  const { setLocale } = useIntegrationsLocale();
+  watch(hostLocale, (l) => setLocale(l), { immediate: true });
+  ```
+
+  `useIntegrationsLocale()` is auto-imported like every other composable here, so
+  you import nothing. A switch reaches surfaces that are already open — no reload,
+  no refetch, no reopening a dialog. Both routes may be left alone: with neither
+  wired the studio is English, exactly as before, so upgrading changes nothing
+  until you ask it to.
+
+  A tag is BCP-47 and a region falls back to its language, so `de-CH` reads German
+  rather than English; anything the catalogue does not carry reads English.
+
+  **This expects a client-rendered host.** The language is held once per module
+  instance, which is once per browser tab on the client and once per process on a
+  server. If you render the studio server-side _and_ give each visitor their own
+  language, one visitor's choice can reach another's page — a page in the wrong
+  language, nothing more, since the value only chooses between the translations of a
+  string. A single fixed language is unaffected either way. Both routes above are
+  safe in a client-rendered app, which is what the known consumers are.
+
+  Four English strings changed spelling, to British. One of them is an accessible
+  name: the grey swatch in the sticky-note and group-frame colour pickers is
+  `Grey`, not `Gray` — update it if a test of yours addresses it by name. The other
+  three are wording only: two tooltips on the sample-payload button say `catalogue`,
+  and the workflow settings dialog says `Execution behaviour`.
+
+- 7cb9f1c: The studio's lists narrow for real.
+
+  Credentials, runs, workflows and schedules each carried a filter button whose menu
+  read "No filters defined." — it could never filter anything. Each now narrows by the
+  dimensions its own rows already show: a credential's state and system, a run's
+  outcome and what started it, a workflow's position, build and dispatch mode, and
+  whether a schedule is live plus the timezone it fires in. Two choices narrow
+  together, each has a way back to everything, and the words on the menu are the words
+  on the rows.
+
+  Secrets loses the button instead: a key and two dates have nothing categorical to
+  narrow by, so the honest outcome there is not offering it.
+
+  A narrowing applies to the rows the page has loaded. On the lists collected per
+  workflow that is as far back as the page has read.
+
+- 8f332af: Deleting is drawn with one bin everywhere, duplicating with one pair of sheets, and a
+  trigger's delete button says what it deletes.
+
+  The studio drew the delete action with three different bin glyphs, two of them one
+  click apart on the same node: a node's hover toolbar used Lucide's bin while that
+  node's own inspector used Solar's, and the credential surfaces used a third, fuller
+  Solar bin. Nothing was broken — what it cost is recognition, on the one action that
+  cannot be undone. Every delete and remove in the studio now draws Solar's
+  `TrashBinMinimalistic`.
+
+  The copy sheets sat one button along and are folded in: a node's hover toolbar drew
+  Lucide's glyph for **Duplicate** while that same node's inspector drew Solar's for
+  **Copy**. Both are Solar's now.
+
+  Two things a host or a test may notice:
+
+  - **The trigger card's delete button has an accessible name**, `Delete trigger`,
+    where it previously fell back to its `Delete` tooltip. That is what the node card's
+    `Delete node` already did, so the two can now be addressed and heard the same way.
+  - **No delete icon is imported under another library's name any more.** The alias
+    `TrashBinMinimalistic as Trash2` is what hid the divergence — two components read
+    identically in the markup and differed only in an import line. The bin travels as
+    `TrashBin`.
+
+  Why Solar, what `lucide-vue-next` is still for, and why the glyph itself is not
+  promised in a spec: `docs/icons.md`. It also names what is left — five shapes the
+  studio still draws from both libraries — and the ticket that carries them.
+
+- fa0ef1a: The studio navigation stays when a workflow is opened, and the canvas gets its
+  width only when the operator asks.
+
+  Until now, opening a workflow — or one of its runs — folded the navigation away on
+  mount, and nothing anywhere brought it back: the way on was the breadcrumb or the
+  browser's back button. That fold is gone. The rail now stands on every surface,
+  including a workflow's canvas, and a control at the head of the workflow page,
+  reading **Hide navigation**, hands its width to the canvas when the operator wants
+  it. The same control then reads **Show navigation** and gives it back, without
+  leaving the surface. The choice is remembered per browser, so it is stated once
+  rather than on every visit, and it applies to the canvas alone — a run's record,
+  the run lists and the earlier versions keep the navigation either way.
+
+  Two things to know if you host this module:
+
+  - **A folded rail is now `inert` and `aria-hidden`.** It used to be clipped to zero
+    width with its links still focusable, so a keyboard walked into a navigation
+    nobody could see. If a test of yours reaches into the collapsed sidebar, it will
+    no longer find it in the accessibility tree — which is the point.
+  - **The fold is still driven by `useIntegrationsFocus()`**, unchanged, so a host
+    shell that reads `focused` keeps working as before. What changed is who turns it
+    on: nothing does it by itself any more. If your own shell collapses the sidebar
+    on that state, make sure the surface doing so also offers the way back — the
+    control belongs to the page, because a host shell can be replaced and the module's
+    cannot reach into it.
+
+  Two new accessible names, in English and German: `Hide navigation` /
+  `Show navigation`.
+
+### Patch Changes
+
+- 30f5bda: A group frame now tells the truth about what it holds as soon as a member is deleted.
+
+  Deleting a node out of a group left the frame printing the count it had before —
+  `Invoice sync · 3 nodes` over two remaining nodes — until the page was reloaded. The
+  saved workflow was correct throughout; it was the caption that lagged. The larger
+  half of the same defect: deleting a frame's last member left the frame drawn on the
+  canvas over a workflow that no longer contained it, so the editor showed a group
+  that had already ceased to exist.
+
+  Both follow the deletion at once now. An empty frame you drew yourself still stays —
+  it counts down to `0 nodes` and waits to be filled.
+
+  The cause was timing rather than arithmetic: the canvas rebuild ran inside Vue Flow's
+  own change pass, which left the rendered graph on the array from before the deletion.
+  It is deferred by one tick. Nothing about the API, the saved blob or the keyboard
+  changes.
+
+- d690841: A note on a read-only canvas no longer offers controls that do nothing.
+
+  On the run replay and the revision preview, a sticky note used to be drawn with
+  the toolbar it has in the editor — a bin, seven colours, a corner handle — and
+  could still be double-clicked into a text field. None of it had any effect: the
+  note survived its own Delete, typing into it changed nothing, and the workflow
+  never became dirty. A reader could not tell "not allowed here" from "broken".
+
+  The note is now read-only in the way a node card and a group frame already were:
+  no toolbar, no resize handle, and a double-click opens nothing. An empty note is
+  quiet too: the _Double-click to edit_ hint belongs to the editor, and on these
+  canvases it named the one gesture the note refuses. Everything the note says stays
+  exactly as readable, formatting and all — this removes affordances, not content.
+
+  A double-click on a read-only note now reaches the canvas instead of being
+  swallowed, so it zooms there like a double-click on a node card or on empty space.
+  A group frame's label was swallowing it the same way, and no longer does — the note
+  and that label were the two places on those canvases where the gesture did nothing
+  at all, and a dead spot reads as broken. The zoom itself is how these canvases
+  behave rather than something promised: what is promised is that nothing opens to be
+  edited.
+
+  If you render `StickyNoteView` yourself: the read-only state _is_ the absence of
+  its callbacks. `onUpdate` and `onRemove` in `StickyNodeData` are now optional, and
+  a note handed neither draws no tools — the pattern `GroupFrameView` already used
+  for its own toolbar. Passing no-ops, which is what the two read-only panels did,
+  now means "editable, and nothing happens".
+
+  A host addressing the note's `Delete note` button or its colour swatches on a
+  replay or preview canvas will no longer find them. That is the fix, which is why
+  this is a patch: nothing here is additive, and what a host can observe is the
+  defect being gone.
+
 ## 0.6.0
 
 ### Minor Changes

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": "0.7.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 { 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)}(.*)*`;
@@ -27,9 +27,16 @@ const module$1 = defineNuxtModule({
     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 +59,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,7 @@ 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." }}
+          {{ testResult.ok ? t("integration.credentials.shared.test.ok") : testResult.error ?? t("integration.credentials.shared.test.failed") }}
         </div>
       </div>
 
@@ -267,11 +268,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>