@cat-factory/app 0.47.2 → 0.47.3

package/app/components/layout/IntegrationsHub.vue

@@ -259,32 +259,53 @@ const groups = computed<IntegrationGroup[]>(() => {
   }
 
   // --- Infrastructure (ephemeral environments + self-hosted runner pool) -----
-  // Each gates on its own availability probe, so a backend with the integration off
-  // shows no dead row. The connected badge reflects a saved connection; the
-  // ProviderConfigBanner handles the louder "missing mandatory fields" warning.
+  // The two providers — container agents (runner pool) and Tester environments — are the
+  // same "bring your own infra" idea and the same custom pool typically backs both, so they
+  // collapse into ONE row opening the tabbed Infrastructure window. The row shows a combined
+  // per-concern summary ("Agents: connected · Envs: not connected"). Each concern still gates
+  // on its own availability probe (a tab whose backend is off simply doesn't render), so the
+  // row appears whenever EITHER is available. The ProviderConfigBanner handles the louder
+  // "missing mandatory fields" warning.
   const infra: IntegrationItem[] = []
-  if (providerConnections.isAvailable('environment')) {
-    const conn = providerConnections.connectionFor('environment')
-    infra.push({
-      key: 'environment',
-      icon: 'i-lucide-cloud',
-      label: t('layout.integrationsHub.items.environment.label'),
-      description: t('layout.integrationsHub.items.environment.description'),
-      status: conn ? t('layout.integrationsHub.status.connected') : undefined,
-      connected: !!conn,
-      onClick: () => go(() => ui.openProviderConnection('environment')),
-    })
-  }
-  if (providerConnections.isAvailable('runner-pool')) {
-    const conn = providerConnections.connectionFor('runner-pool')
+  const agentsAvailable = providerConnections.isAvailable('runner-pool')
+  const envsAvailable = providerConnections.isAvailable('environment')
+  if (agentsAvailable || envsAvailable) {
+    const agentsConn = providerConnections.connectionFor('runner-pool')
+    const envsConn = providerConnections.connectionFor('environment')
+    // Combined summary across the available concerns only.
+    const stateWord = (conn: unknown) =>
+      conn
+        ? t('layout.integrationsHub.status.connected')
+        : t('layout.integrationsHub.status.notConnected')
+    const parts: string[] = []
+    if (agentsAvailable)
+      parts.push(
+        t('layout.integrationsHub.items.infrastructure.agents', { state: stateWord(agentsConn) }),
+      )
+    if (envsAvailable)
+      parts.push(
+        t('layout.integrationsHub.items.infrastructure.envs', { state: stateWord(envsConn) }),
+      )
+    // Default the window to the agents tab when available (the common case), else envs.
+    const defaultKind = agentsAvailable ? 'runner-pool' : 'environment'
+    // A concern counts as satisfied when it's unavailable (nothing to configure) or connected.
+    // The row is "connected" (green) only when EVERY available concern is connected — a
+    // half-connected state shows the amber "attention" badge instead, so the green badge can't
+    // claim "done" while one concern is still unconfigured.
+    const agentsSatisfied = !agentsAvailable || !!agentsConn
+    const envsSatisfied = !envsAvailable || !!envsConn
+    const allConnected = agentsSatisfied && envsSatisfied
+    const someConnected = !!agentsConn || !!envsConn
     infra.push({
-      key: 'runner-pool',
+      key: 'infrastructure',
       icon: 'i-lucide-server-cog',
-      label: t('layout.integrationsHub.items.runnerPool.label'),
-      description: t('layout.integrationsHub.items.runnerPool.description'),
-      status: conn ? t('layout.integrationsHub.status.connected') : undefined,
-      connected: !!conn,
-      onClick: () => go(() => ui.openProviderConnection('runner-pool')),
+      label: t('layout.integrationsHub.items.infrastructure.label'),
+      description: t('layout.integrationsHub.items.infrastructure.description'),
+      status: parts.join(' · '),
+      connected: allConnected,
+      attention: someConnected && !allConnected,
+      attentionLabel: parts.join(' · '),
+      onClick: () => go(() => ui.openProviderConnection(defaultKind)),
     })
   }
   // Local-mode-only: the warm-container pool + checkout reuse for the local runner. Shown

package/app/components/settings/InfrastructureWindow.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+// The single tabbed "Infrastructure" window. It merges what used to be two separate
+// Integrations-Hub entries — the self-hosted runner pool (container agents) and the
+// ephemeral-environment provider (Tester environments) — into one surface, because the
+// same custom pool typically backs both jobs, so configuring them together reflects
+// reality. Each provider gets its own tab (ProviderConnectionTab); a tab whose backend
+// integration is disabled (503) simply doesn't render.
+//
+// The local-mode delegation toggles are cross-cutting (one per concern), so they live at
+// the TOP of the window rather than buried in one tab — removing the old awkward
+// cross-link hint that pointed from the runner-pool screen back to the env screen.
+import { computed, ref, watch } from 'vue'
+import type { ProviderConnectionKind } from '~/types/providerConnections'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import ProviderConnectionTab from '~/components/settings/ProviderConnectionTab.vue'
+
+const { t } = useI18n()
+const ui = useUiStore()
+const store = useProviderConnectionsStore()
+const auth = useAuthStore()
+const settings = useWorkspaceSettingsStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.infrastructureOpen,
+  set: (v: boolean) => {
+    if (!v) ui.closeProviderConnection()
+  },
+})
+const back = useIntegrationBack(open)
+
+// Each concern gates on its own availability probe; an unavailable tab isn't offered.
+const agentsAvailable = computed(() => store.isAvailable('runner-pool'))
+const envsAvailable = computed(() => store.isAvailable('environment'))
+
+const tabs = computed(() => {
+  const out: { value: ProviderConnectionKind; label: string; icon: string; slot: string }[] = []
+  if (agentsAvailable.value)
+    out.push({
+      value: 'runner-pool',
+      label: t('settings.providerConnection.tabs.containerAgents'),
+      icon: 'i-lucide-server-cog',
+      slot: 'runner-pool',
+    })
+  if (envsAvailable.value)
+    out.push({
+      value: 'environment',
+      label: t('settings.providerConnection.tabs.testEnvironments'),
+      icon: 'i-lucide-cloud',
+      slot: 'environment',
+    })
+  return out
+})
+
+const activeTab = ref<ProviderConnectionKind>(ui.infrastructureTab)
+
+// Honour the deep-linked tab each time the window opens (e.g. the banner's per-kind
+// "Configure…" button), falling back to the first available tab if the requested one is off.
+watch(
+  open,
+  (isOpen) => {
+    if (!isOpen) return
+    void store.ensureLoaded().catch(() => {})
+    const requested = ui.infrastructureTab
+    const available = tabs.value.map((x) => x.value)
+    activeTab.value = available.includes(requested) ? requested : (available[0] ?? requested)
+  },
+  { immediate: true },
+)
+// When availability resolves after open, re-pin onto a valid tab — but keep honouring the
+// deep-linked request. The two availability probes resolve independently, so `tabs` can pass
+// through a transient single-tab list (e.g. the runner-pool probe lands a tick before the
+// environment one). We must NOT let that transient list steal focus from a still-loading
+// requested tab, so only fall back to the first tab once loading has fully settled.
+watch([tabs, () => store.loaded], () => {
+  const list = tabs.value
+  if (list.some((x) => x.value === activeTab.value)) return
+  const requested = ui.infrastructureTab
+  if (list.some((x) => x.value === requested)) {
+    activeTab.value = requested
+  } else if (store.loaded && list.length) {
+    activeTab.value = list[0]!.value
+  }
+})
+
+// --- Local-mode infrastructure delegation (cross-cutting; shown only in local mode) ---
+// In local mode this is where a developer chooses, per workspace, whether to run on this
+// machine (host Docker for agents, in-container docker-compose for the Tester) or delegate
+// to an external service. Each toggle is enabled only once its provider is registered.
+const isLocal = computed(() => auth.localMode?.enabled === true)
+const runnerPoolRegistered = computed(() => !!store.connectionFor('runner-pool'))
+const envRegistered = computed(() => !!store.connectionFor('environment'))
+const savingDelegation = ref(false)
+
+async function setDelegation(patch: {
+  delegateAgentsToRunnerPool?: boolean
+  delegateTestEnvToProvider?: boolean
+}) {
+  savingDelegation.value = true
+  try {
+    await settings.update(patch)
+  } catch (e) {
+    toast.add({
+      title: t('settings.providerConnection.delegation.updateFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    savingDelegation.value = false
+  }
+}
+
+function selectTab(kind: ProviderConnectionKind) {
+  activeTab.value = kind
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="t('settings.providerConnection.windowTitle')"
+    :ui="{ content: 'max-w-xl' }"
+  >
+    <template #title>
+      <IntegrationBackTitle :title="t('settings.providerConnection.windowTitle')" @back="back" />
+    </template>
+    <template #body>
+      <div class="space-y-4">
+        <!-- Local-mode delegation: the local-vs-external choice for BOTH container agents
+             AND the Tester's ephemeral environments, made once here at the top. -->
+        <section
+          v-if="isLocal"
+          class="space-y-3 rounded-lg border border-slate-700 bg-slate-900/40 p-3"
+        >
+          <div>
+            <h3 class="text-sm font-semibold text-slate-200">
+              {{ t('settings.providerConnection.delegation.title') }}
+            </h3>
+            <p class="mt-1 text-[11px] text-slate-400">
+              {{ t('settings.providerConnection.delegation.intro') }}
+            </p>
+          </div>
+
+          <!-- Container agents → self-hosted runner pool -->
+          <div class="space-y-1">
+            <label class="flex items-center gap-2">
+              <USwitch
+                size="sm"
+                :model-value="settings.settings.delegateAgentsToRunnerPool"
+                :disabled="savingDelegation || !runnerPoolRegistered"
+                @update:model-value="(v) => setDelegation({ delegateAgentsToRunnerPool: v })"
+              />
+              <span class="text-sm text-slate-200">
+                {{ t('settings.providerConnection.delegation.agentsToggle') }}
+              </span>
+            </label>
+            <p class="pl-9 text-[11px] text-slate-400">
+              {{ t('settings.providerConnection.delegation.agentsHint') }}
+              <template v-if="!runnerPoolRegistered">
+                <i18n-t
+                  keypath="settings.providerConnection.delegation.registerPoolPrompt"
+                  tag="span"
+                  scope="global"
+                >
+                  <template #link>
+                    <button
+                      type="button"
+                      class="text-sky-400 underline underline-offset-2 hover:text-sky-300"
+                      @click="selectTab('runner-pool')"
+                    >
+                      {{ t('settings.providerConnection.delegation.registerPoolLink') }}
+                    </button>
+                  </template>
+                </i18n-t>
+              </template>
+            </p>
+          </div>
+
+          <!-- Tester environments → environment provider -->
+          <div class="space-y-1">
+            <label class="flex items-center gap-2">
+              <USwitch
+                size="sm"
+                :model-value="settings.settings.delegateTestEnvToProvider"
+                :disabled="savingDelegation || !envRegistered"
+                @update:model-value="(v) => setDelegation({ delegateTestEnvToProvider: v })"
+              />
+              <span class="text-sm text-slate-200">
+                {{ t('settings.providerConnection.delegation.envToggle') }}
+              </span>
+            </label>
+            <p class="pl-9 text-[11px] text-slate-400">
+              {{ t('settings.providerConnection.delegation.envHint') }}
+            </p>
+          </div>
+        </section>
+
+        <UTabs
+          v-if="tabs.length"
+          v-model="activeTab"
+          :items="tabs"
+          variant="link"
+          :ui="{ root: 'gap-4' }"
+          data-testid="infrastructure-tabs"
+        >
+          <template #runner-pool>
+            <ProviderConnectionTab kind="runner-pool" />
+          </template>
+          <template #environment>
+            <ProviderConnectionTab kind="environment" />
+          </template>
+        </UTabs>
+
+        <p v-else class="px-1 py-6 text-center text-sm text-slate-500">
+          {{ t('settings.providerConnection.noneAvailable') }}
+        </p>
+      </div>
+    </template>
+  </UModal>
+</template>

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>