@revenexx/studio-integrations 3.2.0 → 3.3.0

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

@@ -0,0 +1,194 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import {
+  Button,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@revenexx/studio";
+import {
+  connectionLabel,
+  connectionStatusLabel,
+  connectionStatusTone,
+  isHttpsTarget,
+  resolveVpnReference,
+  routesOfKind
+} from "../../utils/vpnRoute";
+import { servedPaths } from "../../utils/servedPaths";
+const props = defineProps({
+  modelValue: { type: [Object, null], required: true },
+  kind: { type: String, required: true },
+  idPrefix: { type: String, required: true },
+  label: { type: String, required: false },
+  error: { type: String, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:complete"]);
+const t = useIntegrationsT();
+const { connections, loaded, loading, error: loadError, load } = useVpnConnections();
+onMounted(() => {
+  void load(true);
+});
+const viaVpn = ref(!!props.modelValue);
+const pickedConnection = ref(props.modelValue?.connection ?? "");
+watch(() => props.modelValue ? `${props.modelValue.connection}\0${props.modelValue.route}` : "", () => {
+  const v = props.modelValue;
+  if (v) {
+    viaVpn.value = true;
+    pickedConnection.value = v.connection;
+  }
+});
+const current = computed(() => props.modelValue?.connection === pickedConnection.value ? props.modelValue : null);
+const complete = computed(() => !viaVpn.value || !!current.value);
+watch(complete, (c) => emit("update:complete", c), { immediate: true });
+onUnmounted(() => emit("update:complete", true));
+function name(key) {
+  const base = t(key);
+  return props.label ? t("integration.vpn.picker.ariaFor", { label: props.label, control: base }) : base;
+}
+function setMode(mode) {
+  if (mode === "vpn") {
+    viaVpn.value = true;
+    return;
+  }
+  viaVpn.value = false;
+  pickedConnection.value = "";
+  emit("update:modelValue", null);
+}
+const connection = computed(() => connections.value.find((c) => c.name === pickedConnection.value));
+const routes = computed(() => routesOfKind(connection.value, props.kind));
+function pickConnection(v) {
+  const next = String(v ?? "");
+  if (next === pickedConnection.value) return;
+  pickedConnection.value = next;
+}
+function pickRoute(v) {
+  const route = String(v ?? "");
+  if (!route || !pickedConnection.value) return;
+  emit("update:modelValue", { connection: pickedConnection.value, route });
+}
+const reference = computed(() => current.value && loaded.value ? resolveVpnReference(connections.value, current.value) : null);
+const chosenRoute = computed(() => reference.value?.state === "ok" ? reference.value.route : void 0);
+const noConnections = computed(() => loaded.value && !connections.value.length);
+const pending = computed(() => {
+  if (complete.value) return "";
+  const stored = props.modelValue;
+  if (!stored) return t("integration.vpn.picker.pending.public");
+  const via = connections.value.find((c) => c.name === stored.connection);
+  return t("integration.vpn.picker.pending.route", { route: stored.route, connection: via ? connectionLabel(via) : stored.connection });
+});
+const VPN_PAGE = "/integrations/vpn";
+const router = useRouter();
+function vpnPageServed() {
+  return servedPaths(router.getRoutes().map((r) => r.path)).has(VPN_PAGE);
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <RadioGroup
+      :model-value="viaVpn ? 'vpn' : 'public'"
+      :aria-label="name('integration.vpn.picker.group')"
+      class="gap-1.5"
+      @update:model-value="(v) => setMode(String(v))"
+    >
+      <div class="flex items-center gap-2">
+        <RadioGroupItem :id="`${idPrefix}-public`" value="public" />
+        <Label :for="`${idPrefix}-public`" class="font-normal">{{ t("integration.vpn.picker.public") }}</Label>
+      </div>
+      <div class="flex items-center gap-2">
+        <!-- Not offered where there is nothing to pick from — unless a stored route
+             already points through one, which has to stay readable as such. -->
+        <RadioGroupItem :id="`${idPrefix}-vpn`" value="vpn" :disabled="noConnections && !modelValue" />
+        <Label :for="`${idPrefix}-vpn`" class="font-normal">{{ t("integration.vpn.picker.vpn") }}</Label>
+      </div>
+    </RadioGroup>
+
+    <p v-if="noConnections" class="text-sm text-muted-foreground">
+      {{ t("integration.vpn.empty.text") }}
+      <NuxtLink v-if="vpnPageServed()" :to="VPN_PAGE" class="font-medium text-violet-600 hover:underline">{{ t("integration.vpn.empty.link") }}</NuxtLink>
+      <template v-else>{{ t("integration.vpn.empty.elsewhere") }}</template>
+    </p>
+
+    <template v-if="viaVpn">
+      <p v-if="loading && !loaded" class="text-sm text-muted-foreground">{{ t("integration.vpn.loading") }}</p>
+      <div v-else-if="loadError" role="alert" class="flex items-center gap-2 text-sm text-rose-700">
+        <span>{{ loadError }}</span>
+        <Button variant="outline" size="sm" class="h-7" @click="load(true)">{{ t("integration.common.action.retry") }}</Button>
+      </div>
+
+      <template v-if="loaded">
+        <div class="space-y-1.5">
+          <Label :for="`${idPrefix}-connection`">{{ t("integration.vpn.picker.connection") }}</Label>
+          <Select :model-value="pickedConnection" @update:model-value="pickConnection">
+            <SelectTrigger :id="`${idPrefix}-connection`" :aria-label="name('integration.vpn.picker.connection')" class="bg-white">
+              <SelectValue :placeholder="t('integration.vpn.picker.connection.placeholder')">
+                <span v-if="connection" class="flex min-w-0 items-center gap-1.5">
+                  <span class="min-w-0 truncate">{{ connectionLabel(connection) }}</span>
+                  <span class="shrink-0 rounded-full border px-1.5 py-px text-[10px] font-medium" :class="connectionStatusTone(String(connection.status))">
+                    {{ connectionStatusLabel(String(connection.status)) }}
+                  </span>
+                </span>
+                <span v-else-if="pickedConnection" class="text-rose-600">{{ pickedConnection }}</span>
+                <span v-else class="text-muted-foreground">{{ t("integration.vpn.picker.connection.placeholder") }}</span>
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="c in connections" :key="c.name" :value="c.name">
+                <span class="flex items-center gap-1.5">
+                  <span class="min-w-0 truncate">{{ connectionLabel(c) }}</span>
+                  <span class="shrink-0 rounded-full border px-1.5 py-px text-[10px] font-medium" :class="connectionStatusTone(String(c.status))">
+                    {{ connectionStatusLabel(String(c.status)) }}
+                  </span>
+                </span>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div v-if="pickedConnection" class="space-y-1.5">
+          <Label :for="`${idPrefix}-route`">{{ t("integration.vpn.picker.route") }}</Label>
+          <Select :model-value="current?.route ?? ''" @update:model-value="pickRoute">
+            <SelectTrigger :id="`${idPrefix}-route`" :aria-label="name('integration.vpn.picker.route')" class="bg-white">
+              <SelectValue :placeholder="t('integration.vpn.picker.route.placeholder')">
+                <span v-if="chosenRoute">{{ chosenRoute.name }} — {{ chosenRoute.host }}:{{ chosenRoute.port }}</span>
+                <span v-else-if="current?.route" class="text-rose-600">{{ current.route }}</span>
+                <span v-else class="text-muted-foreground">{{ t("integration.vpn.picker.route.placeholder") }}</span>
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="r in routes" :key="r.name" :value="r.name">
+                {{ r.name }} — {{ r.host }}:{{ r.port }}
+              </SelectItem>
+              <div v-if="!routes.length" class="px-2 py-1.5 text-sm text-muted-foreground">
+                {{ t(`integration.vpn.picker.route.empty.${kind}`) }}
+              </div>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <!-- A reference the tenant's connections no longer resolve. Said in words,
+             because the choice would otherwise look merely unfinished while every
+             run through it fails. -->
+        <p v-if="pending" class="text-sm text-amber-700">
+          {{ pending }}
+        </p>
+        <p v-if="reference?.state === 'missing' && current" class="text-sm text-rose-700">
+          {{ t("integration.vpn.reference.missing", { connection: current.connection, route: current.route }) }}
+        </p>
+        <p v-else-if="connection && connection.status !== 'active'" class="text-sm text-amber-700">
+          {{ t("integration.vpn.reference.inactive", { connection: connectionLabel(connection), status: connectionStatusLabel(String(connection.status)) }) }}
+        </p>
+        <p v-if="isHttpsTarget(chosenRoute)" class="text-sm text-muted-foreground">
+          {{ t("integration.vpn.httpsNote") }}
+        </p>
+      </template>
+    </template>
+
+    <p v-if="error" class="text-sm text-rose-700">{{ error }}</p>
+  </div>
+</template>

package/dist/runtime/components/Integrations/VpnRoutePicker.vue.d.ts

@@ -0,0 +1,20 @@
+import type { VpnRouteKind, VpnRouteValue } from '../../types/integrations.js';
+type __VLS_Props = {
+    modelValue: VpnRouteValue | null;
+    /** The kind of route on offer — the credential type's declared kind, or the setting's `routeKind`. */
+    kind: VpnRouteKind;
+    /** Prefix for the ids of the controls, unique on the page. */
+    idPrefix: string;
+    /** The setting this picker belongs to, prefixed to every control's name; absent in the credential forms. */
+    label?: string;
+    /** Why the last save refused the choice, if it did. */
+    error?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:complete": (args_0: boolean) => any;
+    "update:modelValue": (args_0: VpnRouteValue | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:complete"?: ((args_0: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: VpnRouteValue | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/composables/useIntegrationsCredentials.d.ts

@@ -1,4 +1,4 @@
-import type { Credential } from '../types/integrations.js';
+import type { Credential, CredentialNetwork } from '../types/integrations.js';
 import { IntegrationsApiError } from '../utils/apiError.js';
 /**
  * Typed, per-tenant credential instances, backed by the Integrations service
@@ -6,15 +6,19 @@ import { IntegrationsApiError } from '../utils/apiError.js';
  * carries `public_config` (non-secret fields) + `status` only.
  *
  *   GET    /credentials[?type=slug]      → list
- *   POST   /credentials                  → create { credential_type_slug, name, config }
+ *   POST   /credentials                  → create { credential_type_slug, name, config, network? }
  *   GET    /credentials/{id}             → show (masked)
- *   PATCH  /credentials/{id}             → update { name?, config? } (blank secret = keep,
- *                                          unless the same edit changes any other value:
- *                                          then 422 at config.<secret>, PO-765)
+ *   PATCH  /credentials/{id}             → update { name?, config?, network? } (blank secret = keep,
+ *                                          unless the same edit changes any other value
+ *                                          or the network: then 422 at config.<secret>, PO-765)
  *   DELETE /credentials/{id}             → remove
- *   POST   /credentials/test             → inline test { credential_type_slug, config }
- *   POST   /credentials/{id}/test        → test { config? } → { ok, message, recorded, last_test_at, last_test_ok }
+ *   POST   /credentials/test             → inline test { credential_type_slug, config, network? }
+ *   POST   /credentials/{id}/test        → test { config?, network? } → { ok, message, recorded, last_test_at, last_test_ok }
  *   POST   /credentials/{id}/oauth/authorize-url → { authorize_url }
+ *
+ * `network` is `{ kind: 'vpn', connection, route }` or `null` (public internet), and
+ * is sent only for a type that declares what a VPN route replaces (PO-829); left out,
+ * the service keeps what is stored.
  */
 /**
  * `message` is what the credential type said about the test, whichever way it went —
@@ -65,13 +69,15 @@ export declare function useIntegrationsCredentials(): {
         credential_type_slug: string;
         name: string;
         config: Record<string, unknown>;
+        network?: CredentialNetwork | null;
     }) => Promise<Credential>;
     update: (id: string, input: {
         name?: string;
         config?: Record<string, unknown>;
+        network?: CredentialNetwork | null;
     }) => Promise<Credential>;
     remove: (id: string) => Promise<void>;
-    testInline: (credentialTypeSlug: string, config: Record<string, unknown>) => Promise<CredentialTestResult>;
-    test: (id: string, config?: Record<string, unknown>) => Promise<CredentialTestResult>;
+    testInline: (credentialTypeSlug: string, config: Record<string, unknown>, network?: CredentialNetwork | null) => Promise<CredentialTestResult>;
+    test: (id: string, config?: Record<string, unknown>, network?: CredentialNetwork | null) => Promise<CredentialTestResult>;
     oauthAuthorizeUrl: (id: string) => Promise<string>;
 };

package/dist/runtime/composables/useIntegrationsCredentials.js

@@ -49,19 +49,24 @@ export function useIntegrationsCredentials() {
     await api.del(`/credentials/${encodeURIComponent(id)}`);
     credentials.value = credentials.value.filter((c) => c.id !== id);
   }
-  async function testInline(credentialTypeSlug, config) {
+  async function testInline(credentialTypeSlug, config, network) {
     try {
-      const res = await api.post("/credentials/test", { credential_type_slug: credentialTypeSlug, config });
+      const body = { credential_type_slug: credentialTypeSlug, config };
+      if (network !== void 0) body.network = network;
+      const res = await api.post("/credentials/test", body);
       return res?.ok === false ? res : { ok: true, message: res?.message };
     } catch (e) {
       return { ok: false, error: errorReason(e, t("integration.credentials.error.testFailed")) };
     }
   }
-  async function test(id, config) {
+  async function test(id, config, network) {
     try {
+      const body = {};
+      if (config) body.config = config;
+      if (network !== void 0) body.network = network;
       const res = await api.post(
         `/credentials/${encodeURIComponent(id)}/test`,
-        config ? { config } : void 0
+        Object.keys(body).length ? body : void 0
       );
       if (!config && res?.ok === false && res.recorded === false) return { ...res, untested: true };
       return res?.ok === false ? res : { ok: true, message: res?.message, recorded: res?.recorded };

package/dist/runtime/composables/useVpnConnections.d.ts

@@ -0,0 +1,19 @@
+import type { VpnConnection } from '../types/integrations.js';
+/**
+ * The tenant's VPN connections and their routes, as the Integrations service
+ * reports them (`GET /api/v1/vpn-connections`, PO-825). Each carries the status
+ * Console derives for it; only an `active` one carries traffic.
+ *
+ * Read by the credential forms' Network section, the credential picker's VPN badge
+ * and the `vpn-route` node setting — so it is one shared list, loaded once per page
+ * and re-read on request. A tenant without any answers an empty list; a Console
+ * that cannot be reached answers 502, which lands in `error` rather than reading as
+ * "no connections".
+ */
+export declare function useVpnConnections(): {
+    connections: any;
+    loading: any;
+    error: any;
+    loaded: any;
+    load: (force?: boolean) => Promise<VpnConnection[]>;
+};

package/dist/runtime/composables/useVpnConnections.js

@@ -0,0 +1,28 @@
+import { useIntegrationsApi } from "./integrationsApi.js";
+import { useIntegrationsT } from "./useIntegrationsT.js";
+import { errorReason } from "../utils/apiError.js";
+import { unwrapList } from "../utils/apiEnvelope.js";
+import { useLoadGate } from "./useLoadGate.js";
+export function useVpnConnections() {
+  const connections = useState("integrations.vpnConnections", () => []);
+  const loading = useState("integrations.vpnConnections.loading", () => false);
+  const error = useState("integrations.vpnConnections.error", () => null);
+  const loaded = useState("integrations.vpnConnections.loaded", () => false);
+  const gate = useLoadGate("integrations.vpnConnections", { loading, loaded });
+  const api = useIntegrationsApi();
+  const t = useIntegrationsT();
+  async function load(force = false) {
+    if (!await gate.claim(force)) return connections.value;
+    error.value = null;
+    try {
+      connections.value = unwrapList(await api.get("/vpn-connections"));
+      loaded.value = true;
+    } catch (e) {
+      error.value = errorReason(e, t("integration.vpn.error.load"));
+    } finally {
+      gate.release();
+    }
+    return connections.value;
+  }
+  return { connections, loading, error, loaded, load };
+}

package/dist/runtime/i18n/messages/de.json

@@ -574,8 +574,10 @@
   "integration.nodeConfig.credential.state.failed": "Letzter Test fehlgeschlagen: {message}",
   "integration.nodeConfig.credential.state.needsReauth": "Diese Zugangsdaten müssen neu verbunden werden.",
   "integration.nodeConfig.credential.trigger.bound": "{label}: {name}, {state}",
+  "integration.nodeConfig.credential.trigger.boundVpn": "{label}: {name}, {state}, {vpn}",
   "integration.nodeConfig.credential.trigger.unknown": "{label}: {unknown}",
   "integration.nodeConfig.credential.unknown": "Unbekannte Zugangsdaten — bitte erneut auswählen",
+  "integration.nodeConfig.credential.vpnInactive": "Ausführungen mit diesen Zugangsdaten schlagen fehl, bis ihre VPN-Verbindung wieder aktiv ist.",
   "integration.nodeConfig.dynamicField.currentNotResolved": "aktueller Wert nicht in den geladenen Optionen",
   "integration.nodeConfig.dynamicField.empty": "keine Optionen verfügbar",
   "integration.nodeConfig.dynamicField.emptyFiltered": "keine Optionen passen zum Filter",
@@ -1231,6 +1233,39 @@
   "integration.templates.trigger.manual": "Bei Bedarf ausführen",
   "integration.templates.trigger.webhook": "Webhook",
   "integration.triggers.error.loadFailed": "Trigger konnten nicht geladen werden.",
+  "integration.vpn.badge.aria": "{name}: {badge}",
+  "integration.vpn.badge.missing": "VPN-Route fehlt",
+  "integration.vpn.badge.named": "VPN · {connection}",
+  "integration.vpn.badge.withState": "VPN · {connection} ({status})",
+  "integration.vpn.empty.elsewhere": "VPN-Verbindungen werden im Cockpit eingerichtet.",
+  "integration.vpn.empty.link": "Jetzt einrichten",
+  "integration.vpn.empty.text": "Für diesen Mandanten ist noch keine VPN-Verbindung eingerichtet.",
+  "integration.vpn.error.load": "Die VPN-Verbindungen konnten nicht geladen werden.",
+  "integration.vpn.httpsNote": "Das Ziel wird über HTTPS erreicht; sein Zertifikat wird am Gateway nicht geprüft.",
+  "integration.vpn.loading": "VPN-Verbindungen werden geladen…",
+  "integration.vpn.picker.ariaFor": "{label}: {control}",
+  "integration.vpn.picker.connection": "VPN-Verbindung",
+  "integration.vpn.picker.connection.placeholder": "Verbindung auswählen",
+  "integration.vpn.picker.group": "Netzwerk",
+  "integration.vpn.picker.pending.public": "Noch keine Route gewählt. Bis eine gewählt ist, gilt das öffentliche Internet.",
+  "integration.vpn.picker.pending.route": "Noch keine Route gewählt. Bis eine gewählt ist, gilt {route} über {connection}.",
+  "integration.vpn.picker.public": "Öffentliches Internet",
+  "integration.vpn.picker.route": "Route",
+  "integration.vpn.picker.route.empty.http": "Diese Verbindung hat keine HTTP-Routen.",
+  "integration.vpn.picker.route.empty.tcp": "Diese Verbindung hat keine TCP-Routen.",
+  "integration.vpn.picker.route.placeholder": "Route auswählen",
+  "integration.vpn.picker.vpn": "Über VPN-Verbindung",
+  "integration.vpn.reference.inactive": "{connection} ist nicht aktiv ({status}) — Ausführungen darüber schlagen fehl, bis die Verbindung wieder aktiv ist.",
+  "integration.vpn.reference.missing": "Die VPN-Route {connection}/{route} existiert nicht mehr. Wählen Sie eine andere Route oder das öffentliche Internet.",
+  "integration.vpn.section.title": "Netzwerk",
+  "integration.vpn.status.active": "Aktiv",
+  "integration.vpn.status.disabled": "Deaktiviert",
+  "integration.vpn.status.down": "Getrennt",
+  "integration.vpn.status.failed": "Fehlgeschlagen",
+  "integration.vpn.status.provisioning": "Wird eingerichtet",
+  "integration.vpn.status.standby": "Bereitschaft",
+  "integration.vpn.status.unknown": "Unbekannt",
+  "integration.vpn.target": "{target} über {connection}",
   "integration.workflowFile.action.export": "Als Datei exportieren",
   "integration.workflowFile.action.import": "Aus Datei importieren…",
   "integration.workflowFile.count.both": "{nodes}, {triggers}",

package/dist/runtime/i18n/messages/en.json

@@ -574,8 +574,10 @@
   "integration.nodeConfig.credential.state.failed": "Last test failed: {message}",
   "integration.nodeConfig.credential.state.needsReauth": "This credential needs reconnect.",
   "integration.nodeConfig.credential.trigger.bound": "{label}: {name}, {state}",
+  "integration.nodeConfig.credential.trigger.boundVpn": "{label}: {name}, {state}, {vpn}",
   "integration.nodeConfig.credential.trigger.unknown": "{label}: {unknown}",
   "integration.nodeConfig.credential.unknown": "Unknown credential — pick again",
+  "integration.nodeConfig.credential.vpnInactive": "Runs that use this credential fail until its VPN connection is active again.",
   "integration.nodeConfig.dynamicField.currentNotResolved": "current value not in resolved options",
   "integration.nodeConfig.dynamicField.empty": "no options available",
   "integration.nodeConfig.dynamicField.emptyFiltered": "no options match the filter",
@@ -1231,6 +1233,39 @@
   "integration.templates.trigger.manual": "Run on demand",
   "integration.templates.trigger.webhook": "Webhook",
   "integration.triggers.error.loadFailed": "Could not load triggers.",
+  "integration.vpn.badge.aria": "{name}: {badge}",
+  "integration.vpn.badge.missing": "VPN route missing",
+  "integration.vpn.badge.named": "VPN · {connection}",
+  "integration.vpn.badge.withState": "VPN · {connection} ({status})",
+  "integration.vpn.empty.elsewhere": "VPN connections are set up in the cockpit.",
+  "integration.vpn.empty.link": "Set one up",
+  "integration.vpn.empty.text": "No VPN connection is set up for this tenant yet.",
+  "integration.vpn.error.load": "The VPN connections could not be loaded.",
+  "integration.vpn.httpsNote": "The target is reached over HTTPS, and its certificate is not verified at the gateway.",
+  "integration.vpn.loading": "Loading VPN connections…",
+  "integration.vpn.picker.ariaFor": "{label}: {control}",
+  "integration.vpn.picker.connection": "VPN connection",
+  "integration.vpn.picker.connection.placeholder": "Pick a connection",
+  "integration.vpn.picker.group": "Network",
+  "integration.vpn.picker.pending.public": "No route chosen yet. Until one is, the public internet is used.",
+  "integration.vpn.picker.pending.route": "No route chosen yet. Until one is, {route} via {connection} is used.",
+  "integration.vpn.picker.public": "Public internet",
+  "integration.vpn.picker.route": "Route",
+  "integration.vpn.picker.route.empty.http": "This connection has no HTTP routes.",
+  "integration.vpn.picker.route.empty.tcp": "This connection has no TCP routes.",
+  "integration.vpn.picker.route.placeholder": "Pick a route",
+  "integration.vpn.picker.vpn": "Through a VPN connection",
+  "integration.vpn.reference.inactive": "{connection} is not active ({status}) — runs through it fail until it is active again.",
+  "integration.vpn.reference.missing": "The VPN route {connection}/{route} no longer exists. Choose another route or the public internet.",
+  "integration.vpn.section.title": "Network",
+  "integration.vpn.status.active": "Active",
+  "integration.vpn.status.disabled": "Disabled",
+  "integration.vpn.status.down": "Down",
+  "integration.vpn.status.failed": "Failed",
+  "integration.vpn.status.provisioning": "Provisioning",
+  "integration.vpn.status.standby": "Standby",
+  "integration.vpn.status.unknown": "Unknown",
+  "integration.vpn.target": "{target} via {connection}",
   "integration.workflowFile.action.export": "Export as file",
   "integration.workflowFile.action.import": "Import from file…",
   "integration.workflowFile.count.both": "{nodes}, {triggers}",

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>