feat(website): architecture diagram — the UI layer between your users and your agents - #1048
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
blove
marked this pull request as draft
September 7, 2026 20:16
blove
marked this pull request as ready for review
September 7, 2026 20:29
blove
changed the title
Contributor
Contributor
Contributor
Contributor
Contributor
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Three zones (your Angular application, your platform edge, the agent platform) with Threadplane the one highlighted card inside your own zone. Every card links to the docs page that backs its wording; third-party products appear as examples of a role, never as claimed integrations. Geometry and copy are one data module read by the component, a unit spec that pins every rectangle to the 8px grid inside its zone, and an e2e that measures every rendered text run against its card. A hidden 8/40px alignment grid can be rendered for review. Cards whose rows carry their own links (the Threadplane card's capabilities) are groups with a title link, since anchors do not nest. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…users and your agents Scaled back from the three-zone enterprise map at the user's direction: four columns (your users, your Angular application with Threadplane as its UI layer, the two adapters, your agents) and a model-provider strip, on the kit's dot grid. The LangGraph SDK lane is highlighted as first-class with the capabilities the docs reserve for a checkpoint-aware runtime; LangSmith takes the platform card under the LangChain mark, documented in the logo README. Geometry stays one data module read by the component, the grid spec, and the overflow e2e. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…ents, larger type, a stacked phone form The phone renders the same cards as an HTML stack in reading order, driven by the same data module, instead of scrolling the drawing sideways; the SVG is hidden under 768px. Type is one step larger across the diagram for legibility at page scale. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…der the dot texture Every card is down to its title, marks, and one to three short lines; the model strip's caveat is two words. A faint radial gradient sits under the dot pattern so the figure reads as a surface, not a sheet. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…e list Each capability line sits in its own soft band with a left accent bar, white-on-tint inside the first-class LangGraph lane and grey elsewhere, so the lines read as a list rather than loose paragraph text. The phone stack mirrors the same treatment from the same data. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…s in the architecture diagram Measured the geometry and fixed what it found: the adapters-to-agents gap was 48 against 64 elsewhere, the drawing sat 24px off centre (64 left, 40 right), the users arrow was 28px above the two card centres it joins, the LangSmith rows started 12px above the LangGraph rows beside them, and the People card's content floated at the top of a 392px card. Columns are now 64 apart with 48px margins on all four sides, every arrow is 64 long and lands on the centre of the card it enters, the paired cards share their row positions, and the People block is centred where its arrow leaves. The spec asserts each of those, so they cannot drift back. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…rid rules, the phone stack Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
blove
force-pushed
the
blove/architecture-diagram
branch
from
September 8, 2026 01:51
4864fbc to
6f96f65
Compare
Contributor
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
1 participant
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.
Scaled back from the three-zone enterprise map at the user's direction:
four columns (your users, your Angular application with Threadplane as
its UI layer, the two adapters, your agents) and a model-provider strip,
on the kit's dot grid. The LangGraph SDK lane is highlighted as first-class
with the capabilities the docs reserve for a checkpoint-aware runtime;
LangSmith takes the platform card under the LangChain mark, documented in
the logo README. Geometry stays one data module read by the component,
the grid spec, and the overflow e2e.
Spec: docs/superpowers/specs/2026-09-07-enterprise-architecture-diagram-design.md. Verified: website unit suite green (geometry spec 9, component spec 4), lint 0 errors, production build, e2e (architecture 2, homepage spine, stage) green, real-page frames reviewed at 1440, 1440 with the alignment grid, and 390.
Not auto-merged: waiting on the visual sign-off.
🤖 Generated with Claude Code