cyborg-hunter 0.9.0 → 0.9.1

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

@@ -22,6 +22,7 @@
 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';
@@ -44,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)
@@ -105,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; }
@@ -142,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 */
@@ -178,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;
@@ -209,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; }
@@ -245,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; }
@@ -276,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;
@@ -290,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
@@ -304,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);
     }
@@ -326,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;
@@ -337,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 */
@@ -359,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 */
@@ -370,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
@@ -383,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;
@@ -423,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;
     }
@@ -436,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 {
@@ -447,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;
     }
@@ -729,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}

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/jspsych/extension-cyborg-hunter-replay.js

@@ -35,7 +35,7 @@ import { buildReplayMeta } from '../replay/persistence.js';
 class CyborgHunterReplayExtension {
   static info = {
     name: 'cyborg-hunter-replay',
-    version: '0.9.0',
+    version: '0.9.1',
     data: {}   // per-trial return is {}; session meta goes via addProperties
   };
 

package/src/jspsych/extension-cyborg-hunter.js

@@ -10,7 +10,7 @@ class CyborgHunterExtension {
     // and package.json). Hand-bumped on each release; if you forget, the
     // jsPsych developer console shows a stale number — the actual version
     // attached to data is read from window.CyborgHunter.VERSION at runtime.
-    version: '0.9.0',
+    version: '0.9.1',
     data: { integrity: { type: 'object' } }
   };
 

package/src/shared/constants.js

@@ -2,7 +2,7 @@
 // Default thresholds and preset configurations for Cyborg Hunter.
 // Single source of truth — used by both the browser library and CLI report tool.
 
-export const VERSION = "0.9.0";
+export const VERSION = "0.9.1";
 
 // Default detection thresholds shared across presets.
 // Researchers can override any value at init() time.