viagen 0.0.53 → 0.0.55

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Plugin } from 'vite';
 
-declare const DEFAULT_SYSTEM_PROMPT = "\n  You are embedded in a Vite dev server as the \"viagen\" plugin.\n  Your job is to help build and modify the app. Files you edit will trigger Vite HMR automatically.\n  You can read .viagen/server.log to check recent Vite dev server output (compile errors, HMR updates, warnings).\n  Be concise.\n";
+declare const DEFAULT_SYSTEM_PROMPT = "\n  You are embedded in a Vite dev server as the \"viagen\" plugin.\n  Your job is to help build and modify the app. Files you edit will trigger Vite HMR automatically.\n  You can read .viagen/server.log to check recent Vite dev server output (compile errors, HMR updates, warnings).\n  Be concise.\n\n  You have agent-browser available for interacting with the running app in a real browser.\n  Use it to visually verify your changes, test interactions, and catch UI issues.\n  Key commands:\n    agent-browser open <url>          \u2014 open a page\n    agent-browser snapshot            \u2014 get accessibility tree with element refs (@e1, @e2, etc.)\n    agent-browser click @e<N>         \u2014 click an element by ref\n    agent-browser fill @e<N> \"value\"  \u2014 fill an input\n    agent-browser screenshot <file>   \u2014 capture a screenshot (you can view the image)\n    agent-browser diff snapshot --baseline <file> \u2014 compare page state before/after\n    agent-browser close               \u2014 close the browser\n  After making changes, consider using agent-browser to verify the result visually.\n";
 
 interface GitInfo {
     /** HTTPS remote URL (transformed from SSH if needed). */

package/dist/index.js

@@ -110,7 +110,7 @@ function registerHealthRoutes(server, env, errorRef) {
       );
     }
   });
-  const currentVersion = true ? "0.0.53" : "0.0.0";
+  const currentVersion = true ? "0.0.55" : "0.0.0";
   debug("health", `version resolved: ${currentVersion}`);
   let versionCache = null;
   server.middlewares.use("/via/version", (_req, res) => {
@@ -241,6 +241,18 @@ var DEFAULT_SYSTEM_PROMPT = `
   Your job is to help build and modify the app. Files you edit will trigger Vite HMR automatically.
   You can read .viagen/server.log to check recent Vite dev server output (compile errors, HMR updates, warnings).
   Be concise.
+
+  You have agent-browser available for interacting with the running app in a real browser.
+  Use it to visually verify your changes, test interactions, and catch UI issues.
+  Key commands:
+    agent-browser open <url>          \u2014 open a page
+    agent-browser snapshot            \u2014 get accessibility tree with element refs (@e1, @e2, etc.)
+    agent-browser click @e<N>         \u2014 click an element by ref
+    agent-browser fill @e<N> "value"  \u2014 fill an input
+    agent-browser screenshot <file>   \u2014 capture a screenshot (you can view the image)
+    agent-browser diff snapshot --baseline <file> \u2014 compare page state before/after
+    agent-browser close               \u2014 close the browser
+  After making changes, consider using agent-browser to verify the result visually.
 `;
 var ChatSession = class {
   sessionId;
@@ -758,23 +770,14 @@ data: ${JSON.stringify(doneData)}
 `);
           res.end();
         }
-        if (opts.env["VIAGEN_CALLBACK_URL"] && opts.env["VIAGEN_AUTH_TOKEN"]) {
+        if (opts.viagenClient && opts.projectId) {
           const taskId = opts.env["VIAGEN_TASK_ID"];
-          if (taskId && (event.inputTokens || event.outputTokens || event.costUsd)) {
-            fetch(opts.env["VIAGEN_CALLBACK_URL"], {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-                Authorization: `Bearer ${opts.env["VIAGEN_AUTH_TOKEN"]}`
-              },
-              body: JSON.stringify({
-                taskId,
-                ...event.inputTokens != null && { inputTokens: event.inputTokens },
-                ...event.outputTokens != null && { outputTokens: event.outputTokens },
-                ...event.costUsd != null && { costUsd: event.costUsd }
-              })
+          if (taskId && (event.inputTokens || event.outputTokens)) {
+            opts.viagenClient.tasks.update(opts.projectId, taskId, {
+              ...event.inputTokens != null && { inputTokens: event.inputTokens },
+              ...event.outputTokens != null && { outputTokens: event.outputTokens }
             }).catch((err) => {
-              debug("chat", `usage callback failed: ${err}`);
+              debug("chat", `usage report failed: ${err}`);
             });
           }
         }
@@ -797,6 +800,213 @@ data: ${JSON.stringify(doneData)}
 }
 
 // src/overlay.ts
+function buildPreviewScript() {
+  return (
+    /* js */
+    `
+(function() {
+  if (document.getElementById('viagen-preview-btn')) return;
+
+  var btn = document.createElement('button');
+  btn.id = 'viagen-preview-btn';
+  btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block;vertical-align:middle;margin-right:5px;"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg><span style="vertical-align:middle;">Feedback</span>';
+  btn.style.cssText = 'position:fixed;bottom:16px;left:16px;z-index:99998;padding:8px 14px;background:#ffffff;color:#525252;border:1px solid #e5e5e5;border-radius:20px;font-size:12px;font-weight:500;font-family:Geist,-apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer;letter-spacing:-0.01em;transition:border-color 0.15s,color 0.15s,box-shadow 0.15s;box-shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);display:flex;align-items:center;';
+  btn.onmouseenter = function() { btn.style.borderColor = '#d4d4d4'; btn.style.color = '#171717'; btn.style.boxShadow = '0 2px 6px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.06)'; };
+  btn.onmouseleave = function() { btn.style.borderColor = '#e5e5e5'; btn.style.color = '#525252'; btn.style.boxShadow = '0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04)'; };
+
+  btn.addEventListener('click', function() { openFeedback(); });
+  document.body.appendChild(btn);
+
+  function loadHtml2Canvas() {
+    return new Promise(function(resolve, reject) {
+      if (typeof window.html2canvas !== 'undefined') { resolve(window.html2canvas); return; }
+      var s = document.createElement('script');
+      s.src = 'https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.min.js';
+      s.onload = function() { resolve(window.html2canvas); };
+      s.onerror = function() { reject(new Error('Failed to load html2canvas')); };
+      document.head.appendChild(s);
+    });
+  }
+
+  function openFeedback() {
+    btn.disabled = true;
+    var origHTML = btn.innerHTML;
+    btn.innerHTML = '<span style="vertical-align:middle;">Capturing\u2026</span>';
+
+    loadHtml2Canvas().then(function(h2c) {
+      return h2c(document.documentElement, {
+        useCORS: true,
+        allowTaint: true,
+        logging: false,
+        scale: Math.min(window.devicePixelRatio || 1, 2),
+      });
+    }).then(function(canvas) {
+      var dataUrl = canvas.toDataURL('image/jpeg', 0.82);
+      btn.disabled = false;
+      btn.innerHTML = origHTML;
+      showModal(dataUrl);
+    }).catch(function(e) {
+      console.warn('[viagen-preview] Screenshot failed:', e);
+      btn.disabled = false;
+      btn.innerHTML = origHTML;
+      showModal(null);
+    });
+  }
+
+  function showModal(screenshotDataUrl) {
+    var overlay = document.createElement('div');
+    overlay.id = 'viagen-preview-modal';
+    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99999;display:flex;align-items:center;justify-content:center;font-family:Geist,-apple-system,BlinkMacSystemFont,sans-serif;';
+
+    var modal = document.createElement('div');
+    modal.style.cssText = 'background:#fff;border-radius:16px;padding:24px;max-width:560px;width:calc(100% - 32px);max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.2);box-sizing:border-box;';
+
+    /* Header */
+    var header = document.createElement('div');
+    header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;';
+    var title = document.createElement('h2');
+    title.textContent = 'Send Feedback';
+    title.style.cssText = 'margin:0;font-size:16px;font-weight:600;color:#171717;';
+    var closeBtn = document.createElement('button');
+    closeBtn.innerHTML = '&times;';
+    closeBtn.style.cssText = 'background:none;border:none;font-size:22px;cursor:pointer;color:#a3a3a3;padding:0;line-height:1;transition:color 0.15s;';
+    closeBtn.onmouseenter = function() { closeBtn.style.color = '#171717'; };
+    closeBtn.onmouseleave = function() { closeBtn.style.color = '#a3a3a3'; };
+    closeBtn.onclick = function() { overlay.remove(); };
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+    modal.appendChild(header);
+
+    /* Screenshot preview */
+    if (screenshotDataUrl) {
+      var imgWrap = document.createElement('div');
+      imgWrap.style.cssText = 'margin-bottom:16px;border-radius:8px;overflow:hidden;border:1px solid #e5e5e5;background:#f5f5f5;';
+      var img = document.createElement('img');
+      img.src = screenshotDataUrl;
+      img.style.cssText = 'width:100%;display:block;max-height:220px;object-fit:cover;object-position:top;';
+      imgWrap.appendChild(img);
+      modal.appendChild(imgWrap);
+    } else {
+      var pageRef = document.createElement('div');
+      pageRef.textContent = 'Page: ' + window.location.href;
+      pageRef.style.cssText = 'margin-bottom:16px;padding:10px 12px;background:#f5f5f5;border-radius:8px;font-size:12px;color:#737373;word-break:break-all;';
+      modal.appendChild(pageRef);
+    }
+
+    /* Textarea */
+    var label = document.createElement('label');
+    label.textContent = 'Describe your feedback';
+    label.style.cssText = 'display:block;font-size:13px;font-weight:500;color:#525252;margin-bottom:8px;';
+    modal.appendChild(label);
+
+    var textarea = document.createElement('textarea');
+    textarea.placeholder = 'e.g. The button color looks off, the layout breaks on mobile\u2026';
+    textarea.style.cssText = 'width:100%;min-height:96px;border:1px solid #e5e5e5;border-radius:8px;padding:12px;font-size:14px;font-family:inherit;resize:vertical;box-sizing:border-box;outline:none;transition:border-color 0.15s;color:#171717;';
+    textarea.onfocus = function() { textarea.style.borderColor = '#a3a3a3'; };
+    textarea.onblur = function() { textarea.style.borderColor = '#e5e5e5'; };
+    modal.appendChild(textarea);
+
+    /* Status */
+    var statusEl = document.createElement('div');
+    statusEl.style.cssText = 'margin-top:10px;font-size:13px;color:#737373;display:none;min-height:20px;';
+    modal.appendChild(statusEl);
+
+    /* Buttons */
+    var btnRow = document.createElement('div');
+    btnRow.style.cssText = 'display:flex;gap:8px;margin-top:16px;justify-content:flex-end;';
+    var cancelBtn = document.createElement('button');
+    cancelBtn.textContent = 'Cancel';
+    cancelBtn.style.cssText = 'padding:9px 16px;background:#f5f5f5;color:#525252;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;transition:background 0.15s;';
+    cancelBtn.onmouseenter = function() { cancelBtn.style.background = '#e5e5e5'; };
+    cancelBtn.onmouseleave = function() { cancelBtn.style.background = '#f5f5f5'; };
+    cancelBtn.onclick = function() { overlay.remove(); };
+    var submitBtn = document.createElement('button');
+    submitBtn.textContent = 'Create Task';
+    submitBtn.style.cssText = 'padding:9px 16px;background:#171717;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;transition:background 0.15s;';
+    submitBtn.onmouseenter = function() { if (!submitBtn.disabled) submitBtn.style.background = '#404040'; };
+    submitBtn.onmouseleave = function() { if (!submitBtn.disabled) submitBtn.style.background = '#171717'; };
+
+    submitBtn.addEventListener('click', function() {
+      var feedback = textarea.value.trim();
+      if (!feedback) {
+        textarea.style.borderColor = '#ef4444';
+        textarea.focus();
+        return;
+      }
+      submitBtn.disabled = true;
+      cancelBtn.disabled = true;
+      submitBtn.textContent = 'Creating\u2026';
+      submitBtn.style.opacity = '0.7';
+      statusEl.style.display = 'block';
+      statusEl.style.color = '#737373';
+      statusEl.textContent = 'Submitting your feedback\u2026';
+
+      var payload = {
+        prompt: feedback,
+        pageUrl: window.location.href,
+        screenshot: screenshotDataUrl || undefined,
+      };
+
+      fetch('/via/preview/task', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      }).then(function(res) {
+        if (!res.ok) {
+          return res.json().catch(function() { return {}; }).then(function(e) {
+            throw new Error(e.error || 'HTTP ' + res.status);
+          });
+        }
+        return res.json();
+      }).then(function() {
+        /* Success state */
+        modal.innerHTML = '';
+        var successDiv = document.createElement('div');
+        successDiv.style.cssText = 'text-align:center;padding:32px 24px;';
+        var check = document.createElement('div');
+        check.style.cssText = 'width:48px;height:48px;background:#22c55e;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#fff;font-size:22px;font-weight:700;';
+        check.textContent = '\\u2713';
+        var h3 = document.createElement('h3');
+        h3.textContent = 'Task Created!';
+        h3.style.cssText = 'margin:0 0 8px;font-size:16px;font-weight:600;color:#171717;font-family:Geist,-apple-system,BlinkMacSystemFont,sans-serif;';
+        var p = document.createElement('p');
+        p.textContent = 'Your feedback has been submitted successfully.';
+        p.style.cssText = 'margin:0;color:#737373;font-size:14px;font-family:Geist,-apple-system,BlinkMacSystemFont,sans-serif;';
+        successDiv.appendChild(check);
+        successDiv.appendChild(h3);
+        successDiv.appendChild(p);
+        modal.appendChild(successDiv);
+        setTimeout(function() { overlay.remove(); }, 2500);
+      }).catch(function(err) {
+        submitBtn.disabled = false;
+        cancelBtn.disabled = false;
+        submitBtn.textContent = 'Create Task';
+        submitBtn.style.opacity = '1';
+        statusEl.style.color = '#ef4444';
+        statusEl.textContent = 'Error: ' + (err.message || 'Failed to submit. Please try again.');
+      });
+    });
+
+    btnRow.appendChild(cancelBtn);
+    btnRow.appendChild(submitBtn);
+    modal.appendChild(btnRow);
+    overlay.appendChild(modal);
+
+    overlay.addEventListener('click', function(e) {
+      if (e.target === overlay) overlay.remove();
+    });
+    var escHandler = function(e) {
+      if (e.key === 'Escape') { overlay.remove(); document.removeEventListener('keydown', escHandler); }
+    };
+    document.addEventListener('keydown', escHandler);
+
+    document.body.appendChild(overlay);
+    setTimeout(function() { textarea.focus(); }, 50);
+  }
+})();
+`
+  );
+}
 function buildClientScript(opts) {
   const pos = opts.position;
   const pw = opts.panelWidth;
@@ -4334,7 +4544,9 @@ function registerFileRoutes(server, opts) {
 // src/inject.ts
 var SCRIPT_TAG = '<script src="/via/client.js" defer></script>';
 var MARKER = "viagen-toggle";
-function createInjectionMiddleware() {
+var PREVIEW_SCRIPT_TAG = '<script src="/via/preview.js" defer></script>';
+var PREVIEW_MARKER = "viagen-preview-btn";
+function createScriptInjectionMiddleware(scriptTag, marker) {
   return function injectMiddleware(req, res, next) {
     if (req.method !== "GET" && req.method !== "HEAD") {
       return next();
@@ -4359,7 +4571,7 @@ function createInjectionMiddleware() {
       if (!isHtmlResponse()) return chunk;
       const str = typeof chunk === "string" ? chunk : Buffer.isBuffer(chunk) ? chunk.toString("utf-8") : null;
       if (!str) return chunk;
-      if (str.includes(MARKER) || str.includes("/via/client.js")) {
+      if (str.includes(marker) || str.includes(scriptTag)) {
         injected = true;
         return chunk;
       }
@@ -4370,7 +4582,7 @@ function createInjectionMiddleware() {
       if (!res.headersSent) {
         res.removeHeader("content-length");
       }
-      const result = str.slice(0, idx) + SCRIPT_TAG + str.slice(idx);
+      const result = str.slice(0, idx) + scriptTag + str.slice(idx);
       return typeof chunk === "string" ? result : Buffer.from(result, "utf-8");
     }
     res.write = function(chunk, ...args) {
@@ -4390,6 +4602,12 @@ function createInjectionMiddleware() {
     next();
   };
 }
+function createInjectionMiddleware() {
+  return createScriptInjectionMiddleware(SCRIPT_TAG, MARKER);
+}
+function createPreviewInjectionMiddleware() {
+  return createScriptInjectionMiddleware(PREVIEW_SCRIPT_TAG, PREVIEW_MARKER);
+}
 
 // src/git.ts
 import { readFileSync as readFileSync3 } from "fs";
@@ -18433,17 +18651,14 @@ function date4(params) {
 // node_modules/zod/v4/classic/external.js
 config(en_default());
 
-// src/viagen-tools.ts
+// src/tools.ts
 import {
   createSdkMcpServer,
   tool
 } from "@anthropic-ai/claude-agent-sdk";
-import {
-  listTasks,
-  getTask,
-  createTask
-} from "viagen-sdk/sandbox";
 function createViagenTools(config2) {
+  const { client, projectId } = config2;
+  const taskId = process.env["VIAGEN_TASK_ID"];
   const tools = [
     tool(
       "viagen_update_task",
@@ -18459,112 +18674,94 @@ function createViagenTools(config2) {
         prReviewStatus: external_exports.string().optional().describe("PR review outcome \u2014 e.g. 'pass', 'flag', or 'fail'.")
       },
       async (args) => {
-        const taskId = args.taskId || process.env["VIAGEN_TASK_ID"];
-        if (!taskId) {
+        const id = args.taskId || taskId;
+        if (!id) {
           return {
             content: [{ type: "text", text: "Error: No taskId provided and VIAGEN_TASK_ID is not set." }]
           };
         }
-        const callbackUrl = process.env["VIAGEN_CALLBACK_URL"];
-        const authToken = process.env["VIAGEN_AUTH_TOKEN"];
         const internalStatus = args.status === "review" ? "validating" : args.status === "completed" ? "completed" : args.status;
-        const res = await fetch(callbackUrl, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${authToken}`
-          },
-          body: JSON.stringify({
-            taskId,
+        try {
+          await client.tasks.update(projectId, id, {
             ...internalStatus && { status: internalStatus },
             ...args.prUrl && { prUrl: args.prUrl },
             result: args.result,
             ...args.inputTokens != null && { inputTokens: args.inputTokens },
             ...args.outputTokens != null && { outputTokens: args.outputTokens },
-            ...args.costUsd != null && { costUsd: args.costUsd },
             ...args.prReviewStatus && { prReviewStatus: args.prReviewStatus }
-          })
-        });
-        if (!res.ok) {
-          const text = await res.text().catch(() => "");
+          });
           return {
-            content: [{ type: "text", text: `Error updating task (${res.status}): ${text}` }]
+            content: [{ type: "text", text: `Task ${id} updated.${args.status ? ` Status: '${args.status}'.` : ""}${args.prReviewStatus ? ` PR review: '${args.prReviewStatus}'.` : ""}` }]
+          };
+        } catch (err) {
+          const message = err instanceof Error ? err.message : "Unknown error";
+          return {
+            content: [{ type: "text", text: `Error updating task: ${message}` }]
           };
         }
+      }
+    ),
+    tool(
+      "viagen_list_tasks",
+      "List tasks in the current project. Optionally filter by status.",
+      {
+        status: external_exports.enum(["ready", "running", "validating", "completed", "timed_out"]).optional().describe("Filter tasks by status.")
+      },
+      async (args) => {
+        const tasks = await client.tasks.list(projectId, args.status);
         return {
-          content: [{ type: "text", text: `Task ${taskId} updated.${args.status ? ` Status: '${args.status}'.` : ""}${args.prReviewStatus ? ` PR review: '${args.prReviewStatus}'.` : ""}` }]
+          content: [
+            {
+              type: "text",
+              text: JSON.stringify(tasks, null, 2)
+            }
+          ]
+        };
+      }
+    ),
+    tool(
+      "viagen_get_task",
+      "Get full details of a specific task by ID.",
+      {
+        taskId: external_exports.string().describe("The task ID to retrieve.")
+      },
+      async (args) => {
+        const task = await client.tasks.get(projectId, args.taskId);
+        return {
+          content: [
+            {
+              type: "text",
+              text: JSON.stringify(task, null, 2)
+            }
+          ]
+        };
+      }
+    ),
+    tool(
+      "viagen_create_task",
+      "Create a new task in the current project. Use this to create follow-up work.",
+      {
+        prompt: external_exports.string().describe("The task prompt / instructions."),
+        branch: external_exports.string().optional().describe("Git branch name for the task."),
+        type: external_exports.enum(["task", "plan"]).optional().describe("Task type: 'task' for code changes, 'plan' for implementation plans.")
+      },
+      async (args) => {
+        const task = await client.tasks.create(projectId, {
+          prompt: args.prompt,
+          branch: args.branch,
+          type: args.type
+        });
+        return {
+          content: [
+            {
+              type: "text",
+              text: JSON.stringify(task, null, 2)
+            }
+          ]
         };
       }
     )
   ];
-  if (config2?.projectId) {
-    tools.push(
-      tool(
-        "viagen_list_tasks",
-        "List tasks in the current project. Optionally filter by status.",
-        {
-          status: external_exports.enum(["ready", "running", "validating", "completed", "timed_out"]).optional().describe("Filter tasks by status.")
-        },
-        async (args) => {
-          const tasks = await listTasks({ status: args.status });
-          return {
-            content: [
-              {
-                type: "text",
-                text: JSON.stringify(tasks, null, 2)
-              }
-            ]
-          };
-        }
-      )
-    );
-    tools.push(
-      tool(
-        "viagen_get_task",
-        "Get full details of a specific task by ID.",
-        {
-          taskId: external_exports.string().describe("The task ID to retrieve.")
-        },
-        async (args) => {
-          const task = await getTask(args.taskId);
-          return {
-            content: [
-              {
-                type: "text",
-                text: JSON.stringify(task, null, 2)
-              }
-            ]
-          };
-        }
-      )
-    );
-    tools.push(
-      tool(
-        "viagen_create_task",
-        "Create a new task in the current project. Use this to create follow-up work.",
-        {
-          prompt: external_exports.string().describe("The task prompt / instructions."),
-          branch: external_exports.string().optional().describe("Git branch name for the task."),
-          type: external_exports.enum(["task", "plan"]).optional().describe("Task type: 'task' for code changes, 'plan' for implementation plans.")
-        },
-        async (args) => {
-          const task = await createTask({
-            prompt: args.prompt,
-            branch: args.branch,
-            type: args.type
-          });
-          return {
-            content: [
-              {
-                type: "text",
-                text: JSON.stringify(task, null, 2)
-              }
-            ]
-          };
-        }
-      )
-    );
-  }
   return createSdkMcpServer({ name: "viagen", tools });
 }
 var PLAN_MODE_DISALLOWED_TOOLS = ["Edit", "NotebookEdit"];
@@ -18604,6 +18801,9 @@ You have access to viagen platform tools for task management:
 Use these to understand project context and create follow-up work when appropriate.
 `;
 
+// src/index.ts
+import { createViagen } from "viagen-sdk";
+
 // src/sandbox.ts
 import { randomUUID } from "crypto";
 import { readFileSync as readFileSync4, readdirSync as readdirSync2 } from "fs";
@@ -18868,6 +19068,7 @@ function viagen(options) {
     ui: options?.ui ?? true
   };
   let env;
+  let previewEnabled = false;
   let projectRoot;
   let lastError = null;
   let promptSent = false;
@@ -18877,12 +19078,13 @@ function viagen(options) {
     name: "viagen",
     config(_, { mode }) {
       const e = loadEnv(mode, process.cwd(), "");
-      if (e["VIAGEN_AUTH_TOKEN"]) {
+      if (e["VIAGEN_AUTH_TOKEN"] || e["VIAGEN_USER_TOKEN"]) {
         return { server: { host: true, allowedHosts: true } };
       }
     },
     configResolved(config2) {
       env = loadEnv(config2.mode, config2.envDir ?? config2.root, "");
+      previewEnabled = env["VIAGEN_PREVIEW"] === "true";
       projectRoot = config2.root;
       const debugEnabled = options?.debug ?? env["VIAGEN_DEBUG"] === "1";
       setDebug(debugEnabled);
@@ -18893,6 +19095,7 @@ function viagen(options) {
       debug("init", `CLAUDE_ACCESS_TOKEN: ${env["CLAUDE_ACCESS_TOKEN"] ? "set" : "NOT SET"}`);
       debug("init", `GITHUB_TOKEN: ${env["GITHUB_TOKEN"] ? "set" : "NOT SET"}`);
       debug("init", `VIAGEN_AUTH_TOKEN: ${env["VIAGEN_AUTH_TOKEN"] ? "set" : "NOT SET"}`);
+      debug("init", `VIAGEN_USER_TOKEN: ${env["VIAGEN_USER_TOKEN"] ? "set" : "NOT SET"}`);
       debug("init", `VIAGEN_MODEL: ${env["VIAGEN_MODEL"] || "(not set)"}`);
       debug("init", `VIAGEN_PROMPT: ${env["VIAGEN_PROMPT"] ? `"${env["VIAGEN_PROMPT"].slice(0, 80)}..."` : "(not set)"}`);
       debug("init", `VIAGEN_TASK_ID: ${env["VIAGEN_TASK_ID"] || "(not set)"}`);
@@ -18911,21 +19114,30 @@ function viagen(options) {
       );
     },
     transformIndexHtml(_html, ctx) {
-      if (!opts.ui) return [];
-      const url2 = new URL(ctx.originalUrl || ctx.path, "http://localhost");
-      const isEmbed = url2.searchParams.has("_viagen_embed");
-      if (isEmbed && !opts.overlay) return [];
-      return [
-        {
+      const tags = [];
+      if (opts.ui) {
+        const url2 = new URL(ctx.originalUrl || ctx.path, "http://localhost");
+        const isEmbed = url2.searchParams.has("_viagen_embed");
+        if (!isEmbed || opts.overlay) {
+          tags.push({
+            tag: "script",
+            children: buildClientScript({
+              position: opts.position,
+              panelWidth: opts.panelWidth,
+              overlay: opts.overlay
+            }),
+            injectTo: "body"
+          });
+        }
+      }
+      if (previewEnabled) {
+        tags.push({
           tag: "script",
-          children: buildClientScript({
-            position: opts.position,
-            panelWidth: opts.panelWidth,
-            overlay: opts.overlay
-          }),
+          children: buildPreviewScript(),
           injectTo: "body"
-        }
-      ];
+        });
+      }
+      return tags;
     },
     configureServer(server) {
       debug("server", "configureServer starting");
@@ -18968,6 +19180,14 @@ ${payload.err.frame || ""}`
       } else {
         debug("server", "auth middleware DISABLED (no VIAGEN_AUTH_TOKEN)");
       }
+      const platformToken = env["VIAGEN_USER_TOKEN"] || env["VIAGEN_AUTH_TOKEN"];
+      const platformUrl = env["VIAGEN_PLATFORM_URL"] || "https://app.viagen.dev";
+      const projectId = env["VIAGEN_PROJECT_ID"];
+      let viagenClient = null;
+      if (platformToken) {
+        viagenClient = createViagen({ token: platformToken, baseUrl: platformUrl });
+        debug("server", `platform client created (baseUrl: ${platformUrl})`);
+      }
       const hasEditor = !!(options?.editable && options.editable.length > 0);
       const clientJs = buildClientScript({
         position: opts.position,
@@ -18990,18 +19210,80 @@ ${payload.err.frame || ""}`
         res.setHeader("Content-Type", "text/html");
         res.end(buildIframeHtml({ panelWidth: opts.panelWidth }));
       });
+      if (previewEnabled) {
+        const previewJs = buildPreviewScript();
+        server.middlewares.use("/via/preview.js", (_req, res) => {
+          res.setHeader("Content-Type", "application/javascript");
+          res.end(previewJs);
+        });
+        server.middlewares.use("/via/preview/task", (req, res) => {
+          if (req.method !== "POST") {
+            res.writeHead(405, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ error: "Method not allowed" }));
+            return;
+          }
+          if (!viagenClient || !projectId) {
+            res.writeHead(503, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ error: "Task creation not configured: missing platform credentials or VIAGEN_PROJECT_ID" }));
+            return;
+          }
+          let body = "";
+          req.on("data", (chunk) => {
+            body += chunk.toString();
+          });
+          req.on("end", async () => {
+            try {
+              const data = JSON.parse(body);
+              const { prompt, pageUrl, screenshot } = data;
+              if (!prompt || typeof prompt !== "string") {
+                res.writeHead(400, { "Content-Type": "application/json" });
+                res.end(JSON.stringify({ error: "prompt is required" }));
+                return;
+              }
+              const parts = [prompt.trim()];
+              if (pageUrl) parts.push(`
+Page URL: ${pageUrl}`);
+              if (screenshot) parts.push("\n[Screenshot attached]");
+              parts.push("\n\n[Submitted via viagen preview feedback]");
+              const fullPrompt = parts.join("");
+              const task = await viagenClient.tasks.create(projectId, { prompt: fullPrompt, type: "task" });
+              if (screenshot && task.id) {
+                try {
+                  const [header, b64] = screenshot.split(",");
+                  const mime = header.match(/:(.*?);/)?.[1] || "image/jpeg";
+                  const binary = Buffer.from(b64, "base64");
+                  const blob = new Blob([binary], { type: mime });
+                  const ext = mime === "image/png" ? "png" : "jpeg";
+                  await viagenClient.tasks.addAttachment(projectId, task.id, blob, `screenshot.${ext}`);
+                  debug("preview", `screenshot attached to task ${task.id}`);
+                } catch (attachErr) {
+                  debug("preview", `screenshot attachment failed (non-fatal): ${attachErr}`);
+                }
+              }
+              res.writeHead(200, { "Content-Type": "application/json" });
+              res.end(JSON.stringify({ task }));
+            } catch (err) {
+              const message = err instanceof Error ? err.message : "Internal error";
+              debug("preview", `preview/task error: ${message}`);
+              res.writeHead(500, { "Content-Type": "application/json" });
+              res.end(JSON.stringify({ error: message }));
+            }
+          });
+        });
+      }
       registerHealthRoutes(server, env, {
         get: () => lastError
       });
       const resolvedModel = env["VIAGEN_MODEL"] || opts.model;
       debug("server", `creating ChatSession (model: ${resolvedModel})`);
       let mcpServers;
-      const hasSandboxContext = !!(env["VIAGEN_CALLBACK_URL"] && env["VIAGEN_AUTH_TOKEN"]);
-      if (hasSandboxContext) {
-        debug("server", "creating viagen MCP tools (sandbox mode)");
-        const viagenMcp = createViagenTools(
-          env["VIAGEN_PROJECT_ID"] ? { projectId: env["VIAGEN_PROJECT_ID"] } : void 0
-        );
+      const hasPlatformContext = !!(viagenClient && projectId);
+      if (hasPlatformContext) {
+        debug("server", "creating viagen MCP tools (platform connected)");
+        const viagenMcp = createViagenTools({
+          client: viagenClient,
+          projectId
+        });
         mcpServers = { [viagenMcp.name]: viagenMcp };
       }
       const isPlanMode = env["VIAGEN_TASK_TYPE"] === "plan";
@@ -19009,7 +19291,7 @@ ${payload.err.frame || ""}`
       if (isPlanMode) {
         debug("server", "plan mode active \u2014 restricting tools");
         systemPrompt = PLAN_SYSTEM_PROMPT;
-      } else if (hasSandboxContext && env["VIAGEN_PROJECT_ID"]) {
+      } else if (hasPlatformContext) {
         systemPrompt = (systemPrompt || "") + TASK_TOOLS_PROMPT;
       }
       const chatSession = new ChatSession({
@@ -19025,7 +19307,11 @@ ${payload.err.frame || ""}`
         } : {}
       });
       debug("server", "registering chat routes");
-      registerChatRoutes(server, chatSession, { env });
+      registerChatRoutes(server, chatSession, {
+        env,
+        viagenClient: viagenClient ?? void 0,
+        projectId
+      });
       if (hasEditor) {
         registerFileRoutes(server, {
           editable: options.editable,
@@ -19043,30 +19329,26 @@ ${payload.err.frame || ""}`
           if (event.type === "done") {
             debug("server", "auto-prompt completed");
             logBuffer.push("info", `[viagen] Prompt completed`);
-            const taskId = env["VIAGEN_TASK_ID"];
-            if (hasSandboxContext && taskId && (event.inputTokens || event.outputTokens || event.costUsd)) {
-              fetch(env["VIAGEN_CALLBACK_URL"], {
-                method: "POST",
-                headers: {
-                  "Content-Type": "application/json",
-                  Authorization: `Bearer ${env["VIAGEN_AUTH_TOKEN"]}`
-                },
-                body: JSON.stringify({
-                  taskId,
-                  ...event.inputTokens != null && { inputTokens: event.inputTokens },
-                  ...event.outputTokens != null && { outputTokens: event.outputTokens },
-                  ...event.costUsd != null && { costUsd: event.costUsd }
-                })
+            const currentTaskId = env["VIAGEN_TASK_ID"];
+            if (viagenClient && projectId && currentTaskId && (event.inputTokens || event.outputTokens)) {
+              viagenClient.tasks.update(projectId, currentTaskId, {
+                ...event.inputTokens != null && { inputTokens: event.inputTokens },
+                ...event.outputTokens != null && { outputTokens: event.outputTokens }
               }).catch((err) => {
-                debug("server", `usage callback failed: ${err}`);
+                debug("server", `usage report failed: ${err}`);
               });
             }
           }
         });
       }
-      if (opts.ui) {
+      if (opts.ui || previewEnabled) {
         return () => {
-          server.middlewares.use(createInjectionMiddleware());
+          if (opts.ui) {
+            server.middlewares.use(createInjectionMiddleware());
+          }
+          if (previewEnabled) {
+            server.middlewares.use(createPreviewInjectionMiddleware());
+          }
         };
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viagen",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "description": "Vite dev server plugin that exposes endpoints for chatting with Claude Code SDK",
   "type": "module",
   "main": "./dist/index.js",
@@ -42,9 +42,10 @@
     "@anthropic-ai/claude-agent-sdk": "^0.2.50",
     "@anthropic-ai/claude-code": "^2.1.42",
     "@vercel/sandbox": "^1",
+    "agent-browser": "^0.20.12",
     "lucide-react": "^0.564.0",
     "simple-git": "^3.31.1",
-    "viagen-sdk": "^0.0.11"
+    "viagen-sdk": "^0.0.12"
   },
   "license": "MIT",
   "repository": {