ilse-design 0.3.0-beta.7 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Iverson Dantas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,16 +1,16 @@
 # Ilse
 
-**Olho do designer dentro do agente de código.**
+**The designer's eye inside the code agent.**
 
-Aponte o que está errado na UI. Seu agente corrige.
+Point at what's wrong in the UI. Your agent fixes it.
 
 ```bash
-npm install @iversondantas/ilse@beta
+npm install ilse-design
 ```
 
 ```tsx
 // app/layout.tsx
-import { Ilse } from "@iversondantas/ilse/react";
+import { Ilse } from "ilse-design/react";
 
 export default function Layout({ children }) {
   return (
@@ -24,24 +24,24 @@ export default function Layout({ children }) {
 }
 ```
 
-Em dev, aparece uma toolbar flutuante. Em prod, desaparece automaticamente.
+In dev, a floating toolbar appears. In production, it disappears automatically.
 
 ---
 
-## Setup completo (3 passos)
+## Setup (3 steps)
 
-### 1. Instalar
+### 1. Install
 
 ```bash
-npm install @iversondantas/ilse@beta --legacy-peer-deps
+npm install ilse-design
 ```
 
-### 2. Adicionar o componente no layout
+### 2. Add the component to your layout
 
 **Next.js (App Router):**
 ```tsx
 // app/layout.tsx
-import { Ilse } from "@iversondantas/ilse/react";
+import { Ilse } from "ilse-design/react";
 
 export default function RootLayout({ children }) {
   return (
@@ -57,8 +57,8 @@ export default function RootLayout({ children }) {
 
 **Vite / CRA / Remix / Astro:**
 ```tsx
-// App.tsx ou equivalente
-import { Ilse } from "@iversondantas/ilse/react";
+// App.tsx or equivalent
+import { Ilse } from "ilse-design/react";
 
 function App() {
   return (
@@ -70,115 +70,108 @@ function App() {
 }
 ```
 
-### 3. Conectar ao seu agente (opcional)
+### 3. Start the CLI
 
-Para o Claude Code corrigir automaticamente:
 ```bash
-npx @iversondantas/ilse@beta setup
+npx ilse
 ```
 
-Isso registra o MCP server no Claude Code. Reinicie o Claude Code.
-
-Para outros agentes (Cursor, VS Code, Codex, ChatGPT): funciona via clipboard automaticamente. Sem setup.
+First run: choose automatic mode (recommended) or clipboard. The CLI detects your agent (Claude, Codex, Cursor, Gemini) and connects automatically.
 
 ---
 
-## Como usar
+## How it works
 
-1. Rode seu projeto (`npm run dev`)
-2. Abre no browser — você verá uma toolbar pixelada no canto
-3. Clica no toolbar → escolhe modo (elemento, texto, área)
-4. Clica no que está errado na UI
-5. Escreve o que precisa mudar ("botão torto", "cor errada")
-6. Clica enviar
+1. Run your project (`npm run dev`)
+2. Open in browser — you'll see a small toolbar at the bottom
+3. Click the toolbar → selection mode activates
+4. Click any element, select text, or draw an area
+5. Describe what needs to change
+6. Attach reference images (paste with Ctrl+V or click +)
+7. Send
 
-**Se o MCP está conectado:** a anotação vai direto pro seu agente.
-**Se não está:** copia automático pro clipboard. Cola no chat do agente (Cmd+V).
+**Automatic mode:** the annotation goes straight to your agent, which reads the code, fixes it, and resolves.
 
-No Claude Code:
-```
-/ilse
-```
-Uma palavra. O agente lê todas as anotações pendentes, corrige cada uma, e marca como resolvido.
+**Clipboard mode:** copies to clipboard. Paste in your agent's chat (Cmd+V).
 
 ---
 
-## O que a Ilse captura
+## What Ilse captures
 
-Quando você anota um elemento, o agente recebe:
+When you annotate an element, the agent receives:
 
-- **Seletor CSS** (`button.cta-primary`)
-- **Nome do componente React** (via React fiber)
-- **Componente stack** (hierarquia)
-- **Grep pattern** (pra encontrar no código)
-- **Full DOM path**
-- **Styles relevantes** (filtrados por intent — se você disse "cor errada", só manda cores)
-- **Parent context** (flex, gap, layout)
-- **Viewport, URL, DPR** (contexto da página)
-- **Imagem de referência** (se colar com Cmd+V no textarea)
+- **Contextual label** — `button: "Submit"`, `heading: "Product Designer..."`
+- **CSS selector** — `button.cta-primary`
+- **React component name** — via React fiber (dev mode)
+- **Component stack** — parent hierarchy
+- **Grep pattern** — to find it in code
+- **Relevant styles** — filtered by intent (if you said "wrong color", only sends colors)
+- **Parent context** — flex, gap, layout
+- **Reference images** — paste from Figma, screenshot, or upload
+- **Viewport, URL, DPR** — page context
 
-O agente não precisa adivinhar — tem tudo que precisa pra agir.
+The agent doesn't guess — it has everything it needs to act.
 
 ---
 
 ## Features
 
-- **3 modos de captura** — click em elemento, seleção de texto, arrastar área
-- **Imagem de referência** — Cole screenshot do Figma direto no textarea (Cmd+V)
-- **Animation pause** — Congela animações pra anotar tooltips, toasts, dropdowns
-- **Envio individual ou batch** — anota várias, envia de uma vez
-- **Smart augmentation** — filtra styles por intent (layout, cor, spacing, tipografia)
-- **Fallback inteligente** — MCP → clipboard → modal
-- **Análise estática** (bônus) — `ilse check` detecta tokens hardcoded, a11y, consistência
+- **3 capture modes** — click element, select text, draw area
+- **Reference images** — paste screenshots or upload. Inline badges with hover preview
+- **Suggestions** — static analysis (contrast, a11y, touch targets, DS tokens) + AI analysis on demand
+- **Design intelligence** — auto-detects design tokens from tailwind.config, tokens.json, CSS variables
+- **Chat mode** — free-text instructions without selecting an element
+- **Page scan** — full-page design audit with categorized issues
+- **Resize & snap** — drag handles with snap-to-grid (8px default, configurable)
+- **Animation freeze** — pause animations to annotate tooltips, toasts, dropdowns
+- **Batch send** — annotate multiple elements, send all at once
+- **Smart augmentation** — filters styles by intent (layout, color, spacing, typography)
+- **Session resume** — agent keeps context between annotations
+- **Stream progress** — see each fix resolve in real-time
+- **i18n** — auto-detects system language (English / Portuguese), switchable in settings
 
 ---
 
 ## CLI
 
-A Ilse também tem CLI pra análise estática:
-
 ```bash
-npx @iversondantas/ilse@beta init    # setup interativo
-npx @iversondantas/ilse@beta check   # análise estática
-npx @iversondantas/ilse@beta listen  # debug mode (WS server)
+ilse                    # start (first-run setup + listen mode)
+ilse listen             # manual mode (no auto-execute)
+ilse annotations        # list annotations
+ilse resolve <id>       # resolve an annotation
+ilse setup              # register MCP server in Claude Code
+ilse --reset            # reset setup
 ```
 
 ---
 
-## Filosofia
-
-IA liberou designers do gargalo de execução, mas craft ainda exige esforço humano.
-
-A Ilse existe para potencializar o uso de IA no craft. Não é craft vs. IA — pelo contrário. O designer aponta o que o olho vê. O agente faz o que a mão faria.
-
-> "Design é uma ferramenta para melhorar a humanidade." — Ilse Crawford
-
----
-
-## Compatibilidade
+## Agent compatibility
 
 | Framework | Status |
 |---|---|
-| Next.js 13+ | ✓ |
+| Next.js 13+ (App & Pages Router) | ✓ |
 | Vite + React | ✓ |
 | Create React App | ✓ |
 | Remix | ✓ |
 | Astro + React | ✓ |
 
-| Agente | Integração |
+| Agent | Integration |
 |---|---|
-| Claude Code | MCP nativo + skill `/ilse` |
+| Claude Code | MCP native + auto-execute |
 | Cursor | MCP |
 | VS Code (Copilot/Continue) | MCP |
-| Codex, ChatGPT, Gemini | Clipboard automático |
+| Codex, Gemini | Auto-execute via CLI |
+| Any other | Clipboard fallback |
 
 ---
 
-## Status
+## Philosophy
+
+AI freed designers from the execution bottleneck, but craft still demands human judgment.
 
-Beta público. `0.2.0-beta.x` — em desenvolvimento ativo.
+Ilse is the designer's eye inside the agent: you point at what's wrong, the agent fixes it, you approve. Magic — but in control.
 
-Quer reportar bug ou sugerir feature? Abre uma issue: github.com/idantas/ilse
+> "Design is a tool for improving humanity." — Ilse Crawford
 
 ---
 

package/dist/agent/executor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"executor.d.ts","sourceRoot":"","sources":["../../src/agent/executor.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,wBAAgB,sBAAsB,IAAI,IAAI,CAK7C;AAED,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEhF,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAqBD,wBAAgB,WAAW,IAAI,cAAc,CAM5C;AAkED,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,UAAU,EAAE,EAAE,IAAI,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,MAAM,CA4DjG;AAID,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,OAAO,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,cAAc,EACrB,OAAO,GAAE;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAO,GACjD,OAAO,CAAC,eAAe,CAAC,CA8E1B;AAED,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,OAAO,CAAC;IACZ,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAsB,YAAY,CAChC,WAAW,EAAE,UAAU,EAAE,EACzB,KAAK,EAAE,cAAc,EACrB,OAAO,GAAE;IACP,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACf,GACL,OAAO,CAAC,oBAAoB,CAAC,CA+I/B"}
+{"version":3,"file":"executor.d.ts","sourceRoot":"","sources":["../../src/agent/executor.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,wBAAgB,sBAAsB,IAAI,IAAI,CAK7C;AAED,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEhF,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAqBD,wBAAgB,WAAW,IAAI,cAAc,CAM5C;AAwHD,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,UAAU,EAAE,EAAE,IAAI,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,MAAM,CAwGjG;AAID,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,OAAO,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,cAAc,EACrB,OAAO,GAAE;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAO,GACjD,OAAO,CAAC,eAAe,CAAC,CA8E1B;AAED,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,OAAO,CAAC;IACZ,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAsB,YAAY,CAChC,WAAW,EAAE,UAAU,EAAE,EACzB,KAAK,EAAE,cAAc,EACrB,OAAO,GAAE;IACP,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACf,GACL,OAAO,CAAC,oBAAoB,CAAC,CAgL/B"}

package/dist/agent/executor.js

@@ -41,44 +41,61 @@ export function detectAgent() {
 // ── Prompt formatting ───────────────────────────────────────────────────────
 function buildPrompt(annotation) {
     const augmented = augmentAnnotation(annotation);
+    const isChat = annotation.intent === 'chat';
     const isMove = annotation.intent === 'move' && annotation.rearrangeData;
     const isCreate = annotation.intent === 'create';
     const instructions = [];
-    if (isMove) {
+    const isAnalyze = annotation.intent === 'analyze';
+    if (isAnalyze) {
+        instructions.push('Ilse detected issues on this element. Perform a design review.', '', 'Element context:', augmented.context, '', 'INSTRUCTIONS:', '1. Read the component source file (use the grep pattern or component name)', '2. Check REUSE: is there a reusable component in the project (e.g. components/ui/Button) that should be used instead of inline classes? List the path.', '3. Check CONSISTENCY: does this element follow the same pattern as similar ones? (font-weight, padding, colors)', '4. Check DS: if there are design tokens in the project (tailwind.config, tokens.json, theme), does the element use the correct tokens?', '5. List issues in 1-3 short, direct bullet points.', '6. Do NOT make edits. Only analyze and report.');
+    }
+    else if (annotation.intent === 'resize') {
+        const orig = annotation.rearrangeData?.originalRect;
+        const curr = annotation.rearrangeData?.currentRect;
+        instructions.push('The designer RESIZED this element. You must change the size in the code.', '', ...(orig && curr ? [
+            `Original size: ${orig.width}×${orig.height}px`,
+            `Desired size: ${curr.width}×${curr.height}px`,
+            `Delta: Δw=${curr.width - orig.width}px, Δh=${curr.height - orig.height}px`,
+        ] : []), '', 'HOW TO RESIZE:', '1. Find the element in the code using the grep pattern or selector', '2. Analyze how the size is defined (width/height, padding, min/max, flex)', '3. Apply the appropriate change for the context:', '   - If it has explicit width/height: adjust the values', '   - If padding/margin defines the size: adjust the padding', '   - If flex/grid: adjust flex-basis, min-width, or content', '4. Respect the existing layout — do not break responsiveness');
+    }
+    else if (isChat) {
+        instructions.push('The designer sent a direct instruction. EXECUTE — do not analyze, do not ask, do not request confirmation.', '', 'Instruction:', '"""', augmented.note, '"""', '', 'RULES:', '- APPLY the requested change. Read the files, edit, save.', '- If it is a question: answer in 1-2 direct sentences.', '- Do NOT analyze. Do NOT ask "confirm?". Do NOT say "this annotation is of type X". Just do it.', '- Be surgical — edit only what is necessary.');
+    }
+    else if (isMove) {
         const { originalRect: o, currentRect: c } = annotation.rearrangeData;
         const dx = c.x - o.x;
         const dy = c.y - o.y;
-        instructions.push('O designer ARRASTOU este elemento para uma nova posição. Você deve mover o elemento no código.', '', `Direção do movimento: ${dx > 0 ? 'para a direita' : dx < 0 ? 'para a esquerda' : 'sem deslocamento horizontal'} (${dx}px), ${dy > 0 ? 'para baixo' : dy < 0 ? 'para cima' : 'sem deslocamento vertical'} (${dy}px)`, '', 'COMO MOVER:', '1. Encontre o elemento no código usando o grep pattern ou selector', '2. Analise o layout atual (flex, grid, static, absolute)', '3. Aplique a mudança adequada ao contexto:', '   - Flexbox/Grid: mude a order, mova o elemento no JSX, ou ajuste align-self/justify-self', '   - Se precisa mudar a ORDEM entre irmãos: reordene os elementos no JSX/HTML', '   - Position absolute/fixed: ajuste top/left/right/bottom', '   - Static: use margin ou mude a posição no DOM', '4. NÃO adicione position:absolute só para mover — respeite o layout existente', '5. Se o delta é pequeno (< 20px), pode ser ajuste de margin/padding', '6. Se o delta é grande, pode significar reordenação de elementos');
+        instructions.push('The designer DRAGGED this element to a new position. You must move the element in the code.', '', `Movement direction: ${dx > 0 ? 'right' : dx < 0 ? 'left' : 'no horizontal displacement'} (${dx}px), ${dy > 0 ? 'down' : dy < 0 ? 'up' : 'no vertical displacement'} (${dy}px)`, '', 'HOW TO MOVE:', '1. Find the element in the code using the grep pattern or selector', '2. Analyze the current layout (flex, grid, static, absolute)', '3. Apply the appropriate change for the context:', '   - Flexbox/Grid: change order, reorder the element in JSX, or adjust align-self/justify-self', '   - If you need to change ORDER among siblings: reorder elements in JSX/HTML', '   - Position absolute/fixed: adjust top/left/right/bottom', '   - Static: use margin or change position in DOM', '4. Do NOT add position:absolute just to move — respect the existing layout', '5. If delta is small (< 20px), it may be a margin/padding adjustment', '6. If delta is large, it may mean element reordering');
     }
     else if (isCreate) {
-        instructions.push('O designer marcou uma ÁREA VAZIA onde quer que você CRIE conteúdo novo.', '', 'COMO CRIAR:', '1. Encontre o container mais próximo usando o selector ou parent', '2. Crie o elemento descrito na nota do designer', '3. Posicione dentro do container existente, no local mais lógico', '4. Siga o padrão visual e de código dos componentes vizinhos');
+        instructions.push('The designer marked an EMPTY AREA where you should CREATE new content.', '', 'HOW TO CREATE:', '1. Find the nearest container using the selector or parent', '2. Create the element described in the designer\'s note', '3. Position it inside the existing container, in the most logical spot', '4. Follow the visual and code patterns of neighboring components');
     }
     else {
-        instructions.push('1. Analise se o problema está na DEFINIÇÃO do componente ou na INSTÂNCIA específica', '2. Se é um problema de estilo padrão, corrija no componente base', '3. Se é específico dessa instância, corrija só no uso', '4. Se o mesmo problema pode existir em outras ocorrências, procure com o grep pattern e corrija todas', '5. Seja cirúrgico — edite apenas o necessário');
+        instructions.push('1. Analyze whether the issue is in the component DEFINITION or the specific INSTANCE', '2. If it is a default style issue, fix it in the base component', '3. If it is specific to this instance, fix only the usage', '4. If the same issue may exist in other occurrences, search with the grep pattern and fix all', '5. Be surgical — edit only what is necessary');
     }
     return [
-        'Você recebeu uma anotação visual do designer via Ilse (visual feedback tool).',
+        'You received a visual annotation from the designer via Ilse (visual feedback tool).',
         '',
-        'Contexto do elemento:',
+        'Element context:',
         augmented.context,
         '',
-        'INSTRUÇÕES:',
+        'INSTRUCTIONS:',
         ...instructions,
         '',
-        'Após aplicar as mudanças, responda em UMA linha (máximo 15 palavras) o que você mudou.',
-        'Exemplo: "Ajustei align-items do Button em components/Button.tsx"',
+        'After applying changes, respond in ONE line (max 15 words) describing what you changed.',
+        'Example: "Adjusted align-items on Button in components/Button.tsx"',
     ].join('\n');
 }
 export function buildBatchPrompt(annotations, opts) {
     const sections = annotations.map((ann, i) => {
         const augmented = augmentAnnotation(ann);
-        return `### Anotação #${i + 1} (id: ${ann.id})\n${augmented.context}`;
+        return `### Annotation #${i + 1} (id: ${ann.id})\n${augmented.context}`;
     });
     // Resumed session: agent already has instructions, just send the new annotation(s)
     if (opts?.isResume) {
         const count = annotations.length;
         return [
-            `Nova${count > 1 ? 's' : ''} ${count === 1 ? 'anotação' : `${count} anotações`} do designer. Mesmas regras de antes.`,
+            `New ${count === 1 ? 'annotation' : `${count} annotations`} from the designer. Same rules as before.`,
             '',
             ...sections,
         ].join('\n');
@@ -86,45 +103,86 @@ export function buildBatchPrompt(annotations, opts) {
     // First invocation: full instructions
     const hasMove = annotations.some(a => a.intent === 'move' && a.rearrangeData);
     const hasCreate = annotations.some(a => a.intent === 'create');
+    const hasChat = annotations.some(a => a.intent === 'chat');
+    const allChat = annotations.every(a => a.intent === 'chat');
+    const allAnalyze = annotations.every(a => a.intent === 'analyze');
     const count = annotations.length;
+    // Pure analyze batch — design review mode
+    if (allAnalyze) {
+        return [
+            `Analyze ${count === 1 ? 'this element' : `these ${count} elements`} from a design perspective.`,
+            '',
+            'RULES:',
+            '- Read the source code of each element (use grep pattern or component name)',
+            '- Check REUSE: is there a reusable component (e.g. components/ui/Button) that should be used?',
+            '- Check CONSISTENCY: does the element follow the same pattern as similar ones in the project?',
+            '- Check DS: if there are tokens (tailwind.config, tokens.json, theme), does the element use the correct ones?',
+            '- Do NOT make edits. Only analyze and report in short bullet points.',
+            '',
+            ...sections,
+            '',
+            'OUTPUT BEHAVIOR:',
+            '- For each element, print one line:',
+            '  #<id>: <analysis in max 20 words>',
+        ].join('\n');
+    }
+    // Pure chat batch — simplified preamble
+    if (allChat) {
+        return [
+            `Direct instruction from the designer. EXECUTE — do not analyze, do not ask for confirmation.`,
+            '',
+            'RULES:',
+            '- APPLY the requested change. Read the files, edit, save.',
+            '- If it is a question: answer in 1-2 direct sentences.',
+            '- Do NOT analyze. Do NOT ask "confirm?". Just do it.',
+            '- Be surgical — edit only what is necessary.',
+            '',
+            ...sections,
+            '',
+            'OUTPUT BEHAVIOR:',
+            '- Before each action, briefly state (1 short sentence) what you are doing.',
+            '- After finishing EACH message individually, IMMEDIATELY print a line in this format:',
+            '  #<id>: <what you did in max 15 words>',
+        ].join('\n');
+    }
     return [
-        `Você recebeu ${count} ${count === 1 ? 'anotação visual' : 'anotações visuais'} do designer via Ilse (visual feedback tool).`,
+        `You received ${count} visual ${count === 1 ? 'annotation' : 'annotations'} from the designer via Ilse (visual feedback tool).`,
         ...(count > 1 ? [
-            'Corrija TODAS em uma única passada. Analise o conjunto antes de agir:',
+            'Fix ALL in a single pass. Analyze the set before acting:',
         ] : [
-            'Corrija esta anotação:',
+            'Fix this annotation:',
         ]),
-        '- Se duas anotações são no mesmo elemento, consolide',
-        '- Se um mesmo padrão aparece em várias, corrija no componente base',
-        '- Se o mesmo problema pode existir em outras ocorrências fora das anotações, procure com grep e corrija',
-        '- Seja cirúrgico — edite apenas o necessário',
+        '- If two annotations are on the same element, consolidate',
+        '- If the same pattern appears in several, fix it in the base component',
+        '- If the same issue may exist in other occurrences outside the annotations, search with grep and fix all',
+        '- Be surgical — edit only what is necessary',
         ...(hasMove ? [
             '',
-            'ANOTAÇÕES DE MOVER (intent: move):',
-            '- O designer ARRASTOU elementos para novas posições. O campo **Move** mostra o delta em pixels.',
-            '- Para mover: analise o layout (flex/grid/static) e aplique a mudança adequada:',
-            '  flexbox/grid → mude order, reordene JSX, ou ajuste align-self',
-            '  position absolute → ajuste top/left',
-            '  static → ajuste margin ou reordene no DOM',
-            '- NÃO adicione position:absolute só para mover — respeite o layout existente',
-            '- Delta pequeno (< 20px) = ajuste de margin/padding. Delta grande = reordenação.',
+            'MOVE ANNOTATIONS (intent: move):',
+            '- The designer DRAGGED elements to new positions. The **Move** field shows the delta in pixels.',
+            '- To move: analyze the layout (flex/grid/static) and apply the appropriate change:',
+            '  flexbox/grid → change order, reorder JSX, or adjust align-self',
+            '  position absolute → adjust top/left',
+            '  static → adjust margin or reorder in DOM',
+            '- Do NOT add position:absolute just to move — respect the existing layout',
+            '- Small delta (< 20px) = margin/padding adjustment. Large delta = element reordering.',
         ] : []),
         ...(hasCreate ? [
             '',
-            'ANOTAÇÕES DE CRIAR (intent: create):',
-            '- O designer marcou áreas vazias onde quer conteúdo novo.',
-            '- Crie o elemento descrito na nota, dentro do container mais próximo.',
-            '- Siga o padrão visual e de código dos componentes vizinhos.',
+            'CREATE ANNOTATIONS (intent: create):',
+            '- The designer marked empty areas where new content is needed.',
+            '- Create the element described in the note, inside the nearest container.',
+            '- Follow the visual and code patterns of neighboring components.',
         ] : []),
         '',
         ...sections,
         '',
-        'COMPORTAMENTO DE OUTPUT:',
-        '- Antes de cada ação, fale brevemente (1 frase curta em pt-BR) o que você está fazendo.',
-        '  Ex: "Vou ler o Header pra entender o layout", "Procurando o componente Button", "Ajustando o alinhamento".',
-        '- Após terminar CADA anotação individualmente (não no final), imprima IMEDIATAMENTE uma linha no formato:',
-        '  #<id>: <o que fez em no máximo 15 palavras>',
-        '- Não acumule resumos pro final. Reporte um por um, em ordem, assim que terminar cada edição.',
+        'OUTPUT BEHAVIOR:',
+        '- Before each action, briefly state (1 short sentence) what you are doing.',
+        '  E.g.: "Reading the Header to understand the layout", "Searching for the Button component", "Adjusting alignment".',
+        '- After finishing EACH annotation individually (not at the end), IMMEDIATELY print a line in this format:',
+        '  #<id>: <what you did in max 15 words>',
+        '- Do not accumulate summaries for the end. Report one by one, in order, as soon as you finish each edit.',
     ].join('\n');
 }
 export async function executeAnnotation(annotation, agent, options = {}) {
@@ -228,7 +286,8 @@ export async function executeBatch(annotations, agent, options = {}) {
         let timedOut = false;
         let sessionId;
         const summaries = new Map();
-        let resolvedIndex = 0; // next annotation to resolve via tool_use order
+        let resolvedIndex = 0; // fallback: resolve by order when file_path matching fails
+        const resolvedIds = new Set(); // track which annotations have been resolved
         const proc = spawn(agent.command, args, {
             cwd,
             env: process.env,
@@ -263,13 +322,44 @@ export async function executeBatch(annotations, agent, options = {}) {
                     // Parse stream-json events
                     try {
                         const event = JSON.parse(trimmed);
-                        handleStreamEvent(event, annotations, summaries, () => {
-                            if (resolvedIndex < annotations.length) {
-                                const ann = annotations[resolvedIndex++];
-                                const summary = `Editando ${ann.component ?? ann.element}`;
-                                if (!summaries.has(ann.id)) {
-                                    summaries.set(ann.id, summary);
-                                    options.onProgress?.(ann.id, summary);
+                        handleStreamEvent(event, annotations, summaries, (filePath) => {
+                            // Try to match by file_path first
+                            let matched = false;
+                            if (filePath) {
+                                const basename = filePath.split('/').pop() ?? '';
+                                for (const ann of annotations) {
+                                    if (resolvedIds.has(ann.id))
+                                        continue;
+                                    // Match if grepPattern contains the filename or component name
+                                    const grep = ann.grepPattern ?? '';
+                                    const comp = ann.component ?? '';
+                                    if ((grep && filePath.includes(grep.split(/[:\s]/)[0])) ||
+                                        (comp && basename.toLowerCase().includes(comp.toLowerCase())) ||
+                                        (basename && grep.toLowerCase().includes(basename.toLowerCase()))) {
+                                        resolvedIds.add(ann.id);
+                                        const summary = `Editando ${basename}`;
+                                        if (!summaries.has(ann.id)) {
+                                            summaries.set(ann.id, summary);
+                                            options.onProgress?.(ann.id, summary);
+                                        }
+                                        matched = true;
+                                        break;
+                                    }
+                                }
+                            }
+                            // Fallback: resolve by order
+                            if (!matched) {
+                                while (resolvedIndex < annotations.length && resolvedIds.has(annotations[resolvedIndex].id)) {
+                                    resolvedIndex++;
+                                }
+                                if (resolvedIndex < annotations.length) {
+                                    const ann = annotations[resolvedIndex++];
+                                    resolvedIds.add(ann.id);
+                                    const summary = `Editando ${ann.component ?? ann.element}`;
+                                    if (!summaries.has(ann.id)) {
+                                        summaries.set(ann.id, summary);
+                                        options.onProgress?.(ann.id, summary);
+                                    }
                                 }
                             }
                         }, (id) => { sessionId = id; }, (thinking) => options.onThinking?.(thinking));
@@ -356,7 +446,8 @@ function handleStreamEvent(event, annotations, summaries, onToolUse, onSessionId
                 if (thinking)
                     onThinking(thinking);
                 if (toolName && ['Edit', 'Write', 'MultiEdit', 'Update'].includes(toolName)) {
-                    onToolUse();
+                    const filePath = typeof input?.file_path === 'string' ? input.file_path : undefined;
+                    onToolUse(filePath);
                 }
             }
             // Text blocks: emit as thinking (cleaned up), also parse "#<id>:" summary pattern
@@ -432,7 +523,7 @@ function parseBatchSummaries(stdout, annotations) {
             result.set(match[1], match[2].trim());
         }
     }
-    // Fill missing summaries with fallback
+    // Fill missing summaries with fallback (skip analyze — those should have real analysis)
     for (const ann of annotations) {
         if (!result.has(ann.id)) {
             result.set(ann.id, 'Corrigido');