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 MOCK data 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 main branch.

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:

1. Reordering: Dragging a block in the Editor section instantly updates its horizontal position in the terminal preview.
2. Toggle: Disabling a block (clicking the checkmark) removes it from the preview immediately.
3. 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)