Reading the report
After every spread run, Tostada injects a right-side report panel into the spread iframe. It lists every approximation the pipeline made — the things that aren't a faithful 1:1 rebuild of the source in your design system.
The report panel is also what the /spread Claude Code skill emits when run from the CLI.
What you see
A fixed panel on the right edge of the spread iframe:
- Header — title + a count badge showing the total number of items
- Item list — one row per approximation, scrollable
- Collapse toggle — a floating button at the bottom-right to slide the panel off-screen and reclaim the space
Categories
Each item is labeled with one of six categories:
| Category | Meaning | Example |
|---|---|---|
icon |
No close match in the Tostada icon set | "YouTube logo — used brand-mark + ▶ glyph" |
component |
No close component equivalent | "Animated avatar stack — used static avatars" |
layout |
Ambiguous structure; the pipeline picked one option | "Three-pane editor — simplified to two-pane" |
content |
Text or media skipped, summarised, or placeholder-d | "Embedded video — replaced with thumbnail" |
behavior |
Interaction couldn't be replicated | "Real-time presence indicators — static state" |
asset |
Image/font/video unavailable (CORS, auth) | "Hero image — broken; CORS-blocked" |
Categories appear as small color-coded badges on each item.
Hover-highlight
Hover any item; the matching DOM elements in the spread iframe are outlined with a dashed warning ring. This is the fastest way to understand what an item refers to.
Each item carries a CSS selector (in data-target on the <li>). The script highlights every element matching that selector — useful when an approximation affects many elements (e.g. every card on a grid).
Collapsing the panel
A floating toggle button (⟩ / ⟨) at the bottom-right slides the panel off-screen. Click again to bring it back. The button stays visible at the viewport edge in both states.
In the saved HTML
The same report ships in three forms inside the output:
- The visible panel (described above)
- An HTML comment block before
</body>— parseable for tooling, with each line including a category prefix and the CSS selector - A
console.groupblock — opens in browser devtools so devs can see the full list even when the panel is hidden
This means the spread HTML is self-documenting: anyone reviewing the output can see exactly what was approximated, without needing the original to compare against.
Selectors
- Class-based selectors are preferred over deep descendant chains
- A category that affects many elements uses one selector that matches all of them (
.tostada-card.story) - The pseudo-value
noneis used for global items with no specific DOM target (color palette swap, font family choice)
Why this matters
Reviewing the report is what makes the Spread a tool you can trust. The panel isn't just decoration — it's the pipeline being honest about where it approximated. Once you scan it, you know exactly which parts of the rebuild are 1:1 with your system and which are best-effort.