Site-health card grid for the dashboard — sketch parked 2026-05-17

DARE.CO.UK · PARKED SKETCH · 2026-05-18

Mirrored from ~/.claude/.../memory/project_site_health_cards_parked.md. This is a design sketch parked for future build — read for context, not as a current deliverable.

7-card health grid sitting below the existing Edge-health 4-card row. Each card = one of today’s hygiene tripwires rendered in the calm-baseline + bold-red-fill style. Data is already produced by dare_daily_hygiene.py; the sketch is the UI bind. Build in a fresh session.

Dan, 2026-05-17, after today’s 7-tripwire hygiene runner shipped: “health cards for dashboard that capture the general site might be a good sketch.”

The concept: sits below the existing .edge-health 4-card section on dashboard.dare.co.uk. Same visual register (calm baseline, bold-red-fill escalation on critical). One card per hygiene tripwire — each card surfaces its verdict + key metric + one-line summary + last-run timestamp + click-through to the detail report on devreports.dare.co.uk.

Card grid (today’s first-run state):

�STASH5�

Why this is the right shape:

  1. Composable with what exists. The Edge-health 4-card section Dan already loves (feedback_edge_health_cards, A/B-preview validated 2026-05-16) — same calm-baseline + bold-red rhythm. The 7 health cards are a sibling row, not a redesign.
  2. Data already produced. dare_daily_hygiene.py runs daily, emits dare_daily_hygiene_<DATE>.html with all 7 checks. Each adapter’s run_check() returns {verdict, summary, metrics, detail_md, detail_html} — that’s exactly card-shape.
  3. Click-through builds the catalog → dashboard → detail loop. Each card linked to the corresponding dev-reports artefact. Reader flow: dashboard glance → “huh, SEO yellow today” → click → detail page → ah, og:title divergences.
  4. One-glance site-health — same UX as a status page, but auto-generated from real audit data, not hand-curated.

Implementation (next session):

Add render_health_cards(when: date) helper to dare_cf_analytics.py. Reads the latest dare_daily_hygiene_<DATE>.json (or runs the hygiene adapters directly with --emit-json). Emits a <section class="health-cards"> block wrapping 7 .health-card divs. Hook into the dashboard HTML between .edge-health and the .cache-chart-header section.

Borrow Edge-health CSS for visual consistency: .health-card { /* same shape as .edge-card */ }, .health-card.red { /* same bold-red fill */ }, etc. New rules added under the existing .edge-grid styles.

Estimated scope: - ~30 LOC new function in dare_cf_analytics.py - ~40 LOC CSS (mostly reusing Edge-health patterns) - ~10 LOC integration point (place the section in the dashboard HTML) - Total: ~80 LOC, ~30-45 min

Portfolio applicability:

Same card grid lifts to dogwood.house, audreyinc.com, gf.cx when those sites get their own hygiene tripwires. Per-brand hygiene runner emits same JSON shape; per-brand dashboard renders same card grid; reading is consistent across the portfolio.

Decisions to make in build session:

  1. Click-through target: dev-reports catalog (which works on devreports.dare.co.uk behind CDN, security layer, and DNS provider sitting in front of dare.co.uk.">CF Access) vs an inline expand-on-hover that shows the detail markdown inline. Probably both — title links external, the rest of the card hover-shows summary metrics.
  2. Card ordering: by verdict severity (red → yellow → green) so red cards always lead, OR by topic grouping (Content / Crawler / Security). Today’s CHECKS list order is roughly topic-grouped.
  3. Time-decay signal: should yellow-for-N-days escalate to red? E.g. SEO title audit yellow for 2 weeks = template regression vs single drift. Not in scope for MVP.

Sibling memories: - feedback_audit_tripwire_pattern.md — produces the data this UI binds. - feedback_edge_health_cards — the design precedent (calm baseline + bold-red). - feedback_intelligence_framework.md axis #6 (visual storytelling substrate) — health cards are this rule applied to ops-health. - feedback_reports_evaluate_visuals.md — same axis on the report side. - project_audrey_commerce_flywheel.md — sibling “structured data → SERP discovery” pattern; site-health is the upstream gate.

Resume conditions: - Next dashboard refresh session (already 2× daily via CI) - A specific tripwire goes RED and the rollup-only signal feels insufficient - Portfolio brand starts using the same hygiene framework and needs cards day-one

Source: parked_sketch_site_health_cards_2026-05-17.md · Rendered 2026-05-18 12:53