@cat-factory/app 0.208.2 → 0.210.0

package/app/components/settings/CapabilityCredentialsPanel.vue

@@ -0,0 +1,272 @@
+<script setup lang="ts">
+// Capability credentials — the sealed, per-workspace values behind the secrets a registered tool
+// server (MCP) or generative binary integration declares BY NAME. It renders as a CHECKLIST, not
+// a blank key-value form: which keys exist is a property of the deployment's CODE, so the panel
+// projects the declarations and the operator fills them in. A blank form would mean reading the
+// deployment's source to learn what to type, with a typo producing a sealed row nothing asks for.
+//
+// Values are write-only and saved ONE KEY AT A TIME. The whole-set write is unusable here: this
+// client never receives the values, so replacing the set would delete every credential the
+// operator did not retype in this sitting.
+//
+// Renders inside the Infrastructure window's "Capability credentials" tab: what an agent's tools
+// authenticate as is part of where agents RUN. `secrets.manage`-gated end to end (the READ
+// included — the view names the deployment's credential keys), so the tab is HIDDEN, never
+// disabled, for anyone without it.
+import { computed, onMounted, reactive, ref } from 'vue'
+import type { CapabilityCredentialStatus } from '~/types/capabilityCredentials'
+import SecretInput from '~/components/common/SecretInput.vue'
+
+const { t, d } = useI18n()
+const store = useCapabilityCredentialsStore()
+const toast = useToast()
+const { confirmAction, toastDone } = useConfirmAction()
+
+// Which declaring capability wants a key. An exhaustive Record over the wire union, so a new
+// subject fails to compile until it has translated copy — the sanctioned guard for an enum-keyed
+// lookup the typed-message-key check cannot see.
+type CredentialSubject = CapabilityCredentialStatus['declaredBy'][number]['subject']
+const SUBJECT_LABELS = computed<Record<CredentialSubject, string>>(() => ({
+  'tool-server': t('settings.capabilityCredentials.subject.toolServer'),
+  'binary-generator': t('settings.capabilityCredentials.subject.binaryGenerator'),
+}))
+
+// Draft values, keyed by credential key. Never prefilled: nothing here was ever read back, and a
+// masked placeholder standing in for a stored value would make "unchanged" and "retyped" look
+// identical at the save button.
+const drafts = reactive<Record<string, string>>({})
+// Which row's WHICH button is in flight. The action is part of the state because save and delete
+// sit beside each other on one row: a shared per-key flag would spin the delete button for the
+// save the user just clicked, which reads as a delete in progress.
+const busy = ref<{ key: string; action: 'save' | 'remove' } | null>(null)
+// Failures present through the shared status-class funnel (translated description up front, the
+// raw backend prose + requestId behind "Show details"), never raw `e.message` as the description.
+const { present } = usePipelineErrorToast()
+
+const view = computed(() => store.view)
+
+function isBusy(key: string, action: 'save' | 'remove') {
+  return busy.value?.key === key && busy.value.action === action
+}
+
+// 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 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, so reopening the tab after the
+// deployment registered a new capability shows the new key.
+onMounted(async () => {
+  try {
+    await store.load()
+  } catch (e) {
+    present(e, 'settings.capabilityCredentials.toast.loadFailed')
+  }
+})
+
+async function saveKey(key: string) {
+  const value = (drafts[key] ?? '').trim()
+  if (!value) return
+  busy.value = { key, action: 'save' }
+  try {
+    await store.save(key, value)
+    drafts[key] = ''
+    toast.add({
+      title: t('settings.capabilityCredentials.toast.saved', { key }),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+  } catch (e) {
+    present(e, 'settings.capabilityCredentials.toast.saveFailed')
+  } finally {
+    busy.value = null
+  }
+}
+
+async function removeKey(key: string) {
+  const noun = t('settings.capabilityCredentials.credentialNoun', { key })
+  if (!(await confirmAction('remove', noun))) return
+  busy.value = { key, action: 'remove' }
+  try {
+    await store.remove(key)
+    toastDone('remove', noun)
+  } catch (e) {
+    present(e, 'settings.capabilityCredentials.toast.removeFailed')
+  } finally {
+    busy.value = null
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4" data-testid="capability-credentials-panel">
+    <p class="text-sm text-slate-400">
+      {{ t('settings.capabilityCredentials.intro') }}
+    </p>
+
+    <!-- The declaration read failed (the deployment's generative integrations could not be
+         reached), so this checklist may be SHORT and the orphan list is withheld. Said out loud
+         rather than rendered as a clean empty list: an outage and "nothing needs a credential"
+         are the same list and opposite facts. -->
+    <UAlert
+      v-if="view?.declarationsIncomplete"
+      color="warning"
+      variant="subtle"
+      icon="i-lucide-triangle-alert"
+      :title="t('settings.capabilityCredentials.incomplete.title')"
+      :description="t('settings.capabilityCredentials.incomplete.body')"
+      data-testid="capability-credentials-incomplete"
+    />
+
+    <section
+      v-for="entry in view?.declared ?? []"
+      :key="entry.key"
+      class="space-y-3 rounded-lg border border-slate-700 p-3"
+      :data-testid="`capability-credential-${entry.key}`"
+    >
+      <div class="flex flex-wrap items-center gap-2">
+        <code class="font-mono text-sm font-medium">{{ entry.key }}</code>
+        <UBadge v-if="entry.required" color="warning" variant="soft" size="sm">
+          {{ t('settings.capabilityCredentials.required') }}
+        </UBadge>
+        <UBadge v-else color="neutral" variant="soft" size="sm">
+          {{ t('settings.capabilityCredentials.optional') }}
+        </UBadge>
+        <UBadge
+          v-if="entry.stored"
+          color="success"
+          variant="soft"
+          size="sm"
+          :data-testid="`capability-credential-stored-${entry.key}`"
+        >
+          {{ t('settings.capabilityCredentials.stored') }}
+        </UBadge>
+      </div>
+
+      <!-- Who wants the value, so an operator can tell what they are about to change. One key is
+           routinely wanted by more than one capability (two integrations behind one vendor
+           account), which is exactly when a rotation has consequences beyond the row it edits. -->
+      <ul class="space-y-1 text-xs text-slate-400">
+        <li v-for="declarer in entry.declaredBy" :key="`${declarer.subject}:${declarer.id}`">
+          <span class="text-slate-300">{{ declarer.label }}</span>
+          <span class="text-slate-500"> · {{ SUBJECT_LABELS[declarer.subject] }}</span>
+          <span v-if="declarer.usage" class="block text-slate-500">{{ declarer.usage }}</span>
+        </li>
+      </ul>
+
+      <p v-if="entry.stored && entry.updatedAt" class="text-[11px] text-slate-500">
+        {{
+          t('settings.capabilityCredentials.storedAt', {
+            date: d(new Date(entry.updatedAt), 'short'),
+          })
+        }}
+      </p>
+      <!-- An EMPTY row is not the same fact in every deployment, so it must not read the same way.
+           Three states, and the backend reports them off the chain it actually composed: with the
+           fallback the deployment's own environment may still answer, and calling that "missing"
+           would send an operator hunting for a value that is already resolving; without it, blank
+           really does mean the capability cannot authenticate.
+
+           The third is that the chain cannot be described, and this copy says exactly that and
+           stops. It must not name a cause: a deployment's own resolver replacing the chain is the
+           usual one, but a facade that wired the store and dropped the flag lands here too, and
+           blaming a custom resolver would make that wiring bug read as a deliberate configuration
+           and send the operator to the one place that cannot explain it. -->
+      <p v-else-if="view?.environmentFallback === true" class="text-[11px] text-slate-500">
+        {{ t('settings.capabilityCredentials.notStoredWithFallback') }}
+      </p>
+      <p v-else-if="view?.environmentFallback === false" class="text-[11px] text-amber-400">
+        {{ t('settings.capabilityCredentials.notStored') }}
+      </p>
+      <p v-else class="text-[11px] text-slate-500">
+        {{ t('settings.capabilityCredentials.notStoredUnknownFallback') }}
+      </p>
+
+      <div class="flex items-end gap-2">
+        <UFormField
+          class="flex-1"
+          :label="
+            entry.stored
+              ? t('settings.capabilityCredentials.replaceValue')
+              : t('settings.capabilityCredentials.setValue')
+          "
+        >
+          <SecretInput
+            v-model="drafts[entry.key]"
+            class="w-full"
+            :data-testid="`capability-credential-input-${entry.key}`"
+            @keyup.enter="saveKey(entry.key)"
+          />
+        </UFormField>
+        <UButton
+          :loading="isBusy(entry.key, 'save')"
+          :disabled="!(drafts[entry.key] ?? '').trim() || isBusy(entry.key, 'remove')"
+          :data-testid="`capability-credential-save-${entry.key}`"
+          @click="saveKey(entry.key)"
+        >
+          {{ t('settings.capabilityCredentials.save') }}
+        </UButton>
+        <UButton
+          v-if="entry.stored"
+          color="error"
+          variant="ghost"
+          icon="i-lucide-trash-2"
+          :loading="isBusy(entry.key, 'remove')"
+          :disabled="isBusy(entry.key, 'save')"
+          :data-testid="`capability-credential-delete-${entry.key}`"
+          :aria-label="t('settings.capabilityCredentials.remove')"
+          @click="removeKey(entry.key)"
+        />
+      </div>
+    </section>
+
+    <p
+      v-if="view && !view.declared.length && !view.declarationsIncomplete"
+      class="text-sm text-slate-500"
+    >
+      {{ t('settings.capabilityCredentials.noneDeclared') }}
+    </p>
+
+    <!-- Stored keys nothing declares any more: a live secret nobody will ever ask for, which is
+         what a retired integration or a renamed variable leaves behind. Listed rather than
+         filtered, because only the operator can tell "delete this" from "the deployment
+         regressed". Withheld entirely while the declaration read is incomplete. -->
+    <section
+      v-if="view?.orphaned.length"
+      class="space-y-2 rounded-lg border border-amber-900/60 p-3"
+      data-testid="capability-credentials-orphaned"
+    >
+      <h3 class="text-sm font-semibold">
+        {{ t('settings.capabilityCredentials.orphaned.heading') }}
+      </h3>
+      <p class="text-xs text-slate-400">
+        {{ t('settings.capabilityCredentials.orphaned.body') }}
+      </p>
+      <div
+        v-for="orphan in view.orphaned"
+        :key="orphan.key"
+        class="flex items-center justify-between gap-2 rounded-md border border-slate-800 px-3 py-2"
+      >
+        <div class="min-w-0">
+          <code class="font-mono text-sm">{{ orphan.key }}</code>
+          <span class="block text-[11px] text-slate-500">
+            {{
+              t('settings.capabilityCredentials.storedAt', {
+                date: d(new Date(orphan.updatedAt), 'short'),
+              })
+            }}
+          </span>
+        </div>
+        <UButton
+          color="error"
+          variant="ghost"
+          icon="i-lucide-trash-2"
+          size="sm"
+          :loading="isBusy(orphan.key, 'remove')"
+          :data-testid="`capability-credential-delete-${orphan.key}`"
+          :aria-label="t('settings.capabilityCredentials.remove')"
+          @click="removeKey(orphan.key)"
+        />
+      </div>
+    </section>
+  </div>
+</template>

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

@@ -5,7 +5,12 @@ import {
   repinInfrastructureTab,
 } from './InfrastructureWindow.logic'
 
-const NONE = { agents: false, environments: false, packageRegistries: false }
+const NONE = {
+  agents: false,
+  environments: false,
+  packageRegistries: false,
+  capabilityCredentials: false,
+}
 
 describe('infrastructureTabs', () => {
   it('shows nothing when no probe reports a backend', () => {
@@ -28,10 +33,30 @@ describe('infrastructureTabs', () => {
     expect(infrastructureTabs({ ...NONE, agents: true })).toEqual(['runner-pool'])
   })
 
+  it('gates the capability-credentials tab on its own two-part probe', () => {
+    // Unlike its neighbours this one also gates on CONTENT: the panel is a checklist projected
+    // from the deployment's registered capabilities, so a build that registers none has no
+    // credential to type. The window folds that (and the `secrets.manage` check) into the flag.
+    expect(infrastructureTabs({ ...NONE, capabilityCredentials: true })).toEqual([
+      'capability-credentials',
+    ])
+  })
+
   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'])
+      infrastructureTabs({
+        agents: true,
+        environments: true,
+        packageRegistries: true,
+        capabilityCredentials: true,
+      }),
+    ).toEqual([
+      'runner-pool',
+      'environment',
+      'shared-stacks',
+      'package-registries',
+      'capability-credentials',
+    ])
   })
 })
 

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

@@ -19,12 +19,25 @@ export interface InfrastructureTabAvailability {
   environments: boolean
   /** The package-registries module answered its probe affirmatively (it 503s unconfigured). */
   packageRegistries: boolean
+  /**
+   * The capability-credential surface has something to show: its probe resolved (the module 503s
+   * with no encryption key, and 403s for a caller without `secrets.manage`) AND this deployment's
+   * registered capabilities declare a credential, or the workspace stored one nothing declares,
+   * or the declaration read failed.
+   *
+   * Unlike every other tab this one gates on CONTENT as well as availability, because the panel
+   * is a CHECKLIST projected from the deployment's code: a build that registers no tool server
+   * and no generative integration has no credential to type, so the tab would be a dead end. The
+   * failed-read case is deliberately kept IN — an unreadable list and an empty one are the same
+   * list and opposite facts, and only the panel can say which one this is.
+   */
+  capabilityCredentials: 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.
+ * what a checkout may install from, and what the tools an agent reaches authenticate as.
  *
  * 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.
@@ -34,6 +47,7 @@ export function infrastructureTabs(available: InfrastructureTabAvailability): In
   if (available.agents) tabs.push('runner-pool')
   if (available.environments) tabs.push('environment', 'shared-stacks')
   if (available.packageRegistries) tabs.push('package-registries')
+  if (available.capabilityCredentials) tabs.push('capability-credentials')
   return tabs
 }
 

package/app/components/settings/InfrastructureWindow.vue

@@ -15,6 +15,10 @@
 //   - "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.
+//   - "Capability credentials" — the sealed per-workspace values behind the secrets a registered
+//     tool server (MCP) or generative binary integration declares. What an agent's tools
+//     authenticate as belongs beside where those agents run, and it is `secrets.manage`-only, so
+//     the tab is HIDDEN rather than disabled for anyone without that permission.
 // 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'
@@ -31,12 +35,15 @@ import LocalContainerPoolSettings from '~/components/settings/LocalContainerPool
 import SharedStacksPanel from '~/components/settings/SharedStacksPanel.vue'
 import ComposeEnvironmentSetupSection from '~/components/settings/ComposeEnvironmentSetupSection.vue'
 import PackageRegistriesPanel from '~/components/settings/PackageRegistriesPanel.vue'
+import CapabilityCredentialsPanel from '~/components/settings/CapabilityCredentialsPanel.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
 const store = useProviderConnectionsStore()
 const auth = useAuthStore()
 const packageRegistries = usePackageRegistriesStore()
+const capabilityCredentials = useCapabilityCredentialsStore()
+const { canManageSecrets } = useWorkspaceAccess()
 
 const open = computed({
   get: () => ui.infrastructureOpen,
@@ -63,12 +70,14 @@ const TAB_LABELS = computed<Record<InfrastructureTab, string>>(() => ({
   environment: t('settings.providerConnection.tabs.testEnvironments'),
   'shared-stacks': t('settings.sharedStacks.tab'),
   'package-registries': t('settings.packageRegistries.tab'),
+  'capability-credentials': t('settings.capabilityCredentials.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',
+  'capability-credentials': 'i-lucide-key-round',
 }
 
 // `slot` mirrors `value` — the template names one `<template #…>` per tab value.
@@ -79,6 +88,12 @@ const tabs = computed(() =>
     // 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,
+    // Two gates, and neither implies the other. `canManageSecrets` hides the tab from a member
+    // who may not manage secrets (the view NAMES the deployment's credential keys, which is why
+    // the backend gates the read too), and `hasSurface` hides a tab with nothing in it — the
+    // panel is a checklist projected from the deployment's registered capabilities, so a build
+    // that registers none has no credential to type.
+    capabilityCredentials: canManageSecrets.value && capabilityCredentials.hasSurface,
   }).map((value) => ({
     value,
     label: TAB_LABELS.value[value],
@@ -102,6 +117,11 @@ watch(
     // 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(() => {})
+    // Same split as the registries probe: swallowed here (a failed probe means no tab, and the
+    // window must still open), reported by the panel, which can only do that once its tab exists.
+    // Not probed at all without the permission — the backend would refuse it, and asking would
+    // put a 403 in every member's console on every open.
+    if (canManageSecrets.value) void capabilityCredentials.ensureLoaded().catch(() => {})
     activeTab.value = openInfrastructureTab(tabValues.value, ui.infrastructureTab)
   },
   { immediate: true },
@@ -176,6 +196,9 @@ watch([tabs, () => store.loaded], () => {
           <template #package-registries>
             <PackageRegistriesPanel />
           </template>
+          <template #capability-credentials>
+            <CapabilityCredentialsPanel />
+          </template>
         </UTabs>
 
         <p v-else class="px-1 py-6 text-center text-sm text-slate-500">

package/app/composables/api/capabilityCredentials.ts

@@ -0,0 +1,37 @@
+import {
+  deleteCapabilityCredentialContract,
+  getCapabilityCredentialsContract,
+  setCapabilityCredentialContract,
+} from '@cat-factory/contracts'
+import type { ApiContext } from './context'
+
+/**
+ * Per-workspace capability credentials (SEALED, write-only). The GET view returns what this
+ * deployment's registered capabilities DECLARE joined to what this workspace has stored, never a
+ * value. Writes are PER KEY: the whole-set PUT exists for an API caller declaring a whole set at
+ * once, and this client could not use it — it never received the other values, so a set-replacing
+ * write here would delete every credential the operator did not retype.
+ *
+ * `secrets.manage`-gated end to end, the READ included: the view carries the credential key names
+ * the deployment's capabilities want, which the workspace snapshot deliberately omits.
+ * See CapabilityCredentialsController.
+ */
+export function capabilityCredentialsApi({ send, ws }: ApiContext) {
+  return {
+    getCapabilityCredentials: (workspaceId: string) =>
+      send(getCapabilityCredentialsContract, { pathPrefix: ws(workspaceId) }),
+
+    setCapabilityCredential: (workspaceId: string, key: string, value: string) =>
+      send(setCapabilityCredentialContract, {
+        pathPrefix: ws(workspaceId),
+        pathParams: { key },
+        body: { value },
+      }),
+
+    deleteCapabilityCredential: (workspaceId: string, key: string) =>
+      send(deleteCapabilityCredentialContract, {
+        pathPrefix: ws(workspaceId),
+        pathParams: { key },
+      }),
+  }
+}

package/app/composables/useApi.ts

@@ -31,6 +31,7 @@ import { localSettingsApi } from './api/localSettings'
 import { modelsApi } from './api/models'
 import { notificationsApi } from './api/notifications'
 import { packageRegistriesApi } from './api/packageRegistries'
+import { capabilityCredentialsApi } from './api/capabilityCredentials'
 import { preflightsApi } from './api/preflights'
 import { presetsApi } from './api/presets'
 import { publicApiKeysApi } from './api/publicApiKeys'
@@ -151,6 +152,7 @@ export function useApi() {
     ...validationChecksApi(ctx),
     ...testSecretsApi(ctx),
     ...packageRegistriesApi(ctx),
+    ...capabilityCredentialsApi(ctx),
     ...previewApi(ctx),
     ...environmentsApi(ctx),
     ...recurringApi(ctx),

package/app/composables/useRunDeepLink.spec.ts

@@ -30,6 +30,11 @@ describe('captureRunDeepLink', () => {
     })
   })
 
+  it('parses the captured-evidence link the lifecycle section emits', () => {
+    setUrl('?ws=ws_1&block=blk_1&run=exec_1&view=test-evidence')
+    expect(captureRunDeepLink()?.view).toBe('test-evidence')
+  })
+
   it('strips its own params so a reload does not re-open the panel', () => {
     setUrl('?ws=ws_1&run=exec_1&view=observability&keep=yes')
     captureRunDeepLink()

package/app/composables/useRunDeepLink.ts

@@ -1,11 +1,12 @@
 /**
- * Boot-time replay of a RUN deep link — `?ws=<id>&block=<id>&run=<id>&view=observability`.
+ * Boot-time replay of a RUN deep link: `?ws=<id>&block=<id>&run=<id>&view=<panel>`.
  *
- * The engine's PR verification report links each PR back to the run's observability panel
- * (Model activity / Provided context), built from the deployment's public app URL. The SPA is a
- * single canvas with no URL identity for anything, so this is the narrow consumer that makes
- * that link resolve: pin the board before the snapshot loads, then — once the board is ready —
- * select the task and open the panel for the run.
+ * The engine's PR verification report links each PR back into the run: to the observability
+ * panel (Model activity / Provided context), and to the Tester's result window holding the
+ * evidence its environment-lifecycle section lists. Both are built from the deployment's public
+ * app URL. The SPA is a single canvas with no URL identity for anything, so this is the narrow
+ * consumer that makes those links resolve: pin the board before the snapshot loads, then, once
+ * the board is ready, select the task and open the panel for the run.
  *
  * Deliberately narrow. The GENERAL parser (every entity, every window, plus state→URL sync) is
  * slice 4 of `docs/initiatives/global-search-and-deep-links.md`; when it lands, this composable
@@ -81,9 +82,11 @@ export function useRunDeepLink(): void {
       if (!ready || applied) return
       applied = true
       if (link.blockId) ui.select(link.blockId)
-      // `observability` is the only view this narrow parser serves — an unknown view still
-      // lands the user on the right board and task rather than failing the navigation.
+      // Two views are served: the observability panel and the Tester's result window (where the
+      // screenshots the report's environment-lifecycle section lists are rendered). An unknown
+      // view still lands the user on the right board and task rather than failing the navigation.
       if (link.view === 'observability') ui.openObservability(link.runId)
+      else if (link.view === 'test-evidence') ui.openTestEvidence(link.runId)
       stop?.()
     },
     { immediate: true },