feat(design-system): add the canonical Attention Trends report template - #650
Open
ssdavidai wants to merge 4 commits into
Open
feat(design-system): add the canonical Attention Trends report template#650ssdavidai wants to merge 4 commits into
ssdavidai wants to merge 4 commits into
Conversation
`packages/web` had no type gate before merge. Its unit suites run under `tsx --test`, which strips types instead of checking them, so a file that cannot compile still reports every test green. The only real check was `wasp build` inside build-web.yml — and that triggers on push to main. So the failure shape was: PR green → merge → main red → no image published. That happened three times in one afternoon on #584 alone, each costing a build-and-deploy cycle and leaving main unable to ship. typecheck-web.yml runs the same `wasp build` on pull requests touching packages/web. Bare `tsc --noEmit` is not a substitute — it cannot resolve the generated `wasp/*` modules without codegen, which is why ci-check skips web in the first place. The wasp version is pinned to build-web.yml's; drift there would mean gating against a different compiler than the one that publishes the image. This duplicates work build-web.yml does later. That is the point: a few minutes of runner time per web PR is cheaper than a red main. ci-check.yml's header said the web app "is type-checked by build-web.yml", which read as a deliberate arrangement rather than a hole. Corrected. NOTE: this reports but does not block until `typecheck-web` is added to the branch-protection required checks for main.
The /attention surfaces were built from CSS variables plus invention. The
variables were right; the design was not. This lands the actual system so any
clone can build in-brand, and so a reviewer can point at a file instead of an
opinion.
Snapshot of the Claude Design project (id in design-system/IMPORTED.md), not a
live sync. `readme.md` is the authoritative document.
What is here: the buildable core — styles.css and the five token files
(colors, typography, spacing, surfaces, fonts), the canonical Attention
Statement template, SKILL.md, and the two older _brandpack rule files.
What is NOT here, deliberately:
* the source project's uploads/ — client PDFs, a competitive-landscape
report and personal travel documents. This repository is PUBLIC.
* screenshots/ and references/ — large PNGs, no build value.
* the React components, the 17 engraved SVG icons, brand marks and textures.
Wanted, but held back to keep this pass reviewable. readme.md currently
describes assets this directory does not contain — IMPORTED.md says so.
The attention-statement template shipped with a real client company name in its
standfirst; replaced with a fictional one. Any future import must repeat that
check — the design project is private, this repository is not.
_brandpack/ contradicts readme.md on ASCII art (rule 4 and the empty-state
rule both endorse it; readme.md forbids it). readme.md wins as the newer,
authoritative layer. Both conflicting files now carry an inline pointer to
IMPORTED.md so nobody follows the dead rule by accident.
CLAUDE.md gains §19 with the non-negotiables — one brass accent, radius 0,
hairlines not cards, serif-says/mono-counts, no emoji, no ASCII — and the note
that packages/web/src/client/Main.css remains the source of truth for the
running app if the two ever drift.
lanes.json: design-system/** joins lane V so the tree is committable at all.
The in-app statement is dark, not the light A4 client-facing sheet. This is the
canonical dark treatment and the direct reference for rebuilding /attention.
It pins down what the earlier hand-built page only approximated: the 76px brass
display NAR figure, the double rule under the header, the three-bar waterfall at
104px with the mess floating rather than sitting on the baseline, section 02's
display-italic row labels against mono figures, and the ledger's group/item/total
hierarchy at 8px/11px/9.5px.
Scrubbed: the principal's full name from the <title>. The ledger line items are
generic ("Client invoice rebuilt, margin-locked") and stay — they show the register
the ledger copy should be written in.
The trends tab I built was a chart dump with labels. This is the actual design: four panels, each led by a full sentence in display serif with the figure set in brass italic — "15.3 hours came back this week, for the 6.5 you put in." It also replaces the jargon with English at every label: GIVEN BACK / YOUR TIME rather than NAR / engaged, HOURS IN THE BIGGEST TASKS rather than XL bucket, NOT YET ASSIGNED rather than unallocated, FINISHED rather than delivered. The inline script is part of the design, not scaffolding. It computes the headline from the data and encodes the honesty rules in the sentence itself: "your time wasn't measured" when engaged is null, "too little of your time was logged this week to price it" under an hour, a gap in the ratio series drawn as a faint dashed segment rather than interpolated. That is a better answer than the footnotes I had been bolting on underneath charts. No personal or client strings in the file; checked before committing.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The trends tab I built was a chart dump with labels. This is the actual design.
Four panels, each led by a full sentence in display serif with the figure set in
brass italic:
And English instead of jargon at every label — GIVEN BACK / YOUR TIME rather than
NAR / engaged, HOURS IN THE BIGGEST TASKS rather than XL bucket, NOT YET ASSIGNED
rather than unallocated, FINISHED rather than delivered.
The script is part of the design
The inline
<script>computes each headline from a JSON feed, and the honestyrules live in the sentence rather than in a footnote underneath a chart:
nullinratio_seriesThat is a better answer than the footnotes I had been bolting under charts. It also
handles the low-engagement trap I special-cased by hand: a ratio built on near-zero
engagement does not get de-emphasised, it does not get stated at all.
Recorded in
IMPORTED.mdso an implementer treats the script as spec, not scaffolding.Smoke evidence