feat: add flaky board, test detail and rca panel to the dashboard

.gitignore

@@ -14,3 +14,4 @@ playwright-report/
 
 # Next.js generated types
 next-env.d.ts
+*.tsbuildinfo

apps/web/src/app/globals.css

@@ -313,3 +313,116 @@ label {
   font-size: 0.85rem;
   color: var(--muted);
 }
+
+.sparkline {
+  display: block;
+  margin: 0.6rem 0 0;
+}
+
+.score-badge {
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.reasons {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.reasons li {
+  display: flex;
+  gap: 0.6rem;
+  align-items: baseline;
+  font-size: 0.88rem;
+}
+
+.reason-code {
+  flex-shrink: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.72rem;
+  letter-spacing: 0.03em;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  color: var(--flaky);
+  border-radius: 5px;
+  padding: 0.12rem 0.4rem;
+}
+
+.reason-stable {
+  color: var(--pass);
+}
+
+.pill {
+  display: inline-block;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  border-radius: 999px;
+  padding: 0.15rem 0.55rem;
+  border: 1px solid var(--border);
+}
+
+.pill-candidate {
+  color: var(--flaky);
+}
+
+.pill-quarantined {
+  color: var(--fail);
+}
+
+.filters {
+  display: flex;
+  gap: 0.4rem;
+  margin-bottom: 1.1rem;
+}
+
+.filter-tab {
+  font-size: 0.85rem;
+  padding: 0.35rem 0.7rem;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  color: var(--muted);
+}
+
+.filter-tab:hover {
+  color: var(--text);
+}
+
+.filter-tab[data-active='true'] {
+  background: var(--surface-2);
+  color: var(--text);
+  font-weight: 600;
+}
+
+.rca {
+  border-color: var(--border);
+}
+
+.rca-label {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.rca-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0.9rem;
+}
+
+.error-box {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--fail);
+  border-radius: 6px;
+  padding: 0.6rem 0.75rem;
+  margin-bottom: 0.9rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+}

apps/web/src/app/projects/[projectId]/flaky/page.tsx

@@ -0,0 +1,131 @@
+import { getPrismaClient } from '@flakemetry/db'
+import { flakyBoard } from '@flakemetry/queries'
+
+import { ScoreBadge, TrendArrow } from '@/components/score'
+import { requireUser } from '@/lib/session'
+import { requireProjectAccess } from '@/lib/tenant'
+
+const prisma = getPrismaClient()
+
+const BOARD_LIMIT = 100
+
+const percent = (value: number): string => `${Math.round(value * 100)}%`
+
+const formatWhen = (date: Date | null): string =>
+  date
+    ? new Intl.DateTimeFormat('en', { month: 'short', day: 'numeric', hour: '2-digit' }).format(
+        date,
+      )
+    : '—'
+
+export default async function FlakyBoardPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ projectId: string }>
+  searchParams: Promise<{ filter?: string }>
+}) {
+  const { projectId } = await params
+  const { filter } = await searchParams
+  const user = await requireUser()
+  await requireProjectAccess(user.id, projectId)
+
+  const board = await flakyBoard(prisma, projectId, {
+    limit: BOARD_LIMIT,
+    minScore: 0,
+    includeQuarantined: true,
+  })
+
+  const items = board.items.filter((item) => {
+    if (filter === 'candidates') return item.quarantineCandidate
+    if (filter === 'rising') return item.trend === 'rising'
+    return true
+  })
+
+  const base = `/projects/${projectId}/flaky`
+  const tab = (key: string | undefined, label: string) => (
+    <a
+      href={key ? `${base}?filter=${key}` : base}
+      className="filter-tab"
+      data-active={(filter ?? '') === (key ?? '')}
+    >
+      {label}
+    </a>
+  )
+
+  return (
+    <>
+      <h1 className="page-title">Flaky board</h1>
+      <p className="page-subtitle">
+        Tests ranked by how much they are eroding trust, with the signals behind each score.
+      </p>
+
+      <div className="filters">
+        {tab(undefined, 'All')}
+        {tab('candidates', 'Quarantine candidates')}
+        {tab('rising', 'Getting worse')}
+      </div>
+
+      <div className="card">
+        {items.length === 0 ? (
+          <div className="empty">
+            {board.items.length === 0
+              ? 'No scored tests yet — ingest a few runs to build history.'
+              : 'No tests match this filter.'}
+          </div>
+        ) : (
+          <table>
+            <thead>
+              <tr>
+                <th>Score</th>
+                <th>Test</th>
+                <th>Flip rate</th>
+                <th>Pass on rerun</th>
+                <th>Last flaked</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item) => (
+                <tr key={item.testIdentityId}>
+                  <td>
+                    <span style={{ display: 'inline-flex', gap: '0.4rem', alignItems: 'center' }}>
+                      <ScoreBadge score={item.score} />
+                      <TrendArrow trend={item.trend} />
+                    </span>
+                  </td>
+                  <td>
+                    <a href={`/projects/${projectId}/tests/${item.testIdentityId}`}>
+                      <div style={{ fontWeight: 600 }}>{item.title}</div>
+                      <div className="muted mono" style={{ fontSize: '0.8rem' }}>
+                        {item.suite} · {item.filePath}
+                      </div>
+                    </a>
+                  </td>
+                  <td className="muted">{percent(item.flipRate)}</td>
+                  <td className="muted">{percent(item.passOnRerunRate)}</td>
+                  <td className="muted">{formatWhen(item.lastFlakedAt)}</td>
+                  <td>
+                    {item.quarantined ? (
+                      <span className="pill pill-quarantined">quarantined</span>
+                    ) : item.quarantineCandidate ? (
+                      <span className="pill pill-candidate">candidate</span>
+                    ) : (
+                      <span className="muted">—</span>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {board.items.length === BOARD_LIMIT ? (
+        <p className="muted" style={{ fontSize: '0.8rem', marginTop: '0.8rem' }}>
+          Showing the top {BOARD_LIMIT} scored tests.
+        </p>
+      ) : null}
+    </>
+  )
+}

apps/web/src/app/projects/[projectId]/layout.tsx

@@ -31,6 +31,7 @@ export default async function ProjectLayout({
 
         <nav className="nav">
           <a href={`/projects/${projectId}/runs`}>Runs</a>
+          <a href={`/projects/${projectId}/flaky`}>Flaky board</a>
           <a href={`/projects/${projectId}/settings/tokens`}>Ingest tokens</a>
         </nav>