Local Development

Local Development

Since the Statusline Editor is a client-side web application built with vanilla JavaScript, there are no build steps, compilers, or heavy dependencies required to start developing.

Getting Started

1. Clone the repository:

   git clone https://github.com/buluktaev/statusline-editor.git
   cd statusline-editor
   

2. Launch the editor: Simply open index.html in your preferred web browser.

   Note: While the app runs fine via the file:// protocol, using a local development server (like the Live Server extension in VS Code or python3 -m http.server) is recommended for a more consistent experience with asset loading.

Project Structure

To modify the editor or add new statusline segments, familiarize yourself with the modular file structure:

• js/state.js: Contains the default configuration (DEFAULTS) and the mock data (MOCK) used for the live preview.
• js/preview.js: Controls how blocks are rendered in the "Terminal" window UI.
• js/generator.js: Contains the logic that translates your UI configuration into the final Bash script.
• js/settings.js: Manages the property editors (colors, toggles, sliders) for each block.
• styles/: Modular CSS files for layout, terminal styling, and UI components.

Adding a New Block

To add a new statusline segment, follow these steps:

1. Define the State: Add a new block object to the DEFAULTS.blocks array in js/state.js.
2. Add Preview Logic: Update the renderPreview() function in js/preview.js. Add a case to the switch statement to define how the block should appear in the browser. Use MOCK data to simulate real-time values.
3. Update the Generator: In js/generator.js, add the corresponding Bash logic to the generateScript() function. This ensures that when a user clicks "Copy," their script includes the new functionality.
4. Create Settings UI: In js/settings.js, define the controls (color pickers, toggles) that allow users to customize your new block.

Testing Changes

The editor includes a "Live Preview" that reacts immediately to code changes if you are using a hot-reloading server.

To test the Output Script:

1. Make your changes in the Editor UI.
2. Click Copy Install Cmd in the Output panel.
3. Paste and run the command in a test terminal.
4. Run a Claude Code session to verify the statusline renders as expected:

   claude
   

UI Components for Developers

When building new settings or blocks, use the utility functions provided in js/components.js to maintain visual consistency:

• buildAnsiPalette(currentCode, onChange): Creates an interactive 256-color ANSI picker.
• buildToggle(checked, label, onChange): Creates a standardized switch.
• buildSegment(options, current, onChange): Creates a segmented button group (e.g., for selecting formats).
• buildCounter(value, min, max, onChange): Creates a +/- incrementer.