Replace composability demo with agent anatomy walkthrough - #249
Open
TommyBez wants to merge 22 commits into
Open
Replace composability demo with agent anatomy walkthrough#249TommyBez wants to merge 22 commits into
TommyBez wants to merge 22 commits into
Conversation
…arrative Take vercel.com/eve as a strong structural reference while keeping the existing Geist/Vercel design system untouched. - Hero: pair the thesis with a concrete artifact — a readable agent directory (MEMORY.md, tools/, channels/, schedule.cron, budget.json). - New signature section "An agent is a folder you can read": a sticky file-tree walkthrough that advances on scroll through 8 numbered steps (memory, model, tools, channels, sub-agents, heartbeat, skills, budget), each with a snippet and the platform primitive that backs it. Replaces the composable workbench. - New "Built on primitives" grid surfacing the open-source / self-host stack (Next.js, Workflow, Sandbox, AI Gateway, Neon, Upstash, Better Auth, Chat SDK). - Reframe the chat showcase as the live payoff of the directory. - Reuse the existing scroll-pinning + reveal motion primitives; share the desktop-viewport hook; carry the design-lint waivers to the new section. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThe landing page is reorganized around new anatomy, bindings, primitives, and production sections. The hero now shows an artifact tab view, while the navigation, footer, heartbeat content, and page order are updated and the composable workbench modules are removed. ChangesLanding page refresh
Sequence Diagram(s)Scroll-synced anatomy sequenceDiagram
participant Window
participant LandingAgentAnatomy
participant StepBlock
participant CodePanel
Window->>LandingAgentAnatomy: scrollY changes
LandingAgentAnatomy->>LandingAgentAnatomy: compute active step from refs
LandingAgentAnatomy->>StepBlock: render active and inactive states
LandingAgentAnatomy->>CodePanel: render the current step code
Artifact tab switch sequenceDiagram
participant Visitor
participant HeroArtifact
participant AgentFileTree
participant CodeLines
Visitor->>HeroArtifact: click a tab
HeroArtifact->>HeroArtifact: update the active view
alt For you
HeroArtifact->>AgentFileTree: render the tree view
else For the agent
HeroArtifact->>CodeLines: render the AGENTS.md excerpt
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
…ucture Restructure the page itself — not just one section — to mirror the information architecture of vercel.com/eve, keeping the Geist design system untouched. New top-to-bottom flow: 1. Hero — positioning + concrete directory artifact 2. The mental model — "An agent is a directory." (new concept beat: readable memory / bound capabilities / its own heartbeat) 3. The capability tour — sticky directory walkthrough 4. Built on primitives — the open-source / self-host stack 5. Production agents — new readiness-cards beat (observability, durable execution, human-in-the-loop, budgets, traced sub-agents, compounding memory), then proven live by the chat showcase and the autonomous-day heartbeat 6. Final CTA — dedicated, extracted out of the heartbeat closer 7. Footer — expanded into a multi-column sitemap Also: nav gains section anchors; heartbeat closer is reframed as a production proof (its buried CTA removed); anatomy header retitled so it no longer duplicates the new concept statement. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
…s beat Replace invented artifacts with what actually exists in the runtime, and push the eve-shaped structure further. Truthfulness (no invented references): - Anatomy walks the real sandbox: the nine canonical markdown files (AGENTS/IDENTITY/SOUL/USER/MEMORY/TASKS/CALENDAR/GOALS/DREAMS) + logs/, with real ownership (you author AGENTS/IDENTITY/SOUL; the agent writes the rest) and snippets that match each file's documented conventions. - Drop the fabricated agent.config.ts / schedule.cron / budget.json files and the fake delegate() API. - Concept facets now reference only real files. - Chat showcase uses real file tools (grepFiles/readFile/writeFile), a real model id (openai/gpt-5.4-mini), the real Slack channel, and the Resend connector — no more slack.search_threads / gmail.* / cal.* / claude-*. - Heartbeat day-in-the-life uses real event kinds (heartbeat, Slack channel, sandbox file writes, sub-agent, Resend, dreaming); drop the fake `outname watch` CLI line. - Production cards corrected to real capabilities (agent events, durable Workflows, step limits, USD budgets, sub-agent tools, dreaming). New "What you bind to it" beat: model (AI Gateway/LLM Gateway/OpenRouter), heartbeat, dreaming, budget, channels, tools (GitHub/Cal.com/Resend/…), sub-agents, and Agent Skills — every value drawn from the codebase. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
Push the layout much closer to vercel.com/eve while keeping the design system and the real-product grounding. - Hero is now two-column like eve: headline + positioning line + a real self-host terminal (git clone / pnpm dev:app) + CTAs on the left, and a "For you / For the agent" toggle on the right that flips the artifact between the sandbox file tree and the raw AGENTS.md the agent reads. - "An agent is a directory" merges the old concept beat: a directory overview (file tree + numbered 01–09 index) followed by eve's signature alternating walkthrough — each canonical file is a row whose text and markdown code block swap sides, with an ownership badge and the real runtime convention as a tag. - Replace the sticky-pinned anatomy with the alternating rows; drop the now-unused concept, pinned, stacked, and viewport-hook modules. - Nav/footer anchors updated for the merged section. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/shared/marketing/components/landing/landing-chat-showcase.tsx (1)
220-279: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winMake the digest scenario match the trace it renders.
This copy says the run writes the digest and sends it via Resend, but the actual tool sequence now only shows writes to
DREAMS.mdandlogs/2026-05-12.md. In a “live agent” walkthrough, that mismatch makes the transcript read like it skipped steps.Either add explicit digest/send tool parts back, or trim the narrative so it only claims the two file writes that are actually shown.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/shared/marketing/components/landing/landing-chat-showcase.tsx` around lines 220 - 279, The digest scenario narrative in landing-chat-showcase is out of sync with the rendered tool trace, since it claims the run sends via Resend while the visible parts only show writes to DREAMS.md and the daily log. Update the Weekly digest example in landing-chat-showcase to either restore explicit digest/send tool parts in the digest-assistant message sequence or revise the surrounding copy so it only describes the actions actually represented by the dynamic-tool entries and final assistant text.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/shared/marketing/components/landing/hero-artifact.tsx`:
- Around line 32-74: The view switcher in HeroArtifact is using tab semantics
without the required panel association, so the current
`role="tablist"`/`role="tab"` setup in `HeroArtifact` is incomplete. Either
implement the full tabs pattern by adding matching `id`, `aria-controls`,
`aria-labelledby`, and `role="tabpanel"` wiring between the tab buttons and the
content region, plus keyboard arrow navigation for the tabs, or simplify the
component by removing the tab roles and keeping plain toggle buttons. Use the
existing `view`, `setView`, and `views` logic to locate and update both the
button group and the content block.
In `@packages/shared/marketing/components/landing/landing-heartbeat-closer.tsx`:
- Around line 102-105: The kindLabel mapping in landing-heartbeat-closer.tsx is
incomplete, so HeartbeatKind values like slack and subagent resolve to undefined
and render empty badges. Update the kindLabel Record<HeartbeatKind, string> used
by the landing heartbeat closer component to include every union member,
specifically adding labels for slack and subagent alongside the existing
dreaming, file, heartbeat, and resend entries, so entry.kind always maps to a
display string.
In `@packages/shared/marketing/components/landing/landing-hero-demo.tsx`:
- Around line 17-21: The terminal snippet in terminalLines uses an invalid git
clone target, so update the clone command to a real HTTPS or SSH repository URL
that can be run as written; keep the rest of the demo steps unchanged and make
the fix in landing-hero-demo.tsx where terminalLines is defined.
---
Outside diff comments:
In `@packages/shared/marketing/components/landing/landing-chat-showcase.tsx`:
- Around line 220-279: The digest scenario narrative in landing-chat-showcase is
out of sync with the rendered tool trace, since it claims the run sends via
Resend while the visible parts only show writes to DREAMS.md and the daily log.
Update the Weekly digest example in landing-chat-showcase to either restore
explicit digest/send tool parts in the digest-assistant message sequence or
revise the surrounding copy so it only describes the actions actually
represented by the dynamic-tool entries and final assistant text.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 31df5541-4506-49e6-8b18-b4c969b9ebea
📒 Files selected for processing (35)
packages/shared/doctor.config.jsonpackages/shared/marketing/components/landing-home-page.tsxpackages/shared/marketing/components/landing/agent-anatomy/agent-file-tree.tsxpackages/shared/marketing/components/landing/agent-anatomy/anatomy-step-detail.tsxpackages/shared/marketing/components/landing/agent-anatomy/constants.tspackages/shared/marketing/components/landing/agent-anatomy/landing-agent-anatomy.tsxpackages/shared/marketing/components/landing/composable-workbench/agent-shell-card.tsxpackages/shared/marketing/components/landing/composable-workbench/assembly-visual.tsxpackages/shared/marketing/components/landing/composable-workbench/caption-rail.tsxpackages/shared/marketing/components/landing/composable-workbench/composability-mobile-story.tsxpackages/shared/marketing/components/landing/composable-workbench/composability-pinned.tsxpackages/shared/marketing/components/landing/composable-workbench/composability-stacked.tsxpackages/shared/marketing/components/landing/composable-workbench/constants.tspackages/shared/marketing/components/landing/composable-workbench/flying-chip.tsxpackages/shared/marketing/components/landing/composable-workbench/landing-composable-workbench.tsxpackages/shared/marketing/components/landing/composable-workbench/mobile-stage-card.tsxpackages/shared/marketing/components/landing/composable-workbench/mobile-stage-flight.tsxpackages/shared/marketing/components/landing/composable-workbench/use-element-size.tspackages/shared/marketing/components/landing/composable-workbench/use-is-desktop-viewport.tspackages/shared/marketing/components/landing/composable-workbench/use-mobile-stage-active-index.tspackages/shared/marketing/components/landing/composable-workbench/utils.tspackages/shared/marketing/components/landing/hero-artifact.tsxpackages/shared/marketing/components/landing/landing-bindings.tsxpackages/shared/marketing/components/landing/landing-chat-showcase.tsxpackages/shared/marketing/components/landing/landing-final-cta.tsxpackages/shared/marketing/components/landing/landing-footer.tsxpackages/shared/marketing/components/landing/landing-heartbeat-closer.tsxpackages/shared/marketing/components/landing/landing-hero-demo.tsxpackages/shared/marketing/components/landing/landing-nav.tsxpackages/shared/marketing/components/landing/landing-primitives.tsxpackages/shared/marketing/components/landing/landing-production-intro.tsxpackages/shared/marketing/data/agent-anatomy.tspackages/shared/marketing/data/composability-demo.tspackages/shared/marketing/data/heartbeat-demo.tspackages/shared/marketing/data/primitives.ts
💤 Files with no reviewable changes (16)
- packages/shared/marketing/components/landing/composable-workbench/utils.ts
- packages/shared/marketing/data/composability-demo.ts
- packages/shared/marketing/components/landing/composable-workbench/agent-shell-card.tsx
- packages/shared/marketing/components/landing/composable-workbench/landing-composable-workbench.tsx
- packages/shared/marketing/components/landing/composable-workbench/use-is-desktop-viewport.ts
- packages/shared/marketing/components/landing/composable-workbench/composability-pinned.tsx
- packages/shared/marketing/components/landing/composable-workbench/mobile-stage-flight.tsx
- packages/shared/marketing/components/landing/composable-workbench/use-element-size.ts
- packages/shared/marketing/components/landing/composable-workbench/composability-mobile-story.tsx
- packages/shared/marketing/components/landing/composable-workbench/flying-chip.tsx
- packages/shared/marketing/components/landing/composable-workbench/mobile-stage-card.tsx
- packages/shared/marketing/components/landing/composable-workbench/use-mobile-stage-active-index.ts
- packages/shared/marketing/components/landing/composable-workbench/constants.ts
- packages/shared/marketing/components/landing/composable-workbench/assembly-visual.tsx
- packages/shared/marketing/components/landing/composable-workbench/composability-stacked.tsx
- packages/shared/marketing/components/landing/composable-workbench/caption-rail.tsx
…ives - Production is now a single section with eve's stacked full-width cards: each pairs a text header (number + title + blurb) with a live visual. Card 01 embeds the chat showcase, card 02 the autonomous-day heartbeat log, card 03 the guardrail grid (observability, durable execution, step limits, budgets, sub-agents, dreaming). Chat showcase and heartbeat are refactored into headless panels (ChatShowcasePanel / HeartbeatPanel) and the old standalone sections + production-intro are removed. - Primitives switches from a 4-up grid to eve's two-column rows (number + icon + name + meta | description), followed by a real channels & connectors chip row (Slack, in-app chat, GitHub, Cal.com, Resend, …) drawn from the channel types and connection registry. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
…ile explorer The alternating full-width rows looked bad: short 2–4 line markdown snippets floating in huge half-empty cells, repeated nine times, stretching the page to ~9700px. Replace it with a single-screen, app-like file explorer that mirrors the real agent-files UI: a clickable sandbox tree on the left and a file viewer on the right that crossfades between files (auto-cycling until you click). Same real files and content, far denser and calmer. Page height drops to ~7100px. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
Raise detail quality toward eve. Replace the flat gray code boxes with a proper CodeWindow: dark surface, window chrome (traffic-light dots + filename tab + optional label), line numbers, and light markdown syntax highlighting (headers, additions in brand, muted citations). Used in the hero "for the agent" view and the file explorer. The hero command block now types itself out character by character with a blinking cursor (respects reduced motion). Drop the old AnatomyCodeBlock; simplify the anatomy auto-cycle to a timer ref. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
packages/shared/marketing/components/landing/landing-primitives.tsx (1)
134-142: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winExtract the featured-pill cutoff into a named constant.
index < 2hides why the first two integrations get different styling. A named constant makes the intent obvious and keeps this presentation rule easier to change later.As per coding guidelines, "Use meaningful variable names instead of magic numbers; extract constants with descriptive names."
Proposed refactor
const integrations = [ 'in-app chat', 'Slack', 'GitHub', @@ 'Vercel', 'Context7', ] as const + +const FEATURED_INTEGRATION_COUNT = 2 @@ - index < 2 + index < FEATURED_INTEGRATION_COUNT ? 'bg-foreground text-background' : 'bg-background text-muted-foreground'🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/shared/marketing/components/landing/landing-primitives.tsx` around lines 134 - 142, The featured-pill styling in the integrations list uses a hardcoded cutoff in the landing-primitives component, which hides the intent of the first two items being styled differently. In the integrations.map render inside landing-primitives.tsx, extract the `index < 2` threshold into a descriptive named constant and use that constant in the conditional so the rule is easy to read and adjust later.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@packages/shared/marketing/components/landing/agent-anatomy/agent-file-tree.tsx`:
- Around line 72-80: The clickable row in agent-file-tree.tsx only indicates the
active file visually, so the current selection is not exposed to assistive tech.
Update the button rendered in the node.stepId && onSelectStep branch to include
a selected/current-state accessibility attribute for the active row, such as
aria-current when active, or apply appropriate listbox/tab semantics if that
better matches the component behavior. Use the existing active flag and
rowClasses logic in AgentFileTree to keep the visual and accessible state in
sync.
In
`@packages/shared/marketing/components/landing/agent-anatomy/landing-agent-anatomy.tsx`:
- Around line 92-115: The auto-rotating viewer in landing-agent-anatomy.tsx
currently only stops on reduced-motion or when a file is clicked, so add an
explicit pause/stop control or pause-on-hover/focus behavior for the interval
managed by useEffect and handleSelect. Update the active rotation logic so users
can intentionally pause/resume the cycling, and make the control accessible with
semantic HTML and appropriate ARIA attributes. Keep the existing
timerRef/setInterval cleanup behavior in sync with the new pause state so
rotation can be reliably stopped and restarted.
In `@packages/shared/marketing/components/landing/hero-terminal.tsx`:
- Around line 16-25: The typing state in HeroTerminal is only initialized once,
so it can become stale when props change. Update the HeroTerminal component’s
count state in response to shouldReduceMotion and text/lines changes, likely
with a syncing effect that resets count to the full length when reduced motion
is enabled and resets/restarts typing when a new text payload arrives. Keep the
existing useEffect timer logic, but ensure the count state is rederived whenever
those props change.
In `@packages/shared/marketing/components/landing/landing-chat-showcase.tsx`:
- Around line 608-631: The scenario selector in landing-chat-showcase.tsx only
indicates the active item through styling, so assistive tech cannot detect the
selected state. Update the Button used in the scenario list to include an ARIA
state attribute such as aria-pressed, using the activeScenario.id ===
scenario.id check so the active scenario is announced consistently while keeping
the existing label content unchanged.
---
Nitpick comments:
In `@packages/shared/marketing/components/landing/landing-primitives.tsx`:
- Around line 134-142: The featured-pill styling in the integrations list uses a
hardcoded cutoff in the landing-primitives component, which hides the intent of
the first two items being styled differently. In the integrations.map render
inside landing-primitives.tsx, extract the `index < 2` threshold into a
descriptive named constant and use that constant in the conditional so the rule
is easy to read and adjust later.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: f9552432-b16c-4047-9ecf-d3935c88ef03
📒 Files selected for processing (12)
packages/shared/marketing/components/landing-home-page.tsxpackages/shared/marketing/components/landing/agent-anatomy/agent-file-tree.tsxpackages/shared/marketing/components/landing/agent-anatomy/landing-agent-anatomy.tsxpackages/shared/marketing/components/landing/code-window.tsxpackages/shared/marketing/components/landing/hero-artifact.tsxpackages/shared/marketing/components/landing/hero-terminal.tsxpackages/shared/marketing/components/landing/landing-chat-showcase.tsxpackages/shared/marketing/components/landing/landing-heartbeat-closer.tsxpackages/shared/marketing/components/landing/landing-hero-demo.tsxpackages/shared/marketing/components/landing/landing-primitives.tsxpackages/shared/marketing/components/landing/landing-production.tsxpackages/shared/marketing/components/landing/production-card.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/shared/marketing/components/landing/hero-artifact.tsx
- packages/shared/marketing/components/landing/landing-hero-demo.tsx
Comment on lines
+72
to
+80
| {node.stepId && onSelectStep ? ( | ||
| <button | ||
| className={rowClasses(active, true)} | ||
| onClick={() => onSelectStep(node.stepId as AnatomyStepId)} | ||
| style={{ paddingLeft }} | ||
| type="button" | ||
| > | ||
| {inner} | ||
| </button> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Expose the selected row to assistive tech.
These buttons drive the active detail pane, but the current selection is only styled visually. Add a selected/current-state attribute here (for example aria-current on the active row, or full tab/listbox semantics) so screen-reader users can tell which file is open.
As per coding guidelines, **/*.{jsx,tsx}: "Use semantic HTML and ARIA attributes for accessibility".
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@packages/shared/marketing/components/landing/agent-anatomy/agent-file-tree.tsx`
around lines 72 - 80, The clickable row in agent-file-tree.tsx only indicates
the active file visually, so the current selection is not exposed to assistive
tech. Update the button rendered in the node.stepId && onSelectStep branch to
include a selected/current-state accessibility attribute for the active row,
such as aria-current when active, or apply appropriate listbox/tab semantics if
that better matches the component behavior. Use the existing active flag and
rowClasses logic in AgentFileTree to keep the visual and accessible state in
sync.
Source: Coding guidelines
After capturing the actual vercel.com/eve page (curl the SSR HTML + real CSS, serve locally, screenshot) I could finally match it instead of guessing. - Walkthrough is now eve's signature: a tall left column of nine numbered steps that dim until active and brighten on scroll, paired with a sticky light "file browser" code panel on the right (breadcrumb, highlighted file row with ownership tag, line-numbered markdown). Replaces the click explorer and the dark code windows. - Hero matches eve: text-tab "For you / For the agent" toggle (not boxed buttons), a light inline command pill with a copy affordance (not a dark terminal box), bigger headline, more generous spacing. - New shared light CodeLines renderer; drop the dark CodeWindow and the typed HeroTerminal. Light micro-interactions (hover, per-card stagger) on the bindings, primitives, and production cards. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
- The hero "For the agent" panel showed a 7-line excerpt in a tall card. Expand it to the full AGENTS.md body (manual + conventions + user instructions) so it fills the panel instead of floating in empty space. - Production columns had inconsistent structure — different mock heights left the three labels misaligned. Split it like eve: one shared visual panel of three equal-height mock cells, then a separate aligned row of label + description per column, so the text lines up across all three. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
Final polish pass on the eve-inspired landing: - Walkthrough: last step no longer reserves 32vh, removing the dead scroll gap after step 09; code panels only enforce min-height on lg, so mobile stacks compactly. - Mobile: section padding trimmed from py-20 to py-14 across the anatomy, bindings, primitives, and production sections. - Hero: left column is top-aligned with the artifact and gains an "Open source · MIT licensed · bring your own keys" footnote so it balances the file-tree height. - Production: sandboxed-compute rows drop their per-row border and adopt the same label + thin-divider rhythm as the durable mock, so all three panels read as one visual family. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
Content audit pass — every product name, status, and label now matches the actual runtime, not an approximation: - Rename "Vercel Chat SDK" to "Chat SDK". The repo depends on the `chat` / `@chat-adapter/slack` packages and refers to them as "Chat SDK" throughout; the "Vercel" qualifier was unverified. - Production durable mock used a fake status "done". The real agent-event vocabulary is queued/starting/running/completed/…, so the checkpointed phases now read "completed", matching the compute mock beside them. - The hero file tree marks USER.md as "shared" (a distinct gray dot), but its legend only explained "you author" and "agent writes". Added the missing "shared" entry so the legend matches the data and the three-owner model the anatomy section already teaches. Verified the rest against the codebase and left it unchanged: the nine canonical sandbox files, heartbeat range (5 min–daily, default 30), dreaming cadence, budget periods, the 12-connector registry, the inference providers, and the foundation stack are all accurate. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
Narrative/redundancy audit follow-up. The three middle sections (Bindings, Built-on, Production) were circling the same four concepts, sometimes verbatim. Fixes: - Differentiate Production from Built-on. Production no longer restates the runtime/sandbox/connector list; it now shows the three things you only get in production: Durable execution (a crash resumes mid-step), Observable by default (the Events log — type, status, duration), and Bounded spend (USD budgets + per-run step limit). New BudgetMock replaces the connector chip-cloud, which already lived in Built-on. Sub-headline reframed to "durability, observability, governance". - Unify terminology on outname's own vocabulary, not eve's: "surfaces" -> "channels" (the real module), "connectors" -> "connections" (the /connections page), "Agent Skills" -> "Skills" (the Skills tab), and the observability copy now says "Events" (the Events tab) instead of an invented label. - Thin the repetition: "bring your own keys" appeared four times; it now stays only in the hero footnote and the Built-on intro. The verbatim "checkpointed and resumable" / "persistent isolated filesystem" lines no longer appear in both Built-on and Production. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
Connections, channels, and inference providers now show their logos instead of plain text chips, so the integration surface is scannable at a glance. - New BrandGlyph component resolves a brand name to its monochrome Simple Icon (rendered in currentColor so it stays inside the monochrome + red system — never the brand's own color). The 12 available marks cover GitHub, Cal.com, Resend, PostHog, X, Supabase, v0, Vercel, OpenRouter, Next.js, Upstash, and Better Auth. - Brands Simple Icons doesn't ship (Slack — pulled for trademark — plus Firecrawl, Parallel, Typefully, Context7) and the conceptual ones (LLM Gateway, Neon, Chat SDK) fall back to a clean two-letter monogram in the same square; in-app chat uses a Lucide chat glyph. - Wired into Built-on (every product row, the Channels and Connections chip clouds) and into the Bindings Model and Tools cards. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
…ations Replaces the remaining monogram fallbacks with faithful logos: - Neon now uses the PostgreSQL elephant (Simple Icons), since Neon is Postgres. - Slack, Firecrawl, Parallel, Typefully, and Context7 — none shipped by Simple Icons — get hand-built marks sourced from each project's official assets (svgl.app and brand kits), reduced to a single monochrome path set rendered in currentColor so they stay inside the monochrome + red system. Context7 keeps its rounded badge with the C7 knocked out so it reads at chip size. Only LLM Gateway and Chat SDK remain two-letter monograms — neither is a real brand with an iconic mark. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/shared/marketing/components/landing/brand-glyph.tsx`:
- Around line 103-107: The icon rendering branch in brand-glyph.tsx is missing
the same decorative accessibility treatment as the MONOGRAMS path, which can
cause duplicate announcements like “Slack Slack”. Update the Icon return path in
the brand glyph component so it is hidden from assistive tech as decorative,
keeping it consistent with the existing aria-hidden handling used for monograms.
Use the brandKey, ICONS/LUCIDE lookup, and Icon render branch to locate the
change.
In `@packages/shared/marketing/components/landing/landing-production.tsx`:
- Around line 107-117: The event rows in landing-production currently
communicate state only through the colored dot, so add accessible text for
event.status in the row rendering. Update the markup in the event item UI to
include either visible status text or an sr-only label/aria-label on the status
indicator (or its containing row) that exposes completed/running/queued, while
keeping the existing cn/statusTone mapping intact. Use semantic HTML where
possible and ensure the unique event.status value is announced by assistive
tech.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6d758ed0-ff7e-484f-b21a-8cb7feb2e8ab
📒 Files selected for processing (6)
packages/shared/marketing/components/landing/brand-glyph.tsxpackages/shared/marketing/components/landing/brand-icons.tsxpackages/shared/marketing/components/landing/landing-bindings.tsxpackages/shared/marketing/components/landing/landing-primitives.tsxpackages/shared/marketing/components/landing/landing-production.tsxpackages/shared/marketing/data/primitives.ts
✅ Files skipped from review due to trivial changes (1)
- packages/shared/marketing/data/primitives.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/shared/marketing/components/landing/landing-bindings.tsx
- packages/shared/marketing/components/landing/landing-primitives.tsx
Comment on lines
+103
to
+107
| const key = brandKey(name) | ||
| const Icon = ICONS[key] ?? LUCIDE[key] | ||
|
|
||
| if (Icon) { | ||
| return <Icon className={cn('shrink-0', className)} /> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Hide the icon branch from assistive tech too.
MONOGRAMS already render with aria-hidden, but the icon path does not, so bindings/primitives can be announced as duplicate labels like “Slack Slack”. Make the icon branch decorative as well to keep both rendering paths consistent.
Suggested fix
if (Icon) {
- return <Icon className={cn('shrink-0', className)} />
+ return (
+ <span aria-hidden>
+ <Icon className={cn('shrink-0', className)} />
+ </span>
+ )
}As per coding guidelines, use semantic HTML and ARIA attributes for accessibility; the current bindings/primitives callers already render the brand name beside the glyph.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const key = brandKey(name) | |
| const Icon = ICONS[key] ?? LUCIDE[key] | |
| if (Icon) { | |
| return <Icon className={cn('shrink-0', className)} /> | |
| const key = brandKey(name) | |
| const Icon = ICONS[key] ?? LUCIDE[key] | |
| if (Icon) { | |
| return ( | |
| <span aria-hidden> | |
| <Icon className={cn('shrink-0', className)} /> | |
| </span> | |
| ) | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/shared/marketing/components/landing/brand-glyph.tsx` around lines
103 - 107, The icon rendering branch in brand-glyph.tsx is missing the same
decorative accessibility treatment as the MONOGRAMS path, which can cause
duplicate announcements like “Slack Slack”. Update the Icon return path in the
brand glyph component so it is hidden from assistive tech as decorative, keeping
it consistent with the existing aria-hidden handling used for monograms. Use the
brandKey, ICONS/LUCIDE lookup, and Icon render branch to locate the change.
Source: Coding guidelines
Comment on lines
+107
to
+117
| <div className="flex items-center justify-between gap-3 font-mono text-[11px] tracking-normal"> | ||
| <span className="flex min-w-0 items-center gap-2"> | ||
| <span | ||
| className={cn( | ||
| 'size-2 shrink-0 rounded-full', | ||
| statusTone[event.status] | ||
| )} | ||
| /> | ||
| <span className="truncate text-foreground">{event.id}</span> | ||
| </span> | ||
| <span className="shrink-0 text-muted-foreground">{event.meta}</span> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Expose event status as text, not only color.
Each row’s state lives only in the colored dot, so assistive tech never gets completed / running / queued. Add visible status text or at least an sr-only label/aria-label that includes event.status.
Suggested fix
<span className="flex min-w-0 items-center gap-2">
<span
className={cn(
'size-2 shrink-0 rounded-full',
statusTone[event.status]
)}
/>
<span className="truncate text-foreground">{event.id}</span>
+ <span className="sr-only">{event.status}</span>
</span>As per coding guidelines, use semantic HTML and ARIA attributes for accessibility.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <div className="flex items-center justify-between gap-3 font-mono text-[11px] tracking-normal"> | |
| <span className="flex min-w-0 items-center gap-2"> | |
| <span | |
| className={cn( | |
| 'size-2 shrink-0 rounded-full', | |
| statusTone[event.status] | |
| )} | |
| /> | |
| <span className="truncate text-foreground">{event.id}</span> | |
| </span> | |
| <span className="shrink-0 text-muted-foreground">{event.meta}</span> | |
| <div className="flex items-center justify-between gap-3 font-mono text-[11px] tracking-normal"> | |
| <span className="flex min-w-0 items-center gap-2"> | |
| <span | |
| className={cn( | |
| 'size-2 shrink-0 rounded-full', | |
| statusTone[event.status] | |
| )} | |
| /> | |
| <span className="truncate text-foreground">{event.id}</span> | |
| <span className="sr-only">{event.status}</span> | |
| </span> | |
| <span className="shrink-0 text-muted-foreground">{event.meta}</span> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/shared/marketing/components/landing/landing-production.tsx` around
lines 107 - 117, The event rows in landing-production currently communicate
state only through the colored dot, so add accessible text for event.status in
the row rendering. Update the markup in the event item UI to include either
visible status text or an sr-only label/aria-label on the status indicator (or
its containing row) that exposes completed/running/queued, while keeping the
existing cn/statusTone mapping intact. Use semantic HTML where possible and
ensure the unique event.status value is announced by assistive tech.
Source: Coding guidelines
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
2 participants
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
This PR replaces the composability demo section with a new agent anatomy walkthrough that grounds agents as concrete, readable directory structures. The new section highlights each core capability (memory, model, tools, channels, subagents, heartbeat, skills, budget) as a file or folder node in an agent's filesystem, paired with code snippets and the platform primitives that power each feature.
Key changes:
agent-anatomy.tsdata file defining the agent directory tree structure and 8-step walkthroughprimitives.tsdata file for the "built on primitives" grid sectionagent-anatomy/component directory with:anatomy-pinned.tsx- Desktop scroll-driven walkthrough with sticky file treeanatomy-stacked.tsx- Mobile/reduced-motion stacked card layoutagent-file-tree.tsx- Reusable file tree visualizationanatomy-step-detail.tsx- Step content with code block and metadataconstants.ts- Icon mappings for each anatomy steplanding-primitives.tsxcomponent for the platform primitives gridcomposable-workbench/directory (composability demo components)use-is-desktop-viewport.tshook to shared landing utilitiesThe new anatomy section uses the same scroll-driven interaction pattern as the previous demo but reframes the narrative around agent structure and capabilities rather than assembly/composition.
Validation
pnpm checkpassesRelease notes
https://claude.ai/code/session_01PtmdimwWXKdRL7vhL4EcV3
Summary by CodeRabbit