Apex hero: animated pseudo-agent publish demo (in-DOM)#572
Merged
Conversation
Turn the static home transcript into a button-triggered animation: an Execute button under the copyable prompt streams a realistic ephemeral publish run line-by-line (data-driven latency beats after each agent action), a circular replay control in the toolbar, click-to-copy on both the prompt text and a toolbar Copy prompt button, and a cursor-following "click to copy" hint that flips sides near the terminal edge so it never spills out. Progressive-enhancement and reduced-motion safe; all reveal state is plain apex.css + data-demo selectors (never JS-added Tailwind). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Rewrite EXAMPLE_PROMPT so the memory hook degrades gracefully: a memory-equipped agent (Claude Code, Codex, ChatGPT, etc.) tailors the report to the user's work, a cold agent keeps it general. Either way the ask is one HTML report. Realign the transcript beats and bump the funnel variant to hero_agent_session_v4_conditional_memory. Move the labeled "Copy prompt" button from the head's top-right into the footer bottom-left as the primary call to action, with a white default label (foreground, hover->accent) instead of the dim subtle tone. The head now carries just the demo-session label and the replay control. Lift the closing comment line from text-faint to text-subtle for readability against the dark terminal. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Reshape the pseudo-agent transcript to the arc a real coding-agent session actually follows: narrate intent, then act. Swap the reasoning bullet to Claude Code's ⏺ glyph and add a collapsed tool-call kind (⏺ call + ⎿ result + faint expand hint) for the docs fetch and memory read. Add a Codex-style read-back verify beat after publish so the agent confirms the published page matches what it built before handing back the link. Reconcile the ephemeral output block with the real CLI format (publish-format.ts): add the Claim line. Group beats visually: top margin on the beat-starting kinds (⏺/tool/cmd/ success) so each thought and its output read as one group instead of a flat list, via data-kind selectors in apex.css. Render-test contracts unchanged (clipboard prompt, /al/ + /a/ link, t-gesture wire, no em dashes, §11 bans). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…rmat comment The armed (pre-Execute) demo state showed an intermittent vertical scrollbar and a horizontal one. Two causes on the overflow:auto t-body: - Horizontal: overflow-x-auto reacted to the w-full prompt button and the absolutely-positioned cursor tooltip overflowing right. Switch to overflow-x-clip (terminal text never needs to scroll sideways). - Vertical: the click-to-copy tooltip's fallback position (top:100%) placed the at-rest, invisible tip below the prompt button's bottom edge, extending the scrollable content height and tripping the bar before any hover (and flickering as the cursor rewrote --tip-y). Anchor the fallback inside the button (top:0); the cursor-follow on hover is unchanged. Also bump the body min-height to 136px and correct the TRANSCRIPT comment that overstated the CLI-output match as "byte-for-byte" (it follows the real publish-format.ts labels/order with the Claim copy trimmed for the demo). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…-height Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughAdds a staged pseudo-agent demo to the apex marketing page. The ChangesStaged Agent Demo
Sequence Diagram(s)sequenceDiagram
participant User
participant TranscriptDemo
participant DemoController
participant StepElements
participant CSS
User->>TranscriptDemo: views page (data-demo="armed")
Note over CSS: .t-run visible, run lines hidden
User->>TranscriptDemo: clicks Execute
TranscriptDemo->>DemoController: handleExecute()
DemoController->>CSS: data-demo="playing"
loop each TranscriptLine (data-wait scaled delay)
DemoController->>StepElements: add is-played + is-active
DemoController->>TranscriptDemo: scroll .t-body to bottom
Note over CSS: t-line-in animation, t-caret blink
end
DemoController->>CSS: data-demo="done"
Note over CSS: .t-replay visible
User->>TranscriptDemo: clicks Replay
DemoController->>StepElements: clear is-played/is-active
DemoController->>CSS: data-demo="armed"
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
First-pass review
Risk: medium
Decision: needs human review
Ticket triage
- Intended change (AP-270): Embed a ~15s real screen capture of publish → open → live-update on the apex hero, with poster fallback, no animation theatrics, and render tests asserting a media element.
- Scope match: Partial at best. This PR delivers a different artifact: an in-DOM pseudo-agent transcript animation with Execute/Replay controls. The PR description is explicit that AP-270 acceptance criteria (real capture, media/poster, no animation) are intentionally not met. The ticket was labeled
ready-for-humanfor recording work; this is a deliberate product-direction pivot that needs Isaac/human sign-off, not just a code pass.
Review findings
Blocking (for automation approval):
- Ticket / brand alignment: AP-270 AC and
docs/marketing-brand-guide.md(§9: design budget on identifiers, not hero animation; §3: refuse theatrics) both point away from this approach. The PR acknowledges the exception; that is a human product decision, not something first-pass automation can approve. - CI:
Validatewas still pending at review time — cannot confirm the full gate is green from this run.
Non-blocking:
- Reduced-motion docs vs code: Comments/PR text say reduced-motion “skips arming,” but
client.tsalways setsdata-demo="armed". Users withprefers-reduced-motionstill see only the prompt + Execute until click (settle()skips stagger, which is good). Consider either skipping arming under reduced-motion or updating the docs; the CSS@media (prefers-reduced-motion)block does not overridedisplay: none. - Funnel attribution:
data-claim-prompt-variantmoved off the inline prompt copy button to the footer “Copy prompt” only — inline prompt copies no longer emitprompt_copiedevents. Fine if footer is the sole attributed surface; worth confirming. - Stale comment:
copy.tsstill says “Nothing in it animates.” - Demo staleness: Hardcoded
Expires 2026-06-19will age out of the transcript.
What looks good:
- Progressive enhancement is sound: full transcript in prerendered HTML; animation gated behind
data-demo+ JS. - Scope is confined to
apps/apex— no auth, secrets, CSP, or deploy-surface changes. - Existing render-test contracts (clipboard targets,
/al/+/a/link,t-gesture, §11 bans, single inline script) appear preserved. - Scrollbar/overflow fixes (
overflow-x-clip, tooltip anchoring) are sensible.
Merge checklist
| Check | Status |
|---|---|
| Ticket linked | ✅ AP-270 |
| Scope matches ticket | ❌ Different deliverable; acknowledged |
| Checks green | ⏳ Validate pending |
| Tests/docs appropriate | |
| No blocking findings | ❌ Product-direction mismatch |
| No high-risk areas | ✅ Code risk is low; decision risk is medium |
| Merge-safe | ❌ Needs human approval of approach |
Final comment
Needs human review. Code quality and apex-only risk look fine for a marketing enhancement, but this PR closes AP-270 via an alternative that contradicts the ticket’s written acceptance criteria and brand-guide guidance on hero animation. Please confirm the pseudo-agent demo is the intended resolution of AP-270 (and update the ticket/brand docs if so) before merge. After sign-off, the reduced-motion arming/doc mismatch is the main follow-up worth a quick fix.
Sent by Cursor Automation: First Pass PR Reviewer
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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 `@apps/apex/src/client.ts`:
- Around line 333-339: The shell element's data-demo attribute is always set to
"armed" regardless of the reduceMotion flag, which causes the transcript to
collapse for reduced-motion users. Modify the setAttribute call to conditionally
set data-demo based on the reduceMotion value: when reduceMotion is true, set it
to a value that keeps the transcript fully revealed (instead of "armed"), and
only use "armed" when reduceMotion is false to maintain the current behavior for
users without reduced-motion preferences.
In `@apps/apex/src/copy.ts`:
- Line 187: Replace the hardcoded expiry date "2026-06-19" in the demo
transcript output on line 187 with a stable placeholder or dynamically generated
value that will remain valid over time. Rather than using a specific future date
that will eventually become outdated, use a generic demo value such as
"2099-12-31" or another approach that clearly indicates this is a demo and won't
become stale after the specified date.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: d083aa15-047a-4d81-806c-dd26a70b292b
📒 Files selected for processing (5)
apps/apex/src/client.tsapps/apex/src/components/TranscriptDemo.tsxapps/apex/src/copy.tsapps/apex/src/pages/HomePage.tsxapps/apex/src/styles/apex.css
Address automated review (CodeRabbit + Cursor) on PR #572. - Reduced-motion: previously the controller always armed the shell (data-demo="armed"), which the CSS uses to collapse every line after the prompt until Execute is clicked. The reduced-motion CSS forces opacity but does not override that display:none, so reduced-motion users saw only the prompt + Execute, not the static transcript. Now we return early under reduced-motion and never arm, leaving the full transcript visible (the same baseline no-JS visitors get). Drops the now-dead settle() path. - Demo expiry: replace the hardcoded "2026-06-19" with a relative "in 24 hours" that stays truthful to the ephemeral TTL and never ages out. - Drop the stale "Nothing in it animates" comment. Issue: AP-270 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
Author
|
Addressed the actionable review findings in
Separately, removing the read-back "verify" beat from the transcript (it implied reading a remote/local file in a way that does not make sense for the demo) — incoming in a follow-up commit. |
The "Read(art_8KQ2WSDIEGO7XR/index.html) ... ✓ matches" beat implied the agent re-reads its own just-published artifact by id to confirm the upload, which does not make sense for the demo (it reads as fetching the remote artifact, and a real agent already has the local file it built). Cut it; the run now goes straight from the publish output to the handoff link. Issue: AP-270 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Note We couldn't fetch the incremental changes for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer. |
…ory) call
Same class of issue as the dropped verify beat: no real agent reads memory from a
file at ~/.agent/memory (Claude Code uses project memory/CLAUDE.md, ChatGPT memory
is not a local file, etc.), so asserting a Read(...) tool call of that path rings
false to the savvy visitor. Make it a plain reasoning line ("From what I know about
your work: ...") instead, which is honest: agents genuinely reason from context they
already hold. Conditional-memory framing is unchanged. Also fix the stale header
comment that still described the removed read-back verify step.
Issue: AP-270
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
agent-paste PR preview resources were cleaned up. The shared Preview GitHub Environment is retained for future preview deploys. |
This was referenced Jun 18, 2026
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
Turns the apex home hero's static publish transcript into a live, button-triggered animated pseudo-agent demo so the above-the-fold "feat of strength" reads like a real coding-agent session. A visitor clicks Execute and watches a generic agent read the agent-paste docs, check what it knows about the user, publish with
--ephemeral, verify the read-back, and hand back a no-login link, then is driven to copy the prompt and run it in their own agent.This realizes the goal of AP-270 (a hero demo / proof moment above the fold) via a different, deliberate approach than the issue's written plan: an in-DOM CSS+JS animation rather than a recorded screen capture. A real recording was explicitly ruled out as too expensive and not worth standing up; the pseudo-agent demo is cheap, on-brand, and breaks the no-animation guideline on purpose (to be revisited in the brand guide if it lands well). AP-270's acceptance criteria (real capture, no animation, media element + poster) are intentionally not met here.
Changes
copy.ts,TranscriptDemo.tsx): new line kinds modeled on a real Claude Code / Codex feed (reasonwith the ⏺ glyph, a collapsedtoolcall with a ⎿ result gutter, pluscmd/output/success/result/comment). The arc narrates intent before acting, reads docs + memory, runs one real publish, and verifies before handing back the link.wait(the real-world latency before it appears); the JS driver inclient.tsreveals lines one by one with a blinking caret.apps/cli/src/publish-format.tslabels/order (Published / Link / Expires / Upload / Claim).apex.css): top margin on beat-starting kinds so a thought and its output read as one group.overflow-x-clipon the body and a tooltip fallback anchored inside the prompt button kill an intermittent vertical scrollbar and a horizontal one in the armed (pre-Execute) state.data-demoattribute;prefers-reduced-motionboth skips arming and force-reveals all lines. No-JS visitors and crawlers see the full transcript.Risk: LOW
apps/apex): copy, one component, one stylesheet, one client enhancement IIFE./al/+/a/art_8KQ2WSDIEGO7XRlink,t-gesturewire, no em dashes, §11 bans) all still pass.Test plan
pnpm verify(full local gate) greenpnpm test:coveragegreen (90.58 / 82.3 / 91.84 / 90.81, above 88/82/88/88 floors)pnpm --filter @agent-paste/apex test(88 passed),typecheck,lint,buildcleanpnpm deploy:preview --app=apex); animation, spacing, and scrollbar fixes verified on https://preview.agent-paste.shIssue: AP-270
Summary by CodeRabbit
New Features
Documentation