ui: aggregate plot alpha falloff 1/sqrt(n) and theme blend modes

- opacity 1/sqrt(lineCount): isolated machine lines stay visible with many series
- blend overlapping lines with each other (isolation: isolate) using a per-theme
  --blend-overlap: multiply (light) / overlay (dark)

src/components/plots.tsx

@@ -189,7 +189,9 @@ export function AggregatePlot({
     })
     .filter((p): p is string => p !== null)
   const lineCount = Math.max(1, paths.length)
-  const opacity = 1 / lineCount
+  // gentler 1/sqrt(n) falloff: isolated lines stay visible while dense clusters
+  // still accumulate to a solid mass
+  const opacity = 1 / Math.sqrt(lineCount)
 
   const [hover, setHover] = useState<{
     sample: MetricEntry
@@ -254,12 +256,13 @@ export function AggregatePlot({
       >
         <svg
           viewBox={`0 0 ${width} ${height}`}
-          class="line-plot"
+          class="line-plot agg-plot"
           preserveAspectRatio="none"
         >
           {paths.map((d, i) => (
             <path
               key={i}
+              class="agg-line"
               d={d}
               fill="none"
               stroke={color}

src/dark.css

@@ -44,6 +44,7 @@
   --shadow-color: #0004;
   --shadow: 0.35rem 0.35rem 0 var(--shadow-color);
   --shadow-lg: 0.55rem 0.55rem 0 var(--shadow-color);
+  --blend-overlap: overlay;
   --overlay: rgba(0, 0, 0, 0.6);
   --sheen: rgba(255, 255, 255, 0.07);
   --sheen-strong: rgba(255, 255, 255, 0.12);

src/light.css

@@ -48,6 +48,7 @@
   --shadow-color: #0004;
   --shadow: 0.35rem 0.35rem 0 var(--shadow-color);
   --shadow-lg: 0.55rem 0.55rem 0 var(--shadow-color);
+  --blend-overlap: multiply;
   --overlay: rgba(0, 0, 0, 0.35);
   --sheen: rgba(255, 255, 255, 0.75);
   --sheen-strong: rgba(255, 255, 255, 0.9);

src/styles.css

@@ -719,6 +719,16 @@ body {
   overflow: visible;
 }
 
+/* aggregate plot: blend overlapping machine lines with each other (and only
+   with each other) using the theme's --blend-overlap mode */
+.agg-plot {
+  isolation: isolate;
+}
+
+.agg-plot .agg-line {
+  mix-blend-mode: var(--blend-overlap, multiply);
+}
+
 .line-plot-wrap {
   position: relative;
 }