From 4535525f8eb0b8d6e3288211c87d80e8b8631eab Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Sun, 12 Apr 2026 18:32:51 -0700 Subject: [PATCH] Add wrap CLI helper and optimize agent generation loop Three optimizations to cut the generate loop from ~40s to ~15-20s: 1. wrap CLI helper (src/live/wrap.mjs): finds an element in source by ID, class names, or tag+class combo, wraps it in the variant container with original snapshot, and returns the file path + insert line. Replaces 3-4 agent tool calls (grep + read + edit) with one. Supports --element-id, --classes (comma-separated), --tag, --query (fallback). Searches in priority order: ID > class combo > single class > raw text. Auto-detects comment syntax (HTML vs JSX). 2. Batch variant writes: skill reference updated to instruct the agent to write ALL variants in a single file edit instead of one per variant. Saves N-1 tool call round-trips (~3-5s each). 3. Page URL in generate event: browser now includes location.pathname so the agent can map URL to source file directly (/ = index.html, /about = about.tsx, etc.) without grepping. Net effect: agent flow is now 4 tool calls (wrap + edit + read-variant + poll-reply) instead of 8+ (grep + read + create-wrapper + N edits + poll-reply). Co-Authored-By: Claude Opus 4.6 (1M context) --- .agents/skills/impeccable/reference/live.md | 86 +++-- .claude/skills/impeccable/reference/live.md | 86 +++-- .codex/skills/impeccable/reference/live.md | 86 +++-- .cursor/skills/impeccable/reference/live.md | 86 +++-- .gemini/skills/impeccable/reference/live.md | 86 +++-- .kiro/skills/impeccable/reference/live.md | 86 +++-- .opencode/skills/impeccable/reference/live.md | 86 +++-- .pi/skills/impeccable/reference/live.md | 86 +++-- .rovodev/skills/impeccable/reference/live.md | 86 +++-- .trae-cn/skills/impeccable/reference/live.md | 86 +++-- .trae/skills/impeccable/reference/live.md | 86 +++-- bin/cli.js | 5 + source/skills/impeccable/reference/live.md | 86 +++-- src/live/browser.js | 1 + src/live/wrap.mjs | 298 ++++++++++++++++++ 15 files changed, 748 insertions(+), 588 deletions(-) create mode 100644 src/live/wrap.mjs diff --git a/.agents/skills/impeccable/reference/live.md b/.agents/skills/impeccable/reference/live.md index 30b5076ca..53b64a21a 100644 --- a/.agents/skills/impeccable/reference/live.md +++ b/.agents/skills/impeccable/reference/live.md @@ -76,80 +76,68 @@ END LOOP ## Handle Generate -The event contains: `{id, action, freeformPrompt, count, element}`. +The event contains: `{id, action, freeformPrompt, count, pageUrl, element}`. -### Step 1: Find the source file +**Speed matters.** The user is watching a spinner. Minimize tool calls by using the `wrap` helper and writing all variants in a single edit. -Use `element.tagName`, `element.id`, `element.classes`, `element.textContent`, and `element.outerHTML` to locate the element in the project source. Search for matching markup across the codebase. +### Step 1: Wrap the element (one CLI call) -### Step 2: Create the variant wrapper +Use the `wrap` helper to find the element and create the variant container: -Wrap the original element in a variant container. Use the comment syntax appropriate for the framework: - -**HTML / Vue / Svelte:** -```html - -
-
- -
-
- +```bash +npx impeccable wrap --id EVENT_ID --count EVENT_COUNT --element-id "ELEMENT_ID" --classes "class1,class2" --tag "div" ``` -**JSX / TSX:** -```jsx -{/* impeccable-variants-start SESSION_ID */} -
-
- {/* move the original element here */} -
-
-{/* impeccable-variants-end SESSION_ID */} +Pass the element's id (`event.element.id`), classes (`event.element.classes` joined with commas), and tag name. The command searches in priority order: ID match first, then class names, then tag+class combo. If `event.pageUrl` hints at the file (e.g., `/` is usually `index.html`), pass `--file PATH` to skip the search. + +The command outputs JSON with the file path and the insert line: +```json +{"file": "public/index.html", "insertLine": 93, "commentSyntax": {"open": ""}} ``` -Replace SESSION_ID with `event.id` and COUNT with `event.count`. +If `wrap` fails, fall back to manual grep + edit. -`display: contents` makes the wrapper layout-transparent, preserving the original element's relationship with its parent (flex/grid child, etc.). - -### Step 3: Generate variants one by one - -For each variant (1 through COUNT): +### Step 2: Generate all variants and write them in a SINGLE edit 1. **Load the design command's reference file.** If `event.action` is "bolder", load `reference/bolder.md`. If "impeccable" (the default), use the main design principles from this skill without loading a sub-command reference. -2. **Generate a complete replacement** for the original element. Each variant is a full HTML+CSS rewrite, not a patch. Consider the element's context (computed styles, parent structure, CSS custom properties from `event.element`). +2. **Generate ALL variants at once.** For each variant, create a complete HTML replacement of the original element. Consider the element's context (computed styles, parent structure, CSS custom properties from `event.element`). -3. **Diversify across variants.** Each variant should take a distinctly different approach. For "bolder", one might focus on type weight, another on color saturation, another on spatial scale, another on structural change. Do NOT generate 4 variations on the same idea. +3. **Diversify across variants.** Each variant should take a distinctly different approach. For "bolder", one might focus on type weight, another on color saturation, another on spatial scale, another on structural change. Do NOT generate N variations on the same idea. 4. **If a freeform prompt was provided** (`event.freeformPrompt`), use it as additional guidance for all variants. -5. **Write the variant** into the wrapper in the source file: - ```html -
- -
- ``` - The first variant should NOT have `style="display: none"` (it should be visible by default). +5. **Write all variants in a single file edit** at the insert line reported by `wrap`. Use the comment syntax from the `wrap` output: -6. **Write scoped CSS** if the variant needs styles beyond inline: +```html + +
+ +
+
+ +
+
+ +
+``` + +The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. + +6. **Write scoped CSS** if the variants need styles beyond inline: ```css /* impeccable-variants-css-start SESSION_ID */ - @scope ([data-impeccable-variant="N"]) { - :scope { /* styles for the variant root */ } - .child-class { /* styles for children */ } - } + @scope ([data-impeccable-variant="1"]) { ... } + @scope ([data-impeccable-variant="2"]) { ... } /* impeccable-variants-css-end SESSION_ID */ ``` - Place the CSS in a `