<!--
  effprof Visualizer - Efficient Computer marketing tool
  Ingests an effprof JSON recording (effprof record --out) and renders an
  interactive flame graph of scalar functions, Fabric kernels, and profiler
  regions, plus the flat profile and the Fabric functional unit heat map.

  Changelog
  v2.23 2026-08-13 The pane now answers the drag while it is happening. Until now
                   the only sign the tool would take a dropped file was the drop
                   zone in the left panel picking up a gold border, which is
                   nowhere near the cursor when you are dragging a capture onto
                   the graph. Dragging a file anywhere over the tool gives the
                   view pane the same dashed gold treatment with "drop to read
                   this recording", so the answer is where you are looking. It
                   arms only for drags that actually carry a file, since a
                   dragged text selection must not promise an ingest, and the
                   overlay ignores pointer events so it cannot swallow the drop
                   it is advertising.
  v2.22 2026-08-13 Now that the tool lands with our own capture on screen, say so
                   and say what to do about it. A 32px strip under the crumbs
                   names the file as a sample and states that dropping an
                   effprof JSON anywhere on the pane reads that instead, which
                   is the message the empty state used to carry and nobody sees
                   any more. It shows for the staged sample only, never for a
                   file the reader loaded, and the dismiss is remembered in
                   localStorage under effprofSampleNoteHidden. The guide's first
                   step says the same thing: a sample is already loaded, and a
                   dropped file replaces it.
  v2.21 2026-08-13 The tool now lands on a loaded recording instead of an empty
                   canvas (Adam's ask): demo_core_main.json, a CoreMark run
                   captured 2026-08-13 on effcc 26.3.0.0, is staged beside the
                   tool and read at launch. Two things were in the way. The
                   sample was fetched on a bare relative path, and labs serves
                   this page at /effprof-visualizer with no redirect to a
                   trailing slash, so the browser asked the site root for the
                   file, got a 404, and the catch swallowed it: the deployed
                   tool has been landing blank while the same file loaded fine
                   locally. The path is resolved against the tool's own
                   directory now. The other was the http-only guard, which also
                   locked out the desktop build's custom protocol, so only
                   file: is skipped now, where a sibling cannot be fetched
                   anyway. core_main.json stays on the candidate list behind the
                   demo capture so an older deploy still comes up loaded.
  v2.20 2026-08-13 A dropped file could stall at "Parsing" and never load. Since
                   v2.7 the ingest has waited on requestAnimationFrame so the
                   busy state gets painted before the parse blocks the thread,
                   but a page that is not painting never runs that callback, so
                   the recording was left showing a progress message that never
                   resolved, with no data and no error. A background tab does
                   this, and so does a webview that withholds frames, which is
                   the standing suspect in the desktop drag and drop report.
                   Found it in testing: under a headless virtual clock the same
                   drop worked or hung depending on which mode happened to
                   starve the frame. The frame is still preferred, a 120ms timer
                   now backs it up, and whichever arrives first the file is
                   ingested exactly once.
  v2.19 2026-08-13 Dropping a recording while the Sandwich view was open looked
                   like it did nothing (Adam, 2026-08-13). The drop was never
                   the problem: the file parses, the capture panel, stats bar,
                   flat profile and region tree all fill. The pane you are
                   watching is what stayed empty, because an ingest cleared the
                   selected function and the sandwich cannot draw without one,
                   so all 790px of it held a single line of grey placeholder
                   text. Measured 2,563 lit pixels against 420,855 for the same
                   capture in the timeline. An ingest now keeps the function you
                   were reading when the new recording still has it, which is
                   the usual case, you re-record the same program and drop it
                   in, and otherwise roots the view at the heaviest self-cycles
                   function. Timeline and merged still start clean: they draw
                   the whole capture, and a carried selection would land there
                   as a filter nobody asked for. This was never a regression,
                   the same drop behaves identically back to v2.0.
  v2.18 2026-08-13 Fabric heat map columns did not line up with their headers,
                   and the last one ran into the panel border. Nothing was
                   overflowing: the table sized each column to its own contents,
                   so a unit that never fired in the capture (a column of ·)
                   came out at 27px against its neighbours' 57px, which breaks
                   the one thing a heat map is for, comparing down a column and
                   across a row. The six unit columns are one fixed width now,
                   whatever the numbers say, the kernel name column takes the
                   rest (126 to 145px, so fewer names get truncated), and the
                   table stops 12px short of the panel edge so the last wash
                   and its digits are not sitting on the border.
  v2.17 2026-08-13 Merged mode stopped responding to clicks (Cindy Li, DM
                   2026-08-11: "the Merged tab seems broke ... I can't click on
                   an event to zoom in on it"). Cause: the click handler ignores
                   anything that arrives at the end of a drag, and the drag
                   distance was only ever reset by the timeline branch of
                   mousedown. Merged and sandwich return before that line, so
                   one pan in the timeline left the distance set for the rest
                   of the session and every later click in those modes was read
                   as the tail of that old drag and dropped. Reproduced
                   headlessly: pan 80px, switch to Merged, click a frame that
                   hit-tests fine, zoom stays null. Every mousedown clears the
                   guard now, and switching mode clears the drag state too, so
                   a brush in the timeline no longer eats the first click in
                   the view you switch to. This is also why the "all" crumb
                   looked dead: with no zoom to return from, it had nothing to
                   undo. Selftest now presses in each mode and fails if the
                   guard survives.
  v2.16 2026-08-13 Dropped the "max n.nn" readout from the top right corner of
                   the IPC strip (Cindy Li, DM 2026-08-11, red circle in her
                   screenshot). v2.11 had given it an opaque pad so it stopped
                   tangling with the bars, but it still sits on the data, and
                   the strip ceiling is fixed for the whole capture, so it read
                   as clutter rather than as a scale. The number is not lost:
                   the strip tooltip now carries a "strip scale" row next to
                   the per-cycle IPC it applies to.
  v2.15 2026-08-13 Fabric functional unit columns were labelled in the wrong
                   order (Cindy Li, DM 2026-08-11: "I got the FU headers wrong
                   and pushed changes last week"). The counters are drained off
                   the hardware as cf, ls, basic-int, float, full-int,
                   basic-int-plus (riptools lib/Target/eff-rt/trace.cc,
                   fabric_offsets), and effprof's own printed header was fixed
                   to match in riptools 9d8d7036. The tool still used the old
                   printed order, so every heat map column after the first was
                   named after the wrong unit. Labels only: the counts were
                   always correct and no capture needs re-recording. This also
                   explains why demo.json looked like a column shift (kernels
                   showing float firings and ls=0); with the drain order the
                   same numbers read correctly.
  v2.14 2026-08-11 The "all regions" row did nothing. It carried the selected
                   look whenever no single region was picked, so it read as a
                   state rather than a control, and clicking it only cleared the
                   selected region: from the default view that was a no-op, and
                   it left a selected function, a search, a brush and the zoom
                   untouched. It is a toggle now. Clicking it resets to the
                   default view (the same reset Esc does, which is now one shared
                   function) and lights every region: region frames go supernova,
                   everything else dims, which is the all-regions view there was
                   no way to reach before. Clicking it again turns the highlight
                   off, hovering it previews, and picking a single region in the
                   tree still overrides it. Timeline only, since merged and
                   sandwich have no region frames to light.
  v2.13 2026-08-11 The flame graph drew a short stack of 30px rows against the
                   bottom edge and left the rest of the pane empty: 317 of 791px
                   on a 1600x1000 window, over a third of the view. Row height
                   now divides the space available below the strips (capped at
                   56px so a shallow capture does not become a few huge slabs,
                   floored at the old 20px so a deep tree still scrolls). Same
                   capture now leaves 17px: 55px rows on that window, 36px on a
                   1366x768 laptop.
  v2.12 2026-08-11 The region tree listed some regions twice. A tree node is the
                   aggregate of every instance of a region name, but it was
                   emitted at every position any instance occurred, so a name
                   that sometimes sat inside another region and sometimes at the
                   top level was drawn in both places with the same numbers and
                   the same subtree under it. Reported on demo.json, where
                   operations and finalize_loop appeared under outer and again at
                   the top. Each name now has one home: the enclosing region that
                   accounts for most of its instances.
  v2.11 2026-08-11 The strip corner labels collided with the strip data: IPC sat
                   on top of the IPC bars and "max n.nn" ran into them in the
                   top right corner, right up against the panel edge. The strips
                   cannot have a gutter because their x axis has to line up with
                   the flame graph, so each label now draws on an opaque pad in
                   the strip's background colour and the right-hand one is
                   clamped inside the canvas.
  v2.10 2026-08-11 Security fix. esc() escaped only & and <, so a symbol or
                   region name from an uploaded capture could close a
                   double-quoted attribute (data-fn, data-r, title) and inject
                   an event handler that fired on hover. It now escapes
                   & < > " ' as well. No visible change on a normal capture.
  v2.9 2026-08-10  The REGIONS label on the timeline strip sat in the same 14px
                   band as the green region marker lines, so a region starting
                   at cycle 0 drew straight through the word. The region strip
                   is now 26px with the marker lines in the top band and the
                   label lowered underneath them. The match marker rule keeps
                   the strip bottom, clear of the label. Strips total 114px
                   instead of 102px, so the flame graph starts 12px lower.
  v2.8 2026-08-05  Getting-started guide copy for what v2.5 and v2.6 added: the
                   Profiles step now explains Min cyc and Max cyc and how to
                   read them against Total cyc over Calls, and points at the
                   Capture panel's Fabric format readout. Copy only, no
                   behaviour change.
  v2.7 2026-08-05  Cindy Li also reported drag and drop not working. The handler
                   itself is fine (verified: dragover and drop are both
                   preventDefault'd, the File arrives, and parse plus ingest of
                   her 36.6 MB demo.json takes 226 ms), so this version attacks
                   the two ways it can LOOK broken. A drop now paints a reading
                   and parsing state on the drop zone and status bar before the
                   blocking parse starts, and a drop that arrives without a File
                   says so and points at the Load JSON button instead of sitting
                   there inert. Read errors are surfaced too.
  v2.6 2026-08-05  Cindy Li's DM: effprof's flat profile gained min cycles and
                   max cycles columns, so the tool's flat profile has them too.
                   Both are per-call TOTAL cycles (inclusive of callees) over
                   calls that ran to completion, which is what Profile.cc folds
                   into td.minCycles / td.maxCycles from each event's
                   mcycle_end - mcycle_start. Shown compact to fit the panel,
                   with the exact cycle count on hover, and sortable like every
                   other column. Calls truncated by a brush are left out, since
                   half a call would report a falsely small minimum. Note these
                   are DERIVED from the event trace, not read from a field: the
                   demo.json Cindy sent carries no min/max keys.
  v2.5 2026-08-05  Cindy Li's DM: the Fabric block in riptools main is now
                   fabric_functional_units / functionalUnitCounts, so a capture
                   from main rendered an empty Fabric tab. The tool now takes
                   ALL THREE spellings (fabric_functional_units, the PR-4154
                   fabric_firing_units, and the original fabric_tiles) and falls
                   back to matching by shape if the field is renamed a fourth
                   time. Same six FU columns in the same order in every case,
                   verified against riptools tools/effprof/Profile.cc rather
                   than guessed from the data. Detection is on SHAPE, not on
                   json.version: Cindy's original core_main.json and the
                   riptools-main demo.json both report 26.3.0.0, so the version
                   string cannot tell the two apart. The Capture panel now shows
                   which schema was detected, and an empty Fabric tab names it.
  v2.4 2026-07-27  Cindy Li reverted her own v2.1 request: effprof really does
                   print % time as (total cycles in fn) / (total cycles of the
                   program), so the flat profile goes back to total-based and
                   sorting by % once again matches sorting by Total cyc.
                   Total cycles per function already agree with the CLI. The
                   percentages do not, and deliberately so: effprof's
                   denominator is ~3.8x the program's real duration because it
                   never subtracts callees from a function entered through a
                   region (main, core_bench_list, calc_func, core_bench_state,
                   core_bench_matrix all print self == total). This tool
                   subtracts properly and divides by the real duration, so the
                   ordering and formula match while the absolute numbers read
                   higher. Open question for Cindy, raised 2026-07-20 and still
                   unanswered; one-line change here if she wants CLI parity.
  v2.3 2026-07-23  Group DM feedback from Cindy Li: regions return to the
                   timeline and merged flame graphs as real bars (her call
                   after v2.2: no-child regions and deeply nested regions
                   made dotted outlines messy; hover/click in the region
                   tree now highlights instead of outlining). Find works
                   like Ctrl+F: Ctrl+F focuses it, typing zooms to the
                   first instance, Enter jumps to the next (Shift+Enter
                   previous). Match markers on the metric strips show where
                   every instance of a found or selected function lives.
                   Fabric profile reads the new fabric_firing_units list
                   (riptools PR 4154); legacy fabric_tiles still loads.
  v2.2 2026-07-22  Regions leave the flame graph (per Cindy Li and Bryson:
                   regions are labels, not real program frames). Region bars
                   are no longer drawn in the timeline or merged views;
                   hovering a region in the left panel previews a dotted
                   outline around the functions that belong to it, and
                   clicking pins the outline. The region list is now a
                   collapsible tree with sub-regions and sub-functions
                   (function rows select that function everywhere). Regions
                   still show in the REGIONS metric strip.
  v2.1 2026-07-20  % time in the flat profile is now self-based (self cycles /
                   sum of self cycles, recomputed per brush scope), matching
                   the effprof hostside semantics per Cindy Li's review; the
                   flame tooltip's total-based share is relabeled "inclusive
                   share". New getting-started guide (5 steps, auto-opens at
                   launch, opt-out persisted, Guide button in the header).
  v2.0 2026-07-17  Cycle-range brush with cross-view linking (flat profile,
                   Fabric heat map, and merged flame graph rescope to the
                   brushed window), Sandwich caller/callee mode driven from
                   the flat profile, and metric strips over the timeline
                   (IPC, Fabric activity, region markers). ?selftest=1 runs
                   internal consistency checks into document.title.
  v1.0 2026-07-16  Initial build. Timeline + merged flame graph, region
                   sidebar highlighting (per Cindy Li's region profiler),
                   sortable flat profile, Fabric FU firing heat map,
                   drag-drop JSON ingest, nearest-symbol PC resolution.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>effprof Visualizer</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root {
  --carbon: #1E1E1E;
  --carbon-2: #262626;
  --carbon-3: #2E2E2E;
  --carbon-4: #3A3A3A;
  --carbon-line: #404040;
  --ink: #FFFFFF;
  --ink-2: #C9C9C9;
  --ink-3: #8A8A8A;
  --ink-4: #5A5A5A;
  --gold: #FAAA19;
  --gold-hover: #FFC04A;
  --vista: #50648C;
  --vista-soft: #7E8FB0;
  --supernova: #8CDCBE;
  --turbo: #FF916E;
  --hyperlink: #6464F0;
  --danger: #E25555;
  --f-display: 'Roboto', 'Maison Neue', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Roboto', 'Maison Neue', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Cascadia Code', 'JetBrains Mono', 'Menlo', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  display: flex; flex-direction: column;
  background: var(--carbon); color: var(--ink);
  font-family: var(--f-body); font-size: 13px;
}
header {
  height: 56px; flex-shrink: 0; z-index: 10;
  background: var(--carbon); border-bottom: 1px solid var(--carbon-line);
  display: flex; align-items: center; gap: 24px; padding: 0 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 32px; height: 32px; }
.brand-text .b1 {
  font-size: 10px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-2);
}
.brand-text .b2 { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; }
.header-divider { width: 1px; height: 28px; background: var(--carbon-line); }
.header-meta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
main.shell { flex: 1; display: flex; min-height: 0; }
aside.left-panel, aside.right-panel {
  flex-shrink: 0; background: var(--carbon-2);
  display: flex; flex-direction: column; overflow: hidden;
}
aside.left-panel { width: 300px; border-right: 1px solid var(--carbon-line); }
aside.right-panel { width: 440px; border-left: 1px solid var(--carbon-line); }
.content-area { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.panel-section { border-bottom: 1px solid var(--carbon-line); }
.panel-section.flex { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.panel-head {
  padding: 14px 16px 10px; font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; justify-content: space-between;
}
.status-bar {
  height: 32px; flex-shrink: 0; z-index: 20;
  background: var(--carbon); border-top: 1px solid var(--carbon-line);
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.status-bar .stat b { color: var(--ink); font-family: var(--f-mono); font-size: 11px; font-weight: 500; }
.status-bar .stat.gold b { color: var(--gold); }
.status-bar .spacer { flex: 1; }
.status-divider { width: 1px; height: 14px; background: var(--carbon-line); }
.action-btn {
  height: 32px; padding: 0 18px; background: transparent;
  color: var(--ink-2); border: 1px solid var(--carbon-line);
  font-family: var(--f-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer; transition: all 140ms ease;
}
.action-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.action-btn.primary {
  background: var(--gold); color: var(--carbon);
  border-color: var(--gold); font-weight: 800;
}
.action-btn.primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.mode-toggle { display: inline-flex; border: 1px solid var(--carbon-line); height: 32px; }
.mode-toggle button {
  padding: 0 18px; background: transparent; color: var(--ink-3);
  border: none; border-right: 1px solid var(--carbon-line);
  font-family: var(--f-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; cursor: pointer;
}
.mode-toggle button:last-child { border-right: none; }
.mode-toggle button.on { background: var(--gold); color: var(--carbon); font-weight: 800; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px;
  padding: 0 10px; background: var(--carbon-3);
  border: 1px solid var(--carbon-line); font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.pill b { color: var(--ink); font-family: var(--f-mono); font-weight: 500; text-transform: none; letter-spacing: 0; }
.pill.gold b { color: var(--gold); }
input[type="text"], input[type="search"] {
  background: var(--carbon); border: 1px solid var(--carbon-line);
  color: var(--ink); font-family: var(--f-mono); font-size: 12px;
  padding: 7px 10px; outline: none; transition: border-color 140ms;
}
input:focus { border-color: var(--ink-3); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--carbon-line); border-radius: 3px; }

/* Tool specific */
#search { width: 210px; }
.capture-meta { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.meta-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; }
.meta-row b { font-family: var(--f-mono); font-weight: 500; color: var(--ink-2); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-zone {
  margin: 0 16px 14px; padding: 14px 12px; border: 1px dashed var(--carbon-line);
  text-align: center; font-size: 10px; letter-spacing: 0.14em; font-weight: 500;
  text-transform: uppercase; color: var(--ink-4); cursor: pointer; transition: all 140ms ease;
}
.drop-zone:hover, .drop-zone.armed { border-color: var(--gold); color: var(--ink-3); background: rgba(250, 170, 25, 0.05); }
.drop-zone.busy { border-style: solid; border-color: var(--gold); color: var(--gold); background: rgba(250, 170, 25, 0.08); cursor: progress; }
.region-list { overflow-y: auto; flex: 1; padding-bottom: 6px; }
.region-item {
  padding: 8px 14px; cursor: pointer; display: flex; align-items: center;
  gap: 10px; border-left: 2px solid transparent; transition: all 100ms;
}
.region-item:hover { background: rgba(250, 170, 25, 0.05); border-left-color: var(--gold); }
.region-item.selected { background: rgba(250, 170, 25, 0.10); border-left-color: var(--gold); }
.region-item .rname { font-family: var(--f-mono); font-size: 12px; color: var(--supernova); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region-item.all .rname { color: var(--ink-2); }
.region-item .rpct { font-family: var(--f-mono); font-size: 11px; color: var(--ink); width: 52px; text-align: right; }
.region-item .rcalls { font-family: var(--f-mono); font-size: 10px; color: var(--ink-4); width: 46px; text-align: right; }
.region-item .rcaret { width: 12px; flex-shrink: 0; font-size: 9px; color: var(--ink-4); text-align: center; cursor: pointer; transition: color 100ms; }
.region-item .rcaret:hover { color: var(--ink); }
.region-item.fn { padding-top: 5px; padding-bottom: 5px; }
.region-item.fn .rname { color: var(--vista-soft); font-size: 11px; }
.region-item.fn:hover { border-left-color: var(--vista-soft); background: rgba(126, 143, 176, 0.07); }
.region-item.fn.selected { background: rgba(126, 143, 176, 0.14); border-left-color: var(--vista-soft); }
.legend-swatch.region { background: #3A3A3A; border: 1px solid var(--supernova); }
.legend-swatch.match { background: #FF916E; }
.legend { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 7px; }
.legend-row { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; }
.legend-swatch { width: 14px; height: 10px; flex-shrink: 0; }
.tabs { height: 42px; display: flex; border-bottom: 1px solid var(--carbon-line); flex-shrink: 0; }
.tabs button {
  flex: 1; background: transparent; border: none; cursor: pointer;
  font-family: var(--f-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  box-shadow: inset 0 -2px 0 transparent; transition: all 140ms ease;
}
.tabs button.on { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.tab-body { flex: 1; overflow-y: auto; overflow-x: auto; min-height: 0; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid th {
  position: sticky; top: 0; background: var(--carbon-2); z-index: 2;
  font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); text-align: right; padding: 10px 5px 8px; cursor: pointer;
  border-bottom: 1px solid var(--carbon-line); white-space: nowrap; user-select: none;
}
table.grid th.l { text-align: left; }
table.grid th:hover { color: var(--ink-2); }
table.grid th .arr { color: var(--gold); }
table.grid td {
  font-family: var(--f-mono); font-size: 11px; padding: 5px 5px;
  text-align: right; color: var(--ink-2); white-space: nowrap;
}
table.grid td.l { text-align: left; overflow: hidden; text-overflow: ellipsis; max-width: 132px; }
table.grid td.pct { color: var(--gold); }
table.grid tbody tr { cursor: pointer; border-left: 2px solid transparent; transition: background 100ms; }
table.grid tbody tr:hover { background: rgba(250, 170, 25, 0.05); }
table.grid tbody tr.selected { background: rgba(250, 170, 25, 0.10); }
.ktag { color: var(--gold); }
.fab-note { padding: 10px 16px 4px; font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.scope-note { padding: 10px 16px 4px; font-size: 11px; color: var(--gold); line-height: 1.5; font-family: var(--f-mono); }
/* The heat map is read as a grid: same unit down a column, same kernel across a
   row. Auto layout sized each column to its own contents, so a unit that never
   fired anywhere (a column of ·) collapsed to half the width of its neighbours
   and the washes stopped lining up under their headers. Fixed layout gives the
   six unit columns one width whatever the numbers say. The table also ran the
   full width of the panel, so the last column's wash bled into the border and
   its digits sat on the edge; it stops short of the border now. */
table.heat { table-layout: fixed; width: calc(100% - 12px); }
table.heat th.l, table.heat td.l { width: 34%; }
table.heat th:not(.l), table.heat td:not(.l) { width: 11%; }
table.heat td { padding: 6px 4px; font-size: 10px; }
table.heat th { padding: 10px 4px 8px; }
table.heat td.l { color: var(--ink-2); font-size: 10px; }
table.heat td.cell { color: var(--ink); text-align: right; }
table.heat td.zero { color: var(--ink-4); }
.flame-wrap { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; }
#flame { display: block; width: 100%; cursor: crosshair; }
#flame.panning { cursor: grabbing; }
.crumbs {
  height: 34px; flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 0 16px; border-bottom: 1px solid var(--carbon-line);
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-3);
  overflow-x: auto; white-space: nowrap;
}
.crumbs .crumb { cursor: pointer; color: var(--ink-3); transition: color 100ms; }
.crumbs .crumb:hover { color: var(--ink); }
.crumbs .crumb.cur { color: var(--gold); }
.crumbs .sep { color: var(--ink-4); }
#tooltip {
  position: fixed; z-index: 50; display: none; pointer-events: none;
  background: var(--carbon-2); border: 1px solid var(--carbon-line);
  padding: 10px 12px; min-width: 230px; max-width: 330px;
}
#tooltip .t-name { font-family: var(--f-mono); font-size: 12px; color: var(--ink); margin-bottom: 2px; word-break: break-all; }
#tooltip .t-kind { font-size: 9px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 8px; }
#tooltip .t-row { display: flex; justify-content: space-between; gap: 18px; font-size: 11px; color: var(--ink-3); padding: 1px 0; }
#tooltip .t-row b { font-family: var(--f-mono); font-weight: 500; color: var(--ink-2); }
#tooltip .t-fu { margin-top: 8px; border-top: 1px solid var(--carbon-line); padding-top: 6px; }
.empty-state {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center;
}
/* Says out loud that the capture on screen is ours and that a dropped file
   takes its place. Built on the 32px status bar geometry so it reads as tool
   chrome rather than a floating card. */
.sample-note {
  height: 32px; flex-shrink: 0; display: none; align-items: center; gap: 10px;
  padding: 0 12px 0 16px; background: var(--carbon-2);
  border-bottom: 1px solid var(--carbon-line);
}
.sample-note.show { display: flex; }
.sample-note .sn-tag {
  font-family: var(--f-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); flex-shrink: 0;
}
.sample-note .sn-text {
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sample-note .sn-text b { color: var(--ink-2); font-weight: 400; }
.sample-note .sn-x {
  margin-left: auto; flex-shrink: 0; width: 20px; height: 20px; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  color: var(--ink-4); font-size: 14px; transition: color 140ms ease;
}
.sample-note .sn-x:hover { color: var(--ink-2); }
/* Confirmation in the moment of the drag: the pane itself takes the dashed gold
   drop-zone treatment, so the answer to "will it take this file here" is on
   screen where the cursor is, not only in the left panel. */
.drop-target {
  position: absolute; inset: 0; z-index: 40; display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 10px;
  background: rgba(250, 170, 25, 0.06); border: 1px dashed var(--gold);
  pointer-events: none; text-align: center;
}
.drop-target.show { display: flex; }
.drop-target .dt1 {
  font-family: var(--f-display); font-size: 13px; font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--gold);
}
.drop-target .dt2 { font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); }
.empty-state .e1 { font-size: 14px; color: var(--ink-2); font-weight: 500; letter-spacing: 0.02em; }
.empty-state .e2 { font-size: 11px; color: var(--ink-4); font-family: var(--f-mono); }

/* ---- getting-started guide ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.62); z-index: 100;
  display: none; align-items: center; justify-content: center;
}
.modal-backdrop.show { display: flex; }
.modal-card {
  width: 780px; max-width: calc(100vw - 48px); max-height: calc(100vh - 80px);
  background: var(--carbon-2); border: 1px solid var(--carbon-line);
  display: flex; flex-direction: column;
}
.modal-head {
  padding: 18px 22px 14px; border-bottom: 1px solid var(--carbon-line);
  display: flex; align-items: center; gap: 16px;
}
.modal-head .tag {
  font-size: 10px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
}
.modal-head .title { font-size: 16px; font-weight: 500; color: var(--ink); margin-top: 4px; }
.modal-head .title-wrap { flex: 1; }
.modal-close {
  width: 28px; height: 28px; background: transparent;
  border: 1px solid var(--carbon-line); color: var(--ink-3); cursor: pointer;
  font-size: 13px; line-height: 1; transition: background 140ms, color 140ms;
}
.modal-close:hover { background: var(--carbon-3); color: var(--ink); }
.modal-steps { display: flex; border-bottom: 1px solid var(--carbon-line); }
.modal-step-pill {
  flex: 1; padding: 9px 12px; background: transparent; border: none;
  border-right: 1px solid var(--carbon-line); color: var(--ink-4);
  font-family: var(--f-display); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
  text-align: left; display: flex; align-items: center; gap: 8px;
  transition: background 140ms, color 140ms;
}
.modal-step-pill:last-child { border-right: none; }
.modal-step-pill:hover { background: var(--carbon-3); color: var(--ink-2); }
.modal-step-pill.on { color: var(--gold); background: var(--carbon-3); }
.modal-step-pill .pill-num { font-family: var(--f-mono); font-weight: 500; }
.modal-body { padding: 18px 22px; overflow-y: auto; font-size: 12px; color: var(--ink-2); line-height: 1.65; }
.modal-body h3 { font-size: 13px; font-weight: 500; color: var(--ink); margin: 14px 0 4px; }
.modal-body p { margin: 0 0 10px; }
.modal-body ul { margin: 0 0 10px; padding-left: 18px; }
.modal-body li { margin-bottom: 5px; }
.modal-body .kbd {
  font-family: var(--f-mono); font-size: 10px; color: var(--ink);
  background: var(--carbon-3); border: 1px solid var(--carbon-line); padding: 1px 5px;
}
.launch-toggle {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  padding: 10px 12px; background: var(--carbon-3); cursor: pointer;
}
.launch-toggle .toggle-box {
  width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px;
  border: 1px solid var(--ink-3); position: relative;
}
.launch-toggle.on .toggle-box { border-color: var(--gold); }
.launch-toggle.on .toggle-box::after {
  content: ''; position: absolute; inset: 2px; background: var(--gold);
}
.launch-toggle .label { font-size: 12px; color: var(--ink); font-weight: 500; }
.launch-toggle .hint { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.modal-foot {
  padding: 12px 22px; border-top: 1px solid var(--carbon-line);
  display: flex; align-items: center; gap: 10px;
}
.modal-foot .foot-info { flex: 1; font-size: 11px; color: var(--ink-3); }
.modal-foot .foot-info .v { font-family: var(--f-mono); color: var(--ink-2); }
.modal-btn {
  height: 32px; padding: 0 16px; background: var(--carbon-3);
  border: 1px solid var(--carbon-line); color: var(--ink-2); cursor: pointer;
  font-family: var(--f-display); font-size: 11px; font-weight: 500;
  transition: background 140ms, color 140ms;
}
.modal-btn:hover:not(:disabled) { color: var(--ink); }
.modal-btn:disabled { opacity: 0.4; cursor: default; }
.modal-btn.primary { background: var(--gold); border-color: var(--gold); color: var(--carbon); font-weight: 800; }
.modal-btn.primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
</style>
</head>
<body>

<header>
  <div class="brand">
    <svg class="brand-mark" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg" aria-label="Efficient Computer E-sign">
      <rect fill="#FAAA19" x="173.5" y="456.3" width="350.9" height="70.2"/>
      <rect fill="#FAAA19" x="173.5" y="175.6" width="350.9" height="70.2"/>
      <rect fill="#FAAA19" x="173.5" y="316" width="350.9" height="70.2"/>
    </svg>
    <div class="brand-text">
      <div class="b1">Efficient Computer</div>
      <div class="b2">effprof Visualizer</div>
    </div>
  </div>
  <div class="header-divider"></div>
  <div class="mode-toggle" id="modeToggle">
    <button data-mode="timeline" class="on">Timeline</button>
    <button data-mode="merged">Merged</button>
    <button data-mode="sandwich">Sandwich</button>
  </div>
  <div class="header-meta">
    <input type="search" id="search" placeholder="find (Ctrl+F), Enter jumps" aria-label="Find function or region">
    <button class="action-btn" id="guideBtn" title="Getting started guide">Guide</button>
    <button class="action-btn primary" id="loadBtn">Load JSON</button>
    <input type="file" id="fileInput" accept=".json,application/json" style="display:none">
    <span class="pill"><b>v2.23</b></span>
  </div>
</header>

<main class="shell">
  <aside class="left-panel">
    <div class="panel-section">
      <div class="panel-head">Capture</div>
      <div class="capture-meta">
        <div class="meta-row"><span>File</span><b id="mFile">none</b></div>
        <div class="meta-row"><span>Captured</span><b id="mDate">-</b></div>
        <div class="meta-row"><span>effcc Compiler</span><b id="mVer">-</b></div>
        <div class="meta-row"><span>Build hash</span><b id="mHash">-</b></div>
        <div class="meta-row"><span>Fabric schema</span><b id="mFab" title="Which effprof Fabric field this recording used. Detected from the file's shape, not its version string, because different formats report the same version.">-</b></div>
      </div>
      <div class="drop-zone" id="dropZone">Drop effprof JSON here</div>
    </div>
    <div class="panel-section flex">
      <div class="panel-head">Regions <span id="regionCount"></span></div>
      <div class="region-list" id="regionList"></div>
    </div>
    <div class="panel-section">
      <div class="panel-head">Legend</div>
      <div class="legend">
        <div class="legend-row"><span class="legend-swatch" style="background:#50648C"></span>Scalar function</div>
        <div class="legend-row"><span class="legend-swatch" style="background:#FAAA19"></span>Fabric kernel</div>
        <div class="legend-row"><span class="legend-swatch region"></span>Region (hover or click in the list to highlight)</div>
        <div class="legend-row"><span class="legend-swatch match"></span>Match markers on the strips (find or selection)</div>
        <div class="legend-row"><span class="legend-swatch" style="background:#7E8FB0"></span>IPC strip (per-span average)</div>
        <div class="legend-row"><span class="legend-swatch" style="background:rgba(250,170,25,0.6)"></span>Fabric activity strip</div>
      </div>
    </div>
  </aside>

  <div class="content-area">
    <div class="crumbs" id="crumbs"></div>
    <div class="sample-note" id="sampleNote">
      <span class="sn-tag">Sample capture</span>
      <span class="sn-text">Drop your own effprof JSON on the graph to read it instead.</span>
      <span class="sn-x" id="sampleNoteClose" title="Hide this notice">&times;</span>
    </div>
    <div class="flame-wrap" id="flameWrap">
      <canvas id="flame"></canvas>
      <div class="drop-target" id="dropTarget">
        <div class="dt1">Drop to read this recording</div>
        <div class="dt2">it replaces whatever is loaded</div>
      </div>
      <div class="empty-state" id="emptyState">
        <div class="e1">Drop an effprof JSON recording to begin</div>
        <div class="e2">effprof record demo.elf --out demo.json</div>
      </div>
    </div>
    <div id="tooltip"></div>
  </div>

  <aside class="right-panel">
    <div class="tabs" id="tabs">
      <button data-tab="profile" class="on">Flat profile</button>
      <button data-tab="fabric">Fabric profile</button>
    </div>
    <div class="tab-body" id="tabProfile">
      <div class="scope-note" id="profileScope" style="display:none"></div>
      <table class="grid" id="flatTable">
        <thead><tr>
          <th data-k="pct" title="Total cycles for this function over the program's total cycles, the same formula effprof uses, so % ranks the same as Total cyc. The denominator is the sum of every function's self cycles. Note effprof's printed percentages are about 3.8x smaller: it does not subtract callees from functions entered through a region, which inflates its denominator well past the program's real duration.">%</th>
          <th data-k="tot">Total cyc</th>
          <th data-k="self">Self cyc</th>
          <th data-k="calls">Calls</th>
          <th data-k="min" title="Smallest total cycles any single call to this function took, the min cycles column effprof's flat profile now prints. Per call and inclusive of callees, over calls that ran to completion. Under a brush only calls that fit entirely inside the window are counted, so a partly-selected call cannot drag the minimum down. Hover a value for the exact number.">Min cyc</th>
          <th data-k="max" title="Largest total cycles any single call to this function took, the max cycles column effprof's flat profile now prints. Per call and inclusive of callees. Compare against Total cyc over Calls to see how much a function varies between calls. Hover a value for the exact number.">Max cyc</th>
          <th data-k="name" class="l">Name</th>
        </tr></thead>
        <tbody></tbody>
      </table>
    </div>
    <div class="tab-body" id="tabFabric" style="display:none">
      <div class="fab-note" id="fabNote">Firings per functional unit type for each Fabric kernel. Darker gold means more firings.</div>
      <table class="grid heat" id="fabricTable"><thead></thead><tbody></tbody></table>
    </div>
  </aside>
</main>

<div class="status-bar">
  <span class="stat">Events <b id="sEvents">0</b></span>
  <span class="status-divider"></span>
  <span class="stat">Wall cycles <b id="sCycles">0</b></span>
  <span class="status-divider"></span>
  <span class="stat">Instret <b id="sInstr">0</b></span>
  <span class="status-divider"></span>
  <span class="stat gold">Fabric time <b id="sFabric">0%</b></span>
  <span class="stat" id="sMatchWrap" style="display:none"><span class="status-divider"></span>Match <b id="sMatch"></b></span>
  <span class="stat gold" id="sBrushWrap" style="display:none"><span class="status-divider"></span>Brush <b id="sBrush"></b></span>
  <span class="spacer"></span>
  <span id="hint">Click zoom &middot; Scroll zoom &middot; Drag pan &middot; Shift-drag brush &middot; Esc reset</span>
</div>

<div class="modal-backdrop" id="guideModal">
  <div class="modal-card" role="dialog" aria-labelledby="guideTitle">
    <div class="modal-head">
      <div class="title-wrap">
        <div class="tag">Getting started</div>
        <div class="title" id="guideTitle">effprof Visualizer</div>
      </div>
      <button class="modal-close" id="guideClose" title="Close (Esc)">&#215;</button>
    </div>
    <div class="modal-steps" id="guideSteps"></div>
    <div class="modal-body" id="guideBody"></div>
    <div class="modal-foot">
      <div class="foot-info">Step <span class="v" id="guideNum">1</span> of <span class="v" id="guideTot">5</span></div>
      <button class="modal-btn" id="guidePrev" disabled>Back</button>
      <button class="modal-btn primary" id="guideNext">Next</button>
    </div>
  </div>
</div>

<script>
'use strict';
/* ---------- state ---------- */
const S = {
  data: null, fileName: 'none',
  sampleFile: null,  // name of the capture staged with the tool, if that is what is loaded
  frames: [],        // all frames (fn + kernel + region), tree-linked
  roots: [],
  flat: [],          // aggregated per name
  regions: [],       // aggregated region stats
  regionTree: [],    // nested region nodes for the left-panel tree
  regionOpen: new Set(),
  hoverRegion: null,
  allRegions: false, hoverAll: false,  // the "all regions" row: every region lit at once
  matches: [], matchIdx: -1,   // find instances (Ctrl+F / Enter jump)
  fabric: [],        // normalized {fnName, counts[6]}, any of the three fabric spellings
  fabricSchema: '-',  // which spelling this capture used, shown in the Capture panel
  fabricDetail: '-',  // the long form of the above, used in tooltips and messages
  wall: 0, tMin: 0, tMax: 1, maxDepth: 0,
  totInstr: 0, fabricCycles: 0, maxIPC: 0,
  mode: 'timeline',
  view: { t0: 0, t1: 1 },
  mergedRoot: null, mergedZoom: null,
  brush: null, brushLive: null,           // {b0, b1} in cycles
  scopedRoots: null, scopedFlat: null, scopedWall: 0, mergedRootScoped: null,
  sandwich: null,
  selRegion: null, selFn: null, search: '',
  sortK: 'tot', sortDir: -1,
  hitRows: [],
  rowH: 22,
  _strip: null
};
/* Column order is the order the counters are DRAINED off the hardware, not
   alphabetical and not the order effprof printed until 2026-08-10. riptools
   lib/Target/eff-rt/trace.cc reads fabric_offsets {0x00, 0x04, 0x0C, 0x10,
   0x14, 0x18} into firing_counts[t] and documents that as cf, ls, basic_int,
   float, full_int, basic_int_plus. Profile.cc printed a header array in a
   different order until Cindy fixed it in 9d8d7036 ("fix header placement"),
   so every capture written before that carries correct NUMBERS under wrong
   LABELS. The numbers were never wrong and no capture needs re-recording. */
const FU_COLS = ['cf', 'ls', 'basic-int', 'float', 'full-int', 'basic-int-plus'];
/* Derived, never listed separately: a hand-written second list is how the heat
   map ended up with the right numbers under the wrong short labels. */
const FU_ABBR = { 'cf': 'CF', 'ls': 'LS', 'basic-int': 'BI', 'float': 'FLT', 'full-int': 'FI', 'basic-int-plus': 'BI+' };
const FU_SHORT = FU_COLS.map(c => FU_ABBR[c] || c.toUpperCase());
const C = {
  vista: '#50648C', vistaSoft: '#7E8FB0', gold: '#FAAA19', carbon: '#1E1E1E',
  carbon2: '#262626', carbon3: '#2E2E2E', carbon4: '#3A3A3A', line: '#404040',
  ink: '#FFFFFF', ink2: '#C9C9C9', ink3: '#8A8A8A', ink4: '#5A5A5A',
  supernova: '#8CDCBE'
};
/* metric strips above the timeline flame graph */
/* the region strip is two bands: marker lines up top (3 nesting levels, 3px
   apart), then the REGIONS label below them, so a region spanning x=0 no
   longer draws straight through the word */
const STRIP = { ipcY: 6, fabY: 42, h: 30, regY: 78, regH: 26, regLabelY: 91, bottom: 104, total: 114 };
const HINTS = {
  timeline: 'Click zoom · Scroll zoom · Drag pan · Shift-drag brush · Ctrl+F find · Esc reset',
  merged: 'Click zoom · Crumbs navigate · Esc reset',
  sandwich: 'Click a flat profile row · Click frames to re-root · Esc reset'
};
const $ = id => document.getElementById(id);
const fmt = n => Math.round(n).toLocaleString('en-US');
const fmtC = n => n >= 1e6 ? (n / 1e6).toFixed(n >= 1e7 ? 0 : 1) + 'M' : n >= 1e4 ? (n / 1e3).toFixed(n >= 1e5 ? 0 : 1) + 'k' : String(Math.round(n));

/* ---------- tree helpers ---------- */
// region spans nested inside a function do not absorb that function's self cycles
function coverFn(f) {
  let s = 0;
  for (const c of f.children) s += c.kind === 'region' ? coverFn(c) : c.dur;
  return s;
}
function computeSelf(f) {
  for (const c of f.children) computeSelf(c);
  f.self = f.dur - f.children.reduce((a, c) => a + c.dur, 0);
  f.selfF = f.kind === 'region' ? f.self : f.dur - coverFn(f);
}
function walkFrames(roots) {
  const out = [], st = [...roots];
  while (st.length) { const f = st.pop(); out.push(f); for (const c of f.children) st.push(c); }
  return out;
}
function aggregateTree(roots) {
  const agg = new Map();
  let totInstr = 0, fabricCycles = 0;
  for (const f of walkFrames(roots)) {
    totInstr += f.instret;
    if (f.kind === 'kernel') fabricCycles += f.dur;
    if (f.kind === 'region') continue;
    let a = agg.get(f.name);
    if (!a) { a = { name: f.name, kind: f.kind, tot: 0, self: 0, calls: 0, instret: 0,
      min: null, max: null, whole: 0 }; agg.set(f.name, a); }
    a.tot += f.dur; a.self += f.selfF; a.calls += 1; a.instret += f.instret;
    /* Per-call min and max total cycles, the two columns effprof's flat profile
       gained (Cindy Li's DM 2026-08-04). Matches the CLI exactly: Profile.cc
       takes cycles = mcycle_end - mcycle_start per EVENT and folds it into
       td.minCycles / td.maxCycles, skipping in-flight frames (mcycle_end == 0).
       Frames truncated by a brush are excluded, because half a call is not a
       call: a clipped span would report a spuriously small minimum. */
    if (!f.clipped && f.e > 0) {
      a.min = a.min === null ? f.dur : Math.min(a.min, f.dur);
      a.max = a.max === null ? f.dur : Math.max(a.max, f.dur);
      a.whole += 1;
    }
    if (f.kind === 'kernel') a.kind = 'kernel';
  }
  return { flat: [...agg.values()], wall: roots.reduce((a, r) => a + r.dur, 0), totInstr, fabricCycles };
}
// clipped clone of the span tree for brush scoping; instret prorated by overlap
function clipTree(f, b0, b1) {
  if (f.e <= b0 || f.s >= b1) return null;
  const s = Math.max(f.s, b0), e = Math.min(f.e, b1), dur = e - s;
  const clone = { s, e, dur, name: f.name, kind: f.kind,
    instret: f.dur ? f.instret * dur / f.dur : 0, clipped: s > f.s || e < f.e,
    children: [], depth: f.depth, parent: null, self: 0, selfF: 0 };
  for (const c of f.children) {
    const cc = clipTree(c, b0, b1);
    if (cc) { cc.parent = clone; clone.children.push(cc); }
  }
  return clone;
}

/* ---------- ingest ---------- */
function ingest(json, fileName) {
  if (!json || !Array.isArray(json.events)) throw new Error('not an effprof recording');
  const syms = (json.symbols || []).map(s => [parseInt(s.addr, 16), s.name]).sort((a, b) => a[0] - b[0]);
  const saddr = syms.map(s => s[0]);
  const resolve = pc => {
    const p = parseInt(pc, 16);
    let lo = 0, hi = saddr.length - 1, ans = -1;
    while (lo <= hi) { const m = (lo + hi) >> 1; if (saddr[m] <= p) { ans = m; lo = m + 1; } else hi = m - 1; }
    return ans >= 0 ? syms[ans][1] : pc;
  };
  const regionName = {};
  (json.region_names || []).forEach(r => regionName[parseInt(r.addr, 16)] = r.name);

  const frames = [];
  for (const e of json.events) {
    frames.push({ s: e.mcycle_start, e: e.mcycle_end, dur: e.mcycle_end - e.mcycle_start,
      name: resolve(e.pc), kind: e.fabric ? 'kernel' : 'fn', instret: e.minstret_delta || 0,
      children: [], parent: null, depth: 0, self: 0 });
  }
  for (const r of (json.region_events || [])) {
    frames.push({ s: r.mcycle_start, e: r.mcycle_end, dur: r.mcycle_end - r.mcycle_start,
      name: regionName[parseInt(r.id, 16)] || r.id, kind: 'region', instret: 0,
      children: [], parent: null, depth: 0, self: 0 });
  }
  frames.sort((a, b) => a.s - b.s || b.e - a.e);

  // containment stack -> tree
  const roots = [], stack = [];
  for (const f of frames) {
    while (stack.length && stack[stack.length - 1].e < f.e) stack.pop();
    const top = stack[stack.length - 1];
    if (top && top.s <= f.s && f.e <= top.e && top !== f) {
      f.depth = top.depth + 1; f.parent = top; top.children.push(f);
    } else { f.depth = 0; f.parent = null; roots.push(f); }
    stack.push(f);
  }
  for (const r of roots) computeSelf(r);
  // regions are real bars again (per Cindy, group DM 2026-07-23), so every
  // frame kind occupies its own row
  const vwalk = (f, lvl) => {
    f.vdepth = lvl;
    for (const c of f.children) vwalk(c, lvl + 1);
  };
  for (const r of roots) vwalk(r, 0);

  let maxDepth = 0, maxIPC = 0;
  const ragg = new Map();
  for (const f of frames) {
    if (f.vdepth > maxDepth) maxDepth = f.vdepth;
    if (f.kind === 'fn' && f.instret > 0 && f.dur > 0) maxIPC = Math.max(maxIPC, f.instret / f.dur);
    if (f.kind !== 'region') continue;
    let a = ragg.get(f.name);
    if (!a) { a = { name: f.name, kind: f.kind, tot: 0, self: 0, calls: 0, instret: 0 }; ragg.set(f.name, a); }
    a.tot += f.dur; a.self += f.selfF; a.calls += 1;
  }
  const agg = aggregateTree(roots);

  S.data = json; S.fileName = fileName;
  S.frames = frames; S.roots = roots;
  S.flat = agg.flat;
  S.regions = [...ragg.values()].sort((a, b) => b.tot - a.tot);
  S.regionTree = buildRegionTree(roots);
  S.regionOpen = new Set(S.regions.map(r => r.name));
  S.hoverRegion = null;
  S.matches = []; S.matchIdx = -1;
  const fab = normalizeFabric(json);
  S.fabric = fab.rows; S.fabricSchema = fab.schema; S.fabricDetail = fab.detail;
  S.wall = agg.wall; S.maxDepth = maxDepth; S.maxIPC = maxIPC;
  S.tMin = roots.length ? Math.min(...roots.map(r => r.s)) : 0;
  S.tMax = roots.length ? Math.max(...roots.map(r => r.e)) : 1;
  S.totInstr = agg.totInstr; S.fabricCycles = agg.fabricCycles;
  S.view = { t0: S.tMin, t1: S.tMax };
  S.mergedRoot = buildMerged(roots, agg.wall);
  S.mergedZoom = null; S.selRegion = null;
  /* Sandwich mode has nothing to draw without a selected function, so clearing
     the selection on every ingest made a drop into that view look like it did
     nothing: the capture panel, stats and profile all filled, but the pane the
     eye is on just held its one line of placeholder text. Keep the function
     that was on screen when the new recording still has it (dropping a
     re-record of the same program is the normal case), otherwise root the view
     at the heaviest self-cycles function so it always renders. Timeline and
     merged draw the whole capture and a carried selection would arrive as a
     filter nobody asked for, so they still start clean. */
  S.selFn = S.mode === 'sandwich' ? sandwichEntryFn(S.selFn) : null;
  S.brush = null; S.brushLive = null;
  S.scopedRoots = null; S.scopedFlat = null; S.scopedWall = 0; S.mergedRootScoped = null;
  S.sandwich = null;

  $('mFile').textContent = fileName;
  $('mDate').textContent = (json.date_captured || '-').replace('T', ' ').replace('Z', '');
  $('mVer').textContent = json.version || '-';
  $('mHash').textContent = json.hash || '-';
  $('mFab').textContent = fab.schema;
  $('mFab').title = fab.detail;
  $('sEvents').textContent = fmt(json.events.length);
  $('sCycles').textContent = fmt(agg.wall);
  $('sInstr').textContent = fmt(agg.totInstr);
  $('sFabric').textContent = agg.wall ? (100 * agg.fabricCycles / agg.wall).toFixed(1) + '%' : '0%';
  $('emptyState').style.display = 'none';
  updateBrushStat();
  renderRegions(); renderFlat(); renderFabric(); renderCrumbs(); renderSampleNote(); layout();
}

/* The pane is never blank at launch any more, so the invitation the empty state
   used to carry has to live somewhere else: this strip says the capture on
   screen is one we shipped and that dropping a file replaces it. It shows for
   the staged sample only, and a dismissal sticks, so nobody reading their own
   recordings keeps seeing it. */
const SAMPLE_NOTE_KEY = 'effprofSampleNoteHidden';
function sampleNoteHidden() {
  try { return localStorage.getItem(SAMPLE_NOTE_KEY) === '1'; } catch (e) { return false; }
}
function renderSampleNote() {
  const on = !!S.data && S.fileName === S.sampleFile && !sampleNoteHidden();
  $('sampleNote').classList.toggle('show', on);
  /* The strip has to survive a 1366px laptop, where the centre pane leaves it
     around 70 characters, so the line is the instruction only. The file name
     lives in the Capture panel a few inches to the left, and in this tooltip. */
  if (on) $('sampleNote').title = 'Reading ' + S.fileName + ', a sample capture staged with the tool. '
    + 'Drop an effprof JSON recording anywhere on the tool, or use Load JSON, to read that instead.';
}

/* effprof has renamed the Fabric block twice, so a recording can arrive with
   any of three spellings and the tool has to take all of them:

     fabric_functional_units / functionalUnitCounts   riptools main (current)
     fabric_firing_units     / firingUnitCounts       PR 4154, never merged
     fabric_tiles            / tileCounts             the original

   All three carry the SAME six FU counters in the SAME order, so JSON index i
   is always FU_COLS[i]. Only the key and the counts field ever changed, never
   the encoding. What DID change is what those six positions are called: see
   the FU_COLS note above, where the labels are pinned to the drain order in
   riptools trace.cc rather than to any printed header.

   DO NOT discriminate on json.version. Cindy's original core_main.json and the
   riptools-main demo.json BOTH self-report 26.3.0.0, so the version string
   cannot tell them apart. Detect on shape, which is also why the loop below
   ends with a by-shape fallback: this field has been renamed twice already, so
   a fourth spelling should degrade to "still works" rather than a blank tab. */
const FABRIC_SCHEMAS = [
  { key: 'fabric_functional_units', counts: 'functionalUnitCounts',
    short: 'functional_units (main)', label: 'fabric_functional_units / functionalUnitCounts, the shape in riptools main' },
  { key: 'fabric_firing_units', counts: 'firingUnitCounts',
    short: 'firing_units (PR 4154)', label: 'fabric_firing_units / firingUnitCounts, the PR 4154 shape that never merged' },
  { key: 'fabric_tiles', counts: 'tileCounts',
    short: 'tiles (original)', label: 'fabric_tiles / tileCounts, the original shape' },
];
function fabricRows(src, countsField) {
  const out = [];
  for (const f of src) {
    const counts = f && f[countsField];
    if (!f || !f.fnName || !Array.isArray(counts)) continue;
    out.push({ fnName: f.fnName, counts: counts.slice(0, FU_COLS.length).map(Number) });
  }
  return out;
}
function normalizeFabric(json) {
  for (const s of FABRIC_SCHEMAS) {
    if (Array.isArray(json[s.key]))
      return { rows: fabricRows(json[s.key], s.counts), schema: s.short, detail: s.label };
  }
  // unknown spelling: find any fabric* array whose entries carry an fnName plus
  // exactly one six-number array, and use that array as the counts field.
  for (const k of Object.keys(json)) {
    if (!/^fabric/.test(k) || !Array.isArray(json[k]) || !json[k].length) continue;
    const probe = json[k][0];
    if (!probe || typeof probe !== 'object' || !probe.fnName) continue;
    const cf = Object.keys(probe).find(p => Array.isArray(probe[p]) &&
      probe[p].length === FU_COLS.length && probe[p].every(v => typeof v === 'number'));
    if (cf) return { rows: fabricRows(json[k], cf), schema: 'by shape',
      detail: k + ' / ' + cf + ', an unrecognised spelling matched by shape' };
  }
  return { rows: [], schema: 'none', detail: 'this capture carries no Fabric block' };
}
// regions merge as real nodes alongside functions and kernels (per Cindy,
// group DM 2026-07-23: regions stay on the flame graph)
function buildMerged(children, value, name, kind, parent) {
  const node = { name: name || 'all', kind: kind || 'root', value: 0, self: 0, calls: 0, instret: 0, children: [], parent: parent || null };
  const groups = new Map();
  for (const c of children) {
    const k = c.kind + ' ' + c.name;
    let g = groups.get(k);
    if (!g) { g = { name: c.name, kind: c.kind, items: [] }; groups.set(k, g); }
    g.items.push(c);
  }
  for (const g of groups.values()) {
    const kids = g.items.flatMap(i => i.children);
    const val = g.items.reduce((a, i) => a + (i.dur !== undefined ? i.dur : i.value), 0);
    const child = buildMerged(kids, val, g.name, g.kind, node);
    child.value = val;
    child.self = g.items.reduce((a, i) => a + (i.selfF !== undefined ? i.selfF : i.self), 0);
    child.calls = g.items.length;
    child.instret = g.items.reduce((a, i) => a + i.instret, 0);
    node.children.push(child);
  }
  node.children.sort((a, b) => b.value - a.value);
  node.value = value;
  return node;
}
/* region tree for the left panel: sub-regions attach to their nearest
   enclosing region (functions in between do not break the chain, matching
   the effprof hostside region profile); functions attach to the region
   they are called from directly */
function buildRegionTree(roots) {
  const byName = new Map(), order = [];
  const getNode = nm => {
    let n = byName.get(nm);
    if (!n) { n = { name: nm, tot: 0, calls: 0, children: [], parentCounts: new Map(), fns: new Map() }; byName.set(nm, n); order.push(n); }
    return n;
  };
  const walk = (f, cur) => {
    let next = cur;
    if (f.kind === 'region') {
      const n = getNode(f.name);
      n.tot += f.dur; n.calls += 1;
      // '' means this instance had no enclosing region, i.e. it sat at the top
      const key = (cur && cur !== n) ? cur.name : '';
      n.parentCounts.set(key, (n.parentCounts.get(key) || 0) + 1);
      next = n;
    } else if (f.parent && f.parent.kind === 'region') {
      const pn = getNode(f.parent.name);
      let a = pn.fns.get(f.name);
      if (!a) { a = { name: f.name, kind: f.kind, calls: 0, cyc: 0 }; pn.fns.set(f.name, a); }
      a.calls += 1; a.cyc += f.dur;
      if (f.kind === 'kernel') a.kind = 'kernel';
    }
    for (const c of f.children) walk(c, next);
  };
  for (const r of roots) walk(r, null);

  /* One home per region name. A node here is the aggregate of every instance of
     that name, so its cycles and call count are identical wherever it is drawn.
     The old rule emitted a node at every position any instance occurred, so a
     name that sometimes sat inside another region and sometimes at the top was
     drawn twice, taking its whole subtree with it and repeating the same
     numbers (demo.json: operations and finalize_loop, once under outer and
     again at the top). Each name now lives under whichever enclosing region
     accounts for most of its instances, with "no enclosing region" competing on
     the same count and winning ties, and falls back to the top if the pick
     would close a parent cycle. */
  const parentOf = new Map();
  for (const n of order) {
    let best = '', bestCount = -1;
    n.parentCounts.forEach((count, key) => {
      if (count > bestCount || (count === bestCount && key === '')) { best = key; bestCount = count; }
    });
    parentOf.set(n.name, best);
  }
  const closesCycle = nm => {
    let p = parentOf.get(nm);
    for (let guard = 0; p && guard < 64; guard++) {
      if (p === nm) return true;
      p = parentOf.get(p);
    }
    return false;
  };
  const top = [];
  for (const n of order) {
    const p = parentOf.get(n.name);
    if (p && byName.has(p) && !closesCycle(n.name)) byName.get(p).children.push(n);
    else top.push(n);
  }
  byName.forEach(n => {
    n.fns = [...n.fns.values()].sort((a, b) => b.cyc - a.cyc);
    n.children.sort((a, b) => b.tot - a.tot);
  });
  return top;
}
function activeMergedRoot() {
  return (S.brush && S.mergedRootScoped) ? S.mergedRootScoped : S.mergedRoot;
}

/* ---------- brush scoping ---------- */
function applyBrush() {
  if (S.brush) {
    let { b0, b1 } = S.brush;
    if (b1 < b0) { const t = b0; b0 = b1; b1 = t; }
    b0 = Math.max(S.tMin, b0); b1 = Math.min(S.tMax, b1);
    S.brush = (b1 - b0 < 32) ? null : { b0, b1 };
  }
  if (S.brush) {
    S.scopedRoots = S.roots.map(r => clipTree(r, S.brush.b0, S.brush.b1)).filter(Boolean);
    for (const r of S.scopedRoots) computeSelf(r);
    const a = aggregateTree(S.scopedRoots);
    S.scopedFlat = a.flat; S.scopedWall = a.wall;
    S.mergedRootScoped = buildMerged(S.scopedRoots, a.wall);
  } else {
    S.scopedRoots = null; S.scopedFlat = null; S.scopedWall = 0; S.mergedRootScoped = null;
  }
  S.mergedZoom = null; S.sandwich = null;
  updateBrushStat(); renderFlat(); renderFabric(); renderCrumbs();
  if (S.mode === 'timeline') draw(); else layout();
}
function updateBrushStat() {
  if (!S.brush) { $('sBrushWrap').style.display = 'none'; return; }
  const span = S.brush.b1 - S.brush.b0;
  $('sBrush').textContent = fmt(span) + ' cyc (' + (S.wall ? (100 * span / (S.tMax - S.tMin)).toFixed(1) : 0) + '%)';
  $('sBrushWrap').style.display = '';
}

/* ---------- sandwich (caller / callee) ---------- */
function fnParent(f) { let p = f.parent; while (p && p.kind === 'region') p = p.parent; return p; }
function fnChildren(f) {
  const out = [];
  for (const c of f.children) { if (c.kind === 'region') out.push(...fnChildren(c)); else out.push(c); }
  return out;
}
function ancHasName(f, name) {
  let p = fnParent(f);
  while (p) { if (p.name === name) return true; p = fnParent(p); }
  return false;
}
function mergeCallees(items, total, name, kind) {
  const node = { name, kind, value: total,
    self: items.reduce((a, i) => a + (i.selfF !== undefined ? i.selfF : 0), 0),
    calls: items.length, instret: items.reduce((a, i) => a + i.instret, 0),
    children: [], parent: null };
  const groups = new Map();
  for (const i of items) for (const c of fnChildren(i)) {
    const k = c.kind + ' ' + c.name;
    let g = groups.get(k);
    if (!g) { g = { name: c.name, kind: c.kind, items: [] }; groups.set(k, g); }
    g.items.push(c);
  }
  for (const g of groups.values()) {
    const val = g.items.reduce((a, i) => a + i.dur, 0);
    const child = mergeCallees(g.items, val, g.name, g.kind);
    child.parent = node; node.children.push(child);
  }
  node.children.sort((a, b) => b.value - a.value);
  return node;
}
function buildCallers(pairs) {
  const groups = new Map();
  for (const p of pairs) {
    const k = p.f.kind + ' ' + p.f.name;
    let g = groups.get(k);
    if (!g) { g = { name: p.f.name, kind: p.f.kind, pairs: [] }; groups.set(k, g); }
    g.pairs.push(p);
  }
  const nodes = [];
  for (const g of groups.values()) {
    const val = g.pairs.reduce((a, p) => a + p.w, 0);
    const next = g.pairs.map(p => ({ w: p.w, f: fnParent(p.f) })).filter(p => p.f);
    nodes.push({ name: g.name, kind: g.kind, value: val, calls: g.pairs.length,
      children: buildCallers(next), _caller: true, self: 0, instret: 0 });
  }
  nodes.sort((a, b) => b.value - a.value);
  return nodes;
}
function depthOfNodes(nodes) {
  let d = 0;
  for (const n of nodes) d = Math.max(d, 1 + depthOfNodes(n.children));
  return d;
}
function buildSandwich() {
  const sel = S.selFn;
  if (!sel) { S.sandwich = null; return; }
  const roots = (S.brush && S.scopedRoots) ? S.scopedRoots : S.roots;
  const insts = walkFrames(roots).filter(f => f.kind !== 'region' && f.name === sel && !ancHasName(f, sel));
  if (!insts.length) { S.sandwich = { total: 0 }; return; }
  const total = insts.reduce((a, i) => a + i.dur, 0);
  const kind = insts.some(i => i.kind === 'kernel') ? 'kernel' : 'fn';
  const callees = mergeCallees(insts, total, sel, kind);
  const pairs = insts.map(i => ({ w: i.dur, f: fnParent(i) })).filter(p => p.f);
  const callers = buildCallers(pairs);
  S.sandwich = { name: sel, total, calls: insts.length, kind, callers, callees,
    cd: depthOfNodes(callers), ed: depthOfNodes(callees.children) };
}
function sandwichRows() {
  if (!S.sandwich) return 3;
  return (S.sandwich.cd || 0) + (S.sandwich.ed || 0) + 1;
}
/* What a freshly ingested recording should root the sandwich at: the function
   that was already on screen if it survived into the new capture, else the one
   holding the most self cycles, which is the row a reader picks first anyway.
   Regions never qualify, the sandwich splices them out. */
function sandwichEntryFn(prevFn) {
  if (prevFn && S.flat.some(r => r.name === prevFn)) return prevFn;
  let best = null;
  for (const r of S.flat) if (!best || r.self > best.self) best = r;
  return best ? best.name : null;
}

/* ---------- selection / highlight ---------- */
function activeRegion() { return S.hoverRegion || S.selRegion; }
/* "all regions" lights every region at once. Only the timeline draws region
   frames (merged and sandwich splice them out), so there is nothing to light in
   the other modes and it has to read as no filter there, or every frame would
   dim. */
function activeAllRegions() { return (S.hoverAll || S.allRegions) && S.mode === 'timeline'; }
function frameInRegion(f, name) {
  if (f.kind === 'region' && f.name === name) return true;
  let p = f.parent;
  while (p) { if (p.kind === 'region' && p.name === name) return true; p = p.parent; }
  return false;
}
function inSelection(f) {
  if (S.search) {
    if (!f.name.toLowerCase().includes(S.search)) return false;
  }
  if (S.selFn) return f.name === S.selFn && f.kind !== 'region';
  // a single region picked in the tree beats the global toggle, so hovering one
  // while "all regions" is lit still previews just that one
  const reg = activeRegion();
  if (reg) return frameInRegion(f, reg);
  if (activeAllRegions()) return f.kind === 'region';
  return true;
}
function anyFilter() { return !!(S.search || S.selFn || activeRegion() || activeAllRegions()); }

/* ---------- flame rendering ---------- */
const canvas = $('flame'), ctx = canvas.getContext('2d');
let dpr = window.devicePixelRatio || 1;

function layout() {
  const wrap = $('flameWrap');
  if (S.mode === 'sandwich' && S.selFn && !S.sandwich) buildSandwich();
  const strips = S.mode === 'timeline' ? STRIP.total : 0;
  const rows = S.mode === 'timeline' ? S.maxDepth + 1 : S.mode === 'merged' ? mergedDepth() : sandwichRows();
  const avail = Math.max(120, wrap.clientHeight - strips);
  /* Grow the rows to use the pane instead of drawing a short stack against the
     bottom edge with dead space above it: a shallow capture on a big screen was
     leaving well over a third of the window empty. The row height is whatever
     divides the space available below the strips, capped so a two-row capture
     does not turn into two enormous slabs, and floored at the old minimum so a
     deep tree still scrolls rather than getting squashed. Subtracting 8 keeps
     the top row clear of the strips, which is what stops this from introducing
     a scrollbar at the same time. */
  S.rowH = Math.max(20, Math.min(56, Math.floor((avail - 8) / rows)));
  const h = Math.max(wrap.clientHeight, rows * S.rowH + 14 + strips);
  canvas.style.height = h + 'px';
  canvas.width = Math.round(wrap.clientWidth * dpr);
  canvas.height = Math.round(h * dpr);
  draw();
}
function mergedDepth() {
  let d = 0;
  const walk = (n, k) => { if (k > d) d = k; for (const c of n.children) walk(c, k + 1); };
  walk(S.mergedZoom || activeMergedRoot(), 0);
  return d + (S.mergedZoom ? zoomChain().length : 0) + 1;
}
function zoomChain() {
  const ch = [];
  let n = S.mergedZoom;
  while (n && n.parent) { ch.unshift(n); n = n.parent; }
  return ch;
}
function frameColor(f, dim, hi) {
  if (dim) return { fill: C.carbon3, text: C.ink4 };
  if (hi) return { fill: C.supernova, text: C.carbon };
  if (f.kind === 'kernel') return { fill: C.gold, text: C.carbon };
  if (f.kind === 'region') return { fill: C.carbon4, text: C.supernova };
  if (f.kind === 'root') return { fill: C.carbon2, text: C.ink3 };
  return f.depth % 2 ? { fill: C.vistaSoft, text: C.carbon } : { fill: C.vista, text: C.ink };
}
function drawFrame(x, w, y, h, col, label, edge) {
  ctx.fillStyle = col.fill;
  ctx.fillRect(x, y, Math.max(w - 0.6, 0.4), h - 1.2);
  if (edge) { ctx.fillStyle = C.supernova; ctx.fillRect(x, y, Math.min(2, w), h - 1.2); }
  if (w > 34 && label) {
    ctx.fillStyle = col.text;
    ctx.font = '10.5px "Cascadia Code","JetBrains Mono",monospace';
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'left';
    const maxCh = Math.floor((w - 10) / 6.4);
    ctx.fillText(label.length > maxCh ? label.slice(0, Math.max(maxCh - 1, 1)) + '…' : label, x + 5, y + h / 2);
  }
}
function draw() {
  const W = canvas.width / dpr, H = canvas.height / dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  ctx.clearRect(0, 0, W, H);
  S.hitRows = [];
  if (!S.frames.length) return;
  if (S.mode === 'timeline') drawTimeline(W, H);
  else if (S.mode === 'merged') drawMerged(W, H);
  else drawSandwich(W, H);
}

/* ---------- timeline: metric strips ---------- */
function drawStrips(W) {
  const { t0, t1 } = S.view, span = t1 - t0;
  const px = Math.max(1, Math.floor(W));
  const ipcV = new Float64Array(px).fill(-1);
  const ipcD = new Int32Array(px).fill(-1);
  const ipcN = new Array(px);
  const fab = new Float64Array(px);
  const regs = [];
  const X = t => (t - t0) / span * W;
  const visit = (f, regLvl) => {
    if (f.e <= t0 || f.s >= t1) { return; }
    const x0 = Math.max(0, X(f.s)), x1 = Math.min(W, X(f.e));
    if (f.kind === 'fn' && f.instret > 0 && f.dur > 0) {
      const v = f.instret / f.dur;
      const i1 = Math.min(px, Math.ceil(x1));
      for (let i = Math.floor(x0); i < i1; i++) if (f.depth > ipcD[i]) { ipcD[i] = f.depth; ipcV[i] = v; ipcN[i] = f.name; }
    } else if (f.kind === 'kernel') {
      const i0 = Math.max(0, Math.floor(x0)), i1 = Math.min(px - 1, Math.floor(x1 - 1e-9));
      for (let i = i0; i <= i1; i++) {
        const c0 = Math.max(x0, i), c1 = Math.min(x1, i + 1);
        fab[i] = Math.min(1, fab[i] + (c1 - c0));
      }
    } else if (f.kind === 'region') {
      regs.push({ x0, x1, name: f.name, lvl: regLvl });
    }
    const nl = f.kind === 'region' ? regLvl + 1 : regLvl;
    for (const c of f.children) visit(c, nl);
  };
  for (const r of S.roots) visit(r, 0);

  // strip backgrounds
  ctx.fillStyle = C.carbon2;
  ctx.fillRect(0, STRIP.ipcY, W, STRIP.h);
  ctx.fillRect(0, STRIP.fabY, W, STRIP.h);
  ctx.fillRect(0, STRIP.regY, W, STRIP.regH);
  // IPC bars
  const scale = S.maxIPC > 0 ? (STRIP.h - 4) / S.maxIPC : 0;
  ctx.fillStyle = C.vistaSoft;
  const ipcBase = STRIP.ipcY + STRIP.h - 1;
  for (let i = 0; i < px; i++) {
    if (ipcV[i] < 0) continue;
    const h = Math.max(1, ipcV[i] * scale);
    ctx.fillRect(i, ipcBase - h, 1, h);
  }
  // Fabric activity bars
  ctx.fillStyle = C.gold;
  const fabBase = STRIP.fabY + STRIP.h - 1;
  for (let i = 0; i < px; i++) {
    if (fab[i] <= 0) continue;
    const h = Math.max(1, fab[i] * (STRIP.h - 4));
    ctx.fillRect(i, fabBase - h, 1, h);
  }
  // region markers
  ctx.fillStyle = C.supernova;
  for (const r of regs) {
    const y = STRIP.regY + 3 + Math.min(r.lvl, 2) * 3;
    ctx.fillRect(r.x0, y, Math.max(r.x1 - r.x0, 1), 2);
  }
  // Labels. The strips are drawn edge to edge because their x axis has to line
  // up with the flame graph below, so there is no gutter to put a label in: a
  // label in a corner lands on top of the bars. Each one therefore gets an
  // opaque pad in the strip's own background colour, which masks the few pixels
  // of bar underneath instead of tangling with them.
  ctx.font = '9px Roboto,Arial,sans-serif';
  ctx.textBaseline = 'top';
  const label = (text, x, y, align, color) => {
    ctx.textAlign = align;
    const w = ctx.measureText(text).width;
    const padX = align === 'right' ? x - w - 3 : x - 3;
    ctx.fillStyle = C.carbon2;
    ctx.fillRect(Math.max(0, Math.min(padX, W - w - 6)), y - 2, w + 6, 12);
    ctx.fillStyle = color;
    ctx.fillText(text, align === 'right' ? Math.min(x, W - 3) : x, y);
  };
  label('IPC', 6, STRIP.ipcY + 3, 'left', C.ink3);
  label('FABRIC', 6, STRIP.fabY + 3, 'left', C.ink3);
  label('REGIONS', 6, STRIP.regLabelY, 'left', C.ink3);
  /* The IPC ceiling used to print as "max n.nn" in the top right of the strip.
     Even on its own pad it sat on the data, and it is the one number here that
     never changes while you read a capture, so it reads as clutter rather than
     as a scale. It moved into the strip tooltip, where the per-cycle IPC it
     scales is already shown. */
  ctx.textAlign = 'left';
  ctx.textBaseline = 'middle';
  S._strip = { ipcV, ipcN, fab, regs, px };
}
function drawBrushOverlay(W, H) {
  const b = S.brushLive || S.brush;
  if (!b) return;
  const { t0, t1 } = S.view, span = t1 - t0;
  const b0 = Math.min(b.b0, b.b1), b1 = Math.max(b.b0, b.b1);
  if (b1 <= t0 || b0 >= t1) return;
  const x0 = Math.max(0, (b0 - t0) / span * W), x1 = Math.min(W, (b1 - t0) / span * W);
  ctx.fillStyle = 'rgba(30, 30, 30, 0.55)';
  if (x0 > 0) ctx.fillRect(0, 0, x0, H);
  if (x1 < W) ctx.fillRect(x1, 0, W - x1, H);
  ctx.fillStyle = C.gold;
  ctx.fillRect(x0, 0, 1, H);
  ctx.fillRect(x1 - 1, 0, 1, H);
}
function drawTimeline(W, H) {
  drawStrips(W);
  drawMatchMarkers(W);
  const { t0, t1 } = S.view, span = t1 - t0;
  const filt = anyFilter();
  const rowsHit = new Map();
  const visit = f => {
    if (f.e <= t0 || f.s >= t1) return;
    const x = (f.s - t0) / span * W, w = (f.e - f.s) / span * W;
    if (w < 0.3) return;
    const y = H - (f.vdepth + 1) * S.rowH - 4;
    const dim = filt && !inSelection(f);
    const hi = !dim && f.kind === 'region' && activeAllRegions();
    const tag = f.kind === 'kernel' ? '[K] ' : '';
    drawFrame(x, w, y, S.rowH, frameColor(f, dim, hi), tag + f.name, false);
    let row = rowsHit.get(f.vdepth);
    if (!row) { row = []; rowsHit.set(f.vdepth, row); }
    row.push({ x0: x, x1: x + w, f });
    for (const c of f.children) visit(c);
  };
  for (const r of S.roots) visit(r);
  for (const [d, items] of rowsHit) S.hitRows.push({ y0: H - (d + 1) * S.rowH - 4, y1: H - d * S.rowH - 4, items });
  drawBrushOverlay(W, H);
}
/* markers on the metric strips showing where every instance of the found
   or selected function lives, so short frames are findable while zoomed
   out (per Cindy, group DM 2026-07-23) */
function matchList() {
  if (S.search) return S.matches;
  if (S.selFn) return S.frames.filter(f => f.kind !== 'region' && f.name === S.selFn);
  return null;
}
function drawMatchMarkers(W) {
  const list = matchList();
  if (!list || !list.length) return;
  const { t0, t1 } = S.view, span = t1 - t0;
  ctx.save();
  ctx.fillStyle = 'rgba(255, 145, 110, 0.30)';
  const yTop = STRIP.ipcY, hFull = STRIP.regY + STRIP.regH - STRIP.ipcY;
  for (const f of list) {
    if (f.e <= t0 || f.s >= t1) continue;
    const x0 = Math.max(0, (f.s - t0) / span * W), x1 = Math.min(W, (f.e - t0) / span * W);
    ctx.fillRect(x0, yTop, Math.max(x1 - x0, 2), hFull);
  }
  ctx.fillStyle = '#FF916E';
  for (const f of list) {
    if (f.e <= t0 || f.s >= t1) continue;
    const x0 = Math.max(0, (f.s - t0) / span * W), x1 = Math.min(W, (f.e - t0) / span * W);
    ctx.fillRect(x0, STRIP.regY + STRIP.regH - 2, Math.max(x1 - x0, 2), 2);
  }
  ctx.restore();
}
function drawMerged(W, H) {
  const filt = anyFilter();
  const chain = zoomChain();
  const base = S.mergedZoom || activeMergedRoot();
  let level = 0;
  // ancestor rows (full width, dimmed context), then the zoom root, then subtree
  const ancestors = chain.slice(0, -1);
  for (const a of ancestors) {
    const y = H - (level + 1) * S.rowH - 4;
    drawFrame(0, W, y, S.rowH, { fill: C.carbon3, text: C.ink3 }, a.name, false);
    S.hitRows.push({ y0: y, y1: y + S.rowH, items: [{ x0: 0, x1: W, f: a, merged: true }] });
    level++;
  }
  const scale = W / base.value;
  // region membership flows down: a node inside the active region stays lit
  const visit = (n, x, lvl, inReg) => {
    const w = n.value * scale;
    if (w < 0.3) return;
    const reg = activeRegion();
    const hereReg = inReg || (reg && n.kind === 'region' && n.name === reg);
    const y = H - (lvl + 1) * S.rowH - 4;
    const isRoot = n.kind === 'root';
    const dim = !isRoot && filt && !mergedMatch(n, hereReg);
    const tag = n.kind === 'kernel' ? '[K] ' : '';
    const rootLabel = 'all (' + fmt(n.value) + ' cycles' + (S.brush ? ', brushed' : '') + ')';
    drawFrame(x, w, y, S.rowH, frameColor(n, dim), isRoot ? rootLabel : tag + n.name, false);
    let row = S.hitRows.find(r => r.y0 === y);
    if (!row) { row = { y0: y, y1: y + S.rowH, items: [] }; S.hitRows.push(row); }
    row.items.push({ x0: x, x1: x + w, f: n, merged: true });
    let cx = x;
    for (const c of n.children) { visit(c, cx, lvl + 1, hereReg); cx += c.value * scale; }
  };
  visit(base, 0, level, false);
}
function mergedMatch(n, inReg) {
  if (S.search) {
    if (!n.name.toLowerCase().includes(S.search)) return false;
  }
  if (S.selFn) return n.name === S.selFn && n.kind !== 'region';
  if (activeRegion()) return !!inReg;
  return true;
}
function drawSandwich(W, H) {
  const centerMsg = (l1, l2) => {
    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
    ctx.font = '13px Roboto,Arial,sans-serif'; ctx.fillStyle = C.ink3;
    ctx.fillText(l1, W / 2, H / 2 - 10);
    ctx.font = '11px "Cascadia Code","JetBrains Mono",monospace'; ctx.fillStyle = C.ink4;
    ctx.fillText(l2, W / 2, H / 2 + 12);
    ctx.textAlign = 'left';
  };
  if (!S.selFn) { centerMsg('Select a function in the flat profile to build the sandwich view', 'callers stack above the bar, callees below'); return; }
  if (!S.sandwich) buildSandwich();
  const sw = S.sandwich;
  if (!sw || !sw.total) { centerMsg('No calls to ' + S.selFn + ' in the current scope', S.brush ? 'try clearing the brush' : 'pick another row'); return; }
  const pushHit = (y, item) => {
    let row = S.hitRows.find(r => r.y0 === y);
    if (!row) { row = { y0: y, y1: y + S.rowH, items: [] }; S.hitRows.push(row); }
    row.items.push(item);
  };
  const yC = 6 + sw.cd * S.rowH;
  const visitUp = (nodes, x, lvl) => {
    let cx = x;
    for (const n of nodes) {
      const w = n.value / sw.total * W;
      if (w < 0.3) { cx += w; continue; }
      const y = yC - lvl * S.rowH;
      drawFrame(cx, w, y, S.rowH, frameColor({ kind: n.kind, depth: lvl }, false), n.name, false);
      pushHit(y, { x0: cx, x1: cx + w, f: n, merged: true });
      visitUp(n.children, cx, lvl + 1);
      cx += w;
    }
  };
  const visitDn = (nodes, x, lvl) => {
    let cx = x;
    for (const n of nodes) {
      const w = n.value / sw.total * W;
      if (w < 0.3) { cx += w; continue; }
      const y = yC + lvl * S.rowH;
      const tag = n.kind === 'kernel' ? '[K] ' : '';
      drawFrame(cx, w, y, S.rowH, frameColor({ kind: n.kind, depth: lvl }, false), tag + n.name, false);
      pushHit(y, { x0: cx, x1: cx + w, f: n, merged: true });
      visitDn(n.children, cx, lvl + 1);
      cx += w;
    }
  };
  visitUp(sw.callers, 0, 1);
  const centerLabel = sw.name + '  ·  ' + fmt(sw.total) + ' cycles  ·  ' + fmt(sw.calls) + (sw.calls === 1 ? ' call' : ' calls');
  drawFrame(0, W, yC, S.rowH, sw.kind === 'kernel' ? { fill: C.gold, text: C.carbon } : { fill: C.vista, text: C.ink }, centerLabel, false);
  pushHit(yC, { x0: 0, x1: W, f: { name: sw.name, kind: sw.kind, value: sw.total, self: sw.callees.self, calls: sw.calls, instret: sw.callees.instret, _center: true }, merged: true });
  visitDn(sw.callees.children, 0, 1);
}

/* ---------- hit testing / tooltip ---------- */
function hitTest(mx, my) {
  for (const row of S.hitRows) {
    if (my >= row.y0 && my < row.y1) {
      for (const it of row.items) if (mx >= it.x0 && mx < it.x1) return it;
    }
  }
  return null;
}
const tip = $('tooltip');
function showTip(it, cx, cy) {
  const f = it.f, merged = !!it.merged;
  const tot = merged ? f.value : f.dur;
  const kindLabel = f._caller ? 'Caller path' : f.kind === 'kernel' ? 'Fabric kernel' : f.kind === 'region' ? 'Region' : f.kind === 'root' ? 'Capture' : 'Scalar function';
  const kColor = f.kind === 'kernel' ? C.gold : f.kind === 'region' ? C.supernova : C.vistaSoft;
  let rows = '';
  const pct = S.wall ? (100 * tot / S.wall).toFixed(2) + '%' : '-';
  const selfV = merged ? f.self : (f.selfF !== undefined ? f.selfF : f.self);
  rows += trow('cycles', fmt(tot));
  rows += trow('inclusive share', pct);
  if (!f._caller) rows += trow('self cycles', fmt(selfV));
  if (merged && f.kind !== 'root') rows += trow('calls', fmt(f.calls));
  if (merged && f.calls > 1) rows += trow('avg cycles', fmt(Math.round(tot / f.calls)));
  const inst = f.instret;
  if (f.kind === 'fn' && !f._caller) {
    rows += trow('instret', inst ? fmt(inst) : '-');
    rows += trow('IPC', inst && tot ? (inst / tot).toFixed(2) : '-');
  }
  let fu = '';
  if (f.kind === 'kernel') {
    const t = S.fabric.find(x => x.fnName === f.name);
    if (t) {
      fu = '<div class="t-fu">' + FU_COLS.map((c, i) =>
        t.counts[i] ? trow(c + ' firings', fmt(t.counts[i])) : '').join('') + '</div>';
    }
  }
  tip.innerHTML = '<div class="t-name">' + esc(f.name) + '</div>' +
    '<div class="t-kind" style="color:' + kColor + '">' + kindLabel + '</div>' + rows + fu;
  placeTip(cx, cy);
}
function showStripTip(mx, cx, cy) {
  const st = S._strip;
  if (!st) return false;
  const { t0, t1 } = S.view, span = t1 - t0;
  const W = canvas.getBoundingClientRect().width;
  const cyc = Math.round(t0 + mx / W * span);
  const i = Math.max(0, Math.min(st.px - 1, Math.floor(mx)));
  let rows = trow('cycle', fmt(cyc));
  if (st.ipcV[i] >= 0) {
    rows += trow('IPC (span avg)', st.ipcV[i].toFixed(2));
    rows += trow('in function', esc(st.ipcN[i] || '-'));
  } else rows += trow('IPC (span avg)', '-');
  if (S.maxIPC > 0) rows += trow('strip scale', '0 to ' + S.maxIPC.toFixed(2) + ' IPC');
  rows += trow('Fabric active', st.fab[i] > 0 ? (100 * st.fab[i]).toFixed(0) + '%' : 'no');
  const inRegs = st.regs.filter(r => mx >= r.x0 && mx <= r.x1).map(r => r.name);
  if (inRegs.length) rows += trow('regions', esc([...new Set(inRegs)].join(', ')));
  tip.innerHTML = '<div class="t-name">metric strips</div>' +
    '<div class="t-kind" style="color:' + C.vistaSoft + '">Per-cycle view</div>' + rows;
  placeTip(cx, cy);
  return true;
}
function placeTip(cx, cy) {
  tip.style.display = 'block';
  const tw = tip.offsetWidth, th = tip.offsetHeight;
  let x = cx + 14, y = cy + 14;
  if (x + tw > window.innerWidth - 8) x = cx - tw - 14;
  if (y + th > window.innerHeight - 40) y = cy - th - 14;
  tip.style.left = x + 'px'; tip.style.top = y + 'px';
}
const trow = (l, v) => '<div class="t-row"><span>' + l + '</span><b>' + v + '</b></div>';
/* Names come from the uploaded capture, and they land inside double-quoted
   attributes (data-fn, data-r, title) in the innerHTML builders below, so the
   quote characters have to go too or a crafted symbol name closes the attribute
   and adds its own event handler. */
const esc = s => String(s)
  .replace(/&/g, '&amp;')
  .replace(/</g, '&lt;')
  .replace(/>/g, '&gt;')
  .replace(/"/g, '&quot;')
  .replace(/'/g, '&#39;');

/* ---------- interactions ---------- */
let panning = false, panStart = null, moved = 0;
let brushing = false, brushAnchor = 0, brushStartX = 0, brushJust = false;
function xToCycle(mx) {
  const W = canvas.getBoundingClientRect().width;
  return S.view.t0 + mx / W * (S.view.t1 - S.view.t0);
}
canvas.addEventListener('mousedown', e => {
  /* `moved` guards the click handler against firing at the end of a drag, and
     it has to be cleared on EVERY press, not just the ones this handler goes
     on to use. Merged and sandwich return here before the reset below, so a
     single pan in the timeline used to leave moved at the drag distance for
     the rest of the session: switch to Merged and every click was read as the
     tail of that old drag and dropped. */
  moved = 0;
  if (S.mode !== 'timeline' || !S.frames.length) return;
  const r = canvas.getBoundingClientRect();
  const mx = e.clientX - r.left, my = e.clientY - r.top;
  if (e.shiftKey || my <= STRIP.bottom) {
    brushing = true; brushStartX = e.clientX; moved = 0;
    brushAnchor = xToCycle(mx);
    S.brushLive = { b0: brushAnchor, b1: brushAnchor };
    e.preventDefault();
    return;
  }
  panning = true; moved = 0;
  panStart = { x: e.clientX, t0: S.view.t0, t1: S.view.t1 };
  canvas.classList.add('panning');
});
window.addEventListener('mouseup', () => {
  if (brushing) {
    brushing = false;
    if (moved < 4) { if (S.brush) { S.brush = null; brushJust = true; } }
    else { S.brush = { b0: Math.min(S.brushLive.b0, S.brushLive.b1), b1: Math.max(S.brushLive.b0, S.brushLive.b1) }; brushJust = true; }
    S.brushLive = null;
    applyBrush();
  }
  panning = false; canvas.classList.remove('panning');
});
canvas.addEventListener('mousemove', e => {
  const r = canvas.getBoundingClientRect();
  const mx = e.clientX - r.left, my = e.clientY - r.top;
  if (brushing) {
    moved = Math.max(moved, Math.abs(e.clientX - brushStartX));
    const c = xToCycle(mx);
    S.brushLive = { b0: Math.min(brushAnchor, c), b1: Math.max(brushAnchor, c) };
    $('sBrush').textContent = fmt(S.brushLive.b1 - S.brushLive.b0) + ' cyc';
    $('sBrushWrap').style.display = '';
    tip.style.display = 'none';
    requestAnimationFrame(draw);
    return;
  }
  if (panning && panStart) {
    const dx = e.clientX - panStart.x; moved = Math.max(moved, Math.abs(dx));
    if (moved > 3) {
      const span = panStart.t1 - panStart.t0;
      let shift = -dx / r.width * span;
      shift = Math.max(S.tMin - panStart.t0, Math.min(S.tMax - panStart.t1, shift));
      S.view.t0 = panStart.t0 + shift; S.view.t1 = panStart.t1 + shift;
      tip.style.display = 'none';
      requestAnimationFrame(draw);
      return;
    }
  }
  if (S.mode === 'timeline' && S.frames.length && my >= STRIP.ipcY && my <= STRIP.bottom) {
    if (showStripTip(mx, e.clientX, e.clientY)) return;
  }
  const it = hitTest(mx, my);
  if (it) showTip(it, e.clientX, e.clientY); else tip.style.display = 'none';
});
canvas.addEventListener('mouseleave', () => tip.style.display = 'none');
canvas.addEventListener('click', e => {
  if (brushJust) { brushJust = false; return; }
  if (moved > 3) return;
  const r = canvas.getBoundingClientRect();
  const it = hitTest(e.clientX - r.left, e.clientY - r.top);
  if (!it) return;
  if (S.mode === 'timeline') {
    const f = it.f, pad = Math.max((f.e - f.s) * 0.02, 1);
    S.view = { t0: Math.max(S.tMin, f.s - pad), t1: Math.min(S.tMax, f.e + pad) };
    draw();
  } else if (S.mode === 'merged') {
    S.mergedZoom = it.f.kind === 'root' ? null : it.f;
    renderCrumbs(); layout();
  } else {
    const f = it.f;
    if (f._center || f.kind === 'region' || f.name === S.selFn) return;
    S.selFn = f.name; S.sandwich = null;
    renderRegions(); renderFlat(); renderCrumbs(); layout();
  }
});
canvas.addEventListener('dblclick', () => { if (S.mode !== 'sandwich') resetZoom(); });
canvas.addEventListener('wheel', e => {
  if (S.mode !== 'timeline' || !S.frames.length) return;
  e.preventDefault();
  const r = canvas.getBoundingClientRect();
  const frac = (e.clientX - r.left) / r.width;
  const { t0, t1 } = S.view, span = t1 - t0;
  const factor = e.deltaY > 0 ? 1.28 : 1 / 1.28;
  let ns = Math.min(S.tMax - S.tMin, Math.max(64, span * factor));
  const pivot = t0 + frac * span;
  let n0 = pivot - frac * ns, n1 = n0 + ns;
  if (n0 < S.tMin) { n0 = S.tMin; n1 = n0 + ns; }
  if (n1 > S.tMax) { n1 = S.tMax; n0 = n1 - ns; }
  S.view = { t0: n0, t1: n1 };
  tip.style.display = 'none';
  requestAnimationFrame(draw);
}, { passive: false });
function resetZoom() {
  S.view = { t0: S.tMin, t1: S.tMax };
  S.mergedZoom = null;
  renderCrumbs(); layout();
}
/* The default view: nothing selected, nothing found, no brush, no zoom. Esc and
   the "all regions" row both land here, so it lives in one place. */
function resetToDefaultView() {
  S.selRegion = null; S.hoverRegion = null;
  S.allRegions = false; S.hoverAll = false;
  S.selFn = null; S.search = ''; $('search').value = '';
  S.sandwich = null;
  const hadBrush = !!S.brush;
  S.brush = null; S.brushLive = null;
  if (hadBrush) applyBrush();
  updateMatch(); resetZoom(); renderRegions(); renderFlat(); renderFabric();
}
window.addEventListener('keydown', e => {
  if ((e.ctrlKey || e.metaKey) && !e.altKey && (e.key === 'f' || e.key === 'F')) {
    e.preventDefault(); $('search').focus(); $('search').select();
    return;
  }
  if (e.key === 'Escape') {
    if ($('guideModal').classList.contains('show')) { closeGuide(); return; }
    if (document.activeElement === $('search')) { $('search').blur(); return; }
    resetToDefaultView();
  }
});

/* ---------- crumbs ---------- */
function renderCrumbs() {
  const el = $('crumbs');
  if (S.mode === 'timeline') {
    let html = '<span class="crumb cur">cycles ' + fmt(Math.round(S.view.t0)) + ' → ' + fmt(Math.round(S.view.t1)) + '</span>' +
      '<span class="sep">&middot;</span><span class="crumb" id="crumbReset">show all</span>';
    if (S.brush) {
      html += '<span class="sep">&middot;</span><span class="crumb cur">brush ' + fmt(S.brush.b0) + ' → ' + fmt(S.brush.b1) + '</span>' +
        '<span class="sep">&middot;</span><span class="crumb" id="brushClear">clear brush</span>';
    }
    el.innerHTML = html;
    const cr = $('crumbReset'); if (cr) cr.onclick = resetZoom;
    const bc = $('brushClear'); if (bc) bc.onclick = () => { S.brush = null; applyBrush(); };
  } else if (S.mode === 'merged') {
    const chain = zoomChain();
    let html = '<span class="crumb' + (chain.length ? '' : ' cur') + '" data-i="-1">all' + (S.brush ? ' (brushed)' : '') + '</span>';
    chain.forEach((n, i) => {
      html += '<span class="sep">›</span><span class="crumb' + (i === chain.length - 1 ? ' cur' : '') + '" data-i="' + i + '">' + esc(n.name) + '</span>';
    });
    if (S.brush) html += '<span class="sep">&middot;</span><span class="crumb" id="brushClear">clear brush</span>';
    el.innerHTML = html;
    el.querySelectorAll('.crumb[data-i]').forEach(c => c.onclick = () => {
      const i = parseInt(c.dataset.i, 10);
      S.mergedZoom = i < 0 ? null : zoomChain()[i];
      renderCrumbs(); layout();
    });
    const bc = $('brushClear'); if (bc) bc.onclick = () => { S.brush = null; applyBrush(); };
  } else {
    let html = '<span class="crumb cur">sandwich' + (S.brush ? ' (brushed)' : '') + '</span>';
    if (S.selFn) {
      html += '<span class="sep">›</span><span class="crumb cur">' + esc(S.selFn) + '</span>' +
        '<span class="sep">&middot;</span><span class="crumb" id="swClear">clear</span>';
    } else {
      html += '<span class="sep">›</span><span class="crumb">select a function in the flat profile</span>';
    }
    if (S.brush) html += '<span class="sep">&middot;</span><span class="crumb" id="brushClear">clear brush</span>';
    el.innerHTML = html;
    const sc = $('swClear'); if (sc) sc.onclick = () => {
      S.selFn = null; S.sandwich = null;
      renderRegions(); renderFlat(); renderCrumbs(); layout();
    };
    const bc = $('brushClear'); if (bc) bc.onclick = () => { S.brush = null; applyBrush(); };
  }
}

/* ---------- left panel: region tree ---------- */
function renderRegions() {
  const el = $('regionList');
  $('regionCount').textContent = S.regions.length ? String(S.regions.length) : '';
  if (!S.regions.length) {
    el.innerHTML = '<div style="padding:10px 16px;font-size:11px;color:var(--ink-4)">No regions in this capture. Wrap code with EFFPROF_REGION_ENTER / EFFPROF_REGION_EXIT to add them.</div>';
    return;
  }
  /* This row used to carry the selected class whenever no single region was
     picked, which read as a state rather than a control, and clicking it only
     cleared S.selRegion: with nothing selected that was a no-op, so it looked
     broken. It is a toggle now. Clicking it returns to the default view and
     lights every region; clicking it again turns the highlight off. */
  let html = '<div class="region-item all' + (S.allRegions ? ' selected' : '') +
    '" data-all="1" title="Reset the view and light every region">' +
    '<span class="rcaret"></span><span class="rname">all regions</span>' +
    '<span class="rpct"></span>' +
    '<span class="rcalls">' + (S.allRegions ? 'lit' : '') + '</span></div>';
  const emit = (n, depth, path) => {
    if (path.has(n.name) || depth > 12) return;
    const kids = n.children.length + n.fns.length;
    const open = S.regionOpen.has(n.name);
    html += '<div class="region-item' + (S.selRegion === n.name ? ' selected' : '') + '" data-r="' + esc(n.name) +
      '" style="padding-left:' + (14 + depth * 14) + 'px">' +
      '<span class="rcaret"' + (kids ? ' data-c="' + esc(n.name) + '"' : '') + '>' + (kids ? (open ? '▾' : '▸') : '') + '</span>' +
      '<span class="rname">' + esc(n.name) + '</span>' +
      '<span class="rpct">' + (S.wall ? (100 * Math.min(n.tot, S.wall) / S.wall).toFixed(1) + '%' : '-') + '</span>' +
      '<span class="rcalls">×' + fmt(n.calls) + '</span></div>';
    if (open && kids) {
      const p2 = new Set(path); p2.add(n.name);
      for (const c of n.children) emit(c, depth + 1, p2);
      for (const f of n.fns) {
        html += '<div class="region-item fn' + (S.selFn === f.name ? ' selected' : '') + '" data-fn="' + esc(f.name) +
          '" style="padding-left:' + (28 + depth * 14) + 'px" title="' + esc(f.name) + '">' +
          '<span class="rname">' + (f.kind === 'kernel' ? '<span class="ktag">[K]</span> ' : '') + esc(f.name) + '</span>' +
          '<span class="rpct">' + fmtC(f.cyc) + '</span>' +
          '<span class="rcalls">×' + fmt(f.calls) + '</span></div>';
      }
    }
  };
  for (const n of S.regionTree) emit(n, 0, new Set());
  el.innerHTML = html;
  el.querySelectorAll('.rcaret[data-c]').forEach(c => c.onclick = e => {
    e.stopPropagation();
    const nm = c.dataset.c;
    if (S.regionOpen.has(nm)) S.regionOpen.delete(nm); else S.regionOpen.add(nm);
    renderRegions();
  });
  // hover previews the region highlight, click pins it
  el.querySelectorAll('.region-item[data-r]').forEach(item => {
    const name = item.dataset.r;
    item.onclick = () => {
      S.selRegion = (S.selRegion === name) ? null : name;
      renderRegions();
      if (S.mode !== 'sandwich') draw();
    };
    item.onmouseenter = () => { S.hoverRegion = name; if (S.mode !== 'sandwich') draw(); };
    item.onmouseleave = () => { S.hoverRegion = null; if (S.mode !== 'sandwich') draw(); };
  });
  const allRow = el.querySelector('.region-item[data-all]');
  if (allRow) {
    allRow.onclick = () => {
      const wasLit = S.allRegions;
      resetToDefaultView();     // clears the lit flag along with everything else
      S.allRegions = !wasLit;   // so a click always changes something visible
      renderRegions();
      if (S.mode !== 'sandwich') draw();
    };
    allRow.onmouseenter = () => {
      if (S.allRegions) return;
      S.hoverAll = true; if (S.mode !== 'sandwich') draw();
    };
    allRow.onmouseleave = () => {
      if (!S.hoverAll) return;
      S.hoverAll = false; if (S.mode !== 'sandwich') draw();
    };
  }
  el.querySelectorAll('.region-item[data-fn]').forEach(item => item.onclick = () => {
    const fn = item.dataset.fn;
    S.selFn = (S.selFn === fn) ? null : fn;
    S.sandwich = null;
    renderRegions(); renderFlat(); renderCrumbs();
    if (S.mode === 'sandwich') layout(); else draw();
  });
}

/* ---------- right panel: flat profile ---------- */
function renderFlat() {
  const tbody = $('flatTable').querySelector('tbody');
  const scoped = !!(S.brush && S.scopedFlat);
  const src = scoped ? S.scopedFlat : S.flat;
  const wallBase = scoped ? S.scopedWall : S.wall;
  const note = $('profileScope');
  if (scoped) {
    note.textContent = 'Scoped to brush: ' + fmt(S.scopedWall) + ' cycles (' +
      (S.wall ? (100 * S.scopedWall / S.wall).toFixed(1) : 0) + '% of capture)';
    note.style.display = '';
  } else note.style.display = 'none';
  const rows = [...src];
  /* % time is TOTAL-based, the formula effprof uses: Profile.cc computes
     pctOf(td.totalCycles, totals.cycles), numerator inclusive of callees and
     denominator the program's total cycles. That is why % ranks exactly like
     Total cyc. Cindy Li confirmed the formula on 2026-07-27 and asked for
     v2.1's self-based % to be reverted. Base recomputed per brush scope.

     CAVEAT, worth knowing before comparing against a CLI printout: effprof's
     own denominator is about 3.8x larger than the program actually ran. Its
     "total cycles" line is the sum of its self-cycle column, and it does not
     subtract callees from a function that was entered through a region, so
     main, core_bench_list, calc_func, core_bench_state and core_bench_matrix
     all report self == total and their nested time is counted several times
     over. This tool subtracts properly, so its base is the real program
     duration and every percentage here reads correspondingly higher. Same
     ordering, same formula, honest denominator. */
  const cycleBase = rows.reduce((a, r) => a + r.self, 0);
  rows.forEach(r => r.pct = cycleBase ? 100 * r.tot / cycleBase : 0);
  const k = S.sortK, dir = S.sortDir;
  const sv = o => { const v = o[k]; return (v == null || !isFinite(v)) ? -1 : v; };
  rows.sort((a, b) => k === 'name' ? dir * a.name.localeCompare(b.name) : dir * (sv(a) - sv(b)));
  let html = '';
  for (const r of rows) {
    const tag = r.kind === 'kernel' ? '<span class="ktag">[K]</span> ' : '';
    html += '<tr data-fn="' + esc(r.name) + '"' + (S.selFn === r.name ? ' class="selected"' : '') + '>' +
      '<td class="pct">' + r.pct.toFixed(1) + '</td>' +
      '<td>' + fmt(r.tot) + '</td>' +
      '<td>' + fmt(r.self) + '</td>' +
      '<td>' + fmt(r.calls) + '</td>' +
      '<td' + (r.min == null ? '>-' : ' title="' + fmt(r.min) + ' cycles">' + fmtC(r.min)) + '</td>' +
      '<td' + (r.max == null ? '>-' : ' title="' + fmt(r.max) + ' cycles">' + fmtC(r.max)) + '</td>' +
      '<td class="l" title="' + esc(r.name) + '">' + tag + esc(r.name) + '</td></tr>';
  }
  tbody.innerHTML = html;
  tbody.querySelectorAll('tr').forEach(tr => tr.onclick = () => {
    const fn = tr.dataset.fn;
    S.selFn = (S.selFn === fn) ? null : fn;
    S.sandwich = null;
    renderRegions(); renderFlat(); renderCrumbs();
    if (S.mode === 'sandwich') layout(); else draw();
  });
  $('flatTable').querySelectorAll('th').forEach(th => th.onclick = () => {
    const nk = th.dataset.k;
    if (S.sortK === nk) S.sortDir *= -1; else { S.sortK = nk; S.sortDir = nk === 'name' ? 1 : -1; }
    $('flatTable').querySelectorAll('th').forEach(h => {
      h.innerHTML = h.innerHTML.replace(/ <span class="arr">.*<\/span>/, '');
      if (h.dataset.k === S.sortK) h.innerHTML += ' <span class="arr">' + (S.sortDir < 0 ? '↓' : '↑') + '</span>';
    });
    renderFlat();
  });
}

/* ---------- right panel: fabric heat map ---------- */
function renderFabric() {
  const thead = $('fabricTable').querySelector('thead');
  const tbody = $('fabricTable').querySelector('tbody');
  const scoped = !!(S.brush && S.scopedFlat);
  let rows = S.fabric;
  if (scoped) {
    const active = new Set(S.scopedFlat.filter(r => r.kind === 'kernel').map(r => r.name));
    rows = S.fabric.filter(f => active.has(f.fnName));
  }
  $('fabNote').textContent = scoped
    ? 'Kernels active in the brushed range. Firing counts are whole-capture totals; per-range firing data is not in the recording.'
    : 'Firings per functional unit type for each Fabric kernel. Darker gold means more firings.';
  if (!rows.length) {
    thead.innerHTML = ''; tbody.innerHTML =
      '<tr><td class="l" style="color:var(--ink-4);padding:12px 16px">' +
      (scoped ? 'No Fabric kernels active in the brushed range.'
        : 'No Fabric kernel data in this capture: ' + esc(S.fabricDetail) + '.') + '</td></tr>';
    return;
  }
  const max = Math.max(1, ...rows.flatMap(f => f.counts));
  thead.innerHTML = '<tr><th class="l">Kernel</th>' + FU_SHORT.map((c, i) =>
    '<th title="' + FU_COLS[i] + '">' + c + '</th>').join('') + '</tr>';
  let html = '';
  for (const f of [...rows].sort((a, b) => Math.max(...b.counts) - Math.max(...a.counts))) {
    html += '<tr><td class="l" title="' + esc(f.fnName) + '">' + esc(f.fnName) + '</td>';
    for (const v of f.counts) {
      const a = v > 0 ? 0.08 + 0.72 * Math.log(v + 1) / Math.log(max + 1) : 0;
      html += '<td class="cell' + (v ? '' : ' zero') + '" style="background:rgba(250,170,25,' + a.toFixed(3) + ')"' +
        ' title="' + fmt(v) + ' firings">' + (v ? fmtC(v) : '·') + '</td>';
    }
    html += '</tr>';
  }
  tbody.innerHTML = html;
  tbody.querySelectorAll('tr').forEach(tr => tr.onclick = () => {
    const fn = tr.querySelector('td.l'); if (!fn) return;
    S.selFn = (S.selFn === fn.title) ? null : fn.title;
    S.sandwich = null;
    renderRegions(); renderFlat(); renderCrumbs();
    if (S.mode === 'sandwich') layout(); else draw();
  });
}

/* ---------- tabs, toggle, search, load ---------- */
$('tabs').querySelectorAll('button').forEach(b => b.onclick = () => {
  $('tabs').querySelectorAll('button').forEach(x => x.classList.toggle('on', x === b));
  $('tabProfile').style.display = b.dataset.tab === 'profile' ? '' : 'none';
  $('tabFabric').style.display = b.dataset.tab === 'fabric' ? '' : 'none';
});
$('modeToggle').querySelectorAll('button').forEach(b => b.onclick = () => {
  S.mode = b.dataset.mode;
  /* Leaving a drag behind in the timeline must not eat the first click in the
     mode you switch to: brushJust survives until a click consumes it, and that
     click would otherwise be the one you meant for the new view. */
  panning = false; brushing = false; moved = 0; brushJust = false;
  $('modeToggle').querySelectorAll('button').forEach(x => x.classList.toggle('on', x === b));
  $('hint').textContent = HINTS[S.mode];
  renderCrumbs(); layout();
});
/* find works like Ctrl+F (per Cindy, group DM 2026-07-23): typing zooms to
   the first instance, Enter jumps to the next, Shift+Enter to the previous */
$('search').addEventListener('input', e => {
  S.search = e.target.value.trim().toLowerCase();
  updateMatch();
  if (S.search && S.matches.length && S.mode === 'timeline') { S.matchIdx = 0; zoomToMatch(); }
  else draw();
});
$('search').addEventListener('keydown', e => {
  if (e.key !== 'Enter') return;
  e.preventDefault();
  if (!S.matches.length || S.mode !== 'timeline') return;
  const n = S.matches.length;
  S.matchIdx = ((S.matchIdx + (e.shiftKey ? -1 : 1)) % n + n) % n;
  zoomToMatch();
});
function updateMatch() {
  S.matches = []; S.matchIdx = -1;
  if (!S.search || !S.wall) { $('sMatchWrap').style.display = 'none'; return; }
  // sum matched cycles without double counting: top-most matching frames only
  let sum = 0;
  const visit = f => {
    if (f.name.toLowerCase().includes(S.search)) { sum += f.dur; return; }
    for (const c of f.children) visit(c);
  };
  for (const r of S.roots) visit(r);
  // every matching instance, in capture order, for Enter-jumping
  S.matches = S.frames.filter(f => f.name.toLowerCase().includes(S.search)).sort((a, b) => a.s - b.s);
  updateMatchStat(sum);
}
function updateMatchStat(sum) {
  if (sum !== undefined) S._matchSum = sum;
  const idx = (S.matchIdx >= 0 && S.matches.length) ? (S.matchIdx + 1) + '/' + fmt(S.matches.length) + ' · ' : '';
  $('sMatch').textContent = idx + (100 * (S._matchSum || 0) / S.wall).toFixed(1) + '%';
  $('sMatchWrap').style.display = '';
}
function zoomToMatch() {
  const f = S.matches[S.matchIdx];
  if (!f) return;
  // same zoom as clicking the frame, padded so the label is readable
  const pad = Math.max((f.e - f.s) * 0.35, 24);
  S.view = { t0: Math.max(S.tMin, f.s - pad), t1: Math.min(S.tMax, f.e + pad) };
  updateMatchStat();
  renderCrumbs(); draw();
}
$('loadBtn').onclick = () => $('fileInput').click();
$('fileInput').addEventListener('change', e => { if (e.target.files[0]) readFile(e.target.files[0]); e.target.value = ''; });
const dz = $('dropZone');
dz.onclick = () => $('fileInput').click();
$('sampleNoteClose').onclick = () => {
  try { localStorage.setItem(SAMPLE_NOTE_KEY, '1'); } catch (e) {}
  renderSampleNote();
  if (S.frames.length) layout();   // the pane just got its 32px back
};
const dtEl = $('dropTarget');
/* Light up only for a drag that is carrying a file. Dragging a text selection
   across the pane must not promise an ingest that will not happen. Some
   platforms report the types list without a length, hence the indexOf call
   rather than includes. */
const dragHasFile = e => {
  const t = e.dataTransfer && e.dataTransfer.types;
  return !!t && Array.prototype.indexOf.call(t, 'Files') >= 0;
};
function armDrop(on) {
  dz.classList.toggle('armed', on);
  dtEl.classList.toggle('show', on);
}
/* preventDefault on dragover is what makes the browser deliver the drop at all,
   so it stays unconditional. */
['dragover', 'dragenter'].forEach(ev => document.addEventListener(ev, e => { e.preventDefault(); if (dragHasFile(e)) armDrop(true); }));
['dragleave', 'drop'].forEach(ev => document.addEventListener(ev, e => { e.preventDefault(); if (ev === 'drop' || e.target === document.documentElement) armDrop(false); }));
document.addEventListener('drop', e => {
  e.preventDefault(); armDrop(false);
  const f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
  if (f) { readFile(f); return; }
  /* The drop fired but handed over no File. Cindy Li reported drag and drop not
     working on 2026-08-04 and this path is the likeliest reason: a webview can
     deliver the event without the payload (WebKitGTK under Tauri is the known
     case, which is why the desktop build keeps dragDropEnabled false). Saying
     so beats looking inert, and the Load JSON button always works. */
  flashError('That drop did not carry a file. Use the Load JSON button instead.');
});
const fmtBytes = n => n >= 1048576 ? (n / 1048576).toFixed(1) + ' MB'
  : n >= 1024 ? Math.round(n / 1024) + ' KB' : n + ' B';
function setBusy(msg) {
  dz.classList.add('busy'); dz.textContent = msg;
  $('hint').textContent = msg.toUpperCase();
}
function clearBusy() {
  dz.classList.remove('busy'); dz.textContent = 'Drop effprof JSON here';
  $('hint').textContent = HINTS[S.mode];
}
/* A recording can be tens of megabytes (Cindy's demo.json is 36.6 MB, 194k
   events) and parse plus ingest blocks the main thread for a few hundred
   milliseconds. Without an acknowledgement a drop looks like it did nothing, so
   paint a reading state first and only then do the blocking work. */
function readFile(file) {
  setBusy('Reading ' + file.name + ' (' + fmtBytes(file.size) + ')');
  const rd = new FileReader();
  rd.onerror = () => { clearBusy(); flashError('Could not read ' + file.name); };
  rd.onload = () => {
    setBusy('Parsing ' + file.name + ' (' + fmtBytes(file.size) + ')');
    /* Yield before the blocking parse so the busy state is really on screen,
       but never make the ingest itself wait on a frame. A page that is not
       painting never runs a requestAnimationFrame callback: a background tab,
       or a webview that withholds frames, which is the leading suspect in the
       Tauri build's drag and drop report. The file then sits at "Parsing"
       for good, with no data and no error, which is the exact shape of the
       complaint. A frame is the nicer of the two yields, so take it when it
       comes and let a short timer cover the case where it never does.
       Whichever wins, run() only ever ingests once. */
    let ran = false;
    const run = () => {
      if (ran) return;
      ran = true;
      try { ingest(JSON.parse(rd.result), file.name); clearBusy(); }
      catch (err) { clearBusy(); flashError('Could not parse ' + file.name + ': ' + err.message); }
    };
    requestAnimationFrame(() => setTimeout(run, 0));
    setTimeout(run, 120);
  };
  rd.readAsText(file);
}
function flashError(msg) {
  const h = $('hint');
  h.textContent = msg.toUpperCase();
  h.style.color = 'var(--danger)';
  setTimeout(() => { h.style.color = ''; h.textContent = HINTS[S.mode]; }, 5000);
}

window.addEventListener('resize', () => { if (S.frames.length) layout(); });

/* URL params (demo deep links):
   ?mode=merged|sandwich&tab=fabric&region=bstate&find=crc&zoom=t0,t1&fn=name&brush=b0,b1 */
function applyParams() {
  const p = new URLSearchParams(location.search);
  const fn = p.get('fn');
  if (fn && S.flat.some(r => r.name === fn)) {
    S.selFn = fn; S.selRegion = null; S.sandwich = null;
    renderFlat(); renderRegions();
  }
  if (p.get('mode') === 'merged') $('modeToggle').querySelector('[data-mode="merged"]').click();
  if (p.get('mode') === 'sandwich') $('modeToggle').querySelector('[data-mode="sandwich"]').click();
  if (p.get('tab') === 'fabric') $('tabs').querySelector('[data-tab="fabric"]').click();
  const rg = p.get('region');
  if (rg && S.regions.some(r => r.name === rg)) {
    S.selRegion = rg; renderRegions(); draw();
  }
  const q = p.get('find');
  if (q) { $('search').value = q; S.search = q.toLowerCase(); updateMatch(); draw(); }
  const z = p.get('zoom');
  if (z) {
    const [a, b] = z.split(',').map(Number);
    if (isFinite(a) && isFinite(b) && b > a) {
      S.view = { t0: Math.max(S.tMin, a), t1: Math.min(S.tMax, b) };
      renderCrumbs(); draw();
    }
  }
  const br = p.get('brush');
  if (br) {
    const [a, b] = br.split(',').map(Number);
    if (isFinite(a) && isFinite(b) && b > a) { S.brush = { b0: a, b1: b }; applyBrush(); }
  }
  if (p.get('selftest') === '1') runSelfTest();
}

/* ---------- self test (?selftest=1): consistency checks into document.title ---------- */
function runSelfTest() {
  const errs = [];
  const near = (a, b, tol) => Math.abs(a - b) <= (tol || 1e-6);
  const saved = { search: S.search, selRegion: S.selRegion, selFn: S.selFn, view: { ...S.view } };
  try {
    // 1. full-range brush must reproduce the unscoped flat profile exactly
    S.brush = { b0: S.tMin, b1: S.tMax }; applyBrush();
    if (!S.brush) errs.push('full brush rejected');
    else {
      if (!near(S.scopedWall, S.wall)) errs.push('full-brush wall ' + S.scopedWall + ' != ' + S.wall);
      const full = new Map(S.flat.map(r => [r.name, r]));
      for (const r of S.scopedFlat) {
        const f = full.get(r.name);
        if (!f) { errs.push('scoped-only name ' + r.name); continue; }
        if (!near(r.tot, f.tot) || r.calls !== f.calls || !near(r.self, f.self, 1e-3)) errs.push('full-brush mismatch ' + r.name);
      }
      if (S.scopedFlat.length !== S.flat.length) errs.push('full-brush row count');
    }
    // 2. half-range brush: everything bounded by the full profile
    const mid = (S.tMin + S.tMax) / 2;
    S.brush = { b0: S.tMin, b1: mid }; applyBrush();
    if (S.brush) {
      if (S.scopedWall > (mid - S.tMin) + 1e-6) errs.push('half-brush wall too big');
      const full = new Map(S.flat.map(r => [r.name, r]));
      for (const r of S.scopedFlat) {
        const f = full.get(r.name);
        if (!f || r.tot > f.tot + 1e-6 || r.calls > f.calls) errs.push('half-brush exceeds full: ' + r.name);
      }
    }
    S.brush = null; applyBrush();
    // 3. sandwich invariants on the busiest multi-call function
    const cand = [...S.flat].filter(r => r.calls > 0).sort((a, b) => b.tot - a.tot);
    const pick = cand.find(r => r.calls > 1) || cand[0];
    if (pick) {
      S.selFn = pick.name; buildSandwich();
      const sw = S.sandwich;
      if (!sw || !sw.total) errs.push('sandwich empty for ' + pick.name);
      else {
        const cSum = sw.callers.reduce((a, n) => a + n.value, 0);
        const eSum = sw.callees.children.reduce((a, n) => a + n.value, 0);
        if (cSum > sw.total + 1e-6) errs.push('caller sum ' + cSum + ' > total ' + sw.total);
        if (eSum > sw.total + 1e-6) errs.push('callee sum ' + eSum + ' > total ' + sw.total);
        if (sw.total > pick.tot + 1e-6) errs.push('sandwich total ' + sw.total + ' > flat tot ' + pick.tot);
      }
      S.selFn = null; S.sandwich = null; renderFlat();
    } else errs.push('no sandwich candidate');
    /* 3b. the sandwich must never come back from an ingest with nothing to
       draw (v2.19): a surviving name is kept, an unknown one falls back to the
       heaviest self-cycles function, and neither answer is ever null while the
       capture holds functions. */
    if (S.flat.length) {
      const top = [...S.flat].sort((a, b) => b.self - a.self)[0].name;
      const keep = S.flat[Math.min(2, S.flat.length - 1)].name;
      if (sandwichEntryFn(keep) !== keep) errs.push('ingest dropped a surviving selection');
      if (sandwichEntryFn('no_such_function_xyz') !== top) errs.push('ingest fallback is not the top self-cycles fn');
      if (!sandwichEntryFn(null)) errs.push('ingest left the sandwich with no function');
    }
    // 4. regions are real frames again: when the capture has regions, the
    //    merged tree must contain at least one region node
    if (S.regions.length) {
      let seen = 0;
      const chkRegion = n => {
        if (n.kind === 'region') seen++;
        for (const c of n.children) chkRegion(c);
      };
      chkRegion(S.mergedRoot);
      if (!seen) errs.push('no region node in merged tree');
      // selecting a region must light at least one frame (itself or members)
      const savedFn = S.selFn; S.selFn = null; S.selRegion = S.regions[0].name;
      if (!walkFrames(S.roots).some(f => inSelection(f))) errs.push('region selection lights nothing');
      S.selRegion = null; S.selFn = savedFn;
    }
    // 5. find-and-jump: searching the busiest function collects every
    //    instance and Enter-jump zooms the view onto one of them
    const busiest = [...S.flat].sort((a, b) => b.tot - a.tot)[0];
    if (busiest) {
      S.search = busiest.name.toLowerCase(); updateMatch();
      if (S.matches.length < busiest.calls) errs.push('matches ' + S.matches.length + ' < calls ' + busiest.calls);
      S.matchIdx = 0; zoomToMatch();
      const m = S.matches[0];
      if (m && (m.s < S.view.t0 - 1e-6 || m.e > S.view.t1 + 1e-6)) errs.push('jump view misses match');
      S.search = ''; S.matches = []; S.matchIdx = -1; $('search').value = '';
      resetZoom(); updateMatch();
    }
    // 6. flat-profile % is total-based, so its ranking matches Total cyc and
    //    every row reproduces total/Σself (what the effprof CLI prints)
    {
      const base = S.flat.reduce((a, r) => a + r.self, 0);
      const byPct = [...S.flat].sort((a, b) => b.pct - a.pct || a.name.localeCompare(b.name));
      const byTot = [...S.flat].sort((a, b) => b.tot - a.tot || a.name.localeCompare(b.name));
      if (byPct.some((r, i) => r.name !== byTot[i].name)) errs.push('% ranking != Total cyc ranking');
      for (const r of S.flat) {
        if (!near(r.pct, base ? 100 * r.tot / base : 0, 1e-6)) { errs.push('% not total-based: ' + r.name); break; }
      }
    }
    /* 7a. FU columns stay in hardware drain order. A tripwire, not a
       derivation: this order has been printed wrong once already, and the
       only authority for it is fabric_offsets in riptools trace.cc. If you
       are changing this, change it there first. */
    if (FU_COLS.join(',') !== 'cf,ls,basic-int,float,full-int,basic-int-plus')
      errs.push('FU column order drifted from the trace.cc drain order');
    if (FU_SHORT.join(',') !== 'CF,LS,BI,FLT,FI,BI+')
      errs.push('FU short labels do not track FU_COLS');
    // 7. fabric rows normalized to six FU counts, whichever spelling was used
    for (const f of S.fabric) {
      if (!f.fnName || !Array.isArray(f.counts) || f.counts.length !== FU_COLS.length || f.counts.some(v => !isFinite(v)))
        { errs.push('bad fabric row ' + (f.fnName || '?')); break; }
    }
    // 9. min/max per-call cycles match an independent pass over the frames,
    //    and bracket the mean (min <= total/calls <= max)
    {
      const ref = new Map();
      for (const f of walkFrames(S.roots)) {
        if (f.kind === 'region' || f.clipped || !(f.e > 0)) continue;
        const r = ref.get(f.name) || { min: Infinity, max: -Infinity };
        r.min = Math.min(r.min, f.dur); r.max = Math.max(r.max, f.dur);
        ref.set(f.name, r);
      }
      for (const row of S.flat) {
        const r = ref.get(row.name); if (!r) continue;
        if (row.min !== r.min) { errs.push('min mismatch ' + row.name); break; }
        if (row.max !== r.max) { errs.push('max mismatch ' + row.name); break; }
        const mean = row.calls ? row.tot / row.calls : 0;
        if (row.min > mean + 1e-6 || row.max < mean - 1e-6) { errs.push('min/max do not bracket mean: ' + row.name); break; }
      }
    }
    // 8. every fabric spelling normalizes identically, including an unknown
    //    fourth one caught by shape. Guards the rename that broke v2.4.
    {
      const probe = [{ fnName: 'k', v: [1, 2, 3, 4, 5, 6] }];
      const cases = [
        ['fabric_functional_units', 'functionalUnitCounts'],
        ['fabric_firing_units', 'firingUnitCounts'],
        ['fabric_tiles', 'tileCounts'],
        ['fabric_whatever_is_next', 'someNewCountsField'],
      ];
      for (const [key, cf] of cases) {
        const j = {}; j[key] = [{ fnName: 'k' }]; j[key][0][cf] = probe[0].v;
        const got = normalizeFabric(j);
        if (got.rows.length !== 1 || got.rows[0].fnName !== 'k' ||
            got.rows[0].counts.join(',') !== probe[0].v.join(',')) errs.push('schema not read: ' + key);
      }
      // a capture with no Fabric block must report cleanly, not throw
      if (normalizeFabric({ events: [] }).rows.length !== 0) errs.push('empty fabric not empty');
    }
    /* 10. a drag left over from the timeline must not eat clicks in the other
       modes. The click handler drops anything that follows a drag, and only
       the timeline branch of mousedown used to clear that guard, so one pan
       killed click-to-zoom in Merged for the rest of the session. */
    {
      const prevMode = S.mode;
      for (const m of ['merged', 'sandwich', 'timeline']) {
        S.mode = m;
        moved = 99; brushJust = true;
        canvas.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 0, clientY: 0 }));
        if (moved !== 0) errs.push('stale drag guard survives a mousedown in ' + m);
      }
      panning = false; brushing = false; moved = 0; brushJust = false;
      S.brushLive = null;
      S.mode = prevMode;
    }
  } catch (err) { errs.push('exception: ' + err.message); }
  // restore whatever deep links or the user had set up before the test ran
  S.search = saved.search; $('search').value = saved.search;
  S.selRegion = saved.selRegion; S.selFn = saved.selFn; S.view = saved.view;
  updateMatch(); renderRegions(); renderFlat(); renderCrumbs(); draw();
  document.title = errs.length ? 'SELFTEST FAIL: ' + errs.slice(0, 4).join(' | ') : 'SELFTEST PASS';
}

/* ---------- getting-started guide ---------- */
const GUIDE_KEY = 'effprofGuideAutoOpen';
const GUIDE_STEPS = [
  { pill: 'Load', title: 'Load a recording', body: `
    <p>The effprof Visualizer renders an effprof JSON recording as an interactive flame graph, flat profile, and Fabric functional unit heat map. A sample CoreMark recording is already loaded, so there is something to read straight away.</p>
    <p>To read your own, record one on the host:</p>
    <p><span class="kbd">effprof record demo.elf --out demo.json</span></p>
    <p>Then <strong>drop the JSON anywhere on the tool</strong>, including straight onto the flame graph, or use the <span class="kbd">Load JSON</span> button in the header. It replaces the sample, and the Capture panel on the left fills in the file name, capture date, effcc Compiler version, and build hash.</p>
    <div class="launch-toggle on" id="guideToggle" role="checkbox" aria-checked="true">
      <div class="toggle-box"></div>
      <div>
        <div class="label">Show this guide at launch</div>
        <div class="hint">Uncheck to skip the guide on future opens. Reopen it any time with the Guide button in the header.</div>
      </div>
    </div>` },
  { pill: 'Timeline', title: 'Read the timeline', body: `
    <p>Each row of the flame graph is a call-stack depth; width is cycles. Colors match the legend on the left:</p>
    <ul>
      <li><strong style="color:#7E8FB0;">Scalar functions</strong> run on the scalar core.</li>
      <li><strong style="color:#FAAA19;">Fabric kernels</strong> run on the Fabric architecture's spatial array, tagged <span class="kbd">[K]</span>.</li>
      <li><strong style="color:#8CDCBE;">Regions</strong> come from EFFPROF_REGION_ENTER and EFFPROF_REGION_EXIT markers and draw as muted bars with green labels. They wrap the functions inside them rather than being calls of their own; hover a region in the left panel to highlight everything inside it, and click to pin the highlight.</li>
    </ul>
    <p>Above the flame graph, three strips summarize the whole capture: instructions per cycle (IPC) per span, Fabric activity in gold, and region markers.</p>
    <p><strong>Click</strong> a frame to zoom into it, <strong>scroll</strong> to zoom smoothly, <strong>drag</strong> to pan, and press <span class="kbd">Esc</span> to reset the view. Hovering shows cycles, self cycles, calls, and IPC per frame.</p>` },
  { pill: 'Brush', title: 'Brush to scope', body: `
    <p><strong>Shift-drag</strong> across the timeline to brush a cycle range. Every other view rescopes to that window:</p>
    <ul>
      <li>The flat profile recomputes cycles, calls, and % time for the brushed range only.</li>
      <li>The Fabric profile heat map recounts functional unit firings inside the window.</li>
      <li>The merged flame graph rebuilds from just the brushed frames.</li>
    </ul>
    <p>The scope note above the flat profile shows how much of the capture is selected. Press <span class="kbd">Esc</span> to clear the brush.</p>` },
  { pill: 'Profiles', title: 'Flat and Fabric profiles', body: `
    <p>The right panel has two tabs.</p>
    <h3>Flat profile</h3>
    <p>One row per function. <strong>% time uses the same formula as the effprof command line</strong>: total cycles for the function over the program's total cycles. The numerator counts callees and the denominator does not, so % ranks the same way as Total cyc. The absolute percentages read higher than an effprof printout, because effprof does not subtract callees from a function entered through a region, which inflates its denominator past the real program duration. Click any column header to sort, and click a row to open that function in Sandwich mode.</p>
    <p><strong>Min cyc and Max cyc</strong> are the shortest and longest any single call to that function took, inclusive of callees, the same two columns effprof now prints. Compare them against Total cyc over Calls to see how much a function varies from call to call. Hover a value for the exact cycle count.</p>
    <h3>Fabric profile</h3>
    <p>Firings per functional unit type for each Fabric kernel. Darker gold means more firings, which shows at a glance where each kernel spends its work on the Fabric. The Capture panel on the left names which effprof Fabric format the recording used, since the field has been renamed more than once and this tool reads all of them.</p>` },
  { pill: 'Modes', title: 'Merged and sandwich modes', body: `
    <p>The header toggle switches between three views:</p>
    <ul>
      <li><strong>Timeline</strong> shows every frame in capture order.</li>
      <li><strong>Merged</strong> aggregates identical stacks, the classic flame graph for spotting hot paths regardless of when they ran.</li>
      <li><strong>Sandwich</strong> centers one function: its callers stack above, its callees below. Pick the function from the flat profile or by clicking a frame.</li>
    </ul>
    <p>The find box in the header works like a browser find: press <span class="kbd">Ctrl+F</span> to focus it, type a name to zoom straight to the first instance, then press <span class="kbd">Enter</span> to jump to the next one (<span class="kbd">Shift+Enter</span> goes back). Found or selected functions also light up as markers on the metric strips, so short-lived frames are easy to locate even when fully zoomed out. The Regions tree on the left expands into sub-regions and their functions: hover a region to preview its highlight, click to pin it, and click a function row to select that function everywhere. The <strong>all regions</strong> row at the top of the tree clears everything back to the default view and lights every region at once, so you can see the region structure across the whole capture; click it again to turn the highlight off.</p>` },
];

const guide = { step: 0 };
function guideAutoOpenPref() {
  try { const v = localStorage.getItem(GUIDE_KEY); return v === null ? true : v === 'true'; }
  catch (e) { return true; }
}
function setGuideAutoOpenPref(v) { try { localStorage.setItem(GUIDE_KEY, String(v)); } catch (e) {} }
function renderGuide() {
  $('guideSteps').innerHTML = GUIDE_STEPS.map((s, i) =>
    '<button class="modal-step-pill' + (i === guide.step ? ' on' : '') + '" data-step="' + i + '">' +
    '<span class="pill-num">0' + (i + 1) + '</span><span>' + s.pill + '</span></button>').join('');
  $('guideSteps').querySelectorAll('.modal-step-pill').forEach(b =>
    b.onclick = () => { guide.step = +b.dataset.step; renderGuide(); });
  const s = GUIDE_STEPS[guide.step];
  $('guideBody').innerHTML = '<h3 style="margin-top:0">' + s.title + '</h3>' + s.body;
  $('guideNum').textContent = guide.step + 1;
  $('guideTot').textContent = GUIDE_STEPS.length;
  $('guidePrev').disabled = guide.step === 0;
  $('guideNext').textContent = guide.step === GUIDE_STEPS.length - 1 ? 'Done' : 'Next';
  const tog = $('guideToggle');
  if (tog) {
    if (!guideAutoOpenPref()) { tog.classList.remove('on'); tog.setAttribute('aria-checked', 'false'); }
    tog.onclick = () => {
      const on = !tog.classList.contains('on');
      tog.classList.toggle('on', on); tog.setAttribute('aria-checked', String(on));
      setGuideAutoOpenPref(on);
    };
  }
}
function openGuide() { guide.step = 0; renderGuide(); $('guideModal').classList.add('show'); }
function closeGuide() { $('guideModal').classList.remove('show'); }
$('guideBtn').onclick = openGuide;
$('guideClose').onclick = closeGuide;
$('guidePrev').onclick = () => { if (guide.step > 0) { guide.step--; renderGuide(); } };
$('guideNext').onclick = () => {
  if (guide.step < GUIDE_STEPS.length - 1) { guide.step++; renderGuide(); } else closeGuide();
};
if (guideAutoOpenPref() && !new URLSearchParams(location.search).get('selftest')) openGuide();

/* Land on a real recording rather than an empty canvas: the staged sample next
   to the tool loads at launch, and anyone with their own capture drops it
   straight on top.

   Resolve the sample against the tool's own directory instead of leaving it to
   the page URL. labs serves this page at /effprof-visualizer with no redirect
   to a trailing slash, so a bare relative fetch asked for the sample at the
   site root, got a 404, and the catch swallowed it: that is why the deployed
   tool has been landing blank while the same file loads fine locally.
   core_main.json stays on the list behind the demo capture, so an older deploy
   or a folder that only has that file still comes up loaded. Only file: is
   skipped, where fetch cannot read a sibling anyway, which lets the desktop
   build's custom protocol load the sample too. */
function toolURL(name) {
  const p = location.pathname;
  const dir = /\.html?$/i.test(p) ? p.replace(/[^/]*$/, '') : (p.endsWith('/') ? p : p + '/');
  return dir + name;
}
const SAMPLE_FILES = ['demo_core_main.json', 'core_main.json'];
if (!location.protocol.startsWith('file')) {
  (async () => {
    for (const name of SAMPLE_FILES) {
      if (S.data) return;
      try {
        const r = await fetch(toolURL(name));
        if (!r.ok) continue;
        const j = await r.json();
        if (j && !S.data) { S.sampleFile = name; ingest(j, name); applyParams(); return; }
      } catch (e) { /* try the next candidate */ }
    }
  })();
}
renderCrumbs();
</script>
</body>
</html>