@cat-factory/app 0.211.0 → 0.213.0

package/app/components/layout/AccountPlatformAlertSettings.vue

@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import type {
+  PlatformAlertSettings,
+  PlatformAlertThresholdOverrides,
+  PlatformAlertWindow,
+} from '~/types/execution'
+
+// Per-account tuning for the platform-health alert sweep (admin only): the ceilings the
+// deployment's aggregate run health is checked against, and the window they are evaluated over.
+// The deployment's env vars set the DEFAULTS; anything left blank here inherits them, so this
+// panel is an override sheet rather than a settings form.
+//
+// That distinction drives the whole component. An empty field means "inherit", NOT zero, and a
+// zero is a live setting in this vocabulary (a `minStalledPriorRuns` of 0 says "page even on an
+// idle window"), so the editor keeps blank and 0 apart end to end and only sends the fields the
+// admin actually filled in.
+const props = defineProps<{ accountId: string }>()
+
+const store = useAccountSettingsStore()
+const toast = useToast()
+const { t } = useI18n()
+
+const WINDOWS = ['1h', '24h', '7d'] as const satisfies readonly PlatformAlertWindow[]
+
+// Exhaustive enum→key map (the tier-2 dynamic-key guard): adding a window without a label
+// fails the typecheck here rather than rendering a raw code.
+const windowLabels = computed<Record<PlatformAlertWindow, string>>(() => ({
+  '1h': t('settings.platformAlerts.window.oneHour'),
+  '24h': t('settings.platformAlerts.window.oneDay'),
+  '7d': t('settings.platformAlerts.window.sevenDays'),
+}))
+const windowItems = computed(() =>
+  [
+    { label: t('settings.platformAlerts.window.inherit'), value: '' },
+    ...WINDOWS.map((w) => ({ label: windowLabels.value[w], value: w })),
+  ].map((i) => i),
+)
+
+/**
+ * The numeric ceilings, each rendered as one row: the contract key plus the input's step.
+ * ONE table drives the form, the hydrate and the save, so adding a threshold to the contract
+ * is a single entry rather than a form field plus a save branch free to disagree with it.
+ */
+const THRESHOLDS = [
+  { field: 'minRuns', step: 1 },
+  { field: 'maxFailureRate', step: 0.05 },
+  { field: 'maxP99DurationMs', step: 1 },
+  { field: 'maxBacklog', step: 1 },
+  { field: 'stalledBuckets', step: 1 },
+  { field: 'minStalledPriorRuns', step: 1 },
+  { field: 'maxFailureKindShare', step: 0.05 },
+  { field: 'maxSweepFailures', step: 1 },
+] as const satisfies readonly { field: keyof PlatformAlertThresholdOverrides; step: number }[]
+
+type ThresholdField = (typeof THRESHOLDS)[number]['field']
+
+// Exhaustive label/hint maps, same drift guard as the windows above.
+const thresholdLabels = computed<Record<ThresholdField, string>>(() => ({
+  minRuns: t('settings.platformAlerts.thresholds.minRuns'),
+  maxFailureRate: t('settings.platformAlerts.thresholds.maxFailureRate'),
+  maxP99DurationMs: t('settings.platformAlerts.thresholds.maxP99DurationMs'),
+  maxBacklog: t('settings.platformAlerts.thresholds.maxBacklog'),
+  stalledBuckets: t('settings.platformAlerts.thresholds.stalledBuckets'),
+  minStalledPriorRuns: t('settings.platformAlerts.thresholds.minStalledPriorRuns'),
+  maxFailureKindShare: t('settings.platformAlerts.thresholds.maxFailureKindShare'),
+  maxSweepFailures: t('settings.platformAlerts.thresholds.maxSweepFailures'),
+}))
+const thresholdHints = computed<Record<ThresholdField, string>>(() => ({
+  minRuns: t('settings.platformAlerts.hints.minRuns'),
+  maxFailureRate: t('settings.platformAlerts.hints.maxFailureRate'),
+  maxP99DurationMs: t('settings.platformAlerts.hints.maxP99DurationMs'),
+  maxBacklog: t('settings.platformAlerts.hints.maxBacklog'),
+  stalledBuckets: t('settings.platformAlerts.hints.stalledBuckets'),
+  minStalledPriorRuns: t('settings.platformAlerts.hints.minStalledPriorRuns'),
+  maxFailureKindShare: t('settings.platformAlerts.hints.maxFailureKindShare'),
+  maxSweepFailures: t('settings.platformAlerts.hints.maxSweepFailures'),
+}))
+
+// Editable state. Every value is a STRING so an empty field stays distinguishable from a typed
+// `0`: binding a number input to a nullable number collapses those two the moment the field is
+// cleared, and one of them is "leave the deployment default alone".
+const muted = ref(false)
+const alertWindow = ref<PlatformAlertWindow | ''>('')
+const values = ref<Record<ThresholdField, string>>(blankValues())
+const saving = ref(false)
+
+function blankValues(): Record<ThresholdField, string> {
+  return Object.fromEntries(THRESHOLDS.map((th) => [th.field, ''])) as Record<
+    ThresholdField,
+    string
+  >
+}
+
+/** The p99 ceiling is stored in ms and edited in MINUTES, which is how operators think of it. */
+function toDisplay(field: ThresholdField, stored: number | undefined): string {
+  if (stored === undefined) return ''
+  return field === 'maxP99DurationMs' ? String(stored / 60_000) : String(stored)
+}
+function fromDisplay(field: ThresholdField, raw: string): number | undefined {
+  const trimmed = raw.trim()
+  if (trimmed === '') return undefined
+  const n = Number(trimmed)
+  if (!Number.isFinite(n)) return undefined
+  return field === 'maxP99DurationMs' ? Math.round(n * 60_000) : n
+}
+
+function hydrate() {
+  const stored = store.view?.config?.platformAlerts
+  muted.value = stored?.enabled === false
+  alertWindow.value = stored?.window ?? ''
+  const next = blankValues()
+  for (const th of THRESHOLDS) next[th.field] = toDisplay(th.field, stored?.thresholds?.[th.field])
+  values.value = next
+}
+
+onMounted(async () => {
+  // A sibling panel loads the same store on mount; only load when nothing is there yet.
+  if (!store.view && store.available !== false) {
+    try {
+      await store.load(props.accountId)
+    } catch {
+      // The deployment-settings panel surfaces the error text; what matters HERE is that the
+      // rest of the account's config never arrived, which `loaded` below turns into a refusal
+      // to save rather than a silent write of a config that is missing everything.
+    }
+  }
+  hydrate()
+})
+watch(() => store.view, hydrate)
+
+/**
+ * Whether the account's CURRENT config is in hand.
+ *
+ * Load-bearing because a save REPLACES the whole non-secret config and this panel only edits one
+ * key of it: saving on top of a failed load would carry nothing forward and silently wipe the
+ * model policy, the run-credential floor and every other sibling setting. The store only clears
+ * `available` for a 503 (the settings module is unwired), so any other load failure leaves the
+ * panel rendered with a null view, which is exactly the state this guards.
+ */
+const loaded = computed(() => !!store.view)
+
+/**
+ * Fields whose text is not a number. Reported rather than dropped: `fromDisplay` returning
+ * `undefined` means "inherit" everywhere else, so silently coercing a typo into it would answer
+ * a mis-typed ceiling by quietly restoring the deployment default.
+ */
+const invalidFields = computed(() =>
+  THRESHOLDS.filter((th) => {
+    const raw = values.value[th.field].trim()
+    return raw !== '' && !Number.isFinite(Number(raw))
+  }).map((th) => thresholdLabels.value[th.field]),
+)
+
+/** The overrides to persist: only the fields the admin actually filled in. */
+function collectThresholds(): PlatformAlertThresholdOverrides {
+  const out: PlatformAlertThresholdOverrides = {}
+  for (const th of THRESHOLDS) {
+    const parsed = fromDisplay(th.field, values.value[th.field])
+    if (parsed !== undefined) out[th.field] = parsed
+  }
+  return out
+}
+
+async function save() {
+  if (!loaded.value) {
+    toast.add({ title: t('settings.platformAlerts.notLoaded'), color: 'error' })
+    return
+  }
+  if (invalidFields.value.length > 0) {
+    toast.add({
+      title: t('settings.platformAlerts.invalidNumbers'),
+      description: invalidFields.value.join(', '),
+      color: 'error',
+    })
+    return
+  }
+  const thresholds = collectThresholds()
+  // Each key is omitted rather than nulled when it carries no override: an absent key is what
+  // the backend reads as "inherit the deployment default", and a stored null would be a value.
+  const settings: PlatformAlertSettings = {
+    ...(muted.value ? { enabled: false } : {}),
+    ...(alertWindow.value ? { window: alertWindow.value } : {}),
+    ...(Object.keys(thresholds).length > 0 ? { thresholds } : {}),
+  }
+  saving.value = true
+  try {
+    // `config` fully replaces the stored non-secret config, so carry the rest forward (guarded
+    // by `loaded` above, or "the rest" would be nothing).
+    await store.save(props.accountId, {
+      config: { ...store.view?.config, platformAlerts: settings },
+    })
+    toast.add({
+      title: t('settings.platformAlerts.saved'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+  } catch (e) {
+    toast.add({
+      title: t('settings.platformAlerts.saveFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+function resetAll() {
+  muted.value = false
+  alertWindow.value = ''
+  values.value = blankValues()
+}
+
+const hasOverrides = computed(
+  () =>
+    muted.value ||
+    alertWindow.value !== '' ||
+    THRESHOLDS.some((th) => values.value[th.field].trim() !== ''),
+)
+</script>
+
+<template>
+  <section
+    v-if="store.available !== false"
+    data-testid="account-platform-alerts"
+    class="space-y-3 border-t border-slate-800 pt-6"
+  >
+    <div>
+      <h4 class="text-sm font-semibold text-slate-200">
+        {{ t('settings.platformAlerts.title') }}
+      </h4>
+      <p class="text-[11px] text-slate-400">{{ t('settings.platformAlerts.description') }}</p>
+    </div>
+
+    <!--
+      The one-way switch. It is stated rather than presented as a symmetric toggle because it
+      genuinely is one: the deployment's env var decides whether the sweep runs at all, and no
+      stored row can start a timer that was never started.
+    -->
+    <div class="space-y-1">
+      <UCheckbox
+        v-model="muted"
+        size="sm"
+        :label="t('settings.platformAlerts.muteLabel')"
+        data-testid="platform-alerts-mute"
+      />
+      <p class="ps-6 text-[11px] text-slate-400">{{ t('settings.platformAlerts.muteHint') }}</p>
+    </div>
+
+    <div class="space-y-1">
+      <label class="text-[11px] font-medium text-slate-300">
+        {{ t('settings.platformAlerts.windowLabel') }}
+      </label>
+      <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+        <USelect
+          v-model="alertWindow"
+          :items="windowItems"
+          value-key="value"
+          size="sm"
+          data-testid="platform-alerts-window"
+        />
+      </div>
+      <p class="text-[11px] text-slate-400">{{ t('settings.platformAlerts.windowHint') }}</p>
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-[11px] font-medium text-slate-300">
+        {{ t('settings.platformAlerts.thresholdsLabel') }}
+      </label>
+      <p class="text-[11px] text-slate-400">{{ t('settings.platformAlerts.inheritHint') }}</p>
+      <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+        <div v-for="th in THRESHOLDS" :key="th.field" class="space-y-1">
+          <label class="block text-[11px] text-slate-300" :for="`platform-alert-${th.field}`">
+            {{ thresholdLabels[th.field] }}
+          </label>
+          <UInput
+            :id="`platform-alert-${th.field}`"
+            v-model="values[th.field]"
+            type="number"
+            :step="th.step"
+            size="sm"
+            :placeholder="t('settings.platformAlerts.inheritPlaceholder')"
+            :data-testid="`platform-alert-${th.field}`"
+          />
+          <p class="text-[11px] leading-snug text-slate-500">{{ thresholdHints[th.field] }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!--
+      A save REPLACES the whole account config and this sheet edits one key of it, so with the
+      current config not in hand there is nothing to carry forward. Say so and disable the
+      button rather than letting a click wipe the sibling settings.
+    -->
+    <p
+      v-if="!loaded"
+      class="rounded-lg border border-amber-800/60 bg-amber-950/30 px-3 py-2 text-xs text-amber-200"
+      data-testid="account-platform-alerts-unloaded"
+    >
+      {{ t('settings.platformAlerts.notLoaded') }}
+    </p>
+
+    <div class="flex gap-2">
+      <UButton
+        color="primary"
+        size="xs"
+        icon="i-lucide-save"
+        :loading="saving"
+        :disabled="!loaded || invalidFields.length > 0"
+        data-testid="account-platform-alerts-save"
+        @click="save"
+      >
+        {{ t('common.save') }}
+      </UButton>
+      <UButton
+        v-if="hasOverrides"
+        color="neutral"
+        variant="subtle"
+        size="xs"
+        icon="i-lucide-rotate-ccw"
+        data-testid="account-platform-alerts-reset"
+        @click="resetAll"
+      >
+        {{ t('settings.platformAlerts.reset') }}
+      </UButton>
+    </div>
+  </section>
+</template>

package/app/components/layout/AccountTeamSettings.vue

@@ -5,6 +5,7 @@ import type { AccountRole } from '~/types/domain'
 import type { InvitationStatus } from '@cat-factory/contracts'
 import AccountDeploymentSettings from '~/components/layout/AccountDeploymentSettings.vue'
 import AccountModelPolicySettings from '~/components/layout/AccountModelPolicySettings.vue'
+import AccountPlatformAlertSettings from '~/components/layout/AccountPlatformAlertSettings.vue'
 import AccountRunCredentialSettings from '~/components/layout/AccountRunCredentialSettings.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
 
@@ -339,6 +340,14 @@ async function disconnectEmail() {
       <AccountModelPolicySettings :account-id="accountId" />
     </section>
 
+    <!-- per-account tuning for the platform-health alert sweep (admin-only). Not gated on
+         `modelPolicySupported`: the alert thresholds bind wherever account settings exist, and
+         a deployment that never opted the sweep in already renders the mute switch as the
+         one-way control it is. -->
+    <section v-if="isAdmin">
+      <AccountPlatformAlertSettings :account-id="accountId" />
+    </section>
+
     <!-- account-wide floor under each board's run-credential switch (admin-only). Not gated on
          `modelPolicySupported`: unlike a model policy this binds wherever account settings
          exist, and a deployment that could not enforce it would be the one case where saying

package/app/components/layout/NotificationsInbox.vue

@@ -8,7 +8,7 @@ import type { ReviewEffort } from '~/types/merge'
 // (merge / confirm / retry) or dismissed. Hydrated from the snapshot and patched
 // live via the `notification` WorkspaceEvent.
 
-const { t, te } = useI18n()
+const { t, te, d } = useI18n()
 
 const notifications = useNotificationsStore()
 const ui = useUiStore()
@@ -326,6 +326,44 @@ function revealVisualConfirm(n: Notification) {
   else if (n.blockId) ui.select(n.blockId)
 }
 
+/**
+ * The failing runs a `platform_health` card is aggregating, captured when the alert fired.
+ * Empty for a card raised on a condition with no failing run behind it (a backlog or a stall),
+ * where the payload carries no list at all, which is the point: an empty list would read as
+ * "we looked and found no failures".
+ */
+function failingRuns(n: Notification) {
+  return n.payload?.platformFailingRuns ?? []
+}
+
+/**
+ * How many of the workspace's failures the card is showing. Rendered only when the sample is
+ * SHORT of the total, so the card states what it left out instead of presenting the cap as the
+ * whole story.
+ */
+function failingRunsOmitted(n: Notification): number {
+  return Math.max(0, (n.payload?.platformFailedTotal ?? 0) - failingRuns(n).length)
+}
+
+/**
+ * Whether a linked failing run can actually be opened. A run that has since aged out of the
+ * board's loaded set and carries no block is a link to nowhere, and rendering it as clickable
+ * would be worse than rendering it plainly: the operator would read "nothing happened" from a
+ * click that silently did nothing.
+ */
+function canOpenFailingRun(run: { executionId: string; blockId: string | null }): boolean {
+  return !!execution.getInstance(run.executionId) || !!run.blockId
+}
+
+/**
+ * Open one failing run behind a platform-health alert: its observability drill-down when the
+ * run is loaded (the "why did this fail" surface), otherwise focus its task on the board.
+ */
+function revealFailingRun(run: { executionId: string; blockId: string | null }) {
+  if (execution.getInstance(run.executionId)) ui.openObservability(run.executionId)
+  else if (run.blockId) ui.select(run.blockId)
+}
+
 /**
  * Open the decision surface for a parked iteration-cap run: find the run's step that is
  * waiting on a human and open it through the universal step dispatch — which routes a
@@ -401,6 +439,43 @@ function revealDecision(n: Notification) {
                 <UIcon name="i-lucide-external-link" class="h-3 w-3" />
                 {{ t('layout.notifications.openPr') }}
               </a>
+              <!--
+                A platform-health card deep-links to the runs it aggregated, so the operator
+                lands on the evidence rather than only on the dashboard.
+              -->
+              <div
+                v-if="failingRuns(n).length"
+                class="mt-1.5 flex flex-col gap-0.5"
+                data-testid="notification-failing-runs"
+              >
+                <component
+                  :is="canOpenFailingRun(run) ? 'button' : 'span'"
+                  v-for="run in failingRuns(n)"
+                  :key="run.executionId"
+                  :type="canOpenFailingRun(run) ? 'button' : undefined"
+                  class="flex items-center gap-1 text-start text-[11px]"
+                  :class="
+                    canOpenFailingRun(run)
+                      ? 'text-sky-400 hover:underline'
+                      : 'cursor-default text-slate-500'
+                  "
+                  :title="
+                    canOpenFailingRun(run) ? undefined : t('layout.notifications.failingRunGone')
+                  "
+                  @click="canOpenFailingRun(run) && revealFailingRun(run)"
+                >
+                  <UIcon name="i-lucide-circle-alert" class="h-3 w-3 shrink-0" />
+                  <span class="truncate">{{
+                    t('layout.notifications.failingRun', {
+                      kind: run.failureKind,
+                      at: d(new Date(run.createdAt), 'short'),
+                    })
+                  }}</span>
+                </component>
+                <span v-if="failingRunsOmitted(n) > 0" class="text-[11px] text-slate-500">
+                  {{ t('layout.notifications.failingRunsMore', { count: failingRunsOmitted(n) }) }}
+                </span>
+              </div>
               <MergeEffortChips
                 v-if="collectsEffort(n)"
                 :model-value="effortFor(n)"

package/app/components/panels/OperatorDashboardPanel.vue

@@ -25,6 +25,8 @@ const WINDOWS: { value: PlatformObservabilityWindow; label: string }[] = [
   { value: '1h', label: t('platformObservability.window.oneHour') },
   { value: '24h', label: t('platformObservability.window.oneDay') },
   { value: '7d', label: t('platformObservability.window.sevenDays') },
+  { value: '30d', label: t('platformObservability.window.thirtyDays') },
+  { value: '90d', label: t('platformObservability.window.ninetyDays') },
 ]
 
 // Exhaustive enum→label map (tier-2 dynamic-key guard): a new AgentFailureKind fails the
@@ -48,6 +50,21 @@ function failureLabel(kind: string): string {
   return key ? t(key) : kind
 }
 
+const DAY_MS = 24 * 60 * 60 * 1000
+
+// How the window was answered. A rollup-backed window that has materialised NOTHING must not
+// render as a quiet quarter, and one whose watermark is well behind `now` must not render its
+// empty tail as idleness, so the banner distinguishes "no rollup yet", "the rollup is behind"
+// and "up to date" rather than leaving all three to look like data.
+const rollupState = computed<'none' | 'stale' | 'current' | null>(() => {
+  const v = view.value
+  if (!v || v.source !== 'daily-rollup') return null
+  if (v.rolledUpThrough == null) return 'none'
+  // A day of slack: the sweep materialises the CURRENT day, so being one bucket behind is the
+  // normal state between passes rather than a gap worth flagging.
+  return v.generatedAt - v.rolledUpThrough > 2 * DAY_MS ? 'stale' : 'current'
+})
+
 // The largest failure count, so each taxonomy bar is drawn relative to the leader.
 const maxFailure = computed(() => Math.max(1, ...(view.value?.failures ?? []).map((f) => f.count)))
 // The largest total in any trend bucket, so each stacked column scales to the tallest.
@@ -58,6 +75,13 @@ const maxTrend = computed(() =>
 function barPct(count: number, max: number): number {
   return Math.round((count / max) * 100)
 }
+
+// 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".
+function cleanRate(stat: { gates: number; cleanPasses: number }): number | null {
+  return stat.gates > 0 ? stat.cleanPasses / stat.gates : null
+}
 function heightPct(count: number, max: number): number {
   // Floor a non-zero column to 4% so a single run is still visible in the sparkline.
   return count === 0 ? 0 : Math.max(4, Math.round((count / max) * 100))
@@ -170,6 +194,41 @@ watch(
           </div>
 
           <div v-else-if="view" class="mx-auto flex max-w-5xl flex-col gap-6">
+            <!--
+              Rollup provenance. An un-materialised rollup and an idle quarter produce the same
+              empty series, so the long windows say which one this is instead of showing
+              confident zeros.
+            -->
+            <p
+              v-if="rollupState === 'none'"
+              class="rounded-lg border border-amber-800/60 bg-amber-950/30 px-3 py-2 text-xs text-amber-200"
+              data-testid="operator-rollup-missing"
+            >
+              {{ t('platformObservability.rollup.none') }}
+            </p>
+            <p
+              v-else-if="rollupState === 'stale'"
+              class="rounded-lg border border-amber-800/60 bg-amber-950/30 px-3 py-2 text-xs text-amber-200"
+              data-testid="operator-rollup-stale"
+            >
+              {{
+                t('platformObservability.rollup.stale', {
+                  date: d(new Date(view.rolledUpThrough ?? 0), 'short'),
+                })
+              }}
+            </p>
+            <p
+              v-else-if="rollupState === 'current'"
+              class="text-xs text-slate-500"
+              data-testid="operator-rollup-current"
+            >
+              {{
+                t('platformObservability.rollup.current', {
+                  date: d(new Date(view.rolledUpThrough ?? 0), 'short'),
+                })
+              }}
+            </p>
+
             <!-- Outcome summary tiles -->
             <section>
               <h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
@@ -271,6 +330,77 @@ watch(
               </div>
             </section>
 
+            <!-- Gate / CI-fixer attempt statistics -->
+            <section>
+              <h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
+                {{ t('platformObservability.gates.title') }}
+              </h2>
+              <div class="overflow-x-auto rounded-lg border border-slate-800 bg-slate-900/40 p-4">
+                <p v-if="!view.gates.length" class="py-4 text-center text-xs text-slate-500">
+                  {{ t('platformObservability.gates.empty') }}
+                </p>
+                <table v-else class="w-full text-left text-xs" data-testid="operator-gates">
+                  <thead class="text-[11px] uppercase tracking-wide text-slate-500">
+                    <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-slate-300">
+                    <tr
+                      v-for="g in view.gates"
+                      :key="g.gateKind"
+                      class="border-t border-slate-800/70"
+                    >
+                      <td class="py-2 pe-3">
+                        <span class="font-medium text-slate-200">{{ g.gateKind }}</span>
+                        <span v-if="g.helperKind" class="ms-1.5 text-slate-500"
+                          >&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-emerald-400">{{ g.cleanPasses }}</span>
+                        <span v-if="cleanRate(g) !== null" class="ms-1 text-slate-500"
+                          >({{ 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-amber-400' : ''">{{
+                          g.helperFailures
+                        }}</span>
+                      </td>
+                      <td class="py-2 text-end tabular-nums">
+                        <span :class="g.exhausted > 0 ? 'text-rose-400' : ''">{{
+                          g.exhausted
+                        }}</span>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+                <p class="mt-3 text-[11px] leading-relaxed text-slate-500">
+                  {{ t('platformObservability.gates.hint') }}
+                </p>
+              </div>
+            </section>
+
             <div class="grid gap-6 md:grid-cols-2">
               <!-- Failure taxonomy -->
               <section>