Preview Mocking Environment
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
mainbranch.
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.