Add Report issue button to playground#477
Conversation
Adds a "Report issue" button next to Share that opens github.com/frostney/GocciaScript/issues/new in a new tab, pre-filled with a link back to the current playground state (via the same encoded share URL) and a markdown table of the active configuration: backend, runner, version, ASI, and the var/function compat flags. The share-URL builder is factored out of the existing share callback into buildShareLink so both buttons share one source of truth — if the share payload shape changes, the issue link tracks automatically. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
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 (5)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds platform-aware Run shortcut labels and visible hints, wires Ctrl/Cmd+Enter submit from editors to Run, prevents overlapping executes with a running guard, adds playground share/report-issue builders, and updates console/typewriter CSS to avoid wrapping and allow horizontal scroll for long commands. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Editor as HighlightedTextarea
participant UI as Sandbox/Playground UI
participant Server as /api/execute
participant Output as AnimatedOutput
User->>Editor: Ctrl/Cmd+Enter (onSubmit)
Editor->>UI: invoke execute()
UI->>UI: sync validation/build (sets runningRef)
UI->>Server: POST /api/execute (request)
Server-->>UI: execution result
UI->>Output: render result (typewriter/console CSS)
UI->>UI: clear runningRef (finally)
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. Review rate limit: 0/5 reviews remaining, refill in 54 minutes and 46 seconds. Comment |
Suite Timing
Measured on ubuntu-latest x64. |
Benchmark Results407 benchmarks Interpreted: 🟢 402 improved · 🔴 4 regressed · 1 unchanged · avg +27.8% arraybuffer.js — Interp: 🟢 14 · avg +27.6% · Bytecode: 🟢 1, 🔴 9, 4 unch. · avg -3.1%
arrays.js — Interp: 🟢 19 · avg +27.6% · Bytecode: 🔴 16, 3 unch. · avg -7.5%
async-await.js — Interp: 🟢 6 · avg +27.8% · Bytecode: 🔴 5, 1 unch. · avg -4.2%
async-generators.js — Interp: 🟢 2 · avg +29.9% · Bytecode: 🔴 1, 1 unch. · avg -1.8%
base64.js — Interp: 🟢 10 · avg +28.2% · Bytecode: 🔴 5, 5 unch. · avg -2.9%
classes.js — Interp: 🟢 31 · avg +24.5% · Bytecode: 🔴 11, 20 unch. · avg -2.2%
closures.js — Interp: 🟢 11 · avg +27.8% · Bytecode: 🔴 9, 2 unch. · avg -8.1%
collections.js — Interp: 🟢 12 · avg +27.9% · Bytecode: 🟢 4, 🔴 2, 6 unch. · avg +0.4%
csv.js — Interp: 🟢 13 · avg +27.1% · Bytecode: 🔴 13 · avg -9.7%
destructuring.js — Interp: 🟢 22 · avg +27.4% · Bytecode: 🟢 4, 🔴 10, 8 unch. · avg -2.0%
fibonacci.js — Interp: 🟢 8 · avg +30.5% · Bytecode: 🔴 5, 3 unch. · avg -5.5%
float16array.js — Interp: 🟢 32 · avg +25.6% · Bytecode: 🟢 5, 🔴 19, 8 unch. · avg +0.7%
for-of.js — Interp: 🟢 7 · avg +31.5% · Bytecode: 🔴 4, 3 unch. · avg -5.8%
generators.js — Interp: 🟢 4 · avg +21.1% · Bytecode: 🔴 4 · avg -10.3%
iterators.js — Interp: 🟢 42 · avg +25.5% · Bytecode: 🟢 15, 🔴 7, 20 unch. · avg +1.2%
json.js — Interp: 🟢 20 · avg +26.7% · Bytecode: 🔴 20 · avg -10.4%
jsx.jsx — Interp: 🟢 21 · avg +25.8% · Bytecode: 🔴 18, 3 unch. · avg -6.7%
modules.js — Interp: 🟢 9 · avg +28.4% · Bytecode: 🔴 9 · avg -15.6%
numbers.js — Interp: 🟢 11 · avg +25.0% · Bytecode: 🔴 11 · avg -10.8%
objects.js — Interp: 🟢 7 · avg +33.9% · Bytecode: 🔴 7 · avg -10.1%
promises.js — Interp: 🟢 12 · avg +19.1% · Bytecode: 🔴 6, 6 unch. · avg -3.9%
regexp.js — Interp: 🟢 11 · avg +32.3% · Bytecode: 🔴 11 · avg -8.3%
strings.js — Interp: 🟢 19 · avg +26.2% · Bytecode: 🔴 9, 10 unch. · avg -4.3%
tsv.js — Interp: 🟢 9 · avg +28.8% · Bytecode: 🔴 9 · avg -10.8%
typed-arrays.js — Interp: 🟢 22 · avg +46.6% · Bytecode: 🟢 2, 🔴 18, 2 unch. · avg -6.5%
uint8array-encoding.js — Interp: 🟢 18 · avg +32.1% · Bytecode: 🟢 4, 🔴 8, 6 unch. · avg -10.6%
weak-collections.js — Interp: 🟢 10, 🔴 4, 1 unch. · avg +20.1% · Bytecode: 🟢 12, 🔴 2, 1 unch. · avg +46.3%
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. |
The floating "⌘ + Enter" text in the playground header used to sit beside the Run button, but the new Report issue / Share buttons now visually separate the hint from its target. Move the shortcut into the button itself as a subdued monospace tail (Run ⌘↵) — the hint is physically welded to the action it describes, matching the pattern used in command palettes (Linear, Raycast). Apply the same treatment everywhere a Run-style button appears: - Playground Run button: drop the floating span, inline the kbd tail. - Landing hero Run button: inline the kbd tail (smaller variant). - Sandbox Execute button: inline the kbd tail. Previously the sandbox had no ⌘+Enter handler at all, so wire one up via a new optional onSubmit prop on HighlightedTextarea — pressing ⌘/Ctrl+Enter inside either the script or globals editor now fires Execute. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Aligns the sandbox primary action with the playground and landing-page
buttons that already say Run, so the same verb describes the same code-
execution action everywhere on the site. Updates the button label, the
title= tooltip, and the surrounding prose ("hit Run") accordingly.
Internal identifiers (the execute() callback, the /api/execute endpoint,
and the tool description) are left as-is since renaming them would be
churn unrelated to the user-visible label.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
`.console-panel` and `.anim-output-text` used `white-space: pre-wrap`, which wraps long output lines at whitespace and silently overflows on unbreakable tokens (stringified blobs, file paths, long error messages). Either way the user couldn't see the full line — wrapped lines looked truncated, and overflowing tokens had no visible scrollbar to access the rest. Switching to `white-space: pre` keeps long lines on a single line so the panel's existing `overflow: auto` surfaces a horizontal scrollbar when needed. Matches how a real terminal renders output. Affects all three console panels (playground, sandbox, landing-page hero) since they share the `.console-panel` class — consistent terminal-like behavior site-wide. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The first meta line in AnimatedOutput renders inside .anim-output-typed, which uses `overflow: hidden` + an animated `max-width: 0 → 100%` to produce the typewriter reveal effect. After the 0.6s animation the `forwards` fill mode keeps both constraints applied, so a command line longer than the panel — e.g. the sandbox banner "GocciaScriptLoader --timeout=500 --globals=context.json" — gets silently clipped at the panel's right edge with no way to access the rest. The .console-panel parent never sees the overflow because the clip happens before it bubbles up, so its overflow: auto can't help. Chain a `typewriter-unclip` animation at 0.6s delay (matches the existing `caret-typing-hide` pattern in this file) that snaps overflow to visible and max-width to none. The reveal effect still works during 0–0.6s — base CSS `overflow: hidden` is in force — but once the line is fully typed, the constraints release and a long command extends past the panel's edge, triggering the panel's horizontal scrollbar. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
website/src/components/playground.tsx (1)
1145-1151: ⚡ Quick winUse a platform-neutral shortcut label in the Run hint.
The UI hint/title currently shows only
⌘, but the handler accepts bothMetaandCtrl(Line 1280). Consider a neutral label likeCtrl/⌘+Enterto avoid misleading Windows/Linux users.Also applies to: 1280-1283
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/playground.tsx` around lines 1145 - 1151, Update the platform-specific Run hint to a neutral label: change the title string "Run · ⌘+Enter" and the visible span content "⌘↵" (in the Run button that renders RunIcon and span with className "pg-run-kbd") to a platform-neutral label such as "Ctrl/⌘+Enter" (or visible "Ctrl/⌘↵"); also update the other matching occurrence referenced by the keyboard handler that accepts both Meta and Ctrl (the keydown handler using Meta/Ctrl around the handleKeyDown/event listener) so the UI text matches the actual shortcut behavior.
🤖 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/sandbox.tsx`:
- Around line 739-740: The execute handler can be invoked concurrently via
keyboard submit even when the UI button is disabled; add a re-entry guard inside
execute itself by introducing an internal boolean/ref flag (e.g., executingRef
or isExecuting state) that is checked at the very start of execute and returns
early if already set, then set the flag immediately before running and clear it
in a finally block after the run completes or errors; update any existing places
that set/clear run state (used by the submit button) to rely on this same flag
so Ctrl/⌘+Enter submits are ignored while a run is in flight.
---
Nitpick comments:
In `@website/src/components/playground.tsx`:
- Around line 1145-1151: Update the platform-specific Run hint to a neutral
label: change the title string "Run · ⌘+Enter" and the visible span content "⌘↵"
(in the Run button that renders RunIcon and span with className "pg-run-kbd") to
a platform-neutral label such as "Ctrl/⌘+Enter" (or visible "Ctrl/⌘↵"); also
update the other matching occurrence referenced by the keyboard handler that
accepts both Meta and Ctrl (the keydown handler using Meta/Ctrl around the
handleKeyDown/event listener) so the UI text matches the actual shortcut
behavior.
🪄 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: 59fc1aba-5850-4527-a600-ab781c7451b8
📒 Files selected for processing (5)
website/src/app/globals.csswebsite/src/components/highlighted-textarea.tsxwebsite/src/components/landing.tsxwebsite/src/components/playground.tsxwebsite/src/components/sandbox.tsx
The Run button is `disabled` while running, but the ⌘/Ctrl+Enter shortcut on the script and globals editors bypasses that — the keyboard path goes straight through HighlightedTextarea's onSubmit into execute(). Without a re-entry guard, a fast double-press fires two execute() invocations: the first awaits its fetch, control returns to the event loop, the second press's handler runs, sails past validation, calls setRunning(true) (idempotent), and starts a second concurrent /api/execute request that then races the first into setOutput. Adopt the same `runningRef = useRef(false)` pattern the playground already uses (playground.tsx lines 464, 552–554, 736–737): - Check ref at the top of execute and bail if a run is in flight. - Set ref *after* the synchronous validation guards (so a validation early-return doesn't leak the flag into a stuck state). - Clear ref in the finally block paired with setRunning(false). A ref is required because the useCallback closure captures a stale `running` value across renders — only a ref reads the latest value synchronously inside the handler. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The keydown handlers all bind on `metaKey || ctrlKey`, so the same
physical combo runs the script on every platform — but the visible
labels were hardcoded to ⌘ everywhere, so users on Linux/Windows
saw a Mac symbol that doesn't match their keyboard. Apply the same
treatment the install page already uses for OS-aware tabs: detect
on the client via navigator.userAgent and re-render with the right
label.
Add a `useRunShortcut()` hook to command-tabs.tsx (next to the
existing `detectOs` / `detectArch` helpers) returning two strings:
`short` for inline button tails ("⌘↵" / "Ctrl+↵") and `long` for
tooltips and prose ("⌘+Enter" / "Ctrl+Enter"). SSR renders the
macOS form so the markup is deterministic, then the client useEffect
swaps to Ctrl on Linux/Windows after hydration — same shape and
trade-off as `<QuickInstall>`.
Wire it through every kbd-hint surface:
- Playground Run button (title + .pg-run-kbd tail)
- Landing hero Run button (title + .hero-action-kbd tail)
- Sandbox Run button (title + .pg-run-kbd tail)
- AnimatedOutput idle hint ("press Run or …")
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Resolves an import-block conflict in `website/src/components/playground.tsx` where main (#477) added `import { GITHUB_REPO_URL } from "@/lib/github"` on the same lines this branch added `import { formatMemorySegments, type MemoryJson } from "@/lib/format-memory"`. Kept both, alphabetically sorted (format-memory < github). Other website files (landing.tsx, sandbox.tsx, goccia-api.ts) auto-merged cleanly: main's `useRunShortcut` import (also from #477) and this branch's memory-display additions touch independent regions of each file. Verified with tsc, biome, and bun test (143/143 pass).
Summary
github.com/frostney/GocciaScript/issues/newin a new tab, pre-filled with a back-link to the current playground state and a markdown table of the active settings (backend, runner, version, ASI, compatvar/function).sharecallback intobuildShareLink, so the Share button and the new issue link share one source of truth.Test plan
issues/newwith the playground link, settings table, and "expected/actual" sections pre-filled.🤖 Generated with Claude Code