ts-knowledge-graph 0.1.2 → 0.1.6

package/README.md

@@ -25,7 +25,9 @@ Compiler API) rather than a syntax-only parser.
 ## Graph model
 
 **Nodes** — `Module`, `Class`, `Interface`, `TypeAlias`, `Enum`, `Function`,
-`Method`, `Property`, `Parameter`, `Variable`, `ExternalModule`.
+`Method`, `Property`, `Parameter`, `Variable`, `ExternalModule`, and the
+system-level `ConfigFlag` (environment variables), `ExternalAPI` (outbound HTTP
+hosts), and `Endpoint` (HTTP routes).
 
 **Edges**
 
@@ -34,9 +36,22 @@ Compiler API) rather than a syntax-only parser.
 | Structural | `CONTAINS`, `IMPORTS`, `EXPORTS` |
 | Type | `EXTENDS`, `IMPLEMENTS`, `USES_TYPE`, `RETURNS`, `PARAM_TYPE` |
 | Behavioral | `CALLS`, `INSTANTIATES`, `OVERRIDES`, `READS`, `WRITES` |
-
-The structural layer is cheap and always emitted. The type + behavioral layers
-require symbol resolution and are emitted with `--semantic`.
+| System-level | `READS_CONFIG`, `CALLS_EXTERNAL`, `HANDLES` |
+| Runtime | `CALLS_RUNTIME` |
+
+The structural layer — plus the always-on config and outbound-HTTP surfaces
+(`ConfigFlag` / `READS_CONFIG`, `ExternalAPI` / `CALLS_EXTERNAL`) — is cheap and
+needs no symbol resolution. The type, behavioral, and endpoint (`Endpoint` /
+`HANDLES`) layers require symbol resolution and are emitted with `--semantic`. The
+runtime layer (`CALLS_RUNTIME`) is reconstructed from a CPU profile's call tree by
+[`enrich`](docs/commands/enrich.md), not parsed from source — the calls that
+actually fired, dynamic dispatch included.
+
+`ConfigFlag` nodes come from `process.env.X` reads; `ExternalAPI` nodes from
+`fetch(...)` call sites (one per host); `Endpoint` nodes from route registrations
+like `app.get('/users', handler)`, each with a `HANDLES` edge to the handler
+function. These are the system-level kinds tracked in
+[#31](https://github.com/jeromeetienne/ts_knowledge_graph/issues/31).
 
 ## Usage
 
@@ -50,9 +65,9 @@ npm run extract -- <path-to-project>
 npm run extract -- <path-to-project> --semantic
 ```
 
-Output is two JSONL files — `outputs/graph/nodes.jsonl` and
-`outputs/graph/edges.jsonl` (override with `--out`) — one record per line, easy
-to inspect, diff, and load into any store.
+Output is two JSONL files — `.ts_knowledge_graph/graph/nodes.jsonl` and
+`.ts_knowledge_graph/graph/edges.jsonl` (override the base folder with `-o, --output-folder`)
+— one record per line, easy to inspect, diff, and load into any store.
 
 ### Querying the graph
 
@@ -60,7 +75,7 @@ Load the JSONL into an embedded [Kùzu](https://kuzudb.com) database, then run t
 query tools:
 
 ```bash
-npm run dev -- load        # reads ./outputs/graph, writes ./outputs/graph.kuzu
+npm run dev -- load        # reads ./.ts_knowledge_graph/graph, writes ./.ts_knowledge_graph/graph.kuzu
 
 npm run dev -- find <name>                 # resolve a name to node ids
 npm run dev -- who-calls <id>              # direct callers of a symbol
@@ -69,6 +84,10 @@ npm run dev -- blast-radius <id> --depth 10  # transitive callers (impact set)
 npm run dev -- references <id>             # everything that references a symbol/type
 npm run dev -- dead-exports                # exported symbols with no inbound refs
 npm run dev -- neighbors <id>              # one-hop neighbourhood (in + out)
+npm run dev -- hotspots --by self-time     # rank nodes by optimization leverage
+npm run dev -- cost                        # inclusive cost + share-of-total (causal)
+npm run dev -- cost <id>                    # where one node's cost goes / who causes it
+npm run dev -- cluster                      # detect code communities (Leiden) -> metadata.community
 ```
 
 Every query command accepts `--json` to emit machine-readable output — this is
@@ -76,8 +95,8 @@ the shape the optimization agent consumes. Node ids come from `find` or another
 query's results; do not hand-write them.
 
 The query methods on `GraphQuery` (`whoCalls`, `blastRadius`, `deadExports`,
-`neighborhood`, …) are designed to map one-to-one onto agent tools: JSON in,
-JSON out.
+`hotspots`, `costRanking`, `costAttribution`, `neighborhood`, …) are designed to
+map one-to-one onto agent tools: JSON in, JSON out.
 
 For a task-oriented walk-through of these commands — using them by hand to
 answer impact, dead-code, and dependency questions — see the
@@ -93,36 +112,55 @@ answer impact, dead-code, and dependency questions — see the
 
 Serve the database as an interactive graph — pan/zoom, kind filters, symbol
 search, per-node edge listing (see
-[contribs/web_visualisation](contribs/web_visualisation)):
+[contribs/webview](contribs/webview)):
 
 ```bash
-npm run web            # reads ./outputs/graph.kuzu, serves http://localhost:4173
-npm run web -- --db ./outputs/graph.kuzu --port 8080
+npm run webview            # reads ./.ts_knowledge_graph/graph.kuzu, serves http://localhost:4173
+npm run webview -- -o ./.ts_knowledge_graph --port 8080
 ```
 
 ### The optimization agent
 
 The end goal: an agent that uses the graph to find and apply optimizations,
-verifying each one before keeping it.
-
-```bash
-cp .env-sample .env                 # pick a provider block, set key + model
-npm run dev -- optimize --db ./outputs/graph.kuzu
-npm run dev -- optimize "Inline the single-use helper X" --db ./outputs/graph.kuzu --model gpt-5.1
+verifying each one before keeping it. It ships as a [Claude Code](https://claude.com/claude-code)
+slash command, `/code-graph-optimize`, defined in
+[`dotclaude_folder/commands/code-graph-optimize.md`](dotclaude_folder/commands/code-graph-optimize.md)
+— so the agent runtime is your Claude Code subscription, with no API key or
+provider configuration to set up.
+
+```text
+/code-graph-optimize
+/code-graph-optimize Inline the single-use helper X
 ```
 
-The LLM layer sits on the **OpenAI-compatible chat-completions API**, so any
-provider exposing that surface works — OpenAI, OpenRouter, Ollama, LM Studio,
-vLLM — configured entirely through `OPENAI_API_KEY`, `OPENAI_BASE_URL`, and
-`OPENAI_MODEL` (see [.env-sample](.env-sample)).
+With no argument the command runs its default mission: find one genuinely dead
+exported symbol, confirm it has zero inbound references, and remove it safely.
+
+The command drives a find → confirm → edit → verify loop. It queries the graph
+through this CLI (`dead-exports`, `references`, `who-calls`, `blast-radius`) to
+gather context and confirm blast radius, makes exactly one edit, then runs
+[`ts-knowledge-graph verify`](docs/commands/verify.md) — the type-check **and**
+the test suite as a single gate. **If verify passes the edit stands; if it fails
+the edit is reverted with `git restore`** and the change is abandoned or retried.
+On a project with no test script verify degrades to type-check-only and the agent
+says so, rather than implying the change was behaviourally verified. Run it on a
+clean git tree so you can review (and `git checkout`) what it kept.
+
+A companion command, `/code-graph-interview`
+([`code-graph-interview.md`](dotclaude_folder/commands/code-graph-interview.md)),
+is read-only: it interviews you to scope a measurable optimization target and
+grounds each candidate in the graph, producing tasks you can then hand to
+`/code-graph-optimize`. Both commands, plus the `code-graph-query` skill, live
+under [`dotclaude_folder/`](dotclaude_folder) and are mirrored into `.claude/`.
+
+To install all of them into another project, run
+[`install`](docs/commands/install.md) from that project — it copies every
+bundled command and skill into the project's `.claude/` directory:
 
-The agent runs a tool-calling loop. Its tools are the read-only `GraphQuery`
-methods plus `read_file`; it gathers context, confirms blast radius, then calls
-`propose_optimization`. The harness **applies the edit, runs `tsc --noEmit`,
-and keeps it only if type-checking passes** — otherwise it reverts and hands
-the compiler errors back for another attempt. Edits are unique-match
-find/replace with in-memory backups; run on a clean git tree so you can review
-(and `git checkout`) what it kept.
+```bash
+npx ts-knowledge-graph install            # into ./.claude
+npx ts-knowledge-graph install --force    # overwrite previously installed copies
+```
 
 ## Architecture
 
@@ -141,14 +179,15 @@ src/
     kuzu_store.ts            load the graph into embedded Kùzu, run Cypher
   query/
     graph_query.ts           the agent's query tools (who-calls, blast-radius…)
-  agent/
-    agent_tools.ts           graph queries + read_file + propose_optimization, as LLM tools
-    code_editor.ts           unique-match find/replace with in-memory backup + revert
-    verifier.ts              runs `tsc --noEmit`, returns pass/fail + output
-    optimizer_agent.ts       the LLM tool-calling loop (propose → verify → keep/revert)
-  cli.ts                     extract / load / query / optimize commands
+  commands/                  one file per CLI command (extract, load, query, web, install)
+  cli.ts                     wires the commands into the ts-knowledge-graph CLI
 ```
 
+The optimization agent is not part of this `src/` tree — it is the
+`/code-graph-optimize` Claude Code command under
+[`dotclaude_folder/commands/`](dotclaude_folder/commands), which drives the same
+queries through the CLI.
+
 Node ids are derived purely from the declaration (`kind:relPath#name@line`), so
 any extractor computes the same id for the same symbol without a shared
 registry — that is what lets the semantic layer link a call site to the exact
@@ -165,10 +204,29 @@ declaration node the structural layer emitted.
   contained member is referenced.
 - [x] **Value-reference (`READS`) edges** — value-identifier usage, so exported
   `const`s (e.g. schemas) are no longer false-positive dead exports.
-- [x] **Optimization agent** — an LLM tool-calling loop (OpenAI-compatible API,
-  provider-agnostic) that proposes edits and keeps them only if `tsc --noEmit`
-  passes (otherwise reverts).
-- [ ] **Test verification** — run the test suite alongside `tsc` in the verify
-  step, so behavior-changing edits are caught, not just type errors.
+- [x] **Runtime enrichment** — the [`enrich`](docs/commands/enrich.md) command
+  ingests a V8 CPU profile and attaches measured self time / sample count onto
+  nodes as `metadata.runtime`, joining frames to nodes by enclosing range.
+- [x] **Hotspot / leverage ranking** — the [`hotspots`](docs/commands/hotspots.md)
+  command ranks nodes by optimization value (runtime self-time, fan-in,
+  call-count, or transitive blast radius), defaulting to measured self time when
+  enriched and degrading gracefully to static fan-in when not.
+- [x] **Optimization agent** — the `/code-graph-optimize` Claude Code command,
+  which proposes one edit and keeps it only if [`verify`](docs/commands/verify.md)
+  (type-check **and** tests) passes (otherwise reverts with `git restore`).
+- [x] **Test verification** — the [`verify`](docs/commands/verify.md) command runs
+  the project's `typecheck` and `test` scripts as one keep/revert gate, so
+  behavior-changing edits are caught, not just type errors. A project with no test
+  script degrades to type-check-only, reported honestly (`behaviorVerified: false`).
+- [x] **Benchmark verification** — the [`benchmark`](docs/commands/benchmark.md)
+  command measures a target node's runtime metric (profile → enrich → cost) over
+  N runs and reports the median + spread, with an advisory baseline→after delta —
+  so an optimization is reported by its *measured* impact (e.g. −57% self-time on
+  `titleCase`) rather than a guess. Advisory by design, distinct from the hard
+  `verify` gate.
+- [x] **Community detection** — the [`cluster`](docs/commands/cluster.md) command
+  runs the Leiden algorithm (CPM) over the weighted coupling graph and attaches a
+  module index onto nodes as `metadata.community`, with the internal-connectedness
+  guarantee Louvain lacks.
 - [ ] **Vector index** — embed per-node summaries for hybrid graph + semantic
   retrieval, so the agent can find candidates by meaning, not just by name.

package/contribs/webview/README.md

@@ -0,0 +1,83 @@
+# WebView
+
+Interactive viewer for the knowledge graph — pan/zoom, color-coded node and
+edge kinds with toggleable filters, symbol search, and a per-node detail panel
+showing every incoming/outgoing edge.
+
+**No server required.** The page (in [web/](web)) is fully static; only the
+Cytoscape.js library comes from a CDN (so you need internet, or vendor the
+file).
+
+## Commands
+
+```bash
+npm run build    # embed ../../.ts_knowledge_graph/graph/*.jsonl into web/js_autogenerated/graph_data.js
+npm start        # serve web/ on http://localhost:4173 (optional)
+npm run open     # open web/index.html directly (file://, macOS)
+```
+
+## Loading data — pick one
+
+**A. Embed the data, then open the page** (works from `file://`, no server):
+
+```bash
+# from the repo root, after `npm run extract -- . --semantic`
+cd contribs/webview
+npm run build
+npm run open
+```
+
+`scripts/build-data.ts` reads `../../.ts_knowledge_graph/graph/{nodes,edges}.jsonl` by
+default; pass a different graph directory as the first argument
+(`npx tsx scripts/build-data.ts /path/to/graph`).
+
+**B. Drag & drop** — open `web/index.html` any way at all and drop
+`.ts_knowledge_graph/graph/nodes.jsonl` + `.ts_knowledge_graph/graph/edges.jsonl` onto the page.
+
+**C. Serve the repo root** — the page then auto-fetches
+`../../../.ts_knowledge_graph/graph/*.jsonl`:
+
+```bash
+# from the repo root
+npx serve        # or: python3 -m http.server
+# open http://localhost:3000/contribs/webview/web/
+```
+
+## Reading the graph
+
+- **Node size** scales with degree (how connected a symbol is).
+- **Edge colors**: red `CALLS`, green/teal type edges (`USES_TYPE`, `RETURNS`,
+  `PARAM_TYPE`), yellow `READS`, violet heritage, gray structure
+  (`CONTAINS`, `IMPORTS`).
+- **Edge width** scales with call-site count — how many times the call / import /
+  read occurs between the two symbols (shown as `×N` in the detail panel). Thick
+  edges are the hot connections.
+- Uncheck noisy kinds (`CONTAINS`, `IMPORTS`) to see the behavioral core;
+  enable **hide isolated nodes** to drop whatever the filter disconnected.
+- The **all** checkbox atop Node kinds / Edge kinds toggles every kind at once —
+  hide all, then re-check just the few you want to isolate (it shows a dash when
+  only some kinds are visible).
+- Click a node to fade everything outside its neighborhood and list its edges
+  in the sidebar — the links navigate the graph.
+- **Fold any sidebar section** by clicking its header (Runtime, Hotspots, Node
+  kinds, Edge kinds, …); the collapsed state is remembered across reloads.
+
+## Runtime hotspots
+
+When the graph has been enriched (`ts-knowledge-graph enrich <profile.cpuprofile>`),
+each measured symbol carries `metadata.runtime` (self-time + sample count). The
+sidebar's **Runtime** panel surfaces it:
+
+- **Coverage line** — how many nodes were measured and the total self-time, so a
+  partial profile reads as partial.
+- **Heat map toggle** — re-encodes the graph by measured self-time: nodes are
+  **sized and heat-coloured** (cool → yellow → red) by how hot they are, instead
+  of by kind/degree. Toggle off to return to the structural view.
+- **Hotspots list** — the top symbols ranked by self-time; click one to focus it.
+- **Only measured nodes** — hides the un-enriched nodes so only the measured
+  subgraph remains, to focus on where the cost actually is.
+- Selecting any node adds a **runtime** block (self-time, samples, source) to the
+  detail panel.
+
+Un-measured nodes render at a neutral, dashed baseline — "no metric" means
+*inlined or not sampled*, not "free".

package/contribs/webview/web/css/style.css

@@ -0,0 +1,310 @@
+/* Dark theme (default). Every colour is a variable so a single `data-theme`
+   attribute on <html> repaints the whole viewer; see [data-theme="light"] below
+   and the matching graph-canvas variables read by js/app.js (cyStyle). */
+:root {
+	color-scheme: dark;
+	--bg: #0f172a;
+	--surface: #111c33;
+	--surface-raised: #1e293b;
+	--surface-hover: #334155;
+	--border: #1e293b;
+	--border-control: #334155;
+	--border-subtle: #475569;
+	--input-bg: #0f172a;
+	--text: #cbd5e1;
+	--heading: #f1f5f9;
+	--muted: #64748b;
+	--muted-strong: #94a3b8;
+	--text-on-control: #e2e8f0;
+	--accent: #4f8cff;
+	--link: #7db2ff;
+	--tooltip-bg: #0b1424;
+	--tooltip-text: #e2e8f0;
+	--overlay-bg: rgba(15, 23, 42, .85);
+	--shadow: 0 4px 14px rgba(0, 0, 0, .45);
+	--on-swatch: #0f172a;
+	--num: #f59e0b;
+	--unmeasured-fill: #243044;
+	--unmeasured-border: #475569;
+	/* Graph canvas colours, read from JS so the graph tracks the theme. */
+	--graph-label: #cbd5e1;
+	--graph-label-bg: #0f172a;
+	--graph-sel-border: #ffffff;
+	--graph-node-border: #334155;
+	--graph-node-border-width: 0;
+}
+
+[data-theme="light"] {
+	color-scheme: light;
+	--bg: #f8fafc;
+	--surface: #f1f5f9;
+	--surface-raised: #e2e8f0;
+	--surface-hover: #cbd5e1;
+	--border: #e2e8f0;
+	--border-control: #cbd5e1;
+	--border-subtle: #94a3b8;
+	--input-bg: #ffffff;
+	--text: #334155;
+	--heading: #0f172a;
+	--muted: #64748b;
+	--muted-strong: #475569;
+	--text-on-control: #1e293b;
+	--accent: #2563eb;
+	--link: #2563eb;
+	--tooltip-bg: #ffffff;
+	--tooltip-text: #1e293b;
+	--overlay-bg: rgba(226, 232, 240, .85);
+	--shadow: 0 4px 14px rgba(15, 23, 42, .18);
+	--on-swatch: #0f172a;
+	--num: #b45309;
+	--unmeasured-fill: #e2e8f0;
+	--unmeasured-border: #94a3b8;
+	--graph-label: #334155;
+	--graph-label-bg: #f8fafc;
+	--graph-sel-border: #0f172a;
+	--graph-node-border: #cbd5e1;
+	--graph-node-border-width: 1;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+	margin: 0;
+	height: 100%;
+	font: 13px/1.45 -apple-system, 'Segoe UI', Roboto, sans-serif;
+	background: var(--bg);
+	color: var(--text);
+}
+
+body { display: flex; }
+
+#sidebar {
+	width: 300px;
+	flex: none;
+	height: 100%;
+	overflow-y: auto;
+	padding: 14px;
+	background: var(--surface);
+	border-right: 1px solid var(--border);
+}
+
+.sidebar-head { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
+#sidebar h1 { font-size: 15px; margin: 0; flex: 1; color: var(--heading); }
+#sidebar h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 6px; }
+#sidebar section { margin-top: 8px; }
+
+.theme-toggle {
+	flex: none;
+	width: 26px;
+	height: 26px;
+	padding: 0;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 14px;
+	line-height: 1;
+	border-radius: 6px;
+	background: var(--surface-raised);
+	color: var(--text-on-control);
+	border: 1px solid var(--border-control);
+	cursor: pointer;
+}
+.theme-toggle:hover { background: var(--surface-hover); }
+
+#sidebar .foldable {
+	display: flex;
+	align-items: center;
+	gap: 7px;
+	line-height: 1;
+	cursor: pointer;
+	user-select: none;
+}
+#sidebar .foldable:hover { color: var(--muted-strong); }
+#sidebar .foldable::before {
+	content: '';
+	flex: none;
+	width: 0;
+	height: 0;
+	border-left: 5px solid currentColor;
+	border-top: 4px solid transparent;
+	border-bottom: 4px solid transparent;
+	transition: transform .12s ease;
+}
+#sidebar .foldable:not(.collapsed)::before { transform: rotate(90deg); }
+#sidebar .foldable.collapsed ~ * { display: none; }
+
+#status { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
+
+#search {
+	width: 100%;
+	padding: 6px 8px;
+	border: 1px solid var(--border-control);
+	border-radius: 6px;
+	background: var(--input-bg);
+	color: var(--text-on-control);
+}
+#search:focus { outline: none; border-color: var(--accent); }
+
+#search-results { margin-top: 4px; }
+#search-results .hit {
+	padding: 3px 6px;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 12px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+#search-results .hit:hover { background: var(--surface-raised); }
+#search-results .hit .loc { color: var(--muted); font-size: 10px; }
+
+.legend label {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 1px 0;
+	cursor: pointer;
+	user-select: none;
+}
+.legend .swatch {
+	width: 10px;
+	height: 10px;
+	border-radius: 3px;
+	flex: none;
+}
+.legend .count { margin-left: auto; color: var(--muted); font-size: 11px; }
+.legend .help-badge {
+	flex: none;
+	width: 13px;
+	height: 13px;
+	border-radius: 50%;
+	border: 1px solid var(--border-subtle);
+	color: var(--muted-strong);
+	font-size: 9px;
+	font-weight: 600;
+	line-height: 11px;
+	text-align: center;
+	user-select: none;
+	opacity: 0.5;
+}
+.legend .help-badge:hover,
+.legend .help-badge:focus {
+	background: var(--surface-hover);
+	color: var(--text-on-control);
+	border-color: var(--muted);
+	outline: none;
+}
+.legend label.master {
+	margin-bottom: 4px;
+	padding-bottom: 4px;
+	border-bottom: 1px solid var(--border);
+	color: var(--muted-strong);
+}
+.legend .swatch.spacer { background: transparent; }
+
+.kind-tooltip {
+	position: fixed;
+	z-index: 1000;
+	max-width: 260px;
+	padding: 6px 9px;
+	border-radius: 6px;
+	background: var(--tooltip-bg);
+	border: 1px solid var(--border-control);
+	color: var(--tooltip-text);
+	font-size: 11px;
+	line-height: 1.4;
+	box-shadow: var(--shadow);
+	pointer-events: none;
+}
+.kind-tooltip[hidden] { display: none; }
+
+.row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
+
+select, button {
+	background: var(--surface-raised);
+	color: var(--text-on-control);
+	border: 1px solid var(--border-control);
+	border-radius: 6px;
+	padding: 4px 8px;
+	font: inherit;
+	cursor: pointer;
+}
+button:hover { background: var(--surface-hover); }
+select { flex: 1; }
+.colour-by label { font-size: 12px; color: var(--muted-strong); white-space: nowrap; }
+
+#details-body { font-size: 12px; }
+#details-body .id { color: var(--muted); font-size: 10px; word-break: break-all; }
+#details-body .kind-tag {
+	display: inline-block;
+	padding: 1px 6px;
+	border-radius: 4px;
+	font-size: 10px;
+	color: var(--on-swatch);
+	font-weight: 600;
+}
+#details-body h3 { font-size: 11px; color: var(--muted); margin: 10px 0 3px; }
+#details-body .edge-row { padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+#details-body .edge-kind { color: var(--muted); font-size: 10px; }
+#details-body .edge-count { color: var(--num); font-size: 10px; font-variant-numeric: tabular-nums; }
+#details-body a { color: var(--link); cursor: pointer; text-decoration: none; }
+#details-body a:hover { text-decoration: underline; }
+#details-body a.file-link { text-decoration: underline; word-break: break-all; }
+#details-body a.file-link::after { content: '↗'; margin-left: 3px; font-size: 9px; opacity: 0.7; }
+
+#runtime.empty .heat-legend,
+#runtime.empty .heat-note,
+#runtime.empty .hotspots-title,
+#runtime.empty #hotspots,
+#runtime.empty label.row { display: none; }
+
+#communities.empty { display: none; }
+
+#coverage { font-size: 11px; color: var(--muted-strong); margin: 2px 0 6px; }
+
+#runtime label.row { font-size: 12px; }
+
+.heat-legend { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; }
+.heat-bar { flex: 1; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #64748b, #fde047, #dc2626); }
+.heat-legend .heat-min, .heat-legend .heat-max { font-size: 10px; color: var(--muted); }
+
+.heat-note { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); }
+.heat-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
+.heat-swatch.unmeasured { background: var(--unmeasured-fill); border: 1px dashed var(--unmeasured-border); }
+
+.hotspots-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 12px 0 4px; }
+#hotspots .hotspot {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 2px 4px;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 12px;
+}
+#hotspots .hotspot:hover { background: var(--surface-raised); }
+.hotspot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hotspot-ms { margin-left: auto; flex: none; color: var(--num); font-size: 11px; font-variant-numeric: tabular-nums; }
+
+#details-body .runtime-block { margin-top: 8px; }
+#details-body .runtime-block .metric { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
+#details-body .runtime-block .metric span { color: var(--muted); }
+
+#cy { flex: 1; height: 100%; }
+
+#dropzone {
+	position: fixed;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 18px;
+	color: var(--text-on-control);
+	background: var(--overlay-bg);
+	border: 3px dashed var(--accent);
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity .15s;
+}
+#dropzone.active { opacity: 1; }
+#dropzone code { color: var(--link); }