npm - viagen - Versions diffs - 0.0.16 → 0.0.18 - Mend

viagen 0.0.16 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/README.md CHANGED Viewed

@@ -30,7 +30,7 @@ export default defineConfig({
 npx viagen setup
 ```
-The setup wizard authenticates with Claude then uses GitHub and Vercel to write your local `.env`.
+The setup wizard authenticates with Claude, detects your GitHub and Vercel credentials, and captures your git remote info — all written to your local `.env`. This ensures sandboxes clone the correct repo instead of inferring it at runtime.
 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.
@@ -68,17 +68,41 @@ viagen({
 })
 ```
+### SSR Frameworks (React Router, Remix, SvelteKit, etc.)
+For plain Vite apps, the chat panel is injected automatically. SSR frameworks render their own HTML, so you need to add one script tag to your root layout:
+```html
+<script src="/via/client.js" defer></script>
+```
+For React Router, add it to `app/root.tsx`:
+```tsx
+export default function Root() {
+  return (
+    <html>
+      <head>
+        <script src="/via/client.js" defer />
+        {/* ... */}
+      </head>
+      {/* ... */}
+    </html>
+  )
+}
+```
 ### Editable Files
 Add a file editor panel to the chat UI:
 ```ts
 viagen({
-  editable: ['src/components', '.env', 'vite.config.ts']
+  editable: ['src/components', 'vite.config.ts']
 })
 ```
-Paths can be files or directories (directories include all files within). The editor appears as a "Files" tab in the chat panel. `.env` files get a key-value form with masked values.
+Paths can be files or directories (directories include all files within). The editor appears as a "Files" tab in the chat panel.
 The default system prompt:
@@ -129,6 +153,8 @@ GET  /via/iframe      — split view (app + chat side by side)
 GET  /via/files       — list editable files (when configured)
 GET  /via/file?path=  — read file content
 POST /via/file        — write file content { path, content }
+GET  /via/git/status  — list changed files (git status)
+GET  /via/git/diff    — full diff, or single file with ?path=
 ```
 When `VIAGEN_AUTH_TOKEN` is set (always on in sandboxes), pass the token as a `Bearer` header or `?token=` query param.

package/dist/cli.js CHANGED Viewed

@@ -335,6 +335,13 @@ async function refreshAccessToken(refresh) {
 }
 // src/cli.ts
+import {
+  createViagen,
+  saveCredentials,
+  loadCredentials,
+  clearCredentials
+} from "viagen-sdk";
+import { spawn as spawnChild } from "child_process";
 function loadDotenv(dir) {
   const envPath = join2(dir, ".env");
   if (!existsSync(envPath)) return {};
@@ -515,9 +522,34 @@ async function setup() {
   const newVars = {};
   console.log("viagen setup");
   console.log("");
-  if (existing["ANTHROPIC_API_KEY"] || existing["CLAUDE_ACCESS_TOKEN"]) {
+  let claudeExpired = false;
+  if (existing["CLAUDE_ACCESS_TOKEN"] && existing["CLAUDE_TOKEN_EXPIRES"]) {
+    const expires = parseInt(existing["CLAUDE_TOKEN_EXPIRES"], 10);
+    const nowSec = Math.floor(Date.now() / 1e3);
+    if (nowSec > expires) {
+      if (existing["CLAUDE_REFRESH_TOKEN"]) {
+        console.log("Claude auth ... token expired, attempting refresh...");
+        try {
+          const tokens = await refreshAccessToken(existing["CLAUDE_REFRESH_TOKEN"]);
+          newVars["CLAUDE_ACCESS_TOKEN"] = tokens.access_token;
+          newVars["CLAUDE_REFRESH_TOKEN"] = tokens.refresh_token;
+          newVars["CLAUDE_TOKEN_EXPIRES"] = String(nowSec + tokens.expires_in);
+          console.log("Claude auth ... refreshed");
+        } catch {
+          console.log("Claude auth ... refresh failed, need to re-authenticate");
+          claudeExpired = true;
+        }
+      } else {
+        console.log("Claude auth ... token expired, need to re-authenticate");
+        claudeExpired = true;
+      }
+    } else {
+      console.log("Claude auth ... already configured");
+    }
+  } else if (existing["ANTHROPIC_API_KEY"]) {
     console.log("Claude auth ... already configured");
-  } else {
+  }
+  if (claudeExpired || !existing["ANTHROPIC_API_KEY"] && !existing["CLAUDE_ACCESS_TOKEN"]) {
     console.log("How do you want to authenticate with Claude?");
     console.log("");
     console.log("  1) Log in with Claude Max/Pro (recommended)");
@@ -584,8 +616,8 @@ async function setup() {
     console.log("gh CLI is installed but not logged in.");
     console.log("Without it, sandboxes can't commit or push changes.");
     console.log("");
-    const login = await promptUser("Run gh auth login now? [y/n]: ");
-    if (login === "y" || login === "yes") {
+    const login2 = await promptUser("Run gh auth login now? [y/n]: ");
+    if (login2 === "y" || login2 === "yes") {
       try {
         execSync2("gh auth login", { stdio: "inherit" });
         const token = shellOutput("gh auth token");
@@ -601,6 +633,46 @@ async function setup() {
     }
   }
   console.log("");
+  {
+    const detectedGit = getGitInfo(cwd);
+    const savedUrl = existing["GIT_REMOTE_URL"];
+    if (savedUrl && detectedGit && savedUrl !== detectedGit.remoteUrl) {
+      console.log(`Git repo     ... mismatch!`);
+      console.log(`  .env:   ${savedUrl}`);
+      console.log(`  local:  ${detectedGit.remoteUrl}`);
+      console.log("");
+      const fix = await promptUser("Update .env to match local remote? [y/n]: ");
+      if (fix === "y" || fix === "yes" || !fix) {
+        newVars["GIT_REMOTE_URL"] = detectedGit.remoteUrl;
+        newVars["GIT_BRANCH"] = detectedGit.branch;
+        newVars["GIT_USER_NAME"] = detectedGit.userName;
+        newVars["GIT_USER_EMAIL"] = detectedGit.userEmail;
+        console.log("Git repo     ... updated");
+      } else {
+        console.log("Git repo     ... keeping .env value");
+      }
+    } else if (savedUrl) {
+      console.log(`Git repo     ... ${savedUrl}`);
+    } else if (detectedGit) {
+      console.log(`Detected git remote: ${detectedGit.remoteUrl}`);
+      console.log(`  Branch: ${detectedGit.branch}`);
+      console.log(`  User:   ${detectedGit.userName} <${detectedGit.userEmail}>`);
+      console.log("");
+      const useIt = await promptUser("Save this to .env? [y/n]: ");
+      if (useIt === "y" || useIt === "yes" || !useIt) {
+        newVars["GIT_REMOTE_URL"] = detectedGit.remoteUrl;
+        newVars["GIT_BRANCH"] = detectedGit.branch;
+        newVars["GIT_USER_NAME"] = detectedGit.userName;
+        newVars["GIT_USER_EMAIL"] = detectedGit.userEmail;
+        console.log("Git repo     ... saved");
+      } else {
+        console.log("Git repo     ... skipped");
+      }
+    } else {
+      console.log("Git repo     ... not detected (not a git repo or no remote)");
+    }
+  }
+  console.log("");
   const hasVercel = existing["VERCEL_TOKEN"] && existing["VERCEL_TEAM_ID"] && existing["VERCEL_PROJECT_ID"];
   if (hasVercel) {
     console.log("Vercel       ... already configured");
@@ -652,8 +724,8 @@ async function setup() {
     console.log("Vercel CLI is installed but not logged in.");
     console.log("Sandbox deployment requires Vercel auth.");
     console.log("");
-    const login = await promptUser("Run vercel login now? [y/n]: ");
-    if (login === "y" || login === "yes") {
+    const login2 = await promptUser("Run vercel login now? [y/n]: ");
+    if (login2 === "y" || login2 === "yes") {
       try {
         execSync2("vercel login", { stdio: "inherit" });
       } catch {
@@ -685,7 +757,17 @@ async function setup() {
   }
   console.log("");
   if (Object.keys(newVars).length > 0) {
-    writeEnvVars(cwd, newVars);
+    const toUpdate = {};
+    const toAdd = {};
+    for (const [key, val] of Object.entries(newVars)) {
+      if (existing[key]) {
+        toUpdate[key] = val;
+      } else {
+        toAdd[key] = val;
+      }
+    }
+    if (Object.keys(toAdd).length > 0) writeEnvVars(cwd, toAdd);
+    if (Object.keys(toUpdate).length > 0) updateEnvVars(cwd, toUpdate);
     console.log("Wrote to .env:");
     for (const key of Object.keys(newVars)) {
       const display = key.includes("TOKEN") || key.includes("KEY") || key.includes("SECRET") ? newVars[key].slice(0, 8) + "..." : newVars[key];
@@ -699,6 +781,32 @@ async function setup() {
   console.log("  npm run dev          Start the dev server");
   console.log("  npx viagen sandbox   Deploy to a sandbox");
 }
+function dev() {
+  const child = spawnChild("npx", ["vite"], {
+    cwd: process.cwd(),
+    stdio: ["inherit", "pipe", "inherit"],
+    shell: true
+  });
+  let opened = false;
+  child.stdout?.on("data", (chunk) => {
+    const text = chunk.toString();
+    process.stdout.write(text);
+    if (!opened) {
+      const match = text.match(/Local:\s+(https?:\/\/[^\s]+)/);
+      if (match) {
+        opened = true;
+        const baseUrl = match[1].replace(/\/$/, "");
+        const iframeUrl = `${baseUrl}/via/iframe`;
+        setTimeout(() => openBrowser2(iframeUrl), 500);
+      }
+    }
+  });
+  child.on("close", (code) => {
+    process.exit(code ?? 0);
+  });
+  process.on("SIGINT", () => child.kill("SIGINT"));
+  process.on("SIGTERM", () => child.kill("SIGTERM"));
+}
 function parseFlag(args, flag) {
   const idx = args.indexOf(flag);
   if (idx !== -1 && idx + 1 < args.length) return args[idx + 1];
@@ -768,7 +876,21 @@ async function sandbox(args) {
     process.exit(1);
   }
   const githubToken = env["GITHUB_TOKEN"];
-  const gitInfo = getGitInfo(cwd);
+  const envRemoteUrl = env["GIT_REMOTE_URL"];
+  const envBranch = env["GIT_BRANCH"];
+  const envUserName = env["GIT_USER_NAME"];
+  const envUserEmail = env["GIT_USER_EMAIL"];
+  const gitInfo = envRemoteUrl ? {
+    remoteUrl: envRemoteUrl,
+    branch: envBranch || "main",
+    userName: envUserName || "viagen",
+    userEmail: envUserEmail || "noreply@viagen.dev",
+    isDirty: false
+    // can't know from env, assume clean
+  } : getGitInfo(cwd);
+  if (envRemoteUrl) {
+    console.log("Using git info from .env");
+  }
   let deployGit;
   let overlayFiles;
   const branch = branchOverride || (gitInfo ? gitInfo.branch : "main");
@@ -804,7 +926,7 @@ async function sandbox(args) {
       userEmail: gitInfo.userEmail,
       token: githubToken
     });
-    if (gitInfo.isDirty && !branchOverride) {
+    if (!envRemoteUrl && gitInfo.isDirty && !branchOverride) {
       console.log("");
       console.log("Your working tree has uncommitted changes.");
       console.log("");
@@ -882,8 +1004,8 @@ async function sandbox(args) {
     } : void 0,
     timeoutMinutes
   });
-  const iframeUrl = result.url.replace("?token=", "via/iframe?token=");
-  const chatUrl = result.url.replace("?token=", "via/ui?token=");
+  const iframeUrl = result.url.replace("?token=", "/via/iframe?token=");
+  const chatUrl = result.url.replace("?token=", "/via/ui?token=");
   console.log("");
   console.log("Sandbox deployed!");
   console.log("");
@@ -900,6 +1022,179 @@ async function sandbox(args) {
   console.log(`Stop with: npx viagen sandbox stop ${result.sandboxId}`);
   openBrowser2(iframeUrl);
 }
+var PLATFORM_URL = "http://localhost:5175";
+async function login() {
+  const existing = await loadCredentials();
+  if (existing) {
+    const client2 = createViagen({
+      baseUrl: existing.baseUrl,
+      token: existing.token
+    });
+    try {
+      const user2 = await client2.auth.me();
+      if (user2) {
+        console.log(`Already logged in as ${user2.email}`);
+        const answer = await promptUser("Log in again? [y/n]: ");
+        if (answer !== "y" && answer !== "yes") return;
+      }
+    } catch {
+    }
+  }
+  console.log("viagen login");
+  console.log("");
+  const client = createViagen({ baseUrl: PLATFORM_URL });
+  console.log("Opening browser to authorize...");
+  const { token, expiresAt } = await client.auth.loginCli({
+    onOpenUrl: (url) => {
+      openBrowser2(url);
+      console.log("");
+      console.log("If the browser didn't open, visit:");
+      console.log(`  ${url}`);
+      console.log("");
+      console.log("Waiting for authorization...");
+    }
+  });
+  await saveCredentials({ token, baseUrl: PLATFORM_URL, expiresAt });
+  const authed = createViagen({ baseUrl: PLATFORM_URL, token });
+  const user = await authed.auth.me();
+  console.log("");
+  if (user) {
+    console.log(`Logged in as ${user.email}`);
+  } else {
+    console.log("Logged in.");
+  }
+  console.log("Credentials saved to ~/.config/viagen/credentials.json");
+}
+async function logout() {
+  const existing = await loadCredentials();
+  if (!existing) {
+    console.log("Not logged in.");
+    return;
+  }
+  await clearCredentials();
+  console.log("Logged out. Credentials removed.");
+}
+async function whoami() {
+  const existing = await loadCredentials();
+  if (!existing) {
+    console.log("Not logged in. Run `viagen login` to authenticate.");
+    return;
+  }
+  const client = createViagen({
+    baseUrl: existing.baseUrl,
+    token: existing.token
+  });
+  try {
+    const user = await client.auth.me();
+    if (user) {
+      console.log(`${user.email}${user.name ? ` (${user.name})` : ""}`);
+      if (user.organizations.length > 0) {
+        console.log(
+          `Orgs: ${user.organizations.map((o) => o.name).join(", ")}`
+        );
+      }
+    } else {
+      console.log("Session expired. Run `viagen login` to re-authenticate.");
+    }
+  } catch {
+    console.log("Session expired. Run `viagen login` to re-authenticate.");
+  }
+}
+async function requireClient() {
+  const creds = await loadCredentials();
+  if (!creds) {
+    console.error("Not logged in. Run `viagen login` first.");
+    process.exit(1);
+  }
+  return createViagen({ baseUrl: creds.baseUrl, token: creds.token });
+}
+async function orgs(args) {
+  const sub = args[0];
+  if (sub === "create") {
+    const name = args.slice(1).join(" ");
+    if (!name) {
+      console.error("Usage: viagen orgs create <name>");
+      process.exit(1);
+    }
+    const client2 = await requireClient();
+    const org = await client2.orgs.create({ name });
+    console.log(`Created org "${org.name}" (${org.id})`);
+    return;
+  }
+  if (sub === "invite") {
+    const email = args[1];
+    if (!email) {
+      console.error("Usage: viagen orgs invite <email>");
+      process.exit(1);
+    }
+    const client2 = await requireClient();
+    await client2.orgs.addMember({ email });
+    console.log(`Invited ${email}`);
+    return;
+  }
+  const client = await requireClient();
+  const memberships = await client.orgs.list() ?? [];
+  if (memberships.length === 0) {
+    console.log("No organizations. Create one with `viagen orgs create <name>`.");
+    return;
+  }
+  for (const m of memberships) {
+    const role = m.role ? ` (${m.role})` : "";
+    console.log(`  ${m.organizationName}${role}`);
+  }
+}
+async function projects(args) {
+  const sub = args[0];
+  if (sub === "create") {
+    const name = args.slice(1).join(" ");
+    if (!name) {
+      console.error("Usage: viagen projects create <name>");
+      process.exit(1);
+    }
+    const client2 = await requireClient();
+    const project = await client2.projects.create({ name });
+    console.log(`Created project "${project.name}" (${project.id})`);
+    return;
+  }
+  if (sub === "get") {
+    const id = args[1];
+    if (!id) {
+      console.error("Usage: viagen projects get <id>");
+      process.exit(1);
+    }
+    const client2 = await requireClient();
+    const project = await client2.projects.get(id);
+    console.log(`  Name:     ${project.name}`);
+    console.log(`  ID:       ${project.id}`);
+    if (project.githubRepo) console.log(`  GitHub:   ${project.githubRepo}`);
+    if (project.templateId) console.log(`  Template: ${project.templateId}`);
+    console.log(`  Created:  ${project.createdAt}`);
+    return;
+  }
+  if (sub === "delete") {
+    const id = args[1];
+    if (!id) {
+      console.error("Usage: viagen projects delete <id>");
+      process.exit(1);
+    }
+    const answer = await promptUser(`Delete project ${id}? [y/n]: `);
+    if (answer !== "y" && answer !== "yes") return;
+    const client2 = await requireClient();
+    await client2.projects.delete(id);
+    console.log("Project deleted.");
+    return;
+  }
+  const client = await requireClient();
+  const list = await client.projects.list() ?? [];
+  if (list.length === 0) {
+    console.log("No projects. Create one with `viagen projects create <name>`.");
+    return;
+  }
+  for (const p of list) {
+    const repo = p.githubRepo ? ` (${p.githubRepo})` : "";
+    console.log(`  ${p.name}${repo}  ${p.id}`);
+  }
+}
 function help() {
   console.log("viagen \u2014 Claude Code in your Vite dev server");
   console.log("");
@@ -907,6 +1202,17 @@ function help() {
   console.log("  viagen <command>");
   console.log("");
   console.log("Commands:");
+  console.log("  login                          Log in to the viagen platform");
+  console.log("  logout                         Log out and remove credentials");
+  console.log("  whoami                         Show current user");
+  console.log("  orgs                           List your organizations");
+  console.log("  orgs create <name>             Create a new organization");
+  console.log("  orgs invite <email>            Invite a member to the org");
+  console.log("  projects                       List projects in current org");
+  console.log("  projects create <name>         Create a new project");
+  console.log("  projects get <id>              Show project details");
+  console.log("  projects delete <id>           Delete a project");
+  console.log("  dev                            Start Vite and open the split view");
   console.log("  setup                          Set up .env with API keys and tokens");
   console.log("  sandbox [-b branch] [-t min]   Deploy your project to a Vercel Sandbox");
   console.log("  sandbox stop <id>              Stop a running sandbox");
@@ -932,6 +1238,18 @@ function help() {
   console.log(
     "  GITHUB_TOKEN           Enables git commit+push from sandbox."
   );
+  console.log(
+    "  GIT_REMOTE_URL         Git remote (from setup, overrides runtime detection)."
+  );
+  console.log(
+    "  GIT_BRANCH             Git branch for sandbox."
+  );
+  console.log(
+    "  GIT_USER_NAME          Git user name for sandbox commits."
+  );
+  console.log(
+    "  GIT_USER_EMAIL         Git user email for sandbox commits."
+  );
   console.log(
     "  VIAGEN_AUTH_TOKEN      Protects all endpoints with token auth."
   );
@@ -950,7 +1268,20 @@ function help() {
 async function main() {
   const args = process.argv.slice(2);
   const command = args[0];
-  if (command === "setup") {
+  if (command === "login") {
+    await login();
+  } else if (command === "logout") {
+    await logout();
+  } else if (command === "whoami") {
+    await whoami();
+  } else if (command === "orgs") {
+    await orgs(args.slice(1));
+  } else if (command === "projects") {
+    await projects(args.slice(1));
+  } else if (command === "dev") {
+    dev();
+    return;
+  } else if (command === "setup") {
     await setup();
   } else if (command === "sandbox") {
     await sandbox(args.slice(1));

package/dist/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 // src/index.ts
 import { mkdirSync as mkdirSync2, writeFileSync as writeFileSync4 } from "fs";
-import { join as join5 } from "path";
+import { join as join6 } from "path";
 import { loadEnv } from "vite";
 // src/logger.ts
@@ -112,12 +112,12 @@ async function refreshAccessToken(refresh) {
 // src/chat.ts
 function readBody(req) {
-  return new Promise((resolve2, reject) => {
+  return new Promise((resolve3, reject) => {
     let body = "";
     req.on("data", (chunk) => {
       body += chunk.toString();
     });
-    req.on("end", () => resolve2(body));
+    req.on("end", () => resolve3(body));
     req.on("error", reject);
   });
 }
@@ -343,8 +343,10 @@ function buildClientScript(opts) {
     /* js */
     `
 (function() {
+  if (document.getElementById('viagen-toggle')) return;
   var OVERLAY_ENABLED = ${opts.overlay};
-  var EMBED_MODE = ${opts.embedMode ? "true" : "false"};
+  var EMBED_MODE = new URLSearchParams(window.location.search).has('_viagen_embed');
   /* ---- Error overlay: inject Fix button into shadow DOM ---- */
   if (OVERLAY_ENABLED) {
@@ -492,6 +494,8 @@ function buildClientScript(opts) {
 // src/ui.ts
 function buildUiHtml(opts) {
   const hasEditor = opts?.editable ?? false;
+  const hasGit = opts?.git ?? false;
+  const hasTabs = hasEditor || hasGit;
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -605,7 +609,7 @@ function buildUiHtml(opts) {
       gap: 8px;
     }
     .messages:empty::after {
-      content: 'Ask Claude to build something...';
+      content: 'Ask Claude to build features or change something...';
       color: #3f3f46;
       font-size: 13px;
       text-align: center;
@@ -877,6 +881,86 @@ function buildUiHtml(opts) {
       background: #0a0a0c;
       border-right: 1px solid #1e1e22;
     }
+    .changes-file {
+      padding: 8px 16px;
+      font-family: ui-monospace, monospace;
+      font-size: 12px;
+      color: #a1a1aa;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      transition: background 0.1s;
+      border-bottom: 1px solid #1e1e22;
+    }
+    .changes-file:hover { background: #18181b; color: #e4e4e7; }
+    .changes-file .file-path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .changes-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+    .changes-dot.M { background: #facc15; }
+    .changes-dot.A { background: #4ade80; }
+    .changes-dot.q { background: #4ade80; }
+    .changes-dot.D { background: #f87171; }
+    .changes-dot.R { background: #60a5fa; }
+    .changes-badge {
+      font-size: 10px;
+      color: #52525b;
+      font-family: ui-monospace, monospace;
+    }
+    .changes-summary {
+      padding: 8px 16px;
+      border-bottom: 1px solid #27272a;
+      background: #18181b;
+      font-family: ui-monospace, monospace;
+      font-size: 11px;
+      color: #71717a;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-shrink: 0;
+    }
+    .changes-summary .stat-add { color: #4ade80; }
+    .changes-summary .stat-del { color: #f87171; }
+    .changes-summary .stat-files { color: #a1a1aa; }
+    .file-delta {
+      font-family: ui-monospace, monospace;
+      font-size: 10px;
+      display: flex;
+      gap: 4px;
+      flex-shrink: 0;
+    }
+    .file-delta .d-add { color: #4ade80; }
+    .file-delta .d-del { color: #f87171; }
+    .diff-view {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0;
+      font-family: ui-monospace, monospace;
+      font-size: 11px;
+      line-height: 1.6;
+    }
+    .diff-line {
+      padding: 0 12px;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+    .diff-add { color: #4ade80; background: rgba(74,222,128,0.08); }
+    .diff-del { color: #f87171; background: rgba(248,113,113,0.08); }
+    .diff-hunk { color: #a78bfa; background: rgba(167,139,250,0.06); padding-top: 6px; margin-top: 4px; }
+    .diff-meta { color: #52525b; }
+    .diff-ctx { color: #71717a; }
+    .changes-empty {
+      padding: 16px;
+      color: #52525b;
+      font-size: 12px;
+      font-family: ui-monospace, monospace;
+      text-align: center;
+      margin-top: 40%;
+    }
   </style>
 </head>
 <body>
@@ -893,9 +977,10 @@ function buildUiHtml(opts) {
       <button class="btn" id="reset-btn">Reset</button>
     </div>
   </div>
-  ${hasEditor ? `<div class="tab-bar" id="tab-bar">
+  ${hasTabs ? `<div class="tab-bar" id="tab-bar">
     <button class="tab active" data-tab="chat">Chat</button>
-    <button class="tab" data-tab="files">Files</button>
+    ${hasEditor ? '<button class="tab" data-tab="files">Files</button>' : ""}
+    ${hasGit ? '<button class="tab" data-tab="changes" id="changes-tab">Changes</button>' : ""}
   </div>` : ""}
   <div id="chat-view" style="display:flex;flex-direction:column;flex:1;overflow:hidden;">
     <div class="setup-banner" id="setup-banner"></div>
@@ -922,6 +1007,19 @@ function buildUiHtml(opts) {
       </div>
     </div>
   </div>` : ""}
+  ${hasGit ? `<div id="changes-view" style="display:none;flex-direction:column;flex:1;overflow:hidden;">
+    <div class="changes-summary" id="changes-summary" style="display:none;"></div>
+    <div id="changes-list-view" style="flex:1;overflow-y:auto;">
+      <div id="changes-list" style="padding:0;"></div>
+    </div>
+    <div id="changes-diff-view" style="display:none;flex-direction:column;flex:1;overflow:hidden;">
+      <div class="editor-header">
+        <button class="editor-back" id="diff-back" title="Back to changes">&#x2190;</button>
+        <span class="editor-filename" id="diff-filename"></span>
+      </div>
+      <div class="diff-view" id="diff-content"></div>
+    </div>
+  </div>` : ""}
   <script>
     var STORAGE_KEY = 'viagen_chatLog';
     var SOUND_KEY = 'viagen_sound';
@@ -1369,36 +1467,45 @@ function buildUiHtml(opts) {
     loadHistory();
-    // \u2500\u2500 File editor panel \u2500\u2500
-    ${hasEditor ? `
+    // \u2500\u2500 Tab switching \u2500\u2500
+    ${hasTabs ? `
     (function() {
       var chatView = document.getElementById('chat-view');
       var filesView = document.getElementById('files-view');
+      var changesView = document.getElementById('changes-view');
       var tabs = document.querySelectorAll('.tab');
-      var fileListView = document.getElementById('file-list-view');
-      var fileEditorView = document.getElementById('file-editor-view');
-      var editorTextarea = document.getElementById('editor-textarea');
-      var lineNumbersEl = document.getElementById('line-numbers');
-      var editorWrap = document.getElementById('editor-wrap');
-      var editorSave = document.getElementById('editor-save');
-      var editorFilename = document.getElementById('editor-filename');
-      var editorState = { path: '', original: '', modified: false };
-      // Tab switching
       tabs.forEach(function(tab) {
         tab.addEventListener('click', function() {
           tabs.forEach(function(t) { t.classList.remove('active'); });
           tab.classList.add('active');
           var target = tab.dataset.tab;
           chatView.style.display = target === 'chat' ? 'flex' : 'none';
-          filesView.style.display = target === 'files' ? 'flex' : 'none';
-          if (target === 'files') loadFileList();
+          if (filesView) filesView.style.display = target === 'files' ? 'flex' : 'none';
+          if (changesView) changesView.style.display = target === 'changes' ? 'flex' : 'none';
+          if (target === 'files' && window._viagenLoadFiles) window._viagenLoadFiles();
+          if (target === 'changes' && window._viagenLoadChanges) window._viagenLoadChanges();
           if (target === 'chat') inputEl.focus();
         });
       });
+    })();
+    ` : ""}
+    // \u2500\u2500 File editor panel \u2500\u2500
+    ${hasEditor ? `
+    (function() {
+      var fileListView = document.getElementById('file-list-view');
+      var fileEditorView = document.getElementById('file-editor-view');
+      var editorTextarea = document.getElementById('editor-textarea');
+      var lineNumbersEl = document.getElementById('line-numbers');
+      var editorWrap = document.getElementById('editor-wrap');
+      var editorSave = document.getElementById('editor-save');
+      var editorFilename = document.getElementById('editor-filename');
+      var editorState = { path: '', original: '', modified: false };
       // File list
+      window._viagenLoadFiles = loadFileList;
       async function loadFileList() {
         var listEl = document.getElementById('file-list');
         listEl.innerHTML = '<div style="padding:16px;color:#52525b;font-size:12px;font-family:ui-monospace,monospace;">Loading...</div>';
@@ -1533,6 +1640,129 @@ function buildUiHtml(opts) {
     })();
     ` : ""}
+    // \u2500\u2500 Changes panel (git diff) \u2500\u2500
+    ${hasGit ? `
+    (function() {
+      var changesListView = document.getElementById('changes-list-view');
+      var changesDiffView = document.getElementById('changes-diff-view');
+      var changesListEl = document.getElementById('changes-list');
+      var diffContent = document.getElementById('diff-content');
+      var diffFilename = document.getElementById('diff-filename');
+      var changesTab = document.getElementById('changes-tab');
+      var changesSummary = document.getElementById('changes-summary');
+      window._viagenLoadChanges = loadChanges;
+      async function loadChanges() {
+        changesListView.style.display = 'block';
+        changesDiffView.style.display = 'none';
+        changesSummary.style.display = 'none';
+        changesListEl.innerHTML = '<div style="padding:16px;color:#52525b;font-size:12px;font-family:ui-monospace,monospace;">Loading...</div>';
+        try {
+          var res = await fetch('/via/git/status');
+          var data = await res.json();
+          if (!data.git) {
+            changesListEl.innerHTML = '<div class="changes-empty">Not a git repository</div>';
+            if (changesTab) changesTab.textContent = 'Changes';
+            return;
+          }
+          renderSummary(data);
+          renderChanges(data.files);
+        } catch(e) {
+          changesListEl.innerHTML = '<div style="padding:16px;color:#f87171;font-size:12px;">Failed to load changes</div>';
+        }
+      }
+      function renderSummary(data) {
+        var ins = data.insertions || 0;
+        var del = data.deletions || 0;
+        var count = data.files ? data.files.length : 0;
+        if (count === 0) { changesSummary.style.display = 'none'; return; }
+        changesSummary.style.display = 'flex';
+        changesSummary.innerHTML =
+          '<span class="stat-files">' + count + (count === 1 ? ' file' : ' files') + '</span>' +
+          (ins > 0 ? '<span class="stat-add">+' + ins + '</span>' : '') +
+          (del > 0 ? '<span class="stat-del">-' + del + '</span>' : '');
+      }
+      function renderChanges(files) {
+        changesListEl.innerHTML = '';
+        if (changesTab) changesTab.textContent = files.length > 0 ? 'Changes (' + files.length + ')' : 'Changes';
+        if (files.length === 0) {
+          changesListEl.innerHTML = '<div class="changes-empty">No changes</div>';
+          return;
+        }
+        files.forEach(function(f) {
+          var item = document.createElement('div');
+          item.className = 'changes-file';
+          var dotClass = f.status === '?' ? 'q' : f.status;
+          var statusLabel = f.status === '?' ? 'Untracked' : f.status === 'M' ? 'Modified' : f.status === 'A' ? 'Added' : f.status === 'D' ? 'Deleted' : f.status === 'R' ? 'Renamed' : f.status;
+          var deltaHtml = '';
+          if (f.insertions > 0 || f.deletions > 0) {
+            deltaHtml = '<span class="file-delta">' +
+              (f.insertions > 0 ? '<span class="d-add">+' + f.insertions + '</span>' : '') +
+              (f.deletions > 0 ? '<span class="d-del">-' + f.deletions + '</span>' : '') +
+              '</span>';
+          }
+          item.innerHTML = '<span class="changes-dot ' + dotClass + '" title="' + statusLabel + '"></span>' +
+            '<span class="file-path" title="' + escapeHtml(f.path) + '">' + escapeHtml(f.path) + '</span>' +
+            deltaHtml;
+          item.addEventListener('click', function() { openDiff(f.path); });
+          changesListEl.appendChild(item);
+        });
+      }
+      async function openDiff(path) {
+        changesListView.style.display = 'none';
+        changesDiffView.style.display = 'flex';
+        diffFilename.textContent = path;
+        diffContent.innerHTML = '<div style="padding:16px;color:#52525b;font-size:12px;font-family:ui-monospace,monospace;">Loading diff...</div>';
+        try {
+          var res = await fetch('/via/git/diff?path=' + encodeURIComponent(path));
+          var data = await res.json();
+          renderDiff(data.diff);
+        } catch(e) {
+          diffContent.innerHTML = '<div style="padding:16px;color:#f87171;font-size:12px;">Failed to load diff</div>';
+        }
+      }
+      function renderDiff(diff) {
+        diffContent.innerHTML = '';
+        if (!diff) {
+          diffContent.innerHTML = '<div class="changes-empty">No diff available</div>';
+          return;
+        }
+        var lines = diff.split('\\n');
+        for (var i = 0; i < lines.length; i++) {
+          var line = lines[i];
+          var div = document.createElement('div');
+          div.className = 'diff-line';
+          if (line.charAt(0) === '+' && !line.startsWith('+++')) {
+            div.className += ' diff-add';
+          } else if (line.charAt(0) === '-' && !line.startsWith('---')) {
+            div.className += ' diff-del';
+          } else if (line.startsWith('@@')) {
+            div.className += ' diff-hunk';
+          } else if (line.startsWith('diff ') || line.startsWith('index ') || line.startsWith('---') || line.startsWith('+++')) {
+            div.className += ' diff-meta';
+          } else {
+            div.className += ' diff-ctx';
+          }
+          div.textContent = line;
+          diffContent.appendChild(div);
+        }
+      }
+      // Back button
+      document.getElementById('diff-back').addEventListener('click', function() {
+        changesDiffView.style.display = 'none';
+        changesListView.style.display = 'block';
+      });
+    })();
+    ` : ""}
   </script>
 </body>
 </html>`;
@@ -1688,12 +1918,12 @@ import {
 } from "fs";
 import { join as join3, resolve, relative } from "path";
 function readBody2(req) {
-  return new Promise((resolve2, reject) => {
+  return new Promise((resolve3, reject) => {
     let body = "";
     req.on("data", (chunk) => {
       body += chunk.toString();
     });
-    req.on("end", () => resolve2(body));
+    req.on("end", () => resolve3(body));
     req.on("error", reject);
   });
 }
@@ -1830,10 +2060,240 @@ function registerFileRoutes(server, opts) {
   });
 }
+// src/inject.ts
+var SCRIPT_TAG = '<script src="/via/client.js" defer></script>';
+var MARKER = "viagen-toggle";
+function createInjectionMiddleware() {
+  return function injectMiddleware(req, res, next) {
+    if (req.method !== "GET" && req.method !== "HEAD") {
+      return next();
+    }
+    const url = req.url ?? "/";
+    if (url.startsWith("/via/")) {
+      return next();
+    }
+    const accept = req.headers.accept ?? "";
+    if (!accept.includes("text/html")) {
+      return next();
+    }
+    const originalWrite = res.write;
+    const originalEnd = res.end;
+    let injected = false;
+    function isHtmlResponse() {
+      const ct = res.getHeader("content-type");
+      return !!ct && String(ct).includes("text/html");
+    }
+    function tryInject(chunk) {
+      if (injected || !chunk) return chunk;
+      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")) {
+        injected = true;
+        return chunk;
+      }
+      let idx = str.indexOf("</head>");
+      if (idx === -1) idx = str.indexOf("</body>");
+      if (idx === -1) return chunk;
+      injected = true;
+      if (!res.headersSent) {
+        res.removeHeader("content-length");
+      }
+      const result = str.slice(0, idx) + SCRIPT_TAG + str.slice(idx);
+      return typeof chunk === "string" ? result : Buffer.from(result, "utf-8");
+    }
+    res.write = function(chunk, ...args) {
+      return originalWrite.call(
+        res,
+        tryInject(chunk),
+        ...args
+      );
+    };
+    res.end = function(chunk, ...args) {
+      return originalEnd.call(
+        res,
+        tryInject(chunk),
+        ...args
+      );
+    };
+    next();
+  };
+}
+// src/git.ts
+import { readFileSync as readFileSync3 } from "fs";
+import { join as join4, resolve as resolve2 } from "path";
+import {
+  simpleGit
+} from "simple-git";
+function mapStatus(result, stats) {
+  const files = [];
+  const push = (path, status) => {
+    const s = stats.get(path) ?? { ins: 0, del: 0 };
+    files.push({ path, status, insertions: s.ins, deletions: s.del });
+  };
+  for (const f of result.modified) push(f, "M");
+  for (const f of result.created) push(f, "A");
+  for (const f of result.deleted) push(f, "D");
+  for (const f of result.renamed) push(f.to, "R");
+  for (const f of result.not_added) push(f, "?");
+  const seen = /* @__PURE__ */ new Set();
+  return files.filter((f) => {
+    if (seen.has(f.path)) return false;
+    seen.add(f.path);
+    return true;
+  }).sort((a, b) => a.path.localeCompare(b.path));
+}
+async function getDiffStats(git, repoRoot, untrackedFiles) {
+  const stats = /* @__PURE__ */ new Map();
+  let totalInsertions = 0;
+  let totalDeletions = 0;
+  try {
+    const [staged, unstaged] = await Promise.all([
+      git.diffSummary(["--cached"]),
+      git.diffSummary()
+    ]);
+    for (const summary of [staged, unstaged]) {
+      for (const f of summary.files) {
+        if (f.binary) continue;
+        const tf = f;
+        const existing = stats.get(tf.file) ?? { ins: 0, del: 0 };
+        existing.ins += tf.insertions;
+        existing.del += tf.deletions;
+        stats.set(tf.file, existing);
+      }
+    }
+    for (const filePath of untrackedFiles) {
+      try {
+        const content = readFileSync3(join4(repoRoot, filePath), "utf-8");
+        const lines = content.split("\n").length;
+        stats.set(filePath, { ins: lines, del: 0 });
+      } catch {
+      }
+    }
+    for (const { ins, del } of stats.values()) {
+      totalInsertions += ins;
+      totalDeletions += del;
+    }
+  } catch {
+  }
+  return { stats, totalInsertions, totalDeletions };
+}
+async function getFileDiff(git, repoRoot, filePath) {
+  const abs = resolve2(repoRoot, filePath);
+  if (!abs.startsWith(repoRoot + "/") && abs !== repoRoot) {
+    return "";
+  }
+  try {
+    const staged = await git.diff(["--cached", "--", filePath]);
+    const unstaged = await git.diff(["--", filePath]);
+    if (staged && unstaged) return staged + "\n" + unstaged;
+    if (staged) return staged;
+    if (unstaged) return unstaged;
+    try {
+      const content = readFileSync3(join4(repoRoot, filePath), "utf-8");
+      const lines = content.split("\n");
+      const added = lines.map((l) => `+${l}`).join("\n");
+      return `--- /dev/null
++++ b/${filePath}
+@@ -0,0 +1,${lines.length} @@
+${added}`;
+    } catch {
+      return "";
+    }
+  } catch {
+    return "";
+  }
+}
+async function findRepoRoot(cwd) {
+  try {
+    const root = await simpleGit(cwd).revparse(["--show-toplevel"]);
+    return root.trim();
+  } catch {
+    return null;
+  }
+}
+function registerGitRoutes(server, opts) {
+  let repoRoot = null;
+  let git = null;
+  async function ensureGit() {
+    if (git && repoRoot) return { git, root: repoRoot };
+    repoRoot = await findRepoRoot(opts.projectRoot);
+    if (!repoRoot) return null;
+    git = simpleGit(repoRoot);
+    return { git, root: repoRoot };
+  }
+  server.middlewares.use("/via/git/status", (req, res) => {
+    if (req.method !== "GET") {
+      res.statusCode = 405;
+      res.setHeader("Content-Type", "application/json");
+      res.end(JSON.stringify({ error: "Method not allowed" }));
+      return;
+    }
+    res.setHeader("Content-Type", "application/json");
+    ensureGit().then(async (ctx) => {
+      if (!ctx) {
+        res.end(JSON.stringify({ files: [], git: false }));
+        return;
+      }
+      const result = await ctx.git.status();
+      const { stats, totalInsertions, totalDeletions } = await getDiffStats(
+        ctx.git,
+        ctx.root,
+        result.not_added
+      );
+      const files = mapStatus(result, stats);
+      res.end(
+        JSON.stringify({
+          files,
+          git: true,
+          insertions: totalInsertions,
+          deletions: totalDeletions
+        })
+      );
+    }).catch(() => {
+      res.end(JSON.stringify({ files: [], git: false }));
+    });
+  });
+  server.middlewares.use("/via/git/diff", (req, res) => {
+    if (req.method !== "GET") {
+      res.statusCode = 405;
+      res.setHeader("Content-Type", "application/json");
+      res.end(JSON.stringify({ error: "Method not allowed" }));
+      return;
+    }
+    res.setHeader("Content-Type", "application/json");
+    const url = new URL(req.url ?? "/", "http://localhost");
+    const filePath = url.searchParams.get("path");
+    ensureGit().then(async (ctx) => {
+      if (!ctx) {
+        res.end(JSON.stringify({ diff: "", git: false }));
+        return;
+      }
+      if (filePath) {
+        if (filePath.startsWith("/")) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({ error: "Absolute paths not allowed" }));
+          return;
+        }
+        const diff = await getFileDiff(ctx.git, ctx.root, filePath);
+        res.end(JSON.stringify({ diff, path: filePath }));
+      } else {
+        const staged = await ctx.git.diff(["--cached"]);
+        const unstaged = await ctx.git.diff();
+        const combined = staged && unstaged ? staged + "\n" + unstaged : staged || unstaged || "";
+        res.end(JSON.stringify({ diff: combined }));
+      }
+    }).catch(() => {
+      res.end(JSON.stringify({ diff: "" }));
+    });
+  });
+}
 // src/sandbox.ts
 import { randomUUID } from "crypto";
-import { readFileSync as readFileSync3, readdirSync as readdirSync2 } from "fs";
-import { join as join4, relative as relative2 } from "path";
+import { readFileSync as readFileSync4, readdirSync as readdirSync2 } from "fs";
+import { join as join5, relative as relative2 } from "path";
 import { Sandbox } from "@vercel/sandbox";
 var SKIP_DIRS = /* @__PURE__ */ new Set([
   "node_modules",
@@ -1849,13 +2309,13 @@ function collectFiles2(dir, base) {
   for (const entry of readdirSync2(dir, { withFileTypes: true })) {
     if (entry.name.startsWith(".") && SKIP_DIRS.has(entry.name)) continue;
     if (SKIP_DIRS.has(entry.name)) continue;
-    const fullPath = join4(dir, entry.name);
+    const fullPath = join5(dir, entry.name);
     const relPath = relative2(base, fullPath);
     if (entry.isDirectory()) {
       files.push(...collectFiles2(fullPath, base));
     } else if (entry.isFile()) {
       if (SKIP_FILES.has(entry.name)) continue;
-      files.push({ path: relPath, content: readFileSync3(fullPath) });
+      files.push({ path: relPath, content: readFileSync4(fullPath) });
     }
   }
   return files;
@@ -2032,10 +2492,10 @@ function viagen(options) {
       claudeBin = findClaudeBin();
       logBuffer.init(projectRoot);
       wrapLogger(config.logger, logBuffer);
-      const viagenDir = join5(projectRoot, ".viagen");
+      const viagenDir = join6(projectRoot, ".viagen");
       mkdirSync2(viagenDir, { recursive: true });
       writeFileSync4(
-        join5(viagenDir, "config.json"),
+        join6(viagenDir, "config.json"),
         JSON.stringify({
           sandboxFiles: options?.sandboxFiles ?? [],
           editable: options?.editable ?? []
@@ -2046,21 +2506,7 @@ function viagen(options) {
       if (!opts.ui) return [];
       const url = new URL(ctx.originalUrl || ctx.path, "http://localhost");
       const isEmbed = url.searchParams.has("_viagen_embed");
-      if (isEmbed) {
-        if (!opts.overlay) return [];
-        return [
-          {
-            tag: "script",
-            children: buildClientScript({
-              position: opts.position,
-              panelWidth: opts.panelWidth,
-              overlay: true,
-              embedMode: true
-            }),
-            injectTo: "body"
-          }
-        ];
-      }
+      if (isEmbed && !opts.overlay) return [];
       return [
         {
           tag: "script",
@@ -2097,9 +2543,18 @@ ${payload.err.frame || ""}`
         server.middlewares.use(createAuthMiddleware(authToken));
       }
       const hasEditor = !!(options?.editable && options.editable.length > 0);
+      const clientJs = buildClientScript({
+        position: opts.position,
+        panelWidth: opts.panelWidth,
+        overlay: opts.overlay
+      });
+      server.middlewares.use("/via/client.js", (_req, res) => {
+        res.setHeader("Content-Type", "application/javascript");
+        res.end(clientJs);
+      });
       server.middlewares.use("/via/ui", (_req, res) => {
         res.setHeader("Content-Type", "text/html");
-        res.end(buildUiHtml({ editable: hasEditor }));
+        res.end(buildUiHtml({ editable: hasEditor, git: true }));
       });
       server.middlewares.use("/via/iframe", (_req, res) => {
         res.setHeader("Content-Type", "text/html");
@@ -2122,6 +2577,12 @@ ${payload.err.frame || ""}`
           projectRoot
         });
       }
+      registerGitRoutes(server, { projectRoot });
+      if (opts.ui) {
+        return () => {
+          server.middlewares.use(createInjectionMiddleware());
+        };
+      }
     }
   };
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "viagen",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "Vite dev server plugin that exposes endpoints for chatting with Claude Code SDK",
   "type": "module",
   "main": "./dist/index.js",
@@ -41,7 +41,9 @@
   "dependencies": {
     "@anthropic-ai/claude-code": "^2.1.42",
     "@vercel/sandbox": "^1",
-    "lucide-react": "^0.564.0"
+    "lucide-react": "^0.564.0",
+    "simple-git": "^3.31.1",
+    "viagen-sdk": "^0.0.0"
   },
   "license": "MIT",
   "repository": {