@cat-factory/app 0.77.0 → 0.79.0

package/app/components/settings/PackageRegistriesPanel.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+// Private package registries — the workspace's npm-registry entries (npm private
+// 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'
+import type { PackageRegistryVendor } from '~/types/packageRegistries'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.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 }[] = [
+  { value: 'npmjs', label: 'npm (npmjs.com)', host: 'registry.npmjs.org' },
+  { value: 'github-packages', label: 'GitHub Packages', host: 'npm.pkg.github.com' },
+]
+
+const form = reactive({
+  vendor: 'npmjs' as PackageRegistryVendor,
+  scopes: '',
+  token: '',
+})
+const busy = ref(false)
+
+const vendorHost = computed(() => VENDORS.find((v) => v.value === form.vendor)?.host ?? '')
+
+function vendorLabel(vendor: PackageRegistryVendor): string {
+  return VENDORS.find((v) => v.value === vendor)?.label ?? vendor
+}
+
+/** Parse the comma/space-separated scopes input into `@org` entries. */
+const parsedScopes = computed(() =>
+  form.scopes
+    .split(/[\s,]+/)
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((s) => (s.startsWith('@') ? s : `@${s}`)),
+)
+
+function notifyError(title: string, e: unknown) {
+  toast.add({
+    title,
+    description: e instanceof Error ? e.message : String(e),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+
+watch(
+  open,
+  async (isOpen) => {
+    if (!isOpen) return
+    try {
+      await store.ensureLoaded()
+    } catch (e) {
+      notifyError(t('settings.packageRegistries.toast.loadFailed'), e)
+    }
+  },
+  { immediate: true },
+)
+
+async function addEntry() {
+  busy.value = true
+  try {
+    await store.add({
+      ecosystem: 'npm',
+      vendor: form.vendor,
+      scopes: parsedScopes.value,
+      token: form.token.trim(),
+    })
+    form.scopes = ''
+    form.token = ''
+    toast.add({
+      title: t('settings.packageRegistries.toast.added'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+  } catch (e) {
+    notifyError(t('settings.packageRegistries.toast.addFailed'), e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function removeEntry(entryId: string) {
+  const noun = t('settings.packageRegistries.entryNoun')
+  if (!(await confirmAction('remove', noun))) return
+  busy.value = true
+  try {
+    await store.remove(entryId)
+    toastDone('remove', noun)
+  } catch (e) {
+    notifyError(t('settings.packageRegistries.toast.removeFailed'), e)
+  } finally {
+    busy.value = false
+  }
+}
+</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"
+              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>
+
+          <UFormField :label="t('settings.packageRegistries.add.token')">
+            <UInput
+              v-model="form.token"
+              type="password"
+              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>
+    </template>
+  </UModal>
+</template>

package/app/components/testing/TestReportWindow.vue

@@ -18,6 +18,7 @@ import ArtifactLightbox from '~/components/media/ArtifactLightbox.vue'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import StepContainerStatus from '~/components/panels/StepContainerStatus.vue'
+import AttemptEntryHeader from '~/components/panels/AttemptEntryHeader.vue'
 import EnvironmentStatusPanel from '~/components/environments/EnvironmentStatusPanel.vue'
 import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
 
@@ -507,30 +508,18 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   data-testid="tester-fixer-attempt"
                   class="rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2"
                 >
-                  <div class="flex items-center gap-2">
-                    <UIcon
-                      :name="a.outcome === 'completed' ? 'i-lucide-wrench' : 'i-lucide-circle-x'"
-                      class="h-3.5 w-3.5 shrink-0"
-                      :class="a.outcome === 'completed' ? 'text-amber-300' : 'text-rose-400'"
-                    />
-                    <span class="text-[13px] font-medium text-slate-200">
-                      {{ t('testing.fixerTimeline.attempt', { n: a.attempt }) }}
-                    </span>
-                    <UBadge
-                      :color="a.outcome === 'completed' ? 'neutral' : 'error'"
-                      variant="subtle"
-                      size="sm"
-                    >
-                      {{
-                        a.outcome === 'completed'
-                          ? t('testing.fixerTimeline.completed')
-                          : t('testing.fixerTimeline.failed')
-                      }}
-                    </UBadge>
-                    <span class="ms-auto text-[11px] text-slate-500">{{
-                      d(new Date(a.at), 'short')
-                    }}</span>
-                  </div>
+                  <AttemptEntryHeader
+                    :label="t('testing.fixerTimeline.attempt', { n: a.attempt })"
+                    :outcome="a.outcome"
+                    :outcome-label="
+                      a.outcome === 'completed'
+                        ? t('testing.fixerTimeline.completed')
+                        : t('testing.fixerTimeline.failed')
+                    "
+                    :at="a.at"
+                    :icon="a.outcome === 'completed' ? 'i-lucide-wrench' : 'i-lucide-circle-x'"
+                    :icon-class="a.outcome === 'completed' ? 'text-amber-300' : 'text-rose-400'"
+                  />
                   <p v-if="a.summary" class="mt-1 text-[12px] leading-snug text-slate-400">
                     {{ a.summary }}
                   </p>

package/app/composables/api/environments.ts

@@ -0,0 +1,10 @@
+import { listEnvironmentsContract } from '@cat-factory/contracts'
+import type { ApiContext } from './context'
+
+/** Ephemeral environments: the workspace's live env handles (used to resolve frontend bindings). */
+export function environmentsApi({ send, ws }: ApiContext) {
+  return {
+    listEnvironments: (workspaceId: string) =>
+      send(listEnvironmentsContract, { pathPrefix: ws(workspaceId) }),
+  }
+}

package/app/composables/api/packageRegistries.ts

@@ -0,0 +1,24 @@
+import {
+  addPackageRegistryContract,
+  deletePackageRegistryContract,
+  listPackageRegistriesContract,
+} from '@cat-factory/contracts'
+import type { AddPackageRegistryInput } from '~/types/packageRegistries'
+import type { ApiContext } from './context'
+
+/** Private package registries: the workspace's entries agent containers install with. */
+export function packageRegistriesApi({ send, ws }: ApiContext) {
+  return {
+    listPackageRegistries: (workspaceId: string) =>
+      send(listPackageRegistriesContract, { pathPrefix: ws(workspaceId) }),
+
+    addPackageRegistry: (workspaceId: string, body: AddPackageRegistryInput) =>
+      send(addPackageRegistryContract, { pathPrefix: ws(workspaceId), body }),
+
+    deletePackageRegistry: (workspaceId: string, entryId: string) =>
+      send(deletePackageRegistryContract, {
+        pathPrefix: ws(workspaceId),
+        pathParams: { entryId },
+      }),
+  }
+}

package/app/composables/useApi.ts

@@ -18,11 +18,13 @@ import { kaizenApi } from './api/kaizen'
 import { localSettingsApi } from './api/localSettings'
 import { modelsApi } from './api/models'
 import { notificationsApi } from './api/notifications'
+import { packageRegistriesApi } from './api/packageRegistries'
 import { presetsApi } from './api/presets'
 import { providerConnectionsApi } from './api/providerConnections'
 import { provisioningLogsApi } from './api/provisioningLogs'
 import { recurringApi } from './api/recurring'
 import { previewApi } from './api/preview'
+import { environmentsApi } from './api/environments'
 import { releaseHealthApi } from './api/releaseHealth'
 import { sandboxApi } from './api/sandbox'
 import { reviewsApi } from './api/reviews'
@@ -112,7 +114,9 @@ export function useApi() {
     ...infraHandlersApi(ctx),
     ...provisioningLogsApi(ctx),
     ...releaseHealthApi(ctx),
+    ...packageRegistriesApi(ctx),
     ...previewApi(ctx),
+    ...environmentsApi(ctx),
     ...recurringApi(ctx),
     ...sandboxApi(ctx),
     ...githubApi(ctx),

package/app/pages/index.vue

@@ -85,6 +85,9 @@ const AccountSettingsPanel = defineAsyncComponent(
 const ObservabilityConnectionPanel = defineAsyncComponent(
   () => import('~/components/settings/ObservabilityConnectionPanel.vue'),
 )
+const PackageRegistriesPanel = defineAsyncComponent(
+  () => import('~/components/settings/PackageRegistriesPanel.vue'),
+)
 const InfrastructureWindow = defineAsyncComponent(
   () => import('~/components/settings/InfrastructureWindow.vue'),
 )
@@ -356,6 +359,7 @@ watch(
       <WorkspaceSettingsPanel v-if="ui.workspaceSettingsOpen" />
       <AccountSettingsPanel v-if="ui.accountSettingsOpen" />
       <ObservabilityConnectionPanel v-if="ui.observabilityConnectionOpen" />
+      <PackageRegistriesPanel v-if="ui.packageRegistriesOpen" />
       <InfrastructureWindow v-if="ui.infrastructureOpen" />
       <ModelConfigurationPanel v-if="ui.modelConfigOpen" />
       <LocalModelEndpointsPanel v-if="ui.localModelsOpen" />

package/app/stores/environments.ts

@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import {
+  boundServiceFrameIds,
+  indexLiveServiceEnvUrls,
+  type FrontendConfig,
+} from '@cat-factory/contracts'
+import type { EnvironmentHandle } from '~/types/domain'
+import { useWorkspaceStore } from '~/stores/workspace'
+
+/**
+ * The workspace's live ephemeral-environment handles, fetched on demand from
+ * `GET /workspaces/:ws/environments`. Used to resolve a `frontend` frame's backend bindings to
+ * their live service URLs (the SPA mirror of the backend's `AgentContextBuilder` resolution) — so
+ * the inspector and the run/step detail can show each `envVar → live URL | mocked` the SAME way a
+ * UI-test run would. Kept as a thin, load-on-open cache (no snapshot delivery, no self-poll):
+ * the callers refresh it when the frontend inspector / a UI-test step detail opens.
+ */
+export const useEnvironmentsStore = defineStore('environments', () => {
+  const api = useApi()
+
+  /** The last-fetched env handles for the current workspace. */
+  const handles = ref<EnvironmentHandle[]>([])
+  /** A load is in flight (drives an optional spinner). */
+  const loading = ref(false)
+
+  /** (Re)load the workspace's environment handles; failures leave the last-known list. */
+  async function load(): Promise<void> {
+    const ws = useWorkspaceStore()
+    loading.value = true
+    try {
+      handles.value = await api.listEnvironments(ws.requireId())
+    } catch {
+      // Transient: keep the last-known handles rather than blanking the resolved view.
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /**
+   * The live `serviceFrameId → url` map for exactly the service FRAMES a frontend config binds —
+   * the same newest-wins, ready-with-URL indexing the backend applies (`indexLiveServiceEnvUrls`),
+   * so the SPA's resolved-binding view can't drift from what a run would resolve.
+   */
+  function liveServiceEnvUrls(
+    config: Pick<FrontendConfig, 'backendBindings'>,
+  ): Map<string, string> {
+    return indexLiveServiceEnvUrls(handles.value, boundServiceFrameIds(config))
+  }
+
+  return { handles, loading, load, liveServiceEnvUrls }
+})

package/app/stores/packageRegistries.ts

@@ -0,0 +1,66 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { AddPackageRegistryInput, PackageRegistryEntryView } from '~/types/packageRegistries'
+import { useWorkspaceStore } from '~/stores/workspace'
+import { apiErrorStatus } from '~/composables/api/errors'
+
+/**
+ * The workspace's private package-registry entries (npm private orgs, GitHub
+ * Packages) that agent containers install with. Tokens are write-only — the store
+ * only ever holds the redacted summary views. Loaded on demand (the registries
+ * panel + the Integrations hub badge), not from the snapshot.
+ */
+export const usePackageRegistriesStore = defineStore('packageRegistries', () => {
+  const api = useApi()
+
+  const entries = ref<PackageRegistryEntryView[]>([])
+  const loading = ref(false)
+  // Mirrors the backend's opt-in gate (the module 503s when the encryption key is
+  // absent): `null` until first probed, then `true`/`false`. The hub hides its
+  // registries entry point when this is false.
+  const available = ref<boolean | null>(null)
+  let inFlight: Promise<void> | null = null
+
+  /** Force a refresh of the entry list (used after an add/remove). */
+  async function load() {
+    const ws = useWorkspaceStore()
+    loading.value = true
+    try {
+      entries.value = (await api.listPackageRegistries(ws.requireId())).entries
+      available.value = true
+    } catch (err) {
+      if (apiErrorStatus(err) === 503) {
+        // A definitive 503 means the integration is unconfigured (no encryption key on
+        // the backend): hide the UI entry points and stop probing.
+        available.value = false
+        entries.value = []
+      }
+      // Any other failure (transient 5xx / network) is left untouched: it must not hide
+      // an already-available panel nor cache a false "unavailable". `available` stays
+      // `null` when never probed, so `ensureLoaded` remains retryable on the next open.
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /** Load once and share the result (coalescing concurrent callers); `load()` refreshes. */
+  async function ensureLoaded() {
+    if (available.value !== null) return
+    if (!inFlight) inFlight = load().finally(() => (inFlight = null))
+    return inFlight
+  }
+
+  async function add(input: AddPackageRegistryInput) {
+    const ws = useWorkspaceStore()
+    entries.value = (await api.addPackageRegistry(ws.requireId(), input)).entries
+    available.value = true
+  }
+
+  async function remove(entryId: string) {
+    const ws = useWorkspaceStore()
+    await api.deletePackageRegistry(ws.requireId(), entryId)
+    entries.value = entries.value.filter((entry) => entry.id !== entryId)
+  }
+
+  return { entries, loading, available, load, ensureLoaded, add, remove }
+})

package/app/stores/ui.ts

@@ -153,6 +153,9 @@ export const useUiStore = defineStore('ui', () => {
   // today, pluggable). NB: distinct from `observabilityInstanceId` below, which is the
   // LLM per-call observability panel.
   const observabilityConnectionOpen = ref(false)
+  // Private package registries: the workspace's npm/GitHub-Packages entries agent
+  // containers install with. Opened from the Integrations hub.
+  const packageRegistriesOpen = ref(false)
   // The single tabbed Infrastructure window — a TOP-LEVEL navbar destination (no longer
   // reached via the Integrations hub). Two topical tabs: "Agent containers" (the execution
   // backend + self-hosted runner pool, plus the local-mode warm pool/checkout) and "Test
@@ -561,6 +564,13 @@ export const useUiStore = defineStore('ui', () => {
   function closeObservabilityConnection() {
     observabilityConnectionOpen.value = false
   }
+  function openPackageRegistries() {
+    resetHubReturn()
+    packageRegistriesOpen.value = true
+  }
+  function closePackageRegistries() {
+    packageRegistriesOpen.value = false
+  }
   // Top-level navbar entry into the Infrastructure window. No hub-return marker (it isn't
   // reached from the Integrations hub), so the window shows no "Back to Integrations" control.
   function openInfrastructure(tab: 'environment' | 'runner-pool' = 'runner-pool') {
@@ -791,6 +801,7 @@ export const useUiStore = defineStore('ui', () => {
     accountSettingsTab,
     accountSettingsScrollTarget,
     observabilityConnectionOpen,
+    packageRegistriesOpen,
     infrastructureOpen,
     infrastructureTab,
     openInfrastructure,
@@ -880,6 +891,8 @@ export const useUiStore = defineStore('ui', () => {
     setAccountSettingsTab,
     openObservabilityConnection,
     closeObservabilityConnection,
+    openPackageRegistries,
+    closePackageRegistries,
     openProviderConnection,
     closeProviderConnection,
     k3sSetupPrefill,

package/app/types/domain.ts

@@ -33,6 +33,8 @@ export type {
   FrontendConfig,
   FrontendBackendBinding,
   FrontendBackendSource,
+  ResolvedFrontendBinding,
+  EnvironmentHandle,
   ServiceConnection,
   FrontendBranch,
   FrontendPackageManager,

package/app/types/packageRegistries.ts

@@ -0,0 +1,13 @@
+// Private package-registry settings shapes. Per-workspace registry entries (npm
+// private orgs, GitHub Packages) whose tokens are write-only — the list view only
+// ever carries the non-secret summary (vendor + scopes + token tail).
+//
+// All wire shapes are sourced from @cat-factory/contracts (single source of truth).
+
+export type {
+  PackageEcosystem,
+  PackageRegistryVendor,
+  AddPackageRegistryInput,
+  PackageRegistryEntryView,
+  PackageRegistryListView,
+} from '@cat-factory/contracts'

package/i18n/locales/en.json

@@ -544,6 +544,12 @@
           "failed": "Failed",
           "stopped": "Not running"
         }
+      },
+      "resolved": {
+        "title": "Resolves to",
+        "duplicateWarning": "Used on more than one binding, so only the last applies: {vars}.",
+        "serviceOffline": "{service}: no live environment (mocked)",
+        "mock": "Mock (WireMock)"
       }
     },
     "serviceConnections": {
@@ -1491,6 +1497,7 @@
         "documents": "Documents",
         "taskTrackers": "Task trackers",
         "observability": "Observability",
+        "development": "Development",
         "personal": "Personal (only you)"
       },
       "items": {
@@ -1528,6 +1535,10 @@
           "label": "Post-release health",
           "description": "Watch monitors and SLOs after a release ships (Datadog)."
         },
+        "packageRegistries": {
+          "label": "Private package registries",
+          "description": "npm and GitHub Packages tokens agents use to install private dependencies."
+        },
         "githubPat": {
           "label": "My GitHub token",
           "description": "A personal access token used for runs you start (pushes, PRs, CI, merge)."
@@ -2025,6 +2036,31 @@
       "connectionNoun": "the observability connection",
       "incidentNoun": "the incident provider"
     },
+    "packageRegistries": {
+      "title": "Private package registries",
+      "intro": "Connect the private registries your repositories install from. Agents receive them when they check out a repository, so private dependencies resolve during installs. Tokens are write-only: to change one, remove the entry and add it again.",
+      "entryNoun": "registry entry",
+      "list": {
+        "heading": "Connected registries",
+        "tokenTail": "token …{tail}",
+        "remove": "Remove entry"
+      },
+      "add": {
+        "heading": "Add a registry",
+        "vendor": "Registry",
+        "host": "The token is sent only to {host}.",
+        "scopes": "Package scopes",
+        "scopesHelp": "Comma-separated npm scopes",
+        "token": "Access token",
+        "save": "Add registry"
+      },
+      "toast": {
+        "loadFailed": "Could not load package registries",
+        "added": "Registry added",
+        "addFailed": "Could not add the registry",
+        "removeFailed": "Could not remove the registry entry"
+      }
+    },
     "localMode": {
       "title": "Local mode",
       "intro": "Tuning for the local container runner, stored on this machine's deployment (it replaced the {poolVars} / {harnessVars} env vars). Saving resizes the warm pool live, no restart needed; in-flight runs keep the container they already hold.",
@@ -2945,6 +2981,8 @@
     },
     "attemptsHeading": "{helper} attempts",
     "attempt": "Attempt {number}",
+    "attemptInstructions": "Handed to {helper}",
+    "attemptReport": "{helper} report",
     "outcome": {
       "completed": "completed",
       "failed": "failed"