viagen 0.0.45 → 0.0.46

package/dist/index.js

@@ -6,7 +6,7 @@ var __export = (target, all) => {
 
 // src/index.ts
 import { execSync as execSync2 } from "child_process";
-import { mkdirSync as mkdirSync2, writeFileSync as writeFileSync4 } from "fs";
+import { mkdirSync as mkdirSync3, writeFileSync as writeFileSync4 } from "fs";
 import { join as join6 } from "path";
 import { loadEnv } from "vite";
 
@@ -110,7 +110,7 @@ function registerHealthRoutes(server, env, errorRef) {
       );
     }
   });
-  const currentVersion = true ? "0.0.45" : "0.0.0";
+  const currentVersion = true ? "0.0.46" : "0.0.0";
   debug("health", `version resolved: ${currentVersion}`);
   let versionCache = null;
   server.middlewares.use("/via/version", (_req, res) => {
@@ -2122,7 +2122,8 @@ function buildUiHtml(opts) {
       font-family: inherit;
       outline: none;
       resize: none;
-      height: 24px;
+      height: auto;
+      min-height: 20px;
       overflow: hidden;
       line-height: 1.5;
     }
@@ -2151,7 +2152,45 @@ function buildUiHtml(opts) {
     .send-btn:hover { background: #e5e5e5; color: #525252; }
     .send-btn.active { background: #171717; color: #ffffff; border-color: #171717; }
     .send-btn.active:hover { background: #404040; border-color: #404040; }
+    .attach-btn {
+      padding: 6px 6px;
+      background: transparent;
+      color: #a3a3a3;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: color 0.15s, background 0.15s;
+      margin-right: 2px;
+    }
+    .attach-btn:hover { color: #525252; background: #f5f5f5; }
     .send-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+    .send-btn.stop { background: #ef4444; color: #ffffff; border-color: #ef4444; opacity: 1; cursor: pointer; }
+    .send-btn.stop:hover { background: #dc2626; border-color: #dc2626; }
+    .drop-overlay {
+      display: none;
+      position: absolute;
+      inset: 0;
+      background: rgba(37,99,235,0.08);
+      border: 2px dashed #2563eb;
+      border-radius: 12px;
+      z-index: 100;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+    }
+    .drop-overlay.visible { display: flex; }
+    .drop-overlay span {
+      font-size: 13px;
+      font-weight: 600;
+      color: #2563eb;
+      background: #ffffff;
+      padding: 8px 16px;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
     .status-bar {
       display: none;
       align-items: center;
@@ -2438,7 +2477,8 @@ function buildUiHtml(opts) {
     ${hasEditor ? '<button class="tab" data-tab="files"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>Files</button>' : ""}
     <button class="tab" data-tab="logs"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>Logs</button>
   </div>` : ""}
-  <div id="chat-view" style="display:flex;flex-direction:column;flex:1;overflow:hidden;">
+  <div id="chat-view" style="display:flex;flex-direction:column;flex:1;overflow:hidden;position:relative;">
+    <div class="drop-overlay" id="drop-overlay"><span>Drop files to upload</span></div>
     <div class="setup-banner" id="setup-banner"></div>
 
     <div class="activity-bar" id="activity-bar"></div>
@@ -2448,6 +2488,8 @@ function buildUiHtml(opts) {
       <div class="input-wrap" id="input-wrap">
         <textarea id="input" rows="1" placeholder="What do you want to build?" autofocus></textarea>
         <div class="input-bottom">
+          <input type="file" id="file-input" multiple style="display:none;">
+          <button class="attach-btn" id="attach-btn" title="Upload files"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></button>
           <button class="send-btn" id="send-btn"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg></button>
         </div>
       </div>
@@ -2545,7 +2587,7 @@ function buildUiHtml(opts) {
 
     function scrollToBottom() {
       requestAnimationFrame(function() {
-        scrollToBottom();
+        messagesEl.scrollTop = messagesEl.scrollHeight;
       });
     }
 
@@ -3202,23 +3244,35 @@ function buildUiHtml(opts) {
     }
     inputEl.addEventListener('input', function() { autoResize(); updateSendActive(); });
 
+    var currentAbort = null;
     function setStreaming(v) {
       isStreaming = v;
       inputEl.disabled = v;
       document.getElementById('input-wrap').classList.toggle('disabled', v);
-      sendBtn.disabled = v;
-      sendBtn.innerHTML = v ? '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="animation:spin 1s linear infinite"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>' : '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>';
+      if (v) {
+        sendBtn.disabled = false;
+        sendBtn.classList.add('stop');
+        sendBtn.classList.remove('active');
+        sendBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="6" y="6" width="12" height="12" rx="2"></rect></svg>';
+      } else {
+        sendBtn.classList.remove('stop');
+        sendBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>';
+        currentAbort = null;
+      }
       updateSendActive();
       if (v) stopHistoryPolling();
       else startHistoryPolling();
     }
 
     async function sendRaw(text) {
+      var abort = new AbortController();
+      currentAbort = abort;
       try {
         var res = await fetch('/via/chat', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ message: text }),
+          signal: abort.signal,
         });
 
         var reader = res.body.getReader();
@@ -3255,13 +3309,17 @@ function buildUiHtml(opts) {
           }
         }
       } catch (e) {
-        if (!unloading) addErrorBlock('Connection failed');
+        if (abort.signal.aborted) {
+          // User cancelled \u2014 not an error
+        } else if (!unloading) {
+          addErrorBlock('Connection failed');
+        }
       }
 
       closeToolGroup();
       closeAllTaskGroups('completed');
       hideActivity(lastUsage);
-      playDoneSound();
+      if (!abort.signal.aborted) playDoneSound();
       historyTimestamp = Date.now();
       setStreaming(false);
       markCommittedFiles();
@@ -3288,7 +3346,13 @@ function buildUiHtml(opts) {
       await sendRaw(text);
     }
 
-    sendBtn.addEventListener('click', send);
+    sendBtn.addEventListener('click', function() {
+      if (isStreaming && currentAbort) {
+        currentAbort.abort();
+        return;
+      }
+      send();
+    });
     inputEl.addEventListener('keydown', function (e) {
       if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
     });
@@ -3300,6 +3364,79 @@ function buildUiHtml(opts) {
       currentTextSpan = null;
       inputEl.focus();
     });
+    // \u2500\u2500 Drag & drop file upload \u2500\u2500
+    var chatView = document.getElementById('chat-view');
+    var dropOverlay = document.getElementById('drop-overlay');
+    var dragCounter = 0;
+    chatView.addEventListener('dragenter', function(e) {
+      e.preventDefault();
+      dragCounter++;
+      dropOverlay.classList.add('visible');
+    });
+    chatView.addEventListener('dragleave', function(e) {
+      e.preventDefault();
+      dragCounter--;
+      if (dragCounter <= 0) { dragCounter = 0; dropOverlay.classList.remove('visible'); }
+    });
+    chatView.addEventListener('dragover', function(e) { e.preventDefault(); });
+    function readFileAsBase64(file) {
+      return new Promise(function(resolve) {
+        var reader = new FileReader();
+        reader.onload = function() {
+          var result = reader.result;
+          resolve(result.split(',')[1] || result);
+        };
+        reader.readAsDataURL(file);
+      });
+    }
+    var MAX_UPLOAD_SIZE = 10 * 1024 * 1024; // 10MB
+    async function uploadFiles(files) {
+      if (!files || !files.length) return;
+      var uploaded = [];
+      for (var i = 0; i < files.length; i++) {
+        var file = files[i];
+        if (file.size > MAX_UPLOAD_SIZE) {
+          addErrorBlock(file.name + ' is too large (max 10MB)');
+          continue;
+        }
+        var isText = file.type.startsWith('text/') || /\\.(json|md|txt|csv|js|ts|jsx|tsx|css|html|xml|yaml|yml|toml|sh|py|rb|go|rs|sql|env|log|cfg|ini|conf)$/i.test(file.name);
+        try {
+          var payload;
+          if (isText) {
+            payload = { path: '.viagen/uploads/' + file.name, content: await file.text() };
+          } else {
+            payload = { path: '.viagen/uploads/' + file.name, content: await readFileAsBase64(file), encoding: 'base64' };
+          }
+          await fetch('/via/file', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload),
+          });
+          uploaded.push(file.name);
+        } catch (err) {
+          addErrorBlock('Failed to upload ' + file.name);
+        }
+      }
+      if (uploaded.length > 0) {
+        var msg = uploaded.length === 1
+          ? 'I just uploaded a file: .viagen/uploads/' + uploaded[0] + '. Take a look and let me know what you think.'
+          : 'I just uploaded ' + uploaded.length + ' files to .viagen/uploads/: ' + uploaded.join(', ') + '. Take a look and let me know what you think.';
+        inputEl.value = msg;
+        send();
+      }
+    }
+    chatView.addEventListener('drop', async function(e) {
+      e.preventDefault();
+      dragCounter = 0;
+      dropOverlay.classList.remove('visible');
+      uploadFiles(e.dataTransfer ? e.dataTransfer.files : []);
+    });
+
+    // \u2500\u2500 Paperclip file picker \u2500\u2500
+    var fileInput = document.getElementById('file-input');
+    document.getElementById('attach-btn').addEventListener('click', function() { fileInput.click(); });
+    fileInput.addEventListener('change', function() { uploadFiles(fileInput.files); fileInput.value = ''; });
+
     // \u2500\u2500 View mode detection \u2500\u2500
     var viewMode = 'overlay';
     if (window.self === window.top) viewMode = 'standalone';
@@ -3965,8 +4102,14 @@ function createAuthMiddleware(token) {
 }
 
 // src/files.ts
-import { readdirSync, readFileSync as readFileSync2, writeFileSync as writeFileSync3, statSync } from "fs";
-import { join as join3, resolve, relative, basename } from "path";
+import {
+  readdirSync,
+  readFileSync as readFileSync2,
+  writeFileSync as writeFileSync3,
+  mkdirSync as mkdirSync2,
+  statSync
+} from "fs";
+import { join as join3, resolve, relative, basename, dirname } from "path";
 function readBody2(req) {
   return new Promise((resolve3, reject) => {
     let body = "";
@@ -4133,14 +4276,20 @@ function registerFileRoutes(server, opts) {
         res.end(JSON.stringify({ error: "Missing path or content" }));
         return;
       }
-      if (!isPathAllowed(writePath, resolvedPatterns, opts.projectRoot)) {
+      const isViagen = writePath.startsWith(".viagen/");
+      if (!isViagen && !isPathAllowed(writePath, resolvedPatterns, opts.projectRoot)) {
         res.statusCode = 403;
         res.end(JSON.stringify({ error: "Path not in editable list" }));
         return;
       }
       const abs = resolve(opts.projectRoot, writePath);
       try {
-        writeFileSync3(abs, writeContent, "utf-8");
+        mkdirSync2(dirname(abs), { recursive: true });
+        if (body.encoding === "base64") {
+          writeFileSync3(abs, Buffer.from(writeContent, "base64"));
+        } else {
+          writeFileSync3(abs, writeContent, "utf-8");
+        }
         res.setHeader("Content-Type", "application/json");
         res.end(JSON.stringify({ status: "ok", path: writePath }));
       } catch (err) {
@@ -18621,7 +18770,7 @@ function viagen(options) {
       logBuffer.init(projectRoot);
       wrapLogger(config2.logger, logBuffer);
       const viagenDir = join6(projectRoot, ".viagen");
-      mkdirSync2(viagenDir, { recursive: true });
+      mkdirSync3(viagenDir, { recursive: true });
       writeFileSync4(
         join6(viagenDir, "config.json"),
         JSON.stringify({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viagen",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "description": "Vite dev server plugin that exposes endpoints for chatting with Claude Code SDK",
   "type": "module",
   "main": "./dist/index.js",