vargai 0.4.0-alpha85 → 0.4.0-alpha87

package/hello.tsx

@@ -0,0 +1,35 @@
+/** @jsxImportSource vargai */
+import { Render, Clip, Image, Video, assets } from "vargai/react";
+import { fal } from "vargai/ai";
+
+const girl = Image({
+  prompt: {
+    text: `Using the attached reference images, generate a photorealistic three-quarter editorial portrait of the exact same character — maintain identical face, hairstyle, and proportions from Image 1.
+
+Framing: Head and shoulders, cropped at upper chest. Direct eye contact with camera.
+
+Natural confident expression, relaxed shoulders.
+Preserve the outfit neckline and visible clothing details from reference.
+
+Background: Deep black with two contrasting orange gradient accents matching Reference 2. Soft gradient bleed, no hard edges.
+
+Shot on 85mm f/1.4 lens, shallow depth of field. Clean studio lighting — soft key light on face, subtle rim light on hair and shoulders for separation. High-end fashion editorial aesthetic.`,
+    images: [assets.characters.orangeGirl, assets.backgrounds.orangeGradient],
+  },
+  model: fal.imageModel("nano-banana-pro/edit"),
+  aspectRatio: "9:16",
+});
+
+export default (
+  <Render width={1080} height={1920}>
+    <Clip duration={5}>
+      <Video
+        prompt={{
+          text: "She waves hello warmly, natural smile, friendly expression. Studio lighting, authentic confident slightly playful atmosphere. Camera static. Intense orange lighting.",
+          images: [girl],
+        }}
+        model={fal.videoModel("kling-v2.5")}
+      />
+    </Clip>
+  </Render>
+);

package/package.json

@@ -71,7 +71,7 @@
     "zod": "^4.2.1"
   },
   "sideEffects": false,
-  "version": "0.4.0-alpha85",
+  "version": "0.4.0-alpha87",
   "exports": {
     ".": "./src/index.ts",
     "./ai": "./src/ai-sdk/index.ts",

package/src/ai-sdk/examples/garry-tan-varg.ts

@@ -0,0 +1,61 @@
+/**
+ * Garry Tan Talking Head Video
+ * Generate a video of Garry Tan saying "varg.ai is cool!"
+ */
+
+import {
+  generateImage,
+  experimental_generateSpeech as generateSpeech,
+} from "ai";
+import { elevenlabs, File, fal, generateVideo } from "../index";
+
+async function main() {
+  const script = `varg.ai is cool!`;
+
+  console.log("generating Garry Tan image and voice in parallel...");
+  const [imageResult, speechResult] = await Promise.all([
+    generateImage({
+      model: fal.imageModel("flux-schnell"),
+      prompt:
+        "Garry Tan, Y Combinator CEO, Asian American man, short dark hair, glasses, friendly smile, professional headshot, studio lighting, clean background, looking at camera",
+      n: 1,
+    }),
+    generateSpeech({
+      model: elevenlabs.speechModel("turbo"),
+      text: script,
+      voice: "adam",
+    }),
+  ]);
+
+  const firstImage = imageResult.images[0];
+  if (!firstImage) throw new Error("No image generated");
+  const image = File.from(firstImage);
+  const audio = File.from(speechResult.audio);
+
+  console.log(`image: ${(await image.data()).byteLength} bytes`);
+  console.log(`audio: ${(await audio.data()).byteLength} bytes`);
+
+  await Bun.write("output/garry-tan-image.png", await image.data());
+  await Bun.write("output/garry-tan-voice.mp3", await audio.data());
+
+  console.log("\nanimating Garry Tan (5 seconds)...");
+  const { video } = await generateVideo({
+    model: fal.videoModel("wan-2.5"),
+    prompt: {
+      text: "man talking naturally, moving mouth while speaking, subtle head movements, professional demeanor, blinking naturally",
+      images: [await image.data()],
+    },
+    duration: 5,
+  });
+
+  const output = File.from(video);
+  console.log(`video: ${(await output.data()).byteLength} bytes`);
+  await Bun.write("output/garry-tan-varg.mp4", await output.data());
+
+  console.log("\ndone! files saved to output/");
+  console.log("- output/garry-tan-image.png");
+  console.log("- output/garry-tan-voice.mp3");
+  console.log("- output/garry-tan-varg.mp4");
+}
+
+main().catch(console.error);

package/src/ai-sdk/providers/varg.ts

@@ -43,7 +43,20 @@ class VargAPIError extends Error {
 }
 
 function resolveConfig(settings: VargProviderSettings = {}) {
-  const apiKey = settings.apiKey ?? process.env.VARG_API_KEY ?? "";
+  let apiKey = settings.apiKey ?? process.env.VARG_API_KEY ?? "";
+
+  // Fallback to global credentials (~/.varg/credentials) if no key from settings or env
+  if (!apiKey) {
+    try {
+      const { getGlobalApiKey } = require("../../cli/credentials") as {
+        getGlobalApiKey: () => string | null;
+      };
+      apiKey = getGlobalApiKey() ?? "";
+    } catch {
+      // credentials module may not be available in all contexts (e.g., browser)
+    }
+  }
+
   const baseUrl = settings.baseUrl ?? "https://api.varg.ai/v1";
   return { apiKey, baseUrl };
 }

package/src/cli/commands/balance.ts

@@ -0,0 +1,102 @@
+/**
+ * vargai balance — check your credit balance
+ *
+ * Fetches the current balance from the Gateway API using the saved API key.
+ */
+
+import { defineCommand } from "citty";
+import { getCredentials, getGlobalApiKey } from "../credentials";
+
+const GATEWAY_URL = process.env.VARG_GATEWAY_URL ?? "https://api.varg.ai";
+
+const COLORS = {
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  red: "\x1b[31m",
+  cyan: "\x1b[36m",
+};
+
+function formatCents(cents: number): string {
+  return `$${(cents / 100).toLocaleString("en-US", { minimumFractionDigits: 2 })}`;
+}
+
+export const balanceCmd = defineCommand({
+  meta: {
+    name: "balance",
+    description: "check your credit balance",
+  },
+  async run() {
+    const apiKey = process.env.VARG_API_KEY ?? getGlobalApiKey();
+    const creds = getCredentials();
+
+    if (!apiKey) {
+      console.log();
+      console.log(
+        `${COLORS.yellow} !${COLORS.reset}  Not logged in. Run ${COLORS.cyan}vargai login${COLORS.reset} first.`,
+      );
+      console.log();
+      return;
+    }
+
+    process.stdout.write(
+      `\n${COLORS.dim}  ● Fetching balance...${COLORS.reset}`,
+    );
+
+    try {
+      const res = await fetch(`${GATEWAY_URL}/v1/balance`, {
+        headers: {
+          Authorization: `Bearer ${apiKey}`,
+        },
+      });
+
+      if (!res.ok) {
+        process.stdout.write("\r\x1b[K");
+        const body = (await res.json().catch(() => ({}))) as {
+          error?: string | { message?: string };
+        };
+        const errMsg =
+          typeof body.error === "string"
+            ? body.error
+            : (body.error?.message ??
+              `Failed to fetch balance (${res.status})`);
+        console.log(`${COLORS.red} ✗${COLORS.reset}  ${errMsg}`);
+        console.log();
+        return;
+      }
+
+      const data = (await res.json()) as { balance_cents: number };
+
+      process.stdout.write("\r\x1b[K");
+
+      console.log(
+        `${COLORS.bold}${COLORS.cyan}varg${COLORS.reset}${COLORS.dim} — account balance${COLORS.reset}`,
+      );
+      console.log();
+
+      if (creds?.email) {
+        console.log(`  ${COLORS.dim}Account:${COLORS.reset}  ${creds.email}`);
+      }
+
+      console.log(
+        `  ${COLORS.dim}Balance:${COLORS.reset}  ${COLORS.bold}${data.balance_cents.toLocaleString()} credits${COLORS.reset} (${formatCents(data.balance_cents)})`,
+      );
+      console.log();
+
+      if (data.balance_cents <= 0) {
+        console.log(
+          `  ${COLORS.yellow}No credits remaining.${COLORS.reset} Run ${COLORS.cyan}vargai topup${COLORS.reset} to add more.`,
+        );
+        console.log();
+      }
+    } catch (error) {
+      process.stdout.write("\r\x1b[K");
+      console.log(
+        `${COLORS.red} ✗${COLORS.reset}  Failed to connect to gateway. Check your connection.`,
+      );
+      console.log();
+    }
+  },
+});

package/src/cli/commands/index.ts

@@ -1,9 +1,12 @@
+export { balanceCmd } from "./balance.ts";
 export { findCmd, showFindHelp } from "./find.tsx";
 export { frameCmd, showFrameHelp } from "./frame.tsx";
 export { helloCmd } from "./hello.ts";
 export { helpCmd, showHelp } from "./help.tsx";
 export { initCmd, showInitHelp } from "./init.tsx";
 export { listCmd, showListHelp } from "./list.tsx";
+export { loginCmd } from "./login.tsx";
+export { logoutCmd } from "./logout.ts";
 export {
   previewCmd,
   renderCmd,
@@ -13,4 +16,5 @@ export {
 export { runCmd, showRunHelp, showTargetHelp } from "./run.tsx";
 export { showStoryboardHelp, storyboardCmd } from "./storyboard.tsx";
 export { studioCmd } from "./studio.ts";
+export { topupCmd } from "./topup.ts";
 export { showWhichHelp, whichCmd } from "./which.tsx";

package/src/cli/commands/login.tsx

@@ -0,0 +1,563 @@
+/**
+ * vargai login — agent-first authentication
+ *
+ * Two modes:
+ *   1. Email OTP — sign in via email magic code (creates account + API key)
+ *   2. API key   — paste an existing API key directly
+ *
+ * The `runLogin()` function is exported so `init` can embed the login flow.
+ */
+
+import { defineCommand } from "citty";
+import {
+  getCredentials,
+  getCredentialsPath,
+  saveCredentials,
+} from "../credentials";
+
+const APP_URL = process.env.VARG_APP_URL ?? "https://app.varg.ai";
+const GATEWAY_URL = process.env.VARG_GATEWAY_URL ?? "https://api.varg.ai";
+
+export const COLORS = {
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  blue: "\x1b[34m",
+  red: "\x1b[31m",
+  cyan: "\x1b[36m",
+  gray: "\x1b[90m",
+};
+
+export const log = {
+  info: (msg: string) =>
+    console.log(`${COLORS.blue}info${COLORS.reset} ${msg}`),
+  success: (msg: string) =>
+    console.log(`${COLORS.green} ✓${COLORS.reset}  ${msg}`),
+  error: (msg: string) => console.log(`${COLORS.red} ✗${COLORS.reset}  ${msg}`),
+  warn: (msg: string) =>
+    console.log(`${COLORS.yellow} !${COLORS.reset}  ${msg}`),
+  step: (msg: string) =>
+    console.log(
+      `\n${COLORS.bold}${COLORS.cyan}==>${COLORS.reset} ${COLORS.bold}${msg}${COLORS.reset}`,
+    ),
+};
+
+// Credit packages (mirrored from app/src/config/credit-packages.ts)
+const CREDIT_PACKAGES = [
+  {
+    id: "credits-2000",
+    credits: 2000,
+    amountCents: 2000,
+    label: "2,000 credits",
+  },
+  {
+    id: "credits-5000",
+    credits: 5000,
+    amountCents: 5000,
+    label: "5,000 credits",
+  },
+  {
+    id: "credits-10000",
+    credits: 10000,
+    amountCents: 10000,
+    label: "10,000 credits",
+    popular: true,
+  },
+  {
+    id: "credits-20000",
+    credits: 20000,
+    amountCents: 20000,
+    label: "20,000 credits",
+  },
+  {
+    id: "credits-50000",
+    credits: 50000,
+    amountCents: 50000,
+    label: "50,000 credits",
+  },
+  {
+    id: "credits-100000",
+    credits: 100000,
+    amountCents: 100000,
+    label: "100,000 credits",
+  },
+];
+
+function formatCents(cents: number): string {
+  return `$${(cents / 100).toLocaleString("en-US", { minimumFractionDigits: 0 })}`;
+}
+
+function maskApiKey(key: string): string {
+  if (key.length <= 16) return key;
+  return `${key.slice(0, 12)}...${key.slice(-4)}`;
+}
+
+export async function readLine(prompt: string): Promise<string> {
+  process.stdout.write(prompt);
+  return new Promise<string>((resolve) => {
+    process.stdin.setEncoding("utf8");
+    process.stdin.ref();
+    process.stdin.resume();
+    process.stdin.once("data", (data) => {
+      process.stdin.pause();
+      resolve(data.toString().trim());
+    });
+  });
+}
+
+export async function openBrowser(url: string): Promise<void> {
+  const platform = process.platform;
+  try {
+    if (platform === "darwin") {
+      Bun.spawn(["open", url]);
+    } else if (platform === "linux") {
+      Bun.spawn(["xdg-open", url]);
+    } else if (platform === "win32") {
+      Bun.spawn(["cmd", "/c", "start", url]);
+    } else {
+      log.warn(`Could not open browser. Visit this URL manually:\n  ${url}`);
+    }
+  } catch {
+    log.warn(`Could not open browser. Visit this URL manually:\n  ${url}`);
+  }
+}
+
+// ──── Login Result ────
+
+export interface LoginResult {
+  apiKey: string;
+  email: string;
+  balanceCents: number;
+  /** Only available after email OTP login, not API key login */
+  accessToken: string;
+}
+
+// ──── API Key Login ────
+
+async function loginWithApiKey(): Promise<LoginResult | null> {
+  console.log();
+  console.log(
+    `${COLORS.dim}  Paste your API key from ${COLORS.reset}${COLORS.cyan}https://app.varg.ai${COLORS.reset}`,
+  );
+  console.log();
+
+  for (let attempt = 0; attempt < 3; attempt++) {
+    const key = await readLine(`  API key: `);
+
+    if (!key) {
+      log.error("No key entered.");
+      if (attempt < 2) {
+        console.log(
+          `${COLORS.dim}  Try again (${2 - attempt} attempts left)${COLORS.reset}`,
+        );
+        continue;
+      }
+      return null;
+    }
+
+    // Validate by calling the gateway balance endpoint
+    process.stdout.write(
+      `${COLORS.dim}  ● Validating API key...${COLORS.reset}`,
+    );
+
+    try {
+      const res = await fetch(`${GATEWAY_URL}/v1/balance`, {
+        headers: { Authorization: `Bearer ${key}` },
+      });
+
+      if (!res.ok) {
+        process.stdout.write("\r\x1b[K");
+        if (res.status === 401 || res.status === 403) {
+          log.error("Invalid API key.");
+        } else {
+          const body = (await res.json().catch(() => ({}))) as {
+            error?: string | { message?: string };
+          };
+          const errMsg =
+            typeof body.error === "string"
+              ? body.error
+              : (body.error?.message ?? `Validation failed (${res.status})`);
+          log.error(errMsg);
+        }
+
+        if (attempt < 2) {
+          console.log(
+            `${COLORS.dim}  Try again (${2 - attempt} attempts left)${COLORS.reset}`,
+          );
+          continue;
+        }
+        return null;
+      }
+
+      const data = (await res.json()) as { balance_cents: number };
+      process.stdout.write("\r\x1b[K");
+
+      return {
+        apiKey: key,
+        email: "", // unknown for direct API key login
+        balanceCents: data.balance_cents,
+        accessToken: "", // not available for API key login
+      };
+    } catch {
+      process.stdout.write("\r\x1b[K");
+      log.error("Failed to connect to gateway. Check your connection.");
+      if (attempt < 2) {
+        console.log(
+          `${COLORS.dim}  Try again (${2 - attempt} attempts left)${COLORS.reset}`,
+        );
+        continue;
+      }
+      return null;
+    }
+  }
+
+  return null;
+}
+
+// ──── Email OTP Login ────
+
+async function loginWithEmail(): Promise<LoginResult | null> {
+  console.log();
+
+  const email = await readLine(`  Enter your email: `);
+
+  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    log.error("Invalid email address.");
+    return null;
+  }
+
+  // Send OTP
+  console.log();
+  process.stdout.write(
+    `${COLORS.dim}  ● Sending verification code...${COLORS.reset}`,
+  );
+
+  const sendRes = await fetch(`${APP_URL}/api/auth/cli/send-otp`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email }),
+  });
+
+  if (!sendRes.ok) {
+    const err = (await sendRes.json().catch(() => ({}))) as { error?: string };
+    process.stdout.write("\r\x1b[K");
+    log.error(err.error ?? "Failed to send verification code.");
+    return null;
+  }
+
+  process.stdout.write("\r\x1b[K");
+  log.success("Code sent! Check your inbox.");
+  console.log();
+
+  // Get OTP code (up to 3 attempts)
+  for (let attempt = 0; attempt < 3; attempt++) {
+    const code = await readLine(`  Enter the 6-digit code: `);
+
+    if (!code || !/^\d{6}$/.test(code)) {
+      log.error("Code must be 6 digits.");
+      if (attempt < 2) {
+        console.log(
+          `${COLORS.dim}  Try again (${2 - attempt} attempts left)${COLORS.reset}`,
+        );
+        continue;
+      }
+      return null;
+    }
+
+    process.stdout.write(`${COLORS.dim}  ● Verifying...${COLORS.reset}`);
+
+    const verifyRes = await fetch(`${APP_URL}/api/auth/cli/verify-otp`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, code }),
+    });
+
+    if (!verifyRes.ok) {
+      const err = (await verifyRes.json().catch(() => ({}))) as {
+        error?: string;
+      };
+      process.stdout.write("\r\x1b[K");
+
+      if (verifyRes.status === 401 && attempt < 2) {
+        log.error(err.error ?? "Invalid code.");
+        console.log(
+          `${COLORS.dim}  Try again (${2 - attempt} attempts left)${COLORS.reset}`,
+        );
+        continue;
+      }
+
+      log.error(err.error ?? "Verification failed.");
+      return null;
+    }
+
+    const result = (await verifyRes.json()) as {
+      api_key: string;
+      email: string;
+      balance_cents: number;
+      access_token: string;
+    };
+
+    process.stdout.write("\r\x1b[K");
+
+    return {
+      apiKey: result.api_key,
+      email: result.email,
+      balanceCents: result.balance_cents,
+      accessToken: result.access_token,
+    };
+  }
+
+  return null;
+}
+
+// ──── Credit Package Selector ────
+
+export async function showCreditPackages(accessToken: string): Promise<void> {
+  // Need an access token for Stripe checkout — only available after email login
+  if (!accessToken) {
+    console.log();
+    console.log(
+      `${COLORS.dim}  Add credits anytime with ${COLORS.cyan}vargai topup${COLORS.reset}${COLORS.dim} or at ${COLORS.cyan}https://app.varg.ai${COLORS.reset}`,
+    );
+    return;
+  }
+
+  console.log();
+  console.log(
+    `${COLORS.dim}───${COLORS.reset} ${COLORS.bold}Add credits${COLORS.reset} ${COLORS.dim}${"─".repeat(40)}${COLORS.reset}`,
+  );
+  console.log();
+
+  for (let i = 0; i < CREDIT_PACKAGES.length; i++) {
+    const pkg = CREDIT_PACKAGES[i]!;
+    const num = `[${i + 1}]`;
+    const popular = pkg.popular
+      ? `  ${COLORS.yellow}★ popular${COLORS.reset}`
+      : "";
+    const price = formatCents(pkg.amountCents).padStart(7);
+    console.log(
+      `  ${COLORS.cyan}${num}${COLORS.reset}  ${pkg.label.padEnd(18)} ${COLORS.dim}-${COLORS.reset}  ${COLORS.bold}${price}${COLORS.reset}${popular}`,
+    );
+  }
+
+  console.log();
+  console.log(`  ${COLORS.dim}[s]  Skip for now${COLORS.reset}`);
+  console.log();
+
+  const selection = await readLine(
+    `  Select a package (1-${CREDIT_PACKAGES.length}) or [s] to skip: `,
+  );
+
+  if (selection.toLowerCase() === "s" || selection === "") {
+    return;
+  }
+
+  const pkgIndex = parseInt(selection, 10) - 1;
+  if (isNaN(pkgIndex) || pkgIndex < 0 || pkgIndex >= CREDIT_PACKAGES.length) {
+    log.warn("Invalid selection. Skipping.");
+    return;
+  }
+
+  const selectedPkg = CREDIT_PACKAGES[pkgIndex]!;
+
+  // Create Stripe checkout session
+  process.stdout.write(
+    `\n${COLORS.dim}  ● Creating checkout session...${COLORS.reset}`,
+  );
+
+  const checkoutRes = await fetch(`${APP_URL}/api/billing/checkout`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${accessToken}`,
+      Origin: APP_URL,
+    },
+    body: JSON.stringify({ packageId: selectedPkg.id }),
+  });
+
+  if (!checkoutRes.ok) {
+    process.stdout.write("\r\x1b[K");
+    const err = (await checkoutRes.json().catch(() => ({}))) as {
+      error?: string;
+    };
+    log.error(err.error ?? "Failed to create checkout session.");
+    console.log();
+    log.info(
+      `You can add credits anytime with ${COLORS.cyan}vargai topup${COLORS.reset} or at ${COLORS.cyan}https://app.varg.ai${COLORS.reset}`,
+    );
+    return;
+  }
+
+  const { url } = (await checkoutRes.json()) as { url: string };
+
+  process.stdout.write("\r\x1b[K");
+
+  log.success("Opening Stripe checkout in your browser...");
+  console.log();
+
+  await openBrowser(url);
+
+  console.log(
+    `${COLORS.dim}  If the browser didn't open, visit:${COLORS.reset}`,
+  );
+  console.log(`  ${COLORS.cyan}${url}${COLORS.reset}`);
+  console.log();
+  log.info("Credits will be added to your account after payment.");
+}
+
+// ──── Main Login Flow (exported for use by init) ────
+
+export interface RunLoginOptions {
+  /** Show credit package selector after login. Default: true */
+  showPackages?: boolean;
+  /** Show the header banner. Default: true */
+  showHeader?: boolean;
+  /** Skip the "already logged in" check. Default: false */
+  forceLogin?: boolean;
+}
+
+/**
+ * Run the interactive login flow. Returns the login result, or null if
+ * the user cancelled / was already logged in and chose to keep credentials.
+ *
+ * Can be called from `vargai login` or embedded in `vargai init`.
+ */
+export async function runLogin(
+  options: RunLoginOptions = {},
+): Promise<LoginResult | null> {
+  const {
+    showPackages = true,
+    showHeader = true,
+    forceLogin = false,
+  } = options;
+
+  if (showHeader) {
+    console.log();
+    console.log(
+      `${COLORS.bold}${COLORS.cyan}varg${COLORS.reset}${COLORS.dim} — ai video infrastructure${COLORS.reset}`,
+    );
+    console.log();
+  }
+
+  // Check if already logged in
+  if (!forceLogin) {
+    const existing = getCredentials();
+    if (existing) {
+      const emailLabel = existing.email
+        ? existing.email
+        : maskApiKey(existing.api_key);
+      console.log(
+        `${COLORS.dim}Already logged in as ${COLORS.reset}${COLORS.bold}${emailLabel}${COLORS.reset}`,
+      );
+      if (existing.email) {
+        console.log(
+          `${COLORS.dim}API key: ${maskApiKey(existing.api_key)}${COLORS.reset}`,
+        );
+      }
+      console.log();
+
+      const answer = await readLine(
+        `${COLORS.yellow}Log in as a different account?${COLORS.reset} (y/N): `,
+      );
+
+      if (answer.toLowerCase() !== "y") {
+        log.info("Keeping existing credentials.");
+        return null;
+      }
+      console.log();
+    }
+  }
+
+  // Mode selector
+  log.step("Sign in to varg.ai");
+  console.log();
+  console.log(
+    `  ${COLORS.cyan}[1]${COLORS.reset}  Email ${COLORS.dim}— sign in with your email (creates account if needed)${COLORS.reset}`,
+  );
+  console.log(
+    `  ${COLORS.cyan}[2]${COLORS.reset}  API key ${COLORS.dim}— paste an existing API key${COLORS.reset}`,
+  );
+  console.log();
+
+  const mode = await readLine(`  Select login method (1-2): `);
+
+  let result: LoginResult | null = null;
+
+  if (mode === "2") {
+    result = await loginWithApiKey();
+  } else {
+    // Default to email login (mode "1" or anything else)
+    result = await loginWithEmail();
+  }
+
+  if (!result) {
+    log.error("Login failed.");
+    return null;
+  }
+
+  // Save credentials
+  saveCredentials({
+    api_key: result.apiKey,
+    email: result.email,
+    created_at: new Date().toISOString(),
+  });
+
+  console.log();
+  if (result.email) {
+    log.success(`Logged in as ${COLORS.bold}${result.email}${COLORS.reset}`);
+  } else {
+    log.success("API key validated and saved.");
+  }
+  log.success(
+    `API key saved to ${COLORS.dim}${getCredentialsPath()}${COLORS.reset}`,
+  );
+  log.success(
+    `Balance: ${COLORS.bold}${result.balanceCents.toLocaleString()} credits${COLORS.reset} (${formatCents(result.balanceCents)})`,
+  );
+
+  // Credit packages
+  if (showPackages) {
+    await showCreditPackages(result.accessToken);
+  }
+
+  return result;
+}
+
+// ──── Get Started Message ────
+
+function printGetStarted(): void {
+  console.log();
+  console.log(`${COLORS.bold}Get started:${COLORS.reset}`);
+  console.log(
+    `  ${COLORS.cyan}vargai init${COLORS.reset}      ${COLORS.dim}Set up a new project${COLORS.reset}`,
+  );
+  console.log(
+    `  ${COLORS.cyan}vargai render${COLORS.reset}    ${COLORS.dim}Render a video${COLORS.reset}`,
+  );
+  console.log(
+    `  ${COLORS.cyan}vargai topup${COLORS.reset}     ${COLORS.dim}Add credits to your account${COLORS.reset}`,
+  );
+  console.log();
+}
+
+// ──── Command Definition ────
+
+export const loginCmd = defineCommand({
+  meta: {
+    name: "login",
+    description: "sign in to varg.ai and get your API key",
+  },
+  async run() {
+    try {
+      const result = await runLogin({ showPackages: true, showHeader: true });
+      if (result) {
+        printGetStarted();
+      }
+    } finally {
+      // Allow process to exit cleanly after interactive prompts
+      process.stdin.unref();
+    }
+  },
+});

package/src/cli/commands/logout.ts

@@ -0,0 +1,57 @@
+/**
+ * vargai logout — clear saved credentials
+ */
+
+import { defineCommand } from "citty";
+import {
+  clearCredentials,
+  getCredentials,
+  getCredentialsPath,
+} from "../credentials";
+
+const COLORS = {
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  cyan: "\x1b[36m",
+};
+
+export const logoutCmd = defineCommand({
+  meta: {
+    name: "logout",
+    description: "sign out and remove saved API key",
+  },
+  async run() {
+    const creds = getCredentials();
+
+    if (!creds) {
+      console.log(
+        `\n${COLORS.dim}Not logged in. No credentials to remove.${COLORS.reset}\n`,
+      );
+      return;
+    }
+
+    const removed = clearCredentials();
+
+    if (removed) {
+      console.log();
+      console.log(
+        `${COLORS.green} ✓${COLORS.reset}  Logged out. Credentials removed from ${COLORS.dim}${getCredentialsPath()}${COLORS.reset}`,
+      );
+      console.log(
+        `${COLORS.dim}   Previously logged in as ${creds.email}${COLORS.reset}`,
+      );
+      console.log();
+      console.log(
+        `${COLORS.dim}To log in again: ${COLORS.reset}${COLORS.cyan}vargai login${COLORS.reset}`,
+      );
+      console.log();
+    } else {
+      console.log(
+        `\n${COLORS.yellow} !${COLORS.reset}  No credentials file found.\n`,
+      );
+    }
+  },
+});

package/src/cli/commands/render.tsx

@@ -18,7 +18,18 @@ async function detectDefaultModels(): Promise<DefaultModels | undefined> {
   const defaults: DefaultModels = {};
 
   // Gateway provider — single key for all models (recommended)
-  if (process.env.VARG_API_KEY) {
+  // Check env var first, then global credentials (~/.varg/credentials)
+  let hasVargKey = !!process.env.VARG_API_KEY;
+  if (!hasVargKey) {
+    try {
+      const { getGlobalApiKey } = await import("../credentials");
+      hasVargKey = !!getGlobalApiKey();
+    } catch {
+      // credentials module may not be available
+    }
+  }
+
+  if (hasVargKey) {
     const { varg } = await import("../../ai-sdk/providers/varg");
     defaults.image = varg.imageModel("nano-banana-pro");
     defaults.video = varg.videoModel("kling-v3");
@@ -83,7 +94,7 @@ async function loadComponent(filePath: string): Promise<VargElement> {
 
   if (hasVargaiImport) {
     const tmpFile = `${tmpDir}/${Date.now()}.tsx`;
-    // Resolve JSX pragma to absolute path so it works from the cache dir
+    // Resolve @jsxImportSource to absolute path so it works from the cache dir
     const runtimeDir = resolve(pkgDir, "src/react/runtime");
     const resolvedSource = source.replace(
       /@jsxImportSource\s+vargai/,

package/src/cli/commands/topup.ts

@@ -0,0 +1,83 @@
+/**
+ * vargai topup — add credits to your account
+ *
+ * Opens the app billing page in the browser where the user can purchase credits.
+ * If the user isn't logged in yet, directs them to `vargai login` first.
+ */
+
+import { defineCommand } from "citty";
+import { getCredentials } from "../credentials";
+
+const APP_URL = process.env.VARG_APP_URL ?? "https://app.varg.ai";
+
+const COLORS = {
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  cyan: "\x1b[36m",
+};
+
+async function openBrowser(url: string): Promise<void> {
+  const platform = process.platform;
+  try {
+    if (platform === "darwin") {
+      Bun.spawn(["open", url]);
+    } else if (platform === "linux") {
+      Bun.spawn(["xdg-open", url]);
+    } else if (platform === "win32") {
+      Bun.spawn(["cmd", "/c", "start", url]);
+    }
+  } catch {
+    // silently fail — URL is printed below
+  }
+}
+
+export const topupCmd = defineCommand({
+  meta: {
+    name: "topup",
+    description: "add credits to your account",
+  },
+  async run() {
+    const creds = getCredentials();
+
+    if (!creds) {
+      console.log();
+      console.log(
+        `${COLORS.yellow} !${COLORS.reset}  Not logged in. Run ${COLORS.cyan}vargai login${COLORS.reset} first.`,
+      );
+      console.log();
+      return;
+    }
+
+    console.log();
+    console.log(
+      `${COLORS.bold}${COLORS.cyan}varg${COLORS.reset}${COLORS.dim} — add credits${COLORS.reset}`,
+    );
+    console.log();
+    console.log(
+      `${COLORS.dim}  Logged in as ${COLORS.reset}${COLORS.bold}${creds.email}${COLORS.reset}`,
+    );
+    console.log();
+
+    const billingUrl = `${APP_URL}/dashboard?tab=billing`;
+
+    console.log(
+      `${COLORS.green} ✓${COLORS.reset}  Opening billing page in your browser...`,
+    );
+    console.log();
+
+    await openBrowser(billingUrl);
+
+    console.log(
+      `${COLORS.dim}  If the browser didn't open, visit:${COLORS.reset}`,
+    );
+    console.log(`  ${COLORS.cyan}${billingUrl}${COLORS.reset}`);
+    console.log();
+    console.log(
+      `${COLORS.dim}  Log in with ${COLORS.reset}${creds.email}${COLORS.dim} to manage credits.${COLORS.reset}`,
+    );
+    console.log();
+  },
+});

package/src/cli/credentials.ts

@@ -0,0 +1,112 @@
+/**
+ * Global credential management for vargai CLI.
+ *
+ * Stores and retrieves the user's API key from ~/.varg/credentials.
+ * File is created with 0600 permissions (owner read/write only).
+ */
+
+import {
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  unlinkSync,
+  writeFileSync,
+} from "node:fs";
+import { homedir } from "node:os";
+import { dirname, join } from "node:path";
+
+export interface VargCredentials {
+  api_key: string;
+  email: string;
+  created_at: string;
+}
+
+const CREDENTIALS_DIR = join(homedir(), ".varg");
+const CREDENTIALS_PATH = join(CREDENTIALS_DIR, "credentials");
+
+// Module-level cache to avoid repeated file reads
+let _cached: VargCredentials | null | undefined;
+
+/**
+ * Get the full credentials object from ~/.varg/credentials.
+ * Returns null if the file doesn't exist or is malformed.
+ * Result is cached in memory after first read.
+ */
+export function getCredentials(): VargCredentials | null {
+  if (_cached !== undefined) return _cached;
+
+  try {
+    if (!existsSync(CREDENTIALS_PATH)) {
+      _cached = null;
+      return null;
+    }
+
+    const raw = readFileSync(CREDENTIALS_PATH, "utf-8");
+    const parsed = JSON.parse(raw) as Partial<VargCredentials>;
+
+    if (!parsed.api_key || typeof parsed.api_key !== "string") {
+      _cached = null;
+      return null;
+    }
+
+    _cached = {
+      api_key: parsed.api_key,
+      email: parsed.email ?? "",
+      created_at: parsed.created_at ?? new Date().toISOString(),
+    };
+
+    return _cached;
+  } catch {
+    _cached = null;
+    return null;
+  }
+}
+
+/**
+ * Get the global API key from ~/.varg/credentials.
+ * Returns null if not logged in.
+ */
+export function getGlobalApiKey(): string | null {
+  const creds = getCredentials();
+  return creds?.api_key ?? null;
+}
+
+/**
+ * Save credentials to ~/.varg/credentials.
+ * Creates the ~/.varg/ directory if it doesn't exist.
+ * File is written with 0600 permissions (owner read/write only).
+ */
+export function saveCredentials(creds: VargCredentials): void {
+  if (!existsSync(CREDENTIALS_DIR)) {
+    mkdirSync(CREDENTIALS_DIR, { recursive: true });
+  }
+
+  writeFileSync(CREDENTIALS_PATH, JSON.stringify(creds, null, 2) + "\n", {
+    mode: 0o600,
+  });
+
+  // Invalidate cache
+  _cached = creds;
+}
+
+/**
+ * Delete ~/.varg/credentials and clear cache.
+ * Returns true if the file was deleted, false if it didn't exist.
+ */
+export function clearCredentials(): boolean {
+  _cached = null;
+
+  if (!existsSync(CREDENTIALS_PATH)) {
+    return false;
+  }
+
+  unlinkSync(CREDENTIALS_PATH);
+  return true;
+}
+
+/**
+ * Get the path to the credentials file (for display purposes).
+ */
+export function getCredentialsPath(): string {
+  return CREDENTIALS_PATH;
+}

package/src/cli/index.ts

@@ -12,12 +12,15 @@ import { defineCommand, runMain } from "citty";
 import { registry } from "../core/registry";
 import { allDefinitions } from "../definitions";
 import {
+  balanceCmd,
   findCmd,
   frameCmd,
   helloCmd,
   helpCmd,
   initCmd,
   listCmd,
+  loginCmd,
+  logoutCmd,
   previewCmd,
   renderCmd,
   runCmd,
@@ -34,6 +37,7 @@ import {
   showWhichHelp,
   storyboardCmd,
   studioCmd,
+  topupCmd,
   whichCmd,
 } from "./commands";
 
@@ -116,6 +120,10 @@ const main = defineCommand({
     description: "ai video generation sdk",
   },
   subCommands: {
+    login: loginCmd,
+    logout: logoutCmd,
+    balance: balanceCmd,
+    topup: topupCmd,
     hello: helloCmd,
     init: initCmd,
     render: renderCmd,

package/src/react/examples/omnihuman15-react-test.tsx

@@ -0,0 +1,58 @@
+/**
+ * OmniHuman v1.5 React syntax test
+ *
+ * Uses a local image + local audio file to generate a talking video.
+ *
+ * Run: bun run src/react/examples/omnihuman15-react-test.tsx
+ * Output: output/omnihuman15-react-test.mp4
+ */
+
+import { fal } from "../../ai-sdk/providers/fal";
+import { Clip, Render, render, Video } from "..";
+
+const IMAGE_PATH = "output/garry-tan-image.png";
+const AUDIO_PATH = "output/garry-tan-voice.mp3";
+
+const video = (
+  <Render width={720} height={1280}>
+    <Clip duration={5}>
+      <Video
+        model={fal.videoModel("omnihuman-v1.5")}
+        prompt={{
+          text: "friendly professional talking head, natural blinking, subtle head movement",
+          images: [IMAGE_PATH],
+          audio: AUDIO_PATH,
+        }}
+        providerOptions={{
+          fal: {
+            resolution: "720p",
+            turbo_mode: true,
+          },
+        }}
+      />
+    </Clip>
+  </Render>
+);
+
+async function main() {
+  if (!process.env.FAL_API_KEY && !process.env.FAL_KEY) {
+    console.error("ERROR: FAL_API_KEY/FAL_KEY not found in environment");
+    process.exit(1);
+  }
+
+  const result = await render(video, {
+    output: "output/omnihuman15-react-test.mp4",
+    cache: ".cache/ai",
+  });
+
+  console.log(
+    `ok: output/omnihuman15-react-test.mp4 (${(result.video.byteLength / 1024 / 1024).toFixed(2)} MB)`,
+  );
+}
+
+if (import.meta.main) {
+  main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}

package/.claude/settings.local.json

@@ -1,7 +0,0 @@
-{
-  "permissions": {
-    "allow": ["Bash(bun run:*)", "WebFetch(domain:fal.ai)"],
-    "deny": [],
-    "ask": []
-  }
-}

package/.env.example

@@ -1,33 +0,0 @@
-# fal.ai api key
-FAL_API_KEY=fal_xxx
-
-# higgsfield credentials
-HIGGSFIELD_API_KEY=hf_xxx
-HIGGSFIELD_SECRET=secret_xxx
-
-# elevenlabs api key
-ELEVENLABS_API_KEY=el_xxx
-
-# groq api key (ultra-fast whisper transcription)
-GROQ_API_KEY=gsk_xxx
-
-# fireworks api key (word-level transcription with timestamps)
-FIREWORKS_API_KEY=fw_xxx
-
-# cloudflare r2 / s3 storage
-CLOUDFLARE_R2_API_URL=https://xxx.r2.cloudflarestorage.com
-CLOUDFLARE_ACCESS_KEY_ID=xxx
-CLOUDFLARE_ACCESS_SECRET=xxx
-CLOUDFLARE_R2_BUCKET=m
-
-# replicate (optional)
-REPLICATE_API_TOKEN=r8_xxx
-
-# apify (web scraping actors)
-APIFY_TOKEN=apify_api_xxx
-
-# decart ai (real-time & batch video/image)
-DECART_API_KEY=decart_xxx
-
-# together ai (fast flux-schnell, no queue)
-TOGETHER_API_KEY=together_xxx

package/.github/workflows/ci.yml

@@ -1,23 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-jobs:
-  lint-and-format:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: oven-sh/setup-bun@v2
-        with:
-          bun-version: latest
-
-      - name: Install dependencies
-        run: bun install
-
-      - name: Check
-        run: bun run check

package/.husky/README.md

@@ -1,102 +0,0 @@
-# Git Hooks Configuration
-
-This project uses [Husky](https://typicode.github.io/husky/) to manage Git hooks for maintaining code quality and security.
-
-## Installed Hooks
-
-### `pre-commit`
-Runs before each commit:
-- **Gitleaks** - Scans staged files for secrets and credentials
-- **Lint-staged** - Runs Biome linter/formatter on staged files
-
-### `commit-msg`
-Validates commit messages:
-- **Commitlint** - Enforces [Conventional Commits](https://www.conventionalcommits.org/) format
-
-### `pre-push`
-Runs before pushing to remote:
-- **TypeScript type checking** - Ensures no type errors before push
-
-## Commit Message Format
-
-Follow the Conventional Commits specification:
-
-```
-<type>(<scope>): <subject>
-
-<body>
-
-<footer>
-```
-
-### Types
-- `feat`: New feature
-- `fix`: Bug fix
-- `docs`: Documentation changes
-- `style`: Code style changes (formatting, etc)
-- `refactor`: Code refactoring
-- `perf`: Performance improvements
-- `test`: Test changes
-- `build`: Build system changes
-- `ci`: CI/CD changes
-- `chore`: Other changes
-- `revert`: Revert previous commit
-
-### Examples
-```bash
-feat: add video generation API
-fix(transcribe): handle empty audio files
-docs: update installation guide
-refactor: simplify audio processing pipeline
-```
-
-## Available Scripts
-
-```bash
-# Run linter
-bun run lint
-
-# Format code
-bun run format
-
-# Type check
-bun run type-check
-
-# Check bundle size
-bun run size
-```
-
-## Bypassing Hooks
-
-⚠️ **Not recommended** - Only use when absolutely necessary:
-
-```bash
-# Skip all hooks
-git commit --no-verify -m "emergency fix"
-
-# Skip specific checks by setting env vars
-HUSKY=0 git commit -m "skip all hooks"
-```
-
-## Troubleshooting
-
-If hooks aren't running:
-
-```bash
-# Reinstall hooks
-rm -rf .husky/_
-bun run prepare
-chmod +x .husky/pre-commit .husky/commit-msg .husky/pre-push
-```
-
-## Size Limits
-
-Bundle size limits are defined in `.size-limit.json`. Check size before publishing:
-
-```bash
-bun run size
-```
-
-
-
-

package/.husky/commit-msg

@@ -1,6 +0,0 @@
-# Check commit message format
-bunx --no -- commitlint --edit ${1}
-
-
-
-

package/.husky/pre-commit

@@ -1,9 +0,0 @@
-# Check for secrets with gitleaks
-gitleaks protect --staged
-
-# Run linters on staged files
-bunx lint-staged
-
-
-
-

package/.husky/pre-push

@@ -1,6 +0,0 @@
-# Run type checking before push
-bun run type-check
-
-
-
-