web: put the viewer's visual language on a token scale

[maliberty]

The web viewer's stylesheet had accreted rather than been designed: a VS Code
palette, eight near-identical button rules, four byte-identical tooltip blocks,
and nineteen rules setting bare monospace. Four commits put it on a token
scale and consolidate what the tokens made redundant. No behaviour changes
beyond the visual ones described below.

Best reviewed commit by commit — each one stands alone.

1. Colours and radii on a token scale

Each theme block defines the palette as scales (--surface-*, --line-*,
--ink-*, --accent-*, --sem-*) and every role name the component rules
already use becomes an alias for a scale step. No role name is added or
removed, so no component rule had to change and a palette edit is now a scale
edit.

• Three deliberate surface elevation steps, cool-biased, replacing four values
  that sat inside 8% lightness of each other.
• A saturated accent. --bg-selected and --accent stay a solid step dark
  enough to carry --fg-white at 4.5:1 in both themes; the row highlights
  that carry --fg-primary are the tints.
• Light mode picked against its own ground rather than derived from dark —
  --bg-hover and --border sharing #d0d0d0 was a symptom of that.
• --ink-3 chosen so --fg-muted clears 4.5:1 on every surface it appears
  over.
• Radii collapse to --radius-xs/sm/md, picked by what the element is.
• color-scheme per theme, so native scrollbars and <select> popups follow
  it, and accent-color so checkboxes follow the accent.

2. Buttons, tooltips and canvas overlays

• Eight button rules — .toolbar-button, .timing-btn, .drc-btn,
  .inspector-btn, .sb-tool, .heatmap-rebuild, .or-modal-btn and a bare
  .modal-dialog button — become .or-btn with size and emphasis variants.
  Eleven buttons had no class at all and were rendering as browser defaults
  (nine in the schematic toolbar, two in the 3D viewer overlay); they join the
  rest.
• Four identical tooltip blocks become .or-tooltip.
• The scale bar, coordinate readout, heat-map legend and pending indicator
  share .or-hud, and the scale bar and coordinate readout merge into one HUD
  instead of two stacked chips.
• A :focus-visible ring — the file had none, so keyboard navigation was
  invisible — a 120ms transition on buttons and list rows, and a
  prefers-reduced-motion block.

3. Type roles and data tables

• --font-mono with a real stack. Bare monospace resolves to Courier on
  several systems.
• Six panels were set entirely in mono, so their toolbars and headers were too
  and they read as log output. Mono is now for values; labels take
  --font-sans. The canvas widgets get both stacks from getThemeColors(),
  so canvas and DOM agree.
• .timing-table and .sb-table drop the border under every cell, headers go
  sans, and the sticky header gets a shadow.
• Numeric columns are right-aligned with tabular figures, declared in the
  column definition rather than inferred at render time.
• Slack cells carry a bar growing from the cell midpoint, scaled by the largest
  |slack| in the table.

4. Canvas frame, panel tabs, status chrome

• The layout canvas gets a hairline, drawn as an overlay: a border would change
  the size Leaflet measures, and an inset shadow would paint under the tile
  panes.
• Golden Layout's active tab gets the accent underline the timing widget
  already uses, and each tab gets its panel's icon.
• The disconnect banner pulsed forever; it settles after three beats. Tile
  requests in flight become a 2px line on the canvas rather than a grey chip.

Things worth a reviewer's attention

Qt parity was the deciding factor twice, against my own initial read. I had
flagged the duplicate colours in clock-tree-widget.js as a collision to fix.
They mirror clockWidget.h:168-174, which deliberately uses Qt::red for both
the root and the leaf register and Qt::darkCyan for both the inverter and the
leaf macro. Same for the charts palette, which transcribes
chartsWidget.cpp:1052-1062. Both palettes are left alone, and the slack bars
reuse those Qt colours so the table reads as the same measure as the charts
panel.

The canvas overlays cannot follow the theme. They sit on --bg-map, which
is black in both themes for Qt parity, so a light-theme HUD was a bright block
on black with unreadable ink. --bg-hud, --border-hud, --fg-hud and
--fg-hud-muted are theme-independent for that reason; the ruler labels and
label handles come off them too. The toast is not on the canvas, so it stays on
the theme.

The tab icons need a re-measure. They widen every tab, and Golden Layout
decides which tabs fit before they exist, so without it the overflowing tabs
overlap the stack's controls instead of moving into the dropdown.
decorateTabIcons returns a count and the caller re-measures only when
something was added, which also keeps that call from looping through the layout
event that triggered it. Header height is a dimensions.headerHeight config
value because GL measures it in JS; a saved layout carries the dimensions it was
saved with, so the restored config is overridden rather than bumping
LAYOUT_VERSION and discarding everyone's panel arrangement.

Two contrast bugs that predate this branch. .fb-entry.fb-selected painted
--bg-selected but inherited --fg-primary, which was 2.6:1 in light mode.
And .gc-invalid marked an invalid field with an outline, which the new focus
ring would have replaced — so a field would stop looking invalid exactly while
being fixed. It is a ring now.

test-status-indicator.js reimplements updateStatus instead of importing
it, so it passes against its own copy regardless of what main.js does. I
synced it, but this is the third commit in a row that needed hand-syncing.
Extracting updateStatus would fix it properly; I left that alone because
main.js builds the whole app at import time.

Not in this branch

index.html loads Leaflet, both Golden Layout themes and netlistsvg from three
CDNs, so on a locked-down network the viewer renders unstyled. Vendoring them is
a robustness fix rather than a design one and belongs in its own PR.

A density toggle is now cheap — the space and radius scales exist — but is not
here.

Verification

695/695 JS tests pass. Every token pair carrying text audited to 4.5:1 or
better in both themes. Rendered in headless Chrome in both themes throughout,
including against a real Golden Layout loaded from its CDN, which is what caught
the border-bottom: none override, the stale tab measurement, and the
box-sizing: content-box !important the header forces on its children.

Not yet run against a real design in a browser: the scale bar reserves 22px of
horizontal padding for its end labels, and how that sits inside the merged HUD
is the one thing a harness cannot tell me.

[gemini-code-assist]

Code Review

This pull request refactors the web UI styling by introducing a unified button system (or-btn), consolidating floating overlays into a shared HUD component (or-hud), adding panel tab icons, and restructuring CSS variables into a two-layer theme system. The review feedback highlights several improvement opportunities: preventing text clipping on non-delete action buttons by conditionally applying the icon class, clearing and syncing the coordinate readout HUD on mouseout to avoid stale data, cleaning up Leaflet map and DOM references on panel destruction to prevent memory leaks, and avoiding premature marking of tabs with data-or-icon before their titles are initialized.

[gemini-code-assist]

Applying the or-btn-icon class unconditionally to all action buttons assumes they will always render as icons. However, if an action is not 'Delete', it renders as text (btn.textContent = name). The or-btn-icon class enforces a fixed square width (width: var(--or-btn-h)), which will cause any text-based action buttons to overflow or be clipped. It is safer to only apply or-btn-icon when the button actually contains an icon.

Suggested change

	const btn = document.createElement('button');
	btn.className = 'inspector-btn inspector-action-btn';
	btn.className = 'or-btn or-btn-icon inspector-action-btn';
	btn.title = name;
	if (name === 'Delete') {
	btn.innerHTML = DELETE_SVG;
	btn.classList.add('inspector-btn-danger');
	btn.classList.add('or-btn-danger-hover');
	} else {
	btn.textContent = name;
	}
	const btn = document.createElement('button');
	btn.className = 'or-btn inspector-action-btn';
	btn.title = name;
	if (name === 'Delete') {
	btn.classList.add('or-btn-icon', 'or-btn-danger-hover');
	btn.innerHTML = DELETE_SVG;
	} else {
	btn.classList.add('or-btn-sm');
	btn.textContent = name;
	}

[gemini-code-assist]

When the mouse leaves the layout viewer, app.lastMouseLatLng is set to null, but the coordBar text content is not cleared, and syncHud() is not called. This means the HUD will permanently display the last hovered coordinates even when the pointer is outside the canvas. Clearing the text content on mouseout and syncing the HUD ensures it hides correctly when inactive.

Suggested change

	app.map.on('mouseout', () => { app.lastMouseLatLng = null; });
	app.map.on('mouseout', () => {
	app.lastMouseLatLng = null;
	coordBar.textContent = '';
	syncHud();
	});

[gemini-code-assist]

Storing references to DOM elements and the Leaflet map instance on the global app object without cleaning them up when the layout panel is closed/destroyed will cause memory leaks. Since Golden Layout panels can be closed and reopened dynamically, we should listen to the container's destroy event to clean up these references and properly destroy the Leaflet map instance.

Suggested change

	const progress = document.createElement('div');
	progress.className = 'or-progress';
	mapDiv.appendChild(progress);
	app.tileProgressEl = progress;
	const progress = document.createElement('div');
	progress.className = 'or-progress';
	mapDiv.appendChild(progress);
	app.tileProgressEl = progress;
	container.on('destroy', () => {
	app.tileProgressEl = null;
	app.heatMapLegendEl = null;
	if (app.map) {
	app.map.remove();
	app.map = null;
	}
	});

[gemini-code-assist]

If decorateTabIcons is called before a tab's title is fully initialized or populated (resulting in an empty string), marking the tab with data-or-icon immediately will permanently prevent it from receiving an icon in subsequent layout updates. We should skip empty titles and only mark the tab as processed once a non-empty title is available.

    for (const tab of root.querySelectorAll('.lm_tab:not([data-or-icon])')) {
        const titleEl = tab.querySelector('.lm_title');
        if (!titleEl) continue;
        const title = titleEl.textContent.trim();
        if (!title) continue;
        // Mark before the lookup, so a title with no icon is not re-examined
        // on every subsequent layout change.
        tab.setAttribute('data-or-icon', '');
        const icon = panelTabIcon(title);
        if (icon) {
            tab.insertBefore(icon, titleEl);
            added++;
        }
    }

[maliberty]

@codex review

[chatgpt-codex-connector]

Codex Review: Didn't find any major issues. 👍

Reviewed commit: 30b6c89f5e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[maliberty]

Thanks — three of the four were real, and one of them was a visible defect. Addressed in 74b26c45.

Descriptor action buttons — fixed, and worse than the comment suggested. request_handler.cpp passes through any action it does not explicitly suppress (kSuppressedActions), and the comment there says as much: "Any new descriptor action not listed here appears automatically." So Change color, Report Path and Highlight children all reach the inspector as text. Forced into a 26px square they did not merely clip, they overlapped into an unreadable smear. Delete keeps .or-btn-icon; the rest take .or-btn-sm and size to their label.

Worth noting the clipping predates this branch — .inspector-btn was a fixed 26×26 too — but this is the commit that gave the buttons variants to choose from, so it is the commit that should choose correctly.

Coordinate readout — fixed, with a guard. Taken, but not quite as suggested. Leaflet raises mouseout for a move onto anything inside the container, including the zoom controls and the HUD the readout itself lives in. Clearing unconditionally would blank the readout whenever the pointer crossed onto a control sitting next to it, which is worse than the staleness. It now clears only when the pointer actually leaves the viewer:

const to = e.originalEvent && e.originalEvent.relatedTarget;
if (to && mapDiv.contains(to)) return;

Verified against a DOM that it holds for internal moves (control, HUD) and clears for a real exit and for a mouseout with no relatedTarget — the pointer leaving the window.

Tab icons — fixed. Good catch. An unpopulated title would have spent the tab's one chance at an icon on a title that could not be matched. Empty titles are skipped so the next layout change can decorate them.

Panel teardown — taken in part. The element references are released on destroy. I checked in Chrome that container.on('destroy') is the event GoldenLayout 2.6 actually fires on close, since hide/show fire on tab switches and would have been the wrong hook.

I have not taken the map.remove() / app.map = null half. About 140 call sites across eleven modules reach app.map, and many are unguarded — app.map.zoomIn() in the View menu (also bound to Z), app.map.fitBounds(...) in the inspector's zoom-to, app.map.getZoom() in the rulers, app.map.getContainer() in the display controls. Nulling it converts a detached-but-harmless map into a dozen ways to throw while the Layout panel is closed, which is a regression traded for a leak that only occurs if someone closes that panel and never reopens it. Guarding those call sites is a lifecycle change and wants its own PR rather than riding along in a styling one. The comment in createLayoutViewer records that reasoning so the next reader does not have to rediscover it.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 74b26c4557

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[gadfort]

@maliberty LGTM, just need to get it to pass the two failures.