@cat-factory/app 0.182.0 → 0.183.0

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">

package/app/components/settings/PackageRegistriesPanel.vue

@@ -3,24 +3,18 @@
 // orgs, GitHub Packages) that agent containers use to resolve private dependencies
 // on checkout. Tokens are write-only: the list renders from the redacted summary
 // (vendor + scopes + token tail) and an entry is edited by deleting + re-adding.
-// Opened from the Integrations hub.
-import { computed, reactive, ref, watch } from 'vue'
+// Renders inline inside the Infrastructure window's "Package registries" tab: what a
+// checkout installs from is part of where agent containers RUN, not an optional
+// external system the workspace links in.
+import { computed, onMounted, reactive, ref } from 'vue'
 import type { PackageRegistryVendor } from '~/types/packageRegistries'
-import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
 
 const { t } = useI18n()
-const ui = useUiStore()
 const store = usePackageRegistriesStore()
 const toast = useToast()
 const { confirmAction, toastDone } = useConfirmAction()
 
-const open = computed({
-  get: () => ui.packageRegistriesOpen,
-  set: (v: boolean) => (v ? ui.openPackageRegistries() : ui.closePackageRegistries()),
-})
-const back = useIntegrationBack(open)
-
 // The registry vendors a workspace can connect. Fixed set — the host derives from the
 // vendor server-side, so it renders read-only here. Vendor names stay verbatim.
 const VENDORS: { value: PackageRegistryVendor; label: string; host: string }[] = [
@@ -59,18 +53,19 @@ function notifyError(title: string, e: unknown) {
   })
 }
 
-watch(
-  open,
-  async (isOpen) => {
-    if (!isOpen) return
-    try {
-      await store.ensureLoaded()
-    } catch (e) {
-      notifyError(t('settings.packageRegistries.toast.loadFailed'), e)
-    }
-  },
-  { immediate: true },
-)
+// The tab this renders in only exists once the window's probe resolved `available === true`, so
+// `ensureLoaded()` here would early-return every time and this error branch would be dead code.
+// Read the list outright instead: the window owns the PROBE (a failure there means no tab), the
+// panel owns the DATA (a failure here means the reader is looking at a list we could not fetch,
+// and must be told). It also drops the staleness `ensureLoaded` carried — reopening the tab
+// after an entry was added elsewhere used to re-render the first load's snapshot.
+onMounted(async () => {
+  try {
+    await store.load()
+  } catch (e) {
+    notifyError(t('settings.packageRegistries.toast.loadFailed'), e)
+  }
+})
 
 async function addEntry() {
   busy.value = true
@@ -111,108 +106,121 @@ async function removeEntry(entryId: string) {
 </script>
 
 <template>
-  <UModal
-    v-model:open="open"
-    :title="t('settings.packageRegistries.title')"
-    :ui="{ content: 'max-w-lg' }"
-  >
-    <template #title>
-      <IntegrationBackTitle :title="t('settings.packageRegistries.title')" @back="back" />
-    </template>
-    <template #body>
-      <div class="space-y-4" data-testid="package-registries-panel">
-        <p class="text-sm text-slate-400">
-          {{ t('settings.packageRegistries.intro') }}
-        </p>
-
-        <section
-          v-if="store.entries.length"
-          class="space-y-2 rounded-lg border border-slate-700 p-3"
-        >
-          <h3 class="text-sm font-semibold">
-            {{ t('settings.packageRegistries.list.heading') }}
-          </h3>
-          <div
-            v-for="entry in store.entries"
-            :key="entry.id"
-            class="flex items-center justify-between gap-2 rounded-md border border-slate-800 px-3 py-2"
-          >
-            <div class="min-w-0 space-y-1">
-              <div class="flex items-center gap-2">
-                <span class="text-sm font-medium">{{ vendorLabel(entry.vendor) }}</span>
-                <span class="text-[11px] text-slate-500">
-                  {{ t('settings.packageRegistries.list.tokenTail', { tail: entry.tokenTail }) }}
-                </span>
-              </div>
-              <div class="flex flex-wrap gap-1">
-                <UBadge
-                  v-for="scope in entry.scopes"
-                  :key="scope"
-                  color="neutral"
-                  variant="soft"
-                  size="sm"
-                >
-                  {{ scope }}
-                </UBadge>
-              </div>
-            </div>
-            <UButton
-              color="error"
-              variant="ghost"
-              icon="i-lucide-trash-2"
+  <div class="space-y-4" data-testid="package-registries-panel">
+    <p class="text-sm text-slate-400">
+      {{ t('settings.packageRegistries.intro') }}
+    </p>
+
+    <section v-if="store.entries.length" class="space-y-2 rounded-lg border border-slate-700 p-3">
+      <h3 class="text-sm font-semibold">
+        {{ t('settings.packageRegistries.list.heading') }}
+      </h3>
+      <div
+        v-for="entry in store.entries"
+        :key="entry.id"
+        class="flex items-center justify-between gap-2 rounded-md border border-slate-800 px-3 py-2"
+      >
+        <div class="min-w-0 space-y-1">
+          <div class="flex items-center gap-2">
+            <span class="text-sm font-medium">{{ vendorLabel(entry.vendor) }}</span>
+            <span class="text-[11px] text-slate-500">
+              {{ t('settings.packageRegistries.list.tokenTail', { tail: entry.tokenTail }) }}
+            </span>
+          </div>
+          <div class="flex flex-wrap gap-1">
+            <UBadge
+              v-for="scope in entry.scopes"
+              :key="scope"
+              color="neutral"
+              variant="soft"
               size="sm"
-              :loading="busy"
-              :data-testid="`package-registry-delete-${entry.id}`"
-              :aria-label="t('settings.packageRegistries.list.remove')"
-              @click="removeEntry(entry.id)"
-            />
+            >
+              {{ scope }}
+            </UBadge>
+            <!-- An entry with no scopes authenticates its host without routing any scope to
+                 it (the deliberate mixed public/private setup) — say so, or the row reads as
+                 half-configured. -->
+            <span v-if="!entry.scopes.length" class="text-[11px] text-slate-500">
+              {{ t('settings.packageRegistries.list.noScopes') }}
+            </span>
           </div>
-        </section>
-
-        <section class="space-y-3 rounded-lg border border-slate-700 p-3">
-          <h3 class="text-sm font-semibold">
-            {{ t('settings.packageRegistries.add.heading') }}
-          </h3>
-
-          <UFormField :label="t('settings.packageRegistries.add.vendor')">
-            <USelect
-              v-model="form.vendor"
-              :items="VENDORS"
-              value-key="value"
-              class="w-full"
-              data-testid="package-registry-vendor"
-            />
-          </UFormField>
-          <p class="text-[11px] text-slate-500">
-            {{ t('settings.packageRegistries.add.host', { host: vendorHost }) }}
-          </p>
-
-          <UFormField
-            :label="t('settings.packageRegistries.add.scopes')"
-            :help="t('settings.packageRegistries.add.scopesHelp')"
-          >
-            <UInput
-              v-model="form.scopes"
-              placeholder="@my-org, @my-other-org"
-              class="w-full"
-              data-testid="package-registry-scopes"
-            />
-          </UFormField>
-
-          <UFormField :label="t('settings.packageRegistries.add.token')">
-            <SecretInput v-model="form.token" class="w-full" data-testid="package-registry-token" />
-          </UFormField>
-
-          <UButton
-            :loading="busy"
-            :disabled="!parsedScopes.length || !form.token.trim()"
-            data-testid="package-registry-save"
-            @click="addEntry"
-          >
-            {{ t('settings.packageRegistries.add.save') }}
-          </UButton>
-        </section>
+        </div>
+        <UButton
+          color="error"
+          variant="ghost"
+          icon="i-lucide-trash-2"
+          size="sm"
+          :loading="busy"
+          :data-testid="`package-registry-delete-${entry.id}`"
+          :aria-label="t('settings.packageRegistries.list.remove')"
+          @click="removeEntry(entry.id)"
+        />
+      </div>
+    </section>
+
+    <section class="space-y-3 rounded-lg border border-slate-700 p-3">
+      <h3 class="text-sm font-semibold">
+        {{ t('settings.packageRegistries.add.heading') }}
+      </h3>
+
+      <UFormField :label="t('settings.packageRegistries.add.vendor')">
+        <USelect
+          v-model="form.vendor"
+          :items="VENDORS"
+          value-key="value"
+          class="w-full"
+          data-testid="package-registry-vendor"
+        />
+      </UFormField>
+      <p class="text-[11px] text-slate-500">
+        {{ t('settings.packageRegistries.add.host', { host: vendorHost }) }}
+      </p>
+
+      <UFormField
+        :label="t('settings.packageRegistries.add.scopes')"
+        :help="t('settings.packageRegistries.add.scopesHelp')"
+      >
+        <UInput
+          v-model="form.scopes"
+          placeholder="@my-org, @my-other-org"
+          class="w-full"
+          data-testid="package-registry-scopes"
+        />
+      </UFormField>
+      <!-- What will actually be SAVED. The parse splits on commas/whitespace and prefixes a
+           missing `@`, so the field's text and the stored scopes routinely differ — and now
+           that an empty list is a legitimate save, "I typed something that parsed to nothing"
+           and "I meant to leave this empty" would otherwise look identical at the button. -->
+      <div v-if="parsedScopes.length" class="flex flex-wrap gap-1">
+        <UBadge
+          v-for="scope in parsedScopes"
+          :key="scope"
+          color="neutral"
+          variant="soft"
+          size="sm"
+          data-testid="package-registry-parsed-scope"
+        >
+          {{ scope }}
+        </UBadge>
       </div>
-    </template>
-  </UModal>
+      <!-- Why leaving this empty is often the RIGHT answer — a scope mapping is all-or-nothing,
+           so an org publishing some of its `@org` packages publicly breaks under one. -->
+      <p class="text-[11px] text-slate-500">
+        {{ t('settings.packageRegistries.add.scopesNote') }}
+      </p>
+
+      <UFormField :label="t('settings.packageRegistries.add.token')">
+        <SecretInput v-model="form.token" class="w-full" data-testid="package-registry-token" />
+      </UFormField>
+
+      <UButton
+        :loading="busy"
+        :disabled="!form.token.trim()"
+        data-testid="package-registry-save"
+        @click="addEntry"
+      >
+        {{ t('settings.packageRegistries.add.save') }}
+      </UButton>
+    </section>
+  </div>
 </template>

package/app/composables/useInitiativePlanning.ts

@@ -4,12 +4,25 @@ import { useExecutionStore } from '~/stores/execution'
 import { useInitiativesStore } from '~/stores/initiative'
 import { usePipelinesStore } from '~/stores/pipelines'
 import { useUiStore } from '~/stores/ui'
+import { agentKindMeta } from '~/utils/catalog'
+import { selectPlanApproval, type InitiativeAttentionKind } from '~/utils/initiative'
 import {
   INITIATIVE_INTERVIEWER_KIND,
   interviewGatePhase,
   interviewStepReached,
 } from '~/utils/interviewGate'
 
+/**
+ * What an initiative's planning run needs from a human right now: which kind of park it is (the
+ * card + inspector resolve its icon/label from the shared `INITIATIVE_ATTENTION_*` maps, so the
+ * two surfaces word one park identically), and the action that opens the surface which can
+ * RESOLVE it — the step's own dedicated window, via `dispatchStepView`.
+ */
+export interface InitiativeAttention {
+  kind: InitiativeAttentionKind
+  open: () => void
+}
+
 /**
  * Shared planning affordances for an `initiative`-level block, used by BOTH the board card
  * (`InitiativeCard`) and the inspector (`InitiativeInspector`) so the two surfaces can never drift
@@ -83,6 +96,60 @@ export function useInitiativePlanning(blockId: MaybeRefOrGetter<string>) {
     () => interviewPhase.value === 'working' || interviewPhase.value === 'preparing',
   )
 
+  /**
+   * The planner's parked plan-approval gate, or undefined. `pl_initiative` gates the planner step
+   * (`{ kind: 'initiative-planner', gate: true }`), so a finished planning pass PARKS the run on a
+   * pending `step.approval` until a human accepts the plan — the state this composable's other
+   * flags deliberately do NOT cover (the interview has converged, and the run is `blocked`, so
+   * `awaitingAnswers` and `interviewing` are both false and the card would otherwise sit on a
+   * disabled, spinning "Run planning").
+   *
+   * The interviewer's own park is excluded by the window its step routes to (see
+   * {@link selectPlanApproval}), not by the interview phase, so the two affordances can never both
+   * claim one park.
+   */
+  const planApproval = computed(() =>
+    selectPlanApproval(
+      execution.approvalsByBlock.get(toValue(blockId)) ?? [],
+      (kind) => agentKindMeta(kind).resultView,
+    ),
+  )
+
+  /** An agent-raised decision on the planning run (the analyst is an ordinary agent step). */
+  const pendingDecision = computed(() => execution.decisionsByBlock.get(toValue(blockId))?.[0])
+
+  /**
+   * The single thing a human has to act on, or null — the initiative dual of a task card's
+   * `attention`. A decision outranks an approval (a step never holds both; this is just a stable
+   * order). Opening always goes through the step-view dispatch, so the park lands in the window
+   * that can RESOLVE it (the plan gate → the tracker window's plan-review rail) rather than a
+   * generic panel that would refuse it.
+   */
+  const attention = computed<InitiativeAttention | null>(() => {
+    const id = toValue(blockId)
+    const decision = pendingDecision.value
+    if (decision) {
+      return {
+        kind: 'decision',
+        open: () => {
+          ui.select(id)
+          ui.openDecision(decision.instanceId, decision.decision.id)
+        },
+      }
+    }
+    const approval = planApproval.value
+    if (approval) {
+      return {
+        kind: 'approval',
+        open: () => {
+          ui.select(id)
+          ui.openApprovalDetail(approval.instanceId, approval.approval.id)
+        },
+      }
+    }
+    return null
+  })
+
   /**
    * Optimistic start flag: flip true the instant "Run planning" is clicked, before the stream
    * pushes the block's `executionId` back. Cleared the moment `running` takes over (success) or the
@@ -123,6 +190,9 @@ export function useInitiativePlanning(blockId: MaybeRefOrGetter<string>) {
     interviewPhase,
     awaitingAnswers,
     interviewing,
+    planApproval,
+    pendingDecision,
+    attention,
     starting,
     runPlanning,
     openPlanning,

package/app/modular/nav-contributions.spec.ts

@@ -285,10 +285,20 @@ describe('nav grouping helpers', () => {
       'workspaceContext',
       'configuration',
     ])
-    // The engines are their own section, ahead of the optional integrations; `model-config`
-    // sits beside the providers it picks models from rather than under `configuration`.
+    // The model layer is its own section, ahead of the optional integrations: the engines,
+    // the per-agent model choice (beside the providers it picks from, rather than under
+    // `configuration`), and the two surfaces that evaluate a prompt+agent+model. Sandbox and
+    // Kaizen used to sit under `integrations`, which read as a claim they connect to an
+    // external system; they don't — they exercise and grade what this section configures.
     const models = groups.find((g) => g.group === 'models')
-    expect(models?.items.map((i) => i.id)).toEqual(['model-providers', 'model-config'])
+    expect(models?.items.map((i) => i.id)).toEqual([
+      'model-providers',
+      'model-config',
+      'sandbox',
+      'kaizen',
+    ])
+    const integrations = groups.find((g) => g.group === 'integrations')
+    expect(integrations?.items.map((i) => i.id)).toEqual(['integrations-hub'])
     const configuration = groups.find((g) => g.group === 'configuration')
     expect(configuration?.items.map((i) => i.id)).toEqual([
       'workspace-settings',