@cat-factory/app 0.317.1 → 0.318.0

package/app/components/auth/LoginScreen.vue

@@ -5,7 +5,7 @@ import SecretInput from '~/components/common/SecretInput.vue'
 import type { VcsProvider } from '~/types/domain'
 import { VCS_PROVIDER_ICONS, VCS_PROVIDER_LABELS, vcsTokenCreateUrl } from '~/utils/vcs'
 import { SSO_ERROR_MESSAGE_KEYS } from '~/utils/sso'
-import { postSignInUrl } from '~/utils/postSignIn'
+import { signInThenReload } from '~/utils/postSignIn'
 
 const auth = useAuthStore()
 const { t } = useI18n()
@@ -62,8 +62,7 @@ async function submitPat(provider: PatProvider) {
   patError.value = null
   patBusy.value = true
   try {
-    await auth.patLogin({ provider })
-    if (typeof window !== 'undefined') window.location.assign(postSignInUrl(window.location))
+    await signInThenReload(() => auth.patLogin({ provider }))
   } catch (e) {
     patError.value = apiErrorEnvelope(e)?.message ?? t('auth.localMode.failed')
   } finally {
@@ -95,18 +94,17 @@ async function submitPassword() {
   error.value = null
   busy.value = true
   try {
-    if (mode.value === 'signup') {
-      await auth.signup({
-        email: email.value,
-        password: password.value,
-        name: name.value || undefined,
-        invite: invite.value,
-      })
-    } else {
-      await auth.passwordLogin({ email: email.value, password: password.value })
-    }
     // Reload so the app boots with the new session.
-    if (typeof window !== 'undefined') window.location.assign(postSignInUrl(window.location))
+    await signInThenReload(() =>
+      mode.value === 'signup'
+        ? auth.signup({
+            email: email.value,
+            password: password.value,
+            name: name.value || undefined,
+            invite: invite.value,
+          })
+        : auth.passwordLogin({ email: email.value, password: password.value }),
+    )
   } catch (e) {
     error.value = apiErrorEnvelope(e)?.message ?? t('auth.login.signInFailed')
   } finally {
@@ -177,8 +175,9 @@ async function submitRemotePat() {
   remotePatError.value = null
   remotePatBusy.value = true
   try {
-    await auth.patLogin({ provider: remotePatProvider.value, token: remotePatToken.value.trim() })
-    if (typeof window !== 'undefined') window.location.assign(postSignInUrl(window.location))
+    await signInThenReload(() =>
+      auth.patLogin({ provider: remotePatProvider.value, token: remotePatToken.value.trim() }),
+    )
   } catch (e) {
     remotePatError.value = apiErrorEnvelope(e)?.message ?? t('auth.login.signInFailed')
   } finally {

package/app/components/github/AddServiceFromRepoModal.vue

@@ -306,11 +306,25 @@ watch(
     if (!isOpen) return
     resetSelection()
     void loadRepos()
-    if (ui.addServicePrefill) repoSearch.value = ui.addServicePrefill.repo
   },
   { immediate: true },
 )
 
+// A deep link's repository is typed into the search once the picker's menu has MOUNTED, and after
+// the tick it mounted in: Nuxt UI's InputMenu clears its own search term on that tick, so a term set
+// on open is wiped (the picker mounts with the window, or later behind the connect prompt). The
+// prefill is spent once its repository is selected below, so nothing is typed after that.
+const repoMenu = ref<unknown>(null)
+watch(
+  repoMenu,
+  async (menu) => {
+    if (menu === null || !ui.addServicePrefill) return
+    await nextTick()
+    if (ui.addServicePrefill) repoSearch.value = ui.addServicePrefill.repo
+  },
+  { flush: 'post' },
+)
+
 // A deep link names one repository: select it as soon as the search lists it, once. A repository
 // the connection cannot reach never lists, which leaves the search's own empty state (and its
 // grant-access remedy) in front of the person.
@@ -497,6 +511,7 @@ function done() {
                  to forward the attribute to. -->
             <div class="space-y-1.5" data-testid="add-service-repo-search">
               <UInputMenu
+                ref="repoMenu"
                 v-model="selectedRepoId"
                 v-model:search-term="repoSearch"
                 :items="repoMenuItems"

package/app/components/settings/ApiTokensPanel.vue

@@ -172,6 +172,7 @@ watch(
       newSecret.value = null
       return
     }
+    applyPrefill()
     try {
       await store.ensureLoaded()
     } catch (e) {
@@ -181,6 +182,16 @@ watch(
   { immediate: true },
 )
 
+/** Fill the create form from a new-API-key deep link (`useNewApiKeyDeepLink`), once. */
+function applyPrefill() {
+  const prefill = ui.apiTokensPrefill
+  if (!prefill) return
+  if (prefill.label) label.value = prefill.label
+  if (prefill.scope) scope.value = prefill.scope
+  if (prefill.runsAsSelf && canBindSelf.value) identity.value = 'self'
+  ui.apiTokensPrefill = null
+}
+
 async function createToken() {
   const trimmed = label.value.trim()
   if (!trimmed) return

package/app/composables/useAddRepoDeepLink.ts

@@ -10,7 +10,7 @@
  * /api/v1/deployment`; the format is published at
  * https://catfactory.ai/extend/public-api.html#sending-a-person-to-add-a-repository
  *
- * Signing in first keeps the query (`postSignInUrl`), so a signed-out person lands here too.
+ * Signing in first keeps the query (`signInThenReload`), so a signed-out person lands here too.
  */
 import { watch } from 'vue'
 import type { GitHubAvailableRepo } from '~/types/domain'

package/app/composables/useNewApiKeyDeepLink.spec.ts

@@ -0,0 +1,53 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { captureNewApiKeyDeepLink } from './useNewApiKeyDeepLink'
+
+function setUrl(search: string): void {
+  history.replaceState(null, '', `/${search}`)
+}
+
+describe('captureNewApiKeyDeepLink', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    setUrl('')
+  })
+
+  it('parses the link an integration builds, and strips only its own params', () => {
+    setUrl('?newApiKey=1&label=sainte-beuve&scope=decide&runsAsSelf=1&ws=ws_1&keep=yes')
+    expect(captureNewApiKeyDeepLink()).toEqual({
+      label: 'sainte-beuve',
+      scope: 'decide',
+      runsAsSelf: true,
+      workspaceId: 'ws_1',
+    })
+    expect(window.location.search).toBe('?keep=yes')
+    expect(captureNewApiKeyDeepLink()).toBeNull()
+  })
+
+  it('opens the form at its defaults when the link names nothing else', () => {
+    setUrl('?newApiKey=1')
+    expect(captureNewApiKeyDeepLink()).toEqual({
+      label: null,
+      scope: null,
+      runsAsSelf: false,
+      workspaceId: null,
+    })
+    expect(window.location.search).toBe('')
+  })
+
+  it('drops a scope this build does not know rather than guessing one', () => {
+    setUrl('?newApiKey=1&scope=superuser')
+    expect(captureNewApiKeyDeepLink()).toMatchObject({ scope: null })
+  })
+
+  it('cuts a label to what the form accepts', () => {
+    setUrl(`?newApiKey=1&label=${'x'.repeat(200)}`)
+    expect(captureNewApiKeyDeepLink()?.label).toHaveLength(120)
+  })
+
+  it('ignores a URL without the link, and leaves its query alone', () => {
+    setUrl('?label=other&scope=admin')
+    expect(captureNewApiKeyDeepLink()).toBeNull()
+    expect(window.location.search).toBe('?label=other&scope=admin')
+  })
+})

package/app/composables/useNewApiKeyDeepLink.ts

@@ -0,0 +1,87 @@
+/**
+ * Boot-time replay of a NEW API KEY deep link:
+ * `?newApiKey=1&label=<label>&scope=<scope>&runsAsSelf=1&ws=<id>`.
+ *
+ * An integration that needs a person's OWN key (one bound to them, which is what lets a run use
+ * their personal model subscription) cannot mint it for them: a bound key can only be minted by
+ * its owner, signed in. It sends the person here instead, and the API tokens window opens with the
+ * create form filled in. Nothing is minted until the person clicks create.
+ *
+ * Every parameter but `newApiKey` is optional. A scope this build does not know is dropped rather
+ * than guessed at, and `runsAsSelf` only takes effect where there is a signed-in person to bind
+ * (`ApiTokensPanel` withholds the choice otherwise). Signing in first keeps the query
+ * (`postSignInUrl`). The format is published next to `?addRepo=` in the public API docs.
+ */
+import { PUBLIC_API_SCOPES } from '@cat-factory/contracts'
+import { watch } from 'vue'
+import type { PublicApiScope } from '~/types/publicApiKeys'
+import { useUiStore } from '../stores/ui'
+import { useWorkspaceStore } from '../stores/workspace'
+
+/** What the API tokens window's create form is opened with. Absent fields keep their defaults. */
+export interface NewApiKeyPrefill {
+  label: string | null
+  scope: PublicApiScope | null
+  runsAsSelf: boolean
+}
+
+interface PendingNewApiKeyLink extends NewApiKeyPrefill {
+  workspaceId: string | null
+}
+
+const NEW_API_KEY_LINK_PARAMS = ['newApiKey', 'label', 'scope', 'runsAsSelf', 'ws'] as const
+
+/** The form's own label limit, so a prefill never starts out invalid. */
+const LABEL_MAX_LENGTH = 120
+
+function scopeOf(value: string | null): PublicApiScope | null {
+  return (PUBLIC_API_SCOPES as readonly string[]).includes(value ?? '')
+    ? (value as PublicApiScope)
+    : null
+}
+
+/**
+ * Read (and strip) a new-API-key link from the current URL, or null when there is none. Called
+ * before `workspace.init()` so `ws` can pin the board.
+ */
+export function captureNewApiKeyDeepLink(): PendingNewApiKeyLink | null {
+  if (typeof window === 'undefined') return null
+  const params = new URLSearchParams(window.location.search)
+  if (params.get('newApiKey') !== '1') return null
+  const label = params.get('label')?.trim().slice(0, LABEL_MAX_LENGTH) || null
+  const link: PendingNewApiKeyLink = {
+    label,
+    scope: scopeOf(params.get('scope')),
+    runsAsSelf: params.get('runsAsSelf') === '1',
+    workspaceId: params.get('ws'),
+  }
+  for (const key of NEW_API_KEY_LINK_PARAMS) params.delete(key)
+  const qs = params.toString()
+  history.replaceState(null, '', window.location.pathname + (qs ? `?${qs}` : ''))
+  return link
+}
+
+/** Capture a new-API-key link and, once the board has hydrated, open the window with it. */
+export function useNewApiKeyDeepLink(): void {
+  const link = captureNewApiKeyDeepLink()
+  if (!link) return
+
+  const workspace = useWorkspaceStore()
+  const ui = useUiStore()
+  if (link.workspaceId) workspace.workspaceId = link.workspaceId
+
+  // One-shot, as `useAddRepoDeepLink` is: a later refresh must not reopen a window the person
+  // closed, and `immediate` runs the callback before `stop` is bound.
+  let applied = false
+  let stop: (() => void) | undefined
+  stop = watch(
+    () => workspace.ready,
+    (ready) => {
+      if (!ready || applied) return
+      applied = true
+      ui.openApiTokens({ label: link.label, scope: link.scope, runsAsSelf: link.runsAsSelf })
+      stop?.()
+    },
+    { immediate: true },
+  )
+}

package/app/pages/index.vue

@@ -185,6 +185,8 @@ onMounted(() => {
   useRunDeepLink()
   // `?addRepo=<owner>/<name>`: an integration sending a person to add a service for a repository.
   useAddRepoDeepLink()
+  // `?newApiKey=1`: an integration sending a person to mint a key bound to them.
+  useNewApiKeyDeepLink()
   // `?view=queue` / `?view=board`: a link that opens one of the board's two views.
   views.consumeDeepLink()
   void workspace.init()

package/app/stores/ui/modals.ts

@@ -11,6 +11,7 @@ import type {
   ProviderConnectionKind,
 } from '~/types/providerConnections'
 import type { AddServicePrefill } from '~/composables/useAddRepoDeepLink'
+import type { NewApiKeyPrefill } from '~/composables/useNewApiKeyDeepLink'
 import type { PendingContext } from '~/composables/useContextLinking'
 import {
   infraSetupDismissalKey,
@@ -667,6 +668,8 @@ function createIntegrationPanelModals(resetHubReturn: ResetHubReturn) {
   // API access tokens: the workspace's inbound public-API keys external systems present to
   // the `/api/v1` surface. Opened from the Integrations hub.
   const apiTokensOpen = ref(false)
+  // The create form a new-API-key deep link opened the window with, consumed on open.
+  const apiTokensPrefill = ref<NewApiKeyPrefill | null>(null)
   // Opened and closed by `createBuilderModelConfigHandoff`, which hands the pipeline builder over.
   const modelConfigOpen = ref(false)
   // LLM-vendor subscription credentials (the token pool powering the Claude Code
@@ -722,12 +725,14 @@ function createIntegrationPanelModals(resetHubReturn: ResetHubReturn) {
   function closeReports() {
     reportsOpen.value = false
   }
-  function openApiTokens() {
+  function openApiTokens(prefill: NewApiKeyPrefill | null = null) {
     resetHubReturn()
+    apiTokensPrefill.value = prefill
     apiTokensOpen.value = true
   }
   function closeApiTokens() {
     apiTokensOpen.value = false
+    apiTokensPrefill.value = null
   }
   function openVendorCredentials(tab = 'pool') {
     resetHubReturn()
@@ -770,6 +775,7 @@ function createIntegrationPanelModals(resetHubReturn: ResetHubReturn) {
     operatorDashboardOpen,
     reportsOpen,
     apiTokensOpen,
+    apiTokensPrefill,
     modelConfigOpen,
     vendorCredentialsOpen,
     vendorCredentialsTab,

package/app/utils/postSignIn.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { postSignInUrl } from './postSignIn'
+import { postSignInUrl, signInThenReload } from './postSignIn'
 
 // The regression this exists for: every sign-in path reloaded to `location.pathname`, so a flow
 // whose subject rides the query string lost it the moment a person signed in. The MCP consent
@@ -27,3 +27,30 @@ describe('postSignInUrl', () => {
     expect(postSignInUrl({ pathname: '/boards', search: '?a=1' })).toBe('/boards?a=1')
   })
 })
+
+describe('signInThenReload', () => {
+  function location(search: string) {
+    const assigned: string[] = []
+    const at = { pathname: '/', search, assign: (url: string) => void assigned.push(url) }
+    return { at, assigned }
+  }
+
+  it('reloads to the URL as it was BEFORE the sign-in, query included', async () => {
+    // What the board does as the session lands: it consumes `?addRepo=` and strips it from the URL.
+    const { at, assigned } = location('?addRepo=octo%2Fdemo&provider=github')
+    await signInThenReload(async () => {
+      at.search = ''
+    }, at)
+    expect(assigned).toEqual(['/?addRepo=octo%2Fdemo&provider=github'])
+  })
+
+  it('does not reload when the sign-in is refused', async () => {
+    const { at, assigned } = location('?addRepo=octo%2Fdemo')
+    await expect(
+      signInThenReload(async () => {
+        throw new Error('refused')
+      }, at),
+    ).rejects.toThrow('refused')
+    expect(assigned).toEqual([])
+  })
+})

package/app/utils/postSignIn.ts

@@ -27,3 +27,23 @@ export function postSignInUrl(location: { pathname: string; search: string }): s
   const query = params.toString()
   return query ? `${location.pathname}?${query}` : location.pathname
 }
+
+/** The part of `window.location` a sign-in reads and reloads through. */
+type SignInLocation = Pick<Location, 'pathname' | 'search' | 'assign'>
+
+/**
+ * Run a sign-in, then reload to where the person was.
+ *
+ * The destination is read BEFORE the call. A sign-in that succeeds mounts the board in place, and
+ * the board's deep-link handlers strip the query they act on (`?addRepo=` among them) as they
+ * consume it, so a destination read after the call is the stripped URL and the reload lands on a
+ * board that no longer knows what the link asked for.
+ */
+export async function signInThenReload(
+  signIn: () => Promise<unknown>,
+  location: SignInLocation | null = typeof window === 'undefined' ? null : window.location,
+): Promise<void> {
+  const destination = location === null ? null : postSignInUrl(location)
+  await signIn()
+  if (location !== null && destination !== null) location.assign(destination)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.317.1",
+  "version": "0.318.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",