vargai 0.4.0-alpha15 → 0.4.0-alpha16

package/package.json

@@ -64,7 +64,7 @@
     "replicate": "^1.4.0",
     "zod": "^4.2.1"
   },
-  "version": "0.4.0-alpha15",
+  "version": "0.4.0-alpha16",
   "exports": {
     ".": "./src/index.ts",
     "./ai": "./src/ai-sdk/index.ts",

package/src/cli/commands/find.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * varg find command
  * Ink-based search view

package/src/cli/commands/help.tsx

@@ -1,7 +1,4 @@
-/**
- * varg help command
- * Ink-based help display
- */
+/** @jsxImportSource react */
 
 import { defineCommand } from "citty";
 import { Box, Text } from "ink";

package/src/cli/commands/index.ts

@@ -1,7 +1,7 @@
 export { findCmd, showFindHelp } from "./find.tsx";
 export { helpCmd, showHelp } from "./help.tsx";
 export { listCmd, showListHelp } from "./list.tsx";
-export { renderCmd } from "./render.ts";
+export { fastCmd, previewCmd, renderCmd } from "./render.ts";
 export { runCmd, showRunHelp, showTargetHelp } from "./run.tsx";
 export { studioCmd } from "./studio.ts";
 export { showWhichHelp, whichCmd } from "./which.tsx";

package/src/cli/commands/list.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * varg list command
  * Ink-based discovery view

package/src/cli/commands/render.ts

@@ -65,100 +65,119 @@ async function loadComponent(filePath: string): Promise<VargElement> {
   }
 }
 
+const sharedArgs = {
+  file: {
+    type: "positional" as const,
+    description: "component file (.tsx)",
+    required: true,
+  },
+  output: {
+    type: "string" as const,
+    alias: "o",
+    description: "output path",
+  },
+  cache: {
+    type: "string" as const,
+    alias: "c",
+    description: "cache directory",
+    default: ".cache/ai",
+  },
+  quiet: {
+    type: "boolean" as const,
+    alias: "q",
+    description: "minimal output",
+    default: false,
+  },
+  "no-cache": {
+    type: "boolean" as const,
+    description: "disable cache (don't read or write)",
+    default: false,
+  },
+  verbose: {
+    type: "boolean" as const,
+    alias: "v",
+    description: "show ffmpeg commands",
+    default: false,
+  },
+};
+
+async function runRender(
+  args: Record<string, unknown>,
+  mode: RenderMode,
+  commandName: string,
+) {
+  const file = args.file as string;
+
+  if (!file) {
+    console.error(`usage: varg ${commandName} <component.tsx> [-o output.mp4]`);
+    process.exit(1);
+  }
+
+  const component = await loadComponent(file);
+
+  if (!component || component.type !== "render") {
+    console.error("error: default export must be a <Render> element");
+    process.exit(1);
+  }
+
+  const basename = file
+    .replace(/\.tsx?$/, "")
+    .split("/")
+    .pop();
+  const outputPath = (args.output as string) ?? `output/${basename}.mp4`;
+
+  if (!args.quiet) {
+    const modeLabel =
+      mode === "preview" ? " (fast)" : mode === "strict" ? "" : " (preview)";
+    console.log(`rendering ${file} → ${outputPath}${modeLabel}`);
+  }
+
+  const useCache = !args["no-cache"] && mode !== "preview";
+
+  const defaults = await detectDefaultModels();
+
+  const buffer = await render(component, {
+    output: outputPath,
+    cache: useCache ? (args.cache as string) : undefined,
+    mode,
+    defaults,
+    verbose: args.verbose as boolean,
+  });
+
+  if (!args.quiet) {
+    console.log(`done! ${buffer.byteLength} bytes → ${outputPath}`);
+  }
+}
+
 export const renderCmd = defineCommand({
   meta: {
     name: "render",
-    description: "render a react component to video",
+    description: "render to video (strict mode - fails on errors)",
   },
-  args: {
-    file: {
-      type: "positional",
-      description: "component file (.tsx)",
-      required: true,
-    },
-    output: {
-      type: "string",
-      alias: "o",
-      description: "output path",
-    },
-    cache: {
-      type: "string",
-      alias: "c",
-      description: "cache directory",
-      default: ".cache/ai",
-    },
-    quiet: {
-      type: "boolean",
-      alias: "q",
-      description: "minimal output",
-      default: false,
-    },
-    strict: {
-      type: "boolean",
-      description: "fail on provider errors (no fallback)",
-      default: false,
-    },
-    preview: {
-      type: "boolean",
-      description: "skip all generation, use placeholders only",
-      default: false,
-    },
-    "no-cache": {
-      type: "boolean",
-      description: "disable cache (don't read or write)",
-      default: false,
-    },
+  args: sharedArgs,
+  async run({ args }) {
+    await runRender(args, "strict", "render");
+  },
+});
+
+export const previewCmd = defineCommand({
+  meta: {
+    name: "preview",
+    description: "render with fallback placeholders on errors",
+  },
+  args: sharedArgs,
+  async run({ args }) {
+    await runRender(args, "default", "preview");
+  },
+});
+
+export const fastCmd = defineCommand({
+  meta: {
+    name: "fast",
+    description: "render with all placeholders (no generation)",
   },
+  args: sharedArgs,
   async run({ args }) {
-    const file = args.file as string;
-
-    if (!file) {
-      console.error("usage: varg render <component.tsx> [-o output.mp4]");
-      process.exit(1);
-    }
-
-    const component = await loadComponent(file);
-
-    if (!component || component.type !== "render") {
-      console.error("error: default export must be a <Render> element");
-      process.exit(1);
-    }
-
-    const basename = file
-      .replace(/\.tsx?$/, "")
-      .split("/")
-      .pop();
-    const outputPath = args.output ?? `output/${basename}.mp4`;
-
-    const mode: RenderMode = args.strict
-      ? "strict"
-      : args.preview
-        ? "preview"
-        : "default";
-
-    if (!args.quiet) {
-      const modeLabel =
-        mode === "preview"
-          ? " (preview)"
-          : mode === "strict"
-            ? " (strict)"
-            : "";
-      console.log(`rendering ${file} → ${outputPath}${modeLabel}`);
-    }
-
-    const useCache = !args["no-cache"] && mode !== "preview";
-
-    const defaults = await detectDefaultModels();
-
-    const buffer = await render(component, {
-      output: outputPath,
-      cache: useCache ? args.cache : undefined,
-      mode,
-      defaults,
-    });
-
-    if (!args.quiet) {
-      console.log(`done! ${buffer.byteLength} bytes → ${outputPath}`);
-    }
+    await runRender(args, "preview", "fast");
   },
 });

package/src/cli/commands/run.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * varg run command
  * Ink-based execution with live status updates

package/src/cli/commands/which.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * varg which command
  * Ink-based inspection view

package/src/cli/index.ts

@@ -12,9 +12,11 @@ import { defineCommand, runMain } from "citty";
 import { registry } from "../core/registry";
 import { allDefinitions } from "../definitions";
 import {
+  fastCmd,
   findCmd,
   helpCmd,
   listCmd,
+  previewCmd,
   renderCmd,
   runCmd,
   showFindHelp,
@@ -104,6 +106,8 @@ const main = defineCommand({
   subCommands: {
     run: runCmd,
     render: renderCmd,
+    preview: previewCmd,
+    fast: fastCmd,
     studio: studioCmd,
     list: listCmd,
     ls: listCmd,

package/src/cli/ui/components/Badge.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * Badge - Type indicator badge
  * Shows [model] [action] [skill] with appropriate styling

package/src/cli/ui/components/DataTable.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * DataTable - Table display component
  * Clean text-based table for listing items

package/src/cli/ui/components/Header.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * Header - Section header component
  * Bold dimmed text for section titles

package/src/cli/ui/components/HelpBlock.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * HelpBlock - Command help and examples
  * Displays usage patterns and command examples

package/src/cli/ui/components/KeyValue.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * KeyValue - Label-value pair display
  * Aligned key-value pairs with optional required marker

package/src/cli/ui/components/OptionRow.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * OptionRow - CLI option display with better spacing
  * Shows option name, description, type hints, defaults, and enums

package/src/cli/ui/components/Separator.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * Separator - Horizontal divider line
  * Minimal visual separator between sections

package/src/cli/ui/components/StatusBox.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * StatusBox - Execution status display
  * Shows running/done/error state with params and results

package/src/cli/ui/components/VargBox.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * VargBox - Container component
  * Luxury minimal styled box with optional title and borders

package/src/cli/ui/components/VargProgress.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * VargProgress - Progress bar component
  * Elegant thin progress visualization

package/src/cli/ui/components/VargSpinner.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * VargSpinner - Animated loading indicator
  * Elegant braille spinner with label

package/src/cli/ui/components/VargText.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * VargText - Typography component
  * Provides semantic text variants for consistent styling

package/src/react/renderers/music.ts

@@ -22,7 +22,7 @@ export async function renderMusic(
     duration: props.duration,
   });
 
-  const modelId = model.modelId;
+  const modelId = model.modelId ?? "music";
   const taskId = ctx.progress ? addTask(ctx.progress, "music", modelId) : null;
 
   const generateFn = async () => {

package/src/react/renderers/progress.ts

@@ -103,7 +103,7 @@ export function completeTask(tracker: ProgressTracker, id: string): void {
 }
 
 function getEstimate(task: ProgressTask): number {
-  const modelLower = task.model.toLowerCase();
+  const modelLower = task.model?.toLowerCase() ?? "";
   for (const [key, estimate] of Object.entries(MODEL_TIME_ESTIMATES)) {
     if (modelLower.includes(key.toLowerCase())) {
       return estimate;