fix: say what the bars and colours mean

The meter encoded two things at once and neither was guessable from looking
at it — obvious to whoever built it, opaque to everyone else.

Every row now carries a plain caption under the bar ("Aug 10 – Aug 17 · 3 of
7 days left", "started Apr 22 · no end date announced"), which explains the
bar and doubles as the exact dates people wanted anyway. A legend above the
list explains the colour ramp, which no per-row text can — shown once,
because a legend repeated fifty times is noise.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>

src/client/App.tsx

@@ -7,6 +7,7 @@ import { NextUp } from "./components/NextUp.tsx";
 import { Timeline } from "./components/Timeline.tsx";
 import { Welcome } from "./components/Welcome.tsx";
 import { Colophon } from "./components/Colophon.tsx";
+import { Legend } from "./components/Legend.tsx";
 import { useCompletions } from "./state/useCompletions.ts";
 import { usePrefs } from "./state/usePrefs.ts";
 import { clockFor, DAY, endingSoonestFirst, formatRemaining } from "../shared/time.ts";
@@ -189,6 +190,7 @@ export function App() {
 
           {live.length > 0 && (
             <Section
+              legend
               title="Running now"
               hint={
                 live.length > 1
@@ -284,10 +286,12 @@ function Shell({ children }: { children: React.ReactNode }) {
 function Section({
   title,
   hint,
+  legend,
   children,
 }: {
   title: string;
   hint?: string | undefined;
+  legend?: boolean | undefined;
   children: React.ReactNode;
 }) {
   return (
@@ -296,6 +300,7 @@ function Section({
         <h2 className="eyebrow">{title}</h2>
         {hint !== undefined && <p className="text-xs text-faint">{hint}</p>}
       </div>
+      {legend === true && <Legend />}
       <ul className="border-t border-hairline">{children}</ul>
     </section>
   );