@cat-factory/app 0.160.1 → 0.162.0

package/app/components/panels/ReportsSpendBreakdown.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ReportSpendRow } from '~/types/execution'
+import { maxOf, segmentPct, spendMagnitude } from './ReportsPanel.logic'
+
+// One ranked spend breakdown: a horizontal bar per slice, split into the metered
+// (`violet-500`, real money) and subscription (`amber-600`, illustrative equivalent-API
+// cost) segments with a surface gap between them. Extracted from `ReportsPanel.vue` because
+// the panel renders four of these against different dimensions — the shape is identical,
+// only the row list and the heading differ.
+//
+// Every bar is scaled against the HEAVIEST slice in this list, so a full bar means "the
+// biggest consumer here", never an absolute budget. The panel owns the legend (the two
+// series mean the same thing in every breakdown, so repeating it per card would be noise).
+const props = defineProps<{
+  rows: ReportSpendRow[]
+  currency: string
+  testId: string
+  /** Resolves a slice's display name (the panel owns the unattributed/i18n vocabulary). */
+  labelOf: (row: ReportSpendRow) => string
+}>()
+
+const { t, n } = useI18n()
+const money = (value: number) => n(value, { key: 'currency', currency: props.currency })
+const max = computed(() => maxOf(props.rows, spendMagnitude))
+</script>
+
+<template>
+  <div class="rounded-lg border border-slate-800 bg-slate-900/40 p-4">
+    <div v-if="!rows.length" class="py-4 text-center text-xs text-slate-500">
+      {{ t('reports.spend.empty') }}
+    </div>
+    <ul v-else class="flex flex-col gap-2.5" :data-testid="testId">
+      <li v-for="row in rows" :key="row.key" class="text-xs" data-testid="reports-spend-row">
+        <div class="mb-1 flex items-baseline justify-between gap-2">
+          <span class="min-w-0 truncate text-slate-300">{{ labelOf(row) }}</span>
+          <!-- The metered figure alone is the slice's SPEND. The subscription cost rides
+               beside it, in its own series colour and explicitly named, because it is the
+               illustrative cost of flat-rate quota usage — adding the two into one currency
+               figure would report money that was never billed. -->
+          <span class="shrink-0 tabular-nums text-slate-400">
+            {{ money(row.meteredCost) }}
+            <span v-if="row.subscriptionCost > 0" class="text-amber-400">
+              {{ t('reports.spend.subscriptionAside', { value: money(row.subscriptionCost) }) }}
+            </span>
+          </span>
+        </div>
+        <div class="flex h-1.5 gap-[2px]">
+          <div
+            class="h-1.5 rounded-full bg-violet-500"
+            :style="{ width: `${segmentPct(row.meteredCost, max)}%` }"
+          />
+          <div
+            class="h-1.5 rounded-full bg-amber-600"
+            :style="{ width: `${segmentPct(row.subscriptionCost, max)}%` }"
+          />
+        </div>
+        <p class="mt-1 text-[10px] text-slate-500">
+          {{ t('reports.spend.calls', { count: row.calls }, row.calls) }} ·
+          {{
+            t('reports.spend.tokens', {
+              input: formatTokens(row.inputTokens),
+              output: formatTokens(row.outputTokens),
+            })
+          }}
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>

package/app/components/panels/inspector/ServiceTestConfig.vue

@@ -104,6 +104,7 @@ const PROVISION_TYPES = computed<{ value: ProvisionType; label: string }[]>(() =
   { value: 'infraless', label: t('inspector.testConfig.provisionTypes.infraless') },
   { value: 'docker-compose', label: t('inspector.testConfig.provisionTypes.docker-compose') },
   { value: 'kubernetes', label: t('inspector.testConfig.provisionTypes.kubernetes') },
+  { value: 'cloudflare', label: t('inspector.testConfig.provisionTypes.cloudflare') },
   { value: 'custom', label: t('inspector.testConfig.provisionTypes.custom') },
 ])
 
@@ -869,6 +870,14 @@ function setSize(value: InstanceSize) {
       </div>
     </div>
 
+    <!-- cloudflare: nothing to collect. Unlike compose (a path) or kubernetes (a manifest
+         source), the per-PR recipe lives in the target repository's own preview workflow, so
+         declaring the type IS the whole service-side configuration. Say so explicitly rather
+         than rendering an empty panel that reads like something failed to load. -->
+    <p v-if="provisionType === 'cloudflare'" class="text-[11px] text-slate-500">
+      {{ t('inspector.testConfig.cloudflareHint') }}
+    </p>
+
     <!-- custom: pin the custom manifest type this service produces (matched to a remote-custom
          handler the workspace configures). -->
     <div v-if="provisionType === 'custom'" class="space-y-2">

package/app/components/settings/CloudflareHandlerSection.vue

@@ -0,0 +1,319 @@
+<script setup lang="ts">
+// The `cloudflare` provision type's infra handler (the workspace "how"): the Cloudflare
+// account's workers.dev subdomain, the VCS API token, and the two name templates that are the
+// contract with the target repository's preview workflow.
+//
+// A SELF-CONTAINED section rather than another branch of InfraHandlersConfigurator: that file
+// already carries three provision types at ~600 lines, and a fourth inline would push it well
+// past the point where any single type is findable. It owns its own save/remove/test so the
+// configurator gains exactly one line.
+//
+// There is deliberately no per-user (local-mode) override here, unlike kubernetes: a Cloudflare
+// preview is built by CI and lives in the cloud, so "this machine only" has no meaning for it.
+import { computed, ref, watch } from 'vue'
+import type { InfraHandlerConfig } from '@cat-factory/contracts'
+
+type CloudflareHandlerConfig = Extract<InfraHandlerConfig, { engine: 'cloudflare' }>
+type CloudflareConfig = CloudflareHandlerConfig['cloudflare']
+
+const { t } = useI18n()
+const infra = useInfraConfigStore()
+const toast = useToast()
+const { confirmAction } = useConfirmAction()
+
+const busy = ref(false)
+const testing = ref(false)
+const testResult = ref<{ ok: boolean; message?: string } | null>(null)
+const editing = ref(false)
+
+const handler = computed(() => infra.handlerFor('cloudflare') ?? null)
+
+// The form state. `label` is prefilled so an operator who fills in only the subdomain still
+// produces a valid config; the two templates are left EMPTY on purpose — blank means "use the
+// reference workflow's naming", and showing the defaults as placeholders rather than values
+// keeps an untouched handler from pinning a shape it never chose.
+const label = ref('Cloudflare Workers preview')
+const workersSubdomain = ref('')
+const repo = ref('')
+const apiBaseUrl = ref('')
+const workerNameTemplate = ref('')
+const environmentNameTemplate = ref('')
+const token = ref('')
+
+// Prefill from the saved handler whenever it (re)loads, so re-opening the form edits the
+// stored config instead of silently starting from blank and overwriting it on save. The token
+// is never echoed back by the API, so it stays empty — see `secretsForSave`.
+watch(
+  handler,
+  (h) => {
+    const cfg = (h?.config as CloudflareHandlerConfig | undefined)?.cloudflare
+    if (!cfg) return
+    label.value = cfg.label
+    workersSubdomain.value = cfg.workersSubdomain
+    repo.value = cfg.repo ?? ''
+    apiBaseUrl.value = cfg.apiBaseUrl ?? ''
+    workerNameTemplate.value = cfg.workerNameTemplate ?? ''
+    environmentNameTemplate.value = cfg.environmentNameTemplate ?? ''
+  },
+  { immediate: true },
+)
+
+const canSave = computed(() => workersSubdomain.value.trim() !== '' && label.value.trim() !== '')
+
+function buildConfig(): CloudflareHandlerConfig {
+  const trimmed = (value: string) => value.trim()
+  const cloudflare: CloudflareConfig = {
+    label: trimmed(label.value),
+    workersSubdomain: trimmed(workersSubdomain.value),
+    // Every optional field is OMITTED when blank rather than sent as an empty string: the
+    // contract's optionals mean "fall back to the default", and an empty string would fail
+    // the schema's own minLength/regex checks instead.
+    ...(trimmed(repo.value) ? { repo: trimmed(repo.value) } : {}),
+    ...(trimmed(apiBaseUrl.value) ? { apiBaseUrl: trimmed(apiBaseUrl.value) } : {}),
+    ...(trimmed(workerNameTemplate.value)
+      ? { workerNameTemplate: trimmed(workerNameTemplate.value) }
+      : {}),
+    ...(trimmed(environmentNameTemplate.value)
+      ? { environmentNameTemplate: trimmed(environmentNameTemplate.value) }
+      : {}),
+  }
+  return { engine: 'cloudflare', cloudflare }
+}
+
+/**
+ * An UNTOUCHED token field on an already-connected handler sends no secret, so the stored one
+ * is kept. Sending `''` would clear it and leave the handler unable to authenticate.
+ */
+function secretsForSave(): Record<string, string> {
+  const value = token.value.trim()
+  return value ? { githubToken: value } : {}
+}
+
+async function save() {
+  if (!canSave.value) return
+  busy.value = true
+  try {
+    await infra.registerHandler({
+      provisionType: 'cloudflare',
+      config: buildConfig(),
+      secrets: secretsForSave(),
+    })
+    token.value = ''
+    editing.value = false
+    toast.add({
+      title: t('settings.infrastructure.handler.saved'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+  } catch (e) {
+    toast.add({
+      title: t('settings.infrastructure.handler.saveFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    busy.value = false
+  }
+}
+
+async function test() {
+  testing.value = true
+  testResult.value = null
+  try {
+    testResult.value = await infra.testHandler({
+      config: buildConfig(),
+      secrets: secretsForSave(),
+    })
+  } catch (e) {
+    testResult.value = { ok: false, message: e instanceof Error ? e.message : String(e) }
+  } finally {
+    testing.value = false
+  }
+}
+
+async function remove() {
+  if (!(await confirmAction('remove', t('settings.infrastructure.handler.cloudflareNoun')))) return
+  busy.value = true
+  try {
+    await infra.unregisterHandler('cloudflare')
+    toast.add({ title: t('settings.infrastructure.handler.removed'), icon: 'i-lucide-check' })
+  } catch (e) {
+    toast.add({
+      title: t('settings.infrastructure.handler.saveFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="space-y-2 rounded-lg border border-slate-700 bg-slate-900/40 p-3">
+    <h3 class="text-sm font-semibold text-slate-200">
+      {{ t('inspector.testConfig.provisionTypes.cloudflare') }}
+    </h3>
+    <p class="text-[11px] text-slate-400">
+      {{ t('settings.infrastructure.cloudflare.intro') }}
+    </p>
+
+    <div
+      v-if="handler && !editing"
+      class="space-y-2 rounded-md border border-emerald-500/30 bg-emerald-500/5 p-2.5"
+      data-testid="cloudflare-handler-connected"
+    >
+      <div class="flex items-start justify-between gap-2">
+        <UCheckbox
+          :model-value="true"
+          disabled
+          size="lg"
+          :label="t('settings.infrastructure.handler.connectionEstablished')"
+          :ui="{ label: 'text-[13px] font-semibold text-emerald-300' }"
+        />
+        <div class="flex items-center gap-1">
+          <UButton
+            icon="i-lucide-pencil"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            :disabled="busy"
+            :aria-label="t('common.edit')"
+            @click="editing = true"
+          />
+          <UButton
+            icon="i-lucide-trash-2"
+            color="error"
+            variant="ghost"
+            size="xs"
+            :disabled="busy"
+            :aria-label="t('settings.infrastructure.handler.disconnect')"
+            @click="remove"
+          />
+        </div>
+      </div>
+      <p class="pl-7 text-[11px] text-slate-300">
+        {{ t('settings.infrastructure.cloudflare.connectedAs', { subdomain: workersSubdomain }) }}
+      </p>
+    </div>
+
+    <div v-else class="space-y-2" data-testid="cloudflare-handler-form">
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('settings.infrastructure.cloudflare.label')
+        }}</label>
+        <UInput v-model="label" size="xs" />
+      </div>
+
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('settings.infrastructure.cloudflare.subdomain')
+        }}</label>
+        <UInput v-model="workersSubdomain" size="xs" placeholder="my-account" />
+        <p class="text-[11px] text-slate-500">
+          {{ t('settings.infrastructure.cloudflare.subdomainHint') }}
+        </p>
+      </div>
+
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('settings.infrastructure.cloudflare.token')
+        }}</label>
+        <UInput
+          v-model="token"
+          type="password"
+          size="xs"
+          :placeholder="
+            handler
+              ? t('settings.infrastructure.cloudflare.tokenKeep')
+              : t('settings.infrastructure.cloudflare.tokenPlaceholder')
+          "
+        />
+        <p class="text-[11px] text-slate-500">
+          {{ t('settings.infrastructure.cloudflare.tokenHint') }}
+        </p>
+      </div>
+
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('settings.infrastructure.cloudflare.repo')
+        }}</label>
+        <UInput v-model="repo" size="xs" placeholder="owner/repo" />
+        <p class="text-[11px] text-slate-500">
+          {{ t('settings.infrastructure.cloudflare.repoHint') }}
+        </p>
+      </div>
+
+      <details class="rounded-md border border-slate-700/70 p-2">
+        <summary class="cursor-pointer text-[11px] text-slate-400">
+          {{ t('settings.infrastructure.cloudflare.advanced') }}
+        </summary>
+        <div class="mt-2 space-y-2">
+          <div class="space-y-1">
+            <label class="text-[11px] text-slate-400">{{
+              t('settings.infrastructure.cloudflare.workerTemplate')
+            }}</label>
+            <!-- The placeholder is a FORMAT EXAMPLE containing vue-i18n metacharacters, so it
+                 stays inline rather than becoming a catalog key. -->
+            <UInput
+              v-model="workerNameTemplate"
+              size="xs"
+              placeholder="cat-factory-pr-{{pullNumber}}"
+            />
+          </div>
+          <div class="space-y-1">
+            <label class="text-[11px] text-slate-400">{{
+              t('settings.infrastructure.cloudflare.environmentTemplate')
+            }}</label>
+            <UInput v-model="environmentNameTemplate" size="xs" placeholder="pr-{{pullNumber}}" />
+          </div>
+          <p class="text-[11px] text-slate-500">
+            {{ t('settings.infrastructure.cloudflare.templateHint') }}
+          </p>
+          <div class="space-y-1">
+            <label class="text-[11px] text-slate-400">{{
+              t('settings.infrastructure.cloudflare.apiBaseUrl')
+            }}</label>
+            <UInput v-model="apiBaseUrl" size="xs" placeholder="https://api.github.com" />
+          </div>
+        </div>
+      </details>
+
+      <div class="flex items-center gap-2">
+        <UButton size="xs" :disabled="!canSave || busy" @click="save">
+          {{ t('common.save') }}
+        </UButton>
+        <UButton
+          size="xs"
+          color="neutral"
+          variant="subtle"
+          :disabled="!canSave || testing"
+          :loading="testing"
+          @click="test"
+        >
+          {{ t('settings.providerConnection.test.button') }}
+        </UButton>
+        <UButton
+          v-if="handler"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          :disabled="busy"
+          @click="editing = false"
+        >
+          {{ t('common.cancel') }}
+        </UButton>
+      </div>
+
+      <p
+        v-if="testResult"
+        class="text-[11px]"
+        :class="testResult.ok ? 'text-emerald-300' : 'text-rose-300'"
+      >
+        {{ testResult.message }}
+      </p>
+    </div>
+  </section>
+</template>

package/app/components/settings/InfraHandlersConfigurator.vue

@@ -6,6 +6,8 @@
 //                      service-owned, configured on the service).
 //   - docker-compose → handled by the runtime's local Docker capability — informational, no
 //                      connection (a DinD-capable runner stands the service's compose stack up).
+//   - cloudflare     → the built-in per-PR Cloudflare Workers preview, driven over the VCS
+//                      deployments API. Its whole section lives in CloudflareHandlerSection.vue.
 //   - custom         → the custom-manifest-type catalog editor + a `remote-custom` HTTP handler
 //                      per custom type (matched to a service's pinned `manifestId`).
 // In LOCAL mode each handler additionally offers a per-USER override (this-machine only),
@@ -25,6 +27,7 @@ type RemoteCustomConfig = Extract<InfraHandlerConfig, { engine: 'remote-custom'
 import KubernetesEngineForm from '~/components/settings/KubernetesEngineForm.vue'
 import ProviderManifestEditor from '~/components/settings/ProviderManifestEditor.vue'
 import CustomManifestTypeEditor from '~/components/settings/CustomManifestTypeEditor.vue'
+import CloudflareHandlerSection from '~/components/settings/CloudflareHandlerSection.vue'
 
 const { t } = useI18n()
 const infra = useInfraConfigStore()
@@ -542,6 +545,10 @@ function notifyError(e: unknown) {
       <p class="text-[12px] text-slate-400">{{ t('settings.infrastructure.dockerComposeInfo') }}</p>
     </section>
 
+    <!-- cloudflare: a self-contained section (see the component's own note on why it is not
+         another branch here). -->
+    <CloudflareHandlerSection />
+
     <!-- custom: the catalog editor + a remote-custom HTTP handler per custom type. -->
     <section class="space-y-3 rounded-lg border border-slate-700 bg-slate-900/40 p-3">
       <h3 class="text-sm font-semibold text-slate-200">

package/app/composables/api/reports.ts

@@ -0,0 +1,19 @@
+import { getReportsContract } from '@cat-factory/contracts'
+import type { ReportWindow } from '~/types/execution'
+import type { ApiContext } from './context'
+
+/**
+ * Reports: cross-cutting usage analytics for an account over a time window
+ * (admin-gated). The sibling of `platformObservabilityApi` — same account scope,
+ * a different question ("where did the spend and the work go" vs "is it healthy").
+ * `workspaceId` narrows every breakdown to one board.
+ */
+export function reportsApi({ send }: ApiContext) {
+  return {
+    getReports: (accountId: string, window: ReportWindow, workspaceId?: string | null) =>
+      send(getReportsContract, {
+        pathParams: { accountId },
+        queryParams: { window, ...(workspaceId ? { workspaceId } : {}) },
+      }),
+  }
+}

package/app/composables/useApi.ts

@@ -3,6 +3,7 @@ import { createApiClient, createSend, createSendWith } from './api/client'
 import type { ApiContext } from './api/context'
 import { accountsApi } from './api/accounts'
 import { platformObservabilityApi } from './api/platformObservability'
+import { reportsApi } from './api/reports'
 import { authApi } from './api/auth'
 import { bootstrapApi } from './api/bootstrap'
 import { boardApi } from './api/board'
@@ -112,6 +113,7 @@ export function useApi() {
     ...modelsApi(ctx),
     ...accountsApi(ctx),
     ...platformObservabilityApi(ctx),
+    ...reportsApi(ctx),
     ...workspacesApi(ctx),
     ...boardApi(ctx),
     ...executionApi(ctx),

package/app/composables/useNavContributions.ts

@@ -45,6 +45,7 @@ export function useNavContributions() {
     localModels: () => ui.openLocalModels(),
     accountSettings: () => ui.openAccountSettings(),
     operatorDashboard: () => ui.openOperatorDashboard(),
+    reports: () => ui.openReports(),
     shortcuts: () => ui.openShortcutsHelp(),
   }
 

package/app/composables/useWorkspaceStream.ts

@@ -1,5 +1,6 @@
 import { ref, onScopeDispose } from 'vue'
 import type { WorkspaceEvent } from '~/types/domain'
+import { wsOriginFor } from '~/utils/apiOrigin'
 
 /**
  * Subscribes to the backend's per-workspace WebSocket event stream and keeps the
@@ -50,8 +51,10 @@ export function useWorkspaceStream() {
   let reconnectTimer: ReturnType<typeof setTimeout> | null = null
   let boardDebounce: ReturnType<typeof setTimeout> | null = null
 
-  // http→ws, https→wss (apiBase is an absolute origin, see nuxt.config.ts).
-  const wsBase = String(apiBase).replace(/^http/, 'ws')
+  // http→ws, https→wss. `apiBase` is an absolute origin on a split-origin deployment (see
+  // nuxt.config.ts) and EMPTY on a same-origin one (one proxy in front of the SPA + the API —
+  // the compose preview stack), where the socket origin comes from the page instead.
+  const wsBase = wsOriginFor(String(apiBase), import.meta.client ? window.location.origin : '')
 
   // A coarse board refresh (the resync on reconnect, and the `board` event fan-out) must not be
   // left silently stale by ONE transient failure: retry a few times with backoff so a blip

package/app/modular/nav-contributions.spec.ts

@@ -166,6 +166,7 @@ describe('nav grouping helpers', () => {
       'model-config',
       'account-settings',
       'operator-dashboard',
+      'reports',
     ])
   })
 

package/app/modular/nav-contributions.ts

@@ -96,6 +96,7 @@ export const NAV_ACTIONS = [
   'localModels',
   'accountSettings',
   'operatorDashboard',
+  'reports',
   'shortcuts',
 ] as const
 
@@ -354,6 +355,16 @@ export const NAV_CONTRIBUTIONS: readonly NavContribution[] = [
     testId: 'nav-operator-dashboard',
     sidebar: { group: 'configuration', order: 40 },
   },
+  {
+    id: 'reports',
+    labelKey: 'nav.reports',
+    icon: 'i-lucide-chart-column',
+    surfaces: S('sidebar'),
+    gate: (g) => g.accountsEnabled && g.isAccountAdmin,
+    action: 'reports',
+    testId: 'nav-reports',
+    sidebar: { group: 'configuration', order: 45 },
+  },
   {
     id: 'keyboard-shortcuts',
     labelKey: 'layout.commandBar.cmd.shortcuts',

package/app/pages/index.vue

@@ -35,6 +35,7 @@ const ObservabilityPanel = defineAsyncComponent(
 const OperatorDashboardPanel = defineAsyncComponent(
   () => import('~/components/panels/OperatorDashboardPanel.vue'),
 )
+const ReportsPanel = defineAsyncComponent(() => import('~/components/panels/ReportsPanel.vue'))
 const KaizenPanel = defineAsyncComponent(() => import('~/components/kaizen/KaizenPanel.vue'))
 // Occasional, externally store-gated surfaces — deferred to their own chunks like the
 // sibling document modals above. Each mounts only while its ui open-flag is set, so it
@@ -400,6 +401,7 @@ watch(
       <RecurringPipelineModal v-if="ui.addRecurringFrameId" />
       <ObservabilityPanel v-if="ui.observabilityInstanceId" />
       <OperatorDashboardPanel v-if="ui.operatorDashboardOpen" />
+      <ReportsPanel v-if="ui.reportsOpen" />
       <KaizenPanel v-if="ui.kaizenScreenOpen" />
       <DocumentSourceConnectModal v-if="ui.documentConnect" />
       <DocumentImportModal v-if="ui.documentImport" />

package/app/stores/providerConnections.ts

@@ -20,6 +20,7 @@ const BUILTIN_BACKEND_KINDS: Record<ProviderConnectionKind, BackendKindOption[]>
   environment: [
     { kind: 'manifest', label: 'HTTP manifest', engines: ['remote-custom'] },
     { kind: 'kubernetes', label: 'Kubernetes', engines: ['local-k3s', 'remote-kubernetes'] },
+    { kind: 'cloudflare', label: 'Cloudflare Workers', engines: ['cloudflare'] },
   ],
   'runner-pool': [
     { kind: 'manifest', label: 'HTTP manifest pool' },