@xera-ai/core 0.9.8 → 0.10.0

package/src/coverage/risk.ts

@@ -0,0 +1,69 @@
+import type { Snapshot } from '../graph/types';
+import { computeAcStatus } from './status';
+import type { CoverageConfig } from './types';
+
+export const RISK_WEIGHTS = {
+  criticalBoost: 2,
+  bugClassifications: new Set<string>(['REAL_BUG', 'TEST_OUTDATED']),
+  recencyBoosts: { recent: 2.0, withinWindow: 1.0, older: 0.5 },
+  recencyThresholdDays: 7,
+} as const;
+
+function daysBetween(a: Date, b: Date): number {
+  return Math.abs(a.getTime() - b.getTime()) / (1000 * 60 * 60 * 24);
+}
+
+export function computeAreaRisk(
+  areaId: string,
+  snap: Snapshot,
+  config: CoverageConfig,
+  now: Date,
+): number {
+  const recentTickets = snap.edges
+    .filter((e) => e.kind === 'modifies' && e.to === areaId)
+    .map((e) => snap.tickets[e.from])
+    .filter((t): t is NonNullable<typeof t> => t !== undefined)
+    .filter((t) => daysBetween(now, new Date(t.fetchedAt)) <= config.staleAfterDays).length;
+
+  const pomsInArea = snap.edges
+    .filter((e) => e.kind === 'covers' && e.to === areaId)
+    .map((e) => e.from);
+  const scenariosInArea = new Set(
+    snap.edges.filter((e) => e.kind === 'uses' && pomsInArea.includes(e.to)).map((e) => e.from),
+  );
+  const recentBugs = snap.classifications
+    .filter((c) => scenariosInArea.has(c.scenarioId))
+    .filter((c) => RISK_WEIGHTS.bugClassifications.has(c.classification))
+    .filter((c) => daysBetween(now, new Date(c.ts)) <= config.staleAfterDays).length;
+
+  const criticalBoost = config.criticalAreas.includes(areaId) ? RISK_WEIGHTS.criticalBoost : 1;
+
+  return recentTickets * criticalBoost + recentBugs;
+}
+
+export function computeAcGapScore(
+  ticketId: string,
+  snap: Snapshot,
+  config: CoverageConfig,
+  now: Date,
+): number {
+  const ticket = snap.tickets[ticketId];
+  if (!ticket) return 0;
+
+  const acs = Object.values(snap.acNodes).filter((ac) => ac.ticketId === ticketId);
+  const unsatisfied = acs.filter(
+    (ac) => computeAcStatus(ac.id, snap, config.staleAfterDays, now) === 'UNSATISFIED',
+  ).length;
+  if (unsatisfied === 0) return 0;
+
+  const days = daysBetween(now, new Date(ticket.fetchedAt));
+  let boost: number;
+  if (days <= RISK_WEIGHTS.recencyThresholdDays) {
+    boost = RISK_WEIGHTS.recencyBoosts.recent;
+  } else if (days <= config.staleAfterDays) {
+    boost = RISK_WEIGHTS.recencyBoosts.withinWindow;
+  } else {
+    boost = RISK_WEIGHTS.recencyBoosts.older;
+  }
+  return unsatisfied * boost;
+}

package/src/coverage/status.ts

@@ -0,0 +1,76 @@
+import type { Snapshot } from '../graph/types';
+
+export type ScenarioStatus = 'PASSING' | 'NOT_PASSING';
+export type AreaStatus = 'UNCOVERED' | 'STALE' | 'COVERED';
+export type AcStatus = 'SATISFIED' | 'UNSATISFIED';
+export type TicketStatus = 'COMPLETE' | 'INCOMPLETE';
+
+function daysBetween(a: Date, b: Date): number {
+  return Math.abs(a.getTime() - b.getTime()) / (1000 * 60 * 60 * 24);
+}
+
+export function computeScenarioStatus(
+  scenarioId: string,
+  snap: Snapshot,
+  windowDays: number,
+  now: Date,
+): ScenarioStatus {
+  const events = snap.classifications
+    .filter((c) => c.scenarioId === scenarioId)
+    .sort((a, b) => (a.ts < b.ts ? 1 : a.ts > b.ts ? -1 : 0));
+  const latest = events[0];
+  if (!latest) return 'NOT_PASSING';
+  if (latest.classification !== 'PASS') return 'NOT_PASSING';
+  if (daysBetween(now, new Date(latest.ts)) > windowDays) return 'NOT_PASSING';
+  return 'PASSING';
+}
+
+export function computeAreaStatus(
+  areaId: string,
+  snap: Snapshot,
+  windowDays: number,
+  now: Date,
+): AreaStatus {
+  const coveringPoms = snap.edges
+    .filter((e) => e.kind === 'covers' && e.to === areaId)
+    .map((e) => e.from);
+  if (coveringPoms.length === 0) return 'UNCOVERED';
+
+  const scenariosInArea = snap.edges
+    .filter((e) => e.kind === 'uses' && coveringPoms.includes(e.to))
+    .map((e) => e.from);
+  const anyPassing = scenariosInArea.some(
+    (sid) => computeScenarioStatus(sid, snap, windowDays, now) === 'PASSING',
+  );
+  return anyPassing ? 'COVERED' : 'STALE';
+}
+
+export function computeAcStatus(
+  acId: string,
+  snap: Snapshot,
+  windowDays: number,
+  now: Date,
+): AcStatus {
+  const edges = snap.edges.filter((e) => e.kind === 'satisfies' && e.to === acId);
+  if (edges.length === 0) return 'UNSATISFIED';
+  const anyPassing = edges.some(
+    (e) => computeScenarioStatus(e.from, snap, windowDays, now) === 'PASSING',
+  );
+  return anyPassing ? 'SATISFIED' : 'UNSATISFIED';
+}
+
+export function computeTicketStatus(
+  ticketId: string,
+  snap: Snapshot,
+  windowDays: number,
+  now: Date,
+): TicketStatus {
+  const acIds = Object.values(snap.acNodes)
+    .filter((ac) => ac.ticketId === ticketId)
+    .map((ac) => ac.id);
+  if (acIds.length === 0) return 'COMPLETE';
+  const allSatisfied = acIds.every(
+    (acId) => computeAcStatus(acId, snap, windowDays, now) === 'SATISFIED',
+  );
+  return allSatisfied ? 'COMPLETE' : 'INCOMPLETE';
+}

package/src/coverage/types.ts

@@ -0,0 +1,11 @@
+export interface CoverageConfig {
+  staleAfterDays: number;
+  criticalAreas: string[];
+  autoSnapshotOnCoverage: boolean;
+}
+
+export const DEFAULT_COVERAGE_CONFIG: CoverageConfig = {
+  staleAfterDays: 30,
+  criticalAreas: [],
+  autoSnapshotOnCoverage: true,
+};

package/src/coverage/why.ts

@@ -0,0 +1,122 @@
+import type { Snapshot } from '../graph/types';
+import { computeAcGapScore, computeAreaRisk, RISK_WEIGHTS } from './risk';
+import { computeAcStatus, computeAreaStatus, computeTicketStatus } from './status';
+import type { CoverageConfig } from './types';
+
+function daysBetween(a: Date, b: Date): number {
+  return Math.abs(a.getTime() - b.getTime()) / (1000 * 60 * 60 * 24);
+}
+
+function pad(s: string, n: number): string {
+  return s.length >= n ? s : `${s}${' '.repeat(n - s.length)}`;
+}
+
+export function buildWhyArea(
+  areaId: string,
+  snap: Snapshot,
+  config: CoverageConfig,
+  now: Date,
+): string {
+  if (snap.areas[areaId] === undefined) return `Unknown area: ${areaId}\n`;
+
+  const status = computeAreaStatus(areaId, snap, config.staleAfterDays, now);
+  const isCritical = config.criticalAreas.includes(areaId);
+  const heading = isCritical ? `${status}, critical` : status;
+
+  const risk = computeAreaRisk(areaId, snap, config, now);
+  const recentTickets = snap.edges
+    .filter((e) => e.kind === 'modifies' && e.to === areaId)
+    .map((e) => snap.tickets[e.from])
+    .filter((t): t is NonNullable<typeof t> => t !== undefined)
+    .filter((t) => daysBetween(now, new Date(t.fetchedAt)) <= config.staleAfterDays);
+  const pomsInArea = snap.edges
+    .filter((e) => e.kind === 'covers' && e.to === areaId)
+    .map((e) => e.from);
+  const scenariosInArea = new Set(
+    snap.edges.filter((e) => e.kind === 'uses' && pomsInArea.includes(e.to)).map((e) => e.from),
+  );
+  const recentBugs = snap.classifications
+    .filter((c) => scenariosInArea.has(c.scenarioId))
+    .filter((c) => RISK_WEIGHTS.bugClassifications.has(c.classification))
+    .filter((c) => daysBetween(now, new Date(c.ts)) <= config.staleAfterDays);
+  const boost = isCritical ? 2 : 1;
+
+  const lines: string[] = [
+    '',
+    `Area: ${areaId} (${heading})`,
+    '',
+    `Risk score: ${risk}`,
+    '  recent_tickets × critical_boost + recent_bugs',
+    `  = ${recentTickets.length} × ${boost} + ${recentBugs.length} = ${risk}`,
+    '',
+    `Recent tickets (${recentTickets.length}, last ${config.staleAfterDays}d):`,
+  ];
+  for (const t of recentTickets) {
+    lines.push(`  ${t.id}  ${t.fetchedAt.slice(0, 10)}  ${t.summary}`);
+  }
+  if (recentTickets.length === 0) lines.push('  (none)');
+  lines.push('');
+  if (recentBugs.length > 0) {
+    lines.push(`Recent bugs (${recentBugs.length}, last ${config.staleAfterDays}d):`);
+    for (const b of recentBugs) {
+      lines.push(`  ${b.ts.slice(0, 10)}  ${pad(b.classification, 14)} scenario ${b.scenarioId}`);
+    }
+    lines.push('');
+  }
+  if (status === 'UNCOVERED') {
+    lines.push('No POM covers this area. To draft scenarios:');
+    lines.push(`  /xera-fill-gap ${areaId}`);
+  }
+  return `${lines.join('\n')}\n`;
+}
+
+export function buildWhyTicket(
+  ticketId: string,
+  snap: Snapshot,
+  config: CoverageConfig,
+  now: Date,
+): string {
+  const ticket = snap.tickets[ticketId];
+  if (!ticket) return `Unknown ticket: ${ticketId}\n`;
+
+  const status = computeTicketStatus(ticketId, snap, config.staleAfterDays, now);
+  const acs = Object.values(snap.acNodes)
+    .filter((ac) => ac.ticketId === ticketId)
+    .sort((a, b) => a.index - b.index);
+  const satisfiedCount = acs.filter(
+    (ac) => computeAcStatus(ac.id, snap, config.staleAfterDays, now) === 'SATISFIED',
+  ).length;
+  const gapScore = computeAcGapScore(ticketId, snap, config, now);
+
+  const days = daysBetween(now, new Date(ticket.fetchedAt));
+  let boostLabel: string;
+  if (days <= RISK_WEIGHTS.recencyThresholdDays) boostLabel = '×2.0';
+  else if (days <= config.staleAfterDays) boostLabel = '×1.0';
+  else boostLabel = '×0.5';
+
+  const lines: string[] = [
+    '',
+    `Ticket: ${ticketId} (${status}, ${satisfiedCount}/${acs.length} ACs covered)`,
+    `  Title: ${ticket.summary}`,
+    `  Fetched: ${ticket.fetchedAt.slice(0, 10)} (${Math.floor(days)}d ago, recency boost ${boostLabel})`,
+    `  AC gap score: ${gapScore}`,
+    '',
+    'Acceptance Criteria:',
+  ];
+  for (const ac of acs) {
+    const acStatus = computeAcStatus(ac.id, snap, config.staleAfterDays, now);
+    const marker = acStatus === 'SATISFIED' ? '✓' : '✗';
+    const satisfyingScenarios = snap.edges
+      .filter((e) => e.kind === 'satisfies' && e.to === ac.id)
+      .map((e) => e.from);
+    const scenarioRef =
+      satisfyingScenarios.length > 0 ? ` — scenario "${satisfyingScenarios[0]}"` : '';
+    lines.push(`  ${marker} AC-${ac.index}  ${ac.text}${scenarioRef}`);
+  }
+  lines.push('');
+  if (status === 'INCOMPLETE') {
+    lines.push('To draft scenarios for unsatisfied ACs:');
+    lines.push(`  /xera-fill-gap --ticket ${ticketId}`);
+  }
+  return `${lines.join('\n')}\n`;
+}

package/src/graph/render.ts

@@ -1,7 +1,8 @@
 import { readFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import type { EdgeRecord, Snapshot } from './types';
+import type { CoverageReport } from '../coverage/report';
+import type { CoverageSnapshotPayload, EdgeRecord, Snapshot } from './types';
 
 export interface VisNode {
   id: string;
@@ -299,10 +300,16 @@ function statsToHuman(s: GraphStats): string {
   return `${s.tickets} tickets · ${s.scenarios} scenarios · ${s.poms} POMs · ${s.edges} edges`;
 }
 
+export interface CoverageInput {
+  report: CoverageReport;
+  snapshots: CoverageSnapshotPayload[]; // Trend tab data (deduped by day, sorted asc)
+}
+
 export interface RenderHtmlInput {
   data: { nodes: VisNode[]; edges: VisEdge[] };
   stats: GraphStats;
   generatedAt: string;
+  coverage?: CoverageInput; // NEW v0.8.1
 }
 
 export function renderHtml(input: RenderHtmlInput): string {
@@ -314,11 +321,18 @@ export function renderHtml(input: RenderHtmlInput): string {
   const graphJson = JSON.stringify(input.data);
   const statsHuman = statsToHuman(input.stats);
 
+  const coverageTabButton = input.coverage ? '<button data-tab="coverage">Coverage</button>' : '';
+  const coverageTabPanel = input.coverage ? loadTemplate('coverage-panel.html.fragment') : '';
+  const coverageJson = input.coverage ? JSON.stringify(input.coverage) : 'null';
+
   return template
     .replace('{{CSS}}', () => css)
     .replace('{{STATS}}', () => statsHuman)
     .replace('{{GENERATED_AT}}', () => input.generatedAt)
     .replace('{{VIS_NETWORK_JS}}', () => visNetwork)
     .replace('{{GRAPH_DATA}}', () => graphJson)
-    .replace('{{INTERACTION_JS}}', () => js);
+    .replace('{{INTERACTION_JS}}', () => js)
+    .replace('{{COVERAGE_TAB_BUTTON}}', () => coverageTabButton)
+    .replace('{{COVERAGE_TAB_PANEL}}', () => coverageTabPanel)
+    .replace('{{COVERAGE_DATA}}', () => coverageJson);
 }

package/src/graph/schema.ts

@@ -38,6 +38,7 @@ const scenarioGenerated = z
     priority: z.enum(['p0', 'p1', 'p2']),
     featureHash: z.string(),
     generatedAt: iso,
+    satisfiesAcs: z.array(z.number().int().nonnegative()).optional(),
   })
   .passthrough();
 
@@ -105,7 +106,16 @@ const classificationDisputed = z
 
 const edgeDiscovered = z
   .object({
-    kind: z.enum(['tests', 'uses', 'covers', 'modifies', 'jira-linked', 'similar', 'ran']),
+    kind: z.enum([
+      'tests',
+      'uses',
+      'covers',
+      'modifies',
+      'jira-linked',
+      'similar',
+      'ran',
+      'satisfies',
+    ]),
     from: z.string(),
     to: z.string(),
     confidence: z.number().min(0).max(1).optional(),
@@ -113,6 +123,47 @@ const edgeDiscovered = z
   })
   .passthrough();
 
+const coverageSnapshot = z
+  .object({
+    ts: iso,
+    windowDays: z.number().int().positive(),
+    areas: z.array(
+      z.object({
+        id: z.string().regex(/^[a-z0-9-]+$/),
+        status: z.enum(['UNCOVERED', 'STALE', 'COVERED']),
+        risk: z.number().nonnegative(),
+        breakdown: z.object({
+          recentTickets: z.number().int().nonnegative(),
+          recentBugs: z.number().int().nonnegative(),
+          criticalBoost: z.union([z.literal(1), z.literal(2)]),
+        }),
+      }),
+    ),
+    tickets: z.array(
+      z.object({
+        id: z.string().regex(/^[A-Z][A-Z0-9]*-\d+$/),
+        acCount: z.number().int().nonnegative(),
+        satisfiedCount: z.number().int().nonnegative(),
+        gapScore: z.number().nonnegative(),
+      }),
+    ),
+  })
+  .passthrough();
+
+const acCoverageBackfilled = z
+  .object({
+    ts: iso,
+    ticketId: z.string().regex(/^[A-Z][A-Z0-9]*-\d+$/),
+    mappings: z.array(
+      z.object({
+        scenarioId: z.string().min(1),
+        satisfiesAcs: z.array(z.number().int().nonnegative()),
+        confidence: z.number().min(0).max(1),
+      }),
+    ),
+  })
+  .passthrough();
+
 const base = {
   event_id: z.string().min(20),
   schema_version: schemaV,
@@ -134,6 +185,8 @@ export const EventSchema = z.discriminatedUnion('type', [
     payload: classificationDisputed,
   }),
   z.object({ ...base, type: z.literal('edge.discovered'), payload: edgeDiscovered }),
+  z.object({ ...base, type: z.literal('coverage.snapshot'), payload: coverageSnapshot }),
+  z.object({ ...base, type: z.literal('ac-coverage.backfilled'), payload: acCoverageBackfilled }),
 ]);
 
 export function safeParseEvent(

package/src/graph/store.ts

@@ -11,6 +11,8 @@ import { dirname } from 'node:path';
 import { currentYyyyMm, graphPaths } from './paths';
 import { safeParseEvent } from './schema';
 import type {
+  ACNode,
+  Classification,
   EdgeRecord,
   Event,
   FailureNode,
@@ -98,12 +100,19 @@ export function deriveSnapshot(events: Event[]): Snapshot {
   const areas: Record<string, { id: string }> = {};
   const edges: EdgeRecord[] = [];
   const latestFailures: Record<string, FailureNode> = {};
+  const acNodes: Record<string, ACNode> = {};
+  const classifications: Array<{
+    scenarioId: string;
+    classification: Classification;
+    ts: string;
+  }> = [];
 
   for (const e of events) {
     switch (e.type) {
-      case 'ticket.fetched':
-        tickets[e.payload.ticketId] = {
-          id: e.payload.ticketId,
+      case 'ticket.fetched': {
+        const tid = e.payload.ticketId;
+        tickets[tid] = {
+          id: tid,
           summary: e.payload.summary,
           ac: e.payload.ac,
           storyHash: e.payload.storyHash,
@@ -114,18 +123,33 @@ export function deriveSnapshot(events: Event[]): Snapshot {
         for (const link of e.payload.jiraLinks) {
           edges.push({
             kind: 'jira-linked',
-            from: e.payload.ticketId,
+            from: tid,
             to: link.ticketId,
             source: `jira:${link.relation}`,
             discoveredAt: e.ts,
           });
         }
+        // NEW v0.8: drop prior ACNodes for this ticket, materialize fresh
+        for (const acId of Object.keys(acNodes)) {
+          if (acNodes[acId]?.ticketId === tid) delete acNodes[acId];
+        }
+        e.payload.ac.forEach((text, index) => {
+          const acId = `${tid}#ac-${index}`;
+          acNodes[acId] = { id: acId, ticketId: tid, index, text };
+        });
+        // Prune satisfies edges that target ACNodes no longer present
+        for (let i = edges.length - 1; i >= 0; i--) {
+          const ed = edges[i]!;
+          if (ed.kind !== 'satisfies') continue;
+          if (acNodes[ed.to] === undefined) edges.splice(i, 1);
+        }
         break;
+      }
       case 'ticket.enriched':
         if (tickets[e.payload.ticketId])
           tickets[e.payload.ticketId]!.enrichedAt = e.payload.enrichedAt;
         break;
-      case 'scenario.generated':
+      case 'scenario.generated': {
         scenarios[e.payload.scenarioId] = {
           id: e.payload.scenarioId,
           ticketId: e.payload.ticketId,
@@ -142,7 +166,33 @@ export function deriveSnapshot(events: Event[]): Snapshot {
           source: 'xera-script',
           discoveredAt: e.ts,
         });
+        // NEW v0.8: drop prior eager satisfies edges for this scenario, then emit fresh
+        if (e.payload.satisfiesAcs && e.payload.satisfiesAcs.length > 0) {
+          for (let i = edges.length - 1; i >= 0; i--) {
+            const ed = edges[i]!;
+            if (
+              ed.kind === 'satisfies' &&
+              ed.from === e.payload.scenarioId &&
+              ed.source === 'xera-script'
+            ) {
+              edges.splice(i, 1);
+            }
+          }
+          for (const acIdx of e.payload.satisfiesAcs) {
+            const acId = `${e.payload.ticketId}#ac-${acIdx}`;
+            if (acNodes[acId] === undefined) continue;
+            edges.push({
+              kind: 'satisfies',
+              from: e.payload.scenarioId,
+              to: acId,
+              confidence: 1.0,
+              source: 'xera-script',
+              discoveredAt: e.ts,
+            });
+          }
+        }
         break;
+      }
       case 'pom.generated':
         poms[e.payload.pomId] = {
           id: e.payload.pomId,
@@ -192,7 +242,45 @@ export function deriveSnapshot(events: Event[]): Snapshot {
         }
         break;
       }
-      // run.classified: not materialized in snapshot
+      case 'run.classified':
+        classifications.push({
+          scenarioId: e.payload.scenarioId,
+          classification: e.payload.classification,
+          ts: e.ts,
+        });
+        break;
+      case 'ac-coverage.backfilled': {
+        const { ts, ticketId, mappings } = e.payload;
+        // Remove prior backfill edges for this ticket (idempotent)
+        for (let i = edges.length - 1; i >= 0; i--) {
+          const ed = edges[i]!;
+          if (
+            ed.kind === 'satisfies' &&
+            ed.source === 'ac-coverage' &&
+            ed.to.startsWith(`${ticketId}#ac-`)
+          ) {
+            edges.splice(i, 1);
+          }
+        }
+        for (const m of mappings) {
+          for (const acIdx of m.satisfiesAcs) {
+            const acId = `${ticketId}#ac-${acIdx}`;
+            if (acNodes[acId] === undefined) continue;
+            edges.push({
+              kind: 'satisfies',
+              from: m.scenarioId,
+              to: acId,
+              confidence: m.confidence,
+              source: 'ac-coverage',
+              discoveredAt: ts,
+            });
+          }
+        }
+        break;
+      }
+      case 'coverage.snapshot':
+        // Read-side only — Trend tab queries these events directly from JSONL.
+        break;
       default:
         break;
     }
@@ -209,6 +297,8 @@ export function deriveSnapshot(events: Event[]): Snapshot {
     areas,
     edges,
     latest_failures: latestFailures,
+    acNodes,
+    classifications,
   };
 }
 

package/src/graph/templates/coverage-panel.html.fragment

@@ -0,0 +1,20 @@
+<section data-tab-panel="coverage" hidden>
+  <nav class="subtabs">
+    <button data-subtab="map" class="active">Map</button>
+    <button data-subtab="list">List</button>
+    <button data-subtab="trend">Trend</button>
+  </nav>
+  <div data-subpanel="map" class="active">
+    <p class="subpanel-hint">Area nodes are colored by status. Red = UNCOVERED, amber = STALE, green = COVERED. Other nodes neutral.</p>
+    <main id="coverage-map-canvas"></main>
+  </div>
+  <div data-subpanel="list" hidden>
+    <table id="coverage-list-table"><thead><tr><th>Status</th><th>Area</th><th>Risk</th><th>Recent tickets</th><th>Recent bugs</th></tr></thead><tbody></tbody></table>
+    <h3>AC Gaps</h3>
+    <table id="coverage-ac-table"><thead><tr><th>Ticket</th><th>Coverage</th><th>Gap</th><th>Unsatisfied</th></tr></thead><tbody></tbody></table>
+  </div>
+  <div data-subpanel="trend" hidden>
+    <p class="subpanel-hint">UNCOVERED + STALE area count over time (one point per day, latest snapshot wins).</p>
+    <div id="coverage-trend-svg"></div>
+  </div>
+</section>

package/src/graph/templates/graph.css

@@ -340,3 +340,85 @@ body {
 #footer span {
   color: #374151;
 }
+
+/* ─── Coverage tab + subtabs ──────────────────────── */
+.toplevel-tabs {
+  display: flex;
+  gap: 4px;
+}
+.toplevel-tabs button {
+  padding: 6px 12px;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  color: #9ca3af;
+}
+.toplevel-tabs button.active {
+  border-bottom: 2px solid #3b82f6;
+  font-weight: bold;
+  color: #e2e8f0;
+}
+[data-tab-panel] {
+  display: none;
+}
+[data-tab-panel].active {
+  display: block;
+}
+.subtabs {
+  display: flex;
+  gap: 4px;
+  padding: 8px;
+}
+.subtabs button {
+  padding: 4px 10px;
+  border: 1px solid #d1d5db;
+  background: white;
+  cursor: pointer;
+}
+.subtabs button.active {
+  background: #3b82f6;
+  color: white;
+}
+[data-subpanel] {
+  padding: 12px;
+}
+.subpanel-hint {
+  color: #6b7280;
+  font-size: 13px;
+  margin: 4px 0 12px;
+}
+#coverage-list-table,
+#coverage-ac-table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 13px;
+}
+#coverage-list-table th,
+#coverage-list-table td,
+#coverage-ac-table th,
+#coverage-ac-table td {
+  border: 1px solid #e5e7eb;
+  padding: 6px 10px;
+  text-align: left;
+}
+#coverage-list-table th {
+  background: #f9fafb;
+  cursor: pointer;
+}
+.status-uncovered {
+  background: #fee2e2;
+}
+.status-stale {
+  background: #fef3c7;
+}
+.status-covered {
+  background: #d1fae5;
+}
+#coverage-map-canvas {
+  width: 100%;
+  height: 600px;
+}
+#coverage-trend-svg {
+  width: 100%;
+  min-height: 300px;
+}