@cat-factory/app 0.309.0 → 0.310.1

package/app/components/panels/OperatorDashboardPanel.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { onKeyStroke } from '@vueuse/core'
+import type { TableColumn } from '@nuxt/ui'
 import type { PlatformObservabilityWindow } from '~/types/execution'
 import { formatMs } from '~/utils/observability'
 import { FAILURE_KIND_KEYS, isAgentFailureKind } from '~/utils/failureKinds'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 // Deployment-level (platform-operator) observability dashboard: the aggregate health of the
 // active account's runs — outcome totals + success rate, a time-bucketed outcome trend, the
@@ -68,6 +70,19 @@ function barPct(count: number, max: number): number {
 // Share of a gate kind's runs the precheck satisfied outright, 0..1: the number the
 // precheck-before-escalate design exists to move. Null (not 0) when nothing settled, because
 // "no gates ran" is not "every gate needed a fixer".
+// Column definitions rather than hand-written `<th>`s: the header typography is the table
+// theme's, shared with every other table in the SPA.
+// The count columns are flush right, so their headers are too.
+const NUMERIC = { class: { th: 'text-end' } }
+const gateColumns = computed<TableColumn<NonNullable<typeof view.value>['gates'][number]>[]>(() => [
+  { id: 'gate', header: t('platformObservability.gates.gate') },
+  { id: 'settled', header: t('platformObservability.gates.settled'), meta: NUMERIC },
+  { id: 'cleanPasses', header: t('platformObservability.gates.cleanPasses'), meta: NUMERIC },
+  { id: 'attempts', header: t('platformObservability.gates.attempts'), meta: NUMERIC },
+  { id: 'helperFailures', header: t('platformObservability.gates.helperFailures'), meta: NUMERIC },
+  { id: 'exhausted', header: t('platformObservability.gates.exhausted'), meta: NUMERIC },
+])
+
 function cleanRate(stat: { gates: number; cleanPasses: number }): number | null {
   return stat.gates > 0 ? stat.cleanPasses / stat.gates : null
 }
@@ -125,44 +140,44 @@ watch(
             <p v-if="accountName" class="truncate text-xs text-dimmed">{{ accountName }}</p>
           </div>
           <div class="ms-auto flex items-center gap-1.5">
-            <div class="me-1 flex rounded-lg border border-default p-0.5 text-xs">
-              <button
-                v-for="opt in WINDOWS"
-                :key="opt.value"
-                class="rounded-md px-2.5 py-1 transition"
-                :class="
-                  platform.window === opt.value
-                    ? 'bg-elevated text-app-100'
-                    : 'text-muted hover:text-default'
-                "
-                :data-testid="`operator-window-${opt.value}`"
-                @click="setWindow(opt.value)"
-              >
-                {{ opt.label }}
-              </button>
-            </div>
-            <button
-              class="rounded-lg border border-default p-1.5 text-muted transition hover:text-default"
-              :title="t('platformObservability.refresh')"
-              :aria-label="t('platformObservability.refresh')"
+            <UTabs
+              :model-value="platform.window"
+              :items="WINDOWS"
+              :content="false"
+              size="xs"
+              class="me-1"
+              @update:model-value="setWindow($event as PlatformObservabilityWindow)"
+            >
+              <!-- UTabs renders its own triggers and forwards nothing from an item, so this
+                   slot is the one place a stable per-window selector can live. -->
+              <template #default="{ item }">
+                <span :data-testid="`operator-window-${item.value}`">{{ item.label }}</span>
+              </template>
+            </UTabs>
+            <IconButton
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-refresh-cw"
+              :label="t('platformObservability.refresh')"
+              :ui="{
+                base: 'rounded-lg border border-default p-1.5 text-muted transition hover:text-default',
+                leadingIcon: loading ? 'h-4 w-4 animate-spin' : 'h-4 w-4',
+              }"
               data-testid="operator-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-default p-1.5 text-muted transition hover:text-default"
-              :title="t('platformObservability.close')"
-              :aria-label="t('platformObservability.close')"
+            />
+            <IconButton
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-x"
+              :label="t('platformObservability.close')"
+              :ui="{
+                base: 'rounded-lg border border-default p-1.5 text-muted transition hover:text-default',
+                leadingIcon: 'h-4 w-4',
+              }"
               data-testid="operator-close"
               @click="close"
-            >
-              <UIcon name="i-lucide-x" class="h-4 w-4" />
-            </button>
+            />
           </div>
         </header>
 
@@ -172,12 +187,14 @@ watch(
             class="mx-auto max-w-2xl rounded-lg border border-app-error-800/60 bg-app-error-950/40 p-4 text-sm text-app-error-200"
           >
             <p>{{ error }}</p>
-            <button
+            <UButton
+              color="neutral"
+              variant="ghost"
               class="mt-2 rounded-md border border-app-error-700 px-3 py-1 text-xs hover:bg-app-error-900/40"
               @click="refresh"
             >
               {{ t('platformObservability.retry') }}
-            </button>
+            </UButton>
           </div>
 
           <div v-else-if="loading && !view" class="py-16 text-center text-sm text-muted">
@@ -327,62 +344,53 @@ watch(
                 <p v-if="!view.gates.length" class="py-4 text-center text-xs text-dimmed">
                   {{ t('platformObservability.gates.empty') }}
                 </p>
-                <table v-else class="w-full text-left text-xs" data-testid="operator-gates">
-                  <thead class="text-2xs uppercase tracking-wide text-dimmed">
-                    <tr>
-                      <th class="pb-2 pe-3 font-medium">
-                        {{ t('platformObservability.gates.gate') }}
-                      </th>
-                      <th class="pb-2 pe-3 text-end font-medium">
-                        {{ t('platformObservability.gates.settled') }}
-                      </th>
-                      <th class="pb-2 pe-3 text-end font-medium">
-                        {{ t('platformObservability.gates.cleanPasses') }}
-                      </th>
-                      <th class="pb-2 pe-3 text-end font-medium">
-                        {{ t('platformObservability.gates.attempts') }}
-                      </th>
-                      <th class="pb-2 pe-3 text-end font-medium">
-                        {{ t('platformObservability.gates.helperFailures') }}
-                      </th>
-                      <th class="pb-2 text-end font-medium">
-                        {{ t('platformObservability.gates.exhausted') }}
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody class="text-toned">
-                    <tr
-                      v-for="g in view.gates"
-                      :key="g.gateKind"
-                      class="border-t border-default/70"
+                <UTable
+                  v-else
+                  :data="view.gates"
+                  :columns="gateColumns"
+                  :ui="{
+                    base: 'text-xs',
+                    th: 'ps-0 pe-3 py-2',
+                    td: 'ps-0 pe-3 py-2 text-xs text-toned whitespace-normal',
+                  }"
+                  data-testid="operator-gates"
+                >
+                  <template #gate-cell="{ row }">
+                    <span class="font-medium text-default">{{ row.original.gateKind }}</span>
+                    <span v-if="row.original.helperKind" class="ms-1.5 text-dimmed"
+                      >&rarr; {{ row.original.helperKind }}</span
                     >
-                      <td class="py-2 pe-3">
-                        <span class="font-medium text-default">{{ g.gateKind }}</span>
-                        <span v-if="g.helperKind" class="ms-1.5 text-dimmed"
-                          >&rarr; {{ g.helperKind }}</span
-                        >
-                      </td>
-                      <td class="py-2 pe-3 text-end tabular-nums">{{ g.gates }}</td>
-                      <td class="py-2 pe-3 text-end tabular-nums">
-                        <span class="text-app-success-400">{{ g.cleanPasses }}</span>
-                        <span v-if="cleanRate(g) !== null" class="ms-1 text-dimmed"
-                          >({{ n(cleanRate(g) ?? 0, 'percent') }})</span
-                        >
-                      </td>
-                      <td class="py-2 pe-3 text-end tabular-nums">{{ g.attempts }}</td>
-                      <td class="py-2 pe-3 text-end tabular-nums">
-                        <span :class="g.helperFailures > 0 ? 'text-app-warning-400' : ''">{{
-                          g.helperFailures
-                        }}</span>
-                      </td>
-                      <td class="py-2 text-end tabular-nums">
-                        <span :class="g.exhausted > 0 ? 'text-app-error-400' : ''">{{
-                          g.exhausted
-                        }}</span>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
+                  </template>
+                  <template #settled-cell="{ row }">
+                    <span class="block text-end tabular-nums">{{ row.original.gates }}</span>
+                  </template>
+                  <template #cleanPasses-cell="{ row }">
+                    <span class="block text-end tabular-nums">
+                      <span class="text-app-success-400">{{ row.original.cleanPasses }}</span>
+                      <span v-if="cleanRate(row.original) !== null" class="ms-1 text-dimmed"
+                        >({{ n(cleanRate(row.original) ?? 0, 'percent') }})</span
+                      >
+                    </span>
+                  </template>
+                  <template #attempts-cell="{ row }">
+                    <span class="block text-end tabular-nums">{{ row.original.attempts }}</span>
+                  </template>
+                  <template #helperFailures-cell="{ row }">
+                    <span class="block text-end tabular-nums">
+                      <span
+                        :class="row.original.helperFailures > 0 ? 'text-app-warning-400' : ''"
+                        >{{ row.original.helperFailures }}</span
+                      >
+                    </span>
+                  </template>
+                  <template #exhausted-cell="{ row }">
+                    <span class="block text-end tabular-nums">
+                      <span :class="row.original.exhausted > 0 ? 'text-app-error-400' : ''">{{
+                        row.original.exhausted
+                      }}</span>
+                    </span>
+                  </template>
+                </UTable>
                 <p class="mt-3 text-2xs leading-relaxed text-dimmed">
                   {{ t('platformObservability.gates.hint') }}
                 </p>

package/app/components/panels/ReportsPanel.vue

@@ -20,6 +20,7 @@ import {
 } from './ReportsPanel.logic'
 import ReportsSpendBreakdown from '~/components/panels/ReportsSpendBreakdown.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 // 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 /
@@ -137,6 +138,14 @@ const maxRuns = computed(() => maxOf(activityByDimension.value, (row) => row.run
 
 /** Boards the filter offers — the active account's, since the report is account-scoped. */
 const boards = computed(() => workspace.accountWorkspaces)
+// "Every board" is a NAMED sentinel, not an empty string: an empty string is what a Select
+// reserves for "nothing selected", and Reka throws on an item that carries one. The store holds
+// the same state as null, so the two are mapped at the boundary below.
+const ALL_BOARDS = 'all'
+const boardFilterItems = computed(() => [
+  { label: t('reports.filter.allBoards'), value: ALL_BOARDS },
+  ...boards.value.map((board) => ({ label: board.name, value: board.id })),
+])
 
 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)}`
@@ -206,55 +215,52 @@ watch(
           </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-default bg-default px-2.5 py-1.5 text-xs text-default"
-              :value="reports.workspaceFilter ?? ''"
+            <USelect
+              :model-value="reports.workspaceFilter ?? ALL_BOARDS"
+              :items="boardFilterItems"
+              size="xs"
               :aria-label="t('reports.filter.board')"
               data-testid="reports-board-filter"
-              @change="
-                reports.setWorkspaceFilter(($event.target as HTMLSelectElement).value || null)
+              @update:model-value="
+                reports.setWorkspaceFilter($event === ALL_BOARDS ? null : String($event))
               "
+            />
+            <UTabs
+              :model-value="reports.window"
+              :items="WINDOWS"
+              :content="false"
+              size="xs"
+              class="me-1"
+              @update:model-value="reports.setWindow($event as ReportWindow)"
             >
-              <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-default p-0.5 text-xs">
-              <button
-                v-for="opt in WINDOWS"
-                :key="opt.value"
-                class="rounded-md px-2.5 py-1 transition"
-                :class="
-                  reports.window === opt.value
-                    ? 'bg-elevated text-app-100'
-                    : 'text-muted hover:text-default'
-                "
-                :data-testid="`reports-window-${opt.value}`"
-                @click="reports.setWindow(opt.value)"
-              >
-                {{ opt.label }}
-              </button>
-            </div>
-            <button
-              class="rounded-lg border border-default p-1.5 text-muted transition hover:text-default"
-              :aria-label="t('reports.refresh')"
-              :title="t('reports.refresh')"
+              <!-- UTabs renders its own triggers and forwards nothing from an item, so this
+                   slot is the one place a stable per-window selector can live. -->
+              <template #default="{ item }">
+                <span :data-testid="`reports-window-${item.value}`">{{ item.label }}</span>
+              </template>
+            </UTabs>
+            <IconButton
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-refresh-cw"
+              :label="t('reports.refresh')"
+              :ui="{
+                base: 'rounded-lg border border-default p-1.5 text-muted transition hover:text-default',
+                leadingIcon: loading ? 'h-4 w-4 animate-spin' : 'h-4 w-4',
+              }"
               @click="refresh"
-            >
-              <UIcon
-                name="i-lucide-refresh-cw"
-                class="h-4 w-4"
-                :class="{ 'animate-spin': loading }"
-              />
-            </button>
-            <button
-              class="rounded-lg border border-default p-1.5 text-muted transition hover:text-default"
-              :aria-label="t('common.close')"
+            />
+            <IconButton
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-x"
+              :label="t('common.close')"
+              :ui="{
+                base: 'rounded-lg border border-default p-1.5 text-muted transition hover:text-default',
+                leadingIcon: 'h-4 w-4',
+              }"
               @click="close"
-            >
-              <UIcon name="i-lucide-x" class="h-4 w-4" />
-            </button>
+            />
           </div>
         </header>
 
@@ -265,12 +271,14 @@ watch(
           >
             <p>{{ t('reports.error') }}</p>
             <p v-if="error" class="mt-1 text-xs text-app-error-300/80">{{ error }}</p>
-            <button
+            <UButton
+              color="neutral"
+              variant="ghost"
               class="mt-2 rounded-md border border-app-error-700 px-3 py-1 text-xs hover:bg-app-error-900/40"
               @click="refresh"
             >
               {{ t('reports.retry') }}
-            </button>
+            </UButton>
           </div>
 
           <div v-else-if="loading && !view" class="py-16 text-center text-sm text-muted">
@@ -466,22 +474,17 @@ watch(
                 <SectionLabel as="h2">
                   {{ t('reports.breakdown.title') }}
                 </SectionLabel>
-                <div class="flex rounded-lg border border-default p-0.5 text-xs">
-                  <button
-                    v-for="opt in DIMENSIONS"
-                    :key="opt.value"
-                    class="rounded-md px-2.5 py-1 transition"
-                    :class="
-                      dimension === opt.value
-                        ? 'bg-elevated text-app-100'
-                        : 'text-muted hover:text-default'
-                    "
-                    :data-testid="`reports-dimension-${opt.value}`"
-                    @click="dimension = opt.value"
-                  >
-                    {{ opt.label }}
-                  </button>
-                </div>
+                <UTabs
+                  :model-value="dimension"
+                  :items="DIMENSIONS"
+                  :content="false"
+                  size="xs"
+                  @update:model-value="dimension = $event as ReportActivityDimension"
+                >
+                  <template #default="{ item }">
+                    <span :data-testid="`reports-dimension-${item.value}`">{{ item.label }}</span>
+                  </template>
+                </UTabs>
               </div>
               <div class="grid gap-6 md:grid-cols-2">
                 <div>