draply-dev 1.3.9 → 1.4.1

package/bin/cli.js

@@ -2,7 +2,6 @@
 'use strict';
 
 const http = require('http');
-const https = require('https');
 const fs = require('fs');
 const path = require('path');
 const zlib = require('zlib');
@@ -12,15 +11,16 @@ const targetPort = parseInt(args[0]) || 3000;
 const proxyPort = parseInt(args[1]) || 4000;
 const targetHost = args[2] || 'localhost';
 
+const pkg = require('../package.json');
 const OVERLAY_JS = fs.readFileSync(path.join(__dirname, '../src/overlay.js'), 'utf8');
-const FEATURES_JS = fs.readFileSync(path.join(__dirname, '../src/draply-features.js'), 'utf8');
+// Unique marker that does NOT appear inside overlay.js itself
 const MARKER = 'data-ps-done="1"';
-const INJECT_TAG = `\n<link rel="stylesheet" href="/draply.css">\n<script ${MARKER}>\n${OVERLAY_JS}\n</script>\n<script data-draply-features="1">\n${FEATURES_JS}\n</script>`;
+const INJECT_TAG = `\n<link rel="stylesheet" href="/draply.css">\n<script ${MARKER}>\n${OVERLAY_JS}\n</script>`;
 
 function injectOverlay(html) {
   if (html.includes(MARKER)) return html;
-  if (html.includes('</body>')) return html.replace(/<\/body>/i, INJECT_TAG + '\n</body>');
-  if (html.includes('</html>')) return html.replace(/<\/html>/i, INJECT_TAG + '\n</html>');
+  if (html.includes('</body>')) return html.replace(/<\/body>/i, () => INJECT_TAG + '\n</body>');
+  if (html.includes('</html>')) return html.replace(/<\/html>/i, () => INJECT_TAG + '\n</html>');
   return html + INJECT_TAG;
 }
 
@@ -35,169 +35,62 @@ function decode(headers, chunks) {
   });
 }
 
-// ── Project & Config ──────────────────────────────────────────────────────────
+// Создаём пустой draply.css при старте если его нет
 const projectRoot = process.cwd();
-const draplyDir = path.join(projectRoot, '.draply');
-if (!fs.existsSync(draplyDir)) {
-  fs.mkdirSync(draplyDir, { recursive: true });
-  const gitignorePath = path.join(projectRoot, '.gitignore');
-  if (fs.existsSync(gitignorePath)) {
-    const gi = fs.readFileSync(gitignorePath, 'utf8');
-    if (!gi.includes('.draply')) {
-      fs.appendFileSync(gitignorePath, '\n# Draply temp files\n.draply/\n', 'utf8');
-    }
-  }
-}
-const overridesPath = path.join(draplyDir, 'overrides.css');
-if (!fs.existsSync(overridesPath)) fs.writeFileSync(overridesPath, '/* draply */\n', 'utf8');
-
-const configPath = path.join(draplyDir, 'config.json');
-function loadConfig() {
-  try { return JSON.parse(fs.readFileSync(configPath, 'utf8')); } catch { return {}; }
-}
-function saveConfig(cfg) {
-  fs.writeFileSync(configPath, JSON.stringify(cfg, null, 2), 'utf8');
-}
-
-// ── File walker ───────────────────────────────────────────────────────────────
-function walkDir(dir, exts, results = []) {
-  try {
-    const entries = fs.readdirSync(dir, { withFileTypes: true });
-    for (const e of entries) {
-      const fp = path.join(dir, e.name);
-      if (e.name.startsWith('.') || e.name === 'node_modules' || e.name === 'dist' || e.name === '.next' || e.name === 'build') continue;
-      if (e.isDirectory()) walkDir(fp, exts, results);
-      else if (exts.some(x => e.name.endsWith(x))) results.push(fp);
-    }
-  } catch { /* skip */ }
-  return results;
-}
-
-// ── Find best source file for a className ─────────────────────────────────────
-function findFileForClass(root, className) {
-  const files = walkDir(root, ['.jsx', '.tsx', '.js', '.ts', '.css', '.scss', '.vue', '.svelte']);
-  for (const f of files) {
-    try {
-      const content = fs.readFileSync(f, 'utf8');
-      if (content.includes(className)) {
-        return { file: f, content, relativePath: path.relative(root, f) };
-      }
-    } catch { /* skip */ }
-  }
-  return null;
-}
-
-// ── Extract class name from CSS selector ──────────────────────────────────────
-function extractClassName(selector) {
-  const parts = selector.split('>').map(s => s.trim());
-  for (let i = parts.length - 1; i >= 0; i--) {
-    const m = parts[i].match(/\.([a-zA-Z][a-zA-Z0-9_-]*)/);
-    if (m) return m[1];
-  }
-  return null;
+const overridesPath = path.join(projectRoot, 'draply.css');
+if (!fs.existsSync(overridesPath)) {
+  fs.writeFileSync(overridesPath, '/* draply */\n', 'utf8');
 }
 
-// ── Call AI API (Gemini or Groq) ──────────────────────────────────────────────
-function callAI(apiKey, prompt, provider) {
-  if (provider === 'groq') return callGroq(apiKey, prompt);
-  return callGemini(apiKey, prompt);
-}
 
-function callGroq(apiKey, prompt) {
-  return new Promise((resolve, reject) => {
-    const body = JSON.stringify({
-      model: 'llama-3.3-70b-versatile',
-      messages: [{ role: 'user', content: prompt }],
-      temperature: 0.1,
-      max_tokens: 8192
-    });
-
-    const options = {
-      hostname: 'api.groq.com',
-      path: '/openai/v1/chat/completions',
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${apiKey}`,
-        'Content-Length': Buffer.byteLength(body)
-      }
-    };
-
-    const req = https.request(options, res => {
-      const chunks = [];
-      res.on('data', c => chunks.push(c));
-      res.on('end', () => {
-        try {
-          const data = JSON.parse(Buffer.concat(chunks).toString());
-          if (data.error) {
-            reject(new Error(data.error.message || 'Groq API error'));
-            return;
-          }
-          const text = data.choices?.[0]?.message?.content || '';
-          resolve(text);
-        } catch (e) { reject(e); }
-      });
-    });
-    req.on('error', reject);
-    req.write(body);
-    req.end();
-  });
-}
-
-function callGemini(apiKey, prompt) {
-  return new Promise((resolve, reject) => {
-    const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-lite:generateContent?key=${apiKey}`;
-    const body = JSON.stringify({
-      contents: [{ parts: [{ text: prompt }] }],
-      generationConfig: { temperature: 0.1, maxOutputTokens: 8192 }
-    });
-
-    const parsed = new URL(url);
-    const options = {
-      hostname: parsed.hostname,
-      path: parsed.pathname + parsed.search,
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json', 'Content-Length': Buffer.byteLength(body) }
-    };
-
-    const req = https.request(options, res => {
-      const chunks = [];
-      res.on('data', c => chunks.push(c));
-      res.on('end', () => {
-        try {
-          const data = JSON.parse(Buffer.concat(chunks).toString());
-          if (data.error) {
-            reject(new Error(data.error.message || 'Gemini API error'));
-            return;
-          }
-          const text = data.candidates?.[0]?.content?.parts?.[0]?.text || '';
-          resolve(text);
-        } catch (e) { reject(e); }
-      });
-    });
-    req.on('error', reject);
-    req.write(body);
-    req.end();
-  });
-}
-
-// ══════════════════════════════════════════════════════════════════════════════
-// HTTP SERVER
-// ══════════════════════════════════════════════════════════════════════════════
 const server = http.createServer((req, res) => {
 
+  // CORS preflight
   res.setHeader('Access-Control-Allow-Origin', '*');
   res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
   res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
   if (req.method === 'OPTIONS') { res.writeHead(204); res.end(); return; }
 
+  // ── Upload endpoint ─────────────────────────────────────────────────────────
+  if (req.url === '/draply-upload' && req.method === 'POST') {
+    let body = '';
+    req.on('data', c => body += c);
+    req.on('end', () => {
+      try {
+        const { name, base64 } = JSON.parse(body);
+        const assetsDir = path.join(process.cwd(), 'assets_draply');
+        if (!fs.existsSync(assetsDir)) fs.mkdirSync(assetsDir);
+        
+        const ext = path.extname(name) || '.png';
+        const base = path.basename(name, ext);
+        let finalName = name;
+        let counter = 1;
+        while (fs.existsSync(path.join(assetsDir, finalName))) {
+          finalName = `${base}-${counter}${ext}`;
+          counter++;
+        }
+        
+        const data = base64.replace(/^data:image\/\w+;base64,/, '');
+        fs.writeFileSync(path.join(assetsDir, finalName), data, 'base64');
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: true, url: `./assets_draply/${finalName}` }));
+      } catch (e) {
+        res.writeHead(500); res.end(JSON.stringify({ ok: false, error: e.message }));
+      }
+    });
+    return;
+  }
+
   // ── Config endpoint (get/set API key) ───────────────────────────────────────
+  const configPath = path.join(process.cwd(), 'draply.config.json');
+  function loadConfig() { try { return JSON.parse(fs.readFileSync(configPath, 'utf8')); } catch { return {}; } }
+  function saveConfig(cfg) { fs.writeFileSync(configPath, JSON.stringify(cfg, null, 2), 'utf8'); }
+
   if (req.url === '/draply-config') {
     if (req.method === 'GET') {
       const cfg = loadConfig();
       res.writeHead(200, { 'Content-Type': 'application/json' });
-      // Mask API key for security — only send if it exists
-      res.end(JSON.stringify({ hasKey: !!cfg.apiKey, provider: cfg.provider || 'gemini' }));
+      res.end(JSON.stringify({ hasKey: !!cfg.apiKey, provider: cfg.provider || 'groq' }));
       return;
     }
     if (req.method === 'POST') {
@@ -205,17 +98,12 @@ const server = http.createServer((req, res) => {
       req.on('data', c => body += c);
       req.on('end', () => {
         try {
-          const { apiKey, provider } = JSON.parse(body);
-          const cfg = loadConfig();
-          if (apiKey !== undefined) cfg.apiKey = apiKey;
-          if (provider) cfg.provider = provider;
+          const cfg = { ...loadConfig(), ...JSON.parse(body) };
           saveConfig(cfg);
-          console.log(` \x1b[32m✓\x1b[0m API key saved (${cfg.provider || 'gemini'})`);
           res.writeHead(200, { 'Content-Type': 'application/json' });
           res.end(JSON.stringify({ ok: true }));
         } catch (e) {
-          res.writeHead(500, { 'Content-Type': 'application/json' });
-          res.end(JSON.stringify({ ok: false, error: e.message }));
+          res.writeHead(500); res.end(JSON.stringify({ ok: false, error: e.message }));
         }
       });
       return;
@@ -223,148 +111,200 @@ const server = http.createServer((req, res) => {
   }
 
   // ── AI Apply endpoint ───────────────────────────────────────────────────────
-  if (req.url === '/draply-ai-apply' && req.method === 'POST') {
+  if ((req.url === '/draply-ai-apply' || req.url === '/draply-save') && req.method === 'POST') {
     let body = '';
     req.on('data', c => body += c);
     req.on('end', async () => {
       try {
         const { changes } = JSON.parse(body);
         const cfg = loadConfig();
+        
+        // If no config, fallback to saving standard CSS
         if (!cfg.apiKey) {
-          res.writeHead(400, { 'Content-Type': 'application/json' });
-          res.end(JSON.stringify({ ok: false, error: 'No API key configured. Click ⚙ to set up.' }));
-          return;
+           const lines = [];
+           for (const ch of (changes || [])) {
+             if (!ch.selector) continue;
+             const props = Object.entries(ch.props).map(([k, v]) => `  ${k}: ${v};`).join('\n');
+             const label = ch.selector.split('>').pop().trim();
+             lines.push(`/* ${label} */\n${ch.selector} {\n${props}\n}`);
+           }
+           const css = '/* draply */\n\n' + lines.join('\n\n') + '\n';
+           fs.writeFileSync(overridesPath, css, 'utf8');
+           res.writeHead(200, { 'Content-Type': 'application/json' });
+           res.end(JSON.stringify({ ok: true, fallback: true }));
+           return;
         }
 
-        // Group changes by file
         const results = [];
-        const fileChanges = new Map(); // file -> { found, allProps }
+        const fileMap = new Map();
 
+        // Check for google fonts
+        const reqGoogleFonts = new Set();
         for (const ch of (changes || [])) {
-          if (!ch.selector || !ch.props) continue;
-          const className = extractClassName(ch.selector);
-          if (!className) {
-            results.push({ selector: ch.selector, ok: false, reason: 'No class name found' });
-            continue;
-          }
-          const found = findFileForClass(projectRoot, className);
-          if (!found) {
-            results.push({ selector: ch.selector, ok: false, reason: `"${className}" not found in source` });
-            continue;
+          if (ch.props && ch.props.googleFont) {
+            reqGoogleFonts.add(ch.props.googleFont);
+            delete ch.props.googleFont;
           }
-          if (!fileChanges.has(found.file)) {
-            fileChanges.set(found.file, { found, items: [] });
+        }
+        if (reqGoogleFonts.size > 0) {
+          const targetHTML = path.join(process.cwd(), 'index.html');
+          if (fs.existsSync(targetHTML)) {
+            let html = fs.readFileSync(targetHTML, 'utf8');
+            reqGoogleFonts.forEach(font => {
+              const link = `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent(font)}:wght@400;700&display=swap">`;
+              if (!html.includes(link)) {
+                html = html.replace('</head>', `  ${link}\n</head>`);
+              }
+            });
+            fs.writeFileSync(targetHTML, html, 'utf8');
           }
-          fileChanges.get(found.file).items.push({ selector: ch.selector, className, props: ch.props });
         }
 
-        // One AI call per file (saves tokens & rate limit)
-        for (const [filePath, { found, items }] of fileChanges) {
-          console.log(` \x1b[36m🤖\x1b[0m AI applying ${items.length} changes → ${found.relativePath}`);
-
-          // 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);
-              }
-            }
+        // 1. Group by exact file (thanks to React Fiber, fallback to index.html)
+        for (const ch of (changes || [])) {
+          let targetFile = ch.exactFile;
+          if (!targetFile || !fs.existsSync(targetFile)) {
+             const fallbackHTML = path.join(process.cwd(), 'index.html');
+             if (fs.existsSync(fallbackHTML)) {
+               targetFile = fallbackHTML;
+             } else {
+               results.push({ selector: ch.selector, ok: false, reason: 'Source file not linked' });
+               continue;
+             }
+          }
+          if (!fileMap.has(targetFile)) {
+            fileMap.set(targetFile, { content: fs.readFileSync(targetFile, 'utf8'), items: [] });
           }
-          const snippet = lines.slice(contextStart, contextEnd + 1).join('\n');
+          fileMap.get(targetFile).items.push(ch);
+        }
 
-          // Build changes description
+        // 2. Call AI per file using XML Patches
+        for (const [filePath, { content: rawContent, items }] of fileMap) {
+          
           let changesBlock = '';
+          const content = rawContent.replace(/\r\n/g, '\n');
+          const lines = content.split('\n');
+          let classNamesToFind = items.map(c => {
+             const parts = c.selector.split('.');
+             return parts.length > 1 ? parts.pop() : '';
+          }).filter(Boolean);
+
+          let ctxStart = -1, ctxEnd = -1;
+          for (let i = 0; i < lines.length; i++) {
+             if (classNamesToFind.some(cls => lines[i].includes(cls)) || (items.length === 1 && items[0].selector && lines[i].includes(items[0].selector.split('#').pop()))) {
+               const s = Math.max(0, i - 40);
+               const e = Math.min(lines.length - 1, i + 40);
+               if (ctxStart === -1 || s < ctxStart) ctxStart = s;
+               if (ctxEnd === -1 || e > ctxEnd) ctxEnd = e;
+             }
+          }
+          if (ctxStart === -1) { ctxStart = 0; ctxEnd = Math.min(lines.length - 1, 150); }
+          
+          const snippet = lines.slice(ctxStart, ctxEnd + 1).join('\n');
+
           items.forEach(item => {
             const propsStr = Object.entries(item.props).map(([k, v]) => `  ${k}: ${v}`).join('\n');
-            changesBlock += `\nElement .${item.className}:\n${propsStr}\n`;
+            changesBlock += `\nTarget Selector: ${item.selector}\nChanges:\n${propsStr}\n`;
           });
 
           const prompt = `You are a strict code editor applying style changes to a file.
 
-FILE: ${found.relativePath} (lines ${contextStart + 1}-${contextEnd + 1})
+FILE: ${path.basename(filePath)} (lines ${ctxStart + 1}-${ctxEnd + 1})
 \`\`\`
 ${snippet}
 \`\`\`
 
-CHANGES:
+CHANGES (Apply to HTML/React elements matching selectors):
 ${changesBlock}
+
 IMPORTANT: Return your changes wrapped in <patch> tags containing <search> and <replace> blocks. DO NOT use JSON.
 
 Rules:
-- The content inside <search> must be an EXACT substring from the file snippet above.
-- If adding properties to an existing CSS rule or JS object (like a style object), you MUST REPLACE the old values for those properties if they already exist. DO NOT CREATE DUPLICATE KEYS.
-- If the file is JSX, update the style object/prop without duplicating properties.
+- The content inside <search> must be an EXACT substring from the file snippet above (including indentation).
+- Update HTML/JSX inline styles or Tailwind classes appropriately.
+- REPLACE old style values if they exist, DO NOT duplicate keys!
+- If 'innerText' is provided in Changes, update the text content inside the target HTML element! Use ONLY the exact text provided in the request. DO NOT add signatures, names, attributions, or "complete" the text based on context.
+- If 'src' is provided in Changes, update the src attribute of the target HTML element!
 
 Example response:
 <patch>
 <search>
-  <section className="hero" style={{ padding: '10px' }}>
+  <button className="btn" style={{ padding: '10px' }}>
 </search>
 <replace>
-  <section className="hero" style={{ padding: '10px', color: '#ff0000' }}>
+  <button className="btn" style={{ padding: '10px', color: '#ff0000' }}>
 </replace>
 </patch>
 
 Return ONLY the patch blocks.`;
 
+          let apiResult = '';
           try {
-            const result = await callAI(cfg.apiKey, prompt, cfg.provider || 'groq');
-            
-            const patches = [];
-            const patchRegex = /<search>([\s\S]*?)<\/search>[\s\S]*?<replace>([\s\S]*?)<\/replace>/g;
-            let match;
-            while ((match = patchRegex.exec(result)) !== null) {
-              let s = match[1];
-              let r = match[2];
-              // Remove exactly one leading/trailing newline if AI added them around the tags
-              if (s.startsWith('\n')) s = s.substring(1);
-              if (s.endsWith('\n')) s = s.substring(0, s.length - 1);
-              if (r.startsWith('\n')) r = r.substring(1);
-              if (r.endsWith('\n')) r = r.substring(0, r.length - 1);
-              
-              if (s.trim()) patches.push({ search: s, replace: r });
-            }
-
-            if (patches.length === 0) {
-              console.log(` \x1b[31m✗\x1b[0m AI returned no readable patches`);
-              console.log(`   Response: ${result.substring(0, 300)}`);
-              items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI returned no format matches' }));
-              continue;
-            }
-
-            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 }));
+             // Groq call
+             const groqBody = JSON.stringify({
+               model: 'llama-3.3-70b-versatile',
+               messages: [{ role: 'user', content: prompt }],
+               temperature: 0.1, max_tokens: 8192
+             });
+             apiResult = await new Promise((resolve, reject) => {
+               const https = require('https');
+               const req = https.request({
+                 hostname: 'api.groq.com', path: '/openai/v1/chat/completions',
+                 method: 'POST',
+                 headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${cfg.apiKey}`, 'Content-Length': Buffer.byteLength(groqBody) }
+               }, res => {
+                 const chunks = [];
+                 res.on('data', c => chunks.push(c));
+                 res.on('end', () => {
+                   const data = JSON.parse(Buffer.concat(chunks).toString());
+                   if (data.error) reject(new Error(data.error.message));
+                   else resolve(data.choices?.[0]?.message?.content || '');
+                 });
+               });
+               req.on('error', reject); req.write(groqBody); req.end();
+             });
+
+             const patches = [];
+             const patchRegex = /<search>([\s\S]*?)<\/search>[\s\S]*?<replace>([\s\S]*?)<\/replace>/g;
+             let match;
+             while ((match = patchRegex.exec(apiResult)) !== null) {
+               let s = match[1], r = match[2];
+               s = s.replace(/^\n+/, '').replace(/\n+$/, '').replace(/\r/g, '');
+               r = r.replace(/^\n+/, '').replace(/\n+$/, '').replace(/\r/g, '');
+               if (s.trim()) patches.push({ search: s, replace: r });
+             }
+
+             let newContent = content;
+             let applied = 0;
+             for (const patch of patches) {
+               if (newContent.includes(patch.search)) {
+                 newContent = newContent.replace(patch.search, patch.replace);
+                 applied++;
+               } else {
+                 // Fallback to whitespace-agnostic matching
+                 const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                 const looseRegexStr = escapeRegExp(patch.search.trim()).replace(/\s+/g, '\\s+');
+                 const looseRegex = new RegExp(looseRegexStr);
+                 if (looseRegex.test(newContent)) {
+                   newContent = newContent.replace(looseRegex, patch.replace);
+                   applied++;
+                 }
+               }
+             }
+
+             if (applied > 0) {
+                // Restore original line endings if they were \r\n
+                const finalContent = rawContent.includes('\r\n') ? newContent.replace(/\n/g, '\r\n') : newContent;
+                fs.writeFileSync(filePath, finalContent, 'utf8');
+                console.log(` \x1b[32m✓\x1b[0m Modified ${path.basename(filePath)} (${applied} patch(es))`);
+                items.forEach(item => results.push({ selector: item.selector, ok: true }));
+             } else {
+                console.warn(` \x1b[33m⚠\x1b[0m AI matched 0 patches in ${path.basename(filePath)}`);
+                items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI patch failed to match' }));
+             }
+          } catch (e) {
+             console.error(` \x1b[31m✖\x1b[0m AI Error for ${path.basename(filePath)}:`, e.message);
+             items.forEach(item => results.push({ selector: item.selector, ok: false, reason: e.message }));
           }
         }
 
@@ -380,34 +320,7 @@ Return ONLY the patch blocks.`;
     return;
   }
 
-  // ── Save changes to CSS ─────────────────────────────────────────────────────
-  if (req.url === '/draply-save' && req.method === 'POST') {
-    let body = '';
-    req.on('data', c => body += c);
-    req.on('end', () => {
-      try {
-        const { changes } = JSON.parse(body);
-        const lines = [];
-        for (const ch of (changes || [])) {
-          if (!ch.selector) continue;
-          const props = Object.entries(ch.props).map(([k, v]) => `  ${k}: ${v};`).join('\n');
-          const label = ch.selector.split('>').pop().trim();
-          lines.push(`/* ${label} */\n${ch.selector} {\n${props}\n}`);
-        }
-        const css = '/* draply — ' + new Date().toLocaleString('ru-RU') + ' */\n\n' + lines.join('\n\n') + '\n';
-        fs.writeFileSync(overridesPath, css, 'utf8');
-        console.log(` \x1b[32m✓\x1b[0m Saved ${changes.length} changes to .draply/overrides.css`);
-        res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ ok: true }));
-      } catch (e) {
-        res.writeHead(500, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ ok: false, error: e.message }));
-      }
-    });
-    return;
-  }
-
-  // ── Serve CSS ───────────────────────────────────────────────────────────────
+  // ── Draply: Serve CSS ──────────────────────────────────────────────────────
   if (req.url.split('?')[0] === '/draply.css') {
     const isModule = req.headers['sec-fetch-dest'] === 'script' || req.url.includes('import');
     try {
@@ -419,7 +332,7 @@ Return ONLY the patch blocks.`;
         res.writeHead(200, { 'Content-Type': 'text/css', 'cache-control': 'no-store' });
         res.end(css);
       }
-    } catch {
+    } catch (e) {
       if (isModule) {
         res.writeHead(200, { 'Content-Type': 'application/javascript' });
         res.end('export default {};');
@@ -431,7 +344,9 @@ Return ONLY the patch blocks.`;
     return;
   }
 
-  // ── Proxy to dev server ─────────────────────────────────────────────────────
+
+
+  // ── Proxy to dev server ────────────────────────────────────────────────────
   const opts = {
     hostname: targetHost,
     port: targetPort,
@@ -468,8 +383,8 @@ Return ONLY the patch blocks.`;
   pReq.on('error', () => {
     res.writeHead(502, { 'Content-Type': 'text/html' });
     res.end(`<!DOCTYPE html><html><body style="background:#0a0a0f;color:#e8e8f0;font-family:monospace;padding:60px;text-align:center">
-      <h2 style="color:#ff6b6b">⚠ Can't reach ${targetHost}:${targetPort}</h2>
-      <p style="color:#555;margin-top:16px">Make sure your dev server is running, then refresh</p>
+      <h2 style="color:#ff6b6b">⚠ Не могу достучаться до ${targetHost}:${targetPort}</h2>
+      <p style="color:#555;margin-top:16px">Убедись что dev сервер запущен, потом обнови страницу</p>
       <script>setTimeout(()=>location.reload(), 2000)</script>
     </body></html>`);
   });
@@ -478,10 +393,20 @@ Return ONLY the patch blocks.`;
 });
 
 server.listen(proxyPort, () => {
-  console.log('\n \x1b[32m●\x1b[0m Draply running\n');
-  console.log(` Your project  →  \x1b[36mhttp://${targetHost}:${targetPort}\x1b[0m`);
-  console.log(` Open this     →  \x1b[33mhttp://localhost:${proxyPort}\x1b[0m  \x1b[32m← go here!\x1b[0m\n`);
-  console.log(` \x1b[90mCtrl+C to stop\x1b[0m\n`);
+  console.log(`\n \x1b[32m●\x1b[0m Draply v${pkg.version} запущен\n`);
+  console.log(` Твой проект  →  \x1b[36mhttp://${targetHost}:${targetPort}\x1b[0m`);
+  console.log(` Открой это  →  \x1b[33mhttp://localhost:${proxyPort}\x1b[0m  \x1b[32m← вот сюда заходи!\x1b[0m\n`);
+  console.log(` \x1b[90mCtrl+C чтобы остановить\x1b[0m\n`);
+});
+
+server.on('error', (e) => {
+  if (e.code === 'EADDRINUSE') {
+    console.error(`\x1b[31m✖ Ошибка: Порт ${proxyPort} уже занят.\x1b[0m`);
+    console.log(`Попробуй другой порт: \x1b[33mnpx draply ${targetPort} ${proxyPort + 1}\x1b[0m`);
+  } else {
+    console.error(`\x1b[31m✖ Ошибка сервера:\x1b[0m`, e.message);
+  }
+  process.exit(1);
 });
 
-process.on('SIGINT', () => { console.log('\n \x1b[90mDraply stopped\x1b[0m\n'); process.exit(0); });
+process.on('SIGINT', () => { console.log('\n \x1b[90mDraply остановлен\x1b[0m\n'); process.exit(0); });