State Management

Settings Persistence

The Statusline Editor is a fully client-side application. It does not use a backend database or require a user account to save your progress. Instead, it relies on your browser's local storage to ensure your configuration persists between sessions.

How it Works

Every time you toggle a block, change a color, or reorder segments, the application updates its internal state and automatically synchronizes it with your browser's LocalStorage.

• Storage Key: sle-state-v1
• Scope: Settings are specific to the browser and device you are currently using.
• Auto-Save: There is no "Save" button; the editor performs a save operation on every change.

Resetting to Defaults

If you wish to clear your custom configuration and return to the original layout:

1. Locate the Editor panel.
2. Click the Reset button (typically found at the bottom of the blocks list).
3. The application will clear the stored data and reload the default model, rate, context, and directory blocks.

The Reset button will highlight (appearing "dirty") whenever your current configuration deviates from the factory defaults, serving as a visual indicator that custom changes are active.

Configuration Migrations

As the Statusline Editor evolves and adds new features (such as new status blocks or display options), the application automatically handles state migrations. When you open the editor, it checks your existing saved data against the current schema:

• Missing Fields: If a new version of the editor introduces a new setting (e.g., a "Show Git" toggle), the editor automatically injects the default value for that field without overwriting your existing color or order preferences.
• Schema Safety: If the saved data is corrupted or incompatible, the editor safely falls back to the default configuration to ensure the interface remains functional.

State Structure

For advanced users, the underlying state follows a structured JSON format. While you interact with this via the UI, the generated script is built from this object:

{
  "globalSep": "|",
  "globalSepEnabled": true,
  "blocks": [
    { "id": "model", "enabled": true, "color": 254 },
    { "id": "context", "enabled": true, "thresholds": [...] },
    { "id": "directory", "enabled": true, "showGit": true }
  ]
}

Preview Mock Data

Note that the data seen in the Preview window (such as specific token counts, usage percentages, or directory names) is "mock data" used for visualization purposes only. These values are not saved as part of your state and do not affect the logic of the final bash script. The generated script will always use real-time data provided by Claude Code at runtime.