cyborg-hunter 0.8.0 → 0.9.1

package/src/cli/renderers/html-index-core.js

@@ -21,6 +21,8 @@
 
 import { VERSION, sanitizeId } from '../../shared/constants.js';
 import { decomposeScore } from '../analyzers/triage.js';
+import { resolveScoreWeights, customWeightsText, formatScore } from '../analyzers/score-weights.js';
+import { REPLAY_STYLES_CSS } from './replay-styles.js';
 import { getByPath } from '../../shared/paths.js';
 import { inferTier } from '../../replay/viewer-model.js';
 import { inlineSafeJson, inlineSafeSrc } from '../../shared/inline-safe.js';
@@ -43,6 +45,10 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
   // was hand-rolled in nine places and missing from exactly this one, which is
   // why the rule now lives in one module (T5 Task 10 + its fix round 3).
   const replayClientSrc = inlineSafeSrc(opts.replayClientSrc);
+  // @font-face rules for the report's typefaces (report-fonts.js builds them
+  // as base64 data URIs for the CLI). Absent → no faces, and every role
+  // renders in its fallback stack (the demo bundle and the snapshot tests).
+  const fontFaceCss = opts.fontFaceCss ? String(opts.fontFaceCss) + '\n' : '';
   const visualsUnavailableNote = opts.visualsUnavailableNote
     ?? 'Visual renderers not available (install the canvas package).';
   const imageSources = opts.imageSources ?? null;       // pid → {typingProfile, sessionTimeline, trajectories} data URIs (null entry = omit that img)
@@ -104,28 +110,41 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Cyborg Hunter Report</title>
   <style>
-    :root {
-      --bg: #fafafa; --surface: #fff; --ink: #1a1814;
-      --dim: #706a5c; --line: #e2ddd1;
+${fontFaceCss}    :root {
+      --bg: #fafafa; --surface: #fff; --ink: #0f0f0f;
+      --dim: #4f4a40; --line: #b9b2a2;
       --hard: #d32f2f; --soft: #f57c00; --clean: #388e3c;
+      /* Typefaces (embedded by report-fonts.js; picked in the 2026-09 report
+         palette). Each stack falls back to the system face when a font is
+         absent (demo bundle) or lacks a glyph (≥ ≤ ▶ ⓘ). */
+      --ff-space: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      --ff-tomorrow: "Tomorrow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      --ff-sofia: "Sofia Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      --ff-sora: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      --ff-recursive: "Recursive", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      --ff-majormono: "Major Mono Display", ui-monospace, SFMono-Regular, monospace;
     }
     * { box-sizing: border-box; margin: 0; padding: 0; }
     html, body { height: 100%; }
     body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: var(--ink); background: var(--bg); display: grid; grid-template-rows: auto 1fr; height: 100vh; }
     .topbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px;
-              background: var(--surface); border-bottom: 1px solid var(--line); }
-    .topbar h1 { font-size: 18px; font-weight: 600; }
-    .topbar .meta { color: var(--dim); font-size: 13px; flex: 1; }
+              background: var(--surface); border-bottom: 3px double var(--ink); }
+    .topbar h1 { font-family: var(--ff-space); font-size: 32.4px; font-weight: 550; letter-spacing: 0.01em; }
+    .topbar .meta { font-family: var(--ff-tomorrow); color: var(--dim); font-size: 13px; flex: 1; }
     .topbar button { padding: 6px 12px; border: 1px solid var(--line); background: var(--surface);
-                     color: var(--ink); border-radius: 4px; cursor: pointer; font-size: 13px; }
+                     color: var(--ink); border-radius: 4px; cursor: pointer;
+                     font-family: var(--ff-recursive); font-size: 19.5px; font-weight: 400; letter-spacing: 0; }
     .topbar button:hover { background: var(--bg); }
     .layout { display: grid; grid-template-columns: 360px 1fr; height: 100%; overflow: hidden; }
     .rail { background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; }
     .detail { overflow-y: auto; padding: 20px; }
-    .note { color: var(--dim); font-style: italic; font-size: 13px; }
+    .note { font-family: var(--ff-tomorrow); color: var(--dim); font-style: italic; font-size: 13px; }
+    /* .mono marks data values (ids, scores, counts, timestamps). It was a
+       system monospace; it now defaults to Sora with tabular figures, and the
+       roles below override it (timestamps, evidence text). */
     .mono {
-      font: 13px/1.3 ui-monospace, SFMono-Regular, 'IBM Plex Mono', monospace;
+      font: 13px/1.3 var(--ff-sora);
       font-variant-numeric: tabular-nums;
     }
     [hidden] { display: none !important; }
@@ -141,34 +160,43 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
       padding: 10px 12px; border-top: 1px solid var(--line);
       background: var(--surface); font-size: 12px;
     }
-    .totals-title { color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
-    .totals-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
-    .totals-row .count { margin-left: auto; }
+    .totals-title { font-family: var(--ff-sora); color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
+    .totals-row { font-family: var(--ff-sora); display: flex; align-items: center; gap: 6px; padding: 2px 0; }
+    .totals-row .count { font-family: var(--ff-sora); margin-left: auto; }
 
     /* Search */
     .search-wrap input {
       width: 100%; padding: 6px 8px; border: 1px solid var(--line);
-      border-radius: 4px; font-size: 13px; background: var(--bg);
+      border-radius: 4px; background: var(--bg);
       color: var(--ink);
+      font-family: var(--ff-recursive); font-size: 19.5px; font-weight: 400; letter-spacing: 0;
     }
     .search-wrap input:focus { outline: 1px solid var(--ink); border-color: var(--ink); }
 
-    /* Filter chips */
-    .filter-chips { display: flex; flex-wrap: wrap; gap: 4px; }
+    /* Filter chips — one segmented control: joined buttons, square inner
+       edges, outer corners 4px. 15px with 4px 8px padding keeps four 3-digit
+       counts on one line in the 360px rail (measured 2026-09-30). */
+    .filter-chips { display: flex; flex-wrap: wrap; gap: 0; }
     .filter-chip {
-      padding: 3px 8px; border: 1px solid var(--line); background: var(--surface);
-      color: var(--ink); border-radius: 12px; cursor: pointer; font-size: 12px;
+      padding: 4px 8px; border: 1px solid var(--line); background: var(--surface);
+      color: var(--ink); border-radius: 0; margin-left: -1px; cursor: pointer;
+      font-family: var(--ff-recursive); font-size: 15px; font-weight: 400; letter-spacing: 0;
     }
+    .filter-chip:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
+    .filter-chip:last-child { border-radius: 0 4px 4px 0; }
     .filter-chip:hover { background: var(--bg); }
+    /* Raised so the next chip's -1px overlap can't paint over its ink edge. */
     .filter-chip.active {
       background: var(--ink); color: var(--surface); border-color: var(--ink);
+      position: relative; z-index: 1;
     }
 
     /* Sort selector */
-    .sort-wrap { font-size: 12px; color: var(--dim); }
+    .sort-wrap { font-family: var(--ff-tomorrow); font-size: 12px; color: var(--dim); }
     .sort-wrap select {
       background: var(--surface); color: var(--ink); border: 1px solid var(--line);
-      border-radius: 4px; padding: 2px 4px; font-size: 12px;
+      border-radius: 4px; padding: 2px 4px;
+      font-family: var(--ff-recursive); font-size: 18px; font-weight: 400; letter-spacing: 0;
     }
 
     /* Cohort rows */
@@ -177,23 +205,27 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
       cursor: pointer;
     }
     .cohort-row:hover { background: var(--bg); }
+    /* Selected row: a 2px inset ink outline (no layout shift, row tone kept). */
     .cohort-row.selected {
-      border-left: 4px solid var(--ink);
-      padding-left: 8px;  /* compensate for the 4px left border */
-      background: var(--bg);
+      border-left: 0;
+      padding-left: 12px;
+      background: transparent;
+      box-shadow: inset 0 0 0 2px var(--ink);
     }
     .cohort-row-top { display: flex; align-items: center; gap: 8px; }
     .cohort-row-top .pid {
+      font-family: var(--ff-sora);
       flex: 1; min-width: 0; color: var(--ink);
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     }
-    .cohort-row-top .score { color: var(--dim); flex-shrink: 0; }
+    .cohort-row-top .score { font-family: var(--ff-sora); color: var(--dim); flex-shrink: 0; }
     .cohort-row.selected .cohort-row-top .score { color: var(--ink); font-weight: 600; }
     .cohort-row-bot {
       display: flex; align-items: flex-start; gap: 8px;
       margin-top: 4px;
     }
     .reason-excerpt {
+      font-family: var(--ff-recursive);
       flex: 1; color: var(--dim); font-size: 12px;
       display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
       overflow: hidden; text-overflow: ellipsis;
@@ -208,9 +240,10 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
     .tier-dot[data-tier="soft"]  { background: var(--soft); }
     .tier-dot[data-tier="clean"] { background: var(--clean); }
 
-    /* Tier badge — small pill, filled for hard/soft, outline for clean */
+    /* Tier badge — small square tag, filled for hard/soft, outline for clean */
     .tier-badge {
-      font-size: 10px; padding: 2px 6px; border-radius: 3px;
+      font-family: var(--ff-sora);
+      font-size: 10px; padding: 2px 6px; border-radius: 0;
       font-weight: 600; letter-spacing: 0.04em; flex-shrink: 0;
     }
     .tier-badge[data-tier="hard"]  { background: var(--hard);  color: white; }
@@ -244,17 +277,21 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
 
     /* Header strip */
     .detail-header {
-      border-bottom: 1px solid var(--line);
+      border-bottom: 1px solid var(--ink);
       padding-bottom: 12px; margin-bottom: 16px;
     }
     .detail-header-top { display: flex; align-items: center; gap: 12px; }
-    .detail-header-top .pid-full { flex: 1; font-size: 13px; color: var(--ink); }
-    .detail-header-top .score-big { font-size: 36px; font-weight: 600; color: var(--ink); }
-    .detail-header-sub { color: var(--dim); font-size: 12px; margin-top: 4px; }
-
-    /* Tier pill — bigger version of the tier badge in the rail */
+    .detail-header-top .pid-full { font-family: var(--ff-sora); flex: 1; font-size: 13px; color: var(--ink); }
+    .detail-header-top .score-big { font-family: var(--ff-sora); font-size: 36px; font-weight: 600; color: var(--ink); }
+    .detail-header-sub { font-family: var(--ff-tomorrow); color: var(--dim); font-size: 12px; margin-top: 4px; }
+    /* The optional platform-ID line is an identifier, so it stays in the ID
+       face rather than taking the meta-line face by source order. */
+    .detail-header-sub.mono { font-family: var(--ff-sora); }
+
+    /* Tier pill — bigger version of the tier badge in the rail (square tag) */
     .tier-pill {
-      font-size: 11px; padding: 3px 8px; border-radius: 4px;
+      font-family: var(--ff-sora);
+      font-size: 11px; padding: 3px 8px; border-radius: 0;
       font-weight: 600; letter-spacing: 0.04em;
     }
     .tier-pill[data-tier="hard"]  { background: var(--hard); color: white; }
@@ -275,7 +312,7 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
     }
     .signal-tile {
       border: 1px solid var(--line);
-      border-radius: 4px;
+      border-radius: 0;
       padding: 8px 10px;
       display: flex;
       flex-direction: column;
@@ -289,8 +326,8 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
     .signal-tile.tone-warn     { color: var(--soft); border-color: var(--soft); background: rgba(245, 124,  0, 0.04); }
     .signal-tile.tone-muted    { color: var(--ink);  border-color: var(--ink);  background: rgba(26,  24, 20, 0.03); }
     .signal-tile.tone-zero     { color: #b8b1a0; border-color: #ebe6d8; background: transparent; }
-    .signal-value { font-size: 18px; font-weight: 700; line-height: 1; }
-    .signal-label { font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.85; }
+    .signal-value { font-family: var(--ff-sora); font-size: 18px; font-weight: 700; line-height: 1; }
+    .signal-label { font-family: var(--ff-recursive); font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.85; }
 
     /* Score breakdown — horizontal flex of weighted contributions to t.score,
        ending in "Total: N". Only non-zero terms render; the bar widths are
@@ -303,21 +340,22 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
       display: inline-flex; gap: 6px; align-items: center;
       font-size: 12px;
     }
-    .score-term .label { color: var(--dim); }
-    .score-term .contrib { color: var(--ink); }
+    .score-term .label { font-family: var(--ff-recursive); color: var(--dim); }
+    .score-term .contrib { font-family: var(--ff-sora); color: var(--ink); }
     .score-term .bar {
-      height: 6px; background: var(--ink); opacity: 0.4; border-radius: 3px;
+      height: 6px; background: var(--ink); opacity: 0.4; border-radius: 2px;
     }
-    .score-total { margin-left: auto; font-weight: 600; color: var(--ink); }
+    .score-total { font-family: var(--ff-sora); margin-left: auto; font-weight: 600; color: var(--ink); }
 
-    /* Reason pull-quote — warm-tinted block-quote with a left rule. The bg
-       color is picked by hand from --bg's family rather than computed, so
-       it shifts cleanly when the palette changes. */
+    /* Reason note — a hairline box on the surface (the earlier warm tint and
+       3px left rule were dropped in the 2026-09 reshape). */
     .reason {
-      border-left: 3px solid var(--ink);
-      background: #f5f1e8;
+      background: var(--surface);
+      border: 1px solid var(--line);
+      border-radius: 4px;
       padding: 10px 14px;
       margin: 0 0 16px;
+      font-family: var(--ff-tomorrow);
       font-size: 14px;
       color: var(--ink);
     }
@@ -325,6 +363,7 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
     /* Session-level signals — small cards in a responsive grid. The grid
        collapses from 3 cells to 1 in narrow detail panes via auto-fit. */
     .section-heading {
+      font-family: var(--ff-sofia);
       font-size: 13px; color: var(--dim);
       text-transform: uppercase; letter-spacing: 0.04em;
       margin: 18px 0 8px;
@@ -336,14 +375,16 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
     }
     .sig-cell {
       background: var(--surface); border: 1px solid var(--line);
-      border-radius: 6px; padding: 10px;
+      border-radius: 0; padding: 10px;
+      box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.05);
     }
     .sig-cell-title {
+      font-family: var(--ff-sofia);
       font-size: 11px; color: var(--dim);
       text-transform: uppercase; letter-spacing: 0.04em;
     }
     .sig-cell ul { list-style: none; margin-top: 4px; font-size: 12px; padding: 0; }
-    .sig-cell li { padding: 2px 0; word-break: break-word; }
+    .sig-cell li { font-family: var(--ff-recursive); padding: 2px 0; word-break: break-word; }
     .muted { color: var(--dim); }
 
     /* Paste evidence — list of expandable entries */
@@ -358,10 +399,11 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
     }
     .paste-toggle:disabled { cursor: default; }
     .paste-toggle:hover:not(:disabled) { color: var(--ink); }
-    .paste-trial { color: var(--dim); flex-shrink: 0; }
+    .paste-trial { font-family: var(--ff-majormono); color: var(--dim); flex-shrink: 0; }
     .paste-preview, .paste-full {
-      background: #f5f1e8;  /* warm tinted bg, same as the reason pull-quote */
-      padding: 4px 8px; border-radius: 3px;
+      background: var(--surface); border: 1px solid var(--line);  /* hairline box, like .reason */
+      padding: 4px 8px; border-radius: 0;
+      font-family: var(--ff-tomorrow);
       font-size: 12px;
       word-break: break-word; white-space: pre-wrap;
       flex: 1; min-width: 0;  /* allow flex item to shrink and wrap correctly */
@@ -369,7 +411,7 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
     /* When expanded by Task 11's JS: hide preview, show full text */
     .paste-entry.expanded .paste-preview { display: none; }
     .paste-entry:not(.expanded) .paste-full { display: none; }
-    .paste-overflow { font-size: 12px; margin-top: 4px; }
+    .paste-overflow { font-family: var(--ff-tomorrow); font-size: 12px; margin-top: 4px; }
 
     /* Image blocks — wrapper containers so a missing PNG hides its heading too.
        Each .image-block contains a <h4 class="section-heading"> + a zoomable
@@ -382,7 +424,8 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
     .image-block .section-heading { margin: 0 0 6px; }
     .detail img {
       max-width: 100%; display: block; margin: 6px 0 0;
-      border: 1px solid var(--line); border-radius: 4px;
+      border: 1px solid var(--line); border-radius: 0;
+      box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.05);
     }
     .zoomable {
       display: block; cursor: zoom-in;
@@ -422,7 +465,7 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
       max-width: 560px; max-height: calc(100vh - 16vh);
       margin: 8vh auto 0;
       padding: 20px 24px;
-      border-radius: 8px;
+      border-radius: 0;
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
       overflow-y: auto;
     }
@@ -435,6 +478,7 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
     }
     .modal-close:hover { color: var(--ink); }
     .modal-card h3 {
+      font-family: var(--ff-space);
       font-size: 16px; margin-bottom: 12px;
     }
     .legend-table {
@@ -446,7 +490,9 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
       border-bottom: 1px solid var(--line);
       vertical-align: top;
     }
+    .legend-table td { font-family: var(--ff-recursive); }
     .legend-table th {
+      font-family: var(--ff-sofia);
       color: var(--dim); font-weight: 500; font-size: 12px;
       text-transform: uppercase; letter-spacing: 0.04em;
     }
@@ -459,7 +505,7 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
 <body data-filter="all">
   <header class="topbar">
     <h1>Cyborg Hunter Report</h1>
-    <span class="meta">${triage.length} participants &middot; v${VERSION}</span>
+    <span class="meta">${triage.length} participants &middot; v${VERSION}${scoreWeightsNote(config)}</span>
     <button class="legend-btn" type="button" aria-haspopup="dialog" aria-controls="legend-modal">Legend &#9432;</button>
   </header>
   <div class="layout">
@@ -728,50 +774,7 @@ export async function renderIndexHtml(summaries, triage, participants, config, v
     })();
   </script>
   <style>
-    /* Replay viewer (see replay-viewer.client.js) — matches report house style */
-    .replay-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
-    .replay-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
-                    background: var(--ink); color: var(--surface); }
-    .replay-badge[data-tier="trace"] { background: var(--surface); color: var(--ink);
-                    border: 1px solid var(--line); }
-    .replay-stage { position: relative; overflow: hidden; background: var(--surface);
-                    border: 1px solid var(--line); border-radius: 4px; }
-    .replay-frame { position: absolute; top: 0; left: 0; border: 0; }
-    .replay-overlay { position: absolute; top: 0; left: 0; pointer-events: none; }
-    .replay-neutral { background: #e8e6e0; }
-    .replay-neutral-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
-                            color: var(--dim); font-size: 13px; }
-    .replay-lane { display: block; margin-top: 6px; border-radius: 2px; }
-    .replay-scrub { display: block; margin: 2px 0 4px; }
-    .replay-ticker { font: 12px/1.3 ui-monospace, SFMono-Regular, 'IBM Plex Mono', monospace;
-                     color: var(--dim); font-variant-numeric: tabular-nums;
-                     height: 1.4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
-    .replay-note { font-size: 12px; color: var(--dim); }
-    .replay-warn { color: var(--hard); }
-    /* Controls share the report's flat, line-bordered button style */
-    .replay-play, .replay-load-btn, .replay-css-btn, .replay-segment-select, .replay-speed {
-      padding: 4px 10px; border: 1px solid var(--line); background: var(--surface);
-      color: var(--ink); border-radius: 4px; cursor: pointer; font-size: 13px; }
-    .replay-play:hover, .replay-load-btn:hover, .replay-css-btn:hover { background: var(--bg); }
-    .replay-play:disabled, .replay-load-btn:disabled { opacity: 0.6; cursor: default; }
-    .replay-fetch-css-label { margin-left: 10px; font-size: 12px; color: #555; }
-    .replay-unstyled { position: absolute; left: 0; right: 0; top: 0; z-index: 3; background: #fff4dd; color: #7a4b00; border-bottom: 1px solid #e8b24a; padding: 6px 10px; font-size: 12px; line-height: 1.4; }
-    .replay-css-btn { font-size: 12px; padding: 2px 8px; }
-    .replay-clock { font: 12px/1.3 ui-monospace, SFMono-Regular, 'IBM Plex Mono', monospace;
-                    font-variant-numeric: tabular-nums; }
-    .replay-keycast { position: absolute; left: 0; right: 0; bottom: 0; display: flex;
-                    gap: 4px; padding: 5px 6px; pointer-events: none; flex-wrap: wrap-reverse; }
-    .replay-key-chip { font: 11px/1.2 ui-monospace, SFMono-Regular, 'IBM Plex Mono', monospace;
-                    background: rgba(0,0,0,0.72); color: #fff; padding: 2px 7px;
-                    border-radius: 3px; white-space: nowrap; }
-    .replay-key-chip--redacted { background: rgba(0,0,0,0.5); font-style: italic; }
-    /* Media is reported as state, never played (design §7): the badges say what
-       the recorded element was doing, in the stage's top-left. */
-    .replay-media { position: absolute; left: 0; top: 0; display: flex; gap: 4px;
-                    padding: 5px 6px; pointer-events: none; flex-wrap: wrap; }
-    .replay-media-badge { font: 11px/1.2 ui-monospace, SFMono-Regular, 'IBM Plex Mono', monospace;
-                    background: rgba(0,137,123,0.85); color: #fff; padding: 2px 7px;
-                    border-radius: 3px; white-space: nowrap; }
+${REPLAY_STYLES_CSS}
   </style>
   ${preloadedReplayScript}<script>
 ${replayClientSrc}
@@ -846,7 +849,8 @@ function tierOf(t) {
 //              drop, long tab-aways, AI extensions detected).
 //   warn     — soft-score-contributing signals that compound with others.
 //   muted    — diagnostic signals that are noise alone but corroborate.
-// Tone classes track scoring weights; if computeTriageScore changes, audit this.
+// Tone classes track the DEFAULT score weights (score-weights.js); custom
+// config.scoreWeights do not retone the tiles. If the defaults change, audit this.
 // `aiExtensionsCount` and `edgeExitCount` are derived (not on summary directly);
 // renderSignalGrid handles that mapping.
 const SIGNALS = [
@@ -960,7 +964,7 @@ function renderCohortRow(t) {
     <div class="cohort-row-top">
       <span class="tier-dot" data-tier="${tier}"></span>
       <span class="mono pid" title="${esc(pid)}">${esc(pid)}</span>
-      <span class="mono score">${score}</span>
+      <span class="mono score">${formatScore(score)}</span>
     </div>
     <div class="cohort-row-bot">
       <span class="reason-excerpt">${esc(reason)}</span>
@@ -1034,7 +1038,7 @@ function renderDetail(t, participant, config, visualsRendered, visualsUnavailabl
   return `<section class="participant" id="p-${sanitized}"${defaultVisible ? '' : ' hidden'}>
     ${renderDetailHeader(t, tier, participant, config)}
     ${renderSignalGrid(s, t)}
-    ${renderScoreBreakdown(t)}
+    ${renderScoreBreakdown(t, config)}
     ${renderReasonQuote(t)}
     ${renderSessionBlock(s, participant)}
     ${renderPasteEvidence(participant)}
@@ -1238,7 +1242,7 @@ function renderDetailHeader(t, tier, participant, config) {
     <div class="detail-header-top">
       <span class="mono pid-full">${esc(t.participantId)}</span>
       <span class="tier-pill" data-tier="${tier}">${tierLabel}</span>
-      <span class="mono score-big">${t.score}</span>
+      <span class="mono score-big">${formatScore(t.score)}</span>
     </div>
     <div class="detail-header-sub">
       ${s.trialCount ?? 0} trials · ${cps} cps · ${offTask} off-task
@@ -1247,9 +1251,12 @@ function renderDetailHeader(t, tier, participant, config) {
 }
 
 // Horizontal score breakdown — only non-zero contributions, ending in Total:N.
-// Sourced from decomposeScore so the displayed terms always sum to t.score.
-function renderScoreBreakdown(t) {
-  const terms = decomposeScore(t.summary || {}, t.edgeExitCount, t.hardTriggered)
+// Draws the terms rankTriage actually summed (t.terms). Rows built elsewhere
+// without terms (hand-built callers) are decomposed here with the CONFIGURED
+// weights, so the bars never disagree with a custom-weights header.
+function renderScoreBreakdown(t, config) {
+  const terms = (t.terms ?? decomposeScore(t.summary || {}, t.edgeExitCount, t.hardTriggered,
+    resolveScoreWeights(config?.scoreWeights).weights))
     .filter(([, n]) => n > 0);
 
   const total = t.score;
@@ -1259,17 +1266,24 @@ function renderScoreBreakdown(t) {
   const termHtml = terms.map(([label, n]) =>
     `<span class="score-term">
        <span class="label">${label}</span>
-       <span class="mono contrib">+${n}</span>
+       <span class="mono contrib">+${formatScore(n)}</span>
        <span class="bar" style="width:${barFor(n)}px"></span>
      </span>`
   ).join('');
 
   return `<div class="score-breakdown">
     ${termHtml}
-    <span class="score-total mono">Total: ${total}</span>
+    <span class="score-total mono">Total: ${formatScore(total)}</span>
   </div>`;
 }
 
+// Top-bar note, present only when config.scoreWeights changes the score from
+// the defaults: " · custom score weights: copy 5 max 3, synthetic 1".
+function scoreWeightsNote(config) {
+  const { weights, isDefault } = resolveScoreWeights(config?.scoreWeights);
+  return isDefault ? '' : ` &middot; custom score weights: ${esc(customWeightsText(weights))}`;
+}
+
 // Format milliseconds as "Xs" / "Xm Ys".
 function formatDuration(ms) {
   if (!ms || ms < 1000) return '0s';

package/src/cli/renderers/html-index.js

@@ -1,11 +1,13 @@
 // src/cli/renderers/html-index.js
 // Thin Node wrapper around the pure render core (html-index-core.js):
-// reads the replay viewer client from disk, writes index.html to outputDir.
+// reads the replay viewer client and the embedded fonts from disk, writes
+// index.html to outputDir.
 // Public API unchanged — report.js and adopters keep calling renderHtmlIndex.
 import { writeFileSync } from 'fs';
 import { join } from 'path';
 import { renderIndexHtml } from './html-index-core.js';
 import { readReplayClientSrc } from './replay-client-source.js';
+import { buildFontFaceCss } from './report-fonts.js';
 
 // The replay viewer client is developed as real JS files (linted, syntax-
 // highlighted) and embedded verbatim at render time — same file://-safe
@@ -13,10 +15,13 @@ import { readReplayClientSrc } from './replay-client-source.js';
 // CONCATENATION: the client calls into src/replay/dom-instantiate.js, which
 // ships ahead of it in the same script (see replay-client-source.js).
 const REPLAY_CLIENT_SRC = readReplayClientSrc();
+// The report's six typefaces as base64 @font-face rules (report-fonts.js),
+// built once per process like the replay client.
+const FONT_FACE_CSS = buildFontFaceCss();
 
 export async function renderHtmlIndex(summaries, triage, participants, config, visualsRendered) {
   const html = await renderIndexHtml(summaries, triage, participants, config,
-    visualsRendered, { replayClientSrc: REPLAY_CLIENT_SRC });
+    visualsRendered, { replayClientSrc: REPLAY_CLIENT_SRC, fontFaceCss: FONT_FACE_CSS });
   writeFileSync(join(config.outputDir, 'index.html'), html);
   console.log('  index.html — report page');
 }

package/src/cli/renderers/replay-styles.js

@@ -0,0 +1,61 @@
+// src/cli/renderers/replay-styles.js
+// The replay viewer's CSS (.replay-* rules), shared by the CLI report
+// (html-index-core.js puts it in the report's second <style>) and the demo's
+// replay-host iframe (demo/replay-host.js, which receives it from results.js
+// through the preview-core bundle). One copy: the demo used to keep a
+// hand-synced duplicate, which had drifted. Rules reference the report's
+// tokens (--ink, --surface, --line, --bg, --dim, --hard and the --ff-* font
+// stacks); a host document must declare them.
+
+export const REPLAY_STYLES_CSS = `    /* Replay viewer (see replay-viewer.client.js) — matches report house style */
+    .replay-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
+    .replay-badge { font-family: var(--ff-sora); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 0;
+                    background: var(--ink); color: var(--surface); }
+    .replay-badge[data-tier="trace"] { background: var(--surface); color: var(--ink);
+                    border: 1px solid var(--line); }
+    .replay-stage { position: relative; overflow: hidden; background: var(--surface);
+                    border: 1px solid var(--line); border-radius: 0; }
+    .replay-frame { position: absolute; top: 0; left: 0; border: 0; }
+    .replay-overlay { position: absolute; top: 0; left: 0; pointer-events: none; }
+    .replay-neutral { background: #e8e6e0; }
+    .replay-neutral-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
+                            font-family: var(--ff-recursive); color: var(--dim); font-size: 13px; }
+    .replay-lane { display: block; margin-top: 6px; border-radius: 2px; }
+    .replay-scrub { display: block; margin: 2px 0 4px; }
+    .replay-ticker { font: 12px/1.3 var(--ff-majormono);
+                     color: var(--dim); font-variant-numeric: tabular-nums;
+                     height: 1.4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+    .replay-note { font-family: var(--ff-recursive); font-size: 12px; color: var(--dim); }
+    .replay-warn { color: var(--hard); }
+    .replay-pause-toggle { font-family: var(--ff-recursive); }
+    /* Controls share the report's flat, line-bordered button style */
+    .replay-play, .replay-load-btn, .replay-css-btn, .replay-segment-select, .replay-speed {
+      padding: 4px 10px; border: 1px solid var(--line); background: var(--surface);
+      color: var(--ink); border-radius: 4px; cursor: pointer;
+      font-family: var(--ff-recursive); font-size: 13px; }
+    /* Play is the transport's primary action: a round ink button. Its hover
+       is its own (darker ink); the light shared hover below would leave a
+       white ▶ on a light ground. */
+    .replay-play { background: var(--ink); color: var(--surface); border-color: var(--ink);
+                   width: 36px; height: 30px; padding: 0; border-radius: 50%; }
+    .replay-play:hover { background: #2b2b2b; }
+    .replay-load-btn:hover, .replay-css-btn:hover { background: var(--bg); }
+    .replay-play:disabled, .replay-load-btn:disabled { opacity: 0.6; cursor: default; }
+    .replay-fetch-css-label { font-family: var(--ff-recursive); margin-left: 10px; font-size: 12px; color: #555; }
+    .replay-unstyled { position: absolute; left: 0; right: 0; top: 0; z-index: 3; background: #fff4dd; color: #7a4b00; border-bottom: 1px solid #e8b24a; padding: 6px 10px; font-family: var(--ff-recursive); font-size: 12px; line-height: 1.4; }
+    .replay-css-btn { font-size: 12px; padding: 2px 8px; }
+    .replay-clock { font: 12px/1.3 var(--ff-majormono);
+                    font-variant-numeric: tabular-nums; }
+    .replay-keycast { position: absolute; left: 0; right: 0; bottom: 0; display: flex;
+                    gap: 4px; padding: 5px 6px; pointer-events: none; flex-wrap: wrap-reverse; }
+    .replay-key-chip { font: 400 13px/1.2 var(--ff-tomorrow);
+                    background: rgba(0,0,0,0.72); color: #fff; padding: 3px 9px;
+                    border-radius: 2px; white-space: nowrap; }
+    .replay-key-chip--redacted { background: rgba(0,0,0,0.5); font-style: italic; }
+    /* Media is reported as state, never played (design §7): the badges say what
+       the recorded element was doing, in the stage's top-left. */
+    .replay-media { position: absolute; left: 0; top: 0; display: flex; gap: 4px;
+                    padding: 5px 6px; pointer-events: none; flex-wrap: wrap; }
+    .replay-media-badge { font: 11px/1.2 var(--ff-tomorrow);
+                    background: rgba(0,137,123,0.85); color: #fff; padding: 2px 7px;
+                    border-radius: 3px; white-space: nowrap; }`;

package/src/cli/renderers/replay-viewer.client.js

@@ -1881,16 +1881,18 @@
           if (e.t >= playhead - 600) ripples.push(q);
         }
       }
-      // Cursor trail: fading polyline per segment
+      // Cursor trail: breadcrumb dots, one per sampled point (after a
+      // segment's first), fading with age. Gaps between dots show pointer
+      // speed; a severed segment simply has no dot bridging the break. Drawn
+      // FIRST, and never at radius 2, 5 or 7: the alignment battery reads the
+      // cursor glyph off the final arcs (r=5 confident, r=7 then r=2 uncertain).
       segs.forEach(function (line) {
         for (var s = 1; s < line.length; s++) {
           var age = (playhead - line[s].t) / 2500;
-          ctx.strokeStyle = 'rgba(211,47,47,' + (0.85 * (1 - age)).toFixed(3) + ')';
-          ctx.lineWidth = 2;
+          ctx.fillStyle = 'rgba(211,47,47,' + (0.85 * (1 - age)).toFixed(3) + ')';
           ctx.beginPath();
-          ctx.moveTo(line[s - 1].x, line[s - 1].y);
-          ctx.lineTo(line[s].x, line[s].y);
-          ctx.stroke();
+          ctx.arc(line[s].x, line[s].y, 2.2, 0, Math.PI * 2);
+          ctx.fill();
         }
       });
       // Click ripples: expanding rings over 600ms

package/src/cli/renderers/report-fonts.js

@@ -0,0 +1,24 @@
+// src/cli/renderers/report-fonts.js
+// The report's typefaces, embedded so the report stays a single offline file.
+// Reads the committed WOFF2 files listed in fonts/FONTS_MANIFEST.json and
+// returns one @font-face block of base64 data URIs (≈227 KB for the six
+// families). html-index.js passes it to renderIndexHtml as opts.fontFaceCss,
+// the same way it passes the replay viewer source, so html-index-core.js
+// stays pure (no fs) and can be bundled for the browser demo.
+//
+// Node only: keep this module out of anything src/cli/preview-entry.js
+// imports (npm run demo:preview fails the build if it leaks in).
+
+import { readFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { fontFaceCss } from './font-face-css.js';
+
+export const FONTS_DIR = join(dirname(fileURLToPath(import.meta.url)), 'fonts');
+
+// The rule format lives in font-face-css.js (shared with the browser demo);
+// this only supplies the bytes from disk.
+export function buildFontFaceCss(dir = FONTS_DIR) {
+  const manifest = JSON.parse(readFileSync(join(dir, 'FONTS_MANIFEST.json'), 'utf8'));
+  return fontFaceCss(manifest.files, p => readFileSync(join(dir, p)).toString('base64'));
+}

package/src/cli/renderers/score-weights.js

@@ -0,0 +1,16 @@
+// src/cli/renderers/score-weights.js
+// Writes score-weights.json — the weights this report's triage score was built
+// with (config.scoreWeights merged onto the defaults). Always written, so two
+// reports can be checked for comparability without their config files.
+// Warnings stay on the console (config.js); this file holds weights only.
+
+import { writeFileSync } from 'fs';
+import { join } from 'path';
+import { resolveScoreWeights } from '../analyzers/score-weights.js';
+
+export function renderScoreWeights(config) {
+  const { weights, isDefault } = resolveScoreWeights(config?.scoreWeights);
+  writeFileSync(join(config.outputDir, 'score-weights.json'),
+    JSON.stringify({ isDefault, weights }, null, 2) + '\n');
+  console.log(`  score-weights.json — ${isDefault ? 'default' : 'custom'} weights`);
+}

package/src/cli/renderers/summary-csv.js

@@ -9,6 +9,8 @@ import { join } from 'path';
 const COLUMNS = [
   ['participantId', (s, t) => s.participantId],
   ['trialCount', (s, t) => s.trialCount],
+  // The exact score rankTriage sorted on (not the one-decimal display form),
+  // so the analysis file never disagrees with the ranking.
   ['triageScore', (s, t) => t.score],
   ['hardTriggered', (s, t) => t.hardTriggered ? 'YES' : 'no'],
   ['triageReason', (s, t) => t.reason],