visual-remote 0.1.3 → 0.3.0

package/apps/cli/dist/index.js

@@ -1439,8 +1439,8 @@ var CodexAdapter = class {
 };
 
 // ../../packages/bridge-core/src/config/loader.ts
-import { readFile, realpath } from "node:fs/promises";
-import { basename, isAbsolute, join, relative, resolve, sep } from "node:path";
+import { readFile, realpath, stat as stat2 } from "node:fs/promises";
+import { basename, dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
 import { parse as parseYaml } from "yaml";
 import { ZodError } from "zod";
 
@@ -1627,11 +1627,42 @@ function isWithinRoot(root, candidate) {
   const pathFromRoot = relative(root, candidate);
   return pathFromRoot === "" || !pathFromRoot.startsWith(`..${sep}`) && pathFromRoot !== "..";
 }
+async function configExists(root) {
+  try {
+    await stat2(join(root, CONFIG_PATH));
+    return true;
+  } catch (error) {
+    if (typeof error === "object" && error !== null && "code" in error && error.code === "ENOENT") {
+      return false;
+    }
+    throw error;
+  }
+}
+async function discoverVisualDevConfigRoot(startDirectory, repositoryRoot) {
+  const repoRoot = await realpath(repositoryRoot);
+  let cursor = await realpath(startDirectory);
+  if (!isWithinRoot(repoRoot, cursor)) {
+    throw new VisualDevConfigError(`Project directory is outside Git worktree: ${cursor}`);
+  }
+  while (true) {
+    if (await configExists(cursor)) return cursor;
+    if (cursor === repoRoot) return repoRoot;
+    const parent = dirname(cursor);
+    if (parent === cursor || !isWithinRoot(repoRoot, parent)) return repoRoot;
+    cursor = parent;
+  }
+}
 async function loadVisualDevConfig(repositoryRoot, options = {}) {
   const repoRoot = await realpath(repositoryRoot);
-  const configPath = join(repoRoot, CONFIG_PATH);
-  const localConfigPath = join(repoRoot, LOCAL_CONFIG_PATH);
-  const projectId = basename(repoRoot);
+  const configRoot = await realpath(options.configRoot ?? repoRoot);
+  if (!isWithinRoot(repoRoot, configRoot)) {
+    throw new VisualDevConfigError(
+      `Config directory is outside Git worktree: ${configRoot}`
+    );
+  }
+  const configPath = join(configRoot, CONFIG_PATH);
+  const localConfigPath = join(configRoot, LOCAL_CONFIG_PATH);
+  const projectId = basename(configRoot);
   const baseDocument = await readYamlMapping(configPath, options.requireConfig ?? false);
   const localDocument = await readYamlMapping(localConfigPath, false);
   const loadedFiles = [];
@@ -1658,7 +1689,7 @@ async function loadVisualDevConfig(repositoryRoot, options = {}) {
       filePath: localDocument === void 0 ? configPath : localConfigPath
     });
   }
-  const unresolvedWorkspace = isAbsolute(config.project.workspace) ? config.project.workspace : resolve(repoRoot, config.project.workspace);
+  const unresolvedWorkspace = isAbsolute(config.project.workspace) ? config.project.workspace : resolve(configRoot, config.project.workspace);
   let workspaceRoot;
   try {
     workspaceRoot = await realpath(unresolvedWorkspace);
@@ -1677,6 +1708,7 @@ async function loadVisualDevConfig(repositoryRoot, options = {}) {
   return {
     config,
     repoRoot,
+    configRoot,
     workspaceRoot,
     configPath,
     localConfigPath,
@@ -1964,7 +1996,7 @@ import {
   rm
 } from "node:fs/promises";
 import { tmpdir } from "node:os";
-import { dirname, relative as relative3, resolve as resolve4, sep as sep3 } from "node:path";
+import { dirname as dirname2, relative as relative3, resolve as resolve4, sep as sep3 } from "node:path";
 var SNAPSHOT_ENV = {
   GIT_AUTHOR_NAME: "Visual Bridge",
   GIT_AUTHOR_EMAIL: "visual-bridge@localhost",
@@ -2317,7 +2349,7 @@ var GitTransactionManager = class _GitTransactionManager {
     } catch (error) {
       if (error.code !== "ENOENT") throw error;
     }
-    await this.#removeEmptyParents(dirname(absolute));
+    await this.#removeEmptyParents(dirname2(absolute));
   }
   async #removeEmptyParents(start) {
     let cursor = start;
@@ -2327,13 +2359,13 @@ var GitTransactionManager = class _GitTransactionManager {
       } catch (error) {
         const code = error.code;
         if (code === "ENOENT") {
-          cursor = dirname(cursor);
+          cursor = dirname2(cursor);
           continue;
         }
         if (code === "ENOTEMPTY" || code === "EEXIST") return;
         throw error;
       }
-      cursor = dirname(cursor);
+      cursor = dirname2(cursor);
     }
   }
   async #assertSnapshotRef(ref) {
@@ -2353,7 +2385,7 @@ var GitTransactionManager = class _GitTransactionManager {
 // ../../packages/bridge-core/src/storage/sqlite-task-store.ts
 import { mkdirSync } from "node:fs";
 import { createRequire } from "node:module";
-import { dirname as dirname2 } from "node:path";
+import { dirname as dirname3 } from "node:path";
 var requireNodeBuiltin = createRequire(import.meta.url);
 var optional = (value) => value ?? void 0;
 function parseJson(value, fallback) {
@@ -2445,7 +2477,7 @@ function taskParams(task) {
 var SqliteTaskStore = class {
   #db;
   constructor(filename) {
-    if (filename !== ":memory:") mkdirSync(dirname2(filename), { recursive: true, mode: 448 });
+    if (filename !== ":memory:") mkdirSync(dirname3(filename), { recursive: true, mode: 448 });
     const { DatabaseSync } = requireNodeBuiltin("node:sqlite");
     this.#db = new DatabaseSync(filename);
     this.#db.exec(`
@@ -4589,7 +4621,9 @@ ${output2}` : ""}`
 
 // ../../packages/bridge-core/src/bridge/default-control-service.ts
 async function createDefaultControlService(context, environment = process.env) {
-  const loaded = await loadVisualDevConfig(context.repoRoot);
+  const loaded = await loadVisualDevConfig(context.repoRoot, {
+    ...context.configRoot === void 0 ? {} : { configRoot: context.configRoot }
+  });
   if (loaded.config.agent.adapter !== "codex") {
     throw new Error(
       `Agent adapter ${loaded.config.agent.adapter} is not implemented in this MVP build`
@@ -4882,6 +4916,7 @@ async function startBridgeCore(options, dependencies) {
       mode: options.mode,
       projectId: loadedConfig.config.project.id,
       repoRoot: loadedConfig.repoRoot,
+      configRoot: loadedConfig.configRoot,
       workspaceRoot: loadedConfig.workspaceRoot,
       upstreamUrl: options.upstreamUrl
     };
@@ -4951,8 +4986,10 @@ async function startBridgeCore(options, dependencies) {
   }
 }
 async function startAttachBridge(options, dependencies = {}) {
-  const repoRoot = await discoverGitWorktreeRoot(dependencies.cwd ?? process.cwd());
-  const loadedConfig = await loadVisualDevConfig(repoRoot);
+  const cwd = dependencies.cwd ?? process.cwd();
+  const repoRoot = await discoverGitWorktreeRoot(cwd);
+  const configRoot = await discoverVisualDevConfigRoot(cwd, repoRoot);
+  const loadedConfig = await loadVisualDevConfig(repoRoot, { configRoot });
   return await startBridgeCore(
     {
       mode: "attach",
@@ -4966,8 +5003,13 @@ async function startAttachBridge(options, dependencies = {}) {
   );
 }
 async function startManagedBridge(options = {}, dependencies = {}) {
-  const repoRoot = await discoverGitWorktreeRoot(dependencies.cwd ?? process.cwd());
-  const loadedConfig = await loadVisualDevConfig(repoRoot, { requireConfig: true });
+  const cwd = dependencies.cwd ?? process.cwd();
+  const repoRoot = await discoverGitWorktreeRoot(cwd);
+  const configRoot = await discoverVisualDevConfigRoot(cwd, repoRoot);
+  const loadedConfig = await loadVisualDevConfig(repoRoot, {
+    requireConfig: true,
+    configRoot
+  });
   const command = loadedConfig.config.upstream.command;
   if (command === void 0) {
     throw new Error("visual dev requires upstream.command in .visualdev/config.yaml");
@@ -5076,14 +5118,14 @@ function formatBridgeSummary(bridge) {
 
 // src/doctor.ts
 import { constants } from "node:fs";
-import { access as access2, stat as stat2 } from "node:fs/promises";
-import { delimiter, isAbsolute as isAbsolute5, join as join4, resolve as resolve7 } from "node:path";
+import { access as access2, stat as stat3 } from "node:fs/promises";
+import { delimiter, isAbsolute as isAbsolute5, join as join4, relative as relative6, resolve as resolve7 } from "node:path";
 import { execFile as execFile2 } from "node:child_process";
 import { promisify as promisify2 } from "node:util";
 var execFileAsync2 = promisify2(execFile2);
 async function fileExists(path) {
   try {
-    await stat2(path);
+    await stat3(path);
     return true;
   } catch (error) {
     if (typeof error === "object" && error !== null && "code" in error && error.code === "ENOENT") {
@@ -5131,14 +5173,19 @@ async function runDoctor(dependencies = {}) {
     return checks;
   }
   try {
-    const loaded = await loadVisualDevConfig(repoRoot);
+    const configRoot = await discoverVisualDevConfigRoot(
+      dependencies.cwd ?? process.cwd(),
+      repoRoot
+    );
+    const loaded = await loadVisualDevConfig(repoRoot, { configRoot });
     checks.push({
       name: "config",
       status: loaded.loadedFiles.length === 0 ? "warning" : "pass",
       message: loaded.loadedFiles.length === 0 ? "No .visualdev/config.yaml; attach defaults are available." : loaded.loadedFiles.join(", ")
     });
     if (await fileExists(loaded.localConfigPath)) {
-      const ignored = await isIgnored(repoRoot, ".visualdev/config.local.yaml");
+      const localConfigRelativePath = relative6(repoRoot, loaded.localConfigPath);
+      const ignored = await isIgnored(repoRoot, localConfigRelativePath);
       checks.push({
         name: "local-config-ignore",
         status: ignored ? "pass" : "warning",
@@ -5176,15 +5223,37 @@ function formatDoctorChecks(checks) {
 }
 
 // src/init.ts
-import { readFile as readFile5, mkdir as mkdir3, stat as stat3, writeFile as writeFile3 } from "node:fs/promises";
-import { basename as basename2, dirname as dirname3, join as join5 } from "node:path";
+import { spawn as spawn6 } from "node:child_process";
+import { readFile as readFile5, mkdir as mkdir3, realpath as realpath10, stat as stat4, writeFile as writeFile3 } from "node:fs/promises";
+import { basename as basename2, dirname as dirname4, join as join5, relative as relative7 } from "node:path";
 import { stringify as stringifyYaml } from "yaml";
+var VITE_CONFIG_FILES = [
+  "vite.config.ts",
+  "vite.config.mts",
+  "vite.config.js",
+  "vite.config.mjs"
+];
+var VITE_IMPORT = 'import { visualRemote } from "visual-remote/vite";';
+var NEXT_CONFIG_FILES = [
+  "next.config.ts",
+  "next.config.mjs",
+  "next.config.js"
+];
+var NEXT_ESM_IMPORT = 'import { withVisualRemote } from "visual-remote/next";';
+var NEXT_CJS_IMPORT = 'const { withVisualRemote } = require("visual-remote/next");';
+var NEXT_CLIENT_MODULE = "visual-remote/next/client";
+var NEXT_CLIENT_BOOTSTRAP = [
+  'if (process.env.NODE_ENV === "development") {',
+  `  void import("${NEXT_CLIENT_MODULE}");`,
+  "}",
+  ""
+].join("\n");
 function isMissingFile(error) {
   return typeof error === "object" && error !== null && "code" in error && error.code === "ENOENT";
 }
 async function fileExists2(path) {
   try {
-    await stat3(path);
+    await stat4(path);
     return true;
   } catch (error) {
     if (isMissingFile(error)) return false;
@@ -5196,7 +5265,7 @@ function packageManagerFromField(value) {
   const name = value.split("@", 1)[0];
   return name === "bun" || name === "npm" || name === "pnpm" || name === "yarn" ? name : void 0;
 }
-async function detectPackageManager(repoRoot, manifest) {
+async function detectPackageManager(projectRoot, repoRoot, manifest) {
   const declared = packageManagerFromField(manifest.packageManager);
   if (declared !== void 0) return declared;
   const lockfiles = [
@@ -5206,8 +5275,10 @@ async function detectPackageManager(repoRoot, manifest) {
     ["bun", "bun.lockb"],
     ["npm", "package-lock.json"]
   ];
-  for (const [manager, filename] of lockfiles) {
-    if (await fileExists2(join5(repoRoot, filename))) return manager;
+  for (const root of projectRoot === repoRoot ? [projectRoot] : [projectRoot, repoRoot]) {
+    for (const [manager, filename] of lockfiles) {
+      if (await fileExists2(join5(root, filename))) return manager;
+    }
   }
   return "npm";
 }
@@ -5217,6 +5288,26 @@ function readDevScript(manifest) {
   }
   return manifest.scripts.dev.trim();
 }
+function packageRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) ? value : {};
+}
+function isViteProject(manifest, devScript) {
+  const packages = {
+    ...packageRecord(manifest.dependencies),
+    ...packageRecord(manifest.devDependencies)
+  };
+  return "vite" in packages || /(^|[\s;&|])vite(?:\s|$)/.test(devScript);
+}
+function isNextProject(manifest, devScript) {
+  const packages = {
+    ...packageRecord(manifest.dependencies),
+    ...packageRecord(manifest.devDependencies)
+  };
+  return "next" in packages || /(^|[\s;&|])next(?:\s|$)/.test(devScript);
+}
+function hasVisualRemote(manifest) {
+  return "visual-remote" in packageRecord(manifest.dependencies) || "visual-remote" in packageRecord(manifest.devDependencies);
+}
 function devCommand(manager, script) {
   const command = manager === "pnpm" ? ["corepack", "pnpm", "run", "dev"] : manager === "yarn" ? ["corepack", "yarn", "run", "dev"] : manager === "bun" ? ["bun", "run", "dev"] : ["npm", "run", "dev"];
   const next = /(^|[\s;&|])next(?:\s|$)/.test(script);
@@ -5229,14 +5320,14 @@ function devCommand(manager, script) {
     "{upstreamPort}"
   ];
 }
-async function readManifest(repoRoot) {
-  const manifestPath = join5(repoRoot, "package.json");
+async function readManifest(projectRoot) {
+  const manifestPath = join5(projectRoot, "package.json");
   let source;
   try {
     source = await readFile5(manifestPath, "utf8");
   } catch (error) {
     if (isMissingFile(error)) {
-      throw new Error("visual init requires package.json at the Git worktree root");
+      throw new Error("visual init requires package.json in the current directory");
     }
     throw error;
   }
@@ -5251,56 +5342,309 @@ async function readManifest(repoRoot) {
   }
   return value;
 }
-async function initializeVisualDev(dependencies = {}) {
-  const repoRoot = await discoverGitWorktreeRoot(dependencies.cwd ?? process.cwd());
-  const configPath = join5(repoRoot, CONFIG_PATH);
-  if (await fileExists2(configPath)) {
-    return { created: false, configPath };
+async function findViteConfig(projectRoot) {
+  for (const filename of VITE_CONFIG_FILES) {
+    const candidate = join5(projectRoot, filename);
+    if (await fileExists2(candidate)) return candidate;
   }
-  const manifest = await readManifest(repoRoot);
-  const devScript = readDevScript(manifest);
-  const packageManager = await detectPackageManager(repoRoot, manifest);
-  const document = {
-    version: 1,
-    project: {
-      id: basename2(repoRoot),
-      workspace: "."
-    },
-    gateway: {
-      host: "0.0.0.0",
-      port: "auto"
-    },
-    upstream: {
-      port: "auto",
-      command: devCommand(packageManager, devScript)
+  throw new Error(
+    "visual init found Vite but could not find vite.config.ts, .mts, .js, or .mjs"
+  );
+}
+async function findNextConfig(projectRoot) {
+  for (const filename of NEXT_CONFIG_FILES) {
+    const candidate = join5(projectRoot, filename);
+    if (await fileExists2(candidate)) return candidate;
+  }
+  return join5(projectRoot, "next.config.mjs");
+}
+function insertViteImport(source) {
+  const lines = source.split("\n");
+  let index = 0;
+  while (lines[index]?.startsWith("///")) index += 1;
+  lines.splice(index, 0, VITE_IMPORT);
+  return lines.join("\n");
+}
+function transformViteConfig(source) {
+  if (source.includes("visual-remote/vite") && /\bvisualRemote\s*\(/.test(source)) {
+    return source;
+  }
+  let transformed = source.includes("visual-remote/vite") ? source : insertViteImport(source);
+  const pluginsPattern = /(\bplugins\s*:\s*\[)/;
+  if (pluginsPattern.test(transformed)) {
+    return transformed.replace(
+      pluginsPattern,
+      (match, _prefix, offset, fullSource) => `${match}visualRemote(),${fullSource[offset + match.length] === "\n" ? "" : " "}`
+    );
+  }
+  const objectConfigPattern = /(defineConfig\s*\(\s*\{)/;
+  if (objectConfigPattern.test(transformed)) {
+    return transformed.replace(
+      objectConfigPattern,
+      "$1\n  plugins: [visualRemote()],"
+    );
+  }
+  throw new Error(
+    "visual init could not add visualRemote() to the Vite plugins array"
+  );
+}
+async function configureVite(configPath) {
+  const source = await readFile5(configPath, "utf8");
+  const transformed = transformViteConfig(source);
+  if (transformed === source) return false;
+  await writeFile3(configPath, transformed, "utf8");
+  return true;
+}
+function expressionEnd(source, expressionStart) {
+  let roundDepth = 0;
+  let squareDepth = 0;
+  let curlyDepth = 0;
+  let quote;
+  let lineComment = false;
+  let blockComment = false;
+  for (let index = expressionStart; index < source.length; index += 1) {
+    const character = source[index];
+    const nextCharacter = source[index + 1];
+    if (lineComment) {
+      if (character === "\n") lineComment = false;
+      continue;
     }
-  };
-  await mkdir3(dirname3(configPath), { recursive: true });
+    if (blockComment) {
+      if (character === "*" && nextCharacter === "/") {
+        blockComment = false;
+        index += 1;
+      }
+      continue;
+    }
+    if (quote !== void 0) {
+      if (character === "\\") {
+        index += 1;
+      } else if (character === quote) {
+        quote = void 0;
+      }
+      continue;
+    }
+    if (character === "/" && nextCharacter === "/") {
+      lineComment = true;
+      index += 1;
+      continue;
+    }
+    if (character === "/" && nextCharacter === "*") {
+      blockComment = true;
+      index += 1;
+      continue;
+    }
+    if (character === "'" || character === '"' || character === "`") {
+      quote = character;
+      continue;
+    }
+    if (character === "(") roundDepth += 1;
+    if (character === ")") roundDepth -= 1;
+    if (character === "[") squareDepth += 1;
+    if (character === "]") squareDepth -= 1;
+    if (character === "{") curlyDepth += 1;
+    if (character === "}") curlyDepth -= 1;
+    if (character === ";" && roundDepth === 0 && squareDepth === 0 && curlyDepth === 0) {
+      return index;
+    }
+  }
+  return source.length;
+}
+function wrapConfigExpression(source, assignmentPattern) {
+  const assignment = assignmentPattern.exec(source);
+  if (assignment?.index === void 0) {
+    throw new Error("visual init could not find the default Next.js config export");
+  }
+  let start = assignment.index + assignment[0].length;
+  while (/\s/.test(source[start] ?? "")) start += 1;
+  const end = expressionEnd(source, start);
+  const rawExpression = source.slice(start, end);
+  const trailingWhitespace = rawExpression.match(/\s*$/)?.[0] ?? "";
+  const expression = rawExpression.slice(0, rawExpression.length - trailingWhitespace.length);
+  if (expression.length === 0) {
+    throw new Error("visual init found an empty Next.js config export");
+  }
+  return `${source.slice(0, start)}withVisualRemote(${expression})${trailingWhitespace}${source.slice(end)}`;
+}
+function transformNextConfig(source) {
+  if (source.includes("visual-remote/next") && /\bwithVisualRemote\s*\(/.test(source)) {
+    return source;
+  }
+  if (/\bmodule\.exports\s*=/.test(source)) {
+    const wrapped2 = wrapConfigExpression(source, /\bmodule\.exports\s*=/);
+    return wrapped2.includes(NEXT_CJS_IMPORT) ? wrapped2 : `${NEXT_CJS_IMPORT}
+${wrapped2}`;
+  }
+  const wrapped = wrapConfigExpression(source, /\bexport\s+default\b/);
+  return wrapped.includes(NEXT_ESM_IMPORT) ? wrapped : `${NEXT_ESM_IMPORT}
+${wrapped}`;
+}
+async function configureNext(configPath) {
+  let source;
   try {
-    await writeFile3(configPath, stringifyYaml(document), {
-      encoding: "utf8",
-      flag: "wx"
-    });
+    source = await readFile5(configPath, "utf8");
   } catch (error) {
-    if (typeof error === "object" && error !== null && "code" in error && error.code === "EEXIST") {
-      return { created: false, configPath };
+    if (!isMissingFile(error)) throw error;
+    source = "export default {};\n";
+  }
+  const transformed = transformNextConfig(source);
+  if (transformed === source) return false;
+  await writeFile3(configPath, transformed, "utf8");
+  return true;
+}
+async function findNextClientPath(projectRoot) {
+  const candidates = [
+    join5(projectRoot, "instrumentation-client.ts"),
+    join5(projectRoot, "instrumentation-client.js"),
+    join5(projectRoot, "src", "instrumentation-client.ts"),
+    join5(projectRoot, "src", "instrumentation-client.js")
+  ];
+  for (const candidate of candidates) {
+    if (await fileExists2(candidate)) return candidate;
+  }
+  const sourceRoot = await fileExists2(join5(projectRoot, "src")) ? join5(projectRoot, "src") : projectRoot;
+  const extension = await fileExists2(join5(projectRoot, "tsconfig.json")) ? "ts" : "js";
+  return join5(sourceRoot, `instrumentation-client.${extension}`);
+}
+async function configureNextClient(clientPath) {
+  let source = "";
+  try {
+    source = await readFile5(clientPath, "utf8");
+  } catch (error) {
+    if (!isMissingFile(error)) throw error;
+  }
+  if (source.includes(NEXT_CLIENT_MODULE)) return false;
+  const separator = source.length === 0 || source.endsWith("\n") ? "" : "\n";
+  await mkdir3(dirname4(clientPath), { recursive: true });
+  await writeFile3(clientPath, `${source}${separator}${NEXT_CLIENT_BOOTSTRAP}`, "utf8");
+  return true;
+}
+function installCommand(request) {
+  if (request.packageManager === "pnpm") {
+    return {
+      command: "corepack",
+      args: ["pnpm", "add", "--save-dev", request.packageSpec]
+    };
+  }
+  if (request.packageManager === "yarn") {
+    return {
+      command: "corepack",
+      args: ["yarn", "add", "--dev", request.packageSpec]
+    };
+  }
+  if (request.packageManager === "bun") {
+    return { command: "bun", args: ["add", "--dev", request.packageSpec] };
+  }
+  return {
+    command: "npm",
+    args: ["install", "--save-dev", request.packageSpec]
+  };
+}
+async function installPackage(request) {
+  const { command, args } = installCommand(request);
+  await new Promise((resolvePromise, reject) => {
+    const child = spawn6(command, args, {
+      cwd: request.cwd,
+      env: process.env,
+      stdio: "inherit",
+      windowsHide: true
+    });
+    child.once("error", reject);
+    child.once("exit", (code, signal) => {
+      if (code === 0) {
+        resolvePromise();
+        return;
+      }
+      reject(
+        new Error(
+          `${command} ${args.join(" ")} failed${signal === null ? ` with exit code ${code ?? "unknown"}` : ` with ${signal}`}`
+        )
+      );
+    });
+  });
+}
+async function initializeVisualDev(dependencies = {}) {
+  const projectRoot = await realpath10(dependencies.cwd ?? process.cwd());
+  const repoRoot = await discoverGitWorktreeRoot(projectRoot);
+  const manifest = await readManifest(projectRoot);
+  const devScript = readDevScript(manifest);
+  const framework = isViteProject(manifest, devScript) ? "vite" : isNextProject(manifest, devScript) ? "next" : void 0;
+  if (framework === void 0) {
+    throw new Error("visual init currently supports Vite and Next.js projects");
+  }
+  const packageManager = await detectPackageManager(projectRoot, repoRoot, manifest);
+  const integrationPath = framework === "vite" ? await findViteConfig(projectRoot) : await findNextConfig(projectRoot);
+  const packageInstalled = !hasVisualRemote(manifest);
+  if (packageInstalled) {
+    await (dependencies.installPackage ?? installPackage)({
+      cwd: projectRoot,
+      packageManager,
+      packageSpec: "visual-remote@latest"
+    });
+  }
+  const integrationChanged = framework === "vite" ? await configureVite(integrationPath) : await configureNext(integrationPath);
+  const clientPath = framework === "next" ? await findNextClientPath(projectRoot) : void 0;
+  const clientChanged = clientPath === void 0 ? void 0 : await configureNextClient(clientPath);
+  const configPath = join5(projectRoot, CONFIG_PATH);
+  const created = !await fileExists2(configPath);
+  if (created) {
+    const document = {
+      version: 1,
+      project: {
+        id: basename2(projectRoot),
+        workspace: "."
+      },
+      gateway: {
+        host: "0.0.0.0",
+        port: "auto"
+      },
+      upstream: {
+        port: "auto",
+        command: devCommand(packageManager, devScript)
+      }
+    };
+    await mkdir3(dirname4(configPath), { recursive: true });
+    try {
+      await writeFile3(configPath, stringifyYaml(document), {
+        encoding: "utf8",
+        flag: "wx"
+      });
+    } catch (error) {
+      if (!isMissingFile(error) && (typeof error !== "object" || error === null || !("code" in error) || error.code !== "EEXIST")) {
+        throw error;
+      }
     }
-    throw error;
   }
-  return { created: true, configPath, devScript, packageManager };
+  return {
+    framework,
+    created,
+    configPath,
+    devScript,
+    packageManager,
+    integrationPath,
+    integrationChanged,
+    ...clientPath === void 0 || clientChanged === void 0 ? {} : { clientPath, clientChanged },
+    packageInstalled
+  };
 }
 function formatInitResult(result) {
-  if (!result.created) {
-    return [
-      `Already initialized: ${CONFIG_PATH}`,
-      "Next: npx --yes visual-remote@latest dev"
-    ].join("\n");
+  const configLabel = result.created ? "Created" : "Existing";
+  const integrationLabel = result.integrationChanged ? "Configured" : "Existing";
+  const rows = [
+    `Framework: ${result.framework === "next" ? "Next.js" : "Vite"}`,
+    `${configLabel}:   ${relative7(process.cwd(), result.configPath) || CONFIG_PATH}`,
+    `${integrationLabel}: ${relative7(process.cwd(), result.integrationPath)}`
+  ];
+  if (result.clientPath !== void 0) {
+    rows.push(
+      `${result.clientChanged ? "Configured" : "Existing"}: ${relative7(process.cwd(), result.clientPath)}`
+    );
   }
-  return [
-    `Created:  ${CONFIG_PATH}`,
-    `Detected: ${result.packageManager} dev (${result.devScript})`,
-    "Next:     npx --yes visual-remote@latest dev"
-  ].join("\n");
+  rows.push(
+    result.packageInstalled ? "Installed: visual-remote@latest" : "Installed: visual-remote",
+    "Next:      Start the app normally and open its original URL."
+  );
+  return rows.join("\n");
 }
 
 // src/status.ts
@@ -5353,8 +5697,8 @@ function setExitCode(dependencies, code) {
   }
 }
 function createCli(dependencies = {}) {
-  const program = new Command().name("visual").description("Visual Remote Dev Bridge").version("0.1.3");
-  program.command("init").description("Create .visualdev/config.yaml for the current project").action(async () => {
+  const program = new Command().name("visual").description("Visual Remote Dev Bridge").version("0.3.0");
+  program.command("init").description("Configure Visual Remote for the current Vite or Next.js project").action(async () => {
     const result = await initializeVisualDev(dependencies);
     output(dependencies, formatInitResult(result));
   });
@@ -5432,5 +5776,7 @@ export {
   runBridgeUntilSignal,
   runDoctor,
   startAttachBridge,
-  startManagedBridge
+  startManagedBridge,
+  transformNextConfig,
+  transformViteConfig
 };