| name | web-stream |
| description | Conductor for the web/ stream — the Vite + React dashboard that renders
the BenchReport contract. Owns panels, render-truth surfaces, and the
four-step verify cycle (vitest → bench → gate → playwright). Absorbs
spectrafit-devboard and spectrafit-benchmark (web side); their
specialist content lives in references/. Use when a task touches
web/src/, panel registries, plot mounts, screenshots, dashboard export,
or the manuscript-review gate. Composes with
superpowers:test-driven-development and cupertino-council. Serena-first.
|
| license | MIT |
web-stream
The single entry point for any Web-side work in spectrafit-core. Reads
.claude/skills/INDEX.yaml § web-stream for its anchor slice, then
dispatches to a references/ sub-document.
Anchors
CLAUDE.md sections (read before acting):
- Running & previewing the dashboard (Claude Desktop / preview) —
detached server discipline, preview tool usage, contract regen flow.
- Benchmark Engine (
oracles) + Report — the 3 destinations (Standing,
Audit, Evidence), the PanelRecord registry as single source of truth.
Hooks that will fire:
enforce-render-boundary.sh — block Python/template engines in TSX,
block Pydantic in web files.frontend-soft-freeze.sh — block exported-symbol deletions and table-
header removals on Edit; additive changes allowed.
Serena first
The first action on any code-touching task MUST be a serena MCP call:
mcp__serena__get_symbols_overview → orient a TSX file
mcp__serena__find_symbol PanelRecord → locate a panel definition
mcp__serena__find_referencing_symbols → who consumes this prop / type
enforce-serena-first.sh will warn on Grep patterns like
class \w, def \w from inside web/.
Preview discipline (anchored to CLAUDE.md)
Two named servers live in .claude/launch.json:
| Name | Port | What | CLI fallback (detached) |
|---|
api | 8000 | FastAPI /api/report | nohup uv run poe serve &>/dev/null & disown |
web | 5173 | Vite, proxies /api → :8000 | nohup npm --prefix web run dev &>/dev/null & disown |
Start api before web. Use preview_start <name> in Claude Desktop —
it handles detachment. Inspect the live page with preview_screenshot,
preview_snapshot, preview_eval, preview_inspect, preview_console_logs,
preview_network — these are faster than re-screenshotting.
Port-conflict recovery:
kill $(lsof -tiTCP:8000 -sTCP:LISTEN) 2>/dev/null || true.
The four-step verify loop (anchored to docs/methodology.md §3)
After any web edit:
cd web && npm run test — vitest / happy-dom, no browser.uv run poe benchmark (or skip if no contract change).uv run spc-bench gate — geomean speedup + max |Δr²| gate.uv run poe web_e2e — Playwright dashboard-render-audit.
Needs both servers up; auto-starts Vite but not the API.
Step 4 is the slow lane — in tri-stream mode it runs in a parallel
subagent, never blocks the fast loop.
Decision: which sub-document?
| Subject | Reference |
|---|
| Dashboard report panels, devboard HTML export, OKLCH dark mode, visx plot mounts | references/devboard.md |
| BenchReport contract on the web side, openapi.gen.ts regen, panel registry consumption | references/benchmark-web.md |
Composes with
- Before:
superpowers:test-driven-development — a failing vitest
first (or a noHardcodedBackend.test.ts source-scan, or a
contractCoverage.test.ts assertion).
- While: this skill's reference for the subject, serena-driven.
- Design questions:
cupertino-council (now part of
quality-council) — Apple-style 5-voice critique on panel design.
- After: the four-step verify cycle.
- If stuck:
andon-loop/references/stuck-mode.md.
Three-pillar reporting
- PERF: panel render time, plot mount cost (visx + ResizeObserver).
- RIGOR:
noHardcodedBackend.test.ts + contractCoverage.test.ts
green; every backend enumerated via solversOf(report).
- PRESENTATION: this is the stream's primary pillar — the
render-truth panel snapshot, the Audit W1–W7 status, the manuscript-
review gate.
