Skip to content

feat(flow-map): Markdown excerpts, clearer chart and header, theme toggle - #7

Open
benjoox wants to merge 15 commits into
mainfrom
fix/cv-004-cv-005-flow-map-readability
Open

benjoox wants to merge 15 commits into
mainfrom
fix/cv-004-cv-005-flow-map-readability

Conversation

@benjoox

@benjoox benjoox commented Oct 11, 2026 •

Copy link
Copy Markdown
Owner

What changed and why

Generated maps were hard to read in three places. This PR closes four tickets, recorded in docs/backlog.jsonld.

CV-004: Markdown excerpts render as formatted text. Excerpts of .md files were drawn as raw monospaced source, so headings kept their #, tables showed pipes and long lines clipped behind a hidden scroll. The builder now parses the redacted lines into blocks (headings, paragraphs, lists, tables, quotes, rules, fenced code, inline code, emphasis, http(s) links) and the template draws them from text nodes with the real file line numbers in the gutter. Other file types are unchanged. An excerpt that starts inside a fenced block is read as code, using the fence state from the top of the file. Node and file note text is parsed the same way, so a note that carries a heading or a table no longer prints as one run-on paragraph.

CV-005, subtask 1: chart colour.

  • Doc nodes drew as solid black boxes because --c-doc was never defined.
  • Wires and node outlines were 1.2:1 against their lane (1.35:1 in dark). They are now 3.8:1 and 6.3:1, and inactive nodes keep full-contrast text instead of fading.
  • Kind colours repeated severity colours (data and question shared one hex; user and risk, and api and smell, were identical in dark). Kinds now use six hue families plus two neutrals that pass the data-viz palette validator all-pairs in light and dark.
  • Issue cards keep their sentences in text ink and show severity on the icon.

CV-005, subtask 2: header. Larger, heavier title with an accent eyebrow and a clearer subtitle, with no new content.

CV-006: theme toggle. One header button flips between the existing light and dark token sets. It starts from the OS setting, has no auto state and stores nothing. Its label and icon name the theme a click switches to.

CV-007: deep green dark theme. The dark neutrals move from blue-black to a deep green ramp (page #000b03, panel #001b0a, lane #002211) at the same contrast targets: text 15.3:1, secondary text 14.5:1 on the lane, wires 6.3:1, and every kind colour at least 3.6:1 against its lane. The header accent bar is removed. Dark borders are darker (#06361e, about 1.3:1 against the panel) and the disclosure arrows and chart arrowheads are white in dark only. Dark text is white with a very light peach (#ffead0) for secondary text; the reads tag is the only green text.

Validation

  • npm run check: 56 tests pass (25 new). npm run demo is deterministic and docs/demo/index.html is rebuilt.
  • Security: hostile Markdown (<img onerror>, <script>, javascript: and relative links, remote images, HTML in table cells) produced no live elements, no event attributes and no network requests in Chromium.
  • Tests cover a forged doc in flow.json being ignored and redaction running before parsing; both were mutation-checked.
  • Palette, light then dark, all pairs: lightness band, chroma floor and 3:1 contrast pass; worst normal-vision distance 15.9 and 15.1 (floor 15); worst colour-blind distance 8.2 and 8.3 (floor 8). The nearest kind to a severity colour is 9.0 under normal vision (was 0.0). One pair, queue gold against risk orange, is 4.7 apart under colour-blind simulation and also differs by shape and icon.
  • Real-document check: the existing 28-view, 231-node, 216-step research map for remotion-hyperframes-monetization-and-gtm-research-2026-10.md was rebuilt from its own embedded data. The installed builder reproduces that file byte for byte; this PR's builder rendered all 452 excerpts (155 headings, 287 paragraphs, 305 tables, 24 lists) with no leftover markup and no black nodes. A recursive sweep of every view, step and node card (743 tables) found none overflowing their pane. Running it found four bugs, all fixed here: fenced code that starts above the range, table cells breaking inside words, node notes printed as one run-on paragraph, and clipped table columns.
  • Browser checks in Chromium at 1440px light, 1440px dark and 390px dark: no black nodes, no horizontal overflow, no console errors.
  • The bundled example's build.mjs line ranges were re-mapped by text equality after the builder gained lines.

Not verified: Safari and Firefox, and any agent's end-to-end map generation.

  • npm run check passes.
  • Rebuilt the demo with npm run demo.
  • Checked affected viewer interactions: playback, step controls, node selection, details pane, narrow viewport.
  • Reviewed examples and attachments for secrets, private source and attribution.

Closes CV-004, CV-005, CV-006 and CV-007 (backlog entries, not GitHub issues).

🤖 Generated with Claude Code

CV-004 covers rendering Markdown excerpts as formatted text. CV-005 covers
chart colour clarity and header emphasis. Each has a task doc, and both are
linked from the roadmap and the documentation guide.
The builder parses redacted .md excerpt lines into blocks (headings,
paragraphs, lists, tables, quotes, fenced code, inline code, emphasis and
http(s) links) and the template draws them from text nodes with the file
line numbers in the gutter. Raw HTML, images and non-http(s) links stay
inert text, and a doc supplied in flow.json is ignored. Closes CV-004.
Doc nodes drew black because --c-doc was never defined. Wires and node
outlines now meet 3:1 against their lane, inactive nodes keep full-contrast
text, and node kinds use six hue families plus two neutrals that pass the
data-viz palette checks and stay clear of the severity colours. Issue cards
keep their sentences in text ink and show severity on the icon. The header
gets a larger, heavier title and an accent rule. Closes CV-005.
…k as code

An excerpt window can begin after its fence opened, as an issue's two-line
context does inside a code sample. The builder now scans the file above the
range for an open fence, and the page numbers fenced lines with the issue
line highlighted.
Only break a word when it cannot fit its cell, so columns keep their longest
word instead of shrinking and splitting it.
A note that carries headings or a table printed as one run-on paragraph in the
Selected node card. Notes are now redacted and parsed like excerpts, and the
builder rejects a note that is not a string. The skill asks agents to keep
notes short and not to paste source text into them.
Hyphenate table text and tighten cell padding so a four-column table fits the
details pane, and draw a visible scrollbar for the rare table or code line that
still needs one.
The viewer follows the OS setting with no control on the page. CV-006 adds one
header button that toggles between light and dark.
One native button in the page header flips the existing token sets, starting from
the OS setting, with no auto state and no stored preference. Its label and icon
name the theme a click switches to, and it follows an OS change until the first
click. Closes CV-006.
@benjoox benjoox changed the title feat(flow-map): render Markdown excerpts and clarify chart and header feat(flow-map): Markdown excerpts, clearer chart and header, theme toggle Oct 11, 2026
The dark theme is a blue-black and the header has an accent bar that the reader
asked to drop. CV-007 records both changes.
…t bar

The dark neutrals move from blue-black to a deep green ramp that keeps text at
4.5:1, wires and outlines at 3:1 and every kind colour at 3:1 against its lane.
The header loses its left accent bar; the heavier title and accent eyebrow carry
it. Closes CV-007.
Lower the lightness of the page, panel, band, lane and border greens by 0.06
while keeping hue and saturation. Text, wires and kind colours all gain contrast
against the darker surfaces.
Borders in the dark theme drop to about 1.3:1 against the panel, as in the
original dark palette. The disclosure arrows and the chart arrowheads are white
in dark through an --arrow token that light does not define, so light keeps its
colours.
The ink and muted text colours in dark carried a green tint. They are now
neutral white and gray, so the reads tag is the only green text.
Replace the gray secondary text in dark with #ffead0. It keeps 14.5:1 against the
lane and leaves the reads tag as the only green text.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant