Preview Mocking Environment

The Statusline Editor includes a real-time terminal simulator that provides immediate visual feedback as you configure your statusline. This environment mimics the appearance of a standard terminal and handles the complex logic of converting ANSI terminal colors and Unicode symbols into a high-fidelity web preview.

Real-Time Rendering

As you toggle blocks or adjust settings, the preview updates instantly. The rendering engine simulates how your statusline will look when Claude Code passes JSON data to your generated script.

The preview environment specifically mocks the following data points:

Model Information: Displays as Sonnet 4.6.
Usage Limits: Simulates a 5-hour rate at 68% and a weekly rate at 42%.
Context Window: Set to 30% fill to demonstrate color threshold transitions.
Token Metrics: Simulates a session with 12.4k input and 3.1k output tokens.
Git Integration: Mocks a "dirty" repository state on the main branch.

Terminal Theme Switching

Terminal backgrounds and contrast levels vary significantly between users. To ensure your statusline is readable in your specific setup, the preview window supports theme toggling:

Dark Mode: The default view, mimicking standard high-contrast dark terminals.
Light Mode: Adjusts the preview container and base colors to ensure visibility on light-background terminal emulators.

To switch themes, click the Sun/Moon icon in the top-right corner of the terminal preview window.

Visual Components

The mocking environment handles the rendering of several complex UI elements that would otherwise be difficult to visualize in a text editor:

Progress Bars

The preview renders the exact character widths and styles used in the final bash script. You can see how the classic, diamond, dot, line, gradient, and emoji styles interact with your chosen colors before exporting.

ANSI-to-CSS Mapping

The editor uses an internal mapping system to convert 256-color ANSI codes into web-safe CSS. This ensures that the color you pick in the palette accurately represents the color that will appear in your terminal emulator (supporting standard Xterm-256color palettes).

Context Thresholds

The mocking environment dynamically applies colors based on the context percentage. By default:

0–49%: Uses your primary success color.
50–79%: Switches to your warning color.
80–100%: Switches to your critical/alert color.

State Persistence

Your preview configuration—including enabled blocks, custom colors, and reordering—is automatically saved to your browser's localStorage. If you refresh the page or return later, your mocking environment will remain exactly as you left it, allowing for iterative design of your statusline.