viagen 0.0.21 → 0.0.23

package/README.md

@@ -8,7 +8,24 @@ A Vite dev server plugin and CLI tool that enables you to use Claude Code in a s
 - [Vercel](https://vercel.com/signup) — Free plan works. Sandboxes last 45 min on Hobby, 5 hours on Pro.
 - [GitHub CLI](https://cli.github.com) — Enables git clone and push from sandboxes.
 
-## Step 1 — Add viagen to your app
+## Quick Setup (Claude Code Plugin)
+
+```
+/plugin marketplace add viagen-dev/viagen-claude-plugin
+/plugin install viagen@viagen-marketplace
+```
+
+**Restart Claude Code to load the plugin.**
+
+```
+/viagen-install
+```
+
+The plugin will handle npm installation, vite config updates, and run the setup wizard for you.
+
+## Manual Setup
+
+### Step 1 — Add viagen to your app
 
 ```bash
 npm install --save-dev viagen
@@ -24,7 +41,7 @@ export default defineConfig({
 })
 ```
 
-## Step 2 — Setup
+### Step 2 — Setup
 
 ```bash
 npx viagen setup
@@ -34,7 +51,7 @@ The setup wizard authenticates with Claude, detects your GitHub and Vercel crede
 
 You can now run `npm run dev` to start the local dev server. At this point you can launch viagen and chat with Claude to make changes to your app.
 
-## Step 3 — Sandbox
+### Step 3 — Sandbox
 
 ```bash
 npx viagen sandbox
@@ -56,18 +73,6 @@ npx viagen sandbox --prompt "build me a landing page"
 npx viagen sandbox stop <sandboxId>
 ```
 
-## Step 4 — Sync
-
-```bash
-npx viagen sync
-```
-
-Pushes your local `.env` credentials (Claude Max tokens, GitHub token, Vercel config) to a platform project. This lets you launch sandboxes from the web — use your Max subscription from any device without needing a browser redirect.
-
-The first run prompts you to pick or create a project. After that, subsequent syncs target the same project automatically (stored as `VIAGEN_PROJECT_ID` in `.env`).
-
-Claude tokens are refreshed automatically if expired before syncing. Requires `viagen login` first.
-
 ## Plugin Options
 
 ```ts

package/dist/cli.js

@@ -677,7 +677,7 @@ async function setup() {
     }
   }
   console.log("");
-  const hasVercel = existing["VERCEL_TOKEN"] && existing["VERCEL_TEAM_ID"] && existing["VERCEL_PROJECT_ID"];
+  const hasVercel = existing["VERCEL_TOKEN"] && existing["VERCEL_ORG_ID"] && existing["VERCEL_PROJECT_ID"];
   if (hasVercel) {
     console.log("Vercel       ... already configured");
   } else if (!shellOk("which vercel")) {
@@ -709,8 +709,8 @@ async function setup() {
     }
     if (existsSync(projectJsonPath)) {
       const project = JSON.parse(readFileSync2(projectJsonPath, "utf-8"));
-      if (!existing["VERCEL_TEAM_ID"]) {
-        newVars["VERCEL_TEAM_ID"] = project.orgId;
+      if (!existing["VERCEL_ORG_ID"]) {
+        newVars["VERCEL_ORG_ID"] = project.orgId;
       }
       if (!existing["VERCEL_PROJECT_ID"]) {
         newVars["VERCEL_PROJECT_ID"] = project.projectId;
@@ -744,7 +744,7 @@ async function setup() {
       }
       if (existsSync(projectJsonPath2)) {
         const project = JSON.parse(readFileSync2(projectJsonPath2, "utf-8"));
-        if (!existing["VERCEL_TEAM_ID"]) newVars["VERCEL_TEAM_ID"] = project.orgId;
+        if (!existing["VERCEL_ORG_ID"]) newVars["VERCEL_ORG_ID"] = project.orgId;
         if (!existing["VERCEL_PROJECT_ID"]) newVars["VERCEL_PROJECT_ID"] = project.projectId;
       }
       if (!existing["VERCEL_TOKEN"]) {
@@ -873,7 +873,7 @@ async function sandbox(args) {
     }
   }
   const hasOidc = !!env["VERCEL_OIDC_TOKEN"];
-  const hasToken = !!env["VERCEL_TOKEN"] && !!env["VERCEL_TEAM_ID"] && !!env["VERCEL_PROJECT_ID"];
+  const hasToken = !!env["VERCEL_TOKEN"] && !!env["VERCEL_ORG_ID"] && !!env["VERCEL_PROJECT_ID"];
   if (!hasOidc && !hasToken) {
     console.error(
       "Error: Vercel not configured. Run `npx viagen setup` first."
@@ -1002,9 +1002,9 @@ async function sandbox(args) {
     git: deployGit,
     overlayFiles,
     envVars: dotenv,
-    vercel: env["VERCEL_TOKEN"] && env["VERCEL_TEAM_ID"] && env["VERCEL_PROJECT_ID"] ? {
+    vercel: env["VERCEL_TOKEN"] && env["VERCEL_ORG_ID"] && env["VERCEL_PROJECT_ID"] ? {
       token: env["VERCEL_TOKEN"],
-      teamId: env["VERCEL_TEAM_ID"],
+      teamId: env["VERCEL_ORG_ID"],
       projectId: env["VERCEL_PROJECT_ID"]
     } : void 0,
     timeoutMinutes,
@@ -1035,7 +1035,7 @@ var SYNC_KEYS = [
   "ANTHROPIC_API_KEY",
   "GITHUB_TOKEN",
   "VERCEL_TOKEN",
-  "VERCEL_TEAM_ID",
+  "VERCEL_ORG_ID",
   "VERCEL_PROJECT_ID",
   "GIT_USER_NAME",
   "GIT_USER_EMAIL"
@@ -1421,7 +1421,7 @@ function help() {
     "  VERCEL_TOKEN           Vercel access token (for sandbox)."
   );
   console.log(
-    "  VERCEL_TEAM_ID         Vercel team ID (for sandbox)."
+    "  VERCEL_ORG_ID          Vercel org/team ID (for sandbox)."
   );
   console.log(
     "  VERCEL_PROJECT_ID      Vercel project ID (for sandbox)."

package/dist/index.js

@@ -416,7 +416,6 @@ function buildClientScript(opts) {
   const toggleSideKey = pos.includes("left") ? "left" : "right";
   const toggleVerticalKey = pos.includes("top") ? "top" : "bottom";
   const toggleClosedVal = "16px";
-  const toggleOpenVal = `${pw + 14}px`;
   return (
     /* js */
     `
@@ -519,10 +518,45 @@ function buildClientScript(opts) {
   var PANEL_KEY = 'viagen_panel_open';
   var panel = document.createElement('div');
   panel.id = 'viagen-panel';
-  panel.style.cssText = 'position:fixed;top:0;${panelSide}bottom:0;width:${pw}px;z-index:99997;display:none;border-left:1px solid #27272a;box-shadow:-4px 0 24px rgba(0,0,0,0.5);';
+  var PANEL_WIDTH_KEY = 'viagen_panel_width';
+  var panelWidth = ${pw};
+  try { var saved = parseInt(sessionStorage.getItem(PANEL_WIDTH_KEY)); if (saved >= 280) panelWidth = saved; } catch(e) {}
+  panel.style.cssText = 'position:fixed;top:0;${panelSide}bottom:0;width:' + panelWidth + 'px;z-index:99997;display:none;border-${pos.includes("left") ? "right" : "left"}:1px solid #27272a;box-shadow:${pos.includes("left") ? "4" : "-4"}px 0 24px rgba(0,0,0,0.5);';
   var iframe = document.createElement('iframe');
   iframe.src = '/via/ui';
   iframe.style.cssText = 'width:100%;height:100%;border:none;background:#09090b;';
+
+  /* ---- Drag-resize handle ---- */
+  var handle = document.createElement('div');
+  handle.style.cssText = 'position:absolute;top:0;${pos.includes("left") ? "right" : "left"}:-3px;width:6px;height:100%;cursor:col-resize;z-index:1;background:transparent;transition:background 0.15s;';
+  handle.onmouseenter = function() { handle.style.background = '#3f3f46'; };
+  handle.onmouseleave = function() { if (!resizing) handle.style.background = 'transparent'; };
+  var resizing = false;
+
+  handle.addEventListener('mousedown', function(e) {
+    e.preventDefault();
+    resizing = true;
+    handle.style.background = '#3f3f46';
+    iframe.style.pointerEvents = 'none';
+  });
+  document.addEventListener('mousemove', function(e) {
+    if (!resizing) return;
+    var w = ${pos.includes("left") ? "e.clientX" : "window.innerWidth - e.clientX"};
+    if (w < 280) w = 280;
+    if (w > window.innerWidth - 100) w = window.innerWidth - 100;
+    panelWidth = w;
+    panel.style.width = w + 'px';
+    toggle.style.${toggleSideKey} = (w + 14) + 'px';
+  });
+  document.addEventListener('mouseup', function() {
+    if (!resizing) return;
+    resizing = false;
+    handle.style.background = 'transparent';
+    iframe.style.pointerEvents = '';
+    try { sessionStorage.setItem(PANEL_WIDTH_KEY, String(panelWidth)); } catch(e) {}
+  });
+
+  panel.appendChild(handle);
   panel.appendChild(iframe);
   document.body.appendChild(panel);
 
@@ -547,7 +581,7 @@ function buildClientScript(opts) {
   function setPanelOpen(open) {
     panel.style.display = open ? 'block' : 'none';
     toggle.innerHTML = open ? 'close' : dotHtml() + 'via';
-    toggle.style.${toggleSideKey} = open ? '${toggleOpenVal}' : '${toggleClosedVal}';
+    toggle.style.${toggleSideKey} = open ? (panelWidth + 14) + 'px' : '${toggleClosedVal}';
     toggle.style.${toggleVerticalKey} = open ? '${pos.includes("top") ? "16" : "11"}px' : '12px';
     toggle.style.borderColor = open ? '#71717a' : '#3f3f46';
     toggle.style.color = open ? '#a1a1aa' : '#a1a1aa';

package/package.json

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