feat(statusline): flatten the desktop band, Claude theme colors, Storybook + Vitest

[AnnatarHe]

Summary

Desktop band. One flat row replaces the bordered, padded pill each segment used to have.

• Figures are regular weight, the gaps between segments are wider, and the bars are thinner (28×4 instead of 32×6).
• Colors are Claude-palette tones with at least 3:1 contrast on both the light (#FAF9F5) and dark (#262624) desktop backgrounds.
• The emoji stay. A hover underlines only the link under the pointer.

Terminal. The text is still exactly the shelltime cc statusline line. The colors are now Claude Code theme keys (success, warning, error, planMode, merged), so the line follows /theme. Under an ANSI theme it gets the same colors as the CLI.

Storybook + Vitest (repo root, pnpm).

• tooling/engine stands in for Claude Code's renderer. It provides the engine's JSX runtime (h) and element tables, which build the same plain-data trees the engine checks. A small React component paints those trees approximately for Storybook.
• Stories cover the desktop and terminal in light and dark, with an overview that shows every surface side by side. States: full, no token, high usage, no git, and a narrow width that wraps.
• 31 Vitest specs check:
  • no borders, padding or bold on the desktop
  • the terminal text matches the CLI exactly
  • colors, links, bar thresholds and meterSvg
  • every story renders
• The tooling lives outside plugins/, so installed plugins ship none of it. Vitest only runs tests/**/*.spec.*, so it never picks up the engine's *.test.ts.
• A new CI ui job runs pnpm typecheck, pnpm test and pnpm build-storybook.

Engine suite. Desktop segment keys are renamed from pill-* to segment-*. The meterSvg tests moved from segments.test.ts to Vitest.

Test plan

• claude plugin validate --strict . and claude plugin validate --strict plugins/shelltime-statusline pass
• claude plugin test plugins/shelltime-statusline: 23 pass
• tsc -p plugins/shelltime-statusline (the engine's tsconfig) and pnpm typecheck are clean
• pnpm test: 31 pass
• pnpm build-storybook succeeds
• Checked visually in Storybook, light and dark, including hover scoping and narrow wrapping
• Live check in a terminal session (claude --plugin-dir plugins/shelltime-statusline) across /theme variants
• Live check in the desktop app's Code tab

🤖 Generated with Claude Code

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.