@cat-factory/app 0.160.1 → 0.162.0

package/app/components/environments/EnvironmentStatusPanel.vue

@@ -16,6 +16,7 @@ const { t, d } = useI18n()
 const PROVISION_TYPE_KEYS: Record<ProvisionType, string> = {
   kubernetes: 'environments.provisionType.kubernetes',
   'docker-compose': 'environments.provisionType.docker-compose',
+  cloudflare: 'environments.provisionType.cloudflare',
   custom: 'environments.provisionType.custom',
   infraless: 'environments.provisionType.infraless',
 }
@@ -23,6 +24,7 @@ const ENGINE_KEYS: Record<InfraEngine, string> = {
   'local-docker': 'environments.engine.local-docker',
   'local-k3s': 'environments.engine.local-k3s',
   'remote-kubernetes': 'environments.engine.remote-kubernetes',
+  cloudflare: 'environments.engine.cloudflare',
   'remote-custom': 'environments.engine.remote-custom',
   none: 'environments.engine.none',
 }

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 },
+  ]
+}

package/app/components/panels/ReportsPanel.vue

@@ -0,0 +1,471 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { onKeyStroke } from '@vueuse/core'
+import type {
+  ReportActivityDimension,
+  ReportActivityRow,
+  ReportSpendRow,
+  ReportWindow,
+} from '~/types/execution'
+import { formatMs, formatTokens } from '~/utils/observability'
+import {
+  activitySegments,
+  columnPct,
+  isUnattributed,
+  maxOf,
+  segmentPct,
+  trendMagnitude,
+} from './ReportsPanel.logic'
+
+// Reports: cross-cutting usage analytics for the active account — where the spend and the
+// work actually go. 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. Admin-gated; opened via `ui.openReports()` from the sidebar. The sibling of
+// `OperatorDashboardPanel`, which answers the health question over the same account scope.
+//
+// Charting follows the panel-native idiom (Tailwind marks, no charting dependency), with
+// two deliberate encodings:
+//   - SPEND is two series — `violet-500` metered (real money) and `amber-600` subscription
+//     (the illustrative equivalent-API cost of flat-rate quota usage). The pair is validated
+//     colorblind-safe against the dark surface, and a legend is always present.
+//   - ACTIVITY uses the app's RESERVED status colors (emerald done / rose failed / sky
+//     running / slate other), which are red-green adjacent by design across the product.
+//     Every status is therefore ALSO carried as a number under its bar and named in the
+//     legend, so identity is never colour alone.
+const ui = useUiStore()
+const accounts = useAccountsStore()
+const workspace = useWorkspaceStore()
+const reports = useReportsStore()
+const { t, te, d, n } = useI18n()
+
+const open = computed(() => ui.reportsOpen)
+const view = computed(() => reports.view)
+const loading = computed(() => reports.loading)
+const failed = computed(() => reports.failed)
+/** The backend's untranslated message, shown as detail under the localized heading. */
+const error = computed(() => reports.error)
+const accountName = computed(() => accounts.activeAccount?.name ?? '')
+
+// Window options as static literal keys (keeps the typed-message-key check live).
+const WINDOWS: { value: ReportWindow; label: string }[] = [
+  { value: '24h', label: t('reports.window.oneDay') },
+  { value: '7d', label: t('reports.window.sevenDays') },
+  { value: '30d', label: t('reports.window.thirtyDays') },
+  { value: '90d', label: t('reports.window.ninetyDays') },
+]
+
+// The dimension the paired spend + activity breakdowns are grouped by. Model and agent
+// kind have no activity counterpart (a run carries no single kind), so they render
+// unconditionally above rather than joining this switch.
+const DIMENSIONS: { value: ReportActivityDimension; label: string }[] = [
+  { value: 'workspace', label: t('reports.dimension.workspace') },
+  { value: 'service', label: t('reports.dimension.service') },
+  { value: 'taskType', label: t('reports.dimension.taskType') },
+]
+const dimension = ref<ReportActivityDimension>('workspace')
+
+const currency = computed(() => view.value?.currency ?? 'EUR')
+const money = (value: number) => n(value, { key: 'currency', currency: currency.value })
+
+/** A slice's display name: the resolved label, the raw key, or the unattributed notice. */
+function sliceLabel(row: { key: string; label: string | null }): string {
+  if (isUnattributed(row.key)) return t('reports.unattributed')
+  return row.label ?? row.key
+}
+
+const spendByDimension = computed<ReportSpendRow[]>(() => {
+  const spend = view.value?.spend
+  if (!spend) return []
+  if (dimension.value === 'workspace') return spend.byWorkspace
+  if (dimension.value === 'service') return spend.byService
+  return spend.byTaskType
+})
+const activityByDimension = computed<ReportActivityRow[]>(() => {
+  const activity = view.value?.activity
+  if (!activity) return []
+  if (dimension.value === 'workspace') return activity.byWorkspace
+  if (dimension.value === 'service') return activity.byService
+  return activity.byTaskType
+})
+
+const maxTrend = computed(() => maxOf(view.value?.trend.points ?? [], trendMagnitude))
+const hasSpend = computed(() => (view.value?.totals.calls ?? 0) > 0)
+// Hoisted: every activity bar is scaled against the busiest slice in the SAME list, so this
+// is invariant across the row loop. Computing it inline would re-scan the list once per
+// status segment of every row.
+const maxRuns = computed(() => maxOf(activityByDimension.value, (row) => row.runs))
+
+/** Boards the filter offers — the active account's, since the report is account-scoped. */
+const boards = computed(() => workspace.accountWorkspaces)
+
+function trendTooltip(point: { start: number; meteredCost: number; subscriptionCost: number }) {
+  return `${d(new Date(point.start), 'short')} · ${t('reports.legend.metered')} ${money(point.meteredCost)} · ${t('reports.legend.subscription')} ${money(point.subscriptionCost)}`
+}
+
+// Exhaustive enum→key map (the tier-2 dynamic-key guard): a new activity status fails the
+// typecheck here rather than silently rendering a raw code.
+const STATUS_KEYS: Record<'done' | 'failed' | 'running' | 'other', string> = {
+  done: 'reports.status.done',
+  failed: 'reports.status.failed',
+  running: 'reports.status.running',
+  other: 'reports.status.other',
+}
+const STATUS_CLASSES: Record<'done' | 'failed' | 'running' | 'other', string> = {
+  done: 'bg-emerald-500',
+  failed: 'bg-rose-500',
+  running: 'bg-sky-500',
+  other: 'bg-slate-500',
+}
+/** `te`-guarded so a locale missing the key shows the raw status, never a raw message key. */
+function statusLabel(status: 'done' | 'failed' | 'running' | 'other'): string {
+  const key = STATUS_KEYS[status]
+  return te(key) ? t(key) : status
+}
+
+function refresh() {
+  void reports.load()
+}
+function close() {
+  ui.closeReports()
+}
+onKeyStroke('Escape', () => {
+  if (open.value) close()
+})
+
+// Load (and refresh) whenever the panel opens.
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) void reports.load()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="reports-fade">
+      <div
+        v-if="open"
+        class="fixed inset-0 z-[60] flex flex-col bg-slate-950/96 backdrop-blur-sm"
+        role="dialog"
+        aria-modal="true"
+        data-testid="reports-panel"
+      >
+        <header class="flex flex-wrap items-center gap-3 border-b border-slate-800 px-6 py-4">
+          <div
+            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-violet-500/15"
+          >
+            <UIcon name="i-lucide-chart-column" class="h-5 w-5 text-violet-400" />
+          </div>
+          <div class="min-w-0">
+            <h1 class="truncate text-base font-semibold text-white">{{ t('reports.title') }}</h1>
+            <p v-if="accountName" class="truncate text-xs text-slate-500">{{ accountName }}</p>
+          </div>
+          <!-- Filters in ONE row above the charts: window, then board scope. -->
+          <div class="ms-auto flex flex-wrap items-center gap-1.5">
+            <select
+              class="rounded-lg border border-slate-800 bg-slate-900 px-2.5 py-1.5 text-[12px] text-slate-200"
+              :value="reports.workspaceFilter ?? ''"
+              :aria-label="t('reports.filter.board')"
+              data-testid="reports-board-filter"
+              @change="
+                reports.setWorkspaceFilter(($event.target as HTMLSelectElement).value || null)
+              "
+            >
+              <option value="">{{ t('reports.filter.allBoards') }}</option>
+              <option v-for="board in boards" :key="board.id" :value="board.id">
+                {{ board.name }}
+              </option>
+            </select>
+            <div class="me-1 flex rounded-lg border border-slate-800 p-0.5 text-[12px]">
+              <button
+                v-for="opt in WINDOWS"
+                :key="opt.value"
+                class="rounded-md px-2.5 py-1 transition"
+                :class="
+                  reports.window === opt.value
+                    ? 'bg-slate-800 text-slate-100'
+                    : 'text-slate-400 hover:text-slate-200'
+                "
+                :data-testid="`reports-window-${opt.value}`"
+                @click="reports.setWindow(opt.value)"
+              >
+                {{ opt.label }}
+              </button>
+            </div>
+            <button
+              class="rounded-lg border border-slate-800 p-1.5 text-slate-400 transition hover:text-slate-200"
+              :aria-label="t('reports.refresh')"
+              :title="t('reports.refresh')"
+              @click="refresh"
+            >
+              <UIcon
+                name="i-lucide-refresh-cw"
+                class="h-4 w-4"
+                :class="{ 'animate-spin': loading }"
+              />
+            </button>
+            <button
+              class="rounded-lg border border-slate-800 p-1.5 text-slate-400 transition hover:text-slate-200"
+              :aria-label="t('common.close')"
+              @click="close"
+            >
+              <UIcon name="i-lucide-x" class="h-4 w-4" />
+            </button>
+          </div>
+        </header>
+
+        <div class="flex-1 overflow-y-auto px-6 py-5">
+          <div
+            v-if="failed"
+            class="mx-auto max-w-2xl rounded-lg border border-rose-800/60 bg-rose-950/40 p-4 text-sm text-rose-200"
+          >
+            <p>{{ t('reports.error') }}</p>
+            <p v-if="error" class="mt-1 text-xs text-rose-300/80">{{ error }}</p>
+            <button
+              class="mt-2 rounded-md border border-rose-700 px-3 py-1 text-xs hover:bg-rose-900/40"
+              @click="refresh"
+            >
+              {{ t('reports.retry') }}
+            </button>
+          </div>
+
+          <div v-else-if="loading && !view" class="py-16 text-center text-sm text-slate-400">
+            {{ t('reports.loading') }}
+          </div>
+
+          <div v-else-if="view" class="mx-auto flex max-w-5xl flex-col gap-6">
+            <p class="text-[11px] text-slate-500">
+              {{
+                t('reports.period', {
+                  from: d(new Date(view.since), 'short'),
+                  to: d(new Date(view.generatedAt), 'short'),
+                })
+              }}
+            </p>
+
+            <!-- Headline totals. A stat tile, not a chart: these are single numbers. -->
+            <section>
+              <h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
+                {{ t('reports.totals.title') }}
+              </h2>
+              <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+                <div class="rounded-lg border border-slate-800 bg-slate-900/40 p-3">
+                  <p class="text-2xl font-semibold text-violet-300" data-testid="reports-metered">
+                    {{ money(view.totals.meteredCost) }}
+                  </p>
+                  <p class="text-xs text-slate-500">{{ t('reports.totals.metered') }}</p>
+                </div>
+                <div class="rounded-lg border border-slate-800 bg-slate-900/40 p-3">
+                  <p class="text-2xl font-semibold text-amber-300">
+                    {{ money(view.totals.subscriptionCost) }}
+                  </p>
+                  <p class="text-xs text-slate-500">{{ t('reports.totals.subscription') }}</p>
+                </div>
+                <div class="rounded-lg border border-slate-800 bg-slate-900/40 p-3">
+                  <p class="text-2xl font-semibold text-white">
+                    {{ n(view.totals.calls, 'decimal') }}
+                  </p>
+                  <p class="text-xs text-slate-500">{{ t('reports.totals.calls') }}</p>
+                </div>
+                <div class="rounded-lg border border-slate-800 bg-slate-900/40 p-3">
+                  <p class="text-2xl font-semibold text-white">
+                    {{ formatTokens(view.totals.inputTokens + view.totals.outputTokens) }}
+                  </p>
+                  <p class="text-xs text-slate-500">{{ t('reports.totals.tokens') }}</p>
+                </div>
+              </div>
+              <p class="mt-1.5 text-[10px] text-slate-500">
+                {{ t('reports.totals.illustrative') }}
+              </p>
+            </section>
+
+            <!-- Spend over time. One axis, two stacked series, legend always present. -->
+            <section>
+              <h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
+                {{ t('reports.trend.title') }}
+              </h2>
+              <div class="rounded-lg border border-slate-800 bg-slate-900/40 p-4">
+                <div v-if="!hasSpend" class="py-6 text-center text-xs text-slate-500">
+                  {{ t('reports.trend.empty') }}
+                </div>
+                <div v-else class="flex h-28 items-end gap-0.5" data-testid="reports-trend">
+                  <div
+                    v-for="point in view.trend.points"
+                    :key="point.start"
+                    class="flex flex-1 flex-col justify-end gap-[2px]"
+                    :title="trendTooltip(point)"
+                  >
+                    <div
+                      class="w-full rounded-t-sm bg-amber-600"
+                      :style="{ height: `${columnPct(point.subscriptionCost, maxTrend)}%` }"
+                    />
+                    <div
+                      class="w-full rounded-sm bg-violet-500"
+                      :style="{ height: `${columnPct(point.meteredCost, maxTrend)}%` }"
+                    />
+                  </div>
+                </div>
+                <div class="mt-2 flex items-center gap-4 text-[11px] text-slate-500">
+                  <span class="flex items-center gap-1">
+                    <span class="h-2 w-2 rounded-sm bg-violet-500" />{{
+                      t('reports.legend.metered')
+                    }}
+                  </span>
+                  <span class="flex items-center gap-1">
+                    <span class="h-2 w-2 rounded-sm bg-amber-600" />{{
+                      t('reports.legend.subscription')
+                    }}
+                  </span>
+                </div>
+              </div>
+            </section>
+
+            <!-- Spend by model + by agent kind: the two axes a run has no single value for. -->
+            <div class="grid gap-6 md:grid-cols-2">
+              <section>
+                <h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
+                  {{ t('reports.spend.byModel') }}
+                </h2>
+                <ReportsSpendBreakdown
+                  :rows="view.spend.byModel"
+                  :currency="currency"
+                  test-id="reports-spend-model"
+                  :label-of="sliceLabel"
+                />
+              </section>
+              <section>
+                <h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
+                  {{ t('reports.spend.byAgentKind') }}
+                </h2>
+                <ReportsSpendBreakdown
+                  :rows="view.spend.byAgentKind"
+                  :currency="currency"
+                  test-id="reports-spend-agent-kind"
+                  :label-of="sliceLabel"
+                />
+              </section>
+            </div>
+
+            <!-- The shared axis: spend AND activity for the same grouping, side by side. -->
+            <section class="flex flex-col gap-3">
+              <div class="flex flex-wrap items-center gap-2">
+                <h2 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+                  {{ t('reports.breakdown.title') }}
+                </h2>
+                <div class="flex rounded-lg border border-slate-800 p-0.5 text-[12px]">
+                  <button
+                    v-for="opt in DIMENSIONS"
+                    :key="opt.value"
+                    class="rounded-md px-2.5 py-1 transition"
+                    :class="
+                      dimension === opt.value
+                        ? 'bg-slate-800 text-slate-100'
+                        : 'text-slate-400 hover:text-slate-200'
+                    "
+                    :data-testid="`reports-dimension-${opt.value}`"
+                    @click="dimension = opt.value"
+                  >
+                    {{ opt.label }}
+                  </button>
+                </div>
+              </div>
+              <div class="grid gap-6 md:grid-cols-2">
+                <div>
+                  <h3 class="mb-2 text-[11px] text-slate-500">{{ t('reports.spend.heading') }}</h3>
+                  <ReportsSpendBreakdown
+                    :rows="spendByDimension"
+                    :currency="currency"
+                    test-id="reports-spend-dimension"
+                    :label-of="sliceLabel"
+                  />
+                </div>
+                <div>
+                  <h3 class="mb-2 text-[11px] text-slate-500">
+                    {{ t('reports.activity.heading') }}
+                  </h3>
+                  <div class="rounded-lg border border-slate-800 bg-slate-900/40 p-4">
+                    <div
+                      v-if="!activityByDimension.length"
+                      class="py-4 text-center text-xs text-slate-500"
+                    >
+                      {{ t('reports.activity.empty') }}
+                    </div>
+                    <template v-else>
+                      <ul class="flex flex-col gap-3" data-testid="reports-activity">
+                        <li
+                          v-for="row in activityByDimension"
+                          :key="row.key"
+                          class="text-xs"
+                          data-testid="reports-activity-row"
+                        >
+                          <div class="mb-1 flex items-baseline justify-between gap-2">
+                            <span class="min-w-0 truncate text-slate-300">{{
+                              sliceLabel(row)
+                            }}</span>
+                            <span class="shrink-0 tabular-nums text-slate-400">
+                              {{ t('reports.activity.runs', { count: row.runs }, row.runs) }}
+                            </span>
+                          </div>
+                          <div class="flex h-1.5 gap-[2px]">
+                            <div
+                              v-for="segment in activitySegments(row)"
+                              :key="segment.status"
+                              class="h-1.5 rounded-full"
+                              :class="STATUS_CLASSES[segment.status]"
+                              :style="{
+                                width: `${segmentPct(segment.count, maxRuns)}%`,
+                              }"
+                            />
+                          </div>
+                          <!-- The status counts in text: the reserved status hues are
+                               red-green adjacent, so identity is never colour alone. -->
+                          <p class="mt-1 flex flex-wrap gap-x-2 text-[10px] text-slate-500">
+                            <span v-for="segment in activitySegments(row)" :key="segment.status">
+                              {{ n(segment.count, 'decimal') }} {{ statusLabel(segment.status) }}
+                            </span>
+                            <span v-if="row.avgDurationMs != null">
+                              ·
+                              {{
+                                t('reports.activity.avg', { value: formatMs(row.avgDurationMs) })
+                              }}
+                            </span>
+                          </p>
+                        </li>
+                      </ul>
+                      <div
+                        class="mt-3 flex flex-wrap items-center gap-3 text-[11px] text-slate-500"
+                      >
+                        <span
+                          v-for="status in ['done', 'failed', 'running', 'other'] as const"
+                          :key="status"
+                          class="flex items-center gap-1"
+                        >
+                          <span class="h-2 w-2 rounded-sm" :class="STATUS_CLASSES[status]" />{{
+                            statusLabel(status)
+                          }}
+                        </span>
+                      </div>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.reports-fade-enter-active,
+.reports-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+.reports-fade-enter-from,
+.reports-fade-leave-to {
+  opacity: 0;
+}
+</style>