@cat-factory/app 0.182.1 → 0.183.0

package/README.md

@@ -192,6 +192,15 @@ wrong place is invisible until a user cannot find it:
   It also carries a full "how it works / when you need this / when you can skip it"
   explanation there rather than a one-line hint, since the decision to run it has to
   be made before opening a five-minute wizard.
+- **"It talks to an external service" is not what puts a surface in `integrations`.**
+  Private package registries connect to npmjs.com and GitHub Packages and still belong
+  in Infrastructure, because the question they answer is _what may a container install
+  from_ — a property of where agents RUN, which is what the Infrastructure window is
+  for. `integrations` is for a system the WORKSPACE links in and would still be a
+  coherent product without. Ask which question the destination answers, not whether a
+  credential leaves the building. A surface moved between sections must also move its
+  entry point: leaving a hub row behind as a shortcut splits the answer across two
+  places, so the row goes and the window's tab becomes the single route in.
 
 ## Develop & test
 

package/app/components/layout/IntegrationsHub.vue

@@ -30,7 +30,6 @@ const documents = useDocumentsStore()
 const tasks = useTasksStore()
 const tracker = useTrackerStore()
 const releaseHealth = useReleaseHealthStore()
-const packageRegistries = usePackageRegistriesStore()
 const publicApiKeys = usePublicApiKeysStore()
 const userSecrets = useUserSecretsStore()
 const uiMode = useUiModeStore()
@@ -60,7 +59,6 @@ watch(
     if (isOpen) {
       query.value = ''
       void releaseHealth.ensureLoaded().catch(() => {})
-      void packageRegistries.ensureLoaded().catch(() => {})
       void publicApiKeys.ensureLoaded().catch(() => {})
       void userSecrets.load().catch(() => {})
     }
@@ -271,22 +269,10 @@ const groups = computed<IntegrationGroup[]>(() => {
     })
   }
 
-  // --- Development (private package registries + API access tokens) -----------
-  // Each row is gated like observability: hidden until a probe confirms its module is
-  // wired (`available === true`), so an unconfigured backend doesn't show a dead row.
+  // --- Development (API access tokens) ---------------------------------------
+  // Gated like observability: hidden until a probe confirms its module is wired
+  // (`available === true`), so an unconfigured backend doesn't show a dead row.
   const development: IntegrationItem[] = []
-  if (packageRegistries.available) {
-    const hasEntries = packageRegistries.entries.length > 0
-    development.push({
-      key: 'package-registries',
-      icon: 'i-lucide-package',
-      label: t('layout.integrationsHub.items.packageRegistries.label'),
-      description: t('layout.integrationsHub.items.packageRegistries.description'),
-      status: hasEntries ? t('layout.integrationsHub.status.connected') : undefined,
-      connected: hasEntries,
-      onClick: () => go(ui.openPackageRegistries),
-    })
-  }
   if (publicApiKeys.available) {
     const hasKeys = publicApiKeys.keys.length > 0
     development.push({
@@ -303,8 +289,9 @@ const groups = computed<IntegrationGroup[]>(() => {
     out.push({ title: t('layout.integrationsHub.groups.development'), items: development })
 
   // NOTE: Infrastructure (agent-container execution + Tester environments + the local-mode
-  // warm pool/checkout) is no longer listed here — it moved to its OWN top-level navbar menu
-  // (SideBar → "Infrastructure" → the tabbed Infrastructure window). See `ui.openInfrastructure`.
+  // warm pool/checkout + the private package registries a checkout installs from) is no longer
+  // listed here — it moved to its OWN top-level navbar menu (SideBar → "Infrastructure" → the
+  // tabbed Infrastructure window). See `ui.openInfrastructure`.
 
   // --- Personal (only you) — fallback when there is no UserMenu to host "My setup" -------
   // Per-user connections normally live in the My-setup hub; with auth disabled they fold in

package/app/components/settings/InfrastructureWindow.logic.spec.ts

@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest'
+import {
+  infrastructureTabs,
+  openInfrastructureTab,
+  repinInfrastructureTab,
+} from './InfrastructureWindow.logic'
+
+const NONE = { agents: false, environments: false, packageRegistries: false }
+
+describe('infrastructureTabs', () => {
+  it('shows nothing when no probe reports a backend', () => {
+    expect(infrastructureTabs(NONE)).toEqual([])
+  })
+
+  it('rides the environment probe for shared stacks', () => {
+    // A shared stack is infra a Tester environment ATTACHES to, so it cannot stand on its own:
+    // without an environment backend there is nothing to attach it to.
+    expect(infrastructureTabs({ ...NONE, environments: true })).toEqual([
+      'environment',
+      'shared-stacks',
+    ])
+  })
+
+  it('gates the registries tab on its own module probe', () => {
+    // The backend 503s the module with no encryption key. That is independent of any execution
+    // or test-env backend, so the tab can be the ONLY one a deployment shows.
+    expect(infrastructureTabs({ ...NONE, packageRegistries: true })).toEqual(['package-registries'])
+    expect(infrastructureTabs({ ...NONE, agents: true })).toEqual(['runner-pool'])
+  })
+
+  it('orders tabs by the question they answer, not by which probe resolved', () => {
+    expect(
+      infrastructureTabs({ agents: true, environments: true, packageRegistries: true }),
+    ).toEqual(['runner-pool', 'environment', 'shared-stacks', 'package-registries'])
+  })
+})
+
+describe('openInfrastructureTab', () => {
+  it('honours an available deep-linked tab over the first one', () => {
+    expect(openInfrastructureTab(['runner-pool', 'package-registries'], 'package-registries')).toBe(
+      'package-registries',
+    )
+  })
+
+  it('falls back to the first available tab when the request is off', () => {
+    expect(openInfrastructureTab(['runner-pool'], 'package-registries')).toBe('runner-pool')
+  })
+
+  it('keeps naming the requested tab when nothing is available yet', () => {
+    // Every probe is still in flight on the first open. Holding the request (rather than
+    // inventing a selection) is what lets the re-pin land on it the moment its probe resolves.
+    expect(openInfrastructureTab([], 'package-registries')).toBe('package-registries')
+  })
+})
+
+describe('repinInfrastructureTab', () => {
+  it('leaves the user where they are when their tab is still available', () => {
+    // The list GROWS as probes resolve; someone reading a tab must not be yanked off it.
+    expect(
+      repinInfrastructureTab(
+        ['runner-pool', 'environment', 'package-registries'],
+        'environment',
+        'runner-pool',
+        true,
+      ),
+    ).toBe('environment')
+  })
+
+  it('lands on the deep-linked tab once its probe resolves', () => {
+    // The registries probe is the slow one: the window opened on `runner-pool` because
+    // `package-registries` was not there yet, and this is the moment it arrives.
+    expect(
+      repinInfrastructureTab(
+        ['runner-pool', 'package-registries'],
+        'shared-stacks',
+        'package-registries',
+        true,
+      ),
+    ).toBe('package-registries')
+  })
+
+  it('does not steal the selection while the probes are still settling', () => {
+    // A transient list holding only the fastest probe's tab. Falling back to it here would pin
+    // the user to whichever probe won the race and then REJECT the deep link for being a peer
+    // of the current tab.
+    expect(
+      repinInfrastructureTab(['runner-pool'], 'package-registries', 'package-registries', false),
+    ).toBe('package-registries')
+  })
+
+  it('falls back to the first tab once loading settled and the request is unavailable', () => {
+    expect(
+      repinInfrastructureTab(['runner-pool'], 'package-registries', 'package-registries', true),
+    ).toBe('runner-pool')
+  })
+
+  it('holds the current tab when settling left nothing available at all', () => {
+    expect(repinInfrastructureTab([], 'environment', 'environment', true)).toBe('environment')
+  })
+})

package/app/components/settings/InfrastructureWindow.logic.ts

@@ -0,0 +1,78 @@
+import type { InfrastructureTab } from '~/types/providerConnections'
+
+// Pure tab arithmetic behind `InfrastructureWindow.vue`: which tabs exist for this deployment,
+// and which one to show. Extracted so it is unit-tested directly rather than through the DOM —
+// the window's tabs come from THREE probes that resolve independently (the infrastructure
+// capability, the provider-connection store, the package-registries module), so the interesting
+// behaviour is what happens while the list is still growing, which a rendered-component test
+// reproduces only by accident.
+//
+// Labels stay in the component: a label resolved here would have to travel as a message KEY and
+// be fed to `t()` as a variable, which is exactly what defeats the typed-message-key check. The
+// component maps a tab onto a literal `t()` call through an exhaustive Record instead.
+
+/** Which of the window's tabs this deployment can show, as their probes currently read. */
+export interface InfrastructureTabAvailability {
+  /** An execution backend is reported (runner pool / container runtime / local). */
+  agents: boolean
+  /** A test-environment backend is reported. Also gates the shared-stacks tab. */
+  environments: boolean
+  /** The package-registries module answered its probe affirmatively (it 503s unconfigured). */
+  packageRegistries: boolean
+}
+
+/**
+ * The window's tabs, in display order. Order is the reading order of the questions they answer:
+ * where agent containers run, where test environments run, what those environments attach to,
+ * and what a checkout may install from.
+ *
+ * Shared stacks ride the test-environment probe because a stack is infra an environment attaches
+ * to — there is nothing to attach without an environment backend.
+ */
+export function infrastructureTabs(available: InfrastructureTabAvailability): InfrastructureTab[] {
+  const tabs: InfrastructureTab[] = []
+  if (available.agents) tabs.push('runner-pool')
+  if (available.environments) tabs.push('environment', 'shared-stacks')
+  if (available.packageRegistries) tabs.push('package-registries')
+  return tabs
+}
+
+/**
+ * The tab to show when the window OPENS. The deep-linked request wins whenever it is available;
+ * otherwise fall back to the first tab that is.
+ *
+ * Whatever tab was showing last time is deliberately NOT consulted: the caller has just asked
+ * for `requested`, and honouring a leftover selection over it would silently ignore the deep
+ * link. Falling back to `requested` when nothing is available at all keeps the ref naming the
+ * thing that was asked for, so the re-pin below can land on it once its probe resolves.
+ */
+export function openInfrastructureTab(
+  tabs: readonly InfrastructureTab[],
+  requested: InfrastructureTab,
+): InfrastructureTab {
+  if (tabs.includes(requested)) return requested
+  return tabs[0] ?? requested
+}
+
+/**
+ * The tab to show after the tab list CHANGES (a probe resolved). Unlike the open-time choice
+ * this one protects the user's current position: a tab list that grows under someone reading a
+ * tab must not yank them elsewhere.
+ *
+ * `settled` is what stops the transient single-tab list from stealing the selection. The probes
+ * resolve independently, so the list legitimately passes through states missing tabs that are
+ * about to appear; falling back to the first tab before the probes have settled would pin the
+ * user to whichever one happened to resolve first, and the deep-linked tab would then be
+ * REJECTED for being the current one's peer rather than shown.
+ */
+export function repinInfrastructureTab(
+  tabs: readonly InfrastructureTab[],
+  current: InfrastructureTab,
+  requested: InfrastructureTab,
+  settled: boolean,
+): InfrastructureTab {
+  if (tabs.includes(current)) return current
+  if (tabs.includes(requested)) return requested
+  if (settled && tabs.length) return tabs[0]!
+  return current
+}

package/app/components/settings/InfrastructureWindow.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // The single tabbed "Infrastructure" window — now a TOP-LEVEL navbar destination (no longer
-// reached through the Integrations hub). Two topical tabs:
+// reached through the Integrations hub). Its topical tabs:
 //   - "Agent containers" — where repo-operating agent containers run. Shows the execution
 //     backend selector, the runner-pool connection (ProviderConnectionTab), and — in local
 //     mode — the warm-container-pool + checkout-reuse settings (the local agent-container
@@ -10,24 +10,33 @@
 //     Compose setup (formerly a standalone "Environment setup" sidebar entry — it writes a
 //     service's Compose recipe plus the workspace's Compose handler, so it belongs beside the
 //     settings it edits rather than at the same level as them).
+//   - "Shared stacks" — long-lived Compose infra a Tester environment attaches to, so it rides
+//     the same probe as the environments tab (nothing to attach to without one).
+//   - "Package registries" — the private npm registries a checkout installs from (formerly an
+//     Integrations-hub row). What a container can resolve its dependencies from is part of the
+//     execution environment, not an optional external system a workspace links in.
 // Local-specific affordances render inline, gated on `auth.localMode?.enabled`. A tab whose
 // backend integration is disabled (503) simply doesn't render.
 import { computed, ref, watch } from 'vue'
-import type { ProviderConnectionKind } from '~/types/providerConnections'
+import type { InfrastructureTab } from '~/types/providerConnections'
+import {
+  infrastructureTabs,
+  openInfrastructureTab,
+  repinInfrastructureTab,
+} from '~/components/settings/InfrastructureWindow.logic'
 import InfrastructureBackendPicker from '~/components/settings/InfrastructureBackendPicker.vue'
 import InfraHandlersConfigurator from '~/components/settings/InfraHandlersConfigurator.vue'
 import DefaultProvisionTypeSection from '~/components/settings/DefaultProvisionTypeSection.vue'
 import LocalContainerPoolSettings from '~/components/settings/LocalContainerPoolSettings.vue'
 import SharedStacksPanel from '~/components/settings/SharedStacksPanel.vue'
 import ComposeEnvironmentSetupSection from '~/components/settings/ComposeEnvironmentSetupSection.vue'
-
-// The shared-stacks tab uses its own slot key beyond the provider-connection kinds.
-type InfraTabValue = ProviderConnectionKind | 'shared-stacks'
+import PackageRegistriesPanel from '~/components/settings/PackageRegistriesPanel.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
 const store = useProviderConnectionsStore()
 const auth = useAuthStore()
+const packageRegistries = usePackageRegistriesStore()
 
 const open = computed({
   get: () => ui.infrastructureOpen,
@@ -45,35 +54,41 @@ const isLocal = computed(() => auth.localMode?.enabled === true)
 const agentsAvailable = computed(() => (auth.infrastructure?.execution.available.length ?? 0) > 0)
 const envsAvailable = computed(() => (auth.infrastructure?.testEnv.available.length ?? 0) > 0)
 
-const tabs = computed(() => {
-  const out: { value: InfraTabValue; label: string; icon: string; slot: string }[] = []
-  if (agentsAvailable.value)
-    out.push({
-      value: 'runner-pool',
-      label: t('settings.providerConnection.tabs.agentContainers'),
-      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',
-    })
-  // Shared stacks are long-lived compose infra a Tester environment attaches to, so they live
-  // alongside the test-environment config (shown wherever an environment backend is available).
-  if (envsAvailable.value)
-    out.push({
-      value: 'shared-stacks',
-      label: t('settings.sharedStacks.tab'),
-      icon: 'i-lucide-layers',
-      slot: 'shared-stacks',
-    })
-  return out
-})
+// Tab presentation, keyed by the closed `InfrastructureTab` union so a new tab fails to compile
+// until it is given a label and an icon. The labels are literal `t()` calls for the same reason
+// they are not resolved in the logic module: a key assembled at runtime is invisible to the
+// typed-message-key check.
+const TAB_LABELS = computed<Record<InfrastructureTab, string>>(() => ({
+  'runner-pool': t('settings.providerConnection.tabs.agentContainers'),
+  environment: t('settings.providerConnection.tabs.testEnvironments'),
+  'shared-stacks': t('settings.sharedStacks.tab'),
+  'package-registries': t('settings.packageRegistries.tab'),
+}))
+const TAB_ICONS: Record<InfrastructureTab, string> = {
+  'runner-pool': 'i-lucide-server-cog',
+  environment: 'i-lucide-cloud',
+  'shared-stacks': 'i-lucide-layers',
+  'package-registries': 'i-lucide-package',
+}
 
-const activeTab = ref<InfraTabValue>(ui.infrastructureTab)
+// `slot` mirrors `value` — the template names one `<template #…>` per tab value.
+const tabs = computed(() =>
+  infrastructureTabs({
+    agents: agentsAvailable.value,
+    environments: envsAvailable.value,
+    // The module's own probe (the backend 503s with no encryption key), same gate as the
+    // Integrations-hub row this replaced — an unconfigured backend shows no dead tab.
+    packageRegistries: packageRegistries.available === true,
+  }).map((value) => ({
+    value,
+    label: TAB_LABELS.value[value],
+    icon: TAB_ICONS[value],
+    slot: value,
+  })),
+)
+const tabValues = computed(() => tabs.value.map((x) => x.value))
+
+const activeTab = ref<InfrastructureTab>(ui.infrastructureTab)
 
 // Honour the deep-linked tab each time the window opens, falling back to the first available
 // tab if the requested one is off.
@@ -82,24 +97,25 @@ watch(
   (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)
+    // The registries tab gates on this probe, so it has to resolve for the tab to appear at
+    // all — the panel's own load is a no-op once this settled (`ensureLoaded` coalesces).
+    // Swallowed here on purpose: the PANEL reports a load failure, and it can only do that
+    // once the tab it lives in exists, so a probe failure has to leave the window itself alone.
+    void packageRegistries.ensureLoaded().catch(() => {})
+    activeTab.value = openInfrastructureTab(tabValues.value, ui.infrastructureTab)
   },
   { 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; only fall back to the first tab once loading settled.
+// deep-linked request. The three availability probes resolve independently, so `tabs` can pass
+// through a transient short list; only fall back to the first tab once loading 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
-  }
+  activeTab.value = repinInfrastructureTab(
+    tabValues.value,
+    activeTab.value,
+    ui.infrastructureTab,
+    store.loaded,
+  )
 })
 </script>
 
@@ -157,6 +173,9 @@ watch([tabs, () => store.loaded], () => {
           <template #shared-stacks>
             <SharedStacksPanel />
           </template>
+          <template #package-registries>
+            <PackageRegistriesPanel />
+          </template>
         </UTabs>
 
         <p v-else class="px-1 py-6 text-center text-sm text-slate-500">