fix(Bob): carry the reference into generation, teach the full component system

[surajshetty3416]

Asking the AI to build or edit a page that should fit the rest of the site kept failing in repeatable ways: sidebar layouts came out stacked, a font the reference uses once took over every heading, fonts that only exist on another site rendered as the browser's Times fallback, embedded components showed placeholder content and were not functional or reusable, icons the AI placed rendered as empty squares, script edits never reached published pages, and a selected block was quietly ignored.

What changed

• Reference reads feed generation directly. The page-generation step receives the reference's measured facts (layout scaffold, font roles, component details) alongside the brief, instead of relying on prose to carry them. Sidebar-beside-content layouts are now buildable, and measured reference values win over the prompt's own style defaults.
• The component system is fully usable, both halves. The agent sees and edits default content, per-instance overrides, declared props, client scripts, and data scripts. Behaviour it writes for a component ships with every embed.
• Missing fonts are caught, not shipped. A referenced font that cannot load on this site is flagged during the read and in self-review, with system fonts and font stacks handled correctly and probes bounded to one parallel three-second sweep.
• Rendering correctness. Icons the AI places are baked server-side into the authoritative tree (they used to vanish on reload and publish); script edits regenerate the minified public file that published pages serve; canvas updates wait for the round's commit so a just-created component can never fetch as missing.
• Chat and composer. Context blocks are attached explicitly and treated as the request's subject; a wand button sharpens the typed prompt in place (replacing the style-preset picker); timeline labels follow each step's live status; code blocks are readable in both themes.
• Cleanup. A final pass collapsed the accretion from review rounds: one shared guard seam for block updates, schema resolution once per prop write, dead code and a redundant retry removed. Net effect across the branch, excluding the generated icon asset: substantially more deleted than added outside the new capabilities.

Why generation missed the reference's layout and fonts

The generation step receives only a short text brief distilled by the conversational model, and prose loses load-bearing facts: "sidebar beside a scrollable main area" came back as a sidebar stacked above the content, and "uses Newsreader" came back as Newsreader on every heading when the reference uses it once at 48px. read_page now stashes a compact scaffold of the reference's page-level layout plus a design digest where each font states its role (which elements, which sizes), and generate_page passes that to the generation model as ground truth. The generation prompt gained an app-shell recipe (root row of sidebar plus scrolling main column), a rule that measured reference values beat its craft defaults, and nesting discipline (a styled container's content goes inside it). Self-review must re-preview after a layout fix, and its rubric names the visual failure signatures: fallback serif, stale component defaults, content stacked outside an empty container.

The component system: instances, props, client scripts

An embedded component renders its own blocks with default content until the page overrides them. read_page describes each embedded component's default content, declared props, data script, and the adjustments the reference page's own instance applies, including the pattern of hiding shared chrome and building a page-specific variant; the same description is included for the open page's own embeds. The codec exposes which component-internal block each instance child mirrors (of) so a default can be traced to the ref that overrides it.

Props: update_block gains a props argument. A first override borrows the declaration's full config; a prop the definition never declared is declared there too (typed from its value, flagged so the editor's Block Options panel shows it) — but only on a bare schema: a definition that already declares props rejects unknown names against the live schema, so a typo on one instance can never pollute a shared component, and an instance pinned to an old snapshot cannot open the live schema either. Child-targeted prop writes route to the instance root, matching where the canvas and the renderer read them.

Client scripts: component blocks can carry their own {js, css} (component blocks only — page-wide code stays in page scripts, where the editor shows it). The js runs once per rendered instance with this bound to that instance's element and (component_data, props) as arguments; the css is scoped to the block. Writes mirror into the component definition so every embed gets the behaviour. The prompt teaches the access syntax, demands class hooks the model sets itself (the rendered HTML is not the block tree), defaults self-contained interactive units to components without being asked, and requires a built component to end self-contained. Bindings accept props.<name> and component.<key> sources, so text that mirrors a prop reflects prop edits live on the canvas.

Font availability

Builder pages default to Inter, so text in a Times-like serif means a block named a family that is not loading — typically one that existed on the source site only as an uploaded User Font. read_page checks each family against this site's User Fonts and a cached Google Fonts probe, and tells both the agent and the generation step to use a resolvable family and to inform the user about the missing asset. The check probes only the first family of a stack, skips CSS generics and web-safe system fonts, runs all uncached probes in one parallel sweep bounded to three seconds, counts negatives only from a complete sweep, and fails open on network trouble. A combined multi-family request cannot replace per-family probes: that endpoint answers 200 and silently drops unknown families.

Rendering correctness fixes

Icons: the agent emits a compact icon: <name> reference whose SVG was baked only during client-side parsing — under the server-authoritative tree that meant every icon vanished on reload and publish. The server now bakes from the same icon package the frontend uses (shipped as a small gzipped asset, transform kept in lockstep).

Scripts: update_script wrote the doc directly, bypassing the save hook that rewrites the minified public file published pages serve — edits looked applied in the editor while published pages ran the old code. It saves through the document lifecycle now.

Op mirroring: canvas updates are emitted after the round's commit, so an op referencing a doc the round created (a component extract) can no longer reach the editor before the doc exists and cache a missing-component placeholder.

[greptile-apps]

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

_{Reviews (29): Last reviewed commit: "docs(ai): state the font-probe latency r..." | Re-trigger Greptile}

[codecov]

Codecov Report

❌ Patch coverage is 76.62602% with 115 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.22%. Comparing base (335854a) to head (bc51f7a).

Files with missing lines	Patch %	Lines
builder/ai/agent/loop.py	10.86%	41 Missing ⚠️
builder/ai/agent/tools/query.py	79.86%	30 Missing ⚠️
builder/ai/agent/tree.py	75.63%	29 Missing ⚠️
builder/ai/block_codec.py	58.33%	5 Missing ⚠️
builder/ai/agent/tools/scripts.py	0.00%	4 Missing ⚠️
builder/ai/page_writer.py	75.00%	4 Missing ⚠️
builder/ai/agent/artifact.py	75.00%	2 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop     #754      +/-   ##
===========================================
+ Coverage    65.61%   66.22%   +0.60%     
===========================================
  Files           88       90       +2     
  Lines         9585    10015     +430     
===========================================
+ Hits          6289     6632     +343     
- Misses        3296     3383      +87     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

🎉 This PR is included in version 1.33.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀