Style mismatches shown on the dashboard

[hungify]

Summary

• packages/contracts/src/score.ts — add topIssueSchema (mirrors @framelia/verify's TopIssue; contracts can't import it directly since verify depends on contracts, not the reverse) and thread topIssues through visualScoreArtifactSchema.
• packages/contracts/src/dashboard.ts — add DashboardTopIssue type and topIssues field on DashboardContractResult, wired through assembleContractResult (one conditional-spread, following the file's existing convention for optional fields).
• packages/playwright/src/score-attachment.ts — tighten FrameliaScoreAttachment.topIssues from a loose 3-field inline type to the real TopIssue[] shape (matches what buildScoreAttachment already assigned at runtime).
• packages/playwright/src/report-projection.ts (deriveContract) and packages/dashboard-server/src/model.ts (deriveContractResult) — pass topIssues through to assembleContractResult on both the live-run and durable-report paths.
• apps/dashboard/components/ContractDetails.vue — new "Style mismatches vs. Figma" panel, filtered to style-color/style-typography issue kinds, following the existing Blockers/Diagnostics list pattern. No mismatches → panel simply doesn't render (v-if), consistent with how every other optional section in this file behaves.

Closes #11

Judgement calls

• Rendered the issue's existing message string as-is (already formatted as style mismatch on ${field}: expected ${expected}, actual ${actual}) rather than parsing it into structured expected/actual columns — matches how every other topIssues/diagnostics consumer in the codebase renders these, and avoids widening TopIssue's shape for one UI.
• No explicit "no drift" empty state — the panel omits itself via v-if when there are no style mismatches, matching every other optional section in ContractDetails.vue (Blockers, Diagnostics, Mask evidence, etc.), none of which show an empty-state message either.
• No new Vue component-mount test — apps/dashboard/tests has no existing component-mount test infrastructure (all tests are lib//composables/ unit tests), so introducing one for this single panel was out of scope; instead added logic-level coverage at the two derivation points that actually own the behavior (dashboard-server's projectArtifact, playwright's FrameliaReporter).

Test plan

• packages/dashboard-server/tests/model.test.ts (+2): a scored contract with topIssues projects topIssues onto the dashboard result; a scored contract with none omits the field entirely
• packages/playwright/tests/reporter.test.ts (+1): a matcher's style-color topIssue on the live score attachment surfaces on /api/run's contract entry
• Full workspace: pnpm -r typecheck (6/6 packages) and pnpm -r test (contracts/verify/playwright 41/41/dashboard-server 17/17/dashboard 41/41/cli 63/63) all green
• pnpm lint / pnpm fmt:check clean

Summary by CodeRabbit

• New Features

  • Dashboard results now include top visual issues, including style and typography mismatches.
  • Diagnostics show issue categories and messages as informational, non-blocking evidence.
  • Issue details may include severity, hints, repair guidance, and blocking status.
  • Top issue information is surfaced consistently from visual scoring through live dashboard reports.

• Bug Fixes

  • Improved handling when no top issues are available by returning an empty list.

• Tests

  • Added coverage for issue propagation across reports and multiple matcher results.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 9a9641e9-b536-4b1f-9044-cd77c262f443

📥 Commits

Reviewing files that changed from the base of the PR and between 05d1eca and 2bce7a0.

📒 Files selected for processing (2)

• packages/playwright/src/report-projection.ts
• packages/playwright/tests/reporter.test.ts

Included review availability: Your plan provides up to 10 included reviews per hour; 8 remain after this review.

---

📝 Walkthrough

Walkthrough

The change adds a shared top-issue contract, propagates issues through score and dashboard projections, and displays color and typography mismatches as informational evidence in contract details.

Changes

Style mismatch dashboard evidence

Layer / File(s)	Summary
Top-issue contracts packages/contracts/src/score.ts, packages/contracts/src/dashboard.ts	The score contract validates top issues. Dashboard results accept optional top issues and include them when the input is non-empty.
Score-to-dashboard propagation packages/playwright/src/score-attachment.ts, packages/playwright/src/report-projection.ts, packages/dashboard-server/src/model.ts, packages/dashboard-server/tests/model.test.ts	Playwright and dashboard-server projections preserve top issues and use empty-list fallbacks. Tests cover issue propagation and no-issue results.
Dashboard style mismatch display apps/dashboard/components/ContractDetails.vue, packages/playwright/tests/reporter.test.ts	Contract details filters style-color and style-typography issues and renders their kind and message as informational evidence. Reporter tests verify issue aggregation and dashboard exposure.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: 🔵 Low · up to 2bce7

The PR adds style-mismatch details to dashboard results and the UI. It is mergeable with owner awareness because live-run data is less strictly validated than durable reports, so malformed attachment data could be displayed inconsistently and merits follow-up validation.

Sequence Diagram(s)

sequenceDiagram
  participant Matcher
  participant ScoreAttachment
  participant ReportProjection
  participant DashboardServer
  participant ContractDetails
  Matcher->>ScoreAttachment: provide topIssues
  ScoreAttachment->>ReportProjection: expose typed topIssues
  ReportProjection->>DashboardServer: assemble contract result
  DashboardServer->>ContractDetails: provide dashboard topIssues
  ContractDetails->>ContractDetails: filter style-color and style-typography
  ContractDetails->>ContractDetails: render informational evidence

Loading

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR displays style issue kind and message, but the provided changes do not show expected and actual values as required by issue #11.	Update the dashboard issue data or rendering to show each mismatched field with both its expected value and its actual rendered value.
Docstring Coverage	⚠️ Warning	Docstring coverage is 57.14% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 7 functions across 7 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the primary change: displaying style mismatches on the dashboard.
Out of Scope Changes check	✅ Passed	The schema, propagation, UI, and tests directly support displaying style mismatches described in issue #11.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch issue-11-dashboard-style-mismatch

---

_{Comment @coderabbitai help to get the list of available commands.}

[greptile-apps]

Greptile Summary

The PR propagates visual-score top issues through the contracts, durable-report, and live-report layers, then displays color and typography mismatches on the dashboard.

• Adds a validated top-issue contract shared by dashboard projections.
• Preserves top issues in durable and live dashboard results.
• Aggregates issues from every matcher call represented by a single live row.
• Adds an informational style-mismatch panel and projection coverage.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
packages/playwright/src/report-projection.ts	Projects each score attachment’s top issues and aggregates all matcher calls into the test’s single live dashboard row, resolving the previously reported omission.
packages/contracts/src/score.ts	Adds strict validation and exported typing for visual-score top issues.
packages/contracts/src/dashboard.ts	Extends dashboard contract assembly to include non-empty top-issue collections.
packages/dashboard-server/src/model.ts	Propagates validated top issues from durable visual-score artifacts into dashboard results.
apps/dashboard/components/ContractDetails.vue	Filters color and typography issues into an optional informational style-mismatch panel.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  A[Matcher score attachments] --> B[deriveContract per matcher]
  B --> C[Aggregate topIssues in finalizeTestEnd]
  C --> D[Live dashboard contract]
  E[visual-score.json] --> F[Durable report projection]
  F --> G[Dashboard contract]
  D --> H[ContractDetails style mismatch panel]
  G --> H

Loading

_{Reviews (2): Last reviewed commit: "Implement style mismatch tracking in Con..." | Re-trigger Greptile}