Skip to content

Docs visual design: header-band callouts, SVG diagram kit, diagram audit - #950

Merged
blove merged 26 commits into
mainfrom
blove/docs-visual-design-10cec5
Sep 2, 2026
Merged

Docs visual design: header-band callouts, SVG diagram kit, diagram audit#950
blove merged 26 commits into
mainfrom
blove/docs-visual-design-10cec5

Conversation

@blove

@blove blove commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Callout redesign: the docs <Callout> drops the left border + solid mono-letter icon for a header-band card — tone-tinted strip with an outline icon and title, tone via CSS custom properties, WCAG-AA band text, and an sr-only kind prefix so tone reaches screen readers.
  • SVG diagram kit: four RSC-safe primitives (DiagramFrame/DiagramNode/DiagramEdge/DiagramPill) on a dot-grid ground, styled entirely by design-token classes in docs.css, with style-contract guards for the responsive pair.
  • Seven compositions, all attribution-verified against the libs source: StackDiagram (parametrized highlight), AgUiArchitecturePipeline, A2uiMessageFlow, RenderHowItFits, RenderVsA2ui, MiddlewareHowItFits, TelemetryHowItFits.
  • Docs audit: all 5 ascii text-fence diagrams replaced (plus one stale one in the chat intro), every library intro now opens with a ## How it fits diagram, and the old HTML AgUiArchDiagram is fully retired (component, registration, CSS, blog usages).
  • Marketing: new StackDiagramSection (SectionHeader + marketing-scaled StackDiagram) on the homepage, /langgraph, and /ag-ui.

Test Plan

  • nx test website green (485 tests, incl. new callout/primitive/composition specs with geometry + attribution assertions)
  • nx lint website 0 errors (inline-style guard clean)
  • nx build website --configuration=production green
  • Browser-verified (desktop + 375px): callout bands, all seven diagrams (text fit measured via getComputedTextLength), marketing sections, no page-level horizontal scroll

🤖 Generated with Claude Code

@blove
blove enabled auto-merge (squash) September 2, 2026 02:58
@vercel

vercel Bot commented Sep 2, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
threadplane Ready Ready Preview Sep 2, 2026 3:15am UTC

Request Review

blove and others added 25 commits September 1, 2026 19:58
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Adds RenderHowItFits (agent output -> @threadplane/render -> Angular
components pipeline, with pill-labeled edges) and RenderVsA2ui (chat
fanning out to json-render vs A2UI) to the docs diagram kit, and wires
both into the render getting-started intro and the json-render-vs-a2ui
concept page in place of the old plain-text layer diagram.
@blove
blove force-pushed the blove/docs-visual-design-10cec5 branch from 883199d to 19dec6e Compare September 2, 2026 03:00
@github-actions

github-actions Bot commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

Claude finished @blove's task in 0s —— View job


I'll analyze this and get back to you.

The #949 workspace shell re-renders the docs article on hydration; on a
cold CI dev server the computed ::before content reads as empty before
that settles. Same data-hydrated gate #949 added to the control-plane
tests, plus a poll on the computed glyph. Red on main at b7b582e.

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

github-actions Bot commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

Claude finished @blove's task in 0s —— View job


I'll analyze this and get back to you.

@blove
blove merged commit 4bface5 into main Sep 2, 2026
29 checks passed
@blove
blove deleted the blove/docs-visual-design-10cec5 branch September 3, 2026 22:30
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