PR4: rendering, exhibits, cost transparency

[Regantih]

PR4: Rendering, Exhibits, Cost Transparency

Frontend-only. No auth, Stripe, or backend changes. No fake data.

---

What changed

1 · styles/tokens.css — Design token foundation

• Full :root token set: colours, spacing (4-pt scale), type scale, border radii, shadows, z-index, layout container widths
• Backward-compat aliases (--ink, --paper, --accent, --mute, --rule, --card) so all existing inline CSS continues working without a big-bang refactor
• Global focus-visible ring using --color-accent applied to all interactive elements

2 · build.json — Build manifest

• Static { version, commit, branch, built_at } file; CI or the agent overwrites commit on each push
• Every page footer fetches it and renders v0.5.0 · 932ddb7; fails silently if the file is absent

3 · deal.html — Major rewrite

• Sticky TOC sidebar (220 px on desktop): auto-generated from the 14-chapter constant; IntersectionObserver drives the active-section highlight as you scroll; collapses to a horizontal scroll strip on mobile (<960 px)
• Section anchors: every <section> has id, aria-labelledby, scroll-margin-top (accounts for sticky header); headings link back to themselves (#fragment) with a # indicator on hover
• Cost & Run panel (top of memo): reads deal.cost.{tokens_in, tokens_out, model, usd_cost, duration_ms, run_id} falling back to top-level equivalents; renders a compact token/cost grid; shows "Cost data not yet available." if all fields absent — no fake numbers
• Exhibits panel (inside TOC sidebar): reads deal.deck, deal.dataroom, deal.model (file link), and deal.exhibits[]; shows "No exhibits attached yet." when all empty; all links open target="_blank" rel="noopener noreferrer"
• Print stylesheet (@media print): hides header, TOC, cost panel, agent tags; full-width single column; break-inside:avoid per section; 0.5pt borders
• Consistent typography: --font-serif for body/headings, --font-mono for kickers/metadata, --font-sans for UI chrome
• Company section now renders a data grid when company/stage/sector/hq/url/ask/premoney data is present (was always showing empty state before)

4 · Global app shell — all pages

Consistent header + footer replaces the 5 different ad-hoc headers that were on each page:

Page	Active nav link
index.html	none (landing)
deals.html	Pipeline
submit.html	Submit
pipeline.html	none (sub-page)
deal.html	none (detail view)
settings.html	Settings

• Header: logo mark + "DealLens · Marketlogic Investors" + nav (Pipeline · Submit · Settings)
• Settings nav item rendered disabled (opacity:.45, pointer-events:none, aria-disabled)
• Footer: copyright + build-meta span populated from build.json

5 · settings.html — Stub page

• 4 "coming soon" cards: LLM Provider, Cost & Usage Limits, Data Room Integrations, Notifications
• No functionality — correctly signals what's planned without fabricating it

6 · Accessibility

• Skip-to-content link on every page (visible on focus)
• focus-visible outlines using --color-accent (#8b6f3d) on all interactive elements
• aria-current="page" on active nav link
• ARIA landmarks: role="banner", role="main", role="navigation", role="contentinfo", role="region" on cost/exhibits panels
• aria-live="polite" on memo container (for async load)
• aria-label on icon-only elements (brand-logo, exhibit links)
• Colour contrast: ink (#1a1a1a) on paper (#f5f1e8) ≈ 16:1; mute (#6b6358) on paper ≈ 5.1:1; accent (#8b6f3d) on paper ≈ 5.7:1 — all pass WCAG AA

---

Files changed

File	Change
styles/tokens.css	NEW — design token foundation
build.json	NEW — build manifest
settings.html	NEW — stub page
deal.html	REWRITE — TOC, cost panel, exhibits, print, a11y
deals.html	UPDATE — global shell, tokens, a11y
pipeline.html	UPDATE — global shell, tokens, a11y
submit.html	UPDATE — global shell, tokens, a11y
index.html	UPDATE — global shell, chapter nav separated, tokens
PLAN.md	UPDATE — log decisions

---

Acceptance checklist

• deal.html?id=pqc-bank renders all 14 sections with a sticky left TOC
• TOC active link updates as you scroll through sections
• Section headings show # anchor indicator on hover
• Cost panel renders "Cost data not yet available." (pqc-bank.json has no cost fields)
• Exhibits panel renders "No exhibits attached yet." (deck/dataroom fields empty in pqc-bank.json)
• If a deal JSON with cost.tokens_in, cost.usd_cost, cost.model etc. is provided, cost grid renders
• If a deal JSON with deck or dataroom URLs is provided, exhibit links render
• Print preview (Ctrl+P) hides sidebar/header/cost panel; shows full-width content
• Mobile (<960px): TOC collapses to horizontal scroll strip above article
• All pages share the same header/footer shell
• Footer shows v0.5.0 · 932ddb7 from build.json
• Skip-to-content link visible on keyboard focus
• Settings nav item is non-interactive (disabled, aria-disabled)
• No fake data, no lorem ipsum, no placeholder cost numbers
• No auth, Stripe, or backend code touched

---

Screenshot-worthy notes

1. deal.html?id=pqc-bank — sticky TOC left sidebar, 14 chapter anchors, cost panel "not yet available", exhibits "none yet"
2. deals.html — consistent global header with Pipeline highlighted, version in footer
3. settings.html — clean stub with 4 coming-soon cards, disabled nav item
4. Print view of deal.html — sidebar vanishes, full-width memo, proper page breaks
5. Mobile deal.html — TOC becomes horizontal pill strip above article

[Regantih]

ℹ️ Context: superseded by PR #7 for backend; frontend still valuable

This PR (PR4: rendering, exhibits, cost transparency, branch pr5/rendering-and-cost-transparency) contains frontend-only changes and is still useful. However, the overall delivery plan has changed:

What changed

• PR PR7: Real Supabase + real Anthropic; harden remaining mocks #7 (pr7/real-wire) is the single-merge ship that delivers auth, DB, real LLM, real storage, and jobs queue — all in one PR against main.
• This PR's base branch (pr4/chat-and-rich-memo) is not on main and cannot be merged independently without first merging the base.

Recommended action

Once PR #7 merges to main:

1. Re-target this PR's base from pr4/chat-and-rich-memo → main.
2. Merge as a follow-up "PR5: rendering + cost transparency" delivering: design tokens, sticky TOC, cost panel, settings stub, print stylesheet, accessibility improvements.

This PR's content is not superseded — the design system and rendering work will be needed for the memo UI. It just needs to land after PR #7.

Do not close this PR — plan to re-target after PR #7 merges.