Code editor

1 test · 6 finished runs (6 agent, 0 raw one-shot) · 6 live demos

The prompt

Build a working code editor in one page in the spirit of a lightweight VS Code. It needs: a file explorer sidebar with a small seeded project (index.html, style.css, app.js, utils.js, README.md) where files can be created, renamed and deleted; tabs for open files with unsaved-change dots; an editor component you write yourself (no libraries) with line numbers, syntax highlighting for JavaScript, CSS, HTML and Markdown, auto-indent, bracket matching and auto-closing, multi-line indent and outdent of selected lines from the keyboard, current-line highlight, and a minimap; find and replace with match count and regex toggle; a command palette (Ctrl+Shift+P) with fuzzy search over commands and files; a run button that executes app.js in a sandboxed iframe with the project's HTML and CSS and shows its output plus console logs and errors in a bottom panel; light and dark themes; and persistence of the whole project to localStorage. So the page is alive without input, on load it runs a scripted demo: the cursor opens app.js, types a small function character by character with realistic pauses, autocloses brackets, uses find and replace to rename a variable, opens the command palette, runs the project so a little animation appears in the preview and a log line in the console, then reverts and repeats with a different snippet, until the user touches anything. Make it feel fast and professional. Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.