Reviewing candidates

Compare at the intended size, choose a baseline, and transfer feedback for a new round.

Open your session with pnpm dev, or practice in One explanation, ten directions. Keep the brief's teaching goal in view: you are choosing the drawing that makes that explanation clear at its real display size.

Find drawings worth comparing

Start in Gallery. A new session opens on its first round; round links let you revisit earlier work. Search and tone filters narrow the drawings shown. Every candidate retains its stable ID, such as r01-c01, through filtering and navigation. Use that ID when discussing a drawing with the agent.

Open a thumbnail to Inspect it. Add two candidates to comparison with the comparison buttons, then use Compare to see them together. For a concrete exercise, compare r01-c01 (Fine outline) and r01-c04 (UI miniature) in the tone-exploration session: both explain pattern and text inputs becoming a composition, with different drawing conventions.

The five project studies on Examples have separate subjects and sessions. Use them to study adaptation; use alternatives within one shared brief when deciding which drawing explains your feature best. The tone catalog is a collection of authored references to consult when asking for more candidates.

Match the conditions of the final placement

Light and Dark select the candidate's declared artwork files. Surface chooses Match theme, Paper, Ink, or Transparency behind the image. The app's own appearance is separate from both. Keep the same artwork theme and surface when comparing candidates.

If a candidate has no dark SVG, the viewer shows Dark asset unavailable. Changing the surface cannot synthesize that file. Some references intentionally use a dark canvas in both theme variants; inspect their contrast in the actual destination.

Use the stage controls to investigate details:

Then inspect Placement preview. Its artwork uses the session's target.width and target.height in CSS pixels, with the supplied context heading and body. A 720 × 400 viewBox shown in a 360 × 200 target is reduced by half. Judge text, arrowheads, line weight, and grouping here before choosing a direction. On a narrow screen, scroll the placement sideways; the target dimensions are preserved.

For example, the zudo-text study uses 280 × 156 px, while the zzmod study uses 480 × 267 px. These are review fixtures; the integrating application still needs its own placement check.

Shortlist possibilities, then choose a baseline

Shortlist keeps several promising candidates available through the sidebar's shortlist filter. Choose direction records the single drawing that should be the starting point for the next step. A shortlist alone does not request integration.

Open the candidate you want to discuss and fill in Keep, Change, and Next action. The available actions are Refine this direction, Explore more alternatives, and Integrate this candidate. They record your request for transfer to the agent; selecting one does not run that work.

Here is feedback modeled on the illustrative refinement in the tone-exploration fixture:

Session: composer-tone-exploration
Chosen direction: r01-c01

Keep: Positions, labels, surfaces, and palette.
Change: Strengthen the four essential connectors for the 360 × 200 placement.
Next action: Refine this direction.

The supplied r02-c01 demonstrates that bounded edit. It is sample lineage, not a recorded user preference. For your own session, describe the changes you actually want and identify any other drawing you reference by its full ID.

Transfer the review to the agent

Review notes, shortlist, and chosen direction are stored in this browser when storage is available. They are associated with the session ID. Browser storage also belongs to the site's origin: opening a different host or port does not guarantee the same saved state. Download a review record before moving between environments.

An import replaces the current notes, shortlist, and chosen direction with the imported record. Download the current record first if you need to keep it. Records from another session or with unknown candidate IDs are rejected. Importing a review does not add missing candidate files; the matching session content must already exist.

Copy, download, and import do not write feedback to the source workspace. The browser chooses the download location. Give the agent the copied text or downloaded file explicitly; none of these actions automatically resumes an agent conversation. If the viewer reports that browser storage is unavailable, download the review before closing it.

Recheck feedback when the content changes

Review records capture a candidate's fingerprint. If its metadata or SVG content changes under the same ID, earlier notes or choices can be marked Changed since review. The feedback remains available, but you need to inspect the current version before carrying it forward. Use I've reviewed this version after doing so.

For intentional revisions, preserve the reviewed files and create a new candidate in a later round. This keeps the earlier drawing and its feedback available instead of relying on stale-state detection to stand in for version history.

Compare the revision and export the result

A refinement's parentCandidateId points back to the saved baseline, and its round can record that baseline in baselineCandidateId. In the tone-exploration fixture, r02-c01 points to r01-c01. The Refined from link opens the parent; you can also return to the earlier round and add both drawings to comparison.

Ask the agent to follow Create a refinement round. Once you have reviewed the result, Download light SVG or Download dark SVG saves that candidate's selected asset. The CLI export command can copy the same declared file into an explicit output path. Review JSON carries decisions; SVG export carries artwork.

Before integrating, check the exported SVG in the destination's actual dimensions, theme, and surrounding text. Follow SVG authoring for self-contained assets and accessibility at integration.

Review with the keyboard

Tab through the controls and use their native keyboard actions. Outside text fields and selects, Left/Right moves between candidates, Escape returns to Gallery, and S toggles the active candidate's shortlist status. In inspection or comparison, + and - adjust zoom. Text input retains its normal editing behavior.