@revenexx/studio-integrations 3.2.0 → 3.4.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/workflows/[id].vue

@@ -209,6 +209,8 @@ watch(id, async () => {
   if (!w) await leaveTo("/integrations/workflows");
   draft.value = null;
   warningsExpanded.value = false;
+  runsStatus.value = [];
+  runsTrigger.value = "";
   if (tab.value === "runs") void loadRuns(1);
   settleBuildStatus();
 }, { immediate: true });
@@ -530,6 +532,8 @@ const runsLastPage = ref(1);
 const runsWanted = ref(1);
 const runsSort = ref(DEFAULT_RUN_SORT);
 const runsDirection = ref(DEFAULT_RUN_DIRECTION);
+const runsStatus = ref([]);
+const runsTrigger = ref("");
 let runsSeq = 0;
 let runsLoadingSeq = 0;
 const RUNS_POLL_MS = 3e3;
@@ -634,7 +638,8 @@ async function loadRuns(page = runsWanted.value, opts = {}) {
       page,
       perPage: RUNS_PER_PAGE,
       sort: runsSort.value,
-      direction: runsDirection.value
+      direction: runsDirection.value,
+      narrowing: { status: runsStatus.value, triggerType: runsTrigger.value }
     });
     if (seq !== runsSeq) return;
     wfRuns.value = res.runs;
@@ -655,6 +660,11 @@ function reorderRuns(order) {
   runsDirection.value = order.direction;
   void loadRuns(1);
 }
+function narrowRuns(patch) {
+  if (patch.status !== void 0) runsStatus.value = patch.status;
+  if (patch.triggerType !== void 0) runsTrigger.value = patch.triggerType;
+  void loadRuns(1);
+}
 function goRunsPage(p) {
   const next = Math.min(Math.max(1, p), runsLastPage.value);
   if (next !== runsWanted.value) void loadRuns(next);
@@ -1179,9 +1189,13 @@ async function confirmDeactivate() {
             orderable
             :sort="runsSort"
             :direction="runsDirection"
+            narrowable
+            :status="runsStatus"
+            :trigger-type="runsTrigger"
             :empty-text="t('integration.editor.runs.empty')"
             @changed="() => loadRuns()"
             @reorder="reorderRuns"
+            @narrow="narrowRuns"
           />
 
           <!-- Server pagination — the endpoint pages, so the whole history is reachable. -->

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'). */
@@ -765,7 +822,12 @@ export interface WorkflowRun {
     /** Temporal run id for this execution; null when the row predates Temporal. */
     temporalRunId?: string | null;
     triggerId: string;
-    triggerType: TriggerType;
+    /**
+     * What started the run, as the platform reported it. Null where it reported
+     * nothing — the trigger was deleted, or the run predates it being recorded — and
+     * drawn as nothing rather than as a guess (PO-335).
+     */
+    triggerType: TriggerType | null;
     startedAt: string;
     finishedAt: string | null;
     durationMs: number | null;

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/runFeedQuery.d.ts

@@ -122,13 +122,16 @@ export interface RunFeedQuery {
  * empty `status` as a value and answers 422.
  */
 export declare function runFeedQueryString(query: RunFeedQuery): string;
+/** The narrowing a workflow's own list takes: the feed's, minus the text search. */
+export type WorkflowRunsNarrowing = Pick<RunFeedQuery, 'status' | 'triggerType'>;
 /**
- * The query string for a workflow's own `GET /workflows/{id}/runs`: a page, and
- * the order it is read in. That endpoint narrows by nothing yet (PO-319), so this
- * is the paging and the order alone — the order sent by the same rule as the
- * tenant feed's, so the two lists can never ask for one order two ways.
+ * The query string for a workflow's own `GET /workflows/{id}/runs`: a page, the
+ * order it is read in, and the narrowing by outcome and trigger kind (PO-319) —
+ * each sent by the same rule as the tenant feed's, so the two lists can never ask
+ * for one thing two ways. No text search: that endpoint takes none, and the tab's
+ * search box searches the page in hand.
  */
-export declare function workflowRunsQueryString(page: number, perPage: number, sort?: RunSort, direction?: RunSortDirection): string;
+export declare function workflowRunsQueryString(page: number, perPage: number, sort?: RunSort, direction?: RunSortDirection, narrowing?: WorkflowRunsNarrowing): string;
 /**
  * The narrowing alone, without the paging — what `GET /runs/summary` is read
  * with so the pager's total describes the same rows as the page beside it.

package/dist/runtime/utils/runFeedQuery.js

@@ -29,10 +29,11 @@ export function runFeedQueryString(query) {
   setOrder(params, query.sort, query.direction);
   return params.toString();
 }
-export function workflowRunsQueryString(page, perPage, sort = DEFAULT_RUN_SORT, direction = DEFAULT_RUN_DIRECTION) {
+export function workflowRunsQueryString(page, perPage, sort = DEFAULT_RUN_SORT, direction = DEFAULT_RUN_DIRECTION, narrowing = { status: [], triggerType: "" }) {
   const params = new URLSearchParams();
   params.set("page", String(page));
   params.set("per_page", String(perPage));
+  for (const [key, value] of outcomeParams(narrowing)) params.set(key, value);
   setOrder(params, sort, direction);
   return params.toString();
 }
@@ -45,11 +46,15 @@ function setOrder(params, sort, direction) {
 export function runFeedNarrowingString(query) {
   return narrowingParams(query).toString();
 }
-function narrowingParams(query) {
+function outcomeParams(narrowing) {
   const params = new URLSearchParams();
-  const statuses = apiStatusesFor(query.status);
+  const statuses = apiStatusesFor(narrowing.status);
   if (statuses.length) params.set("status", statuses.join(","));
-  if (query.triggerType) params.set("trigger_type", query.triggerType);
+  if (narrowing.triggerType) params.set("trigger_type", narrowing.triggerType);
+  return params;
+}
+function narrowingParams(query) {
+  const params = outcomeParams(query);
   const search = query.search.trim();
   if (search) params.set("search", search);
   return params;

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

@@ -0,0 +1,39 @@
+import type { TriggerType, WorkflowRun } from '../types/integrations.js';
+/**
+ * A run as either list sends it, and as the by-id read does. The three do not
+ * carry the same fields: see `mapRun` and `keepListTrigger` for what fills in.
+ */
+export interface ApiRun {
+    id: number;
+    workflow_id: number;
+    status: string;
+    temporal_workflow_id?: string;
+    temporal_run_id?: string;
+    started_at?: string;
+    completed_at?: string;
+    /** Why the run failed, as the platform recorded it. Present in the list too. */
+    error?: string | null;
+    /**
+     * Present on the tenant feed, absent on the per-workflow subresource — which
+     * has no need for them, since the caller supplied the workflow and the tab
+     * shows one workflow's runs.
+     */
+    workflow_name?: string;
+    trigger_type?: TriggerType | null;
+    trigger_handle?: string | null;
+}
+/**
+ * `workflowName` is a FALLBACK, not the source. The tenant feed carries the
+ * name on the row; the per-workflow subresource does not, and its caller knows
+ * it. Passing it used to be the only way a row had a name at all.
+ */
+export declare function mapRun(r: ApiRun, workflowName?: string): WorkflowRun;
+/**
+ * A run re-read by id, keeping what started it from the row it replaces.
+ *
+ * The by-id read sends no trigger — only the two lists do — so swapping a
+ * reconciled run in whole blanked a schedule's run to no trigger at all, a row
+ * after the list had named it (api-contract runs.execution F2). What started a
+ * run does not change while it runs, so the list's word stays the right one.
+ */
+export declare function keepListTrigger(fresh: WorkflowRun, listed: WorkflowRun): WorkflowRun;

package/dist/runtime/utils/runRecord.js

@@ -0,0 +1,39 @@
+import { mapRunStatus } from "./runFeedQuery.js";
+export function mapRun(r, workflowName = "") {
+  const startedMs = r.started_at ? new Date(r.started_at).getTime() : null;
+  const finishedMs = r.completed_at ? new Date(r.completed_at).getTime() : null;
+  return {
+    id: String(r.id),
+    workflowId: r.workflow_id,
+    workflowName: r.workflow_name ?? workflowName,
+    status: mapRunStatus(r.status),
+    // Kept beside the mapped word, because the mapping folds `terminated` into
+    // `failed` and the platform resumes only the literal `failed` (PO-355).
+    apiStatus: r.status,
+    temporalRunId: r.temporal_run_id ?? null,
+    triggerId: r.trigger_handle ?? "",
+    // The platform reports what started the run, on both lists. Null — the
+    // trigger was deleted, or the run predates trigger_handle — stays null: it
+    // was read as `manual` once, and every row of a workflow's own Runs tab then
+    // claimed a start by hand, because that list sent no trigger at all (PO-335).
+    // A by-id read still sends none; see `keepListTrigger`.
+    triggerType: r.trigger_type ?? null,
+    startedAt: r.started_at ?? "",
+    finishedAt: r.completed_at ?? null,
+    // The list carries the reason a run failed; dropping it here was why every
+    // failure read the same wherever the list is shown. An empty string is not
+    // a reason — it has to fall through to whatever the surface says instead,
+    // or it renders as a blank line where the sentence belongs.
+    errorMessage: r.error || void 0,
+    // Derived from the timestamps — the list payload carries no duration.
+    durationMs: startedMs != null && finishedMs != null && finishedMs >= startedMs ? finishedMs - startedMs : null,
+    steps: []
+  };
+}
+export function keepListTrigger(fresh, listed) {
+  return {
+    ...fresh,
+    triggerId: fresh.triggerId || listed.triggerId,
+    triggerType: fresh.triggerType ?? listed.triggerType
+  };
+}

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))
+  };
+}