draply-dev 1.3.8 → 1.4.0

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;
-}
-
-// ── 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();
-  });
+const overridesPath = path.join(projectRoot, 'draply.css');
+if (!fs.existsSync(overridesPath)) {
+  fs.writeFileSync(overridesPath, '/* draply */\n', 'utf8');
 }
 
-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,142 +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;
+          if (ch.props && ch.props.googleFont) {
+            reqGoogleFonts.add(ch.props.googleFont);
+            delete ch.props.googleFont;
           }
-          const found = findFileForClass(projectRoot, className);
-          if (!found) {
-            results.push({ selector: ch.selector, ok: false, reason: `"${className}" not found in source` });
-            continue;
-          }
-          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;
+             }
           }
-          const snippet = lines.slice(contextStart, contextEnd + 1).join('\n');
+          if (!fileMap.has(targetFile)) {
+            fileMap.set(targetFile, { content: fs.readFileSync(targetFile, 'utf8'), items: [] });
+          }
+          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 ONLY a JSON array of search-and-replace pairs. Each pair format:
-{"search": "exact code to find", "replace": "modified code to replace it with"}
+
+IMPORTANT: Return your changes wrapped in <patch> tags containing <search> and <replace> blocks. DO NOT use JSON.
 
 Rules:
-- "search" must be an EXACT substring from the file snippet above (copy it precisely).
-- Ensure all double quotes inside JSON string values are properly escaped (\\").
-- Do NOT include markdown fences, preambles, or explanations. Only the JSON array.
-- 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. Do not duplicate properties inside object literals.
+- 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!
+- If 'src' is provided in Changes, update the src attribute of the target HTML element!
 
 Example response:
-[
-  {
-    "search": "style={{ color: 'blue', opacity: 0.5 }}",
-    "replace": "style={{ color: '#ff0000', opacity: 0.5 }}"
-  }
-]`;
-
+<patch>
+<search>
+  <button className="btn" style={{ padding: '10px' }}>
+</search>
+<replace>
+  <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');
-            
-            // Extract JSON array using regex to ignore any surrounding text/markdown
-            let jsonStr = result.trim();
-            const match = jsonStr.match(/\[[\s\S]*\]/);
-            if (match) {
-              jsonStr = match[0];
-            }
-
-            let patches;
-            try {
-              patches = JSON.parse(jsonStr);
-            } catch (err) {
-              console.log(` \x1b[31m✗\x1b[0m AI returned invalid JSON`);
-              console.log(`   Response: ${jsonStr.substring(0, 300)}`);
-              items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI returned invalid JSON: ' + err.message }));
-              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 }));
           }
         }
 
@@ -374,34 +320,7 @@ Example response:
     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 {
@@ -413,7 +332,7 @@ Example response:
         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 {};');
@@ -425,7 +344,9 @@ Example response:
     return;
   }
 
-  // ── Proxy to dev server ─────────────────────────────────────────────────────
+
+
+  // ── Proxy to dev server ────────────────────────────────────────────────────
   const opts = {
     hostname: targetHost,
     port: targetPort,
@@ -462,8 +383,8 @@ Example response:
   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>`);
   });
@@ -472,10 +393,20 @@ Example response:
 });
 
 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); });