From c4ac8210c75d388e36d6af94ba5509de586714a4 Mon Sep 17 00:00:00 2001
From: Torgny Bjers <torgny@bjers.org>
Date: Mon, 6 Jul 2026 23:10:24 -0400
Subject: [PATCH 1/2] chore: add badge-category-selection plan file

---
 docs/plans/badge-category-selection-plan.md | 108 ++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 docs/plans/badge-category-selection-plan.md

diff --git a/docs/plans/badge-category-selection-plan.md b/docs/plans/badge-category-selection-plan.md
new file mode 100644
index 0000000..a135be8
--- /dev/null
+++ b/docs/plans/badge-category-selection-plan.md
@@ -0,0 +1,108 @@
+# Add category selection to the "Create status badge" modal
+
+## Context
+
+Coverage/complexity/duplication data can already be tracked per **category** — a free-form
+label (`coverage_runs.category` / `coverage_daily.category`, migration `0003_categories.sql`)
+that partitions independent report series within one project (e.g. "backend" vs "frontend").
+The main project dashboard already renders one trend card per discovered category
+(`dashboard/src/routes/[owner]/[repo]/+page.svelte`), and the PR-check/baseline endpoint
+already reads a `?category=` query param (`src/routes/baseline.ts`).
+
+The "Create status badge" modal (`BadgeModal.svelte`) and its backend
+(`src/routes/badge.ts`) were never updated for this: the modal only lets a user pick a
+**metric** (coverage, complexity, duplication, etc.) and always produces a badge URL with no
+category, and the badge endpoint always reads the `'default'` category regardless of what's
+requested. Users with categorized projects can't get a status badge for anything but the
+implicit default series. This plan adds a category picker to the modal and wires it through
+to the badge endpoint, including the generated badge's label, for all metric types.
+
+## Backend: `src/routes/badge.ts`
+
+`getLatestCoverage(db, projectId, branch, category)` already accepts a `category` param
+(default `'default'`) — `src/lib/db.ts:274`. `badge.ts` just never passes it through. Change:
+
+- Read `const category = c.req.query('category') ?? 'default';` (same pattern as
+  `src/routes/api.ts:35` and `baseline.ts`).
+- Pass it into `getLatestCoverage(c.env.DB, project.id, project.default_branch, category)`.
+- Include the category in the returned `label` when it isn't the default, so the badge itself
+  communicates which series it's showing:
+  ```ts
+  label: category === 'default' ? metricName : `${category} ${metricName}`,
+  ```
+- No new validation needed — an unknown/malformed category simply yields no matching row and
+  `getLatestCoverage` returns `null`, which already 404s (consistent with how `baseline.ts`/
+  `api.ts` treat category as an unvalidated read-side filter).
+
+This applies uniformly to every metric type (`coverage`, `branch_coverage`, `complexity`,
+`cognitive`, `duplication`, `maintainability`) since category is orthogonal to metric — one
+category row carries all metric columns.
+
+## Frontend: `dashboard/src/lib/components/BadgeModal.svelte`
+
+1. Add a `defaultBranch: string` prop (needed to query categories for the right branch; the
+   badge endpoint itself always uses the project's default branch, so the picker must match).
+2. Add state:
+   - `categories = $state<string[]>(['default'])`
+   - `selectedCategory = $state('default')`
+3. Fetch categories whenever the selected metric changes, reusing the existing helper
+   `fetchTrendByCategory(owner, repo, selectedMetric, defaultBranch, 1)` from
+   `dashboard/src/lib/api.ts:25` (already used by the project page to discover categories) —
+   no new endpoint required. On response, take `result.categories.map(c => c.category)`;
+   fall back to `['default']` on an empty list or fetch error. If the current
+   `selectedCategory` isn't in the new list, reset it to `categories[0] ?? 'default'`.
+   - Doing this per-metric (rather than once) is intentional: a category with no data for the
+     currently selected metric wouldn't produce a working badge anyway (`getLatestCoverage`
+     would return a null value for that column), so scoping the picker to
+     metric+category combinations that actually have data avoids offering dead combinations.
+4. Add a second `<select>` next to the existing metric select (mirroring its markup/styles at
+   lines 151–158), labeled "Category", bound to `selectedCategory`, listing `categories`.
+5. Update the derived badge URL (`badgeEndpointUrl`, lines 32–34) to append
+   `?category=${selectedCategory}` only when `selectedCategory !== 'default'`, so existing
+   badges for uncategorized projects keep their current clean URL.
+6. Update the alt text / markdown snippet (line 38) to mention the category when non-default,
+   e.g. `` `${selectedMetric}${selectedCategory !== 'default' ? ` (${selectedCategory})` : ''} badge` ``,
+   matching the label convention used server-side.
+
+## Wiring: `dashboard/src/routes/[owner]/[repo]/+page.svelte`
+
+Pass the new prop at the existing `<BadgeModal ... />` call (lines 143–149):
+```svelte
+<BadgeModal
+  owner={data.project.owner_login}
+  repo={data.project.repo_name}
+  projectId={data.project.id}
+  badgeEnabled={data.project.badge_enabled}
+  defaultBranch={data.project.default_branch}
+  onclose={() => (badgeModalOpen = false)}
+/>
+```
+
+## Tests: `test/badge.test.ts`
+
+Extend the existing helpers and add cases:
+- Extend `seedCoverage()` to accept a `category` field (default `'default'`), inserting into
+  the `category` column.
+- Extend `getBadge()` to accept an optional `category` and append it as a `?category=`
+  query param.
+- New cases:
+  - A badge for a non-default category returns the correct value when that category has its
+    own coverage row (distinct from the `'default'` row for the same project).
+  - The label includes the category name when non-default (e.g. `"backend coverage"`), and
+    stays as just the metric name when `category` is omitted/`'default'`.
+  - Requesting a category with no data 404s even when the `'default'` category has data for
+    that metric.
+  - Do this for at least one non-coverage metric (e.g. `complexity`/`cyclomatic` or
+    `duplication`) to confirm category plumbing isn't coverage-specific.
+
+## Verification
+
+- `npm test` (badge.test.ts additions) to confirm backend category filtering + label logic.
+- `npm run dev` (dashboard + worker together): seed a project with two categories via the CI
+  ingest endpoint (or local seed SQL), open "Create status badge", switch the category
+  dropdown, and confirm:
+  - The metric/category combinations with data render badge previews and correct shields.io
+    URLs (`?category=` present only for non-default).
+  - Switching metric re-fetches/re-scopes the category list appropriately.
+  - Existing single-category (`'default'`) projects are unaffected — URL has no `category`
+    query param and label is unchanged from current behavior.

From 5293c61e91aad0d333b4fb0e9d669ae30e5708f4 Mon Sep 17 00:00:00 2001
From: Torgny Bjers <torgny@bjers.org>
Date: Thu, 9 Jul 2026 23:40:33 -0400
Subject: [PATCH 2/2] feat: add category selection to status badges and
 time-windowed trend charts

- Wire category filtering through the badge endpoint and modal, per the
  badge-category-selection plan.
- Add a relative time-range selector (15m-30d) to project detail trend
  charts, backed by a server-side window+anchor query so short-history
  or staggered-cadence categories render as full-width lines instead of
  a lone dot or partial-width segment.
- Switch the project list's multi-category overlay to a fixed, aligned
  30d window with gradient-filled lines in distinct colors per category.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 dashboard/src/lib/api.ts                      |  33 +-
 dashboard/src/lib/chartFill.ts                |  18 +
 .../src/lib/components/BadgeModal.svelte      |  43 ++-
 .../src/lib/components/MultiSparkLine.svelte  |  82 +++++
 dashboard/src/lib/components/SparkLine.svelte |  10 +-
 .../src/lib/components/TrendChart.svelte      |  17 +-
 dashboard/src/lib/types.ts                    |  24 +-
 dashboard/src/routes/+page.svelte             |  74 +++-
 dashboard/src/routes/+page.ts                 |  32 +-
 .../src/routes/[owner]/[repo]/+page.svelte    |  16 +-
 dashboard/src/routes/[owner]/[repo]/+page.ts  |   7 +-
 dashboard/tests/time-range.spec.ts            |  95 ++++++
 docs/plans/trend-chart-time-windows-plan.md   | 213 ++++++++++++
 src/lib/db.ts                                 | 316 ++++++++++++++++++
 src/lib/timeRanges.ts                         |  19 ++
 src/routes/api.ts                             |  30 +-
 src/routes/badge.ts                           |   5 +-
 test/api.test.ts                              |  26 ++
 test/badge.test.ts                            |  74 +++-
 test/db.test.ts                               | 100 ++++++
 20 files changed, 1140 insertions(+), 94 deletions(-)
 create mode 100644 dashboard/src/lib/chartFill.ts
 create mode 100644 dashboard/src/lib/components/MultiSparkLine.svelte
 create mode 100644 dashboard/tests/time-range.spec.ts
 create mode 100644 docs/plans/trend-chart-time-windows-plan.md
 create mode 100644 src/lib/timeRanges.ts

diff --git a/dashboard/src/lib/api.ts b/dashboard/src/lib/api.ts
index 9d44474..4083ffb 100644
--- a/dashboard/src/lib/api.ts
+++ b/dashboard/src/lib/api.ts
@@ -1,4 +1,4 @@
-import type { ProjectRow, TrendResponse, GroupedTrendResponse } from './types';
+import type { ProjectRow, GroupedTrendResponse, RangeKey } from './types';
 
 export async function fetchProjects(fetchFn: typeof fetch = fetch): Promise<ProjectRow[]> {
   const res = await fetchFn('/api/projects', { redirect: 'manual' });
@@ -6,20 +6,13 @@ export async function fetchProjects(fetchFn: typeof fetch = fetch): Promise<Proj
   return res.json() as Promise<ProjectRow[]>;
 }
 
-export async function fetchTrend(
-  owner: string,
-  repo: string,
-  metric: string,
-  branch: string,
-  limit: number,
-  fetchFn: typeof fetch = fetch,
-): Promise<TrendResponse> {
-  const params = new URLSearchParams({ metric, branch, limit: String(limit) });
-  const res = await fetchFn(`/api/projects/${owner}/${repo}/metrics?${params}`, {
-    redirect: 'manual',
-  });
-  if (!res.ok) throw new Error(`Failed to fetch trend: HTTP ${res.status}`);
-  return res.json() as Promise<TrendResponse>;
+export interface TrendOptions {
+  /** Row-count cap for the legacy (unwindowed) fetch — ignored when `range` is set. */
+  limit?: number;
+  /** Relative time window; when set, the backend returns an edge-anchored, windowed series. */
+  range?: RangeKey;
+  /** Align all categories to a shared right edge, carrying stale series forward. Requires `range`. */
+  align?: boolean;
 }
 
 export async function fetchTrendByCategory(
@@ -27,10 +20,16 @@ export async function fetchTrendByCategory(
   repo: string,
   metric: string,
   branch: string,
-  limit: number,
+  options: TrendOptions,
   fetchFn: typeof fetch = fetch,
 ): Promise<GroupedTrendResponse> {
-  const params = new URLSearchParams({ metric, branch, limit: String(limit) });
+  const params = new URLSearchParams({ metric, branch });
+  if (options.range) {
+    params.set('range', options.range);
+    if (options.align) params.set('align', 'true');
+  } else {
+    params.set('limit', String(options.limit ?? 100));
+  }
   const res = await fetchFn(`/api/projects/${owner}/${repo}/metrics/categories?${params}`, {
     redirect: 'manual',
   });
diff --git a/dashboard/src/lib/chartFill.ts b/dashboard/src/lib/chartFill.ts
new file mode 100644
index 0000000..b26306e
--- /dev/null
+++ b/dashboard/src/lib/chartFill.ts
@@ -0,0 +1,18 @@
+import type uPlot from 'uplot';
+
+export function hexAlpha(hex: string, alpha: number): string {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+
+/** Top-to-bottom fading fill, used by every uPlot line series in the dashboard. */
+export function gradientFill(color: string, topAlpha = 0.28, bottomAlpha = 0.02) {
+  return (u: uPlot) => {
+    const grad = u.ctx.createLinearGradient(0, u.bbox.top, 0, u.bbox.top + u.bbox.height);
+    grad.addColorStop(0, hexAlpha(color, topAlpha));
+    grad.addColorStop(1, hexAlpha(color, bottomAlpha));
+    return grad;
+  };
+}
diff --git a/dashboard/src/lib/components/BadgeModal.svelte b/dashboard/src/lib/components/BadgeModal.svelte
index f1b7c9e..241d127 100644
--- a/dashboard/src/lib/components/BadgeModal.svelte
+++ b/dashboard/src/lib/components/BadgeModal.svelte
@@ -1,18 +1,21 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { invalidateAll } from '$app/navigation';
+  import { fetchTrendByCategory } from '$lib/api';
 
   let {
     owner,
     repo,
     projectId,
     badgeEnabled,
+    defaultBranch,
     onclose,
   }: {
     owner: string;
     repo: string;
     projectId: number;
     badgeEnabled: number;
+    defaultBranch: string;
     onclose: () => void;
   } = $props();
 
@@ -26,16 +29,42 @@
   ];
 
   let selectedMetric = $state('coverage');
+  let categories = $state<string[]>(['default']);
+  let selectedCategory = $state('default');
   let localBadgeEnabled = $state(untrack(() => badgeEnabled));
   let toggling = $state(false);
 
+  $effect(() => {
+    const metric = selectedMetric;
+    (async () => {
+      let next = ['default'];
+      try {
+        const result = await fetchTrendByCategory(owner, repo, metric, defaultBranch, { limit: 1 });
+        if (result.categories.length > 0) {
+          next = result.categories.map((c) => c.category);
+        }
+      } catch {
+        // fall back to ['default']
+      }
+      categories = next;
+      if (!next.includes(selectedCategory)) {
+        selectedCategory = next[0] ?? 'default';
+      }
+    })();
+  });
+
   const badgeEndpointUrl = $derived(
-    `${window.location.origin}/api/badge/${owner}/${repo}/${selectedMetric}.json`,
+    `${window.location.origin}/api/badge/${owner}/${repo}/${selectedMetric}.json${
+      selectedCategory !== 'default' ? `?category=${encodeURIComponent(selectedCategory)}` : ''
+    }`,
   );
   const shieldsUrl = $derived(
     `https://img.shields.io/endpoint?url=${encodeURIComponent(badgeEndpointUrl)}`,
   );
-  const markdownSnippet = $derived(`![${selectedMetric} badge](${shieldsUrl})`);
+  const badgeAltText = $derived(
+    `${selectedMetric}${selectedCategory !== 'default' ? ` (${selectedCategory})` : ''} badge`,
+  );
+  const markdownSnippet = $derived(`![${badgeAltText}](${shieldsUrl})`);
   const rstSnippet = $derived(`.. image:: ${shieldsUrl}`);
 
   let copiedField: string | null = $state(null);
@@ -155,11 +184,18 @@
             <option value={m.value}>{m.label}</option>
           {/each}
         </select>
+
+        <label for="badge-category-select" class="metric-label">Category</label>
+        <select id="badge-category-select" class="metric-select" bind:value={selectedCategory}>
+          {#each categories as cat (cat)}
+            <option value={cat}>{cat}</option>
+          {/each}
+        </select>
       </div>
 
       <div class="badge-preview">
         {#if localBadgeEnabled}
-          <img src={shieldsUrl} alt="{selectedMetric} status badge" />
+          <img src={shieldsUrl} alt="{badgeAltText} status badge" />
         {:else}
           <span class="badge-placeholder">badge preview unavailable</span>
         {/if}
@@ -358,6 +394,7 @@
     display: flex;
     align-items: center;
     gap: 10px;
+    flex-wrap: wrap;
   }
 
   .metric-label {
diff --git a/dashboard/src/lib/components/MultiSparkLine.svelte b/dashboard/src/lib/components/MultiSparkLine.svelte
new file mode 100644
index 0000000..d1ad06c
--- /dev/null
+++ b/dashboard/src/lib/components/MultiSparkLine.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+  import uPlot from 'uplot';
+  import 'uplot/dist/uPlot.min.css';
+  import { gradientFill } from '../chartFill';
+
+  let {
+    series,
+  }: {
+    series: { category: string; timestamps: number[]; values: number[]; color: string }[];
+  } = $props();
+
+  let container: HTMLDivElement;
+  let chart: uPlot | null = null;
+
+  function buildChart() {
+    chart?.destroy();
+    chart = null;
+    if (!container || series.length === 0) return;
+
+    const tables = series.map((s) => [s.timestamps, s.values]) as uPlot.AlignedData[];
+    const joined = series.length > 1 ? uPlot.join(tables) : tables[0];
+    if ((joined[0] as number[]).length < 2) return;
+
+    chart = new uPlot(
+      {
+        width: container.clientWidth,
+        height: 44,
+        padding: [4, 0, 4, 0],
+        axes: [{ show: false, size: 0 }, { show: false, size: 0 }],
+        scales: { x: { time: true } },
+        legend: { show: false },
+        cursor: { show: false },
+        select: { show: false },
+        series: [
+          {},
+          ...series.map((s) => ({
+            stroke: s.color,
+            fill: gradientFill(s.color, 0.16, 0.01),
+            width: 1.5,
+            points: { show: false },
+          })),
+        ],
+      },
+      joined,
+      container,
+    );
+  }
+
+  $effect(() => {
+    void series;
+    buildChart();
+
+    if (!container) return;
+    const observer = new ResizeObserver(() => {
+      if (chart && container) {
+        chart.setSize({ width: container.clientWidth, height: 44 });
+      }
+    });
+    observer.observe(container);
+
+    return () => {
+      observer.disconnect();
+      chart?.destroy();
+      chart = null;
+    };
+  });
+</script>
+
+<div bind:this={container} class="multi-sparkline"></div>
+
+<style>
+  .multi-sparkline {
+    width: 100%;
+  }
+  .multi-sparkline :global(.u-wrap) {
+    overflow: visible;
+  }
+  .multi-sparkline :global(.u-title),
+  .multi-sparkline :global(.u-legend) {
+    display: none;
+  }
+</style>
diff --git a/dashboard/src/lib/components/SparkLine.svelte b/dashboard/src/lib/components/SparkLine.svelte
index 5e65cb4..086b043 100644
--- a/dashboard/src/lib/components/SparkLine.svelte
+++ b/dashboard/src/lib/components/SparkLine.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import uPlot from 'uplot';
   import 'uplot/dist/uPlot.min.css';
+  import { gradientFill } from '../chartFill';
 
   let {
     timestamps,
@@ -11,13 +12,6 @@
   let container: HTMLDivElement;
   let chart: uPlot | null = null;
 
-  function hexAlpha(hex: string, alpha: number): string {
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    return `rgba(${r},${g},${b},${alpha})`;
-  }
-
   function buildChart(c: string) {
     chart?.destroy();
     if (timestamps.length < 2 || !container) { chart = null; return; }
@@ -36,7 +30,7 @@
           {},
           {
             stroke: c,
-            fill: hexAlpha(c, 0.2),
+            fill: gradientFill(c),
             width: 1.5,
             points: { show: false },
           },
diff --git a/dashboard/src/lib/components/TrendChart.svelte b/dashboard/src/lib/components/TrendChart.svelte
index 87470b3..a5e4b28 100644
--- a/dashboard/src/lib/components/TrendChart.svelte
+++ b/dashboard/src/lib/components/TrendChart.svelte
@@ -2,6 +2,7 @@
   import uPlot from 'uplot';
   import 'uplot/dist/uPlot.min.css';
   import type { MetricPoint } from '../types';
+  import { hexAlpha, gradientFill } from '../chartFill';
 
   let {
     data,
@@ -24,22 +25,6 @@
   let container: HTMLDivElement;
   let chart: uPlot | null = null;
 
-  function hexAlpha(hex: string, alpha: number): string {
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    return `rgba(${r},${g},${b},${alpha})`;
-  }
-
-  function gradientFill(c: string) {
-    return (u: uPlot) => {
-      const grad = u.ctx.createLinearGradient(0, u.bbox.top, 0, u.bbox.top + u.bbox.height);
-      grad.addColorStop(0, hexAlpha(c, 0.28));
-      grad.addColorStop(1, hexAlpha(c, 0.02));
-      return grad;
-    };
-  }
-
   // Draw a dot + vertical dashed guide at the last data point
   function lastPointPlugin(c: string, bc: string) {
     return {
diff --git a/dashboard/src/lib/types.ts b/dashboard/src/lib/types.ts
index 4cdcdcc..6f46a25 100644
--- a/dashboard/src/lib/types.ts
+++ b/dashboard/src/lib/types.ts
@@ -15,13 +15,8 @@ export interface MetricPoint {
   value: number;
   unit: string;
   recorded_at: string;
-}
-
-export interface TrendResponse {
-  project: string;
-  branch: string;
-  metric: string;
-  data: MetricPoint[];
+  /** True for a point synthesized to anchor/carry a line to a window boundary — not a real run. */
+  synthetic?: boolean;
 }
 
 export interface CategoryTrend {
@@ -39,3 +34,18 @@ export interface GroupedTrendResponse {
 export type MetricName = 'coverage' | 'complexity' | 'duplication';
 
 export const METRICS: MetricName[] = ['coverage', 'complexity', 'duplication'];
+
+export type RangeKey = '15m' | '1h' | '12h' | '1d' | '7d' | '30d';
+
+export const RANGES: { key: RangeKey; label: string }[] = [
+  { key: '15m', label: '15m' },
+  { key: '1h', label: '1h' },
+  { key: '12h', label: '12h' },
+  { key: '1d', label: '1d' },
+  { key: '7d', label: '7d' },
+  { key: '30d', label: '30d' },
+];
+
+export function isRangeKey(value: string): value is RangeKey {
+  return RANGES.some((r) => r.key === value);
+}
diff --git a/dashboard/src/routes/+page.svelte b/dashboard/src/routes/+page.svelte
index 4be1798..58b50d7 100644
--- a/dashboard/src/routes/+page.svelte
+++ b/dashboard/src/routes/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { browser } from '$app/environment';
   import SparkLine from '$lib/components/SparkLine.svelte';
+  import MultiSparkLine from '$lib/components/MultiSparkLine.svelte';
   import { theme } from '$lib/theme.svelte';
   import type { MetricPoint } from '$lib/types';
 
@@ -13,6 +14,11 @@
     };
   }
 
+  function categoryColor(index: number): string {
+    const chart = theme.tokens.chart;
+    return chart[index % chart.length];
+  }
+
   function avatarLetter(slug: string): string {
     return (slug.match(/[a-z0-9]/i)?.[0] ?? '?').toUpperCase();
   }
@@ -60,17 +66,42 @@
             </div>
           </div>
           <div class="card-body">
-            {#if project.latestCoverage}
+            {#if project.categories.length === 0}
+              <span class="no-data">no data yet</span>
+            {:else if project.categories.length === 1}
+              {@const [cat] = project.categories}
+              {@const latest = cat.data.at(-1) ?? null}
               <div class="metric">
-                <span class="metric-value">{project.latestCoverage.value.toFixed(1)}%</span>
+                {#if latest}
+                  <span class="metric-value">{latest.value.toFixed(1)}%</span>
+                {/if}
                 <span class="metric-label">Coverage</span>
               </div>
+              {#if browser && cat.data.length > 1}
+                {@const sd = sparklineData(cat.data)}
+                <SparkLine timestamps={sd.timestamps} values={sd.values} color={theme.tokens.chart[0]} />
+              {/if}
             {:else}
-              <span class="no-data">no data yet</span>
-            {/if}
-            {#if browser && project.coverageTrend.length > 1}
-              {@const sd = sparklineData(project.coverageTrend)}
-              <SparkLine timestamps={sd.timestamps} values={sd.values} color={theme.tokens.chart[0]} />
+              <div class="multi-metric">
+                <div class="legend">
+                  {#each project.categories as cat, i (cat.category)}
+                    <span class="legend-item">
+                      <span class="legend-dot" style="background:{categoryColor(i)}"></span>
+                      {cat.category}
+                    </span>
+                  {/each}
+                </div>
+                {#if browser}
+                  <MultiSparkLine
+                    series={project.categories.map((cat, i) => ({
+                      category: cat.category,
+                      timestamps: cat.data.map((p) => new Date(p.recorded_at).getTime() / 1000),
+                      values: cat.data.map((p) => p.value),
+                      color: categoryColor(i),
+                    }))}
+                  />
+                {/if}
+              </div>
             {/if}
           </div>
         </a>
@@ -217,4 +248,33 @@
     color: var(--muted);
     font-style: italic;
   }
+
+  .multi-metric {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--muted);
+  }
+
+  .legend-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
 </style>
diff --git a/dashboard/src/routes/+page.ts b/dashboard/src/routes/+page.ts
index ab82870..06327ba 100644
--- a/dashboard/src/routes/+page.ts
+++ b/dashboard/src/routes/+page.ts
@@ -1,19 +1,9 @@
 import type { PageLoad } from './$types';
-import { fetchProjects, fetchTrend } from '$lib/api';
-import type { MetricPoint } from '$lib/types';
+import { fetchProjects, fetchTrendByCategory } from '$lib/api';
+import type { ProjectRow, CategoryTrend } from '$lib/types';
 
-interface ProjectWithTrend {
-  id: number;
-  full_slug: string;
-  repo_name: string;
-  default_branch: string;
-  badge_enabled: number;
-  created_at: string;
-  owner_login: string;
-  owner_type: string;
-  owner_avatar_url: string | null;
-  coverageTrend: MetricPoint[];
-  latestCoverage: MetricPoint | null;
+interface ProjectWithTrend extends ProjectRow {
+  categories: CategoryTrend[];
 }
 
 export const load: PageLoad = async ({ fetch }) => {
@@ -23,11 +13,17 @@ export const load: PageLoad = async ({ fetch }) => {
     projects.map(async (p) => {
       const [owner, repo] = p.full_slug.split('/');
       try {
-        const trend = await fetchTrend(owner, repo, 'coverage', p.default_branch, 20, fetch);
-        const latest = trend.data.at(-1) ?? null;
-        return { ...p, coverageTrend: trend.data, latestCoverage: latest };
+        const trend = await fetchTrendByCategory(
+          owner,
+          repo,
+          'coverage',
+          p.default_branch,
+          { range: '30d', align: true },
+          fetch,
+        );
+        return { ...p, categories: trend.categories };
       } catch {
-        return { ...p, coverageTrend: [], latestCoverage: null };
+        return { ...p, categories: [] };
       }
     }),
   );
diff --git a/dashboard/src/routes/[owner]/[repo]/+page.svelte b/dashboard/src/routes/[owner]/[repo]/+page.svelte
index 628d1a9..3c781a9 100644
--- a/dashboard/src/routes/[owner]/[repo]/+page.svelte
+++ b/dashboard/src/routes/[owner]/[repo]/+page.svelte
@@ -5,7 +5,7 @@
   import TrendChart from '$lib/components/TrendChart.svelte';
   import BadgeModal from '$lib/components/BadgeModal.svelte';
   import { theme } from '$lib/theme.svelte';
-  import { METRICS } from '$lib/types';
+  import { METRICS, RANGES } from '$lib/types';
 
   let { data } = $props();
 
@@ -64,6 +64,17 @@
       {/each}
     </div>
 
+    <div class="metric-tabs" role="tablist" aria-label="Time range">
+      {#each RANGES as r (r.key)}
+        <button
+          role="tab"
+          aria-selected={data.range === r.key}
+          class:active={data.range === r.key}
+          onclick={() => updateParams({ range: r.key })}
+        >{r.label}</button>
+      {/each}
+    </div>
+
     <div class="controls-right">
       <form class="branch-form" onsubmit={applyBranch}>
         <label for="branch-input">Branch</label>
@@ -104,7 +115,7 @@
               <span class="trend-title"
                 >{cat.category} — {data.metric.charAt(0).toUpperCase() + data.metric.slice(1)} over time</span
               >
-              <span class="trend-desc">Last 30 days · {data.branch}</span>
+              <span class="trend-desc">Last {data.range} · {data.branch}</span>
             </div>
             <div class="trend-card-value">
               {#if latestValue !== null}
@@ -145,6 +156,7 @@
       repo={data.project.repo_name}
       projectId={data.project.id}
       badgeEnabled={data.project.badge_enabled}
+      defaultBranch={data.project.default_branch}
       onclose={() => (badgeModalOpen = false)}
     />
   {/if}
diff --git a/dashboard/src/routes/[owner]/[repo]/+page.ts b/dashboard/src/routes/[owner]/[repo]/+page.ts
index d94fda7..629042d 100644
--- a/dashboard/src/routes/[owner]/[repo]/+page.ts
+++ b/dashboard/src/routes/[owner]/[repo]/+page.ts
@@ -1,6 +1,7 @@
 import { error } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 import { fetchProjects, fetchTrendByCategory } from '$lib/api';
+import { isRangeKey, type RangeKey } from '$lib/types';
 
 export const load: PageLoad = async ({ params, url, fetch }) => {
   const { owner, repo } = params;
@@ -12,13 +13,15 @@ export const load: PageLoad = async ({ params, url, fetch }) => {
   if (!project) throw error(404, `Project ${fullSlug} not found`);
 
   const branch = url.searchParams.get('branch') ?? project.default_branch;
+  const rawRange = url.searchParams.get('range');
+  const range: RangeKey = rawRange && isRangeKey(rawRange) ? rawRange : '7d';
 
   let trend;
   try {
-    trend = await fetchTrendByCategory(owner, repo, metric, branch, 100, fetch);
+    trend = await fetchTrendByCategory(owner, repo, metric, branch, { range }, fetch);
   } catch {
     trend = { project: fullSlug, branch, metric, categories: [] };
   }
 
-  return { project, trend, metric, branch };
+  return { project, trend, metric, branch, range };
 };
diff --git a/dashboard/tests/time-range.spec.ts b/dashboard/tests/time-range.spec.ts
new file mode 100644
index 0000000..a090412
--- /dev/null
+++ b/dashboard/tests/time-range.spec.ts
@@ -0,0 +1,95 @@
+import { test, expect } from './coverage-fixture.js';
+import { mockApi } from './helpers.js';
+
+const MOCK_GROUPED_TREND_ONE_CATEGORY = {
+  project: 'testorg/repo',
+  branch: 'main',
+  metric: 'coverage',
+  categories: [
+    {
+      category: 'default',
+      data: [
+        { commit_sha: 'aaa1', value: 88, unit: '%', recorded_at: '2026-01-01' },
+        { commit_sha: 'aaa2', value: 92, unit: '%', recorded_at: '2026-01-02' },
+      ],
+    },
+  ],
+};
+
+const RANGE_KEYS = ['15m', '1h', '12h', '1d', '7d', '30d'];
+
+test.describe('project detail page — time range selector', () => {
+  let requestedUrls: string[];
+
+  test.beforeEach(async ({ page }) => {
+    requestedUrls = [];
+    await mockApi(page);
+    // Overrides mockApi()'s categories route (LIFO — registered later wins) so we can
+    // both serve real data and record every /metrics/categories request that fires.
+    await page.route('**/api/projects/testorg/repo/metrics/categories*', (route) => {
+      requestedUrls.push(route.request().url());
+      return route.fulfill({ json: MOCK_GROUPED_TREND_ONE_CATEGORY });
+    });
+    await page.goto('/testorg/repo');
+    await page.waitForSelector('[role="tablist"]');
+  });
+
+  test('defaults to the 7d button selected, with no range param in the URL', async ({ page }) => {
+    const sevenDay = page.getByRole('tab', { name: '7d', exact: true });
+    await expect(sevenDay).toHaveAttribute('aria-selected', 'true');
+    expect(new URL(page.url()).searchParams.get('range')).toBeNull();
+  });
+
+  test('renders one button for every range key, none selected but 7d', async ({ page }) => {
+    for (const key of RANGE_KEYS) {
+      const tab = page.getByRole('tab', { name: key, exact: true });
+      await expect(tab).toBeVisible();
+      await expect(tab).toHaveAttribute('aria-selected', key === '7d' ? 'true' : 'false');
+    }
+  });
+
+  test('clicking a range button selects it, updates the URL, and refetches with that range', async ({ page }) => {
+    await page.getByRole('tab', { name: '30d', exact: true }).click();
+
+    await expect(page.getByRole('tab', { name: '30d', exact: true })).toHaveAttribute('aria-selected', 'true');
+    await expect(page.getByRole('tab', { name: '7d', exact: true })).toHaveAttribute('aria-selected', 'false');
+    expect(new URL(page.url()).searchParams.get('range')).toBe('30d');
+
+    const last = requestedUrls.at(-1);
+    expect(last).toBeTruthy();
+    expect(new URL(last!).searchParams.get('range')).toBe('30d');
+  });
+
+  test('switching ranges updates the "Last {range}" label', async ({ page }) => {
+    await expect(page.locator('.trend-desc')).toContainText('Last 7d');
+
+    await page.getByRole('tab', { name: '1h', exact: true }).click();
+    await expect(page.locator('.trend-desc')).toContainText('Last 1h');
+  });
+
+  test('selecting a range does not change the active metric tab', async ({ page }) => {
+    await page.getByRole('tab', { name: '1d', exact: true }).click();
+    await expect(page.getByRole('tab', { name: 'Coverage', exact: true })).toHaveAttribute('aria-selected', 'true');
+  });
+});
+
+test.describe('project detail page — range URL param handling', () => {
+  test.beforeEach(async ({ page }) => {
+    await mockApi(page);
+    await page.route('**/api/projects/testorg/repo/metrics/categories*', (route) =>
+      route.fulfill({ json: MOCK_GROUPED_TREND_ONE_CATEGORY }),
+    );
+  });
+
+  test('a valid range in the URL pre-selects the matching button', async ({ page }) => {
+    await page.goto('/testorg/repo?range=12h');
+    await page.waitForSelector('[role="tablist"]');
+    await expect(page.getByRole('tab', { name: '12h', exact: true })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('an unknown range in the URL falls back to the 7d default', async ({ page }) => {
+    await page.goto('/testorg/repo?range=3weeks');
+    await page.waitForSelector('[role="tablist"]');
+    await expect(page.getByRole('tab', { name: '7d', exact: true })).toHaveAttribute('aria-selected', 'true');
+  });
+});
diff --git a/docs/plans/trend-chart-time-windows-plan.md b/docs/plans/trend-chart-time-windows-plan.md
new file mode 100644
index 0000000..c3465b5
--- /dev/null
+++ b/docs/plans/trend-chart-time-windows-plan.md
@@ -0,0 +1,213 @@
+# Time-windowed trend charts with edge-anchoring
+
+## Context
+
+Two visual bugs showed up once multi-category projects became common:
+
+1. **Project detail page** (`[owner]/[repo]/+page.svelte`): a category with very little history
+   (in the extreme, a single recorded point) renders as a lone dot near the left edge of an
+   otherwise-empty chart, with the x-axis auto-ranging out to whatever `uPlot`'s default ranging
+   picks (observed spanning *years* into the future on a single-point series). There's currently
+   no way to bound the chart to a sensible window — it always fetches the last 100 rows
+   (`+page.ts:18`, hardcoded `limit: 100`) with no time floor.
+2. **Project list page** (homepage cards): the new multi-category overlay chart
+   (`MultiSparkLine.svelte`) shares one x-axis across categories via `uPlot.join`. When two
+   categories' real reporting histories don't overlap (e.g. `frontend` was added partway through
+   `default`'s history), each line only occupies the portion of the shared axis where it actually
+   has data — so both lines look short/squished instead of filling the card. Confirmed against
+   local seed data: `default` spans day 0–14, `frontend` spans day 9–23 of a combined 23-day
+   domain, exactly matching the partial-width lines seen in the screenshot.
+
+Both are really the same root problem: chart x-domain is always the exact min/max of whatever
+rows happen to be fetched, with no concept of "the window I want to show" vs "the data I have".
+The fix is a **relative time-range window with edge-anchoring**, applied server-side:
+
+- The detail page gets a relative time-range button group (**15m / 1h / 12h / 1d / 7d / 30d**,
+  default **7d**) next to the existing metric tabs, so a user can pick a bounded window instead
+  of "whatever the last 100 rows happen to cover."
+- The list page's overlay sparkline always uses a fixed **30d** window, with lines aligned to a
+  shared right edge so multi-category cards look consistent regardless of each category's actual
+  reporting cadence.
+- In both cases, when there's no real data at the window's start, the closest point *before* the
+  window is used to synthesize a starting value at the window boundary, so a line is drawn across
+  the full width instead of leaving empty space (down to the degenerate single-point case, which
+  becomes a flat line spanning the whole window with the one real point pinned at the right edge).
+
+**Key implementation insight:** none of `TrendChart.svelte`, `SparkLine.svelte`, or
+`MultiSparkLine.svelte` need any x-domain/scaling logic changes. They already size the x-axis to
+the exact min/max of whatever `[timestamps, values]` array they're given. The entire fix is about
+*what data the backend returns* — inject a synthetic anchor point at the window boundary, and the
+existing charts automatically render full-width. This keeps the chart components dumb and the
+windowing/anchoring logic in one place (the DB layer), consistent with the "server-side" approach
+already agreed on for D1 row-scan efficiency (see `idx_runs_project_time` usage below).
+
+## Core mechanism: window + anchor
+
+For a given category and a requested duration `D`:
+
+- **Right edge** = that category's own latest recorded point (`latestTs`). Not wall-clock "now" —
+  CI doesn't run continuously, and pinning to "now" would leave dead space if the last run was
+  hours old.
+- **Window start** = `latestTs - D`.
+- **Anchor point**: the most recent row with `ran_at <= windowStart` (checking raw `coverage_runs`
+  first, then `coverage_daily` for windows that reach past the 14-day `RETENTION_DAYS` cutoff in
+  `src/db/rollup.ts:3`). Its value is re-emitted as a synthetic point *at* `windowStart` (i.e.
+  `recorded_at` overridden to the window boundary, not its original timestamp). If no such row
+  exists at all (window covers this category's entire history), fall back to the **earliest**
+  available row's value as the anchor — for a category with exactly one point ever, this
+  degenerates to anchor === latest, producing a flat line across the full window with the single
+  real point pinned at the right edge. This exactly matches the desired behavior for the
+  single-point case.
+- Real in-window rows (`windowStart <= ran_at <= latestTs`) are returned normally, in between.
+
+**List-page addition — shared alignment across categories:** the overlay chart needs every
+category's line to span the same visual width, even if categories report on different cadences.
+So for the list page only, compute a **shared right edge** = `MAX(latestTs)` across all of the
+project's categories, and `windowStart = sharedRightEdge - 30d`. Each category is anchored on the
+left as above (relative to the shared window), *and* if a category's own latest point is earlier
+than the shared right edge, a second synthetic point is appended at the shared right edge
+repeating its last known value (forward-carry), so every series' data spans the exact same
+`[windowStart, sharedRightEdge]` domain and `uPlot.join` no longer produces partial-width lines.
+The detail page does **not** use this alignment — each category already renders as its own
+separate `TrendChart`, so cross-category alignment doesn't matter there.
+
+## Backend changes
+
+### The `recorded_at` trap (must be handled explicitly)
+
+The existing raw-run branch of `getCoverageTrend`/`getCoverageTrendGrouped` emits `recorded_at`
+as a **day-collapsed string** — `strftime('%Y-%m-%d', ran_at, 'unixepoch')`
+(`src/lib/db.ts:335`, `:397`) — and the only frontend consumers parse it with `new Date(...)`
+(`TrendChart.svelte:87`, `+page.svelte:12`, `:98` — confirmed via grep, no other `recorded_at`
+consumers exist). If the new sub-day windows reused this day-collapsed format, an anchor point at
+`windowStart` and the latest point at `latestTs` would frequently fall on the **same calendar
+day** for 15m/1h/12h (and for 12h whenever the window doesn't cross midnight) — collapsing to
+identical x values and reproducing the exact "single dot" bug this plan exists to fix.
+
+Resolution — **granularity policy split by window size**:
+- **`< 1 day` windows (15m, 1h, 12h)**: query raw `coverage_runs` only, with full-precision
+  timestamps emitted as ISO 8601 datetimes (`strftime('%Y-%m-%dT%H:%M:%SZ', ran_at,
+  'unixepoch')` — parses correctly with `new Date()`), filtered directly by
+  `ran_at BETWEEN windowStart AND latestTs`. No day-collapsing, no `coverage_daily` involved
+  under normal operation. The synthetic anchor's `recorded_at` is likewise stamped as a full ISO
+  datetime derived from `windowStart`, not a day string.
+  - Edge case: if the category is dormant enough that even its `latestTs` has already been
+    pruned out of `coverage_runs` (rolled into `coverage_daily`, day precision only), a sub-day
+    window around it necessarily degenerates to the flat single-point case anyway — acceptable,
+    since no finer data exists to show.
+- **`>= 1 day` windows (1d, 7d, 30d)**: keep the existing day-collapsed, one-point-per-day
+  semantics (matches current chart behavior and avoids overly dense 7d/30d charts) — reuse the
+  existing raw+daily union pattern from `getCoverageTrend` (`src/lib/db.ts:308–356`), just bounded
+  by the window instead of a row-count `LIMIT`. `recorded_at` stays a day string here, which is
+  safe because anchor and latest are expected to differ by at least a day in the normal case.
+  30d is the only window that reaches past the 14-day `RETENTION_DAYS` cutoff
+  (`src/db/rollup.ts:3`), so it's the one that actually needs the `coverage_daily` union for its
+  older portion; 1d/7d stay within retention and could theoretically use raw `coverage_runs`
+  exclusively, but reusing the existing union query keeps one code path for all three.
+
+Assemble the anchor point **in TypeScript after fetching**, not in SQL: run the in-window range
+query, plus a separate small query for "closest row with `ran_at <= windowStart`" (or
+`day <= windowStart's date` for the day-granularity path), and fall back to the earliest
+available row if that returns nothing. Expressing the fallback-to-earliest and (for the list
+page) forward-carry entirely in SQL was judged not worth the complexity versus two lightweight
+indexed queries per category plus straightforward TS.
+
+### Implementation
+
+- **New module `src/lib/timeRanges.ts`**: `RangeKey = '15m' | '1h' | '12h' | '1d' | '7d' | '30d'`
+  and a `RANGE_SECONDS: Record<RangeKey, number>` map. Single source of truth shared by the DB
+  layer and the API route's zod validation.
+- **`src/lib/db.ts` additions** (alongside existing `getCoverageTrend` / `getCoverageTrendGrouped`,
+  which stay as-is — they remain the fallback path for legacy `limit`-based callers like
+  `BadgeModal`'s cheap `limit: 1` category-discovery fetch):
+  - A single-category windowed+anchored query, used by the detail page (per-category, no forced
+    cross-category alignment).
+  - A grouped windowed+anchored query with an `align: boolean` option, used by:
+    - detail page (`align: false` — independent per-category windows), and
+    - list page (`align: true` — shared right edge + forward-carry, as described above).
+  - Both build on the existing `idx_runs_project_time` index (`project_id, branch, category,
+    ran_at` — `migrations/0003_categories.sql:17-19`), which fully covers the
+    project+branch+category filter plus the `ran_at` range scan for the "in-window rows" and
+    "anchor row" queries.
+  - Reuse `pickMetricValue`/`metricToColumn` from `src/lib/metrics.ts` — unchanged.
+
+## API changes (`src/routes/api.ts`)
+
+- `GET /projects/:owner/:repo/metrics/categories` gains two optional query params:
+  - `range` — one of `RangeKey`, zod-validated (422 on unknown value, matching the "validation at
+    every write route" convention — this is a read route, but the same 422-on-bad-input pattern
+    applies for consistency).
+  - `align` — boolean flag (`?align=true`), only meaningful with `range`.
+  - When `range` is present, call the new windowed/grouped query instead of the existing
+    `limit`-based `getCoverageTrendGrouped` path. When absent, behavior is unchanged (legacy
+    `limit` param still works — no breaking change for existing callers).
+- Response shape (`GroupedTrendResponse`) is unchanged — anchor/forward-carry points are just
+  ordinary `MetricPoint` entries in the `data` array. Add an optional `synthetic?: boolean` field
+  to `MetricPoint` purely so tests can assert exactly which points were synthesized; rendering
+  code ignores it.
+
+## Frontend changes
+
+- `dashboard/src/lib/types.ts`: add `RangeKey`/`RANGES` (key + display label, e.g. `7d` → "7 days")
+  for the button group, and the optional `synthetic?: boolean` on `MetricPoint`.
+- `dashboard/src/lib/api.ts`: change `fetchTrendByCategory`'s trailing params from a bare
+  `limit: number` to an options object `{ limit?: number; range?: RangeKey; align?: boolean }`,
+  and update all three call sites:
+  - `BadgeModal.svelte` → `{ limit: 1 }` (unchanged behavior, category discovery only).
+  - `[owner]/[repo]/+page.ts` → `{ range }` (from the new URL param, default `'7d'`).
+  - `+page.ts` (homepage) → `{ range: '30d', align: true }`, replacing the current hardcoded
+    `fetchTrendByCategory(owner, repo, 'coverage', p.default_branch, 20, fetch)` call
+    (`+page.ts:16`).
+- `dashboard/src/routes/[owner]/[repo]/+page.ts`: read `url.searchParams.get('range') ?? '7d'`
+  (same pattern as the existing `metric`/`branch` reads at lines 8/14), pass through.
+- `dashboard/src/routes/[owner]/[repo]/+page.svelte`: add a second segmented-control button group
+  for range selection, cloning the existing `.metric-tabs` markup/CSS pattern (lines 56–65 for
+  markup, 209–242 for styles) and wiring through the existing `updateParams()` helper
+  (lines 15–19) exactly like the metric tabs do. Replace the hardcoded `"Last 30 days"` text
+  (line 107) with a label derived from the selected range.
+- `dashboard/src/routes/+page.svelte` / `MultiSparkLine.svelte` / `SparkLine.svelte`: no
+  windowing logic changes needed (per the key insight above) — only a styling change:
+  - Extract `hexAlpha` + `gradientFill` out of `TrendChart.svelte` (currently defined inline,
+    `TrendChart.svelte:27-41`) into a small shared util, e.g.
+    `dashboard/src/lib/chartFill.ts`, and use it from `SparkLine.svelte` and
+    `MultiSparkLine.svelte` too, so list-page sparklines get the same gradient-fill treatment as
+    the detail page's charts (per-series color, low alpha so overlapping fills in the multi-line
+    case stay legible).
+
+## Tests
+
+Add cases (likely in `test/db.test.ts` for the windowing/anchoring logic directly, and
+`test/api.test.ts` for the route-level `range`/`align` params — check existing structure in both
+files first and follow their seeding conventions):
+
+- A category with a single data point + a short window (`15m`) produces exactly two points
+  (anchor + real), same value, `windowStart` and `latestTs` respectively — the flat-line
+  degenerate case.
+- A category with real history both inside and before the window: anchor value matches the
+  closest prior row, not an average of multiple prior rows.
+- A `30d` window that spans past the 14-day raw retention boundary correctly sources the older
+  anchor from `coverage_daily` when `coverage_runs` has already been pruned.
+- **Regression guard for the `recorded_at` trap**: for a `15m`/`1h`/`12h` window, assert the
+  anchor point and the latest point have *distinct* timestamps (not just distinct values) — this
+  is exactly the bug the day-collapsed format would silently reintroduce.
+- `align: true` with two categories having non-overlapping recent history: both series end up
+  spanning the identical `[windowStart, sharedRightEdge]` domain, with the staler category's
+  final point being a forward-carried duplicate of its last real value.
+- Invalid `range` value on the API route → `422`.
+- Existing `npm test` suite stays green (currently 108/108).
+
+## Verification
+
+- `npm run dev` (worker + dashboard together, as in the previous session), reusing the existing
+  local seed data (`ZeroStash/coverage-tracker`, `default` + `frontend` categories) which already
+  demonstrates the non-overlapping-history case.
+- Playwright screenshots (script pattern from the previous session, run from inside `dashboard/`
+  for `node_modules` resolution) confirming:
+  - Detail page: cycling through all six range buttons updates the chart and label; a
+    genuinely single-point category (seed one if the current data doesn't have one) renders as a
+    full-width flat line with the dot pinned at the right edge, not a lone dot with a
+    years-wide empty axis.
+  - List page: the two-category overlay card now shows both lines spanning the full card width,
+    in distinct fill colors, ending at the same right edge.
+- `npm test` (108/108 baseline + new cases) and `npm run typecheck` (both root and `dashboard/`)
+  clean.
diff --git a/src/lib/db.ts b/src/lib/db.ts
index 5d5cefa..506603a 100644
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -1,5 +1,6 @@
 import type { Project, Owner, CoverageRun } from '../types';
 import type { CoverageColumn } from './metrics';
+import { SUB_DAY_THRESHOLD_SECONDS } from './timeRanges';
 
 /**
  * Look up a project by its full_slug (e.g. "owner/repo").
@@ -303,6 +304,8 @@ export interface CoverageTrendPoint {
   cognitive: number | null;
   duplication_pct: number | null;
   maintainability: number | null;
+  /** True for a point synthesized to anchor/carry a line to a window boundary — not a real run. */
+  synthetic?: boolean;
 }
 
 export async function getCoverageTrend(
@@ -421,3 +424,316 @@ export function pickColumnValue(point: CoverageTrendPoint, column: CoverageColum
   const v = point[column];
   return v != null ? v : null;
 }
+
+// ── Windowed + anchored trend queries (relative time-range charts) ────────
+//
+// Right edge = the latest known point (own latest, or a shared max across
+// categories when aligning). Window start = right edge − rangeSeconds. A
+// synthetic "anchor" point is emitted at the window start using the closest
+// real row at-or-before it (or the earliest available row as a fallback), so
+// the chart always draws full-width instead of leaving empty space or a lone
+// dot. Windows < 1 day use raw coverage_runs at full timestamp precision
+// (coverage_daily's `recorded_at` is a YYYY-MM-DD day string — reusing it for
+// sub-day windows would collapse the anchor and latest points onto the same
+// x position). Windows >= 1 day keep the existing day-collapsed semantics.
+
+interface WindowRow {
+  commit_sha: string;
+  recorded_at: string;
+  line_coverage: number;
+  branch_coverage: number | null;
+  cyclomatic: number | null;
+  cognitive: number | null;
+  duplication_pct: number | null;
+  maintainability: number | null;
+}
+
+const WINDOW_SELECT_COLUMNS =
+  'commit_sha, line_coverage, branch_coverage, cyclomatic, cognitive, duplication_pct, maintainability';
+
+function dayString(epochSeconds: number): string {
+  return new Date(epochSeconds * 1000).toISOString().slice(0, 10);
+}
+
+function epochToIso(epochSeconds: number): string {
+  return new Date(epochSeconds * 1000).toISOString();
+}
+
+async function getOwnLatestTimestamp(
+  db: D1Database,
+  projectId: number,
+  branch: string,
+  category: string,
+): Promise<number | null> {
+  const run = await getLatestCoverageRun(db, projectId, branch, category);
+  if (run) return run.ran_at;
+
+  const daily = await db
+    .prepare(`SELECT day FROM coverage_daily WHERE project_id = ?1 AND category = ?2 ORDER BY day DESC LIMIT 1`)
+    .bind(projectId, category)
+    .first<{ day: string }>();
+  if (!daily) return null;
+  return Math.floor(Date.parse(`${daily.day}T00:00:00Z`) / 1000);
+}
+
+async function subDayInWindowRows(
+  db: D1Database,
+  projectId: number,
+  branch: string,
+  category: string,
+  windowStart: number,
+  rightEdge: number,
+): Promise<WindowRow[]> {
+  const { results } = await db
+    .prepare(
+      `SELECT ${WINDOW_SELECT_COLUMNS}, strftime('%Y-%m-%dT%H:%M:%SZ', ran_at, 'unixepoch') AS recorded_at
+       FROM coverage_runs
+       WHERE project_id = ?1 AND branch = ?2 AND category = ?3 AND ran_at BETWEEN ?4 AND ?5
+       ORDER BY ran_at ASC`,
+    )
+    .bind(projectId, branch, category, windowStart, rightEdge)
+    .all<WindowRow>();
+  return results;
+}
+
+async function subDayAnchorRow(
+  db: D1Database,
+  projectId: number,
+  branch: string,
+  category: string,
+  windowStart: number,
+): Promise<WindowRow | null> {
+  const row = await db
+    .prepare(
+      `SELECT ${WINDOW_SELECT_COLUMNS}, strftime('%Y-%m-%dT%H:%M:%SZ', ran_at, 'unixepoch') AS recorded_at
+       FROM coverage_runs
+       WHERE project_id = ?1 AND branch = ?2 AND category = ?3 AND ran_at <= ?4
+       ORDER BY ran_at DESC LIMIT 1`,
+    )
+    .bind(projectId, branch, category, windowStart)
+    .first<WindowRow>();
+  return row ?? null;
+}
+
+async function subDayEarliestRow(
+  db: D1Database,
+  projectId: number,
+  branch: string,
+  category: string,
+): Promise<WindowRow | null> {
+  const row = await db
+    .prepare(
+      `SELECT ${WINDOW_SELECT_COLUMNS}, strftime('%Y-%m-%dT%H:%M:%SZ', ran_at, 'unixepoch') AS recorded_at
+       FROM coverage_runs
+       WHERE project_id = ?1 AND branch = ?2 AND category = ?3
+       ORDER BY ran_at ASC LIMIT 1`,
+    )
+    .bind(projectId, branch, category)
+    .first<WindowRow>();
+  return row ?? null;
+}
+
+/** Shared day-collapsed union of coverage_daily + last-of-day coverage_runs, as a subquery. */
+function dayUnionSql(): string {
+  return `
+    SELECT 'aggregated' AS commit_sha, day AS recorded_at,
+           line_coverage, branch_coverage, cyclomatic, cognitive, duplication_pct, maintainability
+    FROM coverage_daily
+    WHERE project_id = ?1 AND category = ?3
+      AND day NOT IN (
+        SELECT DISTINCT strftime('%Y-%m-%d', ran_at, 'unixepoch')
+        FROM coverage_runs
+        WHERE project_id = ?1 AND branch = ?2 AND category = ?3
+      )
+
+    UNION ALL
+
+    SELECT commit_sha, strftime('%Y-%m-%d', ran_at, 'unixepoch') AS recorded_at,
+           line_coverage, branch_coverage, cyclomatic, cognitive, duplication_pct, maintainability
+    FROM (
+      SELECT *,
+             ROW_NUMBER() OVER (
+               PARTITION BY strftime('%Y-%m-%d', ran_at, 'unixepoch')
+               ORDER BY ran_at DESC
+             ) AS rn
+      FROM coverage_runs
+      WHERE project_id = ?1 AND branch = ?2 AND category = ?3
+    )
+    WHERE rn = 1
+  `;
+}
+
+async function dayInWindowRows(
+  db: D1Database,
+  projectId: number,
+  branch: string,
+  category: string,
+  windowStartDay: string,
+  rightEdgeDay: string,
+): Promise<WindowRow[]> {
+  const { results } = await db
+    .prepare(
+      `SELECT commit_sha, recorded_at, line_coverage, branch_coverage, cyclomatic, cognitive, duplication_pct, maintainability
+       FROM (${dayUnionSql()})
+       WHERE recorded_at BETWEEN ?4 AND ?5
+       ORDER BY recorded_at ASC`,
+    )
+    .bind(projectId, branch, category, windowStartDay, rightEdgeDay)
+    .all<WindowRow>();
+  return results;
+}
+
+async function dayAnchorRow(
+  db: D1Database,
+  projectId: number,
+  branch: string,
+  category: string,
+  windowStartDay: string,
+): Promise<WindowRow | null> {
+  const row = await db
+    .prepare(
+      `SELECT commit_sha, recorded_at, line_coverage, branch_coverage, cyclomatic, cognitive, duplication_pct, maintainability
+       FROM (${dayUnionSql()})
+       WHERE recorded_at < ?4
+       ORDER BY recorded_at DESC LIMIT 1`,
+    )
+    .bind(projectId, branch, category, windowStartDay)
+    .first<WindowRow>();
+  return row ?? null;
+}
+
+async function dayEarliestRow(
+  db: D1Database,
+  projectId: number,
+  branch: string,
+  category: string,
+): Promise<WindowRow | null> {
+  const row = await db
+    .prepare(
+      `SELECT commit_sha, recorded_at, line_coverage, branch_coverage, cyclomatic, cognitive, duplication_pct, maintainability
+       FROM (${dayUnionSql()})
+       ORDER BY recorded_at ASC LIMIT 1`,
+    )
+    .bind(projectId, branch, category)
+    .first<WindowRow>();
+  return row ?? null;
+}
+
+export interface WindowedTrendOptions {
+  /** Use this instead of the category's own latest point as the right edge — for cross-category alignment. */
+  rightEdge?: number;
+  /** If the series' last point sits before the right edge, append a synthetic point carrying its value forward. */
+  forwardCarry?: boolean;
+}
+
+/**
+ * Windowed + edge-anchored trend for one category. See the block comment above
+ * this section for the overall strategy.
+ */
+export async function getCoverageTrendWindowed(
+  db: D1Database,
+  projectId: number,
+  branch: string,
+  category: string,
+  rangeSeconds: number,
+  options: WindowedTrendOptions = {},
+): Promise<CoverageTrendPoint[]> {
+  let rightEdge = options.rightEdge;
+  if (rightEdge === undefined) {
+    const own = await getOwnLatestTimestamp(db, projectId, branch, category);
+    if (own === null) return [];
+    rightEdge = own;
+  }
+
+  const windowStart = rightEdge - rangeSeconds;
+  const subDay = rangeSeconds < SUB_DAY_THRESHOLD_SECONDS;
+
+  let rows: WindowRow[];
+  let anchor: WindowRow | null;
+  let earliest: WindowRow | null = null;
+
+  if (subDay) {
+    rows = await subDayInWindowRows(db, projectId, branch, category, windowStart, rightEdge);
+    anchor = await subDayAnchorRow(db, projectId, branch, category, windowStart);
+    if (!anchor) earliest = rows[0] ?? (await subDayEarliestRow(db, projectId, branch, category));
+  } else {
+    const windowStartDay = dayString(windowStart);
+    const rightEdgeDay = dayString(rightEdge);
+    rows = await dayInWindowRows(db, projectId, branch, category, windowStartDay, rightEdgeDay);
+    anchor = await dayAnchorRow(db, projectId, branch, category, windowStartDay);
+    if (!anchor) earliest = rows[0] ?? (await dayEarliestRow(db, projectId, branch, category));
+  }
+
+  if (!anchor && !earliest) return [];
+
+  const anchorValue = (anchor ?? earliest)!;
+  const anchorRecordedAt = subDay ? epochToIso(windowStart) : dayString(windowStart);
+
+  const points: CoverageTrendPoint[] = [];
+  if (rows.length === 0 || rows[0].recorded_at !== anchorRecordedAt) {
+    points.push({ ...anchorValue, recorded_at: anchorRecordedAt, synthetic: true });
+  }
+  points.push(...rows);
+
+  if (options.forwardCarry && points.length > 0) {
+    const rightEdgeRecordedAt = subDay ? epochToIso(rightEdge) : dayString(rightEdge);
+    const last = points[points.length - 1];
+    if (last.recorded_at !== rightEdgeRecordedAt) {
+      points.push({ ...last, recorded_at: rightEdgeRecordedAt, synthetic: true });
+    }
+  }
+
+  return points;
+}
+
+async function getProjectCategories(db: D1Database, projectId: number, branch: string): Promise<string[]> {
+  const { results } = await db
+    .prepare(
+      `SELECT DISTINCT category FROM (
+         SELECT category FROM coverage_runs WHERE project_id = ?1 AND branch = ?2
+         UNION
+         SELECT category FROM coverage_daily WHERE project_id = ?1
+       )
+       ORDER BY category ASC`,
+    )
+    .bind(projectId, branch)
+    .all<{ category: string }>();
+  return results.map((r) => r.category);
+}
+
+/**
+ * Windowed + edge-anchored trend for every category with data on this project/branch.
+ * When `align` is true (list-page overlay), all categories share one right edge — the
+ * max of each category's own latest point — and a stale category's line is forward-carried
+ * to that shared edge so every series spans the identical domain.
+ */
+export async function getCoverageTrendGroupedWindowed(
+  db: D1Database,
+  projectId: number,
+  branch: string,
+  rangeSeconds: number,
+  align: boolean = false,
+): Promise<CoverageTrendPointWithCategory[]> {
+  const categories = await getProjectCategories(db, projectId, branch);
+  if (categories.length === 0) return [];
+
+  let sharedRightEdge: number | undefined;
+  if (align) {
+    const edges = await Promise.all(categories.map((c) => getOwnLatestTimestamp(db, projectId, branch, c)));
+    const known = edges.filter((e): e is number => e !== null);
+    if (known.length === 0) return [];
+    sharedRightEdge = Math.max(...known);
+  }
+
+  const perCategory = await Promise.all(
+    categories.map(async (category) => {
+      const points = await getCoverageTrendWindowed(db, projectId, branch, category, rangeSeconds, {
+        rightEdge: sharedRightEdge,
+        forwardCarry: align,
+      });
+      return points.map((p) => ({ ...p, category }));
+    }),
+  );
+
+  return perCategory.flat();
+}
diff --git a/src/lib/timeRanges.ts b/src/lib/timeRanges.ts
new file mode 100644
index 0000000..65912cf
--- /dev/null
+++ b/src/lib/timeRanges.ts
@@ -0,0 +1,19 @@
+export type RangeKey = '15m' | '1h' | '12h' | '1d' | '7d' | '30d';
+
+export const RANGE_KEYS: RangeKey[] = ['15m', '1h', '12h', '1d', '7d', '30d'];
+
+export const RANGE_SECONDS: Record<RangeKey, number> = {
+  '15m': 15 * 60,
+  '1h': 60 * 60,
+  '12h': 12 * 60 * 60,
+  '1d': 24 * 60 * 60,
+  '7d': 7 * 24 * 60 * 60,
+  '30d': 30 * 24 * 60 * 60,
+};
+
+/** Windows shorter than this use raw per-run precision instead of day-collapsed rollups. */
+export const SUB_DAY_THRESHOLD_SECONDS = RANGE_SECONDS['1d'];
+
+export function isRangeKey(value: string): value is RangeKey {
+  return (RANGE_KEYS as string[]).includes(value);
+}
diff --git a/src/routes/api.ts b/src/routes/api.ts
index 39d6040..be36e41 100644
--- a/src/routes/api.ts
+++ b/src/routes/api.ts
@@ -5,9 +5,11 @@ import {
   getProjectBySlug,
   getCoverageTrend,
   getCoverageTrendGrouped,
+  getCoverageTrendGroupedWindowed,
   pickColumnValue,
 } from '../lib/db';
 import { metricToColumn } from '../lib/metrics';
+import { isRangeKey, RANGE_SECONDS } from '../lib/timeRanges';
 import type { Bindings, Variables } from '../types';
 
 const api = new Hono<{ Bindings: Bindings; Variables: Variables }>();
@@ -59,18 +61,38 @@ api.get('/projects/:owner/:repo/metrics/categories', requireAccess(), async (c)
   const metric = c.req.query('metric') ?? 'coverage';
   const branch = c.req.query('branch') ?? project.default_branch;
   if (branch.length > 255) return c.json({ error: 'Invalid branch' }, 400);
-  const limit = Math.min(Number(c.req.query('limit') ?? '100'), 1000);
 
   const mapping = metricToColumn(metric);
   if (!mapping) return c.json({ error: `Unknown metric: ${metric}` }, 400);
 
-  const points = await getCoverageTrendGrouped(c.env.DB, project.id, branch, limit);
-  const byCategory = new Map<string, Array<{ commit_sha: string; value: number; unit: string; recorded_at: string }>>();
+  const range = c.req.query('range');
+  let points;
+  if (range !== undefined) {
+    if (!isRangeKey(range)) {
+      return c.json({ error: 'Validation failed', issues: [{ message: `Unknown range: ${range}` }] }, 422);
+    }
+    const align = c.req.query('align') === 'true';
+    points = await getCoverageTrendGroupedWindowed(c.env.DB, project.id, branch, RANGE_SECONDS[range], align);
+  } else {
+    const limit = Math.min(Number(c.req.query('limit') ?? '100'), 1000);
+    points = await getCoverageTrendGrouped(c.env.DB, project.id, branch, limit);
+  }
+
+  const byCategory = new Map<
+    string,
+    Array<{ commit_sha: string; value: number; unit: string; recorded_at: string; synthetic?: boolean }>
+  >();
   for (const p of points) {
     const value = pickColumnValue(p, mapping.column);
     if (value === null) continue;
     const arr = byCategory.get(p.category) ?? [];
-    arr.push({ commit_sha: p.commit_sha, value, unit: mapping.unit, recorded_at: p.recorded_at });
+    arr.push({
+      commit_sha: p.commit_sha,
+      value,
+      unit: mapping.unit,
+      recorded_at: p.recorded_at,
+      ...(p.synthetic ? { synthetic: true } : {}),
+    });
     byCategory.set(p.category, arr);
   }
 
diff --git a/src/routes/badge.ts b/src/routes/badge.ts
index cc43424..e5cc440 100644
--- a/src/routes/badge.ts
+++ b/src/routes/badge.ts
@@ -21,7 +21,8 @@ badge.get('/:owner/:repo/:metric{.+\\.json}', async (c) => {
   const mapping = metricToColumn(metricName);
   if (!mapping) return c.notFound();
 
-  const run = await getLatestCoverage(c.env.DB, project.id, project.default_branch);
+  const category = c.req.query('category') ?? 'default';
+  const run = await getLatestCoverage(c.env.DB, project.id, project.default_branch, category);
   if (!run) return c.notFound();
 
   const value = pickMetricValue(run, mapping.column);
@@ -32,7 +33,7 @@ badge.get('/:owner/:repo/:metric{.+\\.json}', async (c) => {
 
   return c.json({
     schemaVersion: 1,
-    label: metricName,
+    label: category === 'default' ? metricName : `${category} ${metricName}`,
     message,
     color,
   });
diff --git a/test/api.test.ts b/test/api.test.ts
index 911d716..204d90f 100644
--- a/test/api.test.ts
+++ b/test/api.test.ts
@@ -154,4 +154,30 @@ describe('GET /api/projects/:owner/:repo/metrics/categories', () => {
     expect(body.categories.find((c) => c.category === 'backend')!.data[0].value).toBe(92);
     expect(body.categories.find((c) => c.category === 'frontend')!.data[0].value).toBe(55);
   });
+
+  it('returns 422 for an unknown range value', async () => {
+    const res = await get('/api/projects/testorg/repo/metrics/categories?range=3weeks');
+    expect(res.status).toBe(422);
+  });
+
+  it('returns an edge-anchored, full-width series when range is given', async () => {
+    const now = Math.floor(Date.now() / 1000);
+    await testEnv.DB.prepare(
+      `INSERT INTO coverage_runs (project_id, commit_sha, branch, ran_at, line_coverage)
+       VALUES (1, 'sha-only', 'main', ?1, 77)`,
+    ).bind(now).run();
+
+    const res = await get('/api/projects/testorg/repo/metrics/categories?range=15m');
+    expect(res.status).toBe(200);
+    const body = await res.json() as {
+      categories: Array<{ category: string; data: Array<{ value: number; recorded_at: string; synthetic?: boolean }> }>;
+    };
+
+    const defaultCat = body.categories.find((c) => c.category === 'default')!;
+    expect(defaultCat.data).toHaveLength(2);
+    expect(defaultCat.data[0].synthetic).toBe(true);
+    expect(defaultCat.data[0].value).toBe(77);
+    expect(defaultCat.data[1].value).toBe(77);
+    expect(defaultCat.data[0].recorded_at).not.toBe(defaultCat.data[1].recorded_at);
+  });
 });
diff --git a/test/badge.test.ts b/test/badge.test.ts
index a8275ee..1c0b3f0 100644
--- a/test/badge.test.ts
+++ b/test/badge.test.ts
@@ -18,23 +18,36 @@ beforeEach(async () => {
   await testEnv.DB.prepare('DELETE FROM coverage_runs').run();
 });
 
-async function getBadge(owner: string, repo: string, metric: string): Promise<Response> {
-  return worker.fetch(
-    new Request(`http://localhost/api/badge/${owner}/${repo}/${metric}.json`),
-    testEnv as never,
-  );
+async function getBadge(
+  owner: string,
+  repo: string,
+  metric: string,
+  category?: string,
+): Promise<Response> {
+  const url = new URL(`http://localhost/api/badge/${owner}/${repo}/${metric}.json`);
+  if (category !== undefined) url.searchParams.set('category', category);
+  return worker.fetch(new Request(url), testEnv as never);
 }
 
 async function seedCoverage(fields: Partial<{
   line_coverage: number;
   duplication_pct: number;
   cyclomatic: number;
+  category: string;
 }>): Promise<void> {
+  const category = fields.category ?? 'default';
   await testEnv.DB.prepare(
-    `INSERT INTO coverage_runs (project_id, commit_sha, branch, ran_at, line_coverage, duplication_pct, cyclomatic)
-     VALUES (1, 'sha-badge', 'main', ?1, ?2, ?3, ?4)`,
+    `INSERT INTO coverage_runs (project_id, commit_sha, branch, category, ran_at, line_coverage, duplication_pct, cyclomatic)
+     VALUES (1, ?5, 'main', ?6, ?1, ?2, ?3, ?4)`,
   )
-    .bind(Math.floor(Date.now() / 1000), fields.line_coverage ?? 50, fields.duplication_pct ?? null, fields.cyclomatic ?? null)
+    .bind(
+      Math.floor(Date.now() / 1000),
+      fields.line_coverage ?? 50,
+      fields.duplication_pct ?? null,
+      fields.cyclomatic ?? null,
+      `sha-badge-${category}`,
+      category,
+    )
     .run();
 }
 
@@ -102,4 +115,49 @@ describe('GET /api/badge/:owner/:repo/:metric.json', () => {
     expect(body.color).toBe('blue');
     expect(body.message).toBe('12'); // unitless metric, no % suffix
   });
+
+  it('returns the non-default category value when default and category rows differ', async () => {
+    await seedCoverage({ line_coverage: 50 });
+    await seedCoverage({ line_coverage: 82.5, category: 'backend' });
+    const res = await getBadge('testorg', 'repo', 'coverage', 'backend');
+    expect(res.status).toBe(200);
+    const body = await res.json() as { message: string };
+    expect(body.message).toBe('82.5%');
+  });
+
+  it('labels the badge with the category name when non-default', async () => {
+    await seedCoverage({ line_coverage: 82.5, category: 'backend' });
+    const res = await getBadge('testorg', 'repo', 'coverage', 'backend');
+    const body = await res.json() as { label: string };
+    expect(body.label).toBe('backend coverage');
+  });
+
+  it('keeps the plain metric name as the label when category is omitted', async () => {
+    await seedCoverage({ line_coverage: 90 });
+    const res = await getBadge('testorg', 'repo', 'coverage');
+    const body = await res.json() as { label: string };
+    expect(body.label).toBe('coverage');
+  });
+
+  it('keeps the plain metric name as the label when category is explicitly default', async () => {
+    await seedCoverage({ line_coverage: 90 });
+    const res = await getBadge('testorg', 'repo', 'coverage', 'default');
+    const body = await res.json() as { label: string };
+    expect(body.label).toBe('coverage');
+  });
+
+  it('404s for a category with no data even when default has data for that metric', async () => {
+    await seedCoverage({ line_coverage: 90 });
+    const res = await getBadge('testorg', 'repo', 'coverage', 'frontend');
+    expect(res.status).toBe(404);
+  });
+
+  it('scopes category filtering to non-coverage metrics too', async () => {
+    await seedCoverage({ line_coverage: 50, cyclomatic: 5 });
+    await seedCoverage({ line_coverage: 50, cyclomatic: 20, category: 'backend' });
+    const defaultRes = await getBadge('testorg', 'repo', 'cyclomatic');
+    const backendRes = await getBadge('testorg', 'repo', 'cyclomatic', 'backend');
+    expect((await defaultRes.json() as { message: string }).message).toBe('5');
+    expect((await backendRes.json() as { message: string }).message).toBe('20');
+  });
 });
diff --git a/test/db.test.ts b/test/db.test.ts
index c7cf9ca..2cc64ff 100644
--- a/test/db.test.ts
+++ b/test/db.test.ts
@@ -4,11 +4,14 @@ import {
   upsertCoverageRun,
   getCoverageTrend,
   getCoverageTrendGrouped,
+  getCoverageTrendWindowed,
+  getCoverageTrendGroupedWindowed,
   getLatestCoverage,
   insertMetric,
   getMetricsTrend,
   getLatestMetric,
 } from '../src/lib/db';
+import { RANGE_SECONDS } from '../src/lib/timeRanges';
 import type { Bindings } from '../src/types';
 
 // @ts-expect-error cloudflare:test injects env at runtime
@@ -233,3 +236,100 @@ describe('getLatestMetric', () => {
     expect(result?.commit_sha).toBe('sha-new');
   });
 });
+
+describe('getCoverageTrendWindowed — single point, sub-day window', () => {
+  it('flat-lines a lone point across the whole window, anchor pinned left / latest pinned right', async () => {
+    await upsertCoverageRun(testEnv.DB, 1, 'sha-only', 'main', NOW, { line_coverage: 88.4 });
+
+    const points = await getCoverageTrendWindowed(testEnv.DB, 1, 'main', 'default', RANGE_SECONDS['15m']);
+
+    expect(points).toHaveLength(2);
+    expect(points[0].synthetic).toBe(true);
+    expect(points[0].line_coverage).toBe(88.4);
+    expect(points[1].synthetic).toBeFalsy();
+    expect(points[1].line_coverage).toBe(88.4);
+    expect(points[1].commit_sha).toBe('sha-only');
+  });
+
+  it('regression guard: anchor and latest timestamps are distinct, not day-collapsed onto one x', async () => {
+    await upsertCoverageRun(testEnv.DB, 1, 'sha-only', 'main', NOW, { line_coverage: 50 });
+
+    const points = await getCoverageTrendWindowed(testEnv.DB, 1, 'main', 'default', RANGE_SECONDS['15m']);
+
+    expect(points).toHaveLength(2);
+    const t0 = new Date(points[0].recorded_at).getTime();
+    const t1 = new Date(points[1].recorded_at).getTime();
+    expect(Number.isNaN(t0)).toBe(false);
+    expect(Number.isNaN(t1)).toBe(false);
+    expect(t1 - t0).toBe(RANGE_SECONDS['15m'] * 1000);
+  });
+});
+
+describe('getCoverageTrendWindowed — anchor is the closest prior point, not an average', () => {
+  it('uses the nearest row before the window, ignoring older rows further back', async () => {
+    await upsertCoverageRun(testEnv.DB, 1, 'sha-latest', 'main', NOW, { line_coverage: 90 });
+    await upsertCoverageRun(testEnv.DB, 1, 'sha-2d', 'main', NOW - 2 * DAY, { line_coverage: 70 });
+    await upsertCoverageRun(testEnv.DB, 1, 'sha-5d', 'main', NOW - 5 * DAY, { line_coverage: 50 });
+    await upsertCoverageRun(testEnv.DB, 1, 'sha-10d', 'main', NOW - 10 * DAY, { line_coverage: 30 });
+
+    const points = await getCoverageTrendWindowed(testEnv.DB, 1, 'main', 'default', RANGE_SECONDS['1d']);
+
+    expect(points[0].synthetic).toBe(true);
+    // Closest prior row (2 days back) wins — not the average of 70/50/30.
+    expect(points[0].line_coverage).toBe(70);
+    expect(points.at(-1)!.line_coverage).toBe(90);
+  });
+});
+
+describe('getCoverageTrendWindowed — 30d window crosses the raw retention boundary', () => {
+  it('sources the anchor from coverage_daily once coverage_runs has been pruned', async () => {
+    await upsertCoverageRun(testEnv.DB, 1, 'sha-latest', 'main', NOW, { line_coverage: 95 });
+    const oldDay = new Date((NOW - 40 * DAY) * 1000).toISOString().slice(0, 10);
+    await testEnv.DB.prepare(
+      `INSERT INTO coverage_daily (project_id, category, day, line_coverage, run_count)
+       VALUES (1, 'default', ?1, 10, 1)`,
+    ).bind(oldDay).run();
+
+    const points = await getCoverageTrendWindowed(testEnv.DB, 1, 'main', 'default', RANGE_SECONDS['30d']);
+
+    expect(points[0].synthetic).toBe(true);
+    expect(points[0].line_coverage).toBe(10);
+    expect(points.at(-1)!.line_coverage).toBe(95);
+  });
+});
+
+describe('getCoverageTrendGroupedWindowed — align forward-carries stale categories', () => {
+  it('shares one right edge across categories and carries a stale series forward to it', async () => {
+    await upsertCoverageRun(testEnv.DB, 1, 'sha-be', 'main', NOW, { category: 'backend', line_coverage: 90 });
+    await upsertCoverageRun(testEnv.DB, 1, 'sha-fe', 'main', NOW - 10 * DAY, {
+      category: 'frontend',
+      line_coverage: 60,
+    });
+
+    const grouped = await getCoverageTrendGroupedWindowed(testEnv.DB, 1, 'main', RANGE_SECONDS['30d'], true);
+
+    const backend = grouped.filter((p) => p.category === 'backend');
+    const frontend = grouped.filter((p) => p.category === 'frontend');
+
+    // Both series must reach the same shared right edge (backend's own latest, since it's more recent).
+    expect(frontend.at(-1)!.recorded_at).toBe(backend.at(-1)!.recorded_at);
+    expect(frontend.at(-1)!.synthetic).toBe(true);
+    expect(frontend.at(-1)!.line_coverage).toBe(60);
+  });
+
+  it('without align, categories keep their own independent right edges', async () => {
+    await upsertCoverageRun(testEnv.DB, 1, 'sha-be', 'main', NOW, { category: 'backend', line_coverage: 90 });
+    await upsertCoverageRun(testEnv.DB, 1, 'sha-fe', 'main', NOW - 10 * DAY, {
+      category: 'frontend',
+      line_coverage: 60,
+    });
+
+    const grouped = await getCoverageTrendGroupedWindowed(testEnv.DB, 1, 'main', RANGE_SECONDS['30d'], false);
+
+    const backend = grouped.filter((p) => p.category === 'backend');
+    const frontend = grouped.filter((p) => p.category === 'frontend');
+
+    expect(frontend.at(-1)!.recorded_at).not.toBe(backend.at(-1)!.recorded_at);
+    expect(frontend.at(-1)!.synthetic).toBeFalsy();
+  });
+});