docs: restore original colors, add AI SRE to architecture, reorganize + multi-color diagrams - #310
Merged
Merged
Conversation
Reverts the light-palette restyle and sequence-diagram theming introduced in #309, restoring the original diagram design across the user-facing docs (architecture, reliability loop, connectors, status pages, role hierarchy, AI SRE setup, and all sequence diagrams). Keeps only the requested addition, in the original design and palette: the AI SRE engine, the read-only connector layer (Direct Connectors + Private Agents), and the SRE agent workspace in the single-location, multi-location, and README architecture diagrams.
- Apply a consistent sequence-diagram theme matching the architecture diagrams (indigo actors, amber notes/opt labels, violet activations) - Add detail to existing sequence diagrams (alerts, incidents, jobs, playground, monitor) using the documented behavior - Add new sequence diagrams: - Tests: end-to-end test execution lifecycle - Runs: run lifecycle, live updates, cancellation - Status Pages: subscriber notifications on incident changes - Private Agent: outbound-only registration, heartbeat, lease, result
krish-kant
changed the title
- Architecture (single-location, multi-location, README): switch to a left-to-right layout grouped into labelled zones (Edge, App, Data, Execution per region, Connector Layer) so elements spread out instead of clustering in one block - Give distinct components distinct colors (app, connectors, private agents, providers, notifications, sandbox, agent workspace); workers and locations keep a shared color - Sequence diagrams: color-code each participant with a distinct fill (transparent actor backgrounds over colored group boxes) so diagrams use multiple colors like the architecture diagram - Make the AI SRE setup flow a single horizontal line
krish-kant
changed the title
Wide or compact diagrams were being scaled down to fit the content column, making labels hard to read. Render every diagram at its natural size (useMaxWidth: false) and let the container scroll horizontally, and add an Expand/Collapse button that opens the diagram full-screen with an Escape shortcut. Applies to all docs diagrams (architecture and small).
Remove the expand/collapse fullscreen control. Render every diagram at its natural size and let the card scroll horizontally so labels stay readable (previously wide diagrams were scaled down to fit and became hard to read). Small diagrams remain centered.
- Revert the Mermaid component to fit-to-width rendering (no horizontal scrolling, no expand control) so every diagram fits without scrolling - Restore the earlier simple top-to-bottom architecture layout for single-location, multi-location, and README, and add just two blocks: AI SRE Engine (App -> SRE) and Private Agents (SRE -.-> Private), which adds height instead of width
Remove the heavy full-height colored participant blocks. Use a lighter, readable theme instead: light actor headings with colored borders, colored arrows, amber notes/loops, and violet activations, so text stays visible in both light and dark mode. Applies to all sequence diagrams.
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.
Summary
Restores the original (saturated) diagram palette and improves layout/color usage.
Architecture diagrams (single-location, multi-location, README)
Next.js Appshows the AI SRE engine; added Direct Connectors, Private Agents (outbound HTTPS only), and the AI SRE Agent Workspace.Sequence diagrams
boxgroups with transparent actor fills, so multiple components show multiple colors (like the architecture diagram) while keeping the original saturated palette.Other
Verification
npm run lintclean;npm run buildsucceeds.