Skip to content

#177 — design integration PR-1: chassis CSS (tokens, 5 themes, 4 style packs, density) - #187

Merged
cmbays merged 2 commits into
mainfrom
feature-177-design-chassis-css
Jun 10, 2026
Merged

cmbays merged 2 commits into
mainfrom
feature-177-design-chassis-css

Conversation

@cmbays

@cmbays cmbays commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

Summary

PR-1 of the design integration (epic #176): the Claude Design Phase-1 chassis CSS — semantic token layer, 5 AA-pinned themes (Light / Dark / Tokyo Night / Solarized / Gruvbox), 4 style packs (paper / terminal / swiss / soft), and the density layer — replaces the report template's custom <style> block body. <html> gains data-style="soft" data-difflayout="auto". Pure visual: zero payload change, zero JS change, zero DOM restructuring (the static incremental badge and defined_in relocations wait for PR-2, #178).

Closes #177

Placement decision — first-party asset

The merged CSS lands at templates/report.css (beside the template it styles), embedded via include_str! as asset_embed::REPORT_CSS and interpolated {{ report_css|safe }}.

  • Deliberately NOT under assets/: both tests/assets_manifest.rs and the assets-manifest-gate CI job walk every file under assets/ and demand an upstream pin (version / source URL / SHA-256 / SPDX) — provenance fields a first-party authored file doesn't have. templates/ trips no gate.
  • Integrity gates added alongside each_embedded_asset_carries_its_pinned_version_banner:
    • banner-pin test — asserts the head banner (cute-dbt report chassis CSS v1) AND an end-of-file sentinel, so a truncated copy fails CI (a head-only check would pass on a file cut off mid-rule);
    • comment-balance test — pins the handoff's documented porting bug (§2.1): comment opener/closer counts must balance, and the [hidden]{display:none!important} rule must survive comment-stripping.

AA pins

The handoff's per-theme diff add/remove contrast table is carried into templates/report.css as the comment block headed "AA pins — do not re-brighten". No token color value was altered; every theme keeps its verified ≥ 4.5:1 WCAG-AA ratios on the load-bearing diff add/remove pair (Light 5.02/4.83 · Dark 9.65/7.52 · Tokyo 8.81/6.08 · Solarized 4.62/5.01 · Gruvbox 6.74/4.85).

Porting-bug grep result (*/-inside-comment, handoff §2.1)

Mechanical scan of the merged templates/report.css:

openers /*: 110   closers */: 110     (balanced)
orphan */ in comment-stripped css: 0
[hidden]{display:none!important;} survives comment-stripping: true
url( occurrences: 0   @import occurrences: 0   protocol-relative //: 0

The same checks now run on every cargo test via the comment-balance test.

Intermediate-state verdict (old DOM + new chassis): coherent, no PR-2 absorption needed

The chassis styles some DOM that only arrives with PR-2's engine (settings-panel pickers, code-card headers, split-diff tables, Cytoscape host) — all inert against the current DOM. Two true collisions were reconciled in clearly-marked layers at the bottom of report.css:

  • Permanent reconciliation (shipped contracts the handoff forked before):
    • #157 — .panel-row.is-stacked stays minmax(0,1fr) (the handoff's 1fr would re-introduce the 375px mobile blowout; the existing headless regression test pins it — it passes).
    • #165/#166 — the shipped column-tooltip contract (focusable <button> trigger + CSS bubble on :hover/:focus) is kept, tokenized onto the chassis. The handoff's body-appended .col-tooltip fixed bubble reuses the same class name for different DOM and is deferred to PR-2/PR-3 (carrying it verbatim would restyle the live trigger into a broken fixed-position bubble).
  • PR-1 bridge (expected to be deleted by feature: design integration PR-2 — engine merge (settings panel, unified/split diffs) + port-forward of post-fork behaviors #178): pre-engine diff lines stay block-laid with white-space: pre (the chassis' flex + white-space: normal line rules assume the engine's [gutter][sigil][code] DOM and would collapse SQL/YAML indentation); legacy copy-button clearance on .sql-block; .model-sql section rhythm; the ⚙ text-glyph size on the settings cog.

Verified affordances under the new chassis (headless + visual): Current/Diff + Updated-only/All toggles, hunk folds (Show N unchanged lines rows now GitHub-blue), #145/#161 incremental badge + expect-semantics tooltip in their current static positions, #166 column-header tooltips (focus reveals bubble), DataTables sort/render, Mermaid DAG + fixed Okabe-Ito legend.

Screenshots (intermediate state)

Rendered from the regenerated synthetic examples/diff-showcase-report.html. Hosted on the screenshots-pr-177 hosting-only branch (synthetic data; branch can be deleted after review — asking permission per repo rules).

Light · soft (the shipped default):

light soft top

GitHub-grade YAML diff (Light) — full-bleed tints, sigils, word emphasis, blue fold row, indentation preserved:

yaml diff card

Dark (set via data-theme="dark"; the theme picker UI itself arrives with PR-2):

dark

Tokyo Night:

tokyo

Gates (all run directly — lefthook can silently skip in fresh worktrees)

Gate Result
cargo fmt --all --check clean
cargo clippy --all-targets --locked -- -D warnings exit 0
cargo nextest run 787 passed (re-run post-rebase)
cargo test --test bdd 86 scenarios / 550 steps passed
cargo test --test headless_toggle --locked -- --ignored 29 passed
cargo test --test headless_zero_egress --locked -- --ignored passed
RUSTDOCFLAGS="-D warnings" cargo doc --no-deps --document-private-items --locked clean
cargo deny check ok

Golden / snapshot churn character

3 golden examples + 2 insta snapshots regenerated. Verified with git diff --text -U0: every hunk falls on the <html ...> attr line or inside the custom <style> block; zero cute-dbt-data / application/json payload lines touched in any golden; the chrome insta snapshot's last hunk ends at the old style block's final line. Zero-egress intact: 0 url(, 0 @import, 0 protocol-relative refs in the new CSS; resource-ref lint + headless network-block proof both green; no web fonts (system font stacks only).

🤖 Generated with Claude Code

…SS (#177)

Land Claude Design Phase-1's chassis CSS — the semantic token layer, the
five AA-pinned [data-theme] blocks (Light/Dark/Tokyo/Solarized/Gruvbox),
the four html[data-style] direction packs, the density layer and the
tokenized component rules — replacing the template's custom <style> block
body. <html> gains data-style="soft" data-difflayout="auto". Pure
visual; zero payload/JS change.

Placement: templates/report.css (first-party, beside the template it
styles) embedded via include_str! as asset_embed::REPORT_CSS and
interpolated {{ report_css|safe }}. Deliberately OUTSIDE assets/ — the
provenance gate walks every file under assets/ and would demand an
upstream pin this authored file doesn't have. Banner-pin test (head
banner + end-of-file sentinel) fails CI on a truncated copy; a
comment-balance test pins the handoff's documented porting bug (a star
followed by slash inside a comment body once ate the [hidden] rule).

The merged file carries the handoff's per-theme AA contrast table as the
"AA pins — do not re-brighten" comment block; no token color altered.
Two reconciliations with shipped behavior the handoff forked before:
the cute-dbt#157 minmax(0,1fr) stacked-track fix (a 375px headless
regression test pins it) and the cute-dbt#165/#166 column-tooltip
trigger contract (the handoff's body-appended .col-tooltip bubble waits
for the engine DOM in PR-2/PR-3). A clearly-marked PR-1 bridge layer
keeps the pre-engine diff-line DOM block-laid (whitespace: pre) and the
copy-button clearance until cute-dbt#178 lands the engine.

Regenerated the 3 golden examples + 2 insta snapshots; the deltas are
the html attr line + the style-block body only (zero payload changes).
All 29 headless toggle tests + zero-egress + 787 nextest + 86 BDD
scenarios green.

Closes #177

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request integrates the first-party report chassis CSS (report.css) into the template rendering pipeline. It extracts the previously inline report-specific styles into a separate stylesheet, templates/report.css, which is embedded at compile-time via include_str! and injected into the HTML template. The new stylesheet introduces a semantic token layer, multiple themes (Light, Dark, Tokyo, Solarized, Gruvbox), visual style packs (paper, terminal, swiss, soft), and layout layers. Additionally, unit tests are added to verify the integrity of the embedded CSS (checking for truncation and balanced comments). Since there are no review comments, no feedback is provided.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

@github-actions

github-actions Bot commented Jun 10, 2026 •

Copy link
Copy Markdown
Contributor

📄 Rendered report preview

All golden examples regenerated cleanly.

🟡 Golden examples

Committed to examples/ and byte-identity gated — the canonical reports contributors and consumers browse. Stable across PRs.

Report View Download
diff-showcase-report.html ▶ Open ↗ ⬇ Download
playground-report.html ▶ Open ↗ ⬇ Download
jaffle-shop-report.html ▶ Open ↗ ⬇ Download

🐶 Live dogfood preview

This PR doesn't touch dbt-project/, so there's no live dogfood preview.

▶ Open ↗ opens the report in your browser in one click —
published to this repo's GitHub Pages under /pr-187/.
⬇ Download fetches the same self-contained HTML as a workflow
artifact (auth-gated; works fully offline). Either way the report
makes zero external resource requests.

The Pages preview may take ~1 min to update after this comment
posts. On PRs from forks the Open link is unavailable (read-only
token) — use Download.

Alternative: GitHub CLI
# gh CLI >= 2.63 extracts into ./report-preview-playground/.
gh run download 27288668706 -R breezy-bays-labs/cute-dbt -n report-preview-playground
open report-preview-playground/playground-report.html

Posted by report-preview.yml for 4a618dc527f45d9fae3abf321d39195773e8ed89. Affordance only — never blocks merge.

@coderabbitai

coderabbitai Bot commented Jun 10, 2026

Copy link
Copy Markdown

Warning

Review limit reached

@cmbays, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 16 minutes and 15 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e3ac4744-165f-4aa1-95af-7ceb39721c6f

📥 Commits

Reviewing files that changed from the base of the PR and between 0e19b5d and 4a618dc.

⛔ Files ignored due to path filters (2)
  • tests/snapshots/golden_report__rendered_report_skeleton.snap is excluded by !**/*.snap
  • tests/snapshots/render_integration__rendered_chrome_jaffle_shop.snap is excluded by !**/*.snap
📒 Files selected for processing (7)
  • examples/diff-showcase-report.html
  • examples/jaffle-shop-report.html
  • examples/playground-report.html
  • src/adapters/asset_embed.rs
  • src/adapters/render.rs
  • templates/report.css
  • templates/report.html
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature-177-design-chassis-css

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ghost

ghost commented Jun 10, 2026

Copy link
Copy Markdown

Ready to review this PR? Stage has broken it down into 6 individual chapters for you:

Title
1 Define the first-party report chassis CSS
2 Embed and validate the new CSS asset
3 Wire the chassis CSS into the renderer
4 Refactor report template to use chassis CSS
5 Update example reports with new design
6 Other changes
Open in Stage

Chapters generated by Stage for commit 4a618dc on Jun 10, 2026 3:58pm UTC.

@cmbays
cmbays merged commit fc6e1d4 into main Jun 10, 2026
31 checks passed
@cmbays
cmbays deleted the feature-177-design-chassis-css branch June 10, 2026 16:02
github-actions Bot added a commit that referenced this pull request Jun 10, 2026
cmbays pushed a commit that referenced this pull request Jun 11, 2026
…ecklist + tiered findings + suppressed-count

The render lane of the coverage-intelligence epic (#168): the per-model
Coverage checks panel rendering the #186/#191 engine verdicts in-context.

- Payload (render.rs): FindingPayload wraps the domain Finding (flattened,
  wire keys unchanged) with render-resolved pin_node (DAG anchor: bracketed
  constructs pin the named CTE node, model-level constructs the terminal)
  and sketches (the union check's 'suggested given' evidence lifted into
  copyable blocks). ReportPayload gains check_specs — the offline spec
  catalog (name/tier/instrument/conditions/exclusions/rationale + the
  click-only book_href), keyed by fired check only, serde-skipped when
  empty so findings-free payloads stay byte-stable.
- Surface (report.html/interaction.js/report.css): a self-contained
  .model-findings section per model — three-valued checklist (mark + word,
  never colour-only), labeled tier chips (TOTAL solid / HIGH outlined /
  advisory muted — never blended, no percentages), covered-by attribution,
  evidence rows, evidence pinning (select + smooth-scroll + flash), the
  recommendation with #188-pattern copyable YAML sketches, the inline
  'What is this check?' rationale drawer (fully offline; the book link is
  a plain click-only anchor), and the visible-but-quiet suppressed reveal
  (collapsed count -> rows with reason + source). Token-native on the #187
  chassis; tier-chip tooltips use the #146/#188 bubble contract.
- Dogfood: playground fixture gains unique_key on mart_dq_summary (grain
  UNCOVERED), an inline ignore pragma on dim_payers (suppressed-with-reason),
  and the synthetic-body-mod idiom on fct_clinical_events (union UNCOVERED
  with three given-row sketches) — all three goldens now show the panel,
  jaffle-shop deliberately renders the quiet empty state.
- Tests: 7 render.rs payload units, 2 BDD scenarios (check_specs catalog
  facts), 2 headless guards (panel/checklist/tier distinctness/tooltip/
  sketch+copy/rationale/book-link/pin/both-toggle-views/empty-state;
  suppressed collapsed-count + reason reveal); insta snapshots + goldens
  regenerated intended-only.

Closes #170

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
cmbays added a commit that referenced this pull request Jun 11, 2026
…+ tiered findings + suppressed-count (#194)

* feat(adapters): #170 — report findings surface: per-model coverage checklist + tiered findings + suppressed-count

The render lane of the coverage-intelligence epic (#168): the per-model
Coverage checks panel rendering the #186/#191 engine verdicts in-context.

- Payload (render.rs): FindingPayload wraps the domain Finding (flattened,
  wire keys unchanged) with render-resolved pin_node (DAG anchor: bracketed
  constructs pin the named CTE node, model-level constructs the terminal)
  and sketches (the union check's 'suggested given' evidence lifted into
  copyable blocks). ReportPayload gains check_specs — the offline spec
  catalog (name/tier/instrument/conditions/exclusions/rationale + the
  click-only book_href), keyed by fired check only, serde-skipped when
  empty so findings-free payloads stay byte-stable.
- Surface (report.html/interaction.js/report.css): a self-contained
  .model-findings section per model — three-valued checklist (mark + word,
  never colour-only), labeled tier chips (TOTAL solid / HIGH outlined /
  advisory muted — never blended, no percentages), covered-by attribution,
  evidence rows, evidence pinning (select + smooth-scroll + flash), the
  recommendation with #188-pattern copyable YAML sketches, the inline
  'What is this check?' rationale drawer (fully offline; the book link is
  a plain click-only anchor), and the visible-but-quiet suppressed reveal
  (collapsed count -> rows with reason + source). Token-native on the #187
  chassis; tier-chip tooltips use the #146/#188 bubble contract.
- Dogfood: playground fixture gains unique_key on mart_dq_summary (grain
  UNCOVERED), an inline ignore pragma on dim_payers (suppressed-with-reason),
  and the synthetic-body-mod idiom on fct_clinical_events (union UNCOVERED
  with three given-row sketches) — all three goldens now show the panel,
  jaffle-shop deliberately renders the quiet empty state.
- Tests: 7 render.rs payload units, 2 BDD scenarios (check_specs catalog
  facts), 2 headless guards (panel/checklist/tier distinctness/tooltip/
  sketch+copy/rationale/book-link/pin/both-toggle-views/empty-state;
  suppressed collapsed-count + reason reveal); insta snapshots + goldens
  regenerated intended-only.

Closes #170

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(adapters): #170 review dispositions — in-place Cytoscape pin, flash-timer reset, own-property tally guard

- finding-pin under the Cytoscape engine now emits a tap on the live cy
  node (the exact bound click path: in-place lineage classes +
  __cuteSelectNode) instead of renderDag() — honoring the #180
  no-rebuild-per-click contract (CodeRabbit); headless guard added
  (same cy instance + .sel class after a pin).
- rapid re-pins clear the pending flash timer so an old timeout can't
  cut the new animation short (gemini).
- verdict tally uses an own-property guard (gemini).
- goldens + chrome snapshot regenerated.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(adapters): #170 post-rebase hardening — tag-like payload escaping + qualified-construct pins

Rebased onto main with the #173 join check pair (#195), whose spec
prose ('WHERE <right>.<key> IS NULL') now rides the payload through the
#170 check_specs catalog:

- payload_json_for_html_script escapes EVERY tag-opening '<' shape
  ('</', '<!', '<?', '<letter') to \u003c — inert in browsers either
  way, but raw '<right>' read as markup to non-HTML5 tag scanners (the
  tl-based BDD payload extractors choked); bare '< ' / '<digit'
  (compiled-SQL comparisons) stay raw, preserving the documented
  contract.
- resolve_pin_node understands the #173 qualified construct form
  (left_join[<consumer>:<right>]) and pins the consumer CTE; unit test
  added.
- the #195 suggested-given BDD steps read the sketch from the finding's
  'sketches' array (the #170 lift moved it out of evidence — their
  sketches get the copy-button affordance for free); the step now also
  pins that the entry is never duplicated back into evidence.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
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.

feature: design integration PR-1 — chassis CSS (tokens + 5 themes + 4 style packs + density)

1 participant