Skip to content

Redesign the docs homepage as an interactive protocol walkthrough - #524

Merged
Connor Peet (connor4312) merged 4 commits into
mainfrom
docs/notebook-homepage
Oct 26, 2026
Merged

Connor Peet (connor4312) merged 4 commits into
mainfrom
docs/notebook-homepage

Conversation

@connor4312

Copy link
Copy Markdown
Member

Replaces the docs homepage with a scroll-driven walkthrough that shows why AHP exists. Simulated devices (desktop, tablet and phone) stay in sync through one host, driven by the canonical reducers.

What's on the page

  • Cover: "A protocol for synchronizing agent state across UIs", plus a short description. The first chapter peeks above the fold.
  • §01 actions + state = ui: a client dispatches chat/turnStarted, shows it as pending, and the host's broadcast keeps every client in sync.
  • §02 Reconnect and replay: the phone approves a tool call and drops offline while the host keeps going. When it reconnects, it receives the actions it missed and catches up.
  • §03 Built to be extended: automations, terminals and capability negotiation, shown as examples of optional channels.
  • §04 Shovel-ready in your language: links to the client libraries and the language-independent test suites.

Each step has an expandable message list with syntax-highlighted JSON, a short explanation of the protocol detail it shows, and a state diff where relevant. Everything runs locally in the browser; there's no network access and no model.

Layout and theme

  • Wide screens: the device stage stays pinned to the left while the notes scroll on the right.
  • Narrow screens: the stage pins to the bottom of the viewport, and the intro is centred above it.
  • Theme: the homepage and the rest of the docs share light/dark theme tokens. The contrast of every text colour is checked by a test.
  • Reduced motion: when it's enabled, devices swap in place instead of animating.

Tests

  • scripts/homepage-notebook*.test.ts checks that the scripted model converges through the real reducers, that navigation is deterministic, and that devices don't overlap the host rail.
  • scripts/site-theme.test.ts checks palette contrast and that components only use shared colour tokens.

No protocol surface changes, so there's no changelog fragment.

Introduce the selected seven-chapter device walkthrough with reducer-backed chat, reconnect, automation, terminal and capability examples. Share accessible theme tokens across the notebook and documentation, and cover model behavior and palette contrast with focused tests.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Drop the masthead, cover eyebrow, tagline and stage navigation.
- Restructure the story into four chapters: actions + state = ui,
  reconnect and replay, an extensibility showcase (automations,
  terminals, capabilities) and client libraries.
- Rewrite copy to focus on why AHP exists rather than sequence
  bookkeeping, and add short explainers to each message list.
- Center the cover with a peek of the first chapter; hide the stage
  caption on the cover; pin the stage to the bottom on mobile.
- Syntax-highlight wire JSON and quiet the collapsed message toggles.
- Update the reconciliation guide's homepage description.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Remove the stage caption/inset footer and chapter kickers, shorten
in-device labels, restyle device frames and the host rail for both
themes, keep newest chat content visible on small screens, and drop
the unused HomeWalkthrough component.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@connor4312
Connor Peet (connor4312) merged commit eda87d8 into main Oct 26, 2026
9 checks passed
@connor4312
Connor Peet (connor4312) deleted the docs/notebook-homepage branch October 26, 2026 19:58
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.

2 participants