How the UI Status Indicator Shows "ADHD ON" in the i‑have‑adhd Theme

The UI status indicator displays "ADHD ON" as a success‑colored bullet (●) followed by accent‑colored text, built by the updateStatus function in extensions/i-have-adhd.ts.

The i‑have‑adhd extension provides a visual status indicator that appears in the UI when ADHD mode is active. Understanding how this indicator renders helps users recognize when the accessibility features are enabled and allows developers to customize or test the behavior. The implementation relies on theme‑aware color helpers to ensure consistent styling across different color schemes.

How the Status Indicator Is Constructed

The visual representation is built inside the updateStatus function (lines 104‑112 of extensions/i-have-adhd.ts). This function assembles a two‑part label using theme foreground helpers:

1. Success‑colored dot – ctx.ui.theme.fg("success", "●") renders a green bullet.
2. Accent‑colored text – ctx.ui.theme.fg("accent", "ADHD ON") renders the label in the theme's accent color.

These fragments are concatenated with a space separator and passed to ctx.ui.setStatus:

const updateStatus = (ctx: ExtensionContext): void => {
  if (!enabled) {
    ctx.ui.setStatus("i-have-adhd", undefined);   // hide indicator
    return;
  }

  const dot   = ctx.ui.theme.fg("success", "●");      // coloured bullet
  const label = ctx.ui.theme.fg("accent", "ADHD ON"); // coloured text
  ctx.ui.setStatus("i-have-adhd", `${dot} ${label}`); // show "● ADHD ON"
};

The ctx.ui.setStatus call registers the composite string under the key "i-have-adhd", making it appear in the status bar.

Theme Integration and Color Application

The theme foreground helpers (ctx.ui.theme.fg) automatically map semantic color names to the active color scheme:

• "success" typically resolves to green, providing immediate visual confirmation that the mode is active.
• "accent" uses the theme's highlight color, ensuring the "ADHD ON" text stands out without clashing with the UI.

This abstraction allows the indicator to adapt to light, dark, or custom themes without hardcoded color values.

Toggling the Indicator Visibility

When ADHD mode is disabled, the updateStatus function clears the status entry entirely:

ctx.ui.setStatus("i-have-adhd", undefined);

This removes the visual indicator from the UI rather than displaying an "off" state.

From the command line, users can toggle the mode:

# Enable ADHD-friendly output (shows the status indicator)

/i-have-adhd on

# Disable it (removes the status indicator)

/i-have-adhd off

Key Implementation Files

File	Purpose
extensions/i-have-adhd.ts	Main extension logic; contains updateStatus function that builds and renders the status indicator.
scripts/check_pi_extension.py	Test suite asserting that "ADHD ON" appears in UI status when enabled.
README.md	Documents the footer behavior showing "● ADHD ON" while active.

Summary

• The UI status indicator combines a success‑colored bullet with accent‑colored text to display "ADHD ON".
• The updateStatus function in extensions/i-have-adhd.ts handles both rendering and clearing the indicator.
• Theme helpers (ctx.ui.theme.fg) ensure colors adapt to the active color scheme.
• The indicator disappears completely when ADHD mode is disabled via ctx.ui.setStatus(STATUS_KEY, undefined).

Frequently Asked Questions

What colors does the "ADHD ON" status indicator use?

The indicator uses success (green) for the bullet and accent for the text label. These semantic names map to actual colors through ctx.ui.theme.fg, adapting to the current theme.

Where is the status indicator code located?

The implementation resides in extensions/i-have-adhd.ts, specifically within the updateStatus function at lines 104‑112.

How can I test that the status indicator appears correctly?

Run the test suite in scripts/check_pi_extension.py, which asserts that "ADHD ON" text appears in the UI status when the mode is enabled.

Why does the indicator disappear instead of showing "ADHD OFF"?

The extension calls ctx.ui.setStatus("i-have-adhd", undefined) when disabled. This design choice keeps the UI uncluttered—the indicator serves as an active‑state marker only.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}