@tongil_kim/clautunnel 1.1.0 → 1.3.0

package/README.md

@@ -26,15 +26,21 @@ clautunnel setup
 ```
 
 You'll need:
-- **Supabase Project URL**: Dashboard → Settings → API (e.g., `https://xxxx.supabase.co`)
-- **Supabase Anon Key**: Dashboard → Settings → API → `anon` `public` key
+- **Supabase Project ID**: Dashboard → Settings → General → Project ID
+- **Supabase Anon Key**: Dashboard → Settings → API Keys → Legacy anon Tab → Copy anon key
 
 ## Usage
 
 ```bash
-# Authenticate
+# Create account (first time)
+clautunnel signup
+
+# Login (returning user)
 clautunnel login
 
+# Logout
+clautunnel logout
+
 # Start a session
 clautunnel start
 

package/dist/index.d.ts

@@ -11,6 +11,7 @@ interface ConfigData {
     };
     supabaseUrl?: string;
     supabaseAnonKey?: string;
+    mobileProjectPath?: string;
 }
 declare class Config {
     private configDir;
@@ -37,6 +38,8 @@ declare class Config {
         refreshToken: string;
     }): void;
     clearSessionTokens(): void;
+    getMobileProjectPath(): string | undefined;
+    setMobileProjectPath(path: string): void;
 }
 declare function getConfig(): Config;
 

package/dist/index.js

@@ -236,7 +236,7 @@ var Config = class {
   requireConfiguration() {
     if (!this.isConfigured()) {
       throw new ConfigurationError(
-        'ClauTunnel is not configured.\n\nPlease run "clautunnel setup" to configure your Supabase credentials,\nor set the following environment variables:\n  - SUPABASE_URL\n  - SUPABASE_ANON_KEY'
+        'ClauTunnel is not configured.\n\nRun "clautunnel setup" to configure your Supabase credentials.\n\nOr set environment variables in your shell profile (~/.zshrc or ~/.bashrc):\n  export SUPABASE_URL=https://<project-id>.supabase.co\n  export SUPABASE_ANON_KEY=<your-anon-key>'
       );
     }
   }
@@ -262,6 +262,13 @@ var Config = class {
     delete this.data.sessionTokens;
     this.saveConfig();
   }
+  getMobileProjectPath() {
+    return this.data.mobileProjectPath;
+  }
+  setMobileProjectPath(path4) {
+    this.data.mobileProjectPath = path4;
+    this.saveConfig();
+  }
 };
 var defaultConfig = null;
 function getConfig() {
@@ -325,20 +332,22 @@ import { EventEmitter } from "events";
 var DEFAULT_TIMEOUT = 1e4;
 function subscribeWithTimeout(channel, channelName, timeout = DEFAULT_TIMEOUT) {
   return new Promise((resolve3) => {
+    let lastStatus = "unknown";
     const timer = setTimeout(() => {
       console.warn(
-        `[WARN] Realtime subscription timeout for ${channelName}. Mobile sync disabled.`
+        `[WARN] Realtime subscription timeout for ${channelName} (last status: ${lastStatus}).`
       );
       resolve3(false);
     }, timeout);
     channel.subscribe((status, err) => {
+      lastStatus = status;
       if (status === "SUBSCRIBED") {
         clearTimeout(timer);
         resolve3(true);
       } else if (status === "CHANNEL_ERROR" || status === "CLOSED" || status === "TIMED_OUT") {
         clearTimeout(timer);
         console.warn(
-          `[WARN] Channel ${channelName} ${status.toLowerCase()}. Mobile sync disabled.`
+          `[WARN] Channel ${channelName} ${status.toLowerCase()}.`
         );
         if (err) {
           console.warn(`[WARN] Error details: ${err.message || err}`);
@@ -2301,7 +2310,7 @@ ${confirmationMsg}
 };
 
 // src/index.ts
-import { Command as Command8 } from "commander";
+import { Command as Command9 } from "commander";
 
 // src/commands/start.ts
 import { Command } from "commander";
@@ -2604,13 +2613,344 @@ function getFullDiskAccessStatus(enabled, terminalApp) {
   };
 }
 
+// src/mobile/mobile-server.ts
+import { spawn as spawn2, execSync as execSync2 } from "child_process";
+import {
+  existsSync as existsSync4,
+  mkdirSync as mkdirSync3,
+  writeFileSync as writeFileSync3,
+  createWriteStream
+} from "fs";
+import { join as join5 } from "path";
+import { homedir as homedir5 } from "os";
+import { get } from "http";
+var REPO_URL = "https://github.com/TongilKim/ClauTunnel.git";
+var DEFAULT_MOBILE_DIR = join5(homedir5(), ".clautunnel", "mobile");
+var MobileServerManager = class {
+  options;
+  mobileProjectPath;
+  logDir;
+  expoPort;
+  ngrokProcess = null;
+  expoProcess = null;
+  ngrokLogStream = null;
+  expoLogStream = null;
+  tunnelUrl = null;
+  onProgress;
+  constructor(options) {
+    this.options = options;
+    this.mobileProjectPath = options.mobileProjectPath ?? DEFAULT_MOBILE_DIR;
+    this.expoPort = options.expoPort ?? 8081;
+    this.logDir = options.logDir ?? join5(homedir5(), ".clautunnel", "logs");
+    this.onProgress = options.onProgress ?? (() => {
+    });
+  }
+  getMobileProjectPath() {
+    return this.mobileProjectPath;
+  }
+  checkPrerequisites() {
+    const issues = [];
+    let needsInstall = false;
+    try {
+      execSync2("which ngrok", { stdio: "pipe" });
+    } catch {
+      issues.push(
+        "ngrok is not installed.\n  Install: brew install ngrok\n  Sign up: https://ngrok.com\n  Auth:    ngrok config add-authtoken <your-token>"
+      );
+    }
+    const nodeModulesPath = join5(this.mobileProjectPath, "node_modules");
+    if (!existsSync4(nodeModulesPath)) {
+      needsInstall = true;
+    }
+    return { ready: issues.length === 0, issues, needsInstall };
+  }
+  ensureMobileProject() {
+    const packageJson2 = join5(this.mobileProjectPath, "package.json");
+    if (existsSync4(packageJson2)) {
+      return { ready: true, cloned: false };
+    }
+    if (this.mobileProjectPath && !existsSync4(this.mobileProjectPath)) {
+      return {
+        ready: false,
+        cloned: false,
+        error: `Mobile project path not found: ${this.mobileProjectPath}`
+      };
+    }
+    try {
+      execSync2("which git", { stdio: "pipe" });
+    } catch {
+      return {
+        ready: false,
+        cloned: false,
+        error: "git is required to download the mobile app.\n  Install: https://git-scm.com/downloads\n  macOS:   xcode-select --install"
+      };
+    }
+    try {
+      const clautunnelDir = join5(homedir5(), ".clautunnel");
+      if (!existsSync4(clautunnelDir)) {
+        mkdirSync3(clautunnelDir, { recursive: true });
+      }
+      const repoDir = join5(clautunnelDir, "repo");
+      if (existsSync4(repoDir)) {
+        execSync2("git pull --ff-only", {
+          cwd: repoDir,
+          stdio: "pipe",
+          timeout: 6e4
+        });
+      } else {
+        execSync2(
+          `git clone --depth 1 --filter=blob:none --sparse "${REPO_URL}" repo`,
+          {
+            cwd: clautunnelDir,
+            stdio: "pipe",
+            timeout: 6e4
+          }
+        );
+        execSync2("git sparse-checkout set apps/mobile", {
+          cwd: repoDir,
+          stdio: "pipe",
+          timeout: 3e4
+        });
+      }
+      this.mobileProjectPath = join5(repoDir, "apps", "mobile");
+      if (!existsSync4(join5(this.mobileProjectPath, "package.json"))) {
+        return { ready: false, cloned: false, error: "Clone succeeded but apps/mobile not found" };
+      }
+      return { ready: true, cloned: true };
+    } catch (error) {
+      return {
+        ready: false,
+        cloned: false,
+        error: `Failed to clone mobile project: ${error instanceof Error ? error.message : "Unknown error"}`
+      };
+    }
+  }
+  ensureEnvFile() {
+    const envPath = join5(this.mobileProjectPath, ".env");
+    const envContent = [
+      `EXPO_PUBLIC_SUPABASE_URL=${this.options.supabaseUrl}`,
+      `EXPO_PUBLIC_SUPABASE_ANON_KEY=${this.options.supabaseAnonKey}`,
+      ""
+    ].join("\n");
+    writeFileSync3(envPath, envContent);
+  }
+  installDependencies() {
+    const nodeModulesPath = join5(this.mobileProjectPath, "node_modules");
+    if (existsSync4(nodeModulesPath)) return true;
+    try {
+      execSync2("pnpm install", {
+        cwd: this.mobileProjectPath,
+        stdio: "pipe",
+        timeout: 12e4
+        // 2 minute timeout
+      });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  async startNgrok() {
+    this.ensureLogDir();
+    this.ngrokLogStream = createWriteStream(join5(this.logDir, "ngrok.log"));
+    this.ngrokProcess = spawn2("ngrok", ["http", String(this.expoPort)], {
+      stdio: ["ignore", "pipe", "pipe"],
+      detached: false
+    });
+    this.ngrokProcess.stdout?.pipe(this.ngrokLogStream);
+    this.ngrokProcess.stderr?.pipe(this.ngrokLogStream);
+    this.ngrokProcess.on("error", () => {
+    });
+    for (let i = 0; i < 10; i++) {
+      await this.sleep(1e3);
+      const url = await this.getNgrokTunnelUrl();
+      if (url) {
+        this.tunnelUrl = url;
+        return url;
+      }
+    }
+    this.killProcess(this.ngrokProcess);
+    this.ngrokProcess = null;
+    return null;
+  }
+  async startExpo(tunnelUrl) {
+    this.ensureLogDir();
+    this.expoLogStream = createWriteStream(join5(this.logDir, "expo.log"));
+    this.expoProcess = spawn2("npx", ["expo", "start", "--port", String(this.expoPort)], {
+      cwd: this.mobileProjectPath,
+      env: {
+        ...process.env,
+        EXPO_PACKAGER_PROXY_URL: tunnelUrl
+      },
+      stdio: ["ignore", "pipe", "pipe"],
+      detached: false
+    });
+    this.expoProcess.on("error", () => {
+    });
+    return new Promise((resolve3) => {
+      let qrDetected = false;
+      let qrFinished = false;
+      let resolved = false;
+      const timeout = setTimeout(() => {
+        if (!resolved) {
+          resolved = true;
+          this.expoProcess?.stdout?.pipe(this.expoLogStream);
+          this.expoProcess?.stderr?.pipe(this.expoLogStream);
+          resolve3(qrDetected);
+        }
+      }, 3e4);
+      this.expoProcess?.stdout?.on("data", (data) => {
+        const text = data.toString();
+        const lines = text.split("\n");
+        for (const line of lines) {
+          if (qrFinished) {
+            this.expoLogStream?.write(line + "\n");
+            continue;
+          }
+          if (this.isQrCodeLine(line)) {
+            qrDetected = true;
+            process.stdout.write(line + "\n");
+          } else if (qrDetected && this.isExpoReadyLine(line)) {
+            process.stdout.write(line + "\n");
+            qrFinished = true;
+            if (!resolved) {
+              resolved = true;
+              clearTimeout(timeout);
+              resolve3(true);
+            }
+          } else if (qrDetected && !qrFinished) {
+            process.stdout.write(line + "\n");
+          } else {
+            this.expoLogStream?.write(line + "\n");
+          }
+        }
+      });
+      this.expoProcess?.stderr?.pipe(this.expoLogStream);
+      this.expoProcess?.on("exit", () => {
+        if (!resolved) {
+          resolved = true;
+          clearTimeout(timeout);
+          resolve3(false);
+        }
+      });
+    });
+  }
+  async start() {
+    this.onProgress("Checking mobile project...");
+    const projectResult = this.ensureMobileProject();
+    if (!projectResult.ready) {
+      return { started: false, error: projectResult.error };
+    }
+    if (projectResult.cloned) {
+      this.onProgress("Mobile project cloned to ~/.clautunnel/repo/apps/mobile");
+    }
+    this.onProgress("Checking prerequisites...");
+    const prereqs = this.checkPrerequisites();
+    if (!prereqs.ready) {
+      return { started: false, error: prereqs.issues.join("; ") };
+    }
+    if (prereqs.needsInstall) {
+      this.onProgress("Installing dependencies (this may take a minute)...");
+      const installed = this.installDependencies();
+      if (!installed) {
+        return { started: false, error: "Failed to install mobile dependencies" };
+      }
+    }
+    this.onProgress("Syncing credentials...");
+    this.ensureEnvFile();
+    this.onProgress("Starting ngrok tunnel...");
+    const tunnelUrl = await this.startNgrok();
+    if (!tunnelUrl) {
+      return { started: false, error: "Failed to start ngrok tunnel" };
+    }
+    this.onProgress("Starting Expo server...");
+    const expoStarted = await this.startExpo(tunnelUrl);
+    if (!expoStarted) {
+      await this.stop();
+      return { started: false, error: "Failed to start Expo server" };
+    }
+    return { started: true, tunnelUrl };
+  }
+  async stop() {
+    if (this.expoProcess) {
+      this.killProcess(this.expoProcess);
+      this.expoProcess = null;
+    }
+    if (this.ngrokProcess) {
+      this.killProcess(this.ngrokProcess);
+      this.ngrokProcess = null;
+    }
+    if (this.expoLogStream) {
+      this.expoLogStream.end();
+      this.expoLogStream = null;
+    }
+    if (this.ngrokLogStream) {
+      this.ngrokLogStream.end();
+      this.ngrokLogStream = null;
+    }
+    this.tunnelUrl = null;
+  }
+  getTunnelUrl() {
+    return this.tunnelUrl;
+  }
+  isQrCodeLine(line) {
+    return line.includes("\u2588") || line.includes("\u2584") || line.includes("\u2580");
+  }
+  isExpoReadyLine(line) {
+    return line.includes("Metro waiting on") || line.includes("Logs for your project");
+  }
+  getNgrokTunnelUrl() {
+    return new Promise((resolve3) => {
+      const req = get("http://localhost:4040/api/tunnels", (res) => {
+        let data = "";
+        res.on("data", (chunk) => data += chunk);
+        res.on("end", () => {
+          try {
+            const tunnels = JSON.parse(data).tunnels;
+            const httpsTunnel = tunnels?.find(
+              (t) => t.proto === "https"
+            );
+            resolve3(httpsTunnel?.public_url ?? null);
+          } catch {
+            resolve3(null);
+          }
+        });
+      });
+      req.on("error", () => resolve3(null));
+      req.setTimeout(2e3, () => {
+        req.destroy();
+        resolve3(null);
+      });
+    });
+  }
+  killProcess(proc) {
+    try {
+      proc.kill("SIGTERM");
+      setTimeout(() => {
+        try {
+          proc.kill("SIGKILL");
+        } catch {
+        }
+      }, 3e3);
+    } catch {
+    }
+  }
+  ensureLogDir() {
+    if (!existsSync4(this.logDir)) {
+      mkdirSync3(this.logDir, { recursive: true });
+    }
+  }
+  sleep(ms) {
+    return new Promise((resolve3) => setTimeout(resolve3, ms));
+  }
+};
+
 // src/commands/start.ts
 if (typeof globalThis.WebSocket === "undefined") {
   globalThis.WebSocket = WebSocket;
 }
 function createStartCommand() {
   const command = new Command("start");
-  command.description("Start ClauTunnel and listen for session requests from mobile app").option("-n, --name <name>", "Machine name").option("--prevent-sleep", "Auto-enable sleep prevention (skip prompt)").action(async (options) => {
+  command.description("Start ClauTunnel and listen for session requests from mobile app").option("-n, --name <name>", "Machine name").option("--prevent-sleep", "Auto-enable sleep prevention (skip prompt)").option("--no-mobile", "Skip mobile server startup").action(async (options) => {
     const config2 = new Config();
     const logger = new Logger();
     const spinner = new Spinner("Starting ClauTunnel...");
@@ -2628,10 +2968,13 @@ function createStartCommand() {
       const session = await restoreSession(supabase, config2);
       if (!session) {
         spinner.fail("Not authenticated");
-        logger.error('Run "clautunnel login" first.');
+        logger.error(
+          'Run "clautunnel login" or "clautunnel signup" first.'
+        );
         process.exit(1);
       }
       const { user } = session;
+      spinner.update(`Authenticated as ${user.email}...`);
       let fdaStatus = null;
       if (isMacOS()) {
         spinner.stop();
@@ -2698,7 +3041,34 @@ function createStartCommand() {
         }
         spinner.start();
       }
-      const cleanup2 = () => {
+      let mobileServer = null;
+      if (options.mobile !== false) {
+        const mobileProjectPath = config2.getMobileProjectPath();
+        mobileServer = new MobileServerManager({
+          mobileProjectPath,
+          supabaseUrl: config2.getSupabaseUrl(),
+          supabaseAnonKey: config2.getSupabaseAnonKey(),
+          onProgress: (msg) => spinner.update(msg)
+        });
+        const result = await mobileServer.start();
+        spinner.stop();
+        if (result.started) {
+          logger.info("");
+          logger.info(`  Tunnel: ${result.tunnelUrl}`);
+          logger.info("");
+        } else {
+          logger.error(`Mobile server failed: ${result.error}`);
+          process.exit(1);
+        }
+        spinner.start();
+      }
+      const cleanup2 = async () => {
+        if (mobileServer) {
+          try {
+            await mobileServer.stop();
+          } catch {
+          }
+        }
         if (sleepState.pmsetEnabled) {
           console.log("Restoring sleep settings...");
         }
@@ -2754,9 +3124,12 @@ function createStartCommand() {
       const connected = await machineClient.connect();
       spinner.stop();
       if (!connected) {
-        logger.error(
-          "Failed to connect to realtime. Check your network connection."
-        );
+        logger.error("Failed to connect to Supabase Realtime.");
+        logger.error("");
+        logger.error("This may be a temporary issue. Try the following:");
+        logger.error('  1. Open a new terminal and run "clautunnel start" again');
+        logger.error("  2. Check your network connection");
+        logger.error('  3. Try "clautunnel login" to refresh your session');
         process.exit(1);
       }
       logger.info("");
@@ -2774,6 +3147,9 @@ function createStartCommand() {
           `  Sleep prevention: ${sleepState.pmsetEnabled ? "Lid-closed mode" : "Basic mode"}`
         );
       }
+      if (mobileServer) {
+        logger.info("  Mobile server: Running");
+      }
       logger.info("");
       logger.info("Open the mobile app to start a session.");
       logger.info("Press Ctrl+C to stop.");
@@ -3083,10 +3459,28 @@ function createLoginCommand() {
   return command;
 }
 
-// src/commands/signup.ts
+// src/commands/logout.ts
 import { Command as Command5 } from "commander";
+function createLogoutCommand() {
+  const command = new Command5("logout");
+  command.description("Log out of ClauTunnel").action(async () => {
+    const config2 = new Config();
+    const logger = new Logger();
+    const session = config2.getSessionTokens();
+    if (!session) {
+      logger.info("Not currently logged in.");
+      return;
+    }
+    config2.clearSessionTokens();
+    logger.info("Logged out successfully.");
+  });
+  return command;
+}
+
+// src/commands/signup.ts
+import { Command as Command6 } from "commander";
 function createSignupCommand() {
-  const command = new Command5("signup");
+  const command = new Command6("signup");
   command.description("Create a new ClauTunnel account").action(async () => {
     const config2 = new Config();
     const logger = new Logger();
@@ -3156,9 +3550,9 @@ function createSignupCommand() {
 }
 
 // src/commands/setup.ts
-import { Command as Command6 } from "commander";
+import { Command as Command7 } from "commander";
 function createSetupCommand() {
-  const command = new Command6("setup");
+  const command = new Command7("setup");
   command.description("Configure ClauTunnel with Supabase credentials").action(async () => {
     const config2 = new Config();
     const logger = new Logger();
@@ -3223,11 +3617,11 @@ function createSetupCommand() {
 }
 
 // src/commands/mobile-setup.ts
-import { Command as Command7 } from "commander";
-import { existsSync as existsSync5, writeFileSync as writeFileSync3 } from "fs";
-import { join as join6, resolve } from "path";
+import { Command as Command8 } from "commander";
+import { existsSync as existsSync6, writeFileSync as writeFileSync4 } from "fs";
+import { join as join7, resolve } from "path";
 function createMobileSetupCommand() {
-  const command = new Command7("mobile-setup");
+  const command = new Command8("mobile-setup");
   command.description("Generate mobile app .env file from CLI credentials").action(async () => {
     const config2 = new Config();
     const logger = new Logger();
@@ -3236,7 +3630,7 @@ function createMobileSetupCommand() {
       const supabaseUrl = config2.getSupabaseUrl();
       const supabaseAnonKey = config2.getSupabaseAnonKey();
       const mobileDir = resolve(process.cwd(), "apps", "mobile");
-      if (!existsSync5(mobileDir)) {
+      if (!existsSync6(mobileDir)) {
         logger.error("Could not find apps/mobile directory.");
         logger.error("");
         logger.error("Make sure you run this command from the ClauTunnel project root:");
@@ -3244,8 +3638,8 @@ function createMobileSetupCommand() {
         logger.error("  clautunnel mobile-setup");
         process.exit(1);
       }
-      const envPath = join6(mobileDir, ".env");
-      if (existsSync5(envPath)) {
+      const envPath = join7(mobileDir, ".env");
+      if (existsSync6(envPath)) {
         logger.warn("apps/mobile/.env already exists and will be overwritten.");
       }
       const envContent = [
@@ -3253,15 +3647,15 @@ function createMobileSetupCommand() {
         `EXPO_PUBLIC_SUPABASE_ANON_KEY=${supabaseAnonKey}`,
         ""
       ].join("\n");
-      writeFileSync3(envPath, envContent);
+      writeFileSync4(envPath, envContent);
+      config2.setMobileProjectPath(mobileDir);
       logger.info("");
-      logger.info("Mobile app .env file created successfully!");
-      logger.info(`  ${envPath}`);
+      logger.info("Mobile app configured successfully!");
+      logger.info(`  Project: ${mobileDir}`);
+      logger.info(`  .env: ${envPath}`);
       logger.info("");
-      logger.info("Next steps:");
-      logger.info("  1. cd apps/mobile");
-      logger.info("  2. pnpm start");
-      logger.info("  3. Scan the QR code with Expo Go");
+      logger.info('The mobile server will start automatically with "clautunnel start".');
+      logger.info('Use "clautunnel start --no-mobile" to skip mobile server.');
     } catch (error) {
       if (error instanceof ConfigurationError) {
         logger.error(error.message);
@@ -3284,13 +3678,14 @@ var packageJson = JSON.parse(
   readFileSync5(resolve2(__dirname, "../package.json"), "utf-8")
 );
 var version = packageJson.version || "0.0.0";
-var program = new Command8();
+var program = new Command9();
 program.name("clautunnel").description("Remote control for Claude Code CLI").version(version);
 program.addCommand(createSetupCommand());
 program.addCommand(createStartCommand());
 program.addCommand(createStopCommand());
 program.addCommand(createStatusCommand());
 program.addCommand(createLoginCommand());
+program.addCommand(createLogoutCommand());
 program.addCommand(createSignupCommand());
 program.addCommand(createMobileSetupCommand());
 if (process.argv[1]?.includes("clautunnel") || process.argv[1]?.endsWith("/index.js") || process.argv[1]?.endsWith("/index.ts")) {