@cat-factory/app 0.47.2 → 0.47.4

package/app/components/settings/ProviderConnectionTab.vue

@@ -0,0 +1,358 @@
+<script setup lang="ts">
+// One tab of the Infrastructure window — the connect surface for a single provider kind
+// (container agents → runner pool, or test environments → environment provider). Both
+// self-describe via a ProviderDescriptor, so this renders either without hard-coding them:
+//   - a NATIVE provider (ships a `manifestTemplate`) → the friendly flat field form, whose
+//     values are overlaid back onto the manifest before saving (the single storage path).
+//   - a MANIFEST-driven provider (no template) → the full JSON manifest editor
+//     (ProviderManifestEditor), which replaces the old "use the API" disclaimer.
+import { computed, ref, toRaw, watch } from 'vue'
+import type { ProviderConnectionKind } from '~/types/providerConnections'
+import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
+import ProviderManifestEditor from '~/components/settings/ProviderManifestEditor.vue'
+
+const props = defineProps<{ kind: ProviderConnectionKind }>()
+
+const { t } = useI18n()
+const store = useProviderConnectionsStore()
+const toast = useToast()
+
+const descriptor = computed(() => store.descriptorFor(props.kind))
+const connection = computed(() => store.connectionFor(props.kind))
+
+const BLURB_KEYS: Record<ProviderConnectionKind, string> = {
+  environment: 'settings.providerConnection.kind.environment.blurb',
+  'runner-pool': 'settings.providerConnection.kind.runner-pool.blurb',
+}
+const blurb = computed(() => t(BLURB_KEYS[props.kind]))
+const title = computed(() => t(`settings.providerConnection.kind.${props.kind}.title`))
+
+watch(
+  () => props.kind,
+  (k) => void store.loadKind(k).then(resetDraft),
+  { immediate: true },
+)
+
+// "View logs": the provisioning event history for this provider's subsystem.
+const showLogs = ref(false)
+
+// --- Shared state -------------------------------------------------------------------
+const values = ref<Record<string, string>>({})
+const testResult = ref<{ ok: boolean; message?: string } | null>(null)
+const testing = ref(false)
+const busy = ref(false)
+
+/** A native provider ships a manifest scaffold ⇒ render the friendly flat field form. */
+const isNative = computed(() => !!descriptor.value?.manifestTemplate)
+const secretFieldCount = computed(
+  () => (descriptor.value?.configFields ?? []).filter((f) => f.secret).length,
+)
+const hasSecretFields = computed(() => secretFieldCount.value > 0)
+
+// Seed the flat-form draft from the saved manifest so an edit starts from the CURRENT
+// non-secret config (baseUrl + providerConfig). Secret fields are never prefilled.
+function resetDraft() {
+  testResult.value = null
+  const saved = descriptor.value?.savedManifest
+  const cfg = (saved?.providerConfig as Record<string, unknown> | undefined) ?? {}
+  const next: Record<string, string> = {}
+  for (const f of descriptor.value?.configFields ?? []) {
+    if (f.secret) continue
+    if (f.key === 'baseUrl') {
+      const b = saved?.baseUrl ?? connection.value?.baseUrl
+      if (typeof b === 'string') next[f.key] = b
+    } else if (typeof cfg[f.key] === 'string') {
+      next[f.key] = cfg[f.key] as string
+    }
+  }
+  values.value = next
+}
+
+/** A flat-form field is satisfied when filled now, or already stored, or it has a default. */
+function satisfied(key: string): boolean {
+  const f = descriptor.value?.configFields.find((cf) => cf.key === key)
+  if (!f) return true
+  if ((values.value[key] ?? '').trim()) return true
+  if (f.default !== undefined) return true
+  return !(descriptor.value?.missingRequired ?? []).includes(key)
+}
+
+const canSave = computed(() => {
+  if (!descriptor.value || !isNative.value) return false
+  return (descriptor.value.missingRequired ?? []).every(satisfied)
+})
+
+/** Overlay the flat field values onto the native provider's manifest. */
+function buildManifestPayload(): {
+  manifest: Record<string, unknown>
+  secrets: Record<string, string>
+} | null {
+  const template = descriptor.value?.manifestTemplate
+  if (!template) return null
+  const base = descriptor.value?.savedManifest ?? template
+  // `base` is a Vue reactive proxy, which structuredClone refuses; `toRaw` unwraps it.
+  const manifest: Record<string, unknown> = structuredClone(toRaw(base))
+  const providerConfig: Record<string, unknown> = {
+    ...(manifest.providerConfig as Record<string, unknown> | undefined),
+  }
+  const secrets: Record<string, string> = {}
+  for (const f of descriptor.value?.configFields ?? []) {
+    const val = (values.value[f.key] ?? '').trim()
+    if (!val) continue
+    if (f.secret) secrets[f.key] = val
+    else if (f.key === 'baseUrl') manifest.baseUrl = val
+    else providerConfig[f.key] = val
+  }
+  if (Object.keys(providerConfig).length) manifest.providerConfig = providerConfig
+  return { manifest, secrets }
+}
+
+function notifyError(title: string, e: unknown) {
+  toast.add({
+    title,
+    description: e instanceof Error ? e.message : String(e),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+
+function toastSaved() {
+  toast.add({
+    title: t('settings.providerConnection.toast.saved', { title: title.value }),
+    icon: 'i-lucide-check',
+    color: 'success',
+  })
+}
+
+// --- Native flat-form actions -------------------------------------------------------
+async function testNative() {
+  const payload = buildManifestPayload()
+  if (!payload) return
+  testing.value = true
+  testResult.value = null
+  try {
+    testResult.value = await store.test(props.kind, payload)
+  } catch (e) {
+    testResult.value = { ok: false, message: e instanceof Error ? e.message : String(e) }
+  } finally {
+    testing.value = false
+  }
+}
+
+async function saveNative() {
+  busy.value = true
+  try {
+    const payload = buildManifestPayload()
+    if (payload) await store.register(props.kind, payload)
+    resetDraft()
+    toastSaved()
+  } catch (e) {
+    notifyError(t('settings.providerConnection.toast.saveFailed'), e)
+  } finally {
+    busy.value = false
+  }
+}
+
+// --- Manifest-editor actions (emitted from ProviderManifestEditor) ------------------
+async function testManifest(payload: {
+  manifest: Record<string, unknown>
+  secrets: Record<string, string>
+}) {
+  testing.value = true
+  testResult.value = null
+  try {
+    testResult.value = await store.test(props.kind, payload)
+  } catch (e) {
+    testResult.value = { ok: false, message: e instanceof Error ? e.message : String(e) }
+  } finally {
+    testing.value = false
+  }
+}
+
+async function saveManifest(payload: {
+  manifest: Record<string, unknown>
+  secrets: Record<string, string>
+}) {
+  busy.value = true
+  try {
+    await store.register(props.kind, payload)
+    toastSaved()
+  } catch (e) {
+    notifyError(t('settings.providerConnection.toast.saveFailed'), e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function remove() {
+  busy.value = true
+  try {
+    await store.remove(props.kind)
+    resetDraft()
+    toast.add({ title: t('settings.providerConnection.toast.removed'), icon: 'i-lucide-check' })
+  } catch (e) {
+    notifyError(t('settings.providerConnection.toast.removeFailed'), e)
+  } finally {
+    busy.value = false
+  }
+}
+
+/** The helper line under a flat field — its own help, plus the "defaulted to …" hint. */
+function fieldHelp(key: string): string | undefined {
+  const f = descriptor.value?.configFields.find((cf) => cf.key === key)
+  if (!f) return undefined
+  const filled = (values.value[key] ?? '').trim()
+  if (f.default !== undefined && !filled) {
+    const defaulted = t('settings.providerConnection.field.defaultsTo', { value: f.default })
+    return f.help ? `${f.help} · ${defaulted}` : defaulted
+  }
+  return f.help
+}
+</script>
+
+<template>
+  <div v-if="descriptor" class="space-y-4">
+    <div class="flex items-start justify-between gap-3">
+      <p class="text-xs text-slate-400">{{ blurb }}</p>
+      <UButton
+        :icon="showLogs ? 'i-lucide-chevron-up' : 'i-lucide-scroll-text'"
+        variant="ghost"
+        size="xs"
+        class="shrink-0"
+        @click="showLogs = !showLogs"
+      >
+        {{
+          showLogs
+            ? t('settings.providerConnection.hideLogs')
+            : t('settings.providerConnection.viewLogs')
+        }}
+      </UButton>
+    </div>
+
+    <!-- Provisioning attempt history for this provider's subsystem. -->
+    <ProvisioningLogsDrawer v-if="showLogs" :subsystem="kind" />
+
+    <!-- Saved connection summary -->
+    <div
+      v-if="connection"
+      class="flex items-center justify-between rounded-md border border-slate-700 bg-slate-900/50 px-3 py-2 text-sm"
+    >
+      <div>
+        <span class="font-medium text-slate-200">{{ connection.label }}</span>
+        <div class="text-[11px] text-emerald-400">
+          {{ t('settings.providerConnection.connectedAt', { baseUrl: connection.baseUrl }) }}
+        </div>
+      </div>
+      <UButton
+        icon="i-lucide-trash-2"
+        color="error"
+        variant="ghost"
+        size="xs"
+        :disabled="busy"
+        @click="remove()"
+      />
+    </div>
+
+    <!-- Mandatory-fields warning (mirrors the banner) -->
+    <div
+      v-if="descriptor.missingRequired.length"
+      class="rounded-md border border-amber-500/40 bg-amber-950/40 px-3 py-2 text-xs text-amber-200"
+    >
+      {{
+        t('settings.providerConnection.missingConfig', {
+          fields: descriptor.missingRequired.join(', '),
+        })
+      }}
+    </div>
+
+    <!-- NATIVE provider: the friendly, descriptor-driven flat field form. -->
+    <div v-if="isNative" class="rounded-lg border border-dashed border-slate-700 p-3 space-y-3">
+      <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        {{
+          connection
+            ? t('settings.providerConnection.form.updateConfiguration')
+            : t('settings.providerConnection.form.connect')
+        }}
+      </p>
+      <p v-if="connection && hasSecretFields" class="text-[11px] text-amber-300/80">
+        {{
+          t(
+            'settings.providerConnection.form.reenterSecrets',
+            { count: secretFieldCount },
+            secretFieldCount,
+          )
+        }}
+      </p>
+
+      <UFormField
+        v-for="field in descriptor.configFields"
+        :key="field.key"
+        :label="
+          field.required && field.default === undefined
+            ? field.label
+            : t('settings.providerConnection.form.optionalLabel', { label: field.label })
+        "
+        :help="fieldHelp(field.key)"
+      >
+        <USelect
+          v-if="field.type === 'select'"
+          v-model="values[field.key]"
+          :items="(field.options ?? []).map((o) => ({ label: o.label, value: o.value }))"
+          :placeholder="field.default ?? field.placeholder"
+        />
+        <UInput
+          v-else
+          v-model="values[field.key]"
+          :type="field.secret ? 'password' : 'text'"
+          class="font-mono"
+          :placeholder="field.default ?? field.placeholder"
+        />
+      </UFormField>
+
+      <div v-if="descriptor.supportsTest" class="flex items-center gap-2">
+        <UButton
+          color="neutral"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-plug-zap"
+          :loading="testing"
+          @click="testNative()"
+        >
+          {{ t('settings.providerConnection.test.button') }}
+        </UButton>
+        <span v-if="testResult && testResult.ok" class="text-xs text-emerald-400">
+          {{ testResult.message ?? t('settings.providerConnection.test.ok') }}
+        </span>
+        <span v-else-if="testResult" class="text-xs text-rose-400">
+          {{ testResult.message ?? t('settings.providerConnection.test.failed') }}
+        </span>
+      </div>
+
+      <div class="flex justify-end">
+        <UButton
+          color="primary"
+          size="sm"
+          :loading="busy"
+          :disabled="!canSave"
+          @click="saveNative()"
+        >
+          {{ connection ? t('common.save') : t('settings.providerConnection.form.connect') }}
+        </UButton>
+      </div>
+    </div>
+
+    <!-- MANIFEST-driven provider: the full in-app manifest editor. -->
+    <ProviderManifestEditor
+      v-else
+      :kind="kind"
+      :saved-manifest="descriptor.savedManifest"
+      :connected="!!connection"
+      :supports-test="descriptor.supportsTest"
+      :testing="testing"
+      :busy="busy"
+      :test-result="testResult"
+      @test="testManifest"
+      @save="saveManifest"
+    />
+  </div>
+</template>

package/app/components/settings/ProviderManifestEditor.vue

@@ -0,0 +1,286 @@
+<script setup lang="ts">
+// The in-app manifest editor for a MANIFEST-DRIVEN infrastructure provider (a runner pool
+// or an environment provider without a native code adapter). It replaces the old
+// "register it via the API" disclaimer: the operator authors the provider's full JSON
+// manifest here, supplies the write-only secret values it references, and tests/saves —
+// entirely in-app.
+//
+// The manifest is validated against the SAME Valibot wire contract the backend enforces
+// (runner pool: RunnerPoolManifest; environment: EnvironmentManifest), imported from
+// @cat-factory/contracts so the client check stays in lockstep with the server. The server
+// remains authoritative — register re-validates — so a client that's behind still can't
+// persist an invalid manifest.
+//
+// Secrets are write-only: never prefilled. Because register replaces the whole manifest +
+// secret bundle, EVERY secret key the manifest references must be (re-)supplied on save —
+// on an existing connection the amber hint says so.
+import { computed, ref, watch } from 'vue'
+import * as v from 'valibot'
+import { environmentManifestSchema, runnerPoolManifestSchema } from '@cat-factory/contracts'
+import type { ProviderConnectionKind } from '~/types/providerConnections'
+
+const props = defineProps<{
+  kind: ProviderConnectionKind
+  /** The provider's current saved manifest (secret-ref keys only, no values). */
+  savedManifest?: Record<string, unknown>
+  /** Whether a connection already exists (drives the re-enter-secrets hint + button label). */
+  connected: boolean
+  /** Whether the provider exposes a connection test the UI can call. */
+  supportsTest: boolean
+  /** Bubbled-up busy state from the tab's store calls (so the editor shows loading). */
+  testing: boolean
+  busy: boolean
+  testResult: { ok: boolean; message?: string } | null
+}>()
+
+const emit = defineEmits<{
+  test: [payload: { manifest: Record<string, unknown>; secrets: Record<string, string> }]
+  save: [payload: { manifest: Record<string, unknown>; secrets: Record<string, string> }]
+}>()
+
+const { t } = useI18n()
+
+// A minimal, valid starter manifest per kind (O1 option a: a static SPA example — no backend
+// round-trip). Seeds the editor when there's no saved manifest to start from. The operator
+// edits providerId/label/baseUrl and the request templates for their own scheduler/API.
+const STARTERS: Record<ProviderConnectionKind, Record<string, unknown>> = {
+  'runner-pool': {
+    providerId: 'my-pool',
+    label: 'My runner pool',
+    baseUrl: 'https://pool.example.com',
+    auth: { type: 'bearer', secretRef: { key: 'API_TOKEN' } },
+    dispatch: { method: 'POST', pathTemplate: '/jobs', bodyTemplate: '{{input.job}}' },
+    poll: { method: 'GET', pathTemplate: '/jobs/{{input.jobId}}' },
+    response: {
+      statusPath: 'state',
+      statusMap: [
+        { from: 'running', to: 'running' },
+        { from: 'completed', to: 'done' },
+        { from: 'error', to: 'failed' },
+      ],
+      resultPath: 'result',
+    },
+  },
+  environment: {
+    providerId: 'my-envs',
+    label: 'My environment provider',
+    baseUrl: 'https://envs.example.com',
+    auth: { type: 'bearer', secretRef: { key: 'API_TOKEN' } },
+    provision: { method: 'POST', pathTemplate: '/environments', bodyTemplate: '{}' },
+    status: { method: 'GET', pathTemplate: '/environments/{{provision.id}}' },
+    teardown: { method: 'DELETE', pathTemplate: '/environments/{{provision.id}}' },
+    response: {
+      urlPath: 'url',
+      statusPath: 'status',
+      statusMap: [
+        { from: 'building', to: 'provisioning' },
+        { from: 'ready', to: 'ready' },
+      ],
+    },
+  },
+}
+
+const schema = computed(() =>
+  props.kind === 'runner-pool' ? runnerPoolManifestSchema : environmentManifestSchema,
+)
+
+const text = ref('')
+const secrets = ref<Record<string, string>>({})
+
+/** Seed the editor from the saved manifest (an edit) or the starter (a first connect). */
+function seed() {
+  const base = props.savedManifest ?? STARTERS[props.kind]
+  text.value = JSON.stringify(base, null, 2)
+  secrets.value = {}
+}
+
+// Re-seed on first mount and whenever the saved manifest changes (e.g. after a successful
+// save reloads the descriptor) — the saved manifest is the new canonical text and the
+// just-saved secrets are cleared from the write-only inputs.
+watch(() => props.savedManifest, seed, { immediate: true })
+
+/** Parse the textarea; null value on a JSON syntax error. */
+const parsed = computed<{ ok: boolean; value?: Record<string, unknown> }>(() => {
+  const raw = text.value.trim()
+  if (!raw) return { ok: false }
+  try {
+    const value = JSON.parse(raw)
+    if (value === null || typeof value !== 'object' || Array.isArray(value)) return { ok: false }
+    return { ok: true, value: value as Record<string, unknown> }
+  } catch {
+    return { ok: false }
+  }
+})
+
+const jsonError = computed(() => text.value.trim().length > 0 && !parsed.value.ok)
+
+/** Validate the parsed object against the wire contract; surface the first issue. */
+const schemaError = computed<string | null>(() => {
+  if (!parsed.value.ok || !parsed.value.value) return null
+  const result = v.safeParse(schema.value, parsed.value.value)
+  if (result.success) return null
+  const issue = result.issues[0]
+  if (!issue) return t('settings.providerConnection.manifestEditor.invalidShape')
+  const path = (issue.path ?? []).map((p) => String((p as { key?: unknown }).key ?? '')).join('.')
+  return path ? `${path}: ${issue.message}` : issue.message
+})
+
+const validManifest = computed<Record<string, unknown> | null>(() =>
+  parsed.value.ok && parsed.value.value && !schemaError.value ? parsed.value.value : null,
+)
+
+/**
+ * Every secret key the manifest's auth scheme references, discovered generically by walking
+ * the parsed object for any `*SecretRef` (or `secretRef`) with a string `key`. Covers bearer
+ * / api_key / basic / oauth2 / custom_headers without hard-coding each auth variant.
+ */
+const secretKeys = computed<string[]>(() => {
+  const out = new Set<string>()
+  const walk = (node: unknown) => {
+    if (Array.isArray(node)) {
+      for (const item of node) walk(item)
+      return
+    }
+    if (node && typeof node === 'object') {
+      for (const [key, val] of Object.entries(node)) {
+        if (
+          /secretref$/i.test(key) &&
+          val &&
+          typeof val === 'object' &&
+          typeof (val as { key?: unknown }).key === 'string'
+        ) {
+          out.add((val as { key: string }).key)
+        } else {
+          walk(val)
+        }
+      }
+    }
+  }
+  if (parsed.value.value) walk(parsed.value.value)
+  return [...out]
+})
+
+// register() replaces the whole bundle, so every referenced secret must be supplied to save.
+const allSecretsSupplied = computed(() =>
+  secretKeys.value.every((k) => (secrets.value[k] ?? '').trim().length > 0),
+)
+const canSave = computed(() => !!validManifest.value && allSecretsSupplied.value)
+// A test can probe with whatever secrets are filled in (a partial probe is still useful).
+const canTest = computed(() => !!validManifest.value)
+
+function filledSecrets(): Record<string, string> {
+  const out: Record<string, string> = {}
+  for (const k of secretKeys.value) {
+    const val = (secrets.value[k] ?? '').trim()
+    if (val) out[k] = val
+  }
+  return out
+}
+
+function onTest() {
+  if (!validManifest.value) return
+  emit('test', { manifest: validManifest.value, secrets: filledSecrets() })
+}
+
+function onSave() {
+  if (!canSave.value || !validManifest.value) return
+  emit('save', { manifest: validManifest.value, secrets: filledSecrets() })
+}
+</script>
+
+<template>
+  <div class="space-y-3 rounded-lg border border-dashed border-slate-700 p-3">
+    <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+      {{ t('settings.providerConnection.manifestEditor.title') }}
+    </p>
+
+    <UFormField
+      :label="t('settings.providerConnection.manifestEditor.jsonLabel')"
+      :help="t('settings.providerConnection.manifestEditor.jsonHelp')"
+    >
+      <UTextarea
+        v-model="text"
+        :rows="16"
+        class="w-full font-mono text-xs"
+        data-testid="manifest-editor-json"
+        spellcheck="false"
+      />
+    </UFormField>
+
+    <p v-if="!savedManifest && !jsonError && !schemaError" class="text-[11px] text-slate-500">
+      {{ t('settings.providerConnection.manifestEditor.starterHint') }}
+    </p>
+
+    <!-- Parse + shape errors, validated against the same contract the backend enforces. -->
+    <p
+      v-if="jsonError"
+      class="rounded-md border border-rose-500/40 bg-rose-950/40 px-3 py-2 text-xs text-rose-200"
+      data-testid="manifest-editor-error"
+    >
+      {{ t('settings.providerConnection.manifestEditor.invalidJson') }}
+    </p>
+    <p
+      v-else-if="schemaError"
+      class="rounded-md border border-amber-500/40 bg-amber-950/40 px-3 py-2 text-xs text-amber-200"
+      data-testid="manifest-editor-error"
+    >
+      {{ t('settings.providerConnection.manifestEditor.schemaError', { message: schemaError }) }}
+    </p>
+
+    <!-- Secret sub-form: one write-only input per secret key the manifest references. -->
+    <div class="space-y-2">
+      <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        {{ t('settings.providerConnection.manifestEditor.secretsLabel') }}
+      </p>
+      <p v-if="!secretKeys.length" class="text-[11px] text-slate-500">
+        {{ t('settings.providerConnection.manifestEditor.noSecrets') }}
+      </p>
+      <p v-else-if="connected" class="text-[11px] text-amber-300/80">
+        {{ t('settings.providerConnection.manifestEditor.reenterSecrets') }}
+      </p>
+      <UFormField v-for="key in secretKeys" :key="key" :label="key">
+        <UInput
+          v-model="secrets[key]"
+          type="password"
+          class="w-full font-mono"
+          autocomplete="off"
+          :data-testid="`manifest-editor-secret-${key}`"
+        />
+      </UFormField>
+    </div>
+
+    <div v-if="supportsTest" class="flex items-center gap-2">
+      <UButton
+        color="neutral"
+        variant="soft"
+        size="sm"
+        icon="i-lucide-plug-zap"
+        :loading="testing"
+        :disabled="!canTest"
+        data-testid="manifest-editor-test"
+        @click="onTest()"
+      >
+        {{ t('settings.providerConnection.test.button') }}
+      </UButton>
+      <span v-if="testResult && testResult.ok" class="text-xs text-emerald-400">
+        {{ testResult.message ?? t('settings.providerConnection.test.ok') }}
+      </span>
+      <span v-else-if="testResult" class="text-xs text-rose-400">
+        {{ testResult.message ?? t('settings.providerConnection.test.failed') }}
+      </span>
+    </div>
+
+    <div class="flex justify-end">
+      <UButton
+        color="primary"
+        size="sm"
+        :loading="busy"
+        :disabled="!canSave"
+        data-testid="manifest-editor-save"
+        @click="onSave()"
+      >
+        {{ connected ? t('common.save') : t('settings.providerConnection.form.connect') }}
+      </UButton>
+    </div>
+  </div>
+</template>

package/app/pages/index.vue

@@ -69,8 +69,8 @@ const AccountSettingsPanel = defineAsyncComponent(
 const ObservabilityConnectionPanel = defineAsyncComponent(
   () => import('~/components/settings/ObservabilityConnectionPanel.vue'),
 )
-const ProviderConnectionPanel = defineAsyncComponent(
-  () => import('~/components/settings/ProviderConnectionPanel.vue'),
+const InfrastructureWindow = defineAsyncComponent(
+  () => import('~/components/settings/InfrastructureWindow.vue'),
 )
 const ModelConfigurationPanel = defineAsyncComponent(
   () => import('~/components/settings/ModelConfigurationPanel.vue'),
@@ -283,7 +283,7 @@ watch(
       <WorkspaceSettingsPanel v-if="ui.workspaceSettingsOpen" />
       <AccountSettingsPanel v-if="ui.accountSettingsOpen" />
       <ObservabilityConnectionPanel v-if="ui.observabilityConnectionOpen" />
-      <ProviderConnectionPanel v-if="ui.providerConnectionKind" />
+      <InfrastructureWindow v-if="ui.infrastructureOpen" />
       <ModelConfigurationPanel v-if="ui.modelConfigOpen" />
       <LocalModelEndpointsPanel v-if="ui.localModelsOpen" />
       <LocalModeSettingsPanel v-if="ui.localModeSettingsOpen" />