@cat-factory/app 0.6.0

package/app/components/providers/ApiKeysSection.vue

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+// Direct-provider API keys: connect a vendor API key (OpenAI/Anthropic/Qwen/DeepSeek/
+// Moonshot) so agent steps and inline calls run on that provider. Keys are stored
+// encrypted in the DB, pooled and rotated by usage — replacing deployment env vars.
+//
+// Two modes:
+//  - Default (no `accountId`): manage WORKSPACE keys (shared by the team) and YOUR own
+//    keys (your personal pool, usable in any workspace), toggled by the Scope select.
+//  - With `accountId`: manage ACCOUNT-wide keys (shared by every workspace in the
+//    account); admin-only, enforced server-side. Surfaced from account/team settings.
+import { computed, ref, watch } from 'vue'
+import type { ApiKey, ApiKeyProvider } from '~/types/domain'
+
+const props = defineProps<{ accountId?: string }>()
+
+const workspace = useWorkspaceStore()
+const keys = useApiKeysStore()
+const models = useModelsStore()
+const toast = useToast()
+
+/** Account-wide mode (single account scope) vs the default workspace/user toggle. */
+const isAccount = computed(() => !!props.accountId)
+
+/** Where to obtain each provider's API key + a short note. */
+const PROVIDERS: {
+  value: ApiKeyProvider
+  label: string
+  url: string
+  steps: string[]
+}[] = [
+  {
+    value: 'openai',
+    label: 'OpenAI',
+    url: 'https://platform.openai.com/api-keys',
+    steps: [
+      'Open platform.openai.com → API keys and create a new secret key.',
+      'Copy the key (starts with sk-…); it is shown only once.',
+    ],
+  },
+  {
+    value: 'anthropic',
+    label: 'Anthropic (Claude API)',
+    url: 'https://console.anthropic.com/settings/keys',
+    steps: [
+      'Open console.anthropic.com → Settings → API Keys and create a key.',
+      'Copy the key (starts with sk-ant-…).',
+    ],
+  },
+  {
+    value: 'qwen',
+    label: 'Qwen (Alibaba DashScope)',
+    url: 'https://dashscope.console.aliyun.com/apiKey',
+    steps: [
+      'Open the DashScope console (international) → API-KEY and create a key.',
+      'Copy the key; it authenticates the OpenAI-compatible Qwen endpoint.',
+    ],
+  },
+  {
+    value: 'deepseek',
+    label: 'DeepSeek',
+    url: 'https://platform.deepseek.com/api_keys',
+    steps: [
+      'Open platform.deepseek.com → API keys and create a key.',
+      'Copy the key (starts with sk-…).',
+    ],
+  },
+  {
+    value: 'moonshot',
+    label: 'Moonshot (Kimi API)',
+    url: 'https://platform.moonshot.ai/console/api-keys',
+    steps: [
+      'Open platform.moonshot.ai → API Keys and create a key.',
+      'Copy the key; it authenticates the OpenAI-compatible Moonshot endpoint.',
+    ],
+  },
+  {
+    value: 'openrouter',
+    label: 'OpenRouter',
+    url: 'https://openrouter.ai/keys',
+    steps: [
+      'Open openrouter.ai → Keys and create an API key.',
+      'Copy the key (starts with sk-or-…); it reaches 300+ models through one gateway.',
+    ],
+  },
+  {
+    value: 'litellm',
+    label: 'LiteLLM (self-hosted gateway)',
+    url: 'https://docs.litellm.ai/docs/proxy/virtual_keys',
+    steps: [
+      'Generate a virtual key on your LiteLLM gateway (or use its master key).',
+      "The gateway's base URL is set by your deployment operator (LITELLM_BASE_URL), not here.",
+    ],
+  },
+]
+
+const scope = ref<'workspace' | 'user'>('workspace')
+const provider = ref<ApiKeyProvider>('openai')
+const label = ref('')
+const key = ref('')
+const busy = ref(false)
+
+watch(
+  () => props.accountId,
+  (acc) => {
+    if (acc) void keys.loadAccountKeys(acc)
+  },
+  { immediate: true },
+)
+
+watch(
+  () => workspace.workspaceId,
+  (ws) => {
+    if (!isAccount.value && ws) void keys.load(ws)
+  },
+  { immediate: true },
+)
+
+const selected = computed(() => PROVIDERS.find((p) => p.value === provider.value)!)
+const connected = computed<ApiKey[]>(() =>
+  isAccount.value
+    ? keys.accountKeys
+    : scope.value === 'workspace'
+      ? keys.workspaceKeys
+      : keys.userKeys,
+)
+
+function providerLabel(p: ApiKeyProvider): string {
+  return PROVIDERS.find((x) => x.value === p)?.label ?? p
+}
+
+async function add() {
+  if (!key.value.trim()) return
+  busy.value = true
+  try {
+    const input = {
+      provider: provider.value,
+      label: label.value.trim() || `${provider.value} key`,
+      key: key.value.trim(),
+    }
+    if (isAccount.value) await keys.addAccountKey(input)
+    else if (scope.value === 'workspace') await keys.addWorkspaceKey(input)
+    else await keys.addUserKey(input)
+    key.value = ''
+    label.value = ''
+    // The picker's selectability depends on configured keys — refresh it.
+    if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
+    toast.add({ title: 'API key connected', icon: 'i-lucide-check', color: 'success' })
+  } catch (e) {
+    toast.add({
+      title: 'Could not connect key',
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+    })
+  } finally {
+    busy.value = false
+  }
+}
+
+async function remove(k: ApiKey) {
+  try {
+    if (k.scope === 'account') await keys.removeAccountKey(k.id)
+    else if (k.scope === 'workspace') await keys.removeWorkspaceKey(k.id)
+    else await keys.removeUserKey(k.id)
+    if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
+  } catch (e) {
+    toast.add({
+      title: 'Could not remove key',
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div>
+      <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+        Direct provider API keys
+      </h4>
+      <p v-if="isAccount" class="mt-1 text-sm text-slate-400">
+        Connect a vendor API key shared by <strong>every workspace</strong> in this account. Keys
+        are stored encrypted, pooled, and rotated by usage. Account keys are admin-managed.
+      </p>
+      <p v-else class="mt-1 text-sm text-slate-400">
+        Connect a vendor API key so models run directly on that provider. Keys are stored encrypted,
+        pooled, and rotated by usage. Scope a key to this <strong>workspace</strong> (shared with
+        the team) or to <strong>you</strong> (your own pool, usable anywhere).
+      </p>
+    </div>
+
+    <!-- scope + provider -->
+    <div class="flex flex-wrap items-end gap-3">
+      <UFormField v-if="!isAccount" label="Scope">
+        <USelect
+          v-model="scope"
+          :items="[
+            { label: 'This workspace', value: 'workspace' },
+            { label: 'My keys (only me)', value: 'user' },
+          ]"
+          class="w-48"
+        />
+      </UFormField>
+      <UFormField label="Provider">
+        <USelect
+          v-model="provider"
+          :items="PROVIDERS.map((p) => ({ label: p.label, value: p.value }))"
+          class="w-64"
+        />
+      </UFormField>
+    </div>
+
+    <!-- where to get the key -->
+    <ol
+      class="list-decimal space-y-1.5 rounded-lg border border-slate-700 bg-slate-900/60 p-4 pl-8 text-sm text-slate-300"
+    >
+      <li v-for="(step, i) in selected.steps" :key="i">{{ step }}</li>
+      <li>
+        <a
+          :href="selected.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-primary-400 underline"
+        >
+          Open {{ selected.label }} keys ↗
+        </a>
+      </li>
+    </ol>
+
+    <!-- add form -->
+    <div class="space-y-2">
+      <UFormField label="Label (optional)">
+        <UInput v-model="label" placeholder="e.g. team key" />
+      </UFormField>
+      <UFormField label="API key">
+        <UTextarea v-model="key" :rows="2" placeholder="paste the API key" class="font-mono" />
+      </UFormField>
+      <div class="flex justify-end">
+        <UButton :loading="busy" :disabled="!key.trim()" icon="i-lucide-plus" @click="add()">
+          Connect
+        </UButton>
+      </div>
+    </div>
+
+    <!-- connected keys for the selected scope -->
+    <div v-if="connected.length" class="space-y-2">
+      <h5 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+        Connected ({{ connected.length }})
+      </h5>
+      <div
+        v-for="k in connected"
+        :key="k.id"
+        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">{{ k.label }}</span>
+          <span class="ml-2 text-xs text-slate-500">{{ providerLabel(k.provider) }}</span>
+          <div class="text-[11px] tabular-nums text-slate-500">
+            {{ (k.inputTokens + k.outputTokens).toLocaleString() }} tok this window ·
+            {{ k.requestCount }} call{{ k.requestCount === 1 ? '' : 's' }}
+          </div>
+        </div>
+        <UButton
+          icon="i-lucide-trash-2"
+          color="error"
+          variant="ghost"
+          size="xs"
+          @click="remove(k)"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/providers/PersonalCredentialModal.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+// Prompts for the personal password (or to connect a subscription) the moment a
+// start/retry of an individual-usage-pinned run needs it — driven by the
+// personalSubscriptions store's `pending` state, which is set when the server replies 428
+// credential_required. On submit it transparently retries the gated action and caches the
+// password. The copy follows the pending vendor (Claude / GLM / ChatGPT-Codex).
+import { computed, ref, watch } from 'vue'
+import type { SubscriptionVendor } from '~/types/domain'
+
+const personal = usePersonalSubscriptionsStore()
+const ui = useUiStore()
+const toast = useToast()
+
+const password = ref('')
+const busy = ref(false)
+
+const pending = computed(() => personal.pending)
+const open = computed({
+  get: () => pending.value !== null,
+  set: (v: boolean) => {
+    if (!v) personal.dismissPending()
+  },
+})
+
+// A missing/expired subscription can't be solved by a password — point the user at the
+// connect form instead. A password_required/wrong_password prompt just needs the field.
+const needsConnect = computed(
+  () =>
+    pending.value?.reason === 'no_subscription' || pending.value?.reason === 'subscription_expired',
+)
+
+const VENDOR_LABELS: Partial<Record<SubscriptionVendor, string>> = {
+  claude: 'Claude',
+  glm: 'GLM (Z.ai)',
+  codex: 'ChatGPT (Codex)',
+}
+
+/** Display label for the pending vendor (falls back to the raw vendor string). */
+const vendorLabel = computed(() => {
+  const v = pending.value?.vendor
+  if (!v) return 'subscription'
+  return VENDOR_LABELS[v] ?? v
+})
+
+watch(open, (isOpen) => {
+  if (isOpen) password.value = ''
+})
+
+const title = computed(() => {
+  switch (pending.value?.reason) {
+    case 'wrong_password':
+      return 'Incorrect personal password'
+    case 'no_subscription':
+      return `Connect your ${vendorLabel.value} subscription`
+    case 'subscription_expired':
+      return `Your ${vendorLabel.value} subscription expired`
+    default:
+      return 'Enter your personal password'
+  }
+})
+
+async function submit() {
+  if (!pending.value || password.value.length < 8) return
+  busy.value = true
+  try {
+    await pending.value.retry(password.value)
+    toast.add({ title: 'Run started', icon: 'i-lucide-check', color: 'success' })
+  } catch (e) {
+    // A fresh 428 (e.g. still-wrong password) re-arms `pending`, keeping the modal open.
+    toast.add({
+      title: 'Could not start the run',
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+    })
+  } finally {
+    busy.value = false
+  }
+}
+
+function goConnect() {
+  personal.dismissPending()
+  ui.openVendorCredentials()
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="title" :ui="{ content: 'max-w-md' }">
+    <template #body>
+      <div class="space-y-4">
+        <template v-if="needsConnect">
+          <p class="text-sm text-slate-400">
+            This task uses a {{ vendorLabel }} model, which runs on <strong>your own</strong>
+            {{ vendorLabel }} subscription. Connect (or renew) it first, then start the run again.
+          </p>
+          <div class="flex justify-end gap-2">
+            <UButton color="neutral" variant="ghost" @click="open = false">Cancel</UButton>
+            <UButton icon="i-lucide-shield-check" @click="goConnect()"
+              >Connect subscription</UButton
+            >
+          </div>
+        </template>
+
+        <template v-else>
+          <p class="text-sm text-slate-400">
+            Enter the personal password that protects your {{ vendorLabel }} subscription. It
+            unlocks your credential for this run only and is cached in this browser so you won’t be
+            asked again for a while.
+          </p>
+          <UFormField label="Personal password">
+            <UInput
+              v-model="password"
+              type="password"
+              autofocus
+              placeholder="your personal password"
+              @keydown.enter="submit()"
+            />
+          </UFormField>
+          <div class="flex justify-end gap-2">
+            <UButton color="neutral" variant="ghost" @click="open = false">Cancel</UButton>
+            <UButton :loading="busy" :disabled="password.length < 8" @click="submit()">
+              Unlock &amp; run
+            </UButton>
+          </div>
+        </template>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/providers/PersonalSubscriptionSection.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+// Personal (individual-usage) subscriptions: Claude, GLM (Z.ai Coding Plan) and ChatGPT
+// (Codex) are each licensed for INDIVIDUAL use only, so they are connected per-user here
+// rather than pooled on the workspace. Each token is double-encrypted server-side under a
+// personal PASSWORD (never stored); that password is what you'll enter when you start/retry
+// such a run (cached locally so it's usually transparent). Recurring schedules can't use them.
+import { computed, onMounted, ref } from 'vue'
+import type { SubscriptionVendor } from '~/types/domain'
+
+const personal = usePersonalSubscriptionsStore()
+const toast = useToast()
+
+/** Per-vendor metadata driving the connect form + connected-row labels. */
+const PERSONAL_VENDORS: {
+  value: SubscriptionVendor
+  label: string
+  tokenLabel: string
+  tokenPlaceholder: string
+  steps: string[]
+}[] = [
+  {
+    value: 'claude',
+    label: 'Claude (Pro/Max)',
+    tokenLabel: 'Claude token',
+    tokenPlaceholder: 'sk-ant-oat01-…',
+    steps: [
+      'Install Claude Code and sign in with your Claude Pro/Max account: run `claude` once and complete the browser login.',
+      'Generate a long-lived token: run `claude setup-token` and copy it.',
+      'Paste it below and choose a personal password to protect it.',
+    ],
+  },
+  {
+    value: 'glm',
+    label: 'GLM (Z.ai Coding Plan)',
+    tokenLabel: 'Z.ai API key',
+    tokenPlaceholder: 'your GLM Coding Plan API key',
+    steps: [
+      'Open your Z.ai GLM Coding Plan dashboard and create an API key for the Anthropic-compatible endpoint.',
+      'The GLM Coding Plan is licensed to you as an individual, so it is stored per-user here (not pooled).',
+      'Paste the key below and choose a personal password to protect it.',
+    ],
+  },
+  {
+    value: 'codex',
+    label: 'ChatGPT (Codex)',
+    tokenLabel: 'ChatGPT auth.json',
+    tokenPlaceholder: '{ "auth_mode": "chatgpt", "tokens": { … } }',
+    steps: [
+      'Install the Codex CLI and sign in with your ChatGPT account: run `codex login` and complete the browser flow.',
+      'Open the credentials file Codex wrote at ~/.codex/auth.json (on Windows %USERPROFILE%\\.codex\\auth.json).',
+      'Copy the entire contents of auth.json, paste it below, and choose a personal password to protect it.',
+    ],
+  },
+]
+
+function vendorMeta(v: SubscriptionVendor) {
+  return PERSONAL_VENDORS.find((m) => m.value === v)
+}
+
+function vendorLabel(v: SubscriptionVendor): string {
+  return vendorMeta(v)?.label ?? v
+}
+
+const vendor = ref<SubscriptionVendor>('claude')
+const label = ref('')
+const token = ref('')
+const password = ref('')
+const expiresOn = ref('') // yyyy-mm-dd (optional)
+const busy = ref(false)
+
+onMounted(() => void personal.load())
+
+const selectedMeta = computed(() => vendorMeta(vendor.value) ?? PERSONAL_VENDORS[0]!)
+const existing = computed(() => personal.subscriptions.find((s) => s.vendor === vendor.value))
+
+/** Renewal nudges for any connected subscription that's near or past expiry. */
+const renewals = computed(() =>
+  personal.subscriptions
+    .filter((s) => s.expiresAt !== null && (s.expired || s.renewSoon))
+    .map((s) => {
+      const name = vendorLabel(s.vendor)
+      if (s.expired)
+        return `Your ${name} subscription has expired — renew it and reconnect to keep running its models.`
+      return `Your ${name} subscription renews in ${s.expiresInDays} day${s.expiresInDays === 1 ? '' : 's'} — update it here once renewed.`
+    }),
+)
+
+async function connect() {
+  if (!token.value.trim() || password.value.length < 8) return
+  busy.value = true
+  try {
+    await personal.store({
+      vendor: vendor.value,
+      label: label.value.trim() || `My ${selectedMeta.value.label} subscription`,
+      token: token.value.trim(),
+      password: password.value,
+      expiresAt: expiresOn.value ? new Date(`${expiresOn.value}T00:00:00Z`).getTime() : null,
+    })
+    token.value = ''
+    password.value = ''
+    label.value = ''
+    expiresOn.value = ''
+    toast.add({
+      title: `${selectedMeta.value.label} subscription connected`,
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+  } catch (e) {
+    toast.add({
+      title: 'Could not connect subscription',
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+    })
+  } finally {
+    busy.value = false
+  }
+}
+
+async function disconnect(v: SubscriptionVendor) {
+  try {
+    await personal.remove(v)
+    toast.add({ title: 'Disconnected', icon: 'i-lucide-check' })
+  } catch (e) {
+    toast.add({
+      title: 'Could not disconnect',
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div>
+      <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+        Personal subscriptions (individual use only)
+      </h4>
+      <p class="mt-1 text-sm text-slate-400">
+        Claude (Pro/Max), GLM (Z.ai Coding Plan) and ChatGPT (Codex) are each licensed to you as an
+        individual, so they’re stored <strong>just for you</strong> and only your runs use them.
+        Each token is encrypted under a personal password (never stored) that you enter when you
+        start such a run — it’s cached in this browser for a while so it stays out of your way. The
+        password is a low-friction convenience and a transparency signal that the system won’t
+        silently share your credential — it is <strong>not</strong> a wall against a system-key
+        holder. These models can’t be used on recurring schedules.
+      </p>
+    </div>
+
+    <!-- connected subscriptions -->
+    <div
+      v-for="sub in personal.subscriptions"
+      :key="sub.vendor"
+      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">{{ sub.label }}</span>
+        <span class="ml-2 text-xs text-slate-500">{{ vendorLabel(sub.vendor) }}</span>
+        <div class="text-[11px] text-slate-500">
+          <template v-if="sub.expiresAt">
+            Expires {{ new Date(sub.expiresAt).toLocaleDateString() }}
+          </template>
+          <template v-else>No expiry set</template>
+        </div>
+      </div>
+      <UButton
+        icon="i-lucide-trash-2"
+        color="error"
+        variant="ghost"
+        size="xs"
+        @click="disconnect(sub.vendor)"
+      />
+    </div>
+
+    <p v-for="(line, i) in renewals" :key="i" class="text-sm text-amber-400/90">{{ line }}</p>
+
+    <!-- vendor picker -->
+    <UFormField label="Subscription">
+      <USelect
+        v-model="vendor"
+        :items="PERSONAL_VENDORS.map((m) => ({ label: m.label, value: m.value }))"
+        class="w-64"
+      />
+    </UFormField>
+
+    <!-- connect / replace form -->
+    <ol
+      class="list-decimal space-y-1.5 rounded-lg border border-slate-700 bg-slate-900/60 p-4 pl-8 text-sm text-slate-300"
+    >
+      <li v-for="(step, i) in selectedMeta.steps" :key="i">{{ step }}</li>
+    </ol>
+
+    <div class="space-y-2">
+      <UFormField label="Label (optional)">
+        <UInput v-model="label" :placeholder="`e.g. my ${selectedMeta.label}`" />
+      </UFormField>
+      <UFormField :label="selectedMeta.tokenLabel">
+        <UTextarea
+          v-model="token"
+          :rows="2"
+          :placeholder="selectedMeta.tokenPlaceholder"
+          class="font-mono"
+        />
+      </UFormField>
+      <div class="flex flex-wrap gap-3">
+        <UFormField label="Personal password (min 8 chars)" class="flex-1">
+          <UInput v-model="password" type="password" placeholder="protects your token" />
+        </UFormField>
+        <UFormField label="Subscription renews on (optional)">
+          <UInput v-model="expiresOn" type="date" />
+        </UFormField>
+      </div>
+      <div class="flex justify-end">
+        <UButton
+          :loading="busy"
+          :disabled="!token.trim() || password.length < 8"
+          icon="i-lucide-shield-check"
+          @click="connect()"
+        >
+          {{ existing ? 'Replace' : 'Connect' }}
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>