@revenexx/studio-integrations 3.1.0 → 3.3.0

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, nextTick, onMounted, reactive, ref } from "vue";
+import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
 import {
   RefreshCircle as Loader2,
   AddCircle as Plus,
@@ -35,9 +35,11 @@ import { apiRefusal, errorReason } from "../../utils/apiError";
 import { CREDENTIAL_STATES, credentialState, credentialStateLabel, providerStepWord } from "../../utils/credentialState";
 import { hasRevenexxSource } from "../../utils/revenexxCredentialSource";
 import { resolveLocalized } from "../../utils/localize";
+import { defaultsFor } from "../../utils/configDefaults";
 import { fromModelValue, toItemValue, toModelValue } from "../../utils/selectOptions";
 import { keepOpenBeside } from "../../utils/dialog";
 import { testOutcomeView } from "../../utils/credentialTest";
+import { credentialNetworkPayload, credentialVpnBadge, replacedFieldTexts } from "../../utils/vpnRoute";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.credentials.list.head.title") });
 const { credentials, loading, error, load, create, update, remove, testInline, test, oauthAuthorizeUrl } = useIntegrationsCredentials();
@@ -45,6 +47,13 @@ const { types, load: loadTypes, bySlug } = useCredentialTypes();
 onMounted(async () => {
   await Promise.all([load(), loadTypes()]);
 });
+const { connections: vpnConnections, loaded: vpnLoaded, load: loadVpn } = useVpnConnections();
+watch(() => credentials.value.some((c) => c.network), (has) => {
+  if (has) void loadVpn();
+}, { immediate: true });
+function vpnBadge(c) {
+  return credentialVpnBadge(c.network, vpnConnections.value, vpnLoaded.value);
+}
 function typeFor(slug) {
   return bySlug(slug);
 }
@@ -108,12 +117,19 @@ const testing = ref(false);
 const testResult = ref(null);
 const saveRefusal = ref(null);
 const sourceActive = ref(false);
+const network = ref(null);
+const networkComplete = ref(true);
+const replaced = computed(() => replacedFieldTexts(pickedType.value, network.value, vpnConnections.value));
+function networkPayload() {
+  return pickedType.value?.network ? credentialNetworkPayload(network.value) : void 0;
+}
 const isEdit = computed(() => editing.value !== null);
 function fieldsOf(t2) {
   return t2?.fields ?? [];
 }
 const drawnKeys = computed(() => [
   "name",
+  ...pickedType.value?.network ? ["network"] : [],
   ...sourceActive.value ? [] : fieldsOf(pickedType.value).map((f) => `config.${f.key}`)
 ]);
 const refusal = computed(() => apiRefusal(saveRefusal.value, drawnKeys.value));
@@ -131,20 +147,30 @@ async function focusFirstRefusedField() {
   await nextTick();
   const key = drawnKeys.value.find((k) => k in fieldErrors.value);
   if (!key) return;
-  const id = key === "name" ? "cred-name" : `cred-field-${key.slice("config.".length)}`;
+  const id = key === "name" ? "cred-name" : key === "network" ? "cred-network-public" : `cred-field-${key.slice("config.".length)}`;
   document.getElementById(id)?.focus();
 }
 function clearRefusal() {
   saveRefusal.value = null;
 }
+function pickCreateType(picked) {
+  pickedType.value = picked;
+  form.name = resolveLocalized(picked.name);
+  form.config = defaultsFor(fieldsOf(picked));
+  network.value = null;
+  testResult.value = null;
+  sourceActive.value = false;
+  clearRefusal();
+}
 function openCreate(t2) {
   editing.value = null;
   pickedType.value = t2 ?? null;
   form.name = "";
-  form.config = {};
+  form.config = defaultsFor(fieldsOf(pickedType.value));
   testResult.value = null;
   clearRefusal();
   sourceActive.value = false;
+  network.value = null;
   dialogOpen.value = true;
 }
 const detailOpen = ref(false);
@@ -180,7 +206,7 @@ async function runTest() {
   testResult.value = null;
   clearRefusal();
   try {
-    testResult.value = isEdit.value && editing.value ? await test(editing.value.id) : await testInline(pickedType.value.slug, buildConfigPayload());
+    testResult.value = isEdit.value && editing.value ? await test(editing.value.id) : await testInline(pickedType.value.slug, buildConfigPayload(), networkPayload());
   } finally {
     testing.value = false;
   }
@@ -191,14 +217,15 @@ async function submit() {
   clearRefusal();
   try {
     if (isEdit.value && editing.value) {
-      await update(editing.value.id, { name: form.name.trim(), config: buildConfigPayload() });
+      await update(editing.value.id, { name: form.name.trim(), config: buildConfigPayload(), network: networkPayload() });
       dialogOpen.value = false;
       toast.success(t("integration.credentials.toast.updated"));
     } else {
       const created = await create({
         credential_type_slug: pickedType.value.slug,
         name: form.name.trim(),
-        config: buildConfigPayload()
+        config: buildConfigPayload(),
+        network: networkPayload()
       });
       dialogOpen.value = false;
       toast.success(t("integration.credentials.toast.created"));
@@ -285,7 +312,18 @@ async function confirmDelete() {
         </template>
 
         <template #cell-name="{ row: c }">
-          <span class="text-sm truncate">{{ c.name }}</span>
+          <div class="flex min-w-0 items-center gap-1.5">
+            <span class="text-sm truncate">{{ c.name }}</span>
+            <!-- Reached through a VPN route: which connection, and — where the
+                 reference no longer resolves — that it is broken, before a run says
+                 so (specs/credential-network.md AC-7). -->
+            <span
+              v-if="vpnBadge(c)"
+              class="shrink-0 rounded-full border px-1.5 py-px text-[10px] font-medium"
+              :class="vpnBadge(c).tone"
+              :aria-label="t('integration.vpn.badge.aria', { name: c.name, badge: vpnBadge(c).text })"
+            >{{ vpnBadge(c).text }}</span>
+          </div>
         </template>
 
         <template #cell-status="{ row: c }">
@@ -353,11 +391,7 @@ async function confirmDelete() {
         <IntegrationsCredentialTypePicker
           v-if="!pickedType"
           :types="types"
-          @pick="(picked) => {
-  pickedType = picked;
-  form.name = resolveLocalized(picked.name);
-  clearRefusal();
-}"
+          @pick="pickCreateType"
         />
 
         <!-- Step 2: dynamic form -->
@@ -390,15 +424,33 @@ async function confirmDelete() {
             @apply="(c2) => Object.assign(form.config, c2)"
           />
 
+          <!-- Public internet or a VPN route — for a type that says which of its
+               fields a route stands in for (specs/credential-network.md). -->
+          <IntegrationsCredentialNetworkSection
+            v-model="network"
+            :type="pickedType"
+            id-prefix="cred-network"
+            :error="fieldErrors.network"
+            @update:complete="(c2) => networkComplete = c2"
+          />
+
           <!-- Each label names its own control (`for`/`id`): without it a screen
                reader reads the field as unlabelled, and the label text cannot be
                used to reach it at all. -->
           <div v-for="f in fieldsOf(pickedType)" v-show="!sourceActive" :key="f.key" class="space-y-1.5">
             <Label :for="`cred-field-${f.key}`">{{ resolveLocalized(f.label) }}{{ f.required ? " *" : "" }}</Label>
 
+            <!-- stood in for by the chosen VPN route: what it reaches, not editable -->
+            <Input
+              v-if="replaced[f.key]"
+              :id="`cred-field-${f.key}`"
+              :model-value="replaced[f.key]"
+              readonly
+              class="bg-muted/40"
+            />
             <!-- secret -->
             <Input
-              v-if="f.type === 'secret'"
+              v-else-if="f.type === 'secret'"
               :id="`cred-field-${f.key}`"
               :model-value="form.config[f.key] ?? ''"
               type="password"
@@ -492,12 +544,12 @@ async function confirmDelete() {
           </Button>
           <span v-else />
           <div class="flex items-center gap-2">
-            <Button variant="outline" :disabled="saving || testing" @click="runTest">
+            <Button variant="outline" :disabled="saving || testing || !networkComplete" @click="runTest">
               <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
               <TestIcon v-else :size="14" class="mr-1" />
               {{ t("integration.credentials.shared.action.testConnection") }}
             </Button>
-            <Button :disabled="saving || !form.name.trim()" @click="submit">
+            <Button :disabled="saving || !form.name.trim() || !networkComplete" @click="submit">
               <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
               {{ t("integration.common.action.save") }}
             </Button>

package/dist/runtime/pages/integrations/templates/[slug].vue

@@ -22,7 +22,7 @@ import { keepOpenBeside } from "../../../utils/dialog";
 const t = useIntegrationsT();
 const route = useRoute();
 const router = useRouter();
-const { get, load, loaded, fetchDetail, requirements } = useIntegrationsTemplates();
+const { get, load, loaded, fetchDetail, checkRequirements, uncheckedReason } = useIntegrationsTemplates();
 const { load: loadNodeCatalog, findManifest, resolveLocalized } = useIntegrationsNodes();
 const { keys: secretKeys, load: loadSecrets } = useIntegrationsSecrets();
 const { ofType, load: loadCredentials } = useIntegrationsCredentials();
@@ -30,10 +30,15 @@ const slug = computed(() => String(route.params.slug));
 const tpl = computed(() => get(slug.value));
 useHead({ title: () => t("integration.templates.detail.head.title", { name: tpl.value?.name ?? t("integration.templates.detail.head.fallbackName") }) });
 const reqs = ref(null);
+const reqsError = ref(null);
 onMounted(async () => {
-  await load();
-  await Promise.all([fetchDetail(slug.value), loadNodeCatalog(false, { summary: true }), loadCredentials(), loadSecrets()]);
-  reqs.value = await requirements(slug.value);
+  try {
+    await load();
+    await Promise.all([fetchDetail(slug.value), loadNodeCatalog(false, { summary: true }), loadCredentials(), loadSecrets()]);
+    reqs.value = await checkRequirements(slug.value);
+  } catch (e) {
+    reqsError.value = uncheckedReason(e);
+  }
 });
 const descriptionHtml = computed(() => renderTemplateDescription(tpl.value?.descriptionMd));
 const steps = computed(() => {
@@ -104,24 +109,14 @@ const variableColumns = computed(() => [
 ]);
 const credentialReqs = computed(() => reqs.value?.credentialTypes ?? []);
 const secretReqs = computed(() => reqs.value?.secrets ?? []);
-const secretChecks = computed(() => {
-  const fromApi = secretReqs.value;
-  if (fromApi.length) {
-    return fromApi.map((s) => ({
-      key: s.key,
-      label: s.key ?? t("integration.templates.detail.secrets.chosenAtInstall"),
-      present: s.exists || (s.key ? secretKeys.value.includes(s.key) : false)
-    }));
-  }
-  return (tpl.value?.requiredSecrets ?? []).map((key) => ({
-    key,
-    label: key,
-    present: secretKeys.value.includes(key)
-  }));
-});
+const secretChecks = computed(() => secretReqs.value.map((s) => ({
+  key: s.key,
+  label: s.key ?? t("integration.templates.detail.secrets.chosenAtInstall"),
+  present: s.exists || (s.key ? secretKeys.value.includes(s.key) : false)
+})));
 const missingSecrets = computed(() => secretChecks.value.filter((s) => !s.present).length);
 const missingCredentials = computed(() => credentialReqs.value.filter((c) => !ofType(c.slug).length).length);
-const setupReady = computed(() => missingSecrets.value === 0 && missingCredentials.value === 0);
+const setupReady = computed(() => reqs.value !== null && missingSecrets.value === 0 && missingCredentials.value === 0);
 const packageLabel = computed(() => tpl.value ? templatePackageLabel(tpl.value) : null);
 const categoryLabel = computed(() => templateCategoryLabel(tpl.value?.category ?? ""));
 const installOpen = ref(false);
@@ -298,11 +293,15 @@ function levelDot(level) {
                  point `aria-labelledby` at. Copy this pattern only for a panel
                  that genuinely has none. -->
             <div role="group" :aria-label="t('integration.templates.detail.setup.ariaLabel')" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2.5">
-              <div v-if="setupReady" class="flex items-center gap-1.5 text-sm text-emerald-700">
+              <div v-if="reqsError" class="flex items-start gap-1.5 text-sm text-amber-700" data-testid="template-setup-unchecked">
+                <ShieldAlert :size="14" class="mt-0.5 shrink-0" />
+                {{ t("integration.templates.detail.setup.unchecked", { reason: reqsError }) }}
+              </div>
+              <div v-else-if="setupReady" class="flex items-center gap-1.5 text-sm text-emerald-700">
                 <CheckCircle2 :size="14" />
                 {{ t("integration.templates.detail.setup.ready") }}
               </div>
-              <div v-else class="text-sm text-amber-700 space-y-0.5">
+              <div v-else-if="reqs" class="text-sm text-amber-700 space-y-0.5">
                 <div v-if="missingCredentials" class="flex items-center gap-1.5">
                   <Key :size="12" />
                   {{ t("integration.templates.detail.setup.missingCredentials", missingCredentials) }}

package/dist/runtime/types/integrations.d.ts

@@ -282,7 +282,10 @@ export interface NodeManifestOutput {
 }
 export type ConfigFieldType = 'string' | 'number' | 'boolean' | 'select' | 'multiselect' | 'object' | 'array' | 'expression' | 'secret-ref' | 'credentials-ref'
 /** Names one of the workflow's declared state namespaces (PO-374). */
- | 'state-ref' | 'dynamic-schema';
+ | 'state-ref'
+/** A route of one of the tenant's VPN connections, or the public internet
+ *  (PO-831). Stored as `VpnRouteValue | null`. */
+ | 'vpn-route' | 'dynamic-schema';
 export interface ConfigFieldOption {
     value: string | number | boolean;
     label: LocalizedString;
@@ -335,6 +338,11 @@ export interface ConfigField {
      * the stored value is the namespace NAME.
      */
     stateRole?: WorkflowStateRole;
+    /**
+     * Only for `type: 'vpn-route'` (PO-831): which kind of route the picker offers.
+     * `http` where the node declares nothing, as the SDK defaults it.
+     */
+    routeKind?: VpnRouteKind;
     /** keys of other config fields this field's options/schema depend on. */
     dependsOn?: string[];
     /** When this setting applies at all (PO-410): another setting's key, an
@@ -471,6 +479,8 @@ export interface CredentialTypeField {
     type: 'string' | 'number' | 'boolean' | 'select' | 'secret';
     label: LocalizedString;
     required?: boolean;
+    /** What the system uses when the operator changes nothing; a new credential's form starts from it (IN-38). */
+    default?: string | number | boolean;
     options?: Array<{
         label: LocalizedString;
         value: string | number | boolean;
@@ -503,6 +513,27 @@ export interface CredentialType {
     images?: CredentialTypeImage[];
     auth_kind: AuthKind;
     fields: CredentialTypeField[];
+    /**
+     * Which of the type's fields a VPN route stands in for (PO-829, the SDK's
+     * `ICredentialDescription.network`). Absent: the type cannot be routed through a
+     * VPN, and the credential forms draw no Network section for it.
+     */
+    network?: CredentialNetworkDeclaration | null;
+}
+/** What a credential type declares a VPN route replaces. */
+export type CredentialNetworkDeclaration = {
+    kind: 'tcp';
+    hostField: string;
+    portField: string;
+} | {
+    kind: 'http';
+    urlField: string;
+};
+/** How a stored credential reaches its system, when not over the public internet. */
+export interface CredentialNetwork {
+    kind: 'vpn';
+    connection: string;
+    route: string;
 }
 export type CredentialStatus = 'active' | 'needs_reauth';
 /** A tenant's credential instance (secret fields never returned). */
@@ -517,9 +548,35 @@ export interface Credential {
     last_test_at?: string | null;
     last_test_ok?: boolean | null;
     last_test_message?: string | null;
+    /** The VPN route this credential is reached through; `null` or absent = public internet. */
+    network?: CredentialNetwork | null;
     created_at: string;
     updated_at: string;
 }
+export type VpnRouteKind = 'http' | 'tcp';
+/** Console's derived status of a connection; only `active` carries traffic. */
+export type VpnConnectionStatus = 'provisioning' | 'failed' | 'active' | 'down' | 'standby' | 'disabled' | 'unknown';
+export interface VpnRoute {
+    name: string;
+    kind: VpnRouteKind;
+    /** The target inside the tenant's network. */
+    host: string;
+    port: number;
+    proto?: string | null;
+    /** Where the gateway serves the route (http: a URL, tcp: `ip:port`). */
+    endpoint?: string | null;
+}
+export interface VpnConnection {
+    name: string;
+    display_name?: string | null;
+    status: VpnConnectionStatus | string;
+    routes: VpnRoute[];
+}
+/** What a `vpn-route` setting stores, and what a credential's `network` names. */
+export interface VpnRouteValue {
+    connection: string;
+    route: string;
+}
 export type ConnectionStatus = 'connected' | 'misconfigured' | 'unverified' | 'failing';
 export interface ConnectionTemplate {
     /** kebab-case slug (e.g. 'shopify'). */
@@ -698,6 +755,17 @@ export interface WorkflowRunNodeStep {
     attempt: number;
     durationMs: number | null;
 }
+export interface RunStepFrame {
+    file: string;
+    line: number;
+    column: number;
+    name?: string | null;
+}
+export interface RunStepError {
+    message: string;
+    type?: string;
+    frames?: RunStepFrame[];
+}
 export interface RunStepRow {
     node_id: string;
     node_slug: string;
@@ -716,7 +784,11 @@ export interface RunStepRow {
         port: string;
     } | null;
     branch?: string | null;
-    error?: string | null;
+    /**
+     * Why the step failed. The platform sends the object; a string is what older
+     * rows and older mocks carry. Read it through `utils/stepError.ts`, never print it.
+     */
+    error?: RunStepError | string | null;
     input?: unknown;
     output?: unknown;
     /** Resolved node config for this step (present with include_payloads). */

package/dist/runtime/utils/configDefaults.d.ts

@@ -9,8 +9,11 @@ import type { ConfigField } from '../types/integrations.js';
  * applied never gets to apply it. An absent key is the absence the node's
  * default answers to.
  *
- * Used in the two places a fresh set of values is made: a node dropped on the
- * canvas (WorkflowEditor), and a row added to a list setting (NodeConfigField).
+ * Used wherever a fresh set of values is made: a node dropped on the canvas
+ * (WorkflowEditor), a row added to a list setting (NodeConfigField), and a
+ * credential's form — a new one in both create dialogs, and a stored one's
+ * missing fields in the detail view (IN-38), which also compares an edit against
+ * it. A change here changes all of them.
  * Flat on purpose — it reads `default` at the level it is given and does not
  * descend into `properties` or `items`, so what a newly inserted node carries
  * is exactly what it carried before this became shared.

package/dist/runtime/utils/stepError.d.ts

@@ -0,0 +1,13 @@
+import type { RunStepError, RunStepFrame } from '../types/integrations.js';
+/**
+ * A failed step's error as an operator reads it (IN-12).
+ *
+ * The platform sends it as an object — the message, the failure's type, and where
+ * the node package's own code was when it failed (`frames`, PO-447). The studio used
+ * to read it as text, and a template prints an object as JSON. A row from before the
+ * object, or a mock that still answers a string, is read as the message itself, so
+ * no shape ever reaches the screen as a dump.
+ */
+export declare function stepError(error: unknown): RunStepError | null;
+/** One frame as a reader names it: `src/nodes/Foo.ts:12:5` and the function, where known. */
+export declare function frameLabel(frame: RunStepFrame): string;

package/dist/runtime/utils/stepError.js

@@ -0,0 +1,24 @@
+export function stepError(error) {
+  if (typeof error === "string") return error.trim() === "" ? null : { message: error };
+  if (error === null || typeof error !== "object") return null;
+  const raw = error;
+  const message = typeof raw.message === "string" && raw.message.trim() !== "" ? raw.message : null;
+  if (message === null) return null;
+  return {
+    message,
+    ...typeof raw.type === "string" && raw.type.trim() !== "" ? { type: raw.type } : {},
+    ...Array.isArray(raw.frames) ? { frames: raw.frames.filter(isFrame).map(withName) } : {}
+  };
+}
+export function frameLabel(frame) {
+  const at = `${frame.file}:${frame.line}:${frame.column}`;
+  return frame.name ? `${frame.name} (${at})` : at;
+}
+function isFrame(value) {
+  if (value === null || typeof value !== "object") return false;
+  const f = value;
+  return typeof f.file === "string" && typeof f.line === "number" && typeof f.column === "number";
+}
+function withName(frame) {
+  return typeof frame.name === "string" && frame.name.trim() !== "" ? frame : { file: frame.file, line: frame.line, column: frame.column };
+}

package/dist/runtime/utils/vpnRoute.d.ts

@@ -0,0 +1,69 @@
+import type { CredentialNetwork, CredentialNetworkDeclaration, CredentialType, VpnConnection, VpnRoute, VpnRouteKind, VpnRouteValue } from '../types/integrations.js';
+/**
+ * What the studio makes of a VPN route reference — a credential's `network`, or the
+ * value of a `vpn-route` setting — against the tenant's connections
+ * (specs/credential-network.md). Pure, so the surfaces that draw it agree.
+ */
+/** The name a connection is shown under: its display name, else its own. */
+export declare function connectionLabel(c: Pick<VpnConnection, 'name' | 'display_name'>): string;
+/** The routes of a connection a picker filtered to `kind` offers. */
+export declare function routesOfKind(c: VpnConnection | undefined, kind: VpnRouteKind): VpnRoute[];
+/** Whether a stored value names a route at all, as opposed to the public internet. */
+export declare function isVpnRouteValue(v: unknown): v is VpnRouteValue;
+export type VpnReference = 
+/** The route exists; `active` says whether its connection carries traffic now. */
+{
+    state: 'ok';
+    connection: VpnConnection;
+    route: VpnRoute;
+    active: boolean;
+}
+/** The connection or the route is gone — a broken reference. */
+ | {
+    state: 'missing';
+    connection?: VpnConnection;
+};
+/**
+ * Resolve a reference against the tenant's connections. A connection that is still
+ * there but no longer has the route counts as missing, as the backend refuses it
+ * with `VPN_ROUTE_MISSING` either way.
+ */
+export declare function resolveVpnReference(connections: readonly VpnConnection[], ref: VpnRouteValue): VpnReference;
+/** The keys of a credential type's fields a VPN route stands in for. */
+export declare function replacedFieldKeys(decl: CredentialNetworkDeclaration | null | undefined): string[];
+/**
+ * What a replaced field reads while a route stands in for it: `host:port via
+ * <connection>` for a tcp route, the gateway's endpoint for an http one — the
+ * address the request is actually sent to.
+ */
+export declare function routeTargetText(route: VpnRoute, connection: VpnConnection): string;
+/**
+ * The read-only text of every field a chosen route replaces, keyed by field. Empty
+ * while the credential is reached over the public internet, or while the route
+ * cannot be resolved — then the fields keep their stored values on screen.
+ */
+export declare function replacedFieldTexts(type: Pick<CredentialType, 'network'> | null | undefined, value: VpnRouteValue | null, connections: readonly VpnConnection[]): Record<string, string>;
+/** Whether the gateway reaches the target over TLS it does not verify. */
+export declare function isHttpsTarget(route: VpnRoute | undefined): boolean;
+/** The credential's `network` as the service takes it, from what the form holds. */
+export declare function credentialNetworkPayload(value: VpnRouteValue | null): CredentialNetwork | null;
+/** The picker's value from what a credential stores. */
+export declare function fromCredentialNetwork(n: CredentialNetwork | null | undefined): VpnRouteValue | null;
+/** Whether two values name the same route (both public counts as the same). */
+export declare function sameVpnRoute(a: VpnRouteValue | null, b: VpnRouteValue | null): boolean;
+/** A connection's status in the reader's words; an unforeseen one reads as unknown. */
+export declare function connectionStatusLabel(status: string): string;
+/** Badge classes for a connection status: green only for one that carries traffic. */
+export declare function connectionStatusTone(status: string): string;
+/**
+ * The VPN badge a credential carries where it is picked or listed, or `null` for one
+ * reached over the public internet. `connections` loaded or not decides whether a
+ * reference nothing resolves is called broken: before the list arrives it is only
+ * named.
+ */
+export declare function credentialVpnBadge(network: CredentialNetwork | null | undefined, connections: readonly VpnConnection[], loaded: boolean): {
+    text: string;
+    broken: boolean;
+    active: boolean;
+    tone: string;
+} | null;

package/dist/runtime/utils/vpnRoute.js

@@ -0,0 +1,79 @@
+import { useIntegrationsT } from "../composables/useIntegrationsT.js";
+export function connectionLabel(c) {
+  return c.display_name?.trim() || c.name;
+}
+export function routesOfKind(c, kind) {
+  return (c?.routes ?? []).filter((r) => r.kind === kind);
+}
+export function isVpnRouteValue(v) {
+  return !!v && typeof v === "object" && typeof v.connection === "string" && v.connection !== "" && typeof v.route === "string" && v.route !== "";
+}
+export function resolveVpnReference(connections, ref) {
+  const connection = connections.find((c) => c.name === ref.connection);
+  const route = connection?.routes.find((r) => r.name === ref.route);
+  if (!connection || !route) return { state: "missing", connection };
+  return { state: "ok", connection, route, active: connection.status === "active" };
+}
+export function replacedFieldKeys(decl) {
+  if (!decl) return [];
+  return decl.kind === "tcp" ? [decl.hostField, decl.portField] : [decl.urlField];
+}
+export function routeTargetText(route, connection) {
+  const t = useIntegrationsT();
+  const target = route.kind === "http" && route.endpoint ? route.endpoint : `${route.host}:${route.port}`;
+  return t("integration.vpn.target", { target, connection: connectionLabel(connection) });
+}
+export function replacedFieldTexts(type, value, connections) {
+  const keys = replacedFieldKeys(type?.network);
+  if (!keys.length || !value) return {};
+  const ref = resolveVpnReference(connections, value);
+  if (ref.state !== "ok") return {};
+  const text = routeTargetText(ref.route, ref.connection);
+  return Object.fromEntries(keys.map((k) => [k, text]));
+}
+export function isHttpsTarget(route) {
+  return (route?.proto ?? "").toLowerCase() === "https";
+}
+export function credentialNetworkPayload(value) {
+  return value ? { kind: "vpn", connection: value.connection, route: value.route } : null;
+}
+export function fromCredentialNetwork(n) {
+  return n && n.kind === "vpn" && n.connection && n.route ? { connection: n.connection, route: n.route } : null;
+}
+export function sameVpnRoute(a, b) {
+  if (!a || !b) return !a && !b;
+  return a.connection === b.connection && a.route === b.route;
+}
+const STATUS_KEYS = ["provisioning", "failed", "active", "down", "standby", "disabled", "unknown"];
+export function connectionStatusLabel(status) {
+  const key = STATUS_KEYS.includes(status) ? status : "unknown";
+  return useIntegrationsT()(`integration.vpn.status.${key}`);
+}
+export function connectionStatusTone(status) {
+  if (status === "active") return "bg-emerald-500/10 border-emerald-500/20 text-emerald-700";
+  if (status === "failed" || status === "down") return "bg-rose-500/10 border-rose-500/20 text-rose-700";
+  if (status === "provisioning" || status === "standby") return "bg-amber-500/10 border-amber-500/20 text-amber-700";
+  return "bg-slate-500/10 border-slate-500/20 text-slate-600";
+}
+export function credentialVpnBadge(network, connections, loaded) {
+  const value = fromCredentialNetwork(network);
+  if (!value) return null;
+  const t = useIntegrationsT();
+  if (!loaded) {
+    return { text: t("integration.vpn.badge.named", { connection: value.connection }), broken: false, active: true, tone: connectionStatusTone("unknown") };
+  }
+  const ref = resolveVpnReference(connections, value);
+  if (ref.state === "missing") {
+    return { text: t("integration.vpn.badge.missing"), broken: true, active: false, tone: connectionStatusTone("failed") };
+  }
+  const name = connectionLabel(ref.connection);
+  if (ref.active) {
+    return { text: t("integration.vpn.badge.named", { connection: name }), broken: false, active: true, tone: connectionStatusTone("active") };
+  }
+  return {
+    text: t("integration.vpn.badge.withState", { connection: name, status: connectionStatusLabel(String(ref.connection.status)) }),
+    broken: false,
+    active: false,
+    tone: connectionStatusTone(String(ref.connection.status))
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revenexx/studio-integrations",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "type": "module",
   "description": "Integration Studio (core: workflows, node editor, runs, schedules, credentials, secrets, audit) as a standalone, publishable Nuxt module.",
   "repository": {