@cat-factory/app 0.119.1 → 0.121.0

package/app/components/board/AddTaskModal.vue

@@ -102,6 +102,13 @@ const isRecurring = computed(() => taskType.value === 'recurring')
 const severity = ref<'low' | 'medium' | 'high' | 'critical' | ''>('')
 const stepsToReproduce = ref('')
 const timeboxHours = ref<number | undefined>(undefined)
+// Spike research criteria — folded into the spike agent's prompt (see the backend `spike` kind).
+const spikeResearchQuestion = ref('')
+const spikeSuccessCriteria = ref('')
+const spikeOptionsToCompare = ref('')
+// Optional in-repo path the findings document is committed to (else `docs/research/<slug>.md`);
+// shares the `taskTypeFields.targetPath` field + its safe-`.md`-path validation with `document`.
+const spikeTargetPath = ref('')
 // `DOC_KINDS` (and the `DocKind` type) are owned by the contracts package — re-exported via
 // `~/types/domain` — so the picker and the create payload can't drift from the backend list.
 const docKind = ref<DocKind | ''>('')
@@ -171,13 +178,21 @@ function buildTypeFields(): TaskTypeFields | undefined {
     return Object.keys(f).length ? f : undefined
   }
   if (taskType.value === 'spike') {
+    const f: TaskTypeFields = {}
     // `v-model.number` on a cleared number input yields '' (not undefined), which would
     // serialise as a non-number and 400 the create — so require a finite number here.
-    return typeof timeboxHours.value === 'number' &&
+    if (
+      typeof timeboxHours.value === 'number' &&
       Number.isFinite(timeboxHours.value) &&
       timeboxHours.value >= 0
-      ? { timeboxHours: timeboxHours.value }
-      : undefined
+    ) {
+      f.timeboxHours = timeboxHours.value
+    }
+    if (spikeResearchQuestion.value.trim()) f.researchQuestion = spikeResearchQuestion.value.trim()
+    if (spikeSuccessCriteria.value.trim()) f.successCriteria = spikeSuccessCriteria.value.trim()
+    if (spikeOptionsToCompare.value.trim()) f.optionsToCompare = spikeOptionsToCompare.value.trim()
+    if (spikeTargetPath.value.trim()) f.targetPath = spikeTargetPath.value.trim()
+    return Object.keys(f).length ? f : undefined
   }
   if (taskType.value === 'document') {
     const f: TaskTypeFields = {}
@@ -406,6 +421,10 @@ watch(open, (isOpen) => {
   severity.value = ''
   stepsToReproduce.value = ''
   timeboxHours.value = undefined
+  spikeResearchQuestion.value = ''
+  spikeSuccessCriteria.value = ''
+  spikeOptionsToCompare.value = ''
+  spikeTargetPath.value = ''
   docKind.value = ''
   docAudience.value = ''
   docTargetPath.value = ''
@@ -451,6 +470,10 @@ const { requestClose } = useUnsavedGuard({
     severity: severity.value,
     stepsToReproduce: stepsToReproduce.value.trim(),
     timeboxHours: timeboxHours.value ?? null,
+    spikeResearchQuestion: spikeResearchQuestion.value.trim(),
+    spikeSuccessCriteria: spikeSuccessCriteria.value.trim(),
+    spikeOptionsToCompare: spikeOptionsToCompare.value.trim(),
+    spikeTargetPath: spikeTargetPath.value.trim(),
     docKind: docKind.value,
     docAudience: docAudience.value.trim(),
     docTargetPath: docTargetPath.value.trim(),
@@ -671,15 +694,58 @@ async function add() {
             </UFormField>
           </div>
 
-          <UFormField v-else-if="taskType === 'spike'" :label="t('board.addTask.timebox')">
-            <UInput
-              v-model.number="timeboxHours"
-              type="number"
-              min="0"
-              :placeholder="t('board.addTask.timeboxPlaceholder')"
-              class="w-full"
-            />
-          </UFormField>
+          <div v-else-if="taskType === 'spike'" class="space-y-3">
+            <UFormField :label="t('board.addTask.timebox')">
+              <UInput
+                v-model.number="timeboxHours"
+                type="number"
+                min="0"
+                :placeholder="t('board.addTask.timeboxPlaceholder')"
+                class="w-full"
+              />
+            </UFormField>
+            <UFormField
+              :label="t('board.addTask.spikeFields.researchQuestion.label')"
+              :hint="t('board.addTask.optional')"
+            >
+              <UInput
+                v-model="spikeResearchQuestion"
+                :placeholder="t('board.addTask.spikeFields.researchQuestion.placeholder')"
+                class="w-full"
+              />
+            </UFormField>
+            <UFormField
+              :label="t('board.addTask.spikeFields.successCriteria.label')"
+              :hint="t('board.addTask.optional')"
+            >
+              <UTextarea
+                v-model="spikeSuccessCriteria"
+                :rows="2"
+                autoresize
+                :placeholder="t('board.addTask.spikeFields.successCriteria.placeholder')"
+                class="w-full"
+              />
+            </UFormField>
+            <UFormField
+              :label="t('board.addTask.spikeFields.optionsToCompare.label')"
+              :hint="t('board.addTask.optional')"
+            >
+              <UTextarea
+                v-model="spikeOptionsToCompare"
+                :rows="2"
+                autoresize
+                :placeholder="t('board.addTask.spikeFields.optionsToCompare.placeholder')"
+                class="w-full"
+              />
+            </UFormField>
+            <UFormField :label="t('board.addTask.targetPath')" :hint="t('board.addTask.optional')">
+              <UInput
+                v-model="spikeTargetPath"
+                :placeholder="t('board.addTask.targetPathPlaceholder')"
+                class="w-full"
+              />
+            </UFormField>
+          </div>
 
           <div v-else-if="taskType === 'document'" class="space-y-3">
             <UFormField :label="t('board.addTask.documentKind')">

package/app/components/layout/IntegrationsHub.vue

@@ -21,6 +21,7 @@ const tasks = useTasksStore()
 const tracker = useTrackerStore()
 const releaseHealth = useReleaseHealthStore()
 const packageRegistries = usePackageRegistriesStore()
+const publicApiKeys = usePublicApiKeysStore()
 const userSecrets = useUserSecretsStore()
 const apiKeys = useApiKeysStore()
 const workspace = useWorkspaceStore()
@@ -51,6 +52,7 @@ watch(
       query.value = ''
       void releaseHealth.ensureLoaded().catch(() => {})
       void packageRegistries.ensureLoaded().catch(() => {})
+      void publicApiKeys.ensureLoaded().catch(() => {})
       void userSecrets.load().catch(() => {})
       // Drives the OpenRouter row's "Key connected" badge.
       if (workspace.workspaceId) void apiKeys.load(workspace.workspaceId).catch(() => {})
@@ -269,26 +271,36 @@ const groups = computed<IntegrationGroup[]>(() => {
     })
   }
 
-  // --- Development (private package registries) -------------------------------
-  // Gated like observability: hidden until a probe confirms the module is wired
-  // (`available === true`), so an unconfigured backend doesn't show a dead row.
+  // --- 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.
+  const development: IntegrationItem[] = []
   if (packageRegistries.available) {
     const hasEntries = packageRegistries.entries.length > 0
-    out.push({
-      title: t('layout.integrationsHub.groups.development'),
-      items: [
-        {
-          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),
-        },
-      ],
+    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({
+      key: 'api-tokens',
+      icon: 'i-lucide-key-round',
+      label: t('layout.integrationsHub.items.apiTokens.label'),
+      description: t('layout.integrationsHub.items.apiTokens.description'),
+      status: hasKeys ? t('layout.integrationsHub.status.connected') : undefined,
+      connected: hasKeys,
+      onClick: () => go(ui.openApiTokens),
     })
   }
+  if (development.length)
+    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

package/app/components/settings/ApiTokensPanel.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+// API access tokens — the workspace's inbound public-API keys external systems present to the
+// `/api/v1` surface (`Authorization: Bearer cf_live_…`). Keys are hashed one-way server-side,
+// so the raw secret is shown EXACTLY ONCE, on create; the list thereafter renders metadata
+// only (label + created / last-used). To rotate a token, revoke it and mint a new one.
+// Opened from the Integrations hub.
+import { computed, ref, watch } from 'vue'
+import type { PublicApiKey } from '~/types/publicApiKeys'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import CopyButton from '~/components/common/CopyButton.vue'
+
+const { t, d } = useI18n()
+const ui = useUiStore()
+const store = usePublicApiKeysStore()
+const toast = useToast()
+const { confirmAction, toastDone } = useConfirmAction()
+
+const open = computed({
+  get: () => ui.apiTokensOpen,
+  set: (v: boolean) => (v ? ui.openApiTokens() : ui.closeApiTokens()),
+})
+const back = useIntegrationBack(open)
+
+const label = ref('')
+const busy = ref(false)
+// The full raw secret from the most recent create — surfaced once, then dismissed. Never
+// re-fetchable, so it lives only in this transient ref (not the store).
+const newSecret = ref<string | null>(null)
+
+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) {
+      // Never leave a revealed secret hanging around once the panel closes.
+      newSecret.value = null
+      return
+    }
+    try {
+      await store.ensureLoaded()
+    } catch (e) {
+      notifyError(t('settings.apiTokens.toast.loadFailed'), e)
+    }
+  },
+  { immediate: true },
+)
+
+async function createToken() {
+  const trimmed = label.value.trim()
+  if (!trimmed) return
+  busy.value = true
+  try {
+    const created = await store.create(trimmed)
+    newSecret.value = created.secret
+    label.value = ''
+    toast.add({
+      title: t('settings.apiTokens.toast.created'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+  } catch (e) {
+    notifyError(t('settings.apiTokens.toast.createFailed'), e)
+  } finally {
+    busy.value = false
+  }
+}
+
+function dismissSecret() {
+  newSecret.value = null
+}
+
+async function revokeToken(key: PublicApiKey) {
+  if (!(await confirmAction('revoke', key.label))) return
+  busy.value = true
+  try {
+    await store.revoke(key.id)
+    toastDone('revoke', key.label)
+  } catch (e) {
+    notifyError(t('settings.apiTokens.toast.revokeFailed'), e)
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="t('settings.apiTokens.title')" :ui="{ content: 'max-w-lg' }">
+    <template #title>
+      <IntegrationBackTitle :title="t('settings.apiTokens.title')" @back="back" />
+    </template>
+    <template #body>
+      <div class="space-y-4" data-testid="api-tokens-panel">
+        <p class="text-sm text-slate-400">
+          {{ t('settings.apiTokens.intro') }}
+        </p>
+
+        <!-- One-time secret reveal: shown once after create, dismissed by the user. The full
+             key is never recoverable, so it must be copied now. -->
+        <section
+          v-if="newSecret"
+          class="space-y-2 rounded-lg border border-primary-500/40 bg-primary-500/10 p-3"
+          data-testid="api-token-secret"
+        >
+          <div class="flex items-center gap-2 text-sm font-medium text-primary-200">
+            <UIcon name="i-lucide-key-round" class="h-4 w-4 shrink-0" />
+            <span>{{ t('settings.apiTokens.secret.heading') }}</span>
+          </div>
+          <p class="text-xs text-slate-300">{{ t('settings.apiTokens.secret.warning') }}</p>
+          <div
+            class="flex items-center gap-2 rounded-md border border-slate-700 bg-slate-950/60 px-3 py-2"
+          >
+            <code class="min-w-0 flex-1 truncate font-mono text-xs text-slate-100">{{
+              newSecret
+            }}</code>
+            <CopyButton :text="newSecret" :label="t('settings.apiTokens.secret.copy')" size="sm" />
+          </div>
+          <div class="flex justify-end">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              data-testid="api-token-secret-dismiss"
+              @click="dismissSecret"
+            >
+              {{ t('settings.apiTokens.secret.done') }}
+            </UButton>
+          </div>
+        </section>
+
+        <section v-if="store.keys.length" class="space-y-2 rounded-lg border border-slate-700 p-3">
+          <h3 class="text-sm font-semibold">
+            {{ t('settings.apiTokens.list.heading') }}
+          </h3>
+          <div
+            v-for="key in store.keys"
+            :key="key.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-0.5">
+              <div class="truncate text-sm font-medium">{{ key.label }}</div>
+              <div class="text-[11px] text-slate-500">
+                {{
+                  t('settings.apiTokens.list.created', {
+                    date: d(new Date(key.createdAt), 'short'),
+                  })
+                }}
+                <span aria-hidden="true"> · </span>
+                <template v-if="key.lastUsedAt">{{
+                  t('settings.apiTokens.list.lastUsed', {
+                    date: d(new Date(key.lastUsedAt), 'short'),
+                  })
+                }}</template>
+                <template v-else>{{ t('settings.apiTokens.list.neverUsed') }}</template>
+              </div>
+            </div>
+            <UButton
+              color="error"
+              variant="ghost"
+              icon="i-lucide-ban"
+              size="sm"
+              :loading="busy"
+              :data-testid="`api-token-revoke-${key.id}`"
+              :aria-label="t('settings.apiTokens.list.revoke')"
+              @click="revokeToken(key)"
+            />
+          </div>
+        </section>
+
+        <section class="space-y-3 rounded-lg border border-slate-700 p-3">
+          <h3 class="text-sm font-semibold">
+            {{ t('settings.apiTokens.add.heading') }}
+          </h3>
+          <UFormField
+            :label="t('settings.apiTokens.add.label')"
+            :help="t('settings.apiTokens.add.labelHelp')"
+          >
+            <UInput
+              v-model="label"
+              :placeholder="t('settings.apiTokens.add.labelPlaceholder')"
+              class="w-full"
+              data-testid="api-token-label"
+              @keyup.enter="createToken"
+            />
+          </UFormField>
+          <UButton
+            :loading="busy"
+            :disabled="!label.trim()"
+            data-testid="api-token-create"
+            @click="createToken"
+          >
+            {{ t('settings.apiTokens.add.create') }}
+          </UButton>
+        </section>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/composables/api/publicApiKeys.ts

@@ -0,0 +1,26 @@
+import {
+  createPublicApiKeyContract,
+  listPublicApiKeysContract,
+  revokePublicApiKeyContract,
+} from '@cat-factory/contracts'
+import type { CreatePublicApiKeyInput } from '~/types/publicApiKeys'
+import type { ApiContext } from './context'
+
+/**
+ * Inbound public-API keys ("API access tokens") a workspace mints for external systems to
+ * call the `/api/v1` surface. Management routes are session-authed under
+ * `/workspaces/:workspaceId`; the raw secret comes back only on create. See
+ * PublicApiKeyController.
+ */
+export function publicApiKeysApi({ send, ws }: ApiContext) {
+  return {
+    listPublicApiKeys: (workspaceId: string) =>
+      send(listPublicApiKeysContract, { pathPrefix: ws(workspaceId) }),
+
+    createPublicApiKey: (workspaceId: string, body: CreatePublicApiKeyInput) =>
+      send(createPublicApiKeyContract, { pathPrefix: ws(workspaceId), body }),
+
+    revokePublicApiKey: (workspaceId: string, id: string) =>
+      send(revokePublicApiKeyContract, { pathPrefix: ws(workspaceId), pathParams: { id } }),
+  }
+}

package/app/composables/useApi.ts

@@ -25,6 +25,7 @@ import { notificationsApi } from './api/notifications'
 import { packageRegistriesApi } from './api/packageRegistries'
 import { preflightsApi } from './api/preflights'
 import { presetsApi } from './api/presets'
+import { publicApiKeysApi } from './api/publicApiKeys'
 import { sharedStacksApi } from './api/sharedStacks'
 import { providerConnectionsApi } from './api/providerConnections'
 import { provisioningLogsApi } from './api/provisioningLogs'
@@ -121,6 +122,7 @@ export function useApi() {
     ...notificationsApi(ctx),
     ...presetsApi(ctx),
     ...preflightsApi(ctx),
+    ...publicApiKeysApi(ctx),
     ...sharedStacksApi(ctx),
     ...providerConnectionsApi(ctx),
     ...infraHandlersApi(ctx),

package/app/pages/index.vue

@@ -96,6 +96,9 @@ const ObservabilityConnectionPanel = defineAsyncComponent(
 const PackageRegistriesPanel = defineAsyncComponent(
   () => import('~/components/settings/PackageRegistriesPanel.vue'),
 )
+const ApiTokensPanel = defineAsyncComponent(
+  () => import('~/components/settings/ApiTokensPanel.vue'),
+)
 const InfrastructureWindow = defineAsyncComponent(
   () => import('~/components/settings/InfrastructureWindow.vue'),
 )
@@ -402,6 +405,7 @@ watch(
       <AccountSettingsPanel v-if="ui.accountSettingsOpen" />
       <ObservabilityConnectionPanel v-if="ui.observabilityConnectionOpen" />
       <PackageRegistriesPanel v-if="ui.packageRegistriesOpen" />
+      <ApiTokensPanel v-if="ui.apiTokensOpen" />
       <InfrastructureWindow v-if="ui.infrastructureOpen" />
       <EnvironmentSetupWizard v-if="ui.environmentWizardOpen" />
       <ModelConfigurationPanel v-if="ui.modelConfigOpen" />

package/app/stores/publicApiKeys.spec.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { usePublicApiKeysStore } from '~/stores/publicApiKeys'
+import { useWorkspaceStore } from '~/stores/workspace'
+import type { CreatedPublicApiKey, PublicApiKey } from '~/types/publicApiKeys'
+
+/** Minimal metadata-view factory — only the fields the store passes through. */
+function key(over: Partial<PublicApiKey> = {}): PublicApiKey {
+  return {
+    id: 'pak_1',
+    accountId: 'acc1',
+    workspaceId: 'ws1',
+    label: 'CI',
+    createdAt: 1,
+    lastUsedAt: null,
+    revokedAt: null,
+    ...over,
+  }
+}
+
+describe('publicApiKeys store', () => {
+  beforeEach(() => {
+    useWorkspaceStore().workspaceId = 'ws1'
+  })
+
+  it('load stores the key list and marks the feature available', async () => {
+    vi.stubGlobal('useApi', () => ({
+      listPublicApiKeys: () => Promise.resolve({ keys: [key()] }),
+    }))
+
+    const store = usePublicApiKeysStore()
+    await store.load()
+
+    expect(store.available).toBe(true)
+    expect(store.keys).toHaveLength(1)
+    expect(store.loading).toBe(false)
+  })
+
+  it('a definitive 503 latches the feature unavailable and clears the list', async () => {
+    vi.stubGlobal('useApi', () => ({
+      listPublicApiKeys: () => Promise.reject({ statusCode: 503 }),
+    }))
+
+    const store = usePublicApiKeysStore()
+    await store.load()
+
+    expect(store.available).toBe(false)
+    expect(store.keys).toEqual([])
+  })
+
+  it('a transient failure leaves `available` null so ensureLoaded stays retryable', async () => {
+    vi.stubGlobal('useApi', () => ({
+      listPublicApiKeys: () => Promise.reject({ statusCode: 500 }),
+    }))
+
+    const store = usePublicApiKeysStore()
+    await store.load()
+
+    // Never latched — a network/5xx blip must not hide an otherwise-available panel.
+    expect(store.available).toBeNull()
+  })
+
+  it('ensureLoaded coalesces concurrent callers into one request', async () => {
+    const list = vi.fn(() => Promise.resolve({ keys: [key()] }))
+    vi.stubGlobal('useApi', () => ({ listPublicApiKeys: list }))
+
+    const store = usePublicApiKeysStore()
+    await Promise.all([store.ensureLoaded(), store.ensureLoaded()])
+    // And once probed, it never re-fetches.
+    await store.ensureLoaded()
+
+    expect(list).toHaveBeenCalledTimes(1)
+  })
+
+  it('create prepends the new key (newest-first) and returns the one-time secret', async () => {
+    const created: CreatedPublicApiKey = {
+      key: key({ id: 'pak_new', label: 'deploy' }),
+      secret: 'cf_live_pak_new.abc',
+    }
+    vi.stubGlobal('useApi', () => ({
+      listPublicApiKeys: () => Promise.resolve({ keys: [key({ id: 'pak_old' })] }),
+      createPublicApiKey: () => Promise.resolve(created),
+    }))
+
+    const store = usePublicApiKeysStore()
+    await store.load()
+    const result = await store.create('deploy')
+
+    expect(result.secret).toBe('cf_live_pak_new.abc')
+    expect(store.keys.map((k) => k.id)).toEqual(['pak_new', 'pak_old'])
+    expect(store.available).toBe(true)
+  })
+
+  it('revoke drops the key from the list', async () => {
+    vi.stubGlobal('useApi', () => ({
+      listPublicApiKeys: () => Promise.resolve({ keys: [key({ id: 'a' }), key({ id: 'b' })] }),
+      revokePublicApiKey: () => Promise.resolve(),
+    }))
+
+    const store = usePublicApiKeysStore()
+    await store.load()
+    await store.revoke('a')
+
+    expect(store.keys.map((k) => k.id)).toEqual(['b'])
+  })
+})

package/app/stores/publicApiKeys.ts

@@ -0,0 +1,72 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { CreatedPublicApiKey, PublicApiKey } from '~/types/publicApiKeys'
+import { useWorkspaceStore } from '~/stores/workspace'
+import { apiErrorStatus } from '~/composables/api/errors'
+
+/**
+ * The workspace's inbound public-API keys ("API access tokens") external systems present
+ * to the `/api/v1` surface. Secrets are one-way hashed server-side and returned only once
+ * on create, so the store holds metadata-only views; the raw secret is surfaced by the
+ * caller from the `create()` result. Loaded on demand (the tokens panel + the Integrations
+ * hub badge), not from the snapshot.
+ */
+export const usePublicApiKeysStore = defineStore('publicApiKeys', () => {
+  const api = useApi()
+
+  const keys = ref<PublicApiKey[]>([])
+  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 tokens entry point
+  // when this is false.
+  const available = ref<boolean | null>(null)
+  let inFlight: Promise<void> | null = null
+
+  /** Force a refresh of the key list (used after a create/revoke). */
+  async function load() {
+    const ws = useWorkspaceStore()
+    loading.value = true
+    try {
+      keys.value = (await api.listPublicApiKeys(ws.requireId())).keys
+      available.value = true
+    } catch (err) {
+      if (apiErrorStatus(err) === 503) {
+        // A definitive 503 means the feature is unconfigured (no encryption key on the
+        // backend): hide the UI entry points and stop probing.
+        available.value = false
+        keys.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
+  }
+
+  /** Mint a key. Returns the created record PLUS the one-time raw secret (shown once). */
+  async function create(label: string): Promise<CreatedPublicApiKey> {
+    const ws = useWorkspaceStore()
+    const created = await api.createPublicApiKey(ws.requireId(), { label })
+    // Prepend: the backend lists newest-first, so the freshly minted key belongs at the
+    // top — matching the order a subsequent `load()` would produce.
+    keys.value = [created.key, ...keys.value]
+    available.value = true
+    return created
+  }
+
+  async function revoke(id: string) {
+    const ws = useWorkspaceStore()
+    await api.revokePublicApiKey(ws.requireId(), id)
+    keys.value = keys.value.filter((k) => k.id !== id)
+  }
+
+  return { keys, loading, available, load, ensureLoaded, create, revoke }
+})