Construct a complete single-file production-ready web applic...

Prompt

Construct a complete single-file production-ready web application implementing a full mobile workspace interface for an AI agent system. The application must be delivered as one self-contained HTML file containing all HTML structure, CSS, and JavaScript with zero external dependencies beyond standard browser APIs. The file must contain every character of functional code required for a working system and must contain no comments of any kind. Implement the exact visual and interactive layout described below using only native HTML elements, CSS custom properties, and vanilla JavaScript. Define the following CSS custom properties on the root and apply them throughout: --color-surface-base: #000000; --color-deep-navy-glow: #09090f; --color-foreground-primary: #f5f5f7; --color-foreground-inverse-/-button-text: #ffffff; --color-accent-blue: #0000ff; --color-soft-mint: #f6fff9; --spacing-xs: 2px; --spacing-sm-1: 3px; --spacing-sm-2: 4px; --spacing-sm-3: 5px; --spacing-sm-4: 6px; --spacing-sm-5: 7px; --spacing-base-1: 8px; --spacing-base-2: 10px; --spacing-base-3: 11px; --spacing-base-4: 12px; --spacing-base-5: 13px; --spacing-base-6: 14px; --spacing-md-1: 16px; --spacing-md-2: 17px; --spacing-lg: 20px; --radius-pill-/-message-bubble: 18px; --radius-card-/-input: 16px; --radius-large-pill: 23px; --radius-full-circle: 50%; --font--apple-system: "-apple-system", sans-serif; The root layout must be a full-viewport mobile container with zero header height and zero sidebar width, body overflow hidden, and a main content area that fills the screen. Include a skip-to-content link that is visually hidden until focused. Create a three-tab header system using role="tablist" with exactly three tabs labeled "Nix", "Tools", and "Tasks". The "Tools" tab must be selected by default. Each tab must contain an SVG icon and text label, with precise hover, focus, and selected states matching the surface and accent color variables. A back-button SVG must appear on the left of the tab row. Under the Chat/Nix view implement an empty-state feed that displays a 64 px SVG chat icon, the heading "New chat with Agent", the secondary text "Agent can make changes, review its work, and debug itself automatically.", and six suggestion buttons arranged in a wrapping horizontal row: "Check my app for bugs", "Add payment processing", "Connect with an AI Assistant", "Add SMS message sending", "Add a database", "Add authenticated user login". Each button must use the surface-2 background, rounded corners, and full interactive states. Below the empty state place a floating composer area containing a content-editable CodeMirror-style multiline input with placeholder "Make lightweight changes, quickly…", an attachment button, a "Plan" checkbox, a mode selector button showing "Lite", a voice-input microphone button, and a disabled send button that becomes enabled only when the input contains text. Above the composer show a banner reading "Lite mode enabled." with an "Upgrade to Core" button and a dismiss icon. Under the Tools view render two sections titled "Recents" and "Replit Cloud" (replace any platform-specific naming with generic equivalents "Shell" and "Cloud Services"). The first item must be a Shell entry with a terminal SVG icon and description "Directly access your App through a command line interface (CLI)". Subsequent items must be Publishing and Domains with their respective SVG icons and descriptions matching the original functional wording. Each item must be a full-width interactive button with icon, title, and description. When the Shell item is activated, replace the tools list with a full-height terminal pane. The terminal must contain a header showing the path "~/workspace" and command "bash", plus three icon buttons for Search, Clear Output, and Kill Shell. The terminal body must be an xterm-compatible canvas-based emulator that accepts keyboard input, echoes characters, supports basic ANSI, and maintains a scrollable history. Provide an accessible fallback text area for screen readers. At the bottom of the main scrollable area render an artifacts shortcut row containing one existing artifact tile labeled "Artifact" / "Website" that opens a full-screen preview link, and a second tile labeled "Create artifact" with a plus icon that triggers a new-artifact modal. Implement a sticky footer input bar that remains visible on the home/create view. This bar must contain an attachment button, a mode selector currently set to "Economy", a voice-input button, and a start/submit button that shows a rotating loading spinner while the agent is starting. Overlay the footer with an animated multi-dot sprite and the text "Starting…" when the agent begins work. All interactive elements must expose correct ARIA labels, roles, and states. Focus rings must use the accent-blue color at 2 px thickness. Every SVG must be inline and sized exactly as specified (16 px, 18 px, 24 px, 32 px, 64 px). The layout must respect safe-area insets and use flexbox with the exact grow/shrink/basis values required for full-bleed chat, fixed header, and sticky footer. The single HTML file must initialize all event listeners on DOMContentLoaded, manage tab switching by toggling visibility and aria-selected attributes, handle terminal input and output via a self-contained JavaScript terminal class, manage the composer enable/disable state, and simulate the agent-start sequence by showing the animated overlay for three seconds then returning to the idle state. No network calls, no external scripts, no placeholders, no abbreviated sections, and no comments are permitted. The finished file must render the complete interface with zero console errors and full keyboard and touch interactivity on first load. Send back the complete code with all the fixes. Fix each of the listed errors one by one, making sure to actually correct them so that there are 0 errors remaining. Keep the original imports, since the files exist. Write out every single character; do not abbreviate anything. Fix every error. There must be exactly one file. Do not write anything else; just output the complete code, and it must not contain any comments. Never, under any circumstances, use simplified, substitute, dummy, simulated, or fake code. Write the entire file as complete, unabridged, production-ready code in a single code block. It must be 100% error-free, a complete, error-free file, and must be submitted as a downloadable file. These requirements are mandatory and must be strictly adhered to. If no list of errors is provided, you must find all the errors and fix them. If there were comments in the original code, delete them. And most importantly: YOU MUST NEVER SIMPLIFY!

A system prompt was added to support web rendering