@cat-factory/app 0.6.0

package/app/components/providers/VendorCredentialsModal.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+// LLM Vendors: connect commercial coding-plan subscription credentials (a token pool) so
+// agent steps can run on the Claude Code harness instead of an API key. Tokens are
+// write-only and pooled, leased with usage-aware rotation. Connecting a vendor makes its
+// models win in the picker and at dispatch ("subscriptions always win"). Only genuinely
+// poolable (team/organization-licensed) vendors live here; individual-use subscriptions
+// (Claude, GLM, ChatGPT/Codex) are connected per-user in the Personal subscriptions section.
+import { computed, ref, watch } from 'vue'
+import type { SubscriptionVendor } from '~/types/domain'
+
+const ui = useUiStore()
+const workspace = useWorkspaceStore()
+const creds = useVendorCredentialsStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.vendorCredentialsOpen,
+  set: (v: boolean) => (v ? ui.openVendorCredentials() : ui.closeVendorCredentials()),
+})
+
+// Only commercial coding-plan vendors that permit team/organization use are poolable here.
+// Claude, GLM and ChatGPT/Codex are licensed for individual use only, so they are connected
+// per-user in the "Personal subscriptions" section below (PersonalSubscriptionSection).
+const VENDORS: { value: SubscriptionVendor; label: string; harness: string }[] = [
+  { value: 'kimi', label: 'Kimi — Moonshot coding plan', harness: 'Claude Code' },
+  { value: 'deepseek', label: 'DeepSeek — coding plan', harness: 'Claude Code' },
+]
+
+const visibleVendors = computed(() => VENDORS)
+
+const vendor = ref<SubscriptionVendor>('kimi')
+const label = ref('')
+const token = ref('')
+const busy = ref(false)
+
+watch(open, (isOpen) => {
+  if (isOpen && workspace.workspaceId) void creds.load(workspace.workspaceId)
+})
+
+/** Step-by-step instructions for the selected vendor. */
+const steps = computed<string[]>(() => {
+  switch (vendor.value) {
+    case 'kimi':
+      return [
+        'Open your Moonshot (Kimi) coding-plan console and create an API key for the Anthropic-compatible endpoint.',
+        'Copy the API key. Agent steps will run via Claude Code against Moonshot’s Anthropic endpoint with full context.',
+        'Paste the key below.',
+      ]
+    case 'deepseek':
+      return [
+        'Open your DeepSeek coding-plan console and create an API key for the Anthropic-compatible endpoint.',
+        'Copy the API key. Agent steps will run via Claude Code against DeepSeek’s Anthropic endpoint with full context.',
+        'Paste the key below.',
+      ]
+    default:
+      return []
+  }
+})
+
+const tokenPlaceholder = computed(() => 'your coding-plan API key')
+
+async function add() {
+  if (!token.value.trim()) return
+  busy.value = true
+  try {
+    await creds.add({
+      vendor: vendor.value,
+      label: label.value.trim() || `${vendor.value} token`,
+      token: token.value.trim(),
+    })
+    token.value = ''
+    label.value = ''
+    toast.add({ title: 'Token connected', icon: 'i-lucide-check', color: 'success' })
+  } catch (e) {
+    toast.add({
+      title: 'Could not connect token',
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+    })
+  } finally {
+    busy.value = false
+  }
+}
+
+async function remove(id: string) {
+  try {
+    await creds.remove(id)
+  } catch (e) {
+    toast.add({
+      title: 'Could not remove token',
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+    })
+  }
+}
+
+function vendorLabel(v: SubscriptionVendor): string {
+  return VENDORS.find((x) => x.value === v)?.label ?? v
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="LLM Vendors" :ui="{ content: 'max-w-2xl' }">
+    <template #body>
+      <div class="space-y-5">
+        <p class="text-sm text-slate-400">
+          Connect a <strong>commercial</strong> coding-plan subscription (Kimi, DeepSeek) that
+          permits team/organization use to run agent steps on the Claude Code harness instead of an
+          API key. Tokens are stored encrypted, pooled, and rotated by usage. Subscription models
+          are flat-rate quota — they don’t draw on your spend budget. Individual-use subscriptions
+          (Claude, GLM, ChatGPT/Codex) are connected per-user in the Personal subscriptions section
+          below.
+        </p>
+
+        <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+          Workspace pool (commercial coding plans)
+        </h4>
+
+        <!-- vendor picker -->
+        <div class="flex flex-wrap items-end gap-3">
+          <UFormField label="Vendor">
+            <USelect
+              v-model="vendor"
+              :items="visibleVendors.map((v) => ({ label: v.label, value: v.value }))"
+              class="w-64"
+            />
+          </UFormField>
+        </div>
+
+        <!-- guided steps -->
+        <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 steps" :key="i">{{ step }}</li>
+        </ol>
+
+        <!-- add form -->
+        <div class="space-y-2">
+          <UFormField label="Label (optional)">
+            <UInput v-model="label" placeholder="e.g. work account" />
+          </UFormField>
+          <UFormField label="Token">
+            <UTextarea
+              v-model="token"
+              :rows="3"
+              :placeholder="tokenPlaceholder"
+              class="font-mono"
+            />
+          </UFormField>
+          <div class="flex justify-end">
+            <UButton :loading="busy" :disabled="!token.trim()" icon="i-lucide-plus" @click="add()">
+              Connect
+            </UButton>
+          </div>
+        </div>
+
+        <!-- connected pool -->
+        <div v-if="creds.credentials.length" class="space-y-2">
+          <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+            Connected ({{ creds.credentials.length }})
+          </h4>
+          <div
+            v-for="c in creds.credentials"
+            :key="c.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">{{ c.label }}</span>
+              <span class="ml-2 text-xs text-slate-500">{{ vendorLabel(c.vendor) }}</span>
+              <div class="text-[11px] tabular-nums text-slate-500">
+                {{ (c.inputTokens + c.outputTokens).toLocaleString() }} tok this window ·
+                {{ c.requestCount }} run{{ c.requestCount === 1 ? '' : 's' }}
+              </div>
+            </div>
+            <UButton
+              icon="i-lucide-trash-2"
+              color="error"
+              variant="ghost"
+              size="xs"
+              @click="remove(c.id)"
+            />
+          </div>
+        </div>
+
+        <!-- direct provider API keys (OpenAI/Anthropic/Qwen/DeepSeek/Moonshot), pooled -->
+        <div class="border-t border-slate-800 pt-5">
+          <ProvidersApiKeysSection />
+        </div>
+
+        <!-- personal (individual-usage) subscriptions: Claude / GLM / Codex, per-user -->
+        <div class="border-t border-slate-800 pt-5">
+          <ProvidersPersonalSubscriptionSection />
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/recurring/RecurrenceEditor.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+// Edits a `Recurrence`: run every N hours, optionally constrained to a set of
+// weekdays and an hour-of-day window, in a chosen timezone. Used both when adding
+// a recurring pipeline (frame modal) and when editing one (inspector). Emits the
+// updated recurrence via v-model.
+import type { Recurrence } from '~/types/recurring'
+
+const props = defineProps<{ modelValue: Recurrence }>()
+const emit = defineEmits<{ 'update:modelValue': [Recurrence] }>()
+
+const WEEKDAYS = [
+  { value: 0, label: 'Sun' },
+  { value: 1, label: 'Mon' },
+  { value: 2, label: 'Tue' },
+  { value: 3, label: 'Wed' },
+  { value: 4, label: 'Thu' },
+  { value: 5, label: 'Fri' },
+  { value: 6, label: 'Sat' },
+]
+
+function patch(p: Partial<Recurrence>) {
+  emit('update:modelValue', { ...props.modelValue, ...p })
+}
+
+function toggleDay(day: number) {
+  const set = new Set(props.modelValue.weekdays)
+  if (set.has(day)) set.delete(day)
+  else set.add(day)
+  patch({ weekdays: [...set].sort((a, b) => a - b) })
+}
+
+// The hour-window is "any hour" when both bounds are null. The checkbox toggles
+// between unconstrained and a default business-hours window.
+const windowEnabled = computed(
+  () => props.modelValue.windowStartHour !== null || props.modelValue.windowEndHour !== null,
+)
+function toggleWindow(enabled: boolean) {
+  if (enabled) patch({ windowStartHour: 9, windowEndHour: 17 })
+  else patch({ windowStartHour: null, windowEndHour: null })
+}
+
+const hours = Array.from({ length: 24 }, (_, h) => ({
+  value: h,
+  label: `${String(h).padStart(2, '0')}:00`,
+}))
+
+// A small, common set of IANA zones plus whatever the schedule already uses.
+const TIMEZONES = [
+  'UTC',
+  'Europe/London',
+  'Europe/Helsinki',
+  'America/New_York',
+  'America/Los_Angeles',
+  'Asia/Tokyo',
+]
+const timezoneOptions = computed(() =>
+  Array.from(new Set([props.modelValue.timezone, ...TIMEZONES])),
+)
+</script>
+
+<template>
+  <div class="space-y-3">
+    <UFormField label="Run every">
+      <div class="flex items-center gap-2">
+        <UInput
+          :model-value="modelValue.intervalHours"
+          type="number"
+          :min="1"
+          class="w-24"
+          @update:model-value="patch({ intervalHours: Math.max(1, Number($event) || 1) })"
+        />
+        <span class="text-xs text-slate-400">hours</span>
+      </div>
+    </UFormField>
+
+    <UFormField label="Allowed days" help="Leave all off to run any day.">
+      <div class="flex flex-wrap gap-1">
+        <UButton
+          v-for="d in WEEKDAYS"
+          :key="d.value"
+          size="xs"
+          :color="modelValue.weekdays.includes(d.value) ? 'primary' : 'neutral'"
+          :variant="modelValue.weekdays.includes(d.value) ? 'solid' : 'subtle'"
+          @click="toggleDay(d.value)"
+        >
+          {{ d.label }}
+        </UButton>
+      </div>
+    </UFormField>
+
+    <UFormField>
+      <UCheckbox
+        :model-value="windowEnabled"
+        label="Only within an hour-of-day window (e.g. business hours)"
+        @update:model-value="toggleWindow(Boolean($event))"
+      />
+    </UFormField>
+
+    <div v-if="windowEnabled" class="flex items-center gap-2">
+      <USelect
+        :model-value="modelValue.windowStartHour ?? 0"
+        :items="hours"
+        class="w-28"
+        @update:model-value="patch({ windowStartHour: Number($event) })"
+      />
+      <span class="text-xs text-slate-400">to</span>
+      <USelect
+        :model-value="modelValue.windowEndHour ?? 24 % 24"
+        :items="hours"
+        class="w-28"
+        @update:model-value="patch({ windowEndHour: Number($event) })"
+      />
+    </div>
+
+    <UFormField label="Timezone">
+      <USelect
+        :model-value="modelValue.timezone"
+        :items="timezoneOptions"
+        class="w-full"
+        @update:model-value="patch({ timezone: String($event) })"
+      />
+    </UFormField>
+  </div>
+</template>