@cat-factory/app 0.161.0 → 0.162.1

package/app/components/panels/AgentStepDetail.vue

@@ -15,6 +15,7 @@ import StepExecutionHistory from '~/components/board/StepExecutionHistory.vue'
 import { useStepTimer } from '~/composables/useStepTimer'
 import { useStepProse } from '~/composables/useStepProse'
 import { useStepApproval } from '~/composables/useStepApproval'
+import { dedicatedParkView } from '~/utils/pipelineRender'
 
 // Detail overlay for a single pipeline step. Opened by clicking an agent in the
 // inspector list (TaskExecution) or the focus-view pipeline (PipelineProgress) via
@@ -151,6 +152,25 @@ const approvalId = computed(() => step.value?.approval?.id ?? null)
 // approve/request-changes/reject rail, it shows the shared iteration-cap prompt
 // (one more round / proceed / stop & reset), resolved through its own endpoint.
 const companionExceeded = computed(() => approvalPending.value && !!step.value?.companion?.exceeded)
+// A park a DEDICATED window owns (fork choice / follow-up triage): the generic approve
+// resolver refuses these server-side, so the rail is replaced by a redirect to that window.
+// Computed live, since a coder step can park on one WHILE this overlay is already open
+// (the routing in `dispatchStepView` only covers the open click).
+const dedicatedPark = computed(() => (step.value ? dedicatedParkView(step.value) : null))
+/** The generic approve/request-changes/reject rail applies (no dedicated surface owns the park). */
+const genericApprovalPending = computed(
+  () => approvalPending.value && !companionExceeded.value && !dedicatedPark.value,
+)
+
+/** Jump from this overlay to the window that can actually resolve the dedicated park. */
+function openDedicatedWindow() {
+  const c = ctx.value
+  const park = dedicatedPark.value
+  if (!c || !park) return
+  close()
+  if (park === 'follow-ups') ui.openFollowUps(c.instanceId, c.stepIndex)
+  else ui.openForkDecision(c.instanceId, c.stepIndex)
+}
 
 function close() {
   // Reset the approval-mode sub-states so reopening the same step is clean
@@ -159,13 +179,14 @@ function close() {
   ui.closeStepDetail()
 }
 
-// The GitHub-style approval/review state machine for a pending gate step.
+// The GitHub-style approval/review state machine for a pending gate step. A park a
+// dedicated window owns is NOT reviewable here, so it doesn't count as pending.
 const approval = useStepApproval({
   step: () => step.value,
   scrollEl: () => scrollEl.value,
   instanceId: () => ctx.value?.instanceId,
   approvalId: () => approvalId.value,
-  approvalPending: () => approvalPending.value,
+  approvalPending: () => approvalPending.value && !dedicatedPark.value,
   companionExceeded: () => companionExceeded.value,
   close,
 })
@@ -292,7 +313,7 @@ async function copyOutput() {
             </div>
             <div class="ms-auto flex items-center gap-1.5">
               <UBadge
-                v-if="approvalPending && !companionExceeded"
+                v-if="genericApprovalPending"
                 color="warning"
                 variant="subtle"
                 size="sm"
@@ -302,7 +323,7 @@ async function copyOutput() {
                 {{ t('panels.stepDetail.approvalRequired') }}
               </UBadge>
               <UBadge
-                v-else-if="companionExceeded"
+                v-else-if="companionExceeded || dedicatedPark"
                 color="warning"
                 variant="subtle"
                 size="sm"
@@ -396,6 +417,37 @@ async function copyOutput() {
                 @resolve="resolveCompanionCap"
               />
 
+              <!-- a park a dedicated window owns (fork choice / follow-up triage): the
+                   generic approval rail can't resolve it (the server refuses), so point
+                   the human at the window that can -->
+              <div
+                v-if="dedicatedPark"
+                class="rounded-xl border border-amber-500/30 bg-amber-500/5 p-4"
+                data-testid="dedicated-park-redirect"
+              >
+                <p class="text-[13px] leading-relaxed text-amber-200/90">
+                  {{
+                    dedicatedPark === 'follow-ups'
+                      ? t('panels.stepDetail.followUpsParked')
+                      : t('panels.stepDetail.forkParked')
+                  }}
+                </p>
+                <UButton
+                  class="mt-3"
+                  color="primary"
+                  size="sm"
+                  :icon="dedicatedPark === 'follow-ups' ? 'i-lucide-compass' : 'i-lucide-git-fork'"
+                  data-testid="dedicated-park-open"
+                  @click="openDedicatedWindow"
+                >
+                  {{
+                    dedicatedPark === 'follow-ups'
+                      ? t('panels.stepDetail.openFollowUps')
+                      : t('panels.stepDetail.chooseApproach')
+                  }}
+                </UButton>
+              </div>
+
               <!-- ephemeral environment lifecycle (spinning up / running / shut down /
                    errored + the exact error), when this step runs against one -->
               <EnvironmentStatusPanel v-if="stepEnvironment" :environment="stepEnvironment" />
@@ -545,7 +597,7 @@ async function copyOutput() {
                     class="reader-prose mt-1 text-[13px] leading-relaxed text-slate-300"
                     :class="[
                       s.depth > 0 ? 'ps-6' : '',
-                      approvalPending && !editing && !companionExceeded ? 'review-mode' : '',
+                      genericApprovalPending && !editing ? 'review-mode' : '',
                     ]"
                     @click="onProseClick"
                     v-html="s.bodyHtml"
@@ -567,7 +619,7 @@ async function copyOutput() {
              Approve / Request changes / Reject. A end-side rail on wide screens; a
              bottom sheet (still reachable) below lg, so the gate is always actionable. -->
         <aside
-          v-if="approvalPending && !companionExceeded"
+          v-if="genericApprovalPending"
           class="absolute inset-x-0 bottom-0 z-10 flex max-h-[70dvh] flex-col rounded-t-2xl border-t border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur lg:static lg:inset-auto lg:z-auto lg:max-h-none lg:w-96 lg:shrink-0 lg:rounded-none lg:border-s lg:border-t-0 lg:border-slate-800 lg:bg-slate-900/60 lg:shadow-none lg:backdrop-blur-none"
         >
           <div class="border-b border-slate-800 px-4 py-3">

package/app/components/panels/ReportsPanel.logic.spec.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest'
+import type { ReportActivityRow, ReportSpendRow } from '~/types/execution'
+import {
+  activitySegments,
+  columnPct,
+  isUnattributed,
+  maxOf,
+  segmentPct,
+  spendMagnitude,
+} from './ReportsPanel.logic'
+
+const spend = (over: Partial<ReportSpendRow>): ReportSpendRow => ({
+  key: 'k',
+  label: null,
+  inputTokens: 0,
+  outputTokens: 0,
+  calls: 0,
+  meteredCost: 0,
+  subscriptionCost: 0,
+  ...over,
+})
+
+describe('ReportsPanel logic', () => {
+  it('ranks a spend slice by its combined footprint', () => {
+    // Ranking/scaling only: the sum mixes real money with the illustrative cost of
+    // flat-rate quota usage, so no caller may render it as an amount. `ReportsSpendBreakdown`
+    // shows `meteredCost` and `subscriptionCost` as separate figures for exactly that reason.
+    expect(spendMagnitude(spend({ meteredCost: 2, subscriptionCost: 3 }))).toBe(5)
+  })
+
+  it('scales every segment against the widest row, not its own row', () => {
+    // A per-row denominator would draw both bars full-width and erase the ranking.
+    const rows = [spend({ meteredCost: 10 }), spend({ meteredCost: 2 })]
+    const max = maxOf(rows, spendMagnitude)
+    expect(segmentPct(rows[0]!.meteredCost, max)).toBe(100)
+    expect(segmentPct(rows[1]!.meteredCost, max)).toBe(20)
+  })
+
+  it('returns a zero max for an empty list and draws nothing from it', () => {
+    expect(maxOf([], spendMagnitude)).toBe(0)
+    expect(segmentPct(5, 0)).toBe(0)
+    expect(columnPct(5, 0)).toBe(0)
+  })
+
+  it('floors a non-zero column so a small bucket stays visible', () => {
+    // Without the floor a single cheap call rounds to an empty column and reads as a
+    // quiet period, which is the opposite of what happened.
+    expect(columnPct(0.001, 1000)).toBe(2)
+    expect(columnPct(0, 1000)).toBe(0)
+    expect(columnPct(500, 1000)).toBe(50)
+  })
+
+  it('treats the empty key as the unattributed bucket', () => {
+    expect(isUnattributed('')).toBe(true)
+    expect(isUnattributed('feature')).toBe(false)
+  })
+
+  it('lists activity status splits in the legend order', () => {
+    const row: ReportActivityRow = {
+      key: 'ws',
+      label: 'Board',
+      runs: 6,
+      done: 3,
+      failed: 2,
+      running: 1,
+      other: 0,
+      avgDurationMs: 100,
+    }
+    expect(activitySegments(row)).toEqual([
+      { status: 'done', count: 3 },
+      { status: 'failed', count: 2 },
+      { status: 'running', count: 1 },
+      { status: 'other', count: 0 },
+    ])
+  })
+})

package/app/components/panels/ReportsPanel.logic.ts

@@ -0,0 +1,71 @@
+import type { ReportActivityRow, ReportSpendRow, ReportTrendPoint } from '~/types/execution'
+
+// Pure sizing/derivation behind `ReportsPanel.vue`: everything the template needs that is
+// arithmetic rather than markup, so it is unit-tested directly instead of through the DOM.
+
+// The two `*Magnitude` helpers add the metered and subscription costs together, which is a
+// number NOBODY MAY RENDER AS MONEY: only `meteredCost` is real spend, and `subscriptionCost`
+// is the illustrative equivalent-API cost of flat-rate quota usage, so their sum denominates
+// nothing. They exist purely as the RANKING and BAR-SCALING measure — the one job the sum is
+// valid for, because it orders slices by total footprint exactly as the SQL `ORDER BY` does.
+// Anything shown to a reader with a currency symbol must come off one of the two fields.
+
+/** A spend slice's combined footprint. Ranking/scaling only — never a displayed amount. */
+export function spendMagnitude(row: ReportSpendRow): number {
+  return row.meteredCost + row.subscriptionCost
+}
+
+/** A trend bucket's combined footprint. Ranking/scaling only — never a displayed amount. */
+export function trendMagnitude(point: ReportTrendPoint): number {
+  return point.meteredCost + point.subscriptionCost
+}
+
+/**
+ * The heaviest value in a list, or 0 when empty. Bars are drawn RELATIVE to this, so a
+ * full bar means "the biggest slice here", never "all of some absolute quota".
+ */
+export function maxOf<T>(rows: T[], measure: (row: T) => number): number {
+  return rows.reduce((max, row) => Math.max(max, measure(row)), 0)
+}
+
+/**
+ * A segment's share of the widest row, as a percentage. Scaling every segment against the
+ * SAME denominator is what makes a stacked bar's total length comparable across rows; a
+ * per-row denominator would draw every bar full-width and destroy the ranking.
+ */
+export function segmentPct(value: number, max: number): number {
+  if (max <= 0 || value <= 0) return 0
+  return (value / max) * 100
+}
+
+/**
+ * A trend column's height as a percentage of the tallest column. A non-zero value floors at
+ * 2% so a single small call is still a visible mark rather than an apparent gap — the one
+ * thing a reader would otherwise misread as "nothing happened here".
+ */
+export function columnPct(value: number, max: number): number {
+  if (max <= 0 || value <= 0) return 0
+  return Math.max(2, (value / max) * 100)
+}
+
+/**
+ * Whether a breakdown key is the unattributed bucket. It is a REAL slice (a call whose run,
+ * service or task type could not be resolved), so it is rendered with an explicit label
+ * rather than silently dropped — omitting it would under-report the window while looking
+ * complete.
+ */
+export function isUnattributed(key: string): boolean {
+  return key === ''
+}
+
+/** Every status split of an activity row, in the fixed order the legend declares. */
+export function activitySegments(
+  row: ReportActivityRow,
+): Array<{ status: 'done' | 'failed' | 'running' | 'other'; count: number }> {
+  return [
+    { status: 'done', count: row.done },
+    { status: 'failed', count: row.failed },
+    { status: 'running', count: row.running },
+    { status: 'other', count: row.other },
+  ]
+}