Terminal UI Simulation
Terminal UI Simulation
The editor features a high-fidelity terminal simulation that provides a real-time preview of how your statusline will appear within the Claude Code environment. Instead of forcing you to guess how colors and blocks interact, the preview renders your configuration against a recreated Claude Code "Welcome" screen.
Realistic Visual Feedback
The simulation is built using standard web technologies (HTML/CSS) to mimic the aesthetics of a modern terminal emulator (like iTerm2, Alacritty, or Windows Terminal). It includes:
- Terminal Chrome: A macOS-style title bar with window controls (red/yellow/green dots).
- Claude Mascot: A CSS-recreated version of the Claude Code orange mascot and the standard welcome greeting.
- Mock Environment Data: To show the statusline in action, the preview uses a
MOCKdata object containing realistic sample values:- Model: Sonnet 4.6
- Context: 30% utilization (200k max tokens)
- Usage: 68% of 5h limit, 42% of weekly limit
- Git: Shows a "dirty" state on the
mainbranch.
ANSI-to-CSS Translation
The statusline uses ANSI 256-color codes, the standard for terminal styling. The editor includes a custom translation layer (js/ansi.js) that converts these terminal codes into RGB values for the browser.
This ensures that the color you pick in the ANSI Palette—whether it’s a standard base color or a specific shade from the 216-color cube—will look exactly the same in the preview as it does in your actual terminal.
Theming: Dark and Light Modes
Because terminal users are split between dark and light backgrounds, the UI simulation includes a theme toggle.
- Dark Mode: Default terminal styling with high-contrast text.
- Light Mode: Simulates a light-background terminal, automatically adjusting the "empty" portions of progress bars and separators for optimal visibility.
To switch themes, click the Sun/Moon icon in the top-right corner of the terminal window. The editor will save your theme preference in local storage along with your configuration.
Live Block Interactivity
The simulation isn't just a static image; it is tied directly to the editor's state:
- Reordering: Dragging a block in the Editor section instantly updates its horizontal position in the terminal preview.
- Toggle: Disabling a block (clicking the checkmark) removes it from the preview immediately.
- Thresholds: As you modify the color thresholds for the Context % block, the preview color updates based on the current mock percentage (30%).
// Example of how the preview handles dynamic threshold coloring
function getContextColor(percent) {
const block = state.blocks.find(b => b.id === 'context');
for (const t of block.thresholds) {
if (percent <= t.max) return ansiToCSS(t.color);
}
return ansiToCSS(block.thresholds[block.thresholds.length - 1].color);
}
Bar Styles
The terminal simulation supports several character-based progress bar styles. You can preview how different Unicode characters render in a terminal-like environment:
- Classic:
▓▓▓░░ - Diamond:
◆◆◆◇◇ - Dot:
●●●○○ - Line:
━━━── - Emoji:
🟢🟡🔴(Uses standard system emojis)