youiyoux 0.1.0 → 0.1.2

package/README.md

@@ -1,26 +1,36 @@
 # youiyoux
 
-A shareable report on any repo's UI, with no setup:
+**Your agent rebuilds components you already have. youiyoux catches it.**
+
+UI context and verification for coding agents: it tells the agent what your repo already has before
+it writes UI, then checks what it wrote.
 
 ```sh
-npx youiyoux            # in a repo: scan it, write the report
-npx youiyoux path/to/repo
+npx youiyoux              # scan this repo
+npx youiyoux path/to/repo # or another one; --out <dir> writes elsewhere
 ```
 
-It prints five plain-English lines and writes three files to the repo (or `--out <dir>`), and nothing else:
+No config, no account. You get:
+
+- `youiyoux-report.html`: near-duplicate components and which to keep, hardcoded values your theme already has, off-library imports, and the top fixes with their next steps. One offline page.
+- `youiyoux-card.png`: a 1200×630 card with the headline numbers.
+- `youiyoux-summary.md`: paste it into a PR or issue.
+
+## For your agent
 
-| File | What |
-| --- | --- |
-| `youiyoux-report.html` | One self-contained page (no network requests, light and dark, readable on a phone): projects (one section per workspace package with UI files), UI libraries, the component inventory, near-duplicate groups, hardcoded values a theme token already holds, off-library imports and the top fixes, each with a concrete next step |
-| `youiyoux-card.png` | A 1200×630 share card with the repo's name and the headline numbers |
-| `youiyoux-summary.md` | A short summary for a README or pull request |
+```sh
+npx youiyoux agents install   # rule in AGENTS.md + CLAUDE.md, MCP server for Claude Code + Codex
+npx youiyoux hooks install    # check after each Claude Code edit, and at git commit
+```
 
-**Rendered looks.** When a Chromium is installed (the Playwright headless shell, or `YOUI_CHROMIUM`), the most-used components are drawn with the project's own code and CSS and embedded. Otherwise the report says how: `npx youiyoux --render` asks before downloading the headless shell (~100 MB, once); `--yes` allows it without asking. Everything else works without a browser.
+- `ui_find_component` (MCP): before writing a component, the existing one with its import, props and a real usage.
+- `npx youiyoux check --diff`: after UI edits, what the change adds, each with its fix.
+- `ui_render` (MCP) or `npx youiyoux render <file>`: screenshots light and dark, accessibility issues, a diff against base.
 
-**Safe to share by default.** Paths are relative to the repo. Includes relative paths, component names, class lists, counts and rendered images when available. Captions and fixes omit literal prop values and text content; source lines require `--include-code`. Home paths, usernames, environment or `.env` values, and credentials in URLs are removed. `--include-code` adds source lines and full look captions (keys and tokens in it still removed).
+## Privacy
 
-**Set up youiyoux for your agent:** `npx youiyoux agents install` tells Claude Code and Codex to look up the project's existing components before writing new ones. Every other `youiyoux` command runs the same way (`npx youiyoux check --diff`), The `youi` bin remains a silent compatibility alias.
+Runs locally; nothing is uploaded, no telemetry. The report includes relative paths, component names, class lists, counts and rendered images when available. No source lines unless `--include-code`; home paths, usernames, env values and credentials are stripped. Rendered looks need a headless Chromium (`--render` offers to download it, ~100 MB, once); specimen images are cached in `~/.cache/youiyoux/specimens`.
 
-Node 20 or later. Nothing is uploaded, there is no telemetry and no account.
+Node 20 or later. The `youi` bin is a silent alias.
 
-Specimen images are cached outside the repo in `~/.cache/youiyoux/specimens` (`XDG_CACHE_HOME` overrides `~/.cache`; `YOUI_SPECIMEN_CACHE` overrides the specimen directory). Rendered images show the component as rendered, including visible labels.
+Docs, agent reference and source: [github.com/ap9000/youiyoux](https://github.com/ap9000/youiyoux)

package/dist/chunks/{chunk-UXLATKEQ.js → chunk-CLNMVQZJ.js}

@@ -2374,9 +2374,9 @@ function renderInventory(report, outFile) {
   const roles = INVENTORY_ROLES.filter((role) => uses.some((l) => l.role === role));
   const width = Math.max(...projects.map((p) => p.length), 9);
   const cell = (role, project2) => {
-    const looks2 = uses.filter((l) => l.role === role && l.project === project2);
-    const families = new Set(looks2.flatMap((l) => l.family ? [l.family] : [])).size;
-    return looks2.length === 0 ? style.dim("\xB7") : `${families}f ${looks2.length}`;
+    const looks = uses.filter((l) => l.role === role && l.project === project2);
+    const families = new Set(looks.flatMap((l) => l.family ? [l.family] : [])).size;
+    return looks.length === 0 ? style.dim("\xB7") : `${families}f ${looks.length}`;
   };
   const lines = [
     `${style.bold("inventory")} ${style.dim(`\xB7 ${plural(report.projects.length, "project")} \xB7 ${plural(report.summary.looks, "look")} in ${plural(report.families.length, "family", "families")}${report.summary.stories ? ` \xB7 ${plural(report.summary.stories, "story", "stories")} beside them` : ""}`)}`,
@@ -2560,7 +2560,7 @@ function plainAscii(text) {
 // ../cli/src/report/card.ts
 var CARD_WIDTH = 1200;
 var CARD_HEIGHT = 630;
-var INK = { background: [11, 16, 32], tile: [22, 30, 54], accent: [124, 156, 255], text: [232, 236, 248], muted: [147, 160, 191], warn: [251, 191, 36], ok: [74, 222, 128] };
+var INK = { background: [8, 9, 10], track: [25, 26, 29], accent: [113, 112, 255], accent2: [69, 69, 147], accent3: [40, 40, 76], text: [247, 248, 248], muted: [138, 143, 152], ok: [143, 181, 164] };
 var Canvas = class {
   pixels;
   width;
@@ -2641,25 +2641,35 @@ function drawCard(input) {
   const canvas = new Canvas(CARD_WIDTH, CARD_HEIGHT, INK.background);
   const margin = 72;
   const inner = CARD_WIDTH - margin * 2;
-  canvas.rect(0, 0, CARD_WIDTH, 10, INK.accent);
-  canvas.text(margin, 64, "YOUIYOUX REPORT", 4, INK.accent);
-  const name = fit(input.repo, inner, 10, 5);
-  canvas.text(margin, 64 + 7 * 4 + 32, name.text, name.scale, INK.text);
-  const gap = 16;
-  const tiles = input.stats.slice(0, 4);
-  const tileWidth = Math.floor((inner - gap * (tiles.length - 1)) / Math.max(1, tiles.length));
-  const top = 290;
-  const tileHeight = 220;
-  tiles.forEach((stat3, i) => {
-    const x = margin + i * (tileWidth + gap);
-    canvas.rect(x, top, tileWidth, tileHeight, INK.tile, 18);
-    const value = fit(String(stat3.value), tileWidth - 48, 12, 6);
-    const tone = stat3.tone === "warn" ? INK.warn : stat3.tone === "ok" ? INK.ok : INK.text;
-    canvas.text(x + 24, top + 28, value.text, value.scale, tone);
-    stat3.label.slice(0, 2).forEach((line, n) => {
-      const label = fit(line, tileWidth - 48, 3, 2);
-      canvas.text(x + 24, top + 28 + 7 * 12 + 26 + n * 30, label.text, label.scale, INK.muted);
+  canvas.text(margin, 64, "youiyoux report", 3, INK.muted);
+  const name = fit(input.repo, inner, 9, 5);
+  canvas.text(margin, 104, name.text, name.scale, INK.text);
+  const total = input.parts.reduce((n, part) => n + part.places, 0);
+  const value = fit(String(total), inner / 2, 14, 8);
+  const valueWidth = canvas.text(margin, 236, value.text, value.scale, total > 0 ? INK.text : INK.ok);
+  const words = total === 0 ? "places to fix: clean" : total === 1 ? "place to fix" : "places to fix";
+  canvas.text(margin + valueWidth + 28, 236 + 7 * value.scale - 7 * 4, words, 4, INK.muted);
+  const top = 380;
+  const steps = [INK.accent, INK.accent2, INK.accent3];
+  canvas.rect(margin, top, inner, 20, INK.track, 10);
+  if (total > 0) {
+    let x2 = margin;
+    const shown2 = input.parts.filter((part) => part.places > 0);
+    const room = inner - 6 * (shown2.length - 1);
+    input.parts.forEach((part, i) => {
+      if (part.places === 0) return;
+      const last = part === shown2.at(-1);
+      const width = last ? margin + inner - x2 : Math.max(10, Math.round(part.places / total * room));
+      canvas.rect(x2, top, width, 20, steps[i] ?? INK.accent3, 10);
+      x2 += width + 6;
     });
+  }
+  let x = margin;
+  input.parts.forEach((part, i) => {
+    canvas.rect(x, top + 52, 18, 18, part.places > 0 ? steps[i] ?? INK.accent3 : INK.track, 4);
+    x += 32;
+    x += canvas.text(x, top + 52, part.label.split(" ")[0], 3, INK.muted) + 16;
+    x += canvas.text(x, top + 52, String(part.places), 3, part.places > 0 ? INK.text : INK.ok) + 40;
   });
   const credit = "npx youiyoux";
   const creditWidth = textWidth(credit, 3);
@@ -3119,22 +3129,24 @@ async function nearDuplicateGroups(input) {
     const where = keeperFacts.project.name && importedBy(keeperFacts) > 0 ? `${keeperFacts.project.name}, ${keeperFile}` : keeperFile;
     const lead = kept ? `Keep ${keeperName} (${where})` : `Create ${keeperName} in ${keeperFile} (a new file in ${extract.where}) with this shape`;
     const [one, many] = KIND_WORDS[kind];
+    const components = new Set([kept, ...copies].flatMap((v) => v?.kind === "component" ? [v.id] : [])).size;
     findings2.push(finding(
       home.project.dir,
       `${plural2(members.length, one, many)} look the same (${shapeWords(family.shape)}) but are built ${sides.length} ways`,
       counted.length,
       [...copies].sort((a, b) => path(a).localeCompare(path(b)) || a.line - b.line).slice(0, SITES_PER_FINDING).map((v) => ({ at: `${path(v)}:${v.line}`, file: path(v), line: v.line })),
       lead,
-      steps
+      steps,
+      components
     ));
   }
   findings2.push(...sameNamed.map((g) => g.finding));
   return findings2.sort((a, b) => b.count - a.count || a.title.localeCompare(b.title));
 }
-function finding(project2, title, count, sites, lead, steps) {
+function finding(project2, title, count, sites, lead, steps, exported) {
   const shown2 = steps.slice(0, STEPS_SHOWN);
   const more = steps.length > shown2.length ? `; and ${plural2(steps.length - shown2.length, "more file")} (listed in the report)` : "";
-  return { kind: "near-duplicate", project: project2, title, detail: null, count, sites, lead, steps, next: `${lead}. ${shown2.join(". ")}${more}` };
+  return { kind: "near-duplicate", project: project2, title, detail: null, count, sites, lead, steps, next: `${lead}. ${shown2.join(". ")}${more}`, exported };
 }
 function commonDir(files) {
   const parts = files.map((f) => f.split("/").slice(0, -1));
@@ -3189,7 +3201,7 @@ async function sameNamedGroups(facts, defs, usage, importText) {
     const lead = how === "same" ? `Keep ${name} (${keeperFile})` : how === "near" ? `Keep one ${name} (${keeperFile}) that takes what differs as props` : `Keep ${name} (${keeperFile}) as the one ${name}`;
     const sites = [keep, ...copies].slice(0, SITES_PER_FINDING).map((d) => ({ at: `${repoPath(dir, d.file)}:${d.line}`, file: repoPath(dir, d.file), line: d.line }));
     const title = how === "different" ? `${name} is defined in ${copies.length + 1} files as different components` : `${name} is defined in ${copies.length + 1} files with ${how === "same" ? "the same" : "near-identical"} structure`;
-    return { ids: [keep, ...copies].map((d) => idOf(d.file)), finding: finding(dir, title, copies.length, sites, lead, steps) };
+    return { ids: [keep, ...copies].map((d) => idOf(d.file)), finding: finding(dir, title, copies.length, sites, lead, steps, [keep, ...copies].filter((d) => d.exported).length) };
   }
   return found;
 }
@@ -3373,7 +3385,7 @@ async function analyseProject(project2, index, inventory, inventoryError, worksp
   const changeProject = target ? await inferProject(project2.root, target) : null;
   const moduleMap = new Map(modules.map((m) => [m.file, m]));
   const eligible = new Set(inventory?.definitions.filter((d) => d.project === projectId && uiDefinition(d, moduleMap)).map((d) => d.id));
-  const looks2 = inventory ? inventory.looks.filter((l) => l.project === projectId && !l.story && !isShowcase(l.file)) : [];
+  const looks = inventory ? inventory.looks.filter((l) => l.project === projectId && !l.story && !isShowcase(l.file)) : [];
   let libraries = [];
   let unused = [];
   const showcaseFiles = /* @__PURE__ */ new Set();
@@ -3395,11 +3407,11 @@ async function analyseProject(project2, index, inventory, inventoryError, worksp
     incomplete.push(`UI libraries were not read (${errorText(error)}); run ${NPX} detect ${project2.dir} to see why`);
   }
   const roles = INVENTORY_ROLES.flatMap((role) => {
-    const of = looks2.filter((l) => l.role === role);
+    const of = looks.filter((l) => l.role === role);
     return of.length === 0 ? [] : [{ role, uses: of.length, families: new Set(of.flatMap((l) => l.family ? [l.family] : [])).size }];
   });
   const byComponent = /* @__PURE__ */ new Map();
-  for (const look of looks2) {
+  for (const look of looks) {
     if (look.recipe?.kind !== "component") continue;
     const key2 = `${look.recipe.file}#${look.recipe.export}`;
     const entry = byComponent.get(key2) ?? { name: look.recipe.export, file: repoPath2(project2.dir, look.recipe.file), roles: [] };
@@ -3452,7 +3464,7 @@ async function analyseProject(project2, index, inventory, inventoryError, worksp
     definitions: inventory ? inventory.definitions.filter((d) => d.project === projectId && !isShowcase(d.file)).length : 0,
     kits: inventory ? inventory.kits.filter((k) => k.project === projectId).map((k) => ({ path: repoPath2(project2.dir, k.path), kind: k.kind === "cva-folder" ? "CVA components" : "CSS classes", members: k.members.length })) : [],
     roles,
-    uses: looks2.length,
+    uses: looks.length,
     components,
     hardcoded,
     offLibrary,
@@ -3466,6 +3478,8 @@ function topNext(f) {
   const text = f.lead && f.steps ? `${f.lead}${f.steps.length > 1 ? `, then change ${plural3(f.steps.length, "file")} (each listed in the report)` : `; ${f.steps[0].charAt(0).toLowerCase()}${f.steps[0].slice(1)}`}` : f.next;
   return `${text.charAt(0).toLowerCase()}${text.slice(1).replace(/\.$/, "")}`;
 }
+var DUPLICATE_RULE = "Duplicated components: groups of 2+ exported components that look alike or share a name.";
+var isComponentDuplicate = (f) => (f.exported ?? 0) >= 2;
 function summaryLines(model) {
   const t = model.totals;
   const top = model.projects.flatMap((p) => p.components).sort((a, b) => b.uses - a.uses)[0];
@@ -3473,7 +3487,7 @@ function summaryLines(model) {
   return [
     `${model.repo}: ${plural3(t.projects, "project")}, ${plural3(t.files, "file")} scanned; UI libraries: ${t.libraries.length > 0 ? t.libraries.join(", ") : "none found"}.`,
     `Components: ${t.definitions} defined, ${plural3(t.uses, "button, input, card or other UI element", "buttons, inputs, cards and other UI elements")} in use${top ? `; most used: ${top.name} (${plural3(top.uses, "use")})` : ""}.`,
-    `Near-duplicates: ${plural3(t.nearDuplicates, "group")} of components that look the same but are built more than once.`,
+    `Near-duplicates: ${plural3(t.nearDuplicates, "group")} of UI that looks the same but is built more than once; ${t.componentDuplicates} of them between exported components.`,
     `Hardcoded values: ${plural3(t.hardcoded, "colour, spacing or radius", "colours, spacings and radii")} a theme token already holds; off-library imports: ${t.offLibrary}.`,
     first ? `Top fix: ${first.title.replace(/\.$/, "")}; ${topNext(first)}.` : `Nothing to fix first; next: ${NPX} agents install, so your agent keeps it that way.`
   ];
@@ -3504,6 +3518,7 @@ async function buildReportModel(dir, options = {}) {
     definitions: projects.reduce((n, p) => n + p.definitions, 0),
     uses: projects.reduce((n, p) => n + p.uses, 0),
     nearDuplicates: near.length,
+    componentDuplicates: near.filter(isComponentDuplicate).length,
     hardcoded: projects.reduce((n, p) => n + p.hardcoded.reduce((m, f) => m + f.count, 0), 0),
     offLibrary: projects.reduce((n, p) => n + p.offLibrary.reduce((m, f) => m + f.count, 0), 0)
   };
@@ -3533,108 +3548,316 @@ var escape2 = (text) => String(text).replace(/&/g, "&amp;").replace(/</g, "&lt;"
 var plural4 = (count, word, many = `${word}s`) => `${count} ${count === 1 ? word : many}`;
 var anchor = (dir) => `p-${dir === "." ? "root" : dir.replace(/[^a-zA-Z0-9]+/g, "-").replace(/^-|-$/g, "")}`;
 var CSS = `
-:root{color-scheme:light dark;--bg:#f7f8fb;--surface:#fff;--line:#e3e6ef;--text:#141826;--muted:#5b6478;--accent:#3651d6;--warn:#a15c00;--warn-bg:#fff4e0;--ok:#16794a;--code:#eef1f8}
-@media (prefers-color-scheme:dark){:root{--bg:#0b1020;--surface:#121a30;--line:#25304f;--text:#e8ecf8;--muted:#a3adc6;--accent:#8ea6ff;--warn:#fbbf24;--warn-bg:#2b2410;--ok:#4ade80;--code:#1a2340}}
+:root{color-scheme:light dark;--canvas:#f4f5f7;--surface:#fcfcfd;--raised:#f6f7f9;--sunken:#f8f9fa;--line:#e3e4e8;--line-strong:#d0d2d8;--ink:#16171a;--ink-2:#3d4049;--muted:#6b6f78;--faint:#9ea2ab;--accent:#5e6ad2;--accent-soft:#eceefa;--success:#4f7a69;--success-soft:#eaf1ee;--danger:#ad5a43;--danger-soft:#f7ece8;--neutral-soft:#eef0f3;--k-dup:var(--accent);--k-hard:color-mix(in oklch,var(--accent) 55%,var(--surface));--k-off:color-mix(in oklch,var(--accent) 25%,var(--surface));--shadow:0 1px 2px rgba(16,17,20,.04)}
+@media (prefers-color-scheme:dark){:root{--canvas:#08090a;--surface:#0f1011;--raised:#151618;--sunken:#0b0c0d;--line:#1d1e21;--line-strong:#2b2c30;--ink:#f7f8f8;--ink-2:#d0d6e0;--muted:#8a8f98;--faint:#62666d;--accent:#7170ff;--accent-soft:#1a1b33;--success:#8fb5a4;--success-soft:#14201b;--danger:#d99a85;--danger-soft:#251713;--neutral-soft:#191a1d;--shadow:none}}
 *{box-sizing:border-box}
-html{-webkit-text-size-adjust:100%}
-body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-wrap:anywhere}
-main{max-width:960px;margin:0 auto;padding:32px 20px 64px}
-h1{font-size:clamp(28px,6vw,44px);line-height:1.1;margin:4px 0 8px}
-h2{font-size:22px;margin:40px 0 12px}
-h3{font-size:17px;margin:28px 0 8px}
-p{margin:6px 0}
-code,pre{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
-code{background:var(--code);border-radius:4px;padding:1px 5px}
-pre{background:var(--code);border-radius:6px;padding:8px 10px;margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
-.eyebrow{color:var(--accent);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0}
-.meta,.muted,small{color:var(--muted)}
-.summary{padding-left:20px}
-.summary li{margin:4px 0}
-.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:20px 0 0;padding:0}
-.stats div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
-.stats dt{color:var(--muted);font-size:14px}
-.stats dd{margin:0;font-size:32px;font-weight:700;line-height:1.2}
-.stats .warn dd{color:var(--warn)}
-.stats .ok dd{color:var(--ok)}
-.card,.finding,.agent{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:10px 0}
-.agent{border-color:var(--accent)}
+html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
+body{margin:0;background:var(--canvas);color:var(--ink);font:14px/1.5 Geist,"Geist Variable",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
+a{color:var(--accent);text-decoration:none}
+a:hover{text-decoration:underline}
+code,pre,.mono{font-family:"Geist Mono","Geist Mono Variable",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
+code{background:var(--neutral-soft);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--ink-2)}
+pre{background:var(--sunken);border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
+h1,h2,h3,h4,p{margin:0}
+.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
+.rail{position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--line);background:var(--surface);padding:16px 12px;display:flex;flex-direction:column;gap:16px}
+.brand{display:flex;align-items:center;gap:10px;padding:2px 6px;font-weight:600;font-size:14px}
+.mark{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--ink);color:var(--canvas);font-size:13px;font-weight:700}
+.rail nav{display:flex;flex-direction:column;gap:1px}
+.rail .group{font-size:11.5px;color:var(--faint);padding:12px 8px 4px}
+.rail a{display:flex;justify-content:space-between;align-items:center;gap:8px;height:30px;padding:0 8px;border-radius:6px;color:var(--ink-2);font-size:13px}
+.rail a:hover{background:var(--raised);color:var(--ink);text-decoration:none}
+.rail a .n{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
+.rail a .n.warn{color:var(--ink)}
+.rail .foot{margin-top:auto;font-size:11.5px;color:var(--faint);padding:0 8px}
+main{min-width:0;padding:28px 32px 64px;max-width:1120px;width:100%;margin:0 auto}
+.top{display:flex;flex-direction:column;gap:10px;padding-bottom:20px}
+.crumb{font-size:12px;color:var(--muted)}
+.top h1{font-size:24px;line-height:1.2;font-weight:650;letter-spacing:-.01em}
+.facts{display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0;list-style:none}
+.facts li{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:12px;color:var(--ink-2)}
+.facts li b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
+.headline{display:flex;flex-direction:column;gap:14px;padding:4px 0 8px}
+.say{font-size:26px;line-height:1.3;font-weight:600;letter-spacing:-.015em;max-width:30em}
+.say b{font-variant-numeric:tabular-nums;font-weight:700}
+.say b.warn{color:var(--ink);box-shadow:inset 0 -.14em 0 var(--line-strong)}
+.say b.ok{color:var(--success)}
+.split{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;background:var(--neutral-soft)}
+.seg{display:block;height:100%;min-width:3px}
+.s0{background:var(--k-dup)}
+.s1{background:var(--k-hard)}
+.s2{background:var(--k-off)}
+.legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:12.5px;color:var(--ink-2)}
+.legend a{color:inherit;display:inline-flex;align-items:center;gap:7px}
+.legend b{color:var(--ink);font-variant-numeric:tabular-nums}
+.legend .key{width:10px;height:10px;border-radius:3px;display:inline-block}
+.legend .key.zero{background:var(--line-strong)}
+.legend .clean{color:var(--success);font-size:11.5px}
+.legend .of{margin-left:auto;color:var(--muted);font-size:12px}
+.shapes{list-style:none;margin:0;padding:0}
+.shapes li{display:grid;grid-template-columns:120px minmax(0,1fr) 150px;align-items:center;gap:14px;padding:9px 0;border-top:1px solid var(--line)}
+.shapes li:first-child{border-top:0}
+.shapes .role{font-size:12.5px;color:var(--ink)}
+.shapes .sq{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:0}
+.shapes i,.panel header i.k{display:inline-block;width:14px;height:14px;border-radius:3px}
+.shapes i.one,i.k.one{background:var(--faint)}
+.shapes i.more,i.k.more{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
+.panel header i.k{width:10px;height:10px;vertical-align:-1px;margin:0 4px 0 10px}
+.shapes .over{font-size:11.5px;color:var(--muted);margin-left:4px}
+.shapes .unmeasured{font-size:12px;color:var(--faint);font-style:italic}
+.shapes .val{text-align:right;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
+.shapes .drift .val b{color:var(--ink)}
+.shapes .even .val b{color:var(--success)}
+section{scroll-margin-top:16px}
+.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin:16px 0 0;box-shadow:var(--shadow);overflow:hidden}
+.panel>header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--raised)}
+.panel>header h2,.panel>header h3{font-size:14px;font-weight:600}
+.panel>header .aside{font-size:12px;color:var(--muted);text-align:right}
+.panel>.body{padding:14px 16px}
+.panel>.body>*+*{margin-top:10px}
+.panel>.body+.findings{border-top:1px solid var(--line)}
+.muted,small{color:var(--muted)}
+small{font-size:12px}
+.next{font-size:13px;color:var(--ink-2)}
+.next strong{color:var(--accent);font-weight:600}
+.none{color:var(--success);font-weight:500;font-size:13px}
+.incomplete{color:var(--muted);font-size:12.5px;margin-top:12px}
+.incomplete summary{color:var(--muted)}
+.unread{margin:8px 0 0;padding-left:18px;font-size:12px}
+.legend .alert{position:relative;margin-left:auto}
+.legend .alert+.of{margin-left:0}
+.legend .alert a{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:11.5px}
+.legend .alert a:hover,.legend .alert a:focus-visible{color:var(--ink);border-color:var(--line-strong);text-decoration:none}
+.legend .alert i{display:inline-grid;place-items:center;width:13px;height:13px;border-radius:50%;background:var(--danger-soft);color:var(--danger);font-style:normal;font-size:9.5px;font-weight:700}
+.legend .tip{position:absolute;z-index:5;top:calc(100% + 6px);right:0;width:260px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink-2);font-size:12px;line-height:1.45;box-shadow:0 8px 24px rgba(0,0,0,.12);opacity:0;visibility:hidden;transition:opacity .12s}
+.legend .alert:hover .tip,.legend .alert:focus-within .tip{opacity:1;visibility:visible}
+.unread-at{scroll-margin-top:16px}
 ol.findings,ul.findings{list-style:none;padding:0;margin:0}
-.finding .title{font-weight:600;margin:0}
-.sites{margin:6px 0;padding-left:18px;color:var(--muted)}
-.sites li{margin:2px 0}
-.next{margin-top:8px}
-.steps{margin:4px 0 0;padding-left:22px;color:var(--muted);font-size:15px}
-.steps li{margin:3px 0}
-.more summary{cursor:pointer;color:var(--accent);margin:4px 0 0 4px;font-size:15px}
-.next strong{color:var(--accent)}
-.none{color:var(--ok);font-weight:600}
-.incomplete{background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:8px 12px}
-.project{border-top:2px solid var(--line);margin-top:48px}
-.project>h2{margin-top:24px}
-.pills{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none;margin:6px 0}
-.pills li{background:var(--code);border-radius:999px;padding:3px 12px;font-size:14px}
-.rows{list-style:none;padding:0;margin:6px 0}
-.rows li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:6px 0}
-.rows li span:last-child{color:var(--muted);text-align:right;white-space:nowrap}
-.looks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
-.looks figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px}
-.looks .pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
-.looks img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid var(--line)}
-.looks figcaption{font-weight:600;margin-bottom:8px}
-nav ul{padding-left:20px}
-footer{margin-top:56px;color:var(--muted);font-size:14px;border-top:1px solid var(--line);padding-top:16px}
+.finding{padding:14px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
+.finding:first-child{border-top:0}
+.head{display:flex;align-items:flex-start;gap:12px}
+.count{flex:none;width:44px;padding:4px 0 3px;border-radius:6px;background:var(--neutral-soft);color:var(--ink);font-weight:650;font-size:13px;line-height:1.1;display:flex;flex-direction:column;align-items:center;font-variant-numeric:tabular-nums}
+.count small{font-size:9.5px;font-weight:500;color:inherit;opacity:.8;letter-spacing:.02em}
+.head .what{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
+.finding .title{font-weight:600;font-size:13.5px;line-height:1.4}
+.finding .what .muted{font-size:12.5px}
+.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--kind,var(--faint));order:-1}
+.chip:has(.swatch)::before{display:none}
+[data-kind=near-duplicate]{--kind:var(--k-dup)}
+[data-kind=hardcoded-value]{--kind:var(--k-hard)}
+[data-kind=off-library]{--kind:var(--k-off)}
+.chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;background:var(--neutral-soft);color:var(--ink-2);font-size:11.5px;font-weight:500;white-space:nowrap}
+.swatch{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid var(--line-strong);flex:none}
+.specs{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 0 56px;margin:0;list-style:none}
+.specs li{height:22px;padding:0 8px;border-radius:6px;border:1px solid var(--line);background:var(--sunken);display:inline-flex;align-items:center;font-family:"Geist Mono","Geist Mono Variable",ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;color:var(--ink-2)}
+.compare{margin-left:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);border:1px solid var(--line);border-radius:8px;overflow:hidden}
+.compare>.next,.compare>.steps,.compare>.more,.compare>.shot{margin:0;padding:10px 12px}
+.compare>.next{grid-column:1;grid-row:1 / span 2;border-right:1px solid var(--line);background:var(--sunken)}
+.compare>.next::before{content:"Canonical";display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
+.compare>.next strong{display:none}
+.compare>.steps{grid-column:2;list-style:none;font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:6px}
+.compare>.steps::before{content:"Replace";display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
+.compare>.steps li,.compare>.more .steps li{padding-left:14px;position:relative}
+.compare>.steps li::before,.compare>.more .steps li::before{content:"";position:absolute;left:2px;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--faint)}
+.compare>.more{grid-column:2;padding-top:0}
+.compare>.more .steps{list-style:none;padding:6px 0 0;margin:0;font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:6px}
+.compare>.shot{grid-column:1 / -1;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;background:var(--sunken)}
+.shot figure{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
+.shot figcaption{font-size:11.5px;color:var(--muted)}
+.shot img{display:block;width:100%;max-width:360px;height:140px;object-fit:cover;object-position:top left;border-radius:6px;border:1px solid var(--line);background:var(--surface)}
+.steps{margin:0;padding-left:20px;color:var(--ink-2);font-size:12.5px}
+.more summary{cursor:pointer;color:var(--accent);font-size:12.5px;list-style:none}
+.more summary::-webkit-details-marker{display:none}
+.more summary::before{content:"+ "}
+.more[open] summary::before{content:"\u2212 "}
+.sites{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 0 56px;padding:0;list-style:none}
+.sites li{font-size:12px;color:var(--muted);display:inline-flex;align-items:center}
+.sites.code{display:block}
+.sites.code li{display:block;margin:6px 0}
+.finding>.next{margin-left:56px}
+.rows{list-style:none;padding:0;margin:0}
+.rows li{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:8px 0;font-size:13px}
+.rows li:first-child{border-top:0}
+.rows li span:last-child{color:var(--muted);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
+.rows small{font-family:"Geist Mono","Geist Mono Variable",ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;margin-left:6px}
+h4{font-size:12px;font-weight:600;color:var(--muted);margin-top:16px}
+.agent{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:12px 16px;margin:16px 0 0;font-size:13px}
+.agent strong{font-weight:600}
+.looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
+.looks figure{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--sunken);min-width:0}
+.looks figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600}
+.looks figcaption small{min-width:0;font-weight:400;font-family:"Geist Mono","Geist Mono Variable",ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;text-align:right}
+.looks .pair{display:grid;grid-template-columns:1fr 1fr}
+.looks img{display:block;width:100%;height:220px;object-fit:cover;object-position:top left}
+.looks figure>p{padding:8px 12px;border-top:1px solid var(--line);font-size:12px}
+.project{margin-top:40px}
+.project>h2{font-size:18px;font-weight:650;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
+.project>h2 small{font-family:"Geist Mono","Geist Mono Variable",ui-monospace,"SF Mono",Menlo,monospace;font-weight:400}
+.projects nav ul{list-style:none;padding:0;margin:0}
+.projects nav li{border-top:1px solid var(--line);padding:6px 0;font-size:13px}
+.projects nav li:first-child{border-top:0}
+footer{margin-top:48px;color:var(--muted);font-size:12px;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:6px}
+@media (max-width:860px){
+.shell{display:block}
+.rail{position:sticky;top:0;z-index:2;height:auto;flex-direction:row;align-items:center;gap:8px;padding:8px 12px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden}
+.rail .group,.rail .foot,.brand span:last-child{display:none}
+.rail nav{flex-direction:row;gap:4px}
+.rail a{white-space:nowrap;height:28px;border:1px solid var(--line)}
+main{padding:20px 16px 48px}
+html{scroll-padding-top:60px}
+section{scroll-margin-top:60px}
+.panel>header .aside{display:none}
+.specs,.sites,.compare,.finding>.next{margin-left:0;padding-left:0}
+.compare{grid-template-columns:minmax(0,1fr)}
+.compare>.next{grid-row:auto;border-right:0;border-bottom:1px solid var(--line)}
+.compare>.steps,.compare>.more{grid-column:1}
+.compare>.shot{grid-template-columns:minmax(0,1fr)}
+.say{font-size:20px}
+.legend .of{margin-left:0}
+.shapes li{grid-template-columns:minmax(0,1fr) auto;gap:8px}
+.shapes .sq{grid-column:1 / -1;grid-row:2}
+}
 `;
+var FACT = /import \{[^}]*\} from &quot;[^&]*&quot;|var\(--[\w-]+\)|(?<![\w/.-])(?:[\w@.\[\]-]+\/)+[\w.\[\]-]+\.(?:tsx|ts|jsx|js|mjs|css|scss|vue|svelte|astro|html)(?::\d+)?|\b(?:color|radius|spacing|space|size|font|shadow|typography)\.[\w-]+/g;
+var rich = (text) => escape2(text).replace(FACT, (fact) => `<span class="mono">${fact}</span>`);
 function next(text) {
-  return `<p class="next"><strong>Next:</strong> ${escape2(text.replace(/\.$/, ""))}.</p>`;
+  return `<p class="next"><strong>Next:</strong> ${rich(text.replace(/\.$/, ""))}.</p>`;
 }
 var STEPS_SHOWN2 = 5;
-function finding2(f, showProject) {
-  const head = `<p class="title">${escape2(f.title)}</p>${f.detail ? `<p class="muted">${escape2(f.detail)}</p>` : ""}${showProject && f.project !== "." ? `<p class="muted">in ${escape2(f.project)}</p>` : ""}`;
+var KIND = { "near-duplicate": "Duplicate", "hardcoded-value": "Hardcoded", "off-library": "Off-library" };
+function splitMeasures(title) {
+  const m = /\s*\(([^()]*\d[^()]*)\)/.exec(title);
+  if (!m) return { text: title, measures: [] };
+  return { text: (title.slice(0, m.index) + title.slice(m.index + m[0].length)).replace(/\s+/g, " ").trim(), measures: m[1].split(/,\s*/).filter(Boolean) };
+}
+var COLOUR = /#[0-9a-fA-F]{3,8}\b|\b(?:rgba?|hsla?|oklch|oklab|lab|lch)\([0-9.,%\s/+-]+\)/;
+function swatch(title) {
+  const colour = COLOUR.exec(title)?.[0];
+  return colour ? `<span class="swatch" style="background:${escape2(colour)}" aria-hidden="true"></span>` : "";
+}
+function shots(f, looks) {
+  if (looks.size === 0) return "";
+  const kept = /\(([^()]+\.[a-z]+)\)/.exec(f.lead ?? "")?.[1];
+  const copy = (f.steps ?? []).map((s) => /^In ([^,]+),/.exec(s)?.[1]).find((file) => file !== void 0 && file !== kept && looks.has(file));
+  const pair = [];
+  if (kept && looks.get(kept)?.light) pair.push(["Keep", looks.get(kept)]);
+  if (copy && looks.get(copy)?.light) pair.push(["Copy", looks.get(copy)]);
+  if (pair.length === 0) return "";
+  return `<div class="shot">${pair.map(([label, look]) => `<figure><picture>${look.dark ? `<source media="(prefers-color-scheme: dark)" srcset="${look.dark}">` : ""}<img alt="${escape2(look.component)} (${label.toLowerCase()})" src="${look.light}"></picture><figcaption>${label} \xB7 ${escape2(look.component)} <span class="mono">${escape2(look.file)}</span></figcaption></figure>`).join("")}</div>`;
+}
+function finding2(f, showProject, looks) {
+  const { text, measures } = f.kind === "near-duplicate" ? splitMeasures(f.title) : { text: f.title, measures: [] };
+  const where = showProject && f.project !== "." ? `<p class="muted">in <span class="mono">${escape2(f.project)}</span></p>` : "";
+  const head = `<div class="head"><span class="count">${f.count}<small>${f.count === 1 ? "place" : "places"}</small></span><div class="what"><p class="title">${rich(text)}</p>${f.detail ? `<p class="muted">${escape2(f.detail)}</p>` : ""}${where}</div><span class="chip">${f.kind === "hardcoded-value" ? swatch(f.title) : ""}${KIND[f.kind]}</span></div>`;
+  const specs = measures.length > 0 ? `<ul class="specs">${measures.map((m) => `<li>${escape2(m)}</li>`).join("")}</ul>` : "";
   if (f.lead && f.steps && f.steps.length > 0) {
-    const item = (step) => `<li>${escape2(step.replace(/\.$/, ""))}</li>`;
+    const item = (step) => `<li>${rich(step.replace(/\.$/, ""))}</li>`;
     const rest = f.steps.slice(STEPS_SHOWN2);
     const more2 = rest.length > 0 ? `<details class="more"><summary>and ${plural4(rest.length, "more file")}</summary><ol class="steps" start="${STEPS_SHOWN2 + 1}">${rest.map(item).join("")}</ol></details>` : "";
-    return `<li class="finding" data-kind="${f.kind}">${head}${next(f.lead)}<ol class="steps">${f.steps.slice(0, STEPS_SHOWN2).map(item).join("")}</ol>${more2}</li>`;
+    return `<li class="finding" data-kind="${f.kind}">${head}${specs}<div class="compare">${next(f.lead)}<ol class="steps">${f.steps.slice(0, STEPS_SHOWN2).map(item).join("")}</ol>${more2}${shots(f, looks)}</div></li>`;
   }
+  const code = f.sites.some((s) => s.code);
   const sites = f.sites.map((s) => `<li><code>${escape2(s.at)}</code>${s.code ? `<pre>${escape2(s.code)}</pre>` : ""}</li>`).join("");
-  const more = f.count > f.sites.length ? `<li>\u2026 and ${plural4(f.count - f.sites.length, "more place")}</li>` : "";
-  return `<li class="finding" data-kind="${f.kind}">${head}<ul class="sites">${sites}${more}</ul>${next(f.next)}</li>`;
+  const more = f.count > f.sites.length ? `<li>+ ${plural4(f.count - f.sites.length, "more place")}</li>` : "";
+  return `<li class="finding" data-kind="${f.kind}">${head}${specs}<ul class="sites${code ? " code" : ""}">${sites}${more}</ul>${next(f.next)}</li>`;
+}
+function findings(list, none, after, looks) {
+  if (list.length === 0) return `<div class="body"><p class="none">${escape2(none)}</p>${next(after)}</div>`;
+  return `<ul class="findings">${list.map((f) => finding2(f, false, looks)).join("")}</ul>`;
 }
-function findings(list, none, after) {
-  if (list.length === 0) return `<p class="none">${escape2(none)}</p>${next(after)}`;
-  return `<ul class="findings">${list.map((f) => finding2(f, false)).join("")}</ul>`;
+function panel(name, id, title, aside, body, level = "h3") {
+  return `<section class="panel" data-section="${name}" id="${id}"><header><${level}>${escape2(title)}</${level}>${aside ? `<span class="aside">${aside}</span>` : ""}</header>${body}</section>`;
 }
-function projectSection(p, many) {
+function projectSection(p, many, looks) {
+  const id = anchor(p.dir);
   const where = p.dir === "." ? "" : ` --project ${p.dir}`;
-  const libraries = p.libraries.length === 0 ? `<p class="none">No UI library found.</p>${next(`if it uses one, run ${NPX} detect ${p.dir} to see what was read`)}` : `<ul class="rows">${p.libraries.map((l) => `<li><span>${escape2(l.name)}${l.for.length > 0 ? ` <small>\xB7 ${escape2(l.for.join(", "))}</small>` : ""}</span><span>${escape2(l.confidence)} confidence</span></li>`).join("")}</ul>${p.unused.length > 0 ? `<p class="muted">Declared but never imported (not counted): ${escape2(p.unused.join(", "))}</p>` : ""}${next(`build new UI with these, not a new library: ${NPX} agents install tells your agent so`)}`;
-  const roles = p.roles.map((r) => `<li><span>${escape2(r.role)}</span><span>${plural4(r.uses, "use")} \xB7 ${plural4(r.families, "shape")}</span></li>`).join("");
-  const kits = p.kits.length > 0 ? `<p>Kits: ${p.kits.map((k) => `<code>${escape2(k.path)}</code> (${escape2(k.kind)}, ${plural4(k.members, "member")})`).join(", ")}</p>` : "";
-  const components = p.components.length > 0 ? `<h4>Most used</h4><ul class="rows">${p.components.map((c) => `<li><span>${escape2(c.name)} <small>${escape2(c.file)}</small></span><span>${plural4(c.uses, "use")}</span></li>`).join("")}</ul>` : "";
-  const inventory = `<p>${plural4(p.definitions, "component")} defined in ${plural4(p.files, "file")}; ${plural4(p.uses, "UI element")} in use (buttons, links styled as buttons, inputs, cards, badges, dialogs, tabs).</p>${kits}${roles ? `<ul class="rows">${roles}</ul>` : ""}${components}${next(`see every look grouped by shape with ${NPX} inventory${where}`)}`;
-  const incomplete = [...p.incomplete, ...p.failed.map((f) => `Not fully read: ${f}`)];
-  return `<section class="project" data-section="project" data-project="${escape2(p.dir)}" id="${anchor(p.dir)}">
+  const libraries = p.libraries.length === 0 ? `<div class="body"><p class="none">No UI library found.</p>${next(`if it uses one, run ${NPX} detect ${p.dir} to see what was read`)}</div>` : `<div class="body"><ul class="rows">${p.libraries.map((l) => `<li><span>${escape2(l.name)}${l.for.length > 0 ? ` <small>${escape2(l.for.join(", "))}</small>` : ""}</span><span>${escape2(l.confidence)} confidence</span></li>`).join("")}</ul>${p.unused.length > 0 ? `<p class="muted">Declared but never imported (not counted): ${escape2(p.unused.join(", "))}</p>` : ""}${next(`build new UI with these, not a new library: ${NPX} agents install tells your agent so`)}</div>`;
+  const kits = p.kits.length > 0 ? `<p class="muted">Kits: ${p.kits.map((k) => `<code>${escape2(k.path)}</code> (${escape2(k.kind)}, ${plural4(k.members, "member")})`).join(", ")}</p>` : "";
+  const components = p.components.length > 0 ? `<h4>Most used</h4><ul class="rows">${p.components.map((c) => `<li><span>${escape2(c.name)}<small>${escape2(c.file)}</small></span><span>${plural4(c.uses, "use")}</span></li>`).join("")}</ul>` : "";
+  const inventory = `<div class="body"><p>${plural4(p.definitions, "component")} defined in ${plural4(p.files, "file")}; ${plural4(p.uses, "UI element")} in use (buttons, links styled as buttons, inputs, cards, badges, dialogs, tabs).</p>${p.roles.length > 0 ? `<ul class="rows">${p.roles.map((r) => `<li><span class="mono">${escape2(r.role)}</span><span>${plural4(r.uses, "use")} \xB7 ${plural4(r.families, "shape")}</span></li>`).join("")}</ul>` : ""}${kits}${components}${next(`see every look grouped by shape with ${NPX} inventory${where}`)}</div>`;
+  const unread = p.failed.length > 0 ? `<details class="incomplete more"><summary>${plural4(p.failed.length, "file")} not fully read; what is in them is unknown</summary><ul class="unread">${p.failed.map((f) => `<li>${rich(f)}</li>`).join("")}</ul></details>` : "";
+  const count = (list) => list.length === 0 ? "None" : `${plural4(list.length, "finding")} \xB7 ${plural4(list.reduce((n, f) => n + f.count, 0), "place")}`;
+  return `<section class="project" data-section="project" data-project="${escape2(p.dir)}" id="${id}">
 <h2>${escape2(many || p.dir !== "." ? p.dir : "This repo")}${p.name && p.name !== p.dir ? ` <small>${escape2(p.name)}</small>` : ""}</h2>
-${incomplete.map((i) => `<p class="incomplete">${escape2(i)}</p>`).join("")}
-<section data-section="libraries"><h3>UI libraries</h3>${libraries}</section>
-<section data-section="inventory"><h3>Component inventory</h3>${inventory}</section>
-<section data-section="near-duplicates"><h3>Near-duplicate groups</h3><p class="muted">Components that look the same (height, padding, corners, text size and weight) but are built more than once.</p>${findings(p.nearDuplicates, "None found: each look is built once.", `keep it that way: ${NPX} agents install has your agent reuse these components`)}</section>
-<section data-section="hardcoded"><h3>Hardcoded values that should be tokens</h3><p class="muted">Colours, spacing and radii written as literals although a theme variable holds the same value.</p>${findings(p.hardcoded, "None found.", `run ${NPX} check --diff on each change to keep new literals out`)}</section>
-<section data-section="off-library"><h3>Off-library imports</h3><p class="muted">Imports of an element from a library other than the one the rest of the code uses for it.</p>${findings(p.offLibrary, "None found.", `run ${NPX} check --diff on each change to catch a second library early`)}</section>
+${p.incomplete.length > 0 || p.failed.length > 0 ? `<div class="unread-at" id="${id}-unread">${p.incomplete.map((i) => `<p class="incomplete">${escape2(i)}</p>`).join("")}${unread}</div>` : ""}
+${panel("near-duplicates", `${id}-near`, "Near-duplicate groups", count(p.nearDuplicates), `<div class="body"><p class="muted">Components that look the same (height, padding, corners, text size and weight) but are built more than once.</p></div>${findings(p.nearDuplicates, "None found: each look is built once.", `keep it that way: ${NPX} agents install has your agent reuse these components`, looks)}`)}
+${panel("hardcoded", `${id}-hardcoded`, "Hardcoded values that should be tokens", count(p.hardcoded), `<div class="body"><p class="muted">Colours, spacing and radii written as literals although a theme variable holds the same value.</p></div>${findings(p.hardcoded, "None found.", `run ${NPX} check --diff on each change to keep new literals out`, looks)}`)}
+${panel("off-library", `${id}-off`, "Off-library imports", count(p.offLibrary), `<div class="body"><p class="muted">Imports of an element from a library other than the one the rest of the code uses for it.</p></div>${findings(p.offLibrary, "None found.", `run ${NPX} check --diff on each change to catch a second library early`, looks)}`)}
+${panel("inventory", `${id}-inventory`, "Component inventory", `${plural4(p.definitions, "component")} \xB7 ${plural4(p.uses, "use")}`, inventory)}
+${panel("libraries", `${id}-libraries`, "UI libraries", p.libraries.length > 0 ? plural4(p.libraries.length, "library", "libraries") : "", libraries)}
 ${p.notes.map((n) => `<p class="muted">${escape2(n.replace(/\.?$/, "."))}</p>`).join("")}
 </section>`;
 }
-function looks(model) {
+function looksSection(model) {
   const drawn = model.projects.flatMap((p) => p.rendered.map((r) => ({ ...r, project: p.dir })));
-  const body = drawn.length > 0 ? `<div class="looks">${drawn.map((r) => `<figure data-component="${escape2(r.component)}"><figcaption>${escape2(r.component)} <small>${escape2(r.file)}</small></figcaption><div class="pair">${r.light ? `<img alt="${escape2(r.component)}, light" src="${r.light}">` : ""}${r.dark ? `<img alt="${escape2(r.component)}, dark" src="${r.dark}">` : ""}</div>${r.looks.length > 0 ? `<p class="muted">${escape2(r.looks.slice(0, 4).join(" \xB7 "))}</p>` : ""}</figure>`).join("")}</div>` : "";
-  return `<section data-section="looks" data-render="${model.render.state}"><h2>Rendered looks</h2>${body}<p class="${drawn.length > 0 ? "muted" : ""}">${escape2(model.render.note)}</p>${model.render.next ? next(model.render.next) : drawn.length > 0 ? next(`see a component after you change it with ${NPX} render <file>`) : next(model.render.state === "off" ? `run ${NPX} --render to draw the most-used components (it asks before downloading the ~100 MB headless Chromium, once)` : `run ${NPX} render <file> to see why a component could not be drawn`)}</section>`;
+  const body = drawn.length > 0 ? `<div class="looks">${drawn.map((r) => `<figure data-component="${escape2(r.component)}"><figcaption>${escape2(r.component)} <small>${escape2(r.file)}</small></figcaption><div class="pair">${r.light ? `<img alt="${escape2(r.component)}, light" src="${r.light}">` : ""}${r.dark ? `<img alt="${escape2(r.component)}, dark" src="${r.dark}">` : ""}</div>${r.looks.length > 0 ? `<p class="muted">${plural4(r.looks.length, "look")} drawn, light and dark</p>` : ""}</figure>`).join("")}</div>` : "";
+  const after = model.render.next ? next(model.render.next) : drawn.length > 0 ? next(`see a component after you change it with ${NPX} render <file>`) : next(model.render.state === "off" ? `run ${NPX} --render to draw the most-used components (it asks before downloading the ~100 MB headless Chromium, once)` : `run ${NPX} render <file> to see why a component could not be drawn`);
+  return `<section class="panel" data-section="looks" data-render="${model.render.state}" id="looks"><header><h2>Rendered looks</h2><span class="aside">${drawn.length > 0 ? plural4(drawn.length, "component") : ""}</span></header><div class="body">${body}<p class="${drawn.length > 0 ? "muted" : ""}">${escape2(model.render.note)}</p>${after}</div></section>`;
+}
+function placesByKind(model) {
+  const places = (pick) => model.projects.reduce((n, p) => n + pick(p).reduce((m, f) => m + f.count, 0), 0);
+  return [
+    { label: "Near-duplicates", places: places((p) => p.nearDuplicates) },
+    { label: "Hardcoded values", places: places((p) => p.hardcoded) },
+    { label: "Off-library imports", places: places((p) => p.offLibrary) }
+  ];
+}
+function headline(model) {
+  const t = model.totals;
+  const [near, hard, off] = placesByKind(model);
+  const parts = [
+    { label: "Near-duplicates", places: near.places, href: model.projects.length > 1 ? "top-fixes" : `${anchor(model.projects[0]?.dir ?? ".")}-near` },
+    { label: "Hardcoded values", places: hard.places, href: model.projects.length > 1 ? "top-fixes" : `${anchor(model.projects[0]?.dir ?? ".")}-hardcoded` },
+    { label: "Off-library imports", places: off.places, href: model.projects.length > 1 ? "top-fixes" : `${anchor(model.projects[0]?.dir ?? ".")}-off` }
+  ];
+  const total = parts.reduce((n2, part) => n2 + part.places, 0);
+  const n = (value) => `<b class="${value > 0 ? "warn" : "ok"}">${value}</b>`;
+  const unknown = model.projects.some((p) => p.incomplete.length > 0 || p.failed.length > 0);
+  const analyses = model.projects.reduce((n2, p) => n2 + p.incomplete.length, 0);
+  const unread = model.projects.reduce((n2, p) => n2 + p.failed.length, 0);
+  const caveat = [analyses > 0 ? `${plural4(analyses, "analysis", "analyses")} could not run` : "", unread > 0 ? `${plural4(unread, "file")} could not be fully read` : ""].filter(Boolean).join(" and ");
+  const said = [];
+  if (t.nearDuplicates > 0) said.push(`${n(t.nearDuplicates)} ${t.nearDuplicates === 1 ? "look is" : "looks are"} built more than once`);
+  if (t.hardcoded > 0) said.push(`${n(t.hardcoded)} ${t.hardcoded === 1 ? "value skips" : "values skip"} the theme`);
+  if (t.offLibrary > 0) said.push(`${n(t.offLibrary)} ${t.offLibrary === 1 ? "import comes" : "imports come"} from a second library`);
+  const sentence2 = said.length === 0 ? `Every look is built once and every value comes from the theme${unknown ? ", in what could be read" : ""}.` : `${said.length > 1 ? `${said.slice(0, -1).join(", ")} and ${said.at(-1)}` : said[0]}: <b class="warn">${total}</b> ${total === 1 ? "place" : "places"} to fix.`;
+  const bar2 = total > 0 ? `<div class="split" role="img" aria-label="${parts.map((part) => `${part.label} ${part.places}`).join(", ")}">${parts.map((part, i) => part.places > 0 ? `<span class="seg s${i}" style="width:${(part.places / total * 100).toFixed(2)}%"></span>` : "").join("")}</div>` : "";
+  const legend = `<ul class="legend">${parts.map((part, i) => `<li><a href="#${part.href}"><span class="key s${i}${part.places === 0 ? " zero" : ""}"></span>${escape2(part.label)} <b>${part.places}</b>${part.places === 0 ? ` <span class="clean">Clean</span>` : ""}</a></li>`).join("")}${unknown ? `<li class="alert"><a href="#${anchor(model.projects.find((p) => p.failed.length > 0 || p.incomplete.length > 0)?.dir ?? ".")}-unread" aria-describedby="unread-tip"><i aria-hidden="true">!</i>${analyses + unread} not read</a><span class="tip" id="unread-tip" role="tooltip">${escape2(caveat.charAt(0).toUpperCase() + caveat.slice(1))}: what is in them is unknown, not zero.</span></li>` : ""}<li class="of">${plural4(t.definitions, "component")} \xB7 ${plural4(t.uses, "UI element")} in use \xB7 ${plural4(t.files, "file")}</li></ul>`;
+  return `<section class="headline" data-section="headline"><p class="say">${sentence2}</p>${bar2}${legend}</section>`;
+}
+var SQUARES = 40;
+function shapeMap(model) {
+  const roles = /* @__PURE__ */ new Map();
+  for (const p of model.projects) for (const r of p.roles) {
+    const was = roles.get(r.role) ?? { uses: 0, families: 0 };
+    roles.set(r.role, { uses: was.uses + r.uses, families: was.families + r.families });
+  }
+  if (roles.size === 0) return "";
+  const rows = [...roles].map(([role, { uses, families }]) => {
+    const shown2 = Math.min(families, SQUARES);
+    const squares = families === 0 ? `<span class="unmeasured">shape not measured</span>` : `${Array.from({ length: shown2 }, (_, i) => `<i class="${i === 0 ? "one" : "more"}"></i>`).join("")}${families > shown2 ? `<span class="over">+${families - shown2}</span>` : ""}`;
+    return `<li class="${families > 1 ? "drift" : families === 1 ? "even" : ""}"><span class="role mono">${escape2(role)}</span><span class="sq">${squares}</span><span class="val"><b>${families}</b> ${families === 1 ? "shape" : "shapes"} \xB7 ${plural4(uses, "use")}</span></li>`;
+  }).join("");
+  const many = model.projects.length > 1 ? ", summed over the projects" : "";
+  return `<section class="panel" data-section="shapes" id="shapes"><header><h2>Shapes per element</h2><span class="aside"><i class="k one"></i>first shape <i class="k more"></i>each extra shape</span></header><div class="body"><p class="muted">One square per distinct look of each kind of element${many}. One square is consistent; every extra square is a copy someone built.</p><ul class="shapes">${rows}</ul></div></section>`;
+}
+function rail(model, many) {
+  const t = model.totals;
+  const link = (href, label, n, warn = false) => `<a href="#${href}"><span>${escape2(label)}</span>${n === void 0 ? "" : `<span class="n${warn && n > 0 ? " warn" : ""}">${n}</span>`}</a>`;
+  const report = [link("overview", "Overview"), link("shapes", "Shapes"), link("top-fixes", "Top fixes", model.topFixes.length, true), link("looks", "Rendered looks")];
+  const projects = many ? model.projects.map((p) => link(anchor(p.dir), p.dir, p.nearDuplicates.length + p.hardcoded.length + p.offLibrary.length, true)) : model.projects.flatMap((p) => {
+    const id = anchor(p.dir);
+    return [link(`${id}-near`, "Near-duplicates", t.nearDuplicates, true), link(`${id}-hardcoded`, "Hardcoded values", t.hardcoded, true), link(`${id}-off`, "Off-library imports", t.offLibrary, true), link(`${id}-inventory`, "Inventory", t.definitions), link(`${id}-libraries`, "UI libraries", t.libraries.length)];
+  });
+  return `<aside class="rail"><div class="brand"><span class="mark">Y</span><span>youiyoux</span></div><nav aria-label="Sections"><div class="group">Report</div>${report.join("")}<div class="group">${many ? "Projects" : "Findings"}</div>${projects.join("")}</nav><p class="foot">Self-contained. Nothing was uploaded.</p></aside>`;
 }
 function renderHtml(model) {
   const t = model.totals;
   const many = model.projects.length > 1;
-  const stat3 = (label, value, tone2 = "") => `<div class="${tone2}"><dt>${escape2(label)}</dt><dd>${value}</dd></div>`;
-  const tone = (n) => n > 0 ? "warn" : "ok";
   const date = model.generatedAt.slice(0, 10);
-  const top = model.topFixes.length > 0 ? `<ol class="findings">${model.topFixes.map((f) => finding2(f, many)).join("")}</ol>` : `<p class="none">Nothing to fix first.</p>${next(`${NPX} agents install, so your agent keeps it that way`)}`;
+  const looks = new Map(model.projects.flatMap((p) => p.rendered.map((r) => [r.file, r])));
+  const top = model.topFixes.length > 0 ? `<ol class="findings">${model.topFixes.map((f) => finding2(f, many, looks)).join("")}</ol>` : `<div class="body"><p class="none">Nothing to fix first.</p>${next(`${NPX} agents install, so your agent keeps it that way`)}</div>`;
+  const libraries = t.libraries.length > 0 ? `<li>${escape2(t.libraries.join(" \xB7 "))}</li>` : "";
   return `<!doctype html>
 <html lang="en">
 <head>
@@ -3647,24 +3870,27 @@ function renderHtml(model) {
 <style>${CSS}</style>
 </head>
 <body>
+<div class="shell">
+${rail(model, many)}
 <main>
-<header>
-<p class="eyebrow">youiyoux report</p>
+<header class="top" id="overview">
+<p class="crumb">youiyoux report</p>
 <h1>${escape2(model.repo)}</h1>
-<p class="meta">${plural4(t.projects, "project")} \xB7 ${plural4(t.files, "file")} \xB7 scanned ${escape2(date)}</p>
-<ul class="summary">${model.summary.map((line) => `<li>${escape2(line)}</li>`).join("")}</ul>
-<dl class="stats">${stat3("Components defined", t.definitions)}${stat3("Near-duplicate groups", t.nearDuplicates, tone(t.nearDuplicates))}${stat3("Hardcoded values", t.hardcoded, tone(t.hardcoded))}${stat3("Off-library imports", t.offLibrary, tone(t.offLibrary))}</dl>
+<ul class="facts"><li><b>${t.files}</b> files</li><li><b>${t.projects}</b> ${t.projects === 1 ? "project" : "projects"}</li>${libraries}<li class="mono">${escape2(date)}</li><li class="mono">${(model.durationMs / 1e3).toFixed(1)} s</li></ul>
 </header>
-<section data-section="top-fixes"><h2>Top fixes</h2><p class="muted">Ranked by how many places each one touches.</p>${top}</section>
+${headline(model)}
+${shapeMap(model)}
+${panel("top-fixes", "top-fixes", "Top fixes", "Ranked by how many places each one touches", top, "h2")}
 <aside class="agent" data-section="agent"><p><strong>${escape2(model.agent)}</strong></p>${next(`${NPX} agents install, then restart your agent`)}</aside>
-${looks(model)}
-<section data-section="projects"><h2>Projects</h2><p>${escape2(model.layout.charAt(0).toUpperCase() + model.layout.slice(1))}.</p>${many ? `<nav><ul>${model.projects.map((p) => `<li><a href="#${anchor(p.dir)}">${escape2(p.dir)}</a>${p.name && p.name !== p.dir ? ` <small>${escape2(p.name)}</small>` : ""}</li>`).join("")}</ul></nav>` : ""}${next(many ? "open each project below; each has its own fixes" : "read this repo's section below")}</section>
-${model.projects.map((p) => projectSection(p, many)).join("\n")}
+${looksSection(model)}
+<section class="panel projects" data-section="projects" id="projects"><header><h2>Projects</h2><span class="aside">${plural4(model.projects.length, "project")}</span></header><div class="body"><p>${escape2(model.layout.charAt(0).toUpperCase() + model.layout.slice(1))}.</p>${many ? `<nav><ul>${model.projects.map((p) => `<li><a href="#${anchor(p.dir)}">${escape2(p.dir)}</a>${p.name && p.name !== p.dir ? ` <small>${escape2(p.name)}</small>` : ""}</li>`).join("")}</ul></nav>` : ""}${next(many ? "open each project below; each has its own fixes" : "read this repo's section below")}</div></section>
+${model.projects.map((p) => projectSection(p, many, looks)).join("\n")}
 <footer>
 <p>Made with ${escape2(NPX)} on ${escape2(date)} in ${(model.durationMs / 1e3).toFixed(1)} s. This file is self-contained: it loads nothing from the network, and nothing was uploaded.</p>
 <p>Paths are relative to the repo. ${model.includeCode ? "Lines of code were included (--include-code); keys, tokens and environment values in them were removed." : "Includes relative paths, component names, class lists, counts and rendered images when available. Literal prop values and text content are omitted from captions and fixes; --include-code adds source lines and full captions."} Home paths, usernames, environment values and credentials were removed.</p>
 </footer>
 </main>
+</div>
 </body>
 </html>
 `;
@@ -3779,9 +4005,11 @@ function renderMarkdown(model, reportFile) {
     "",
     ...model.summary.map((line) => `- ${md(line)}`),
     "",
-    "| Projects | Components | Near-duplicate groups | Hardcoded values | Off-library imports |",
+    "| Projects | Components | Duplicated components | Hardcoded values | Off-library imports |",
     "| ---: | ---: | ---: | ---: | ---: |",
-    `| ${t.projects} | ${t.definitions} | ${t.nearDuplicates} | ${t.hardcoded} | ${t.offLibrary} |`,
+    `| ${t.projects} | ${t.definitions} | ${t.componentDuplicates} | ${t.hardcoded} | ${t.offLibrary} |`,
+    "",
+    md(DUPLICATE_RULE),
     ""
   ];
   if (model.topFixes.length > 0) {
@@ -3993,12 +4221,7 @@ async function runReport(options = {}, io = {}) {
   const t = clean.totals;
   const card = {
     repo: redactor.scrub(clean.repo),
-    stats: [
-      { value: t.definitions, label: ["components", "defined"] },
-      { value: t.nearDuplicates, label: ["near-", "duplicates"], tone: t.nearDuplicates > 0 ? "warn" : "ok" },
-      { value: t.hardcoded, label: ["hardcoded", "values"], tone: t.hardcoded > 0 ? "warn" : "ok" },
-      { value: t.offLibrary, label: ["off-library", "imports"], tone: t.offLibrary > 0 ? "warn" : "ok" }
-    ],
+    parts: placesByKind(clean),
     footer: redactor.scrub(t.libraries.length > 0 ? `UI libraries: ${t.libraries.join(", ")}` : "No UI library found")
   };
   const html = redactor.scrub(renderHtml(clean));
@@ -4011,7 +4234,7 @@ async function runReport(options = {}, io = {}) {
     return { code: 0, files, model: clean };
   }
   const width = Math.max(...["Report", "Card", "Summary"].map((w) => w.length)) + 2;
-  const looks2 = clean.render.state === "drawn" ? "" : clean.render.state === "off" && !renderNote ? `; to add rendered looks, run ${NPX} --render` : "";
+  const looks = clean.render.state === "drawn" ? "" : clean.render.state === "off" && !renderNote ? `; to add rendered looks, run ${NPX} --render` : "";
   print2([
     ...clean.summary,
     "",
@@ -4019,7 +4242,7 @@ async function runReport(options = {}, io = {}) {
     `${"Card".padEnd(width)}${shown(files.card)}`,
     `${"Summary".padEnd(width)}${shown(files.summary)}`,
     "",
-    `Next: open ${shown(files.report)} in a browser and start with its top fix; set up youiyoux for your agent with ${NPX} agents install${looks2}.`
+    `Next: open ${shown(files.report)} in a browser and start with its top fix; set up youiyoux for your agent with ${NPX} agents install${looks}.`
   ].join("\n"));
   return { code: 0, files, model: clean };
 }

package/dist/youi.js

@@ -2,7 +2,7 @@
 import { createRequire as __youiRequire } from "node:module"; const require = __youiRequire(import.meta.url);
 import {
   main
-} from "./chunks/chunk-UXLATKEQ.js";
+} from "./chunks/chunk-CLNMVQZJ.js";
 import "./chunks/chunk-FUB7B3VK.js";
 import "./chunks/chunk-UHPK62Q5.js";
 import "./chunks/chunk-3ZHGONNA.js";

package/dist/youiyoux.js

@@ -3,7 +3,7 @@ import { createRequire as __youiRequire } from "node:module"; const require = __
 import {
   COMMAND_NAMES,
   main
-} from "./chunks/chunk-UXLATKEQ.js";
+} from "./chunks/chunk-CLNMVQZJ.js";
 import "./chunks/chunk-FUB7B3VK.js";
 import "./chunks/chunk-UHPK62Q5.js";
 import "./chunks/chunk-3ZHGONNA.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "youiyoux",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Your agent rebuilds components you already have. youiyoux catches it: npx youiyoux turns any repo into a shareable report of near-duplicate components, hardcoded token values and off-library imports, with the fixes.",
   "license": "MIT",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "type": "module",
   "bin": {
-    "youiyoux": "./dist/youiyoux.js",
-    "youi": "./dist/youi.js"
+    "youiyoux": "dist/youiyoux.js",
+    "youi": "dist/youi.js"
   },
   "files": [
     "dist",
@@ -32,17 +32,12 @@
     "ai-agents",
     "claude-code",
     "codex",
-    "cursor",
     "mcp",
     "tailwind",
     "shadcn",
     "react",
     "audit"
   ],
-  "scripts": {
-    "build": "node build.mjs",
-    "prepack": "node build.mjs"
-  },
   "dependencies": {
     "@ast-grep/napi": "0.45.3",
     "axe-core": "4.14.0",
@@ -51,11 +46,14 @@
     "typescript": "6.0.3"
   },
   "devDependencies": {
-    "@youiyoux/cli": "workspace:*",
-    "@youiyoux/core": "workspace:*",
-    "@youiyoux/scanner": "workspace:*"
+    "@youiyoux/cli": "0.1.2",
+    "@youiyoux/core": "0.1.2",
+    "@youiyoux/scanner": "0.1.2"
   },
   "exports": {
     "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "node build.mjs"
   }
-}
+}