This repository contains a browser-based Ruby sandbox environment built with Vanilla JavaScript, Vite, Monaco Editor, and Ruby WASM. This guide is intended for AI agents to ensure consistency and correctness when modifying the codebase.
- Start Dev Server:
npm run dev- Primary Workflow: Changes are reflected immediately via HMR.
- Access: Usually
http://localhost:5173.
- Build for Production:
npm run build- Compiles to
dist/. Always run this before finishing a task to check for bundling errors.
- Compiles to
- Preview:
npm run preview
- Automated Tests: NONE. There is no Jest/Vitest configured.
- Manual Verification (The "Test Loop"):
- Start server:
npm run dev - Load Runtime: Click "Load Ruby Runtime".
- Execute: Click "Run".
- Start server:
- "Running a Single Test":
- To test a specific feature or bug fix, construct a minimal Ruby snippet that exercises that logic.
- Example (Testing Input): Code:
puts "Name?"; name = gets.chomp; puts "Hi #{name}". Run this in the editor to verify the input modal works. - Example (Testing Output): Code:
puts "A"*1000. Run to verify output scrolling/performance.
- Tooling: No strict ESLint/Prettier scripts.
- Rule: Mimic existing formatting (see below).
- Framework: Vanilla JS. No React/Vue. Direct DOM manipulation.
- Modules: Standard ES6 Modules (
import/export). - Hosting: GitHub Pages (Static site). Use relative paths (
base: './').
- Indentation: 2 spaces.
- Semicolons: Always.
- Quotes: Single quotes
'generally. - Naming:
camelCasefor JS variables/functions,kebab-casefor file names and DOM IDs/classes.
- IO Bridge (JS <-> Ruby):
src/main.jsattaches helpers toself(e.g.,self.printToOutput,self.waitForInput).- Do not remove
self.attachment; these must be globally available for the Ruby WASMJS.globalbridge to find them.
- Ruby Execution Wrapper:
- User code is wrapped in a Ruby block (in
src/main.js) to redirect$stdout/$stdinto the browser. - Careful: Modifying the
wrappedCodestring requires understanding howbrowser_wasi_shimandruby.wasminteract.
- User code is wrapped in a Ruby block (in
- Monaco Editor:
- Configured in
src/main.js. - Workers loaded via Vite-specific
?workerimports.
- Configured in
- Analyze: Read
src/main.jsandindex.html. Understand if the change is UI-only or Logic-based. - Plan:
- UI:
index.html+style.css. - Logic:
src/main.js. Check if you need to touch the Ruby wrapper or the JS event listeners.
- UI:
- Implement:
- Use
editorwriteto make changes. - Verify imports: Ensure you don't break the specific Monaco/WASM import order.
- Use
- Verify:
- Run
npm run buildto catch syntax/import errors. - If possible, output a Ruby snippet the user can run to verify the fix.
- Run
- Rules: None present in repo (
.cursorrules, etc.). - Fallback: Follow this
AGENTS.mdstrictly.
- NEVER Commit or Push: Do NOT commit or push changes unless explicitly requested by the user.
- Ask First: Always ask for permission before creating a commit.
- Workflow:
- Make local file changes.
- Ask the user if they want to commit these changes.
- Only if the answer is "Yes", proceed with
git add,git commit, andgit push.