feat: power curve chart on activity page (single-activity MMP)

claude-instructions.md

@@ -0,0 +1,84 @@
+# CLAUDE.md
+
+Behavioral guidelines to reduce common LLM coding mistakes. Merge with project-specific instructions as needed.
+
+**Tradeoff:** These guidelines bias toward caution over speed. For trivial tasks, use judgment.
+
+## 1. Think Before Coding
+
+**Don't assume. Don't hide confusion. Surface tradeoffs.**
+
+Before implementing:
+- State your assumptions explicitly. If uncertain, ask.
+- If multiple interpretations exist, present them - don't pick silently.
+- If a simpler approach exists, say so. Push back when warranted.
+- If something is unclear, stop. Name what's confusing. Ask.
+
+## 2. Simplicity First
+
+**Minimum code that solves the problem. Nothing speculative.**
+
+- No features beyond what was asked.
+- No abstractions for single-use code.
+- No "flexibility" or "configurability" that wasn't requested.
+- No error handling for impossible scenarios.
+- If you write 200 lines and it could be 50, rewrite it.
+
+Ask yourself: "Would a senior engineer say this is overcomplicated?" If yes, simplify.
+
+## 3. Surgical Changes
+
+**Touch only what you must. Clean up only your own mess.**
+
+When editing existing code:
+- Don't "improve" adjacent code, comments, or formatting.
+- Don't refactor things that aren't broken.
+- Match existing style, even if you'd do it differently.
+- If you notice unrelated dead code, mention it - don't delete it.
+
+When your changes create orphans:
+- Remove imports/variables/functions that YOUR changes made unused.
+- Don't remove pre-existing dead code unless asked.
+
+The test: Every changed line should trace directly to the user's request.
+
+## 4. Goal-Driven Execution
+
+**Define success criteria. Loop until verified.**
+
+Transform tasks into verifiable goals:
+- "Add validation" → "Write tests for invalid inputs, then make them pass"
+- "Fix the bug" → "Write a test that reproduces it, then make it pass"
+- "Refactor X" → "Ensure tests pass before and after"
+
+For multi-step tasks, state a brief plan:
+```
+1. [Step] → verify: [check]
+2. [Step] → verify: [check]
+3. [Step] → verify: [check]
+```
+
+Strong success criteria let you loop independently. Weak criteria ("make it work") require constant clarification.
+
+---
+
+**These guidelines are working if:** fewer unnecessary changes in diffs, fewer rewrites due to overcomplication, and clarifying questions come before implementation rather than after mistakes.
+
+---
+
+## Project notes
+
+### Activity page power curve — comparison lines (future)
+
+The activity page shows a single-activity power curve from `detail.mmp` (pre-computed at
+extract time, zero extra requests). Adding "last 365 d / last 90 d" comparison overlays
+requires the pre-computed `power_curve.last_365d` / `power_curve.last_90d` arrays, which
+currently live only in `athlete.json`. Loading `athlete.json` at activity-page time is
+wasteful (it's a large file with all activity summaries).
+
+**Clean solution when the time comes:** at `render` time (inside `_merge_edits` or a
+dedicated step in `bincio/render/cli.py`), bake the comparison curves into each activity's
+detail JSON — e.g. add a `power_curve_context` key with `all_time`, `last_365d`, `last_90d`.
+The activity page then gets them for free with the detail JSON it already fetches.
+Requires a one-time `bincio render` (no code changes to the extractor).
+Component to update: `site/src/components/ActivityPowerCurve.svelte`.

site/src/components/ActivityDetail.svelte

@@ -6,6 +6,7 @@
   import { formatDistance, formatDuration, formatElevation, formatSpeed, formatDate, formatTime, formatElapsed, sportIcon, sportLabel, sportColor } from '../lib/format';
   import ActivityMap from './ActivityMap.svelte';
   import ActivityCharts from './ActivityCharts.svelte';
+  import ActivityPowerCurve from './ActivityPowerCurve.svelte';
   import EditDrawer from './EditDrawer.svelte';
   import { loadActivity, loadTimeseries } from '../lib/dataloader';
 
@@ -489,6 +490,14 @@
 
 </div>
 
+<!-- Power curve -->
+{#if detail?.mmp?.length}
+  <div class="mt-4 bg-zinc-900 rounded-xl border border-zinc-800 p-4">
+    <p class="text-xs font-semibold text-zinc-500 uppercase tracking-wide mb-3">Power curve</p>
+    <ActivityPowerCurve mmp={detail.mmp} ftp_w={athlete?.ftp_w ?? null} />
+  </div>
+{/if}
+
 <!-- Laps -->
 {#if detail?.laps?.length}
   <div class="mt-4 bg-zinc-900 rounded-xl border border-zinc-800 overflow-hidden">

site/src/components/ActivityPowerCurve.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import * as Plot from '@observablehq/plot';
+  import { onMount } from 'svelte';
+  import type { MmpCurve } from '../lib/types';
+
+  export let mmp: MmpCurve;
+  export let ftp_w: number | null = null;
+
+  let chartEl: HTMLElement;
+
+  function formatDuration(s: number): string {
+    if (s < 60)   return `${s}s`;
+    if (s < 3600) return `${Math.round(s / 60)}min`;
+    return `${s / 3600}h`;
+  }
+
+  function render() {
+    if (!chartEl || !mmp.length) return;
+    chartEl.innerHTML = '';
+
+    const axisColor = document.documentElement.getAttribute('data-theme') === 'light'
+      ? '#52525b' : '#a1a1aa';
+
+    const data = mmp.map(([d, w]) => ({ d, w }));
+
+    const chart = Plot.plot({
+      width: chartEl.clientWidth || 600,
+      height: 220,
+      marginLeft: 52,
+      marginBottom: 36,
+      style: { background: 'transparent', color: axisColor },
+      x: {
+        type: 'log',
+        label: 'Duration',
+        tickFormat: (d: number) => formatDuration(d),
+        grid: true,
+        domain: [data[0].d, Math.max(7200, data[data.length - 1].d)],
+      },
+      y: { label: 'Avg power (W)', grid: true, zero: true },
+      marks: [
+        Plot.line(data, {
+          x: 'd', y: 'w',
+          stroke: '#f97316',
+          strokeWidth: 2,
+          curve: 'monotone-x',
+        }),
+        Plot.dot(data, {
+          x: 'd', y: 'w',
+          fill: '#f97316',
+          r: 3,
+          tip: true,
+          title: (d: any) => `${formatDuration(d.d)}: ${d.w} W`,
+        }),
+        ...(ftp_w ? [
+          Plot.ruleY([ftp_w], { stroke: '#71717a', strokeDasharray: '4 3' }),
+          Plot.text([{ x: data[data.length - 1].d, y: ftp_w }], {
+            x: 'x', y: 'y',
+            text: () => `FTP ${ftp_w} W`,
+            fill: '#71717a',
+            fontSize: 11,
+            dy: -6,
+            textAnchor: 'end',
+          }),
+        ] : []),
+      ],
+    });
+
+    chartEl.appendChild(chart);
+  }
+
+  onMount(() => {
+    render();
+    const ro = new ResizeObserver(render);
+    ro.observe(chartEl);
+    const mo = new MutationObserver(render);
+    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+    return () => { ro.disconnect(); mo.disconnect(); };
+  });
+</script>
+
+<style>
+  :global(.plot-tip text) { fill: #18181b !important; }
+</style>
+
+<div bind:this={chartEl} class="w-full min-h-[220px]"></div>