Wave 9 #118: Phase 1 catalog UI — state chip primitive + Connect button helper

[bernardc6]

Summary

Wave 9 #118 — Phase 1 catalog UI foundation. Adds the 10 standard connection-state CSS chip classes, a pure Python helper that emits state chip + tier chip + Connect button HTML, pytest coverage, smoke check wired into scripts/check.sh --core-only, an IKEA-style 5-step reference doc, and a visible demo on the Starlink page.

What's in

• scripts/connection_card.py (~339 LOC) — pure helper. Exports:
  • STANDARD_STATES — tuple of the 10 literal state strings (matches directive exactly)
  • format_state_chip(state, state_reason=None) — emits <span class="rc-state-chip <kebab>">…</span> + optional <span class="rc-state-chip-reason">…</span> subtitle
  • format_tier_chip(tier) — accepts both legacy a|b|c letters AND full-word certified|verified|experimental vocabulary (back-compat with sister catalog pages that still emit data-tier="a|b|c")
  • format_connect_button(slug, label=None) — emits <a class="rc-connect-button" href="/connections/{slug}/connect">…</a>; label override ("Connect" / "Set up" / "Reconnect" / "Update" / "Learn more") matches per-state CTA
  • format_connection_card(slug, name, tier, state, state_reason=None) — composes all three into a single <div class="rc-state-chip-row">…</div> block
  • Pure module — no I/O, network, or filesystem; HTML-escapes user copy; validates kebab-slug in Connect button href; --smoke CLI for ad-hoc checks
• homeassistant/packages/tests/test_connection_card.py (~370 LOC) — 36 pytest tests:
  • All 10 standard states × kebab-class (parametrized)
  • format_state_chip raises plain-English ValueError for unknown states + blank state_reason
  • format_tier_chip accepts both vocabularies (case-insensitive, whitespace-tolerant)
  • format_connect_button href + label overrides + slug validation
  • format_connection_card composes all three primitives
  • All 12 chip CSS classes (.rc-state-chip.<kebab> × 10 + .rc-state-chip-reason + .rc-connect-button) exist in docs/styles/rc.css
  • Mirrors the import pattern + comment style of the sister test_connection_state.py
• scripts/checks/catalog-state-chip-smoke.sh (~137 LOC) — 3 checks:
  • All 13 required CSS classes present in docs/styles/rc.css
  • python3 -m pytest homeassistant/packages/tests/test_connection_card.py -v exits 0
  • Every connections/*/connection.yml state: value maps to a chip CSS class (drift guard)
• docs/reference/rc-connection-state-chip.md (~107 lines) — IKEA-style 5-step reference:
  • State table (10 states × colour × plain-English meaning)
  • Step-by-step: pick state → edit connection.yml → open page → paste HTML → verify locally
  • Copy-pastable code snippets; colour legend; link back to Wave 9 #123.c.ii: Phase 7 Security Review — tier-a manifest + services + data-layer + pytest + smoke + IKEA runbook #117 tier-vocabulary rebrand
• docs/styles/rc.css (+200 lines, APPEND only) — new chip CSS section:
  • .rc-state-chip base (999px radius, 12px font-weight 900, 3px 10px padding)
  • 10 kebab variants per spec colour palette: .available neutral gray / .detected light teal / .ready-to-connect teal accent / .connecting animated pulse / .connected green accent / .needs-information yellow / .needs-attention orange / .unsupported gray + diagonal stripe / .offline red / .update-available purple
  • .rc-state-chip-reason subtitle (11px, opacity 0.7)
  • .rc-connect-button solid teal (8px radius, 6px 14px padding, no gradient — distinct from existing .rc-cta)
  • .rc-state-chip-row inline-flex wrapper for the catalog row
• scripts/check.sh (+8 lines) — one new run_if_present entry for the smoke check (placed after the Wave 9 connection-manifest block; chains naturally when both Wave 9 #123.c.ii: Phase 7 Security Review — tier-a manifest + services + data-layer + pytest + smoke + IKEA runbook #117 and Wave 9 #122.d.iv — Phase 6 Tailscale wizard: mDNS roamcore.local fallback (Gate E 'local survives Tailscale failure') #118 PRs land)
• docs/catalog/connectivity/starlink.md (+7 lines) — visible demo at the top: state chip ("Ready to connect") + tier pill ("Community Verified") + Connect button
• mkdocs.yml (+1 line) — Connection state chip: reference/rc-connection-state-chip.md under Technical (advanced)

Verification

• bash scripts/check.sh --core-only → GREEN (exit 0)
• python3 -m pytest homeassistant/packages/tests/test_connection_card.py -v → 36 passed in 0.08s (zero failures)
• bash scripts/checks/catalog-state-chip-smoke.sh → PASS
• All 10 .rc-state-<kebab-case> CSS classes present in rc.css
• Every connections/*/connection.yml state: value maps to a chip CSS class
• Starlink page renders the chip + tier pill + Connect button inline at the top

Out of scope (per slice spec)

• No changes to docs/catalog/index.md (PR Wave 9 #124: Docs cleanup + app-store landing #87 owns that file)
• No changes to connections/*/connection.yml files (this slice is purely additive UI)
• No changes to homeassistant/ files outside the new test file (no edits to packages yaml, custom_components, etc.)
• No tier-letter or tier-name claims introduced (pure UI primitive)
• No new secret surface

Rollback

git revert <this-sha>. Clean revert; no schema or state migrations. No external state touched; no backup needed.

🤖 Generated with OpenClaw subagent (Wave 9 #118)