@cat-factory/app 0.18.1 → 0.20.0

package/app/components/layout/IntegrationsHub.vue

@@ -14,6 +14,9 @@ const documents = useDocumentsStore()
 const tasks = useTasksStore()
 const tracker = useTrackerStore()
 const releaseHealth = useReleaseHealthStore()
+const userSecrets = useUserSecretsStore()
+const apiKeys = useApiKeysStore()
+const workspace = useWorkspaceStore()
 
 // The selected filing tracker, as a badge label ("GitHub Issues" / "Jira").
 const trackerLabel = computed(() => {
@@ -27,7 +30,12 @@ const trackerLabel = computed(() => {
 watch(
   () => ui.integrationsOpen,
   (isOpen) => {
-    if (isOpen) void releaseHealth.ensureLoaded().catch(() => {})
+    if (isOpen) {
+      void releaseHealth.ensureLoaded().catch(() => {})
+      void userSecrets.load().catch(() => {})
+      // Drives the OpenRouter row's "Key connected" badge.
+      if (workspace.workspaceId) void apiKeys.load(workspace.workspaceId).catch(() => {})
+    }
   },
 )
 
@@ -62,6 +70,38 @@ function go(fn: () => void) {
 const groups = computed<IntegrationGroup[]>(() => {
   const out: IntegrationGroup[] = []
 
+  // --- Models & providers ----------------------------------------------------
+  // Top of the hub: an OpenRouter key is the fastest path to 300+ models, so it leads.
+  const openRouterKeyConnected = apiKeys.configuredProviders.has('openrouter')
+  out.push({
+    title: 'Models & providers',
+    items: [
+      {
+        key: 'openrouter',
+        icon: 'i-lucide-waypoints',
+        label: 'OpenRouter',
+        description: 'One gateway to 300+ models — add your key and enable models in one place.',
+        status: openRouterKeyConnected ? 'Key connected' : undefined,
+        connected: openRouterKeyConnected,
+        onClick: () => go(ui.openOpenRouter),
+      },
+      {
+        key: 'vendors',
+        icon: 'i-lucide-key-round',
+        label: 'Vendors & keys',
+        description: 'LLM vendor subscriptions and provider API keys.',
+        onClick: () => go(ui.openVendorCredentials),
+      },
+      {
+        key: 'local-runners',
+        icon: 'i-lucide-server',
+        label: 'My local runners',
+        description: 'Your own-machine model runners (Ollama, LM Studio, vLLM…).',
+        onClick: () => go(ui.openLocalModels),
+      },
+    ],
+  })
+
   // --- Source control --------------------------------------------------------
   const code: IntegrationItem[] = []
   if (github.available) {
@@ -75,6 +115,20 @@ const groups = computed<IntegrationGroup[]>(() => {
       onClick: () => go(ui.openGitHub),
     })
   }
+  // Per-user GitHub PAT — works on every runtime (used for runs you initiate). Always
+  // offered; the badge reflects whether the signed-in user has stored one.
+  {
+    const pat = userSecrets.statusFor('github_pat')
+    code.push({
+      key: 'github-pat',
+      icon: 'i-lucide-key-round',
+      label: 'My GitHub token',
+      description: 'A personal access token used for runs you start (pushes, PRs, CI, merge).',
+      status: pat ? 'Connected' : undefined,
+      connected: !!pat,
+      onClick: () => go(ui.openUserSecrets),
+    })
+  }
   if (code.length) out.push({ title: 'Source control', items: code })
 
   // --- Communication ---------------------------------------------------------
@@ -170,34 +224,6 @@ const groups = computed<IntegrationGroup[]>(() => {
     })
   }
 
-  // --- Models & providers ----------------------------------------------------
-  out.push({
-    title: 'Models & providers',
-    items: [
-      {
-        key: 'vendors',
-        icon: 'i-lucide-key-round',
-        label: 'Vendors & keys',
-        description: 'LLM vendor subscriptions and provider API keys.',
-        onClick: () => go(ui.openVendorCredentials),
-      },
-      {
-        key: 'local-runners',
-        icon: 'i-lucide-server',
-        label: 'My local runners',
-        description: 'Your own-machine model runners (Ollama, LM Studio, vLLM…).',
-        onClick: () => go(ui.openLocalModels),
-      },
-      {
-        key: 'openrouter',
-        icon: 'i-lucide-waypoints',
-        label: 'OpenRouter models',
-        description: 'Browse and enable models from the OpenRouter gateway.',
-        onClick: () => go(ui.openOpenRouter),
-      },
-    ],
-  })
-
   return out
 })
 </script>

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
-// Workspace settings: "OpenRouter models" — browse OpenRouter's 300+ gateway models and
-// enable a subset for this workspace. OpenRouter is reached via the workspace's API-key pool
-// (connect an OpenRouter key first under "Provider keys"); "Refresh" probes its live catalog
-// server-side, then tick the models to enable. Enabled models — with their context window and
-// price — appear automatically in the model picker and meter against the spend budget.
+// "OpenRouter" — the one-stop OpenRouter setup panel. OpenRouter is a single gateway to
+// 300+ models reached via the workspace's API-key pool, so this panel owns the whole flow:
+//  1. Connect an OpenRouter key inline (no need to detour through Vendors & keys).
+//  2. The live catalog auto-refreshes as soon as a key exists.
+//  3. Tick models (or one-click "Enable recommended") and Save.
+// Enabled models — with their context window and price — appear in the model picker and
+// meter against the spend budget. The Vendors & keys → Proxies tab remains a valid second
+// entry point for the key; this panel just makes OpenRouter self-sufficient.
 import { computed, ref, watch } from 'vue'
 import type { OpenRouterModelMeta } from '~/types/openrouter'
 
 const ui = useUiStore()
 const workspace = useWorkspaceStore()
 const store = useOpenRouterStore()
+const apiKeys = useApiKeysStore()
+const models = useModelsStore()
 const toast = useToast()
 
 const open = computed({
@@ -17,16 +22,39 @@ const open = computed({
   set: (v: boolean) => (v ? ui.openOpenRouter() : ui.closeOpenRouter()),
 })
 
+// Popular slugs offered by "Enable recommended" — these mirror the curated `openrouter`
+// refs in the backend MODEL_CATALOG. Only the ones present in the live browse list are
+// ticked, so a recommendation never enables a slug OpenRouter doesn't actually serve.
+const RECOMMENDED_SLUGS = [
+  'anthropic/claude-opus-4.8',
+  'openai/gpt-5.5',
+  'google/gemini-3-pro',
+  'deepseek/deepseek-chat',
+]
+
+// Whether the workspace/user has an OpenRouter key connected at any reachable scope.
+const keyConnected = computed(() => apiKeys.configuredProviders.has('openrouter'))
+
 // The enabled slugs the user has ticked (seeded from the persisted catalog on open).
 const selected = ref<Set<string>>(new Set())
 const filter = ref('')
 const busy = ref(false)
 
-// Load the persisted catalog whenever the panel opens; seed the tick selection from it.
+// Inline key-entry form state (shown until an OpenRouter key is connected).
+const keyScope = ref<'workspace' | 'user'>('workspace')
+const keyLabel = ref('')
+const keyValue = ref('')
+const connectingKey = ref(false)
+
+// Load key state + persisted catalog whenever the panel opens; seed the tick selection,
+// then auto-refresh the live catalog if a key is already connected (no extra click).
 watch(open, (isOpen) => {
   if (!isOpen || !workspace.workspaceId) return
-  void store.load(workspace.workspaceId).then(() => {
+  const ws = workspace.workspaceId
+  void apiKeys.load(ws).catch(() => {})
+  void store.load(ws).then(() => {
     selected.value = new Set(store.enabled.map((m) => m.id))
+    if (keyConnected.value && store.browse.length === 0) void refresh()
   })
 })
 
@@ -45,6 +73,12 @@ const visible = computed(() => {
 
 const selectedCount = computed(() => selected.value.size)
 
+// Recommended slugs that are actually available in the current browse/enabled list.
+const recommendedAvailable = computed(() => {
+  const ids = new Set(source.value.map((m) => m.id))
+  return RECOMMENDED_SLUGS.filter((slug) => ids.has(slug))
+})
+
 function contextLabel(tokens: number | undefined): string {
   if (!tokens) return ''
   return tokens >= 1000 ? `${Math.round(tokens / 1000)}K ctx` : `${tokens} ctx`
@@ -61,13 +95,47 @@ function toggle(id: string, on: boolean) {
   selected.value = next
 }
 
+function enableRecommended() {
+  const next = new Set(selected.value)
+  for (const slug of recommendedAvailable.value) next.add(slug)
+  selected.value = next
+}
+
+async function connectKey() {
+  if (!keyValue.value.trim() || !workspace.workspaceId) return
+  connectingKey.value = true
+  try {
+    const input = {
+      provider: 'openrouter' as const,
+      label: keyLabel.value.trim() || 'openrouter key',
+      key: keyValue.value.trim(),
+    }
+    if (keyScope.value === 'workspace') await apiKeys.addWorkspaceKey(input)
+    else await apiKeys.addUserKey(input)
+    keyValue.value = ''
+    keyLabel.value = ''
+    toast.add({ title: 'OpenRouter key connected', icon: 'i-lucide-check', color: 'success' })
+    // Now that a key exists, load the live catalog automatically.
+    await refresh()
+  } catch (e) {
+    toast.add({
+      title: 'Could not connect key',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    connectingKey.value = false
+  }
+}
+
 async function refresh() {
   if (!workspace.workspaceId) return
   const result = await store.refresh(workspace.workspaceId)
   if (!result.reachable) {
     toast.add({
       title: 'Could not reach OpenRouter',
-      description: store.refreshError ?? 'Connect an OpenRouter key under Provider keys first.',
+      description: store.refreshError ?? 'Connect an OpenRouter key first.',
       icon: 'i-lucide-triangle-alert',
       color: 'error',
     })
@@ -80,10 +148,12 @@ async function save() {
   try {
     // Persist the ticked models, carrying the metadata from whichever list they came from.
     const byId = new Map(source.value.map((m) => [m.id, m]))
-    const models = [...selected.value]
+    const models2 = [...selected.value]
       .map((id) => byId.get(id))
       .filter((m): m is OpenRouterModelMeta => !!m)
-    await store.save(workspace.workspaceId, models)
+    await store.save(workspace.workspaceId, models2)
+    // Reflect newly-enabled models in the picker immediately.
+    await models.refresh(workspace.workspaceId)
     toast.add({ title: 'OpenRouter catalog saved', icon: 'i-lucide-check', color: 'success' })
   } catch (e) {
     toast.add({
@@ -96,80 +166,171 @@ async function save() {
     busy.value = false
   }
 }
+
+function manageKeys() {
+  ui.closeOpenRouter()
+  ui.openVendorCredentials()
+}
 </script>
 
 <template>
-  <UModal v-model:open="open" title="OpenRouter models" :ui="{ content: 'max-w-2xl' }">
+  <UModal v-model:open="open" title="OpenRouter" :ui="{ content: 'max-w-2xl' }">
     <template #body>
       <div class="space-y-4">
         <p class="text-xs text-slate-400">
-          Reach <strong>300+ models</strong> through one gateway. Connect an OpenRouter key under
-          <span class="text-slate-300">Provider keys</span> first, then
-          <span class="text-slate-300">Refresh</span> to browse the live catalog and enable the
-          models you want. Enabled models appear in the model picker with their context window and
-          price, and meter against your spend budget.
+          Reach <strong>300+ models</strong> through one gateway. Add your OpenRouter key below,
+          then enable the models you want — they appear in the model picker with their context
+          window and price, and meter against your spend budget.
         </p>
 
-        <div class="flex items-center gap-2">
-          <UButton
-            color="neutral"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-refresh-cw"
-            :loading="store.refreshing"
-            @click="refresh()"
-          >
-            Refresh catalog
-          </UButton>
-          <UInput
-            v-model="filter"
-            size="sm"
-            class="flex-1"
-            icon="i-lucide-search"
-            placeholder="Filter by name or slug…"
-          />
-        </div>
-
-        <p v-if="store.refreshError" class="text-xs text-rose-400">{{ store.refreshError }}</p>
-
-        <div v-if="visible.length" class="max-h-96 space-y-1 overflow-y-auto pr-1">
-          <label
-            v-for="m in visible"
-            :key="m.id"
-            class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-900/40 px-2.5 py-1.5 text-sm"
-          >
-            <UCheckbox
-              :model-value="selected.has(m.id)"
-              @update:model-value="(v: boolean | 'indeterminate') => toggle(m.id, v === true)"
+        <!-- Step 1: connect a key (inline) — hidden once a key is connected -->
+        <div
+          v-if="!keyConnected"
+          class="space-y-3 rounded-lg border border-slate-700 bg-slate-900/60 p-4"
+        >
+          <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+            Connect your OpenRouter key
+          </h4>
+          <ol class="list-decimal space-y-1 pl-5 text-sm text-slate-300">
+            <li>
+              Open
+              <a
+                href="https://openrouter.ai/keys"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-primary-400 underline"
+                >openrouter.ai → Keys ↗</a
+              >
+              and create an API key.
+            </li>
+            <li>
+              Copy the key (starts with <span class="font-mono">sk-or-…</span>) and paste it below.
+            </li>
+          </ol>
+          <div class="flex flex-wrap items-end gap-3">
+            <UFormField label="Scope">
+              <USelect
+                v-model="keyScope"
+                :items="[
+                  { label: 'This workspace', value: 'workspace' },
+                  { label: 'My keys (only me)', value: 'user' },
+                ]"
+                class="w-48"
+              />
+            </UFormField>
+            <UFormField label="Label (optional)" class="flex-1">
+              <UInput v-model="keyLabel" placeholder="e.g. team key" />
+            </UFormField>
+          </div>
+          <UFormField label="API key">
+            <UTextarea
+              v-model="keyValue"
+              :rows="2"
+              placeholder="paste your OpenRouter key (sk-or-…)"
+              class="font-mono"
             />
-            <span class="min-w-0 flex-1">
-              <span class="block truncate text-slate-200">{{ m.name }}</span>
-              <span class="block truncate font-mono text-[11px] text-slate-500">{{ m.id }}</span>
-            </span>
-            <span class="shrink-0 text-right text-[11px] text-slate-500">
-              <span v-if="m.contextLength" class="block">{{ contextLabel(m.contextLength) }}</span>
-              <span class="block">{{ priceLabel(m) }}</span>
-            </span>
-          </label>
+          </UFormField>
+          <div class="flex justify-end">
+            <UButton
+              :loading="connectingKey"
+              :disabled="!keyValue.trim()"
+              icon="i-lucide-plus"
+              @click="connectKey()"
+            >
+              Connect & browse
+            </UButton>
+          </div>
         </div>
-        <p v-else class="text-xs text-slate-500">
-          No models yet — hit <span class="text-slate-300">Refresh catalog</span> to load
-          OpenRouter's live list.
-        </p>
 
-        <div class="flex items-center justify-between">
-          <span class="text-xs text-slate-500">{{ selectedCount }} enabled</span>
-          <UButton
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-save"
-            :loading="busy"
-            @click="save()"
-          >
-            Save
+        <!-- Key connected status -->
+        <div
+          v-else
+          class="flex items-center justify-between rounded-lg border border-slate-700 bg-slate-900/60 px-3 py-2 text-sm"
+        >
+          <span class="flex items-center gap-2 text-slate-300">
+            <UIcon name="i-lucide-check-circle" class="h-4 w-4 text-emerald-400" />
+            OpenRouter key connected
+          </span>
+          <UButton color="neutral" variant="ghost" size="xs" @click="manageKeys()">
+            Manage in Vendors & keys
           </UButton>
         </div>
+
+        <!-- Step 2: browse + enable models (only once a key exists) -->
+        <template v-if="keyConnected">
+          <div class="flex items-center gap-2">
+            <UButton
+              color="neutral"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-refresh-cw"
+              :loading="store.refreshing"
+              @click="refresh()"
+            >
+              Refresh catalog
+            </UButton>
+            <UButton
+              v-if="recommendedAvailable.length"
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-sparkles"
+              @click="enableRecommended()"
+            >
+              Enable recommended
+            </UButton>
+            <UInput
+              v-model="filter"
+              size="sm"
+              class="flex-1"
+              icon="i-lucide-search"
+              placeholder="Filter by name or slug…"
+            />
+          </div>
+
+          <p v-if="store.refreshError" class="text-xs text-rose-400">{{ store.refreshError }}</p>
+
+          <div v-if="visible.length" class="max-h-96 space-y-1 overflow-y-auto pr-1">
+            <label
+              v-for="m in visible"
+              :key="m.id"
+              class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-900/40 px-2.5 py-1.5 text-sm"
+            >
+              <UCheckbox
+                :model-value="selected.has(m.id)"
+                @update:model-value="(v: boolean | 'indeterminate') => toggle(m.id, v === true)"
+              />
+              <span class="min-w-0 flex-1">
+                <span class="block truncate text-slate-200">{{ m.name }}</span>
+                <span class="block truncate font-mono text-[11px] text-slate-500">{{ m.id }}</span>
+              </span>
+              <span class="shrink-0 text-right text-[11px] text-slate-500">
+                <span v-if="m.contextLength" class="block">{{
+                  contextLabel(m.contextLength)
+                }}</span>
+                <span class="block">{{ priceLabel(m) }}</span>
+              </span>
+            </label>
+          </div>
+          <p v-else class="text-xs text-slate-500">
+            No models yet — hit <span class="text-slate-300">Refresh catalog</span> to load
+            OpenRouter's live list.
+          </p>
+
+          <div class="flex items-center justify-between">
+            <span class="text-xs text-slate-500">{{ selectedCount }} enabled</span>
+            <UButton
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-save"
+              :loading="busy"
+              @click="save()"
+            >
+              Save
+            </UButton>
+          </div>
+        </template>
       </div>
     </template>
   </UModal>

package/app/components/settings/UserSecretsSection.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+// Per-user settings: "My GitHub token" (and future per-user repository/provider secrets).
+// A generic, descriptor-driven connect form: the backend declares each kind's fields
+// (one secret + optional metadata) and whether a connection test is available; this
+// renders them without hard-coding any kind. Stored PER USER (runs you initiate use YOUR
+// access); the secret is write-only server-side and never shown again.
+import { computed, ref, watch } from 'vue'
+import type { ProviderConfigField, UserSecretKind } from '~/types/userSecrets'
+
+const ui = useUiStore()
+const store = useUserSecretsStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.userSecretsOpen,
+  set: (v: boolean) => (v ? ui.openUserSecrets() : ui.closeUserSecrets()),
+})
+
+// The kind being edited (only `github_pat` today; descriptors drive the rest generically).
+const kind = ref<UserSecretKind>('github_pat')
+const descriptor = computed(() => store.descriptorFor(kind.value))
+const status = computed(() => store.statusFor(kind.value))
+
+// Per-field draft values, keyed by field key. The secret field maps to the wire `secret`;
+// all other fields map into `metadata`.
+const values = ref<Record<string, string>>({})
+const labelDraft = ref('')
+const testResult = ref<{ ok: boolean; message?: string } | null>(null)
+const testing = ref(false)
+const busy = ref(false)
+
+function resetDraft() {
+  values.value = {}
+  labelDraft.value = ''
+  testResult.value = null
+  // Prefill non-secret metadata from the stored status (secret stays blank — write-only).
+  const meta = status.value?.metadata
+  if (meta) for (const [k, v] of Object.entries(meta)) values.value[k] = v
+}
+
+watch(open, (isOpen) => {
+  if (isOpen) void store.load().then(resetDraft)
+})
+watch(kind, resetDraft)
+
+const secretField = computed<ProviderConfigField | undefined>(() =>
+  descriptor.value?.configFields.find((f) => f.secret),
+)
+const metadataFields = computed<ProviderConfigField[]>(() =>
+  (descriptor.value?.configFields ?? []).filter((f) => !f.secret),
+)
+
+/** Build the wire payload: the secret field → `secret`, the rest → `metadata`. */
+function buildPayload(): { secret: string; metadata?: Record<string, string> } | null {
+  const sf = secretField.value
+  if (!sf) return null
+  const secret = (values.value[sf.key] ?? '').trim()
+  if (!secret) return null
+  const metadata: Record<string, string> = {}
+  for (const f of metadataFields.value) {
+    const v = (values.value[f.key] ?? '').trim()
+    if (v) metadata[f.key] = v
+  }
+  return { secret, ...(Object.keys(metadata).length ? { metadata } : {}) }
+}
+
+function notifyError(title: string, e: unknown) {
+  toast.add({
+    title,
+    description: e instanceof Error ? e.message : String(e),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+
+async function test() {
+  const payload = buildPayload()
+  if (!payload) return
+  testing.value = true
+  testResult.value = null
+  try {
+    testResult.value = await store.test(kind.value, payload)
+  } catch (e) {
+    testResult.value = { ok: false, message: e instanceof Error ? e.message : String(e) }
+  } finally {
+    testing.value = false
+  }
+}
+
+async function save() {
+  const payload = buildPayload()
+  if (!payload) return
+  busy.value = true
+  try {
+    await store.store(kind.value, { ...payload, label: labelDraft.value.trim() || undefined })
+    values.value[secretField.value!.key] = ''
+    testResult.value = null
+    toast.add({
+      title: `${descriptor.value?.label ?? 'Secret'} saved`,
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+  } catch (e) {
+    notifyError('Could not save secret', e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function remove() {
+  busy.value = true
+  try {
+    await store.remove(kind.value)
+    resetDraft()
+    toast.add({ title: 'Secret removed', icon: 'i-lucide-check' })
+  } catch (e) {
+    notifyError('Could not remove secret', e)
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="My GitHub token" :ui="{ content: 'max-w-xl' }">
+    <template #body>
+      <div class="space-y-4">
+        <p class="text-xs text-slate-400">
+          Store a personal access token used for the runs <strong>you</strong> start — pushes, pull
+          requests, the CI gate and merges are attributed to your GitHub access. Stored
+          <span class="text-slate-300">just for you</span>; the token is write-only and never shown
+          again.
+        </p>
+
+        <div
+          v-if="status"
+          class="flex items-center justify-between rounded-md border border-slate-700 bg-slate-900/50 px-3 py-2 text-sm"
+        >
+          <div>
+            <span class="font-medium text-slate-200">{{ status.label }}</span>
+            <div class="text-[11px] text-emerald-400">Connected · token stored</div>
+          </div>
+          <UButton
+            icon="i-lucide-trash-2"
+            color="error"
+            variant="ghost"
+            size="xs"
+            :disabled="busy"
+            @click="remove()"
+          />
+        </div>
+
+        <div
+          v-if="descriptor"
+          class="rounded-lg border border-dashed border-slate-700 p-3 space-y-3"
+        >
+          <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ status ? 'Replace token' : 'Add a token' }}
+          </p>
+
+          <UFormField label="Label (optional)">
+            <UInput v-model="labelDraft" :placeholder="descriptor.label" />
+          </UFormField>
+
+          <UFormField
+            v-for="field in descriptor.configFields"
+            :key="field.key"
+            :label="field.label + (field.required ? '' : ' (optional)')"
+            :help="field.help"
+          >
+            <UInput
+              v-model="values[field.key]"
+              :type="field.secret ? 'password' : 'text'"
+              class="font-mono"
+              :placeholder="field.placeholder"
+            />
+          </UFormField>
+
+          <div v-if="descriptor.supportsTest" class="flex items-center gap-2">
+            <UButton
+              color="neutral"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-plug-zap"
+              :loading="testing"
+              :disabled="!buildPayload()"
+              @click="test()"
+            >
+              Test connection
+            </UButton>
+            <span v-if="testResult && testResult.ok" class="text-xs text-emerald-400">
+              {{ testResult.message ?? 'Token valid' }}
+            </span>
+            <span v-else-if="testResult" class="text-xs text-rose-400">
+              {{ testResult.message ?? 'Token rejected' }}
+            </span>
+          </div>
+
+          <div class="flex justify-end">
+            <UButton
+              color="primary"
+              size="sm"
+              :loading="busy"
+              :disabled="!buildPayload()"
+              @click="save()"
+            >
+              {{ status ? 'Save' : 'Add token' }}
+            </UButton>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/composables/api/userSecrets.ts

@@ -0,0 +1,31 @@
+import type {
+  ConnectionTestResult,
+  StoreUserSecretInput,
+  TestUserSecretInput,
+  UserSecretDescriptor,
+  UserSecretKind,
+  UserSecretStatus,
+} from '~/types/userSecrets'
+import type { ApiContext } from './context'
+
+// Per-USER generic secrets (a GitHub PAT today). User-scoped (no workspace); the secret
+// is write-only server-side and never returned — only status metadata + a `hasSecret`
+// flag. `descriptors` drive the generic connect form; `test` probes before save.
+export function userSecretsApi({ http }: ApiContext) {
+  return {
+    listUserSecrets: () =>
+      http<{ secrets: UserSecretStatus[]; descriptors: UserSecretDescriptor[] }>('/user-secrets'),
+
+    storeUserSecret: (kind: UserSecretKind, body: StoreUserSecretInput) =>
+      http<UserSecretStatus>(`/user-secrets/${encodeURIComponent(kind)}`, { method: 'POST', body }),
+
+    deleteUserSecret: (kind: UserSecretKind) =>
+      http(`/user-secrets/${encodeURIComponent(kind)}`, { method: 'DELETE' }),
+
+    testUserSecret: (kind: UserSecretKind, body: TestUserSecretInput) =>
+      http<ConnectionTestResult>(`/user-secrets/${encodeURIComponent(kind)}/test`, {
+        method: 'POST',
+        body,
+      }),
+  }
+}

package/app/composables/useApi.ts

@@ -17,6 +17,7 @@ import { reviewsApi } from './api/reviews'
 import { slackApi } from './api/slack'
 import { specApi } from './api/spec'
 import { tasksApi } from './api/tasks'
+import { userSecretsApi } from './api/userSecrets'
 import { workspacesApi } from './api/workspaces'
 
 /**
@@ -87,5 +88,6 @@ export function useApi() {
     ...githubApi(ctx),
     ...slackApi(ctx),
     ...bootstrapApi(ctx),
+    ...userSecretsApi(ctx),
   }
 }

package/app/pages/index.vue

@@ -31,6 +31,7 @@ import WorkspaceSettingsPanel from '~/components/settings/WorkspaceSettingsPanel
 import ObservabilityConnectionPanel from '~/components/settings/ObservabilityConnectionPanel.vue'
 import ModelConfigurationPanel from '~/components/settings/ModelConfigurationPanel.vue'
 import LocalModelEndpointsPanel from '~/components/settings/LocalModelEndpointsPanel.vue'
+import UserSecretsSection from '~/components/settings/UserSecretsSection.vue'
 import OpenRouterCatalogPanel from '~/components/settings/OpenRouterCatalogPanel.vue'
 import VendorCredentialsModal from '~/components/providers/VendorCredentialsModal.vue'
 import PersonalCredentialModal from '~/components/providers/PersonalCredentialModal.vue'
@@ -183,6 +184,7 @@ watch(
       <ObservabilityConnectionPanel />
       <ModelConfigurationPanel />
       <LocalModelEndpointsPanel />
+      <UserSecretsSection />
       <OpenRouterCatalogPanel />
       <VendorCredentialsModal />
       <PersonalCredentialModal />

package/app/stores/ui.ts

@@ -102,6 +102,7 @@ export const useUiStore = defineStore('ui', () => {
   const vendorCredentialsOpen = ref(false)
   // Per-user settings panel: the signed-in user's own-machine local model runners.
   const localModelsOpen = ref(false)
+  const userSecretsOpen = ref(false)
   // Per-workspace settings panel: the OpenRouter dynamic catalog (browse/enable gateway models).
   const openRouterOpen = ref(false)
 
@@ -358,6 +359,12 @@ export const useUiStore = defineStore('ui', () => {
   function closeLocalModels() {
     localModelsOpen.value = false
   }
+  function openUserSecrets() {
+    userSecretsOpen.value = true
+  }
+  function closeUserSecrets() {
+    userSecretsOpen.value = false
+  }
   function openOpenRouter() {
     openRouterOpen.value = true
   }
@@ -451,6 +458,7 @@ export const useUiStore = defineStore('ui', () => {
     modelConfigOpen,
     vendorCredentialsOpen,
     localModelsOpen,
+    userSecretsOpen,
     openRouterOpen,
     aiProviderSetupOpen,
     aiPresetMismatchOpen,
@@ -512,6 +520,8 @@ export const useUiStore = defineStore('ui', () => {
     closeVendorCredentials,
     openLocalModels,
     closeLocalModels,
+    openUserSecrets,
+    closeUserSecrets,
     openOpenRouter,
     closeOpenRouter,
     openAiProviderSetup,

package/app/stores/userSecrets.ts

@@ -0,0 +1,64 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type {
+  ConnectionTestResult,
+  StoreUserSecretInput,
+  TestUserSecretInput,
+  UserSecretDescriptor,
+  UserSecretKind,
+  UserSecretStatus,
+} from '~/types/userSecrets'
+
+// The signed-in user's generic secrets (a GitHub PAT today). Stored PER USER (a run you
+// initiate uses YOUR GitHub access), write-only server-side — this store carries only the
+// status metadata + a `hasSecret` flag, plus the kind descriptors that drive the generic
+// connect form. Loaded INDEPENDENTLY of the workspace snapshot, like local runners.
+export const useUserSecretsStore = defineStore('userSecrets', () => {
+  const api = useApi()
+  const secrets = ref<UserSecretStatus[]>([])
+  const descriptors = ref<UserSecretDescriptor[]>([])
+  const loading = ref(false)
+
+  async function load() {
+    loading.value = true
+    try {
+      const { secrets: list, descriptors: descs } = await api.listUserSecrets()
+      secrets.value = list
+      descriptors.value = descs
+    } catch {
+      // Auth disabled / not signed in / feature off → nothing to surface.
+      secrets.value = []
+      descriptors.value = []
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function statusFor(kind: UserSecretKind): UserSecretStatus | undefined {
+    return secrets.value.find((s) => s.kind === kind)
+  }
+
+  function descriptorFor(kind: UserSecretKind): UserSecretDescriptor | undefined {
+    return descriptors.value.find((d) => d.kind === kind)
+  }
+
+  async function store(kind: UserSecretKind, input: StoreUserSecretInput) {
+    const status = await api.storeUserSecret(kind, input)
+    secrets.value = [...secrets.value.filter((s) => s.kind !== kind), status]
+    return status
+  }
+
+  async function remove(kind: UserSecretKind) {
+    await api.deleteUserSecret(kind)
+    secrets.value = secrets.value.filter((s) => s.kind !== kind)
+  }
+
+  async function test(
+    kind: UserSecretKind,
+    input: TestUserSecretInput,
+  ): Promise<ConnectionTestResult> {
+    return await api.testUserSecret(kind, input)
+  }
+
+  return { secrets, descriptors, loading, load, statusFor, descriptorFor, store, remove, test }
+})

package/app/types/userSecrets.ts

@@ -0,0 +1,49 @@
+// Frontend mirrors of the per-user secret + provider-config wire contracts
+// (`@cat-factory/contracts` user-secret.ts + provider-config.ts).
+
+export type UserSecretKind = 'github_pat'
+
+/** One config value a kind needs, rendered as a single form field. */
+export interface ProviderConfigField {
+  key: string
+  label: string
+  help?: string
+  placeholder?: string
+  secret?: boolean
+  required?: boolean
+  type?: 'text' | 'password' | 'select'
+  options?: { value: string; label: string }[]
+}
+
+/** Read-only status of one stored per-user secret — never the secret value. */
+export interface UserSecretStatus {
+  kind: UserSecretKind
+  label: string
+  hasSecret: boolean
+  metadata?: Record<string, string>
+  connectedAt: number
+}
+
+/** A kind's self-description for the generic connect form. */
+export interface UserSecretDescriptor {
+  kind: UserSecretKind
+  label: string
+  configFields: ProviderConfigField[]
+  supportsTest: boolean
+}
+
+export interface StoreUserSecretInput {
+  label?: string
+  secret: string
+  metadata?: Record<string, string>
+}
+
+export interface TestUserSecretInput {
+  secret: string
+  metadata?: Record<string, string>
+}
+
+export interface ConnectionTestResult {
+  ok: boolean
+  message?: string
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.18.1",
+  "version": "0.20.0",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",