feat(autoresearch): render run dashboard with quill-charts

[pauldambra]

@fercgomes can we switch to the quill chart library?

Summary

Renders the autoresearch run dashboard with @posthog/quill-charts (already a packages/ui dependency — no new packages):

• MetricChart is now a quill LineChart: solid value series with point dots, dashed "best so far" frontier, and a goal ReferenceLine for the target (kept on-plot via valueDomain: { include }). Gains crosshair + tooltips and follows the app theme via useChartTheme().
• RunStats cards are quill MetricCards: Best and Last carry sparklines (best-so-far frontier / raw values, with hover-to-inspect headlines); Iterations formats N / max; Target shows the target or "—".
• Canvas series colors use the resolved theme palette — canvas strokeStyle ignores var(--…) strings, so explicit CSS-variable colors silently never painted (caught via the new storybook story). The DOM-rendered ReferenceLine keeps var(--green-9).
• New storybook story Autoresearch/RunDashboard (in-progress minimize run, completed maximize run, empty state) for visual review — pnpm --filter code storybook.
• Shared metricFormat.ts helpers (deltaTone, formatMetricDelta, metricNumberFormat, formatChartValue) remain, used by the chart, cards, and iterations table.

We changed our minds 🙂

This PR started as an HTML/PNG report export (see early commits and review threads). Review surfaced duplication between the export's hand-rolled chart and the live one; unifying on quill-charts turned out to be incompatible with a static export (canvas rendering + DOM-overlay reference lines + runtime CSS-variable theming don't survive static rasterization). Choosing between the two, the quill migration won — the export feature is removed (reportExport, chartLayout, the Export button, and their tests). The QA Swarm review threads about export code refer to deleted code.

Testing

• 13 vitest cases on the shared formatting helpers; typecheck, Biome, and build-storybook clean.
• Stories screenshot-verified headlessly (chart lines, target line, card sparklines all paint).

🤖 Generated with Claude Code

Screenshots

From the Autoresearch/RunDashboard storybook stories (dark theme, 2×):

Minimize run in progress — value line + best-so-far frontier + target line; Best/Last cards with sparklines:

Maximize run completed — % unit, no target, best tag at iteration 9:

_{Images live on the non-merging posthog-code/pr-3213-assets branch, so no binaries land in main with this PR.}

[trunk-io]

😎 Merged manually by @pauldambra - details.

[pauldambra]

/trunk merge

[github-actions]

React Doctor found no issues in the changed files. 🎉

_{Reviewed by React Doctor for commit 3f51ab9.}

[pauldambra]

/trunk cancel

[pauldambra]

Note

🤖 Automated comment by QA Swarm — not written by a human

QA Swarm review complete. See inline comments.

[pauldambra]

Note

🤖 Automated comment by QA Swarm — not written by a human

Multi-perspective review: paul-reviewer, xp-reviewer, security-audit (qa-team unavailable in this environment — skipped)

Verdict: 💬 APPROVE WITH NITS

No correctness or security blockers. The one substantive theme is duplication between the export module and its live-UI neighbours; everything else is preference.

Key findings

🟡 MEDIUM

• reportExport.ts:85 — chart layout math is a second copy of MetricChart's computation; extract a shared pure computeChartLayout helper so the export can't silently drift from the on-screen chart (convergent: paul + xp)
• reportExport.ts:159 — delta formatting/coloring + number formatters are a third copy shared with IterationsTable/metricFormat; fold into metricFormat.ts

🟢 LOW / ⚪ NIT

• reportExport.ts:170 — pass direction instead of the whole run to deltaColor
• reportExport.ts:344 — thread exportedAt through the PNG path like the HTML path, for consistency/testability
• AutoresearchPanel.tsx:278 — add a data-attr to the Export trigger/items so usage is measurable
• AutoresearchPanel.tsx:290 — HTML vs PNG error-handling asymmetry (informational)

Convergence

The chart-layout duplication was flagged independently by paul-reviewer and xp-reviewer — highest-confidence finding.

Reviewer summaries

Reviewer	Assessment
👤 paul	solid, self-contained, security-sensitive bits handled and tested; only real pause is the duplicated chart math — ship as you see fit
📐 xp	clean pure-builder/side-effect separation and good tests; duplication (chart layout, delta/format helpers) is the only thing to push on
🛡 security-audit	no exploitable findings — every agent-text interpolation is escaped, numerics are Zod-constrained, the innerHTML→XMLSerializer→foreignObject round-trip can't produce agent-created elements, exported HTML is fully static

---

Automated by QA Swarm — not a human review

[stamphog]

Gates denied due to size (576L exceeds 500L ceiling). The PR is purely additive and low-risk, but the automated QA Swarm left unresolved MEDIUM concerns about duplicated chart layout math and formatting logic that could silently diverge from the on-screen view — worth a quick human sign-off before merging.

[pauldambra]

Note

🤖 Automated comment by QA Swarm — not written by a human

Round 2 re-review of the fix commits (006d38b..419b093)

Verdict: ✅ APPROVE

All three reviewers verified the round-1 fixes (narrowed deltaColor, exportedAt threading, data-attrs, reportTitle helper) land cleanly with nothing new to flag; security-audit confirmed no untrusted data gained a new or unescaped path in the delta. The two deferred duplication threads (chart layout math, delta/format helpers) remain open for the human decision.

[stamphog]

The PR exceeds the size gate ceiling and has two unresolved MEDIUM inline comments about duplicated chart layout math (silently diverges from on-screen view) and duplicated formatting/delta logic that mirrors existing code. These warrant a quick human sign-off before merging.

[stamphog]

The PR was denied solely for exceeding the size gate (637L vs 500L ceiling). All substantive review concerns — duplicated chart layout math and formatting logic — were addressed in follow-up commits by extracting shared helpers. The changes are purely UI (Storybook stories, chart refactor, format utilities, tests) with no data model, API contract, or security surface. Needs a human sign-off to confirm the extracted helpers actually replaced the duplication correctly.

[fercgomes]

oh yeah