draply-dev 1.3.4 → 1.3.5

package/bin/cli.js

@@ -262,47 +262,96 @@ const server = http.createServer((req, res) => {
         for (const [filePath, { found, items }] of fileChanges) {
           console.log(` \x1b[36m🤖\x1b[0m AI applying ${items.length} changes → ${found.relativePath}`);
 
-          // Build combined prompt
+          // Find the relevant context snippet (~50 lines around the class usage)
+          const lines = found.content.split('\n');
+          let contextStart = 0, contextEnd = lines.length - 1;
+          for (const item of items) {
+            for (let i = 0; i < lines.length; i++) {
+              if (lines[i].includes(item.className)) {
+                contextStart = Math.min(contextStart || i, Math.max(0, i - 25));
+                contextEnd = Math.min(lines.length - 1, i + 25);
+              }
+            }
+          }
+          const snippet = lines.slice(contextStart, contextEnd + 1).join('\n');
+
+          // Build changes description
           let changesBlock = '';
           items.forEach(item => {
             const propsStr = Object.entries(item.props).map(([k, v]) => `  ${k}: ${v}`).join('\n');
             changesBlock += `\nElement .${item.className}:\n${propsStr}\n`;
           });
 
-          const prompt = `You are a code editor. Modify the file to apply CSS style changes.
+          const prompt = `You are a code editor. I need to apply CSS style changes to a file.
 
-FILE: ${found.relativePath}
+FILE: ${found.relativePath} (lines ${contextStart + 1}-${contextEnd + 1})
 \`\`\`
-${found.content}
+${snippet}
 \`\`\`
 
-CHANGES TO APPLY:
+CHANGES:
 ${changesBlock}
-RULES:
-- If CSS/SCSS file: find each class rule and update/add properties. Add rules if missing.
-- If JSX/TSX file: apply in the most appropriate way:
-  - Existing inline styles → update them
-  - File imports CSS → note which CSS file to edit
-  - Tailwind classes → update className with Tailwind classes
-  - Otherwise → add style prop
-- Keep ALL existing code intact. Only modify what's needed.
-- Do NOT add extra comments.
-
-Return ONLY the complete modified file. No markdown fences, no explanations.`;
+IMPORTANT: Return ONLY a JSON array of search-and-replace pairs. Each pair is:
+{"search": "exact existing code to find", "replace": "modified code to replace it with"}
+
+Rules:
+- "search" must be an EXACT substring from the file above (copy it precisely)
+- "search" should be minimal — just the line(s) that need changing
+- For CSS: modify the class rule properties. If rule doesn't exist, set search to the closing bracket of the nearest rule and add the new rule after it.
+- For JSX with className: add/update the style prop on that element
+- For JSX with imported CSS: add CSS rules (search for the import line, replace with import + note)
+- Keep changes minimal
+
+Example response:
+[{"search": "className=\\"hero\\"", "replace": "className=\\"hero\\" style={{color: 'red', fontSize: '20px'}}"}]
+
+Return ONLY valid JSON array. No markdown, no explanation.`;
 
           try {
             const result = await callAI(cfg.apiKey, prompt, cfg.provider || 'groq');
-            let code = result.trim();
-            if (code.startsWith('```')) {
-              code = code.replace(/^```[a-z]*\n?/, '').replace(/\n?```$/, '');
+            let jsonStr = result.trim();
+            // Clean markdown fences if present
+            if (jsonStr.startsWith('```')) {
+              jsonStr = jsonStr.replace(/^```[a-z]*\n?/, '').replace(/\n?```$/, '');
             }
-            if (code.length < 20) {
-              items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI returned invalid response' }));
+
+            let patches;
+            try {
+              patches = JSON.parse(jsonStr);
+            } catch {
+              console.log(` \x1b[31m✗\x1b[0m AI returned invalid JSON`);
+              console.log(`   Response: ${jsonStr.substring(0, 200)}`);
+              items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI returned invalid JSON' }));
               continue;
             }
-            fs.writeFileSync(found.file, code, 'utf8');
-            console.log(` \x1b[32m✓\x1b[0m Applied to ${found.relativePath}`);
-            items.forEach(item => results.push({ selector: item.selector, ok: true, file: found.relativePath }));
+
+            if (!Array.isArray(patches) || patches.length === 0) {
+              items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI returned no changes' }));
+              continue;
+            }
+
+            // Apply patches
+            let content = found.content;
+            let applied = 0;
+            for (const patch of patches) {
+              if (!patch.search || patch.replace === undefined) continue;
+              if (content.includes(patch.search)) {
+                content = content.replace(patch.search, patch.replace);
+                applied++;
+                console.log(` \x1b[32m  ✓\x1b[0m Patch applied`);
+              } else {
+                console.log(` \x1b[33m  ⚠\x1b[0m Search string not found: "${patch.search.substring(0, 60)}..."`);
+              }
+            }
+
+            if (applied > 0) {
+              fs.writeFileSync(found.file, content, 'utf8');
+              console.log(` \x1b[32m✓\x1b[0m Applied ${applied} patches to ${found.relativePath}`);
+              items.forEach(item => results.push({ selector: item.selector, ok: true, file: found.relativePath }));
+            } else {
+              items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'No patches matched' }));
+            }
+
           } catch (aiErr) {
             console.log(` \x1b[31m✗\x1b[0m AI error: ${aiErr.message}`);
             items.forEach(item => results.push({ selector: item.selector, ok: false, reason: aiErr.message }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draply-dev",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "Visual overlay for any frontend project — move, resize, restyle live in the browser, save to CSS",
   "author": "Arman",
   "type": "commonjs",