Unify website console output with shared ConsolePanel#418
Merged
Conversation
Introduce a common ConsolePanel wrapper and zsh/spaceship-style terminal appearance across every console output on the site (hero, playground, sandbox, compiler pipeline). Key changes: - New ConsolePanel component with --console-bg darker background - AnimatedOutput: ➜ prompt in gutter, typewriter reveal on command line, inline caret during typing, trailing caret after output - HighlightedTextarea: optional lineNumbers prop with scroll-synced gutter (used by sandbox script/globals editors) - Sandbox: system prompt header in buildScript, GocciaScriptLoader banners, removed --memory arg and caps line - Landing hero: auto-runs on mount, 5-line padded output - Footer: brand + tagline on one line - format-error: skip <stdin> location line entirely - Compiler pipeline: sharp artifact boxes, .esm → .mjs Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds a theme-aware console style and a new ConsolePanel wrapper; AnimatedOutput treats the first meta line as a typed command (removes Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
🚥 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. Comment |
coderabbitai
Bot
added
new feature
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
website/src/components/animated-output.tsx (1)
12-15: Verify CSS animation timing stays in sync with JS constants.The
TYPEWRITER_MS = 600constant here must match the CSStypewriter-expandanimation duration and thecaret-typing-hidedelay inglobals.css. Currently both are set to0.6s, but if either changes independently, the caret handoff will break.Consider adding a comment noting this coupling, or extracting the timing to a shared location (CSS custom property read via
getComputedStyleor a shared config).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/animated-output.tsx` around lines 12 - 15, The TYPEWRITER_MS constant in animated-output.tsx is tightly coupled to the CSS animation duration (typewriter-expand) and the caret-typing-hide delay in globals.css, so ensure they stay in sync: either add a clear comment next to TYPEWRITER_MS and STAGGER_MS noting they must match the CSS timings, or refactor to source the timing from a single place (e.g., define a CSS custom property used by both globals.css and read via getComputedStyle in the AnimatedOutput component, or move the timing into a shared JS/TS config that both the component and your CSS build can consume); update the AnimatedOutput code paths that use TYPEWRITER_MS and the CSS to use the shared value so the caret handoff remains correct.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@website/src/components/landing.tsx`:
- Around line 149-152: The comment and the padding loop disagree: the comment
says "Pad to 7 lines" but the while loop pads until lines.length < 5; update
them to match by either changing the comment to "Pad to 5 lines so the hero
console keeps a fixed height." or adjusting the loop condition to lines.length <
7 to preserve the 7-line contract; locate the while loop that pushes { kind:
"meta", text: "" } into the lines array and make the comment and the loop's
numeric target consistent.
---
Nitpick comments:
In `@website/src/components/animated-output.tsx`:
- Around line 12-15: The TYPEWRITER_MS constant in animated-output.tsx is
tightly coupled to the CSS animation duration (typewriter-expand) and the
caret-typing-hide delay in globals.css, so ensure they stay in sync: either add
a clear comment next to TYPEWRITER_MS and STAGGER_MS noting they must match the
CSS timings, or refactor to source the timing from a single place (e.g., define
a CSS custom property used by both globals.css and read via getComputedStyle in
the AnimatedOutput component, or move the timing into a shared JS/TS config that
both the component and your CSS build can consume); update the AnimatedOutput
code paths that use TYPEWRITER_MS and the CSS to use the shared value so the
caret handoff remains correct.
🪄 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: 172efdfd-8d2d-4938-8247-04ee074e2250
📒 Files selected for processing (9)
website/src/app/globals.csswebsite/src/components/animated-output.tsxwebsite/src/components/console-panel.tsxwebsite/src/components/highlighted-textarea.tsxwebsite/src/components/landing.tsxwebsite/src/components/playground.tsxwebsite/src/components/sandbox.tsxwebsite/src/components/site-shell.tsxwebsite/src/lib/format-error.ts
Contributor
Benchmark Results386 benchmarks Interpreted: 🟢 253 improved · 🔴 21 regressed · 112 unchanged · avg +5.5% arraybuffer.js — Interp: 🟢 8, 6 unch. · avg +5.6% · Bytecode: 🟢 1, 🔴 10, 3 unch. · avg -5.8%
arrays.js — Interp: 🟢 17, 2 unch. · avg +5.4% · Bytecode: 🔴 18, 1 unch. · avg -9.2%
async-await.js — Interp: 🟢 4, 2 unch. · avg +6.5% · Bytecode: 🔴 4, 2 unch. · avg -5.7%
base64.js — Interp: 🟢 10 · avg +6.8% · Bytecode: 🔴 7, 3 unch. · avg -5.0%
classes.js — Interp: 🟢 29, 2 unch. · avg +5.1% · Bytecode: 🔴 28, 3 unch. · avg -8.5%
closures.js — Interp: 🟢 10, 1 unch. · avg +4.8% · Bytecode: 🔴 11 · avg -10.4%
collections.js — Interp: 🟢 12 · avg +13.4% · Bytecode: 🟢 5, 🔴 3, 4 unch. · avg +1.5%
csv.js — Interp: 🟢 3, 🔴 5, 5 unch. · avg -0.6% · Bytecode: 🔴 13 · avg -12.6%
destructuring.js — Interp: 🟢 18, 4 unch. · avg +5.5% · Bytecode: 🔴 19, 3 unch. · avg -9.3%
fibonacci.js — Interp: 🟢 8 · avg +6.4% · Bytecode: 🔴 5, 3 unch. · avg -5.2%
float16array.js — Interp: 🟢 10, 🔴 4, 18 unch. · avg +1.4% · Bytecode: 🟢 4, 🔴 23, 5 unch. · avg -1.2%
for-of.js — Interp: 🟢 4, 3 unch. · avg +3.3% · Bytecode: 🔴 7 · avg -11.1%
helpers/bench-module.js — Interp: 0 · Bytecode: 0
iterators.js — Interp: 🟢 39, 3 unch. · avg +6.8% · Bytecode: 🔴 41, 1 unch. · avg -8.3%
json.js — Interp: 🟢 8, 12 unch. · avg +1.8% · Bytecode: 🔴 20 · avg -10.1%
jsx.jsx — Interp: 🟢 14, 7 unch. · avg +2.9% · Bytecode: 🔴 21 · avg -10.9%
modules.js — Interp: 🟢 3, 6 unch. · avg +2.0% · Bytecode: 🔴 9 · avg -11.9%
numbers.js — Interp: 🟢 5, 🔴 1, 5 unch. · avg +2.0% · Bytecode: 🟢 1, 🔴 8, 2 unch. · avg -8.4%
objects.js — Interp: 🟢 3, 4 unch. · avg +2.5% · Bytecode: 🔴 7 · avg -8.8%
promises.js — Interp: 🟢 10, 2 unch. · avg +4.0% · Bytecode: 🔴 10, 2 unch. · avg -5.8%
regexp.js — Interp: 🟢 1, 🔴 1, 9 unch. · avg +0.7% · Bytecode: 🔴 10, 1 unch. · avg -8.2%
strings.js — Interp: 🟢 8, 🔴 2, 9 unch. · avg +19.3% · Bytecode: 🔴 16, 3 unch. · avg -6.9%
tsv.js — Interp: 🔴 2, 7 unch. · avg -2.1% · Bytecode: 🔴 9 · avg -10.8%
typed-arrays.js — Interp: 🟢 22 · avg +22.8% · Bytecode: 🟢 17, 5 unch. · avg +8.2%
uint8array-encoding.js — Interp: 🟢 7, 🔴 6, 5 unch. · avg -6.4% · Bytecode: 🟢 10, 🔴 4, 4 unch. · avg +28.9%
Measured on ubuntu-latest x64. Benchmark ranges compare cached main-branch min/max ops/sec with the PR run; overlapping ranges are treated as unchanged noise. Percentage deltas are secondary context. |
Contributor
Suite Timing
Measured on ubuntu-latest x64. |
…pling - landing.tsx: comment said "Pad to 7 lines" but loop pads to 5; fixed comment to match the code - animated-output.tsx: TYPEWRITER_MS and STAGGER_MS are coupled to CSS animation durations in globals.css; added sync comment noting the matching values (typewriter-expand 0.6s, caret-typing-hide 0.6s) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
frostney
commented
Apr 27, 2026
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@website/src/components/animated-output.tsx`:
- Around line 50-63: The empty-state hint is hidden from assistive tech; in the
AnimatedOutput component remove the aria-hidden="true" from the <span
className="anim-output-hint"> (do not change the caret span with
className="anim-output-caret" which should remain aria-hidden) and make the hint
announceable by adding aria-live="polite" (and optionally role="status") to that
same hint span or to the wrapping container so screen readers will announce
"press Run or ⌘+Enter" when the empty state is present.
🪄 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: ce151600-fbef-46e3-8d40-c4da967f6002
📒 Files selected for processing (2)
website/src/components/animated-output.tsxwebsite/src/components/landing.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- website/src/components/landing.tsx
Remove aria-hidden from the hint span and add role="status" so assistive tech announces "press Run or ⌘+Enter" when the console is empty. The decorative caret span remains aria-hidden. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This was referenced Apr 27, 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
ConsolePanelcomponent with a zsh/spaceship-style terminal look (--console-bgdarker background, inset shadow) used consistently across the hero, playground, sandbox, and compiler pipelineAnimatedOutputwith➜prompt in the gutter, typewriter reveal on the command line with inline caret, and clean empty state (➜ ▊ press Run or ⌘+Enter)lineNumbersprop toHighlightedTextareawith scroll-synced gutter; enable for both sandbox editorsbuildScript(no eval, no var, no function, no loose equality)format-errorskips<stdin>location line; compiler pipeline artifacts use sharp corners and.esm→.mjsTest plan
➜ ▊ press Run or ⌘+Enter, transitions smoothly on run🤖 Generated with Claude Code