@cat-factory/app 0.161.0 → 0.162.1

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/useStepApproval.ts

@@ -100,14 +100,15 @@ export function useStepApproval(opts: {
     () => !!feedback.value.trim() || reviewComments.value.length > 0,
   )
 
-  // Plain approve: accept the agent's proposal verbatim and advance.
+  // Plain approve: accept the agent's proposal verbatim and advance. Every action below
+  // closes the overlay ONLY when the command actually ran — a server refusal (surfaced as
+  // a toast by the store) or a cancelled credential prompt keeps the review open.
   async function approve() {
     const id = opts.approvalId()
     if (!opts.instanceId() || !id || submitting.value) return
     submitting.value = true
     try {
-      await execution.approveStep(opts.instanceId()!, id)
-      opts.close()
+      if (await execution.approveStep(opts.instanceId()!, id)) opts.close()
     } finally {
       submitting.value = false
     }
@@ -130,8 +131,7 @@ export function useStepApproval(opts: {
     if (!opts.instanceId() || !id || submitting.value) return
     submitting.value = true
     try {
-      await execution.approveStep(opts.instanceId()!, id, draftProposal.value)
-      opts.close()
+      if (await execution.approveStep(opts.instanceId()!, id, draftProposal.value)) opts.close()
     } finally {
       submitting.value = false
     }
@@ -141,7 +141,7 @@ export function useStepApproval(opts: {
     if (!opts.instanceId() || !id || submitting.value || !canRequestChanges.value) return
     submitting.value = true
     try {
-      await execution.requestStepChanges(opts.instanceId()!, id, {
+      const ok = await execution.requestStepChanges(opts.instanceId()!, id, {
         feedback: feedback.value.trim() || undefined,
         comments: reviewComments.value.length
           ? reviewComments.value.map((c) => ({
@@ -152,7 +152,7 @@ export function useStepApproval(opts: {
             }))
           : undefined,
       })
-      opts.close()
+      if (ok) opts.close()
     } finally {
       submitting.value = false
     }
@@ -168,8 +168,9 @@ export function useStepApproval(opts: {
     if (!opts.instanceId() || !id || submitting.value) return
     submitting.value = true
     try {
-      await execution.rejectStep(opts.instanceId()!, id, feedback.value.trim() || undefined)
-      opts.close()
+      if (await execution.rejectStep(opts.instanceId()!, id, feedback.value.trim() || undefined)) {
+        opts.close()
+      }
     } finally {
       submitting.value = false
       rejectArmed.value = false

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/execution/commands.ts

@@ -69,35 +69,66 @@ export function createExecutionCommands(ctx: ExecutionCommandContext) {
     })
   }
 
-  /** Approve a step's gated proposal (optionally edited); the run advances. */
-  async function approveStep(instanceId: string, approvalId: string, proposal?: string) {
+  /**
+   * Approve a step's gated proposal (optionally edited); the run advances. Returns false —
+   * with the failure surfaced as an actionable toast — when the server refused (e.g. a 409
+   * for a park a dedicated window owns) or the user cancelled the credential prompt, so the
+   * approval rail can stay open instead of closing over a silently-failed approve.
+   */
+  async function approveStep(
+    instanceId: string,
+    approvalId: string,
+    proposal?: string,
+  ): Promise<boolean> {
     const ws = useWorkspaceStore()
     const personal = usePersonalSubscriptionsStore()
-    return await personal.withCredential(async (password) => {
-      await api.approveStep(ws.requireId(), instanceId, approvalId, { proposal }, password)
-      await ws.refresh()
-    })
+    try {
+      return await personal.withCredential(async (password) => {
+        await api.approveStep(ws.requireId(), instanceId, approvalId, { proposal }, password)
+        await ws.refresh()
+      })
+    } catch (e) {
+      runErrors.present(e, 'errors.action.approveFailed')
+      return false
+    }
   }
 
-  /** Request changes on a gated proposal; the step re-runs with the review. */
+  /** Request changes on a gated proposal; the step re-runs with the review. Returns false
+   *  (with a toast) on refusal / a cancelled credential prompt, like {@link approveStep}. */
   async function requestStepChanges(
     instanceId: string,
     approvalId: string,
     review: RequestStepChangesInput,
-  ) {
+  ): Promise<boolean> {
     const ws = useWorkspaceStore()
     const personal = usePersonalSubscriptionsStore()
-    return await personal.withCredential(async (password) => {
-      await api.requestStepChanges(ws.requireId(), instanceId, approvalId, review, password)
-      await ws.refresh()
-    })
+    try {
+      return await personal.withCredential(async (password) => {
+        await api.requestStepChanges(ws.requireId(), instanceId, approvalId, review, password)
+        await ws.refresh()
+      })
+    } catch (e) {
+      runErrors.present(e, 'errors.action.requestChangesFailed')
+      return false
+    }
   }
 
-  /** Reject a gated proposal; the run stops entirely (a retryable failure). */
-  async function rejectStep(instanceId: string, approvalId: string, reason?: string) {
+  /** Reject a gated proposal; the run stops entirely (a retryable failure). Returns false
+   *  (with a toast) when the server refused. */
+  async function rejectStep(
+    instanceId: string,
+    approvalId: string,
+    reason?: string,
+  ): Promise<boolean> {
     const ws = useWorkspaceStore()
-    await api.rejectStep(ws.requireId(), instanceId, approvalId, { reason })
-    await ws.refresh()
+    try {
+      await api.rejectStep(ws.requireId(), instanceId, approvalId, { reason })
+      await ws.refresh()
+      return true
+    } catch (e) {
+      runErrors.present(e, 'errors.action.rejectFailed')
+      return false
+    }
   }
 
   /**

package/app/stores/reports.spec.ts

@@ -0,0 +1,113 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { useAccountsStore } from '~/stores/accounts'
+import { useReportsStore } from '~/stores/reports'
+import type { ReportsView } from '~/types/execution'
+
+// The reports view is loaded three ways that can each be triggered while another is still in
+// flight — the window buttons, the board filter and the refresh button — so the store's
+// monotonicity guard is the thing that keeps the panel from showing numbers for a window the
+// user already left. These drive that race directly.
+
+/** Minimal projection — only what the store stores and these assertions read. */
+function view(over: Partial<ReportsView> = {}): ReportsView {
+  return {
+    window: '7d',
+    generatedAt: 1_000,
+    since: 0,
+    workspaceId: null,
+    currency: 'EUR',
+    totals: { inputTokens: 0, outputTokens: 0, calls: 0, meteredCost: 0, subscriptionCost: 0 },
+    spend: { byModel: [], byAgentKind: [], byWorkspace: [], byService: [], byTaskType: [] },
+    activity: { byWorkspace: [], byService: [], byTaskType: [] },
+    trend: { bucketMs: 1_000, points: [] },
+    ...over,
+  } as ReportsView
+}
+
+/** Seed an active account, since every load is scoped to one. */
+function seedAccount() {
+  const accounts = useAccountsStore()
+  accounts.accounts = [
+    {
+      id: 'acc1',
+      type: 'org',
+      name: 'Acme',
+      githubAccountLogin: null,
+      createdAt: 0,
+      roles: null,
+    },
+  ] as never
+  accounts.activeAccountId = 'acc1'
+}
+
+describe('reports store — concurrent loads', () => {
+  beforeEach(() => {
+    seedAccount()
+  })
+
+  it('a stale load never overwrites a fresher one that already resolved', async () => {
+    // The user picks 24h, then immediately 90d. The 24h request is slower and lands LAST;
+    // committing it would leave the panel labelled 90d while showing 24h numbers.
+    let resolveSlow!: (v: ReportsView) => void
+    const slow = new Promise<ReportsView>((res) => {
+      resolveSlow = res
+    })
+    const responses: Record<string, Promise<ReportsView>> = {
+      '24h': slow,
+      '90d': Promise.resolve(view({ window: '90d', totals: { ...view().totals, calls: 42 } })),
+    }
+    vi.stubGlobal('useApi', () => ({
+      getReports: (_id: string, window: string) => responses[window]!,
+    }))
+    const store = useReportsStore()
+
+    const first = store.setWindow('24h')
+    const second = store.setWindow('90d')
+    await second
+    resolveSlow(view({ window: '24h', totals: { ...view().totals, calls: 7 } }))
+    await first
+
+    expect(store.view?.window).toBe('90d')
+    expect(store.view?.totals.calls).toBe(42)
+    // The superseded load must not resurrect the spinner it started either.
+    expect(store.loading).toBe(false)
+  })
+
+  it('a superseded FAILURE never replaces the newer view with an error', async () => {
+    // The same race the other way round: an in-flight load rejects after a later
+    // one succeeded. Committing it would blank a perfectly good panel.
+    let rejectSlow!: (e: Error) => void
+    const slow = new Promise<ReportsView>((_res, rej) => {
+      rejectSlow = rej
+    })
+    const responses: Record<string, Promise<ReportsView>> = {
+      '24h': slow,
+      '90d': Promise.resolve(view({ window: '90d' })),
+    }
+    vi.stubGlobal('useApi', () => ({
+      getReports: (_id: string, window: string) => responses[window]!,
+    }))
+    const store = useReportsStore()
+
+    const first = store.setWindow('24h')
+    await store.setWindow('90d')
+    rejectSlow(new Error('gateway timeout'))
+    await first
+
+    expect(store.failed).toBe(false)
+    expect(store.error).toBeNull()
+    expect(store.view?.window).toBe('90d')
+  })
+
+  it('records a failure from the newest load, with the raw message as detail', async () => {
+    vi.stubGlobal('useApi', () => ({
+      getReports: () => Promise.reject(new Error('reports are not available')),
+    }))
+    const store = useReportsStore()
+    await store.load()
+    expect(store.failed).toBe(true)
+    // Raw backend prose only — the localized heading is the panel's job.
+    expect(store.error).toBe('reports are not available')
+    expect(store.loading).toBe(false)
+  })
+})

package/app/stores/reports.ts

@@ -0,0 +1,91 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import type { ReportWindow, ReportsView } from '~/types/execution'
+import { useAccountsStore } from '~/stores/accounts'
+
+/**
+ * Reports: cross-cutting usage analytics for the active account — spend per model and
+ * agent kind, spend + run activity per workspace / service / task type, and a spend trend,
+ * over a selectable window and optionally narrowed to one board.
+ *
+ * The sibling of the `platformObservability` store: same account scope, same admin gate,
+ * same on-demand load. Nothing is pushed live (these are periodic rollups); changing the
+ * window or the board filter re-fetches, and a manual refresh re-fetches unconditionally.
+ */
+export const useReportsStore = defineStore('reports', () => {
+  const api = useApi()
+  const accounts = useAccountsStore()
+
+  const window = ref<ReportWindow>('7d')
+  /** The single board every breakdown is narrowed to, or null for the whole account. */
+  const workspaceFilter = ref<string | null>(null)
+  const view = ref<ReportsView | null>(null)
+  const loading = ref(false)
+  /** Whether the last load failed. The panel owns the localized wording. */
+  const failed = ref(false)
+  /**
+   * The backend's raw (untranslated) message for a failed load, shown beneath the localized
+   * heading as a last-resort detail — null when the failure carried no message at all.
+   */
+  const error = ref<string | null>(null)
+
+  const accountId = computed(() => accounts.activeAccount?.id ?? null)
+
+  /**
+   * Monotonicity guard. The window buttons, the board filter and the refresh button can each
+   * start a load, so two are easily in flight at once — and without this a staler response
+   * resolving later would overwrite the newer view (and its `loading`/error state) with
+   * numbers for a window the user already moved off. Only the newest load may commit.
+   */
+  let latest = 0
+
+  async function load() {
+    const id = accountId.value
+    if (!id) {
+      view.value = null
+      return
+    }
+    const seq = ++latest
+    loading.value = true
+    failed.value = false
+    error.value = null
+    try {
+      const next = await api.getReports(id, window.value, workspaceFilter.value)
+      if (seq !== latest) return
+      view.value = next
+    } catch (err) {
+      if (seq !== latest) return
+      failed.value = true
+      error.value = err instanceof Error ? err.message : null
+    } finally {
+      if (seq === latest) loading.value = false
+    }
+  }
+
+  /** Switch the window and reload (a no-op when it is already the loaded one). */
+  async function setWindow(next: ReportWindow) {
+    if (next === window.value && view.value) return
+    window.value = next
+    await load()
+  }
+
+  /** Narrow to one board (null = the whole account) and reload. */
+  async function setWorkspaceFilter(next: string | null) {
+    if (next === workspaceFilter.value && view.value) return
+    workspaceFilter.value = next
+    await load()
+  }
+
+  return {
+    window,
+    workspaceFilter,
+    view,
+    loading,
+    failed,
+    error,
+    accountId,
+    load,
+    setWindow,
+    setWorkspaceFilter,
+  }
+})

package/app/stores/ui/modals.ts

@@ -440,6 +440,10 @@ function createIntegrationPanelModals(resetHubReturn: ResetHubReturn) {
   // from `observabilityConnectionOpen` (the Datadog connection) AND `observabilityInstanceId`
   // (the per-run LLM call panel).
   const operatorDashboardOpen = ref(false)
+  // Reports: the cross-cutting usage-analytics panel over the same account scope (spend per
+  // model / agent kind, spend + activity per workspace / service / task type). Admin-gated.
+  // Distinct from `operatorDashboardOpen`, which answers the deployment-HEALTH question.
+  const reportsOpen = ref(false)
   // Private package registries: the workspace's npm/GitHub-Packages entries agent
   // containers install with. Opened from the Integrations hub.
   const packageRegistriesOpen = ref(false)
@@ -486,6 +490,13 @@ function createIntegrationPanelModals(resetHubReturn: ResetHubReturn) {
   function closeOperatorDashboard() {
     operatorDashboardOpen.value = false
   }
+  function openReports() {
+    resetHubReturn()
+    reportsOpen.value = true
+  }
+  function closeReports() {
+    reportsOpen.value = false
+  }
   function openPackageRegistries() {
     resetHubReturn()
     packageRegistriesOpen.value = true
@@ -544,6 +555,7 @@ function createIntegrationPanelModals(resetHubReturn: ResetHubReturn) {
     slackOpen,
     observabilityConnectionOpen,
     operatorDashboardOpen,
+    reportsOpen,
     packageRegistriesOpen,
     apiTokensOpen,
     modelConfigOpen,
@@ -559,6 +571,8 @@ function createIntegrationPanelModals(resetHubReturn: ResetHubReturn) {
     openObservabilityConnection,
     closeObservabilityConnection,
     openOperatorDashboard,
+    openReports,
+    closeReports,
     closeOperatorDashboard,
     openPackageRegistries,
     closePackageRegistries,

package/app/stores/ui/resultViews.ts

@@ -1,6 +1,7 @@
 import { ref } from 'vue'
 import { useExecutionStore } from '~/stores/execution'
 import { agentKindMeta } from '~/utils/catalog'
+import { dedicatedParkView } from '~/utils/pipelineRender'
 
 /**
  * The step-inspection / result-view slice of the UI store: the dedicated result-view overlay
@@ -73,12 +74,15 @@ export function createUiResultViews() {
     // A step carrying a PR deep-review parks with BOTH a pending approval and
     // `prReview.status`, so the generic approval button funnels here; route it to the
     // findings-selection window regardless of catalog/manifest state (mirrors consensus).
+    // Likewise a coder parked on the implementation-fork choice or on undecided follow-up
+    // items: those parks ride `step.approval` too, but the generic approve resolver refuses
+    // them server-side, so the step must open the window that CAN resolve it.
     const view = step?.consensus?.enabled
       ? 'consensus-session'
       : step?.prReview
         ? 'pr-review'
         : step
-          ? agentKindMeta(step.agentKind).resultView
+          ? (dedicatedParkView(step) ?? agentKindMeta(step.agentKind).resultView)
           : undefined
     if (view && instance) {
       // The brainstorm window is shared by both stages; carry which one from the step's kind.

package/app/types/execution.ts

@@ -30,6 +30,14 @@ export type {
   PlatformOutcomeTotals,
   PlatformTrendPoint,
   PlatformFailureSlice,
+  ReportWindow,
+  ReportSpendDimension,
+  ReportActivityDimension,
+  ReportSpendRow,
+  ReportActivityRow,
+  ReportTrendPoint,
+  ReportTotals,
+  ReportsView,
   AgentSearchQuery,
   WebSearchAvailability,
   WebSearchProvider,

package/app/utils/pipelineRender.spec.ts

@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest'
+import type { PipelineStep } from '~/types/execution'
+import { dedicatedParkView } from './pipelineRender'
+
+/** A minimal coder step; the predicate only reads approval/followUps/forkDecision. */
+const step = (over: Partial<PipelineStep>): PipelineStep =>
+  ({
+    agentKind: 'coder',
+    state: 'waiting_decision',
+    approval: { id: 'ap_1', status: 'pending', proposal: '' },
+    ...over,
+  }) as PipelineStep
+
+const followUps = (statuses: string[]) => ({
+  enabled: true,
+  items: statuses.map((status, i) => ({
+    id: `fu_${i}`,
+    kind: 'follow_up',
+    title: 't',
+    detail: '',
+    status,
+    createdAt: 0,
+    updatedAt: 0,
+  })),
+  loops: 0,
+})
+
+describe('dedicatedParkView', () => {
+  // The regression this pins: a coder parked on the follow-up gate (or the fork choice)
+  // carries a pending `step.approval`, but the generic approve resolver 409s on it — the
+  // surfaces must route these parks to their dedicated window, never the "Approve &
+  // proceed" rail.
+  it('owns a follow-up park (pending approval + undecided items)', () => {
+    expect(
+      dedicatedParkView(step({ followUps: followUps(['pending', 'answered']) as never })),
+    ).toBe('follow-ups')
+  })
+
+  it('does not claim a step whose follow-up items are all decided', () => {
+    expect(
+      dedicatedParkView(step({ followUps: followUps(['answered', 'dismissed']) as never })),
+    ).toBeNull()
+  })
+
+  it('does not claim a WORKING coder that is still streaming items (no approval raised)', () => {
+    // Clicking a live step must keep opening the ordinary detail (progress + output).
+    expect(
+      dedicatedParkView(
+        step({ state: 'working', approval: null, followUps: followUps(['pending']) as never }),
+      ),
+    ).toBeNull()
+  })
+
+  it('owns the fork park while awaiting a choice, and while a chat reply is in flight', () => {
+    expect(dedicatedParkView(step({ forkDecision: { status: 'awaiting_choice' } as never }))).toBe(
+      'fork-decision',
+    )
+    expect(dedicatedParkView(step({ forkDecision: { status: 'answering' } as never }))).toBe(
+      'fork-decision',
+    )
+  })
+
+  it('releases the step once the fork is resolved (chosen / single_path / skipped)', () => {
+    for (const status of ['chosen', 'single_path', 'skipped', 'proposing']) {
+      expect(dedicatedParkView(step({ forkDecision: { status } as never }))).toBeNull()
+    }
+  })
+
+  it('leaves a plain approval park to the generic rail', () => {
+    expect(dedicatedParkView(step({}))).toBeNull()
+  })
+})

package/app/utils/pipelineRender.ts

@@ -133,6 +133,32 @@ export function isCompanionKind(kind: string): boolean {
   )
 }
 
+/**
+ * The dedicated window that owns a step's approval park, when the park is NOT a generic
+ * prose approval: the implementation-fork window while a coder waits on (or chats about)
+ * an approach choice, or the follow-up triage window while surfaced items are undecided.
+ * The generic approve/request-changes/reject resolvers deliberately refuse these parks
+ * server-side (`assertNotIterativeGate`), so every surface that offers a step's pending
+ * approval must route these to their window instead of the generic "Approve & proceed"
+ * rail — which would blink a 409 and resolve nothing.
+ */
+export function dedicatedParkView(step: PipelineStep): 'follow-ups' | 'fork-decision' | null {
+  // The fork park sits BEFORE the coder's build dispatch; `answering` (a chat turn in
+  // flight) still belongs to the fork window, which renders the pending reply.
+  const fork = step.forkDecision?.status
+  if (fork === 'awaiting_choice' || fork === 'answering') return 'fork-decision'
+  // Follow-ups only own the park itself: while the coder is still WORKING (streaming
+  // items, no approval raised) a step click should keep opening the ordinary detail.
+  if (
+    step.approval?.status === 'pending' &&
+    step.followUps?.enabled &&
+    step.followUps.items.some((i) => i.status === 'pending')
+  ) {
+    return 'follow-ups'
+  }
+  return null
+}
+
 /**
  * The friendly label for a container's live phase (clone → "Preparing workspace",
  * agent → "Agent running", …), falling back to the raw phase string for an unknown/new