vargai 0.4.0-alpha4 → 0.4.0-alpha40

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";
@@ -24,44 +21,35 @@ function CommandRow({ name, description }: CommandRowProps) {
 
 function HelpView() {
   const examples = [
-    {
-      command: 'varg run video --prompt "ocean waves"',
-      description: "generate a video from text",
-    },
-    {
-      command: 'varg run video --prompt "person talking" --image photo.jpg',
-      description: "generate video from image",
-    },
-    {
-      command: 'varg run voice --text "hello world" --voice sam',
-      description: "text to speech",
-    },
-    { command: "varg list", description: "see all available" },
-    {
-      command: "varg which video",
-      description: "inspect an action or model",
-    },
+    { command: "vargai hello", description: "create hello.tsx starter" },
+    { command: "vargai render hello.tsx", description: "render jsx to video" },
+    { command: "vargai init", description: "full setup with api keys" },
   ];
 
   return (
-    <VargBox title="varg">
+    <VargBox title="vargai">
       <Box marginBottom={1}>
-        <Text>ai video infrastructure from your terminal</Text>
+        <Text>ai video generation sdk. jsx for videos.</Text>
       </Box>
 
       <Header>COMMANDS</Header>
       <Box flexDirection="column" marginY={1}>
-        <CommandRow name="run" description="run a model, action, or skill" />
-        <CommandRow name="list" description="discover what's available" />
+        <CommandRow name="hello" description="create hello.tsx starter video" />
+        <CommandRow name="render" description="render jsx component to video" />
+        <CommandRow name="preview" description="fast preview (placeholders)" />
+        <CommandRow name="init" description="full setup with api keys" />
         <CommandRow
-          name="find"
-          description="search for models, actions, skills"
+          name="studio"
+          description="visual editor at localhost:8282"
+        />
+        <CommandRow name="run" description="run a single model or action" />
+        <CommandRow
+          name="list"
+          description="discover models, actions, skills"
         />
-        <CommandRow name="which" description="inspect a specific item" />
-        <CommandRow name="help" description="show this help" />
       </Box>
 
-      <Header>EXAMPLES</Header>
+      <Header>QUICKSTART</Header>
       <Box marginTop={1}>
         <HelpBlock examples={examples} />
       </Box>

package/src/cli/commands/index.ts

@@ -1,7 +1,16 @@
 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 { renderCmd } from "./render.tsx";
+export {
+  previewCmd,
+  renderCmd,
+  showPreviewHelp,
+  showRenderHelp,
+} from "./render.tsx";
 export { runCmd, showRunHelp, showTargetHelp } from "./run.tsx";
-export { studioCmd } from "./studio.tsx";
+export { showStoryboardHelp, storyboardCmd } from "./storyboard.tsx";
+export { studioCmd } from "./studio.ts";
 export { showWhichHelp, whichCmd } from "./which.tsx";

package/src/cli/commands/init.tsx

@@ -0,0 +1,570 @@
+import {
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  symlinkSync,
+  unlinkSync,
+  writeFileSync,
+} from "node:fs";
+import { join } from "node:path";
+import { defineCommand } from "citty";
+
+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",
+};
+
+const log = {
+  info: (msg: string) =>
+    console.log(`${COLORS.blue}info${COLORS.reset} ${msg}`),
+  success: (msg: string) =>
+    console.log(`${COLORS.green}done${COLORS.reset} ${msg}`),
+  warn: (msg: string) =>
+    console.log(`${COLORS.yellow}warn${COLORS.reset} ${msg}`),
+  error: (msg: string) =>
+    console.log(`${COLORS.red}error${COLORS.reset} ${msg}`),
+  step: (msg: string) =>
+    console.log(
+      `\n${COLORS.bold}${COLORS.cyan}==>${COLORS.reset} ${COLORS.bold}${msg}${COLORS.reset}`,
+    ),
+};
+
+const HELLO_TEMPLATE = `/** @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>
+);
+`;
+
+const SKILL_MD = `---
+name: varg-video-generation
+description: Generate AI videos using varg SDK React engine. Use when creating videos, animations, talking characters, slideshows, or social media content. Always run onboarding first to check API keys.
+license: MIT
+metadata:
+  author: vargHQ
+  version: "1.0.0"
+compatibility: Requires bun runtime. FAL_KEY required. Optional ELEVENLABS_API_KEY, REPLICATE_API_TOKEN, GROQ_API_KEY
+allowed-tools: Bash(bun:*) Bash(cat:*) Read Write Edit
+---
+
+# Video Generation with varg React Engine
+
+## Overview
+
+This rule helps you generate AI videos using the varg SDK's React engine. It provides:
+- Declarative JSX syntax for video composition
+- Automatic caching (same props = instant cache hit)
+- Parallel generation where possible
+- Support for images, video, music, voice, and captions
+
+## Step 1: Onboarding (REQUIRED for new users)
+
+Before generating videos, ensure the user has the required API keys configured.
+
+### Check Current Setup
+
+Run this command to check existing configuration:
+
+\`\`\`bash
+cat .env 2>/dev/null | grep -E "^(FAL_KEY|ELEVENLABS_API_KEY|REPLICATE_API_TOKEN|GROQ_API_KEY)=" || echo "No API keys found in .env"
+\`\`\`
+
+### Required: FAL_KEY
+
+**This is the minimum requirement for video generation.**
+
+| Detail | Value |
+|--------|-------|
+| Provider | Fal.ai |
+| Get it | https://fal.ai/dashboard/keys |
+| Free tier | Yes (limited credits) |
+| Used for | Image generation (Flux), Video generation (Wan 2.5, Kling) |
+
+If user doesn't have \`FAL_KEY\`:
+1. Direct them to https://fal.ai/dashboard/keys
+2. They need to create an account and generate an API key
+3. Add to \`.env\` file in project root
+
+### Optional Keys (warn if missing, but continue)
+
+| Feature | Required Key | Provider | Get It |
+|---------|-------------|----------|--------|
+| Music generation | \`ELEVENLABS_API_KEY\` | ElevenLabs | https://elevenlabs.io/app/settings/api-keys |
+| Voice/Speech | \`ELEVENLABS_API_KEY\` | ElevenLabs | https://elevenlabs.io/app/settings/api-keys |
+| Lipsync | \`REPLICATE_API_TOKEN\` | Replicate | https://replicate.com/account/api-tokens |
+| Transcription | \`GROQ_API_KEY\` | Groq | https://console.groq.com/keys |
+
+**When keys are missing, inform user what features are unavailable.**
+
+## Step 2: Running Videos
+
+\`\`\`bash
+bunx vargai render video.tsx
+\`\`\`
+
+## Key Components
+
+| Component | Purpose | Required Key |
+|-----------|---------|--------------|
+| \`<Render>\` | Root container | - |
+| \`<Clip>\` | Sequential segment | - |
+| \`<Image>\` | AI image | FAL |
+| \`<Video>\` | AI video | FAL |
+| \`<Music>\` | Background music | ElevenLabs |
+| \`<Speech>\` | Text-to-speech | ElevenLabs |
+
+## Common Patterns
+
+### Character Consistency
+\`\`\`tsx
+const character = Image({ prompt: "blue robot" });
+// Reuse same reference for consistent appearance
+<Video prompt={{ text: "waving", images: [character] }} />
+<Video prompt={{ text: "dancing", images: [character] }} />
+\`\`\`
+
+### Transitions
+\`\`\`tsx
+<Clip transition={{ name: "fade", duration: 0.5 }}>
+// Options: fade, crossfade, wipeleft, cube, slideup, etc.
+\`\`\`
+
+### Aspect Ratios
+- \`9:16\` - TikTok, Reels, Shorts (vertical)
+- \`16:9\` - YouTube (horizontal)
+- \`1:1\` - Instagram (square)
+`;
+
+const GUIDE_MD = `## vargai - AI Video Generation
+
+### Setup
+
+\`\`\`bash
+bunx vargai init
+bun install vargai ai
+\`\`\`
+
+Required: \`FAL_KEY\` in \`.env\`
+Optional: \`ELEVENLABS_API_KEY\` (voice/music), \`REPLICATE_API_TOKEN\` (lipsync), \`GROQ_API_KEY\` (transcription)
+
+### Render videos
+
+\`\`\`bash
+bunx vargai render video.tsx
+\`\`\`
+
+### Basic structure
+
+Every file needs the JSX pragma and exports a default \`<Render>\`:
+
+\`\`\`tsx
+/** @jsxImportSource vargai */
+import { Render, Clip, Image, Video, Speech, Captions, Music } from "vargai/react";
+import { fal, elevenlabs } from "vargai/ai";
+
+export default (
+  <Render width={1080} height={1920}>
+    <Clip duration={5}>
+      <Image prompt="..." model={fal.imageModel("flux-pro")} aspectRatio="9:16" />
+    </Clip>
+  </Render>
+);
+\`\`\`
+
+### Quirks and gotchas
+
+1. **Reusable character pattern** - Export character as named export so it can be imported by other files, then use \`<Image src={character} />\` in the Clip:
+   \`\`\`tsx
+   /** @jsxImportSource vargai */
+   import { Captions, Clip, Image, Render, Speech } from "vargai/react";
+   import { elevenlabs, fal } from "vargai/ai";
+
+   export const character = Image({
+     prompt: "character description",
+     model: fal.imageModel("nano-banana-pro"),
+     aspectRatio: "9:16",
+   });
+
+   export default (
+     <Render width={1080} height={1920}>
+       <Clip duration={21}>
+         <Image src={character} />
+       </Clip>
+       <Captions src={voiceover} style="tiktok" color="#ffffff" activeColor="#FFD700" />
+     </Render>
+   );
+   \`\`\`
+   This file can be both rendered directly (\`bunx vargai render file.tsx\`) and imported by other files (\`import { character } from "./file.tsx"\`).
+
+2. **Captions include audio** - \`<Captions src={voiceover} />\` already plays the audio. No need for separate \`<Speech>\` in the clip.
+
+3. **Clip duration** - Omit \`duration\` to auto-fit content. Set explicit \`duration={N}\` to lock length. If duration is shorter than content, you get black screen while audio continues.
+
+4. **Model names must be exact**:
+   - Images: \`flux-pro\`, \`nano-banana-pro\`, \`nano-banana-pro/edit\`
+   - Videos: \`kling-v2.5\`, \`wan-2.5\`
+   - Lipsync: \`sync-v2-pro\` (NOT \`sync-lipsync\`)
+   - Speech: \`eleven_multilingual_v2\`
+
+5. **Speech function syntax**:
+   \`\`\`tsx
+   // Correct - use for voiceover/captions source
+   const voiceover = Speech({
+     model: elevenlabs.speechModel("eleven_multilingual_v2"),
+     voice: "21m00Tcm4TlvDq8ikWAM",
+     children: "Text to speak",
+   });
+
+   // Inside Clip - use JSX with children
+   <Speech voice="21m00Tcm4TlvDq8ikWAM" model={elevenlabs.speechModel("eleven_multilingual_v2")}>
+     Text to speak
+   </Speech>
+   \`\`\`
+
+6. **Image-to-image editing** - Use \`nano-banana-pro/edit\` with prompt object:
+   \`\`\`tsx
+   const edited = Image({
+     prompt: {
+       text: "new description",
+       images: [baseImage],
+     },
+     model: fal.imageModel("nano-banana-pro/edit"),
+   });
+   \`\`\`
+
+7. **Lipsync videos** - Pass video and audio to sync:
+   \`\`\`tsx
+   <Video
+     prompt={{
+       video: generatedVideo,
+       audio: voiceover,
+     }}
+     model={fal.videoModel("sync-v2-pro")}
+   />
+   \`\`\`
+
+8. **Caching** - Same prompts/params hit cache automatically. Regenerate by changing prompts.
+
+### Simple template (still image + voiceover + captions)
+
+\`\`\`tsx
+/** @jsxImportSource vargai */
+import { Captions, Clip, Image, Render, Speech } from "vargai/react";
+import { elevenlabs, fal } from "vargai/ai";
+
+const SCRIPT = \\\`Your script here.\\\`;
+
+const voiceover = Speech({
+  model: elevenlabs.speechModel("eleven_multilingual_v2"),
+  voice: "21m00Tcm4TlvDq8ikWAM",
+  children: SCRIPT,
+});
+
+export default (
+  <Render width={1080} height={1920}>
+    <Clip duration={21}>
+      <Image
+        prompt="character description"
+        model={fal.imageModel("nano-banana-pro")}
+        aspectRatio="9:16"
+      />
+    </Clip>
+    <Captions src={voiceover} style="tiktok" color="#ffffff" activeColor="#FFD700" />
+  </Render>
+);
+\`\`\`
+
+### Aspect ratios
+
+- \`9:16\` - TikTok, Reels, Shorts (vertical)
+- \`16:9\` - YouTube (horizontal)
+- \`1:1\` - Instagram (square)
+
+### Workflow
+
+1. **Commit every change** - After each successful render or code change, commit to preserve progress.
+2. **Test incrementally** - Start simple (still image + audio), add complexity (video, lipsync) step by step.
+3. **Check duration** - Use \`ffprobe -v error -show_entries format=duration -of csv=p=0 output/file.mp4\` to verify video length.
+4. **Open to preview** - Use \`open output/file.mp4\` to view rendered videos.
+`;
+
+const ENV_TEMPLATE = `# Varg AI Video Generation - API Keys
+
+# REQUIRED - Fal.ai (image & video generation)
+# Get it: https://fal.ai/dashboard/keys
+FAL_KEY=
+
+# OPTIONAL - ElevenLabs (music & voice)
+# Get it: https://elevenlabs.io/app/settings/api-keys
+ELEVENLABS_API_KEY=
+
+# OPTIONAL - Replicate (lipsync)
+# Get it: https://replicate.com/account/api-tokens
+REPLICATE_API_TOKEN=
+
+# OPTIONAL - Groq (transcription)
+# Get it: https://console.groq.com/keys
+GROQ_API_KEY=
+`;
+
+export function showInitHelp() {
+  console.log(`
+${COLORS.bold}vargai init${COLORS.reset}
+
+initialize a new varg project with api key setup and hello.tsx template.
+
+${COLORS.bold}USAGE${COLORS.reset}
+  vargai init [directory]
+
+${COLORS.bold}EXAMPLES${COLORS.reset}
+  ${COLORS.cyan}vargai init${COLORS.reset}              setup in current directory
+  ${COLORS.cyan}vargai init my-project${COLORS.reset}  setup in my-project/
+`);
+}
+
+export const initCmd = defineCommand({
+  meta: {
+    name: "init",
+    description: "setup project with api keys and hello.tsx",
+  },
+  args: {
+    directory: {
+      type: "positional",
+      description: "project directory (default: current)",
+      required: false,
+    },
+  },
+  async run({ args }) {
+    const dir = (args.directory as string) || ".";
+    const cwd = dir === "." ? process.cwd() : join(process.cwd(), dir);
+
+    console.log(`
+${COLORS.bold}${COLORS.cyan}
+ ██╗   ██╗ █████╗ ██████╗  ██████╗ 
+ ██║   ██║██╔══██╗██╔══██╗██╔════╝ 
+ ██║   ██║███████║██████╔╝██║  ███╗
+ ╚██╗ ██╔╝██╔══██║██╔══██╗██║   ██║
+  ╚████╔╝ ██║  ██║██║  ██║╚██████╔╝
+   ╚═══╝  ╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ 
+${COLORS.reset}
+${COLORS.bold}AI Video Generation Setup${COLORS.reset}
+`);
+
+    // Step 1: Create directory structure
+    log.step("Setting up project structure");
+
+    if (!existsSync(cwd) && dir !== ".") {
+      mkdirSync(cwd, { recursive: true });
+      log.success(`Created ${dir}/`);
+    }
+
+    const dirs = ["output", ".cache/ai"];
+    for (const d of dirs) {
+      const path = join(cwd, d);
+      if (!existsSync(path)) {
+        mkdirSync(path, { recursive: true });
+        log.success(`Created ${d}/`);
+      } else {
+        log.info(`${d}/ already exists`);
+      }
+    }
+
+    // Step 2: Check/create .env and prompt for FAL_KEY
+    log.step("Checking API keys");
+
+    const envPath = join(cwd, ".env");
+    let envContent = "";
+    let hasFalKey = false;
+
+    if (existsSync(envPath)) {
+      envContent = readFileSync(envPath, "utf8");
+      hasFalKey = /^FAL_KEY=.+/m.test(envContent);
+
+      if (hasFalKey) {
+        log.success("FAL_KEY found in .env");
+      } else {
+        log.warn("FAL_KEY not found in .env");
+      }
+
+      const hasElevenLabs = /^ELEVENLABS_API_KEY=.+/m.test(envContent);
+      const hasReplicate = /^REPLICATE_API_TOKEN=.+/m.test(envContent);
+      const hasGroq = /^GROQ_API_KEY=.+/m.test(envContent);
+
+      if (hasElevenLabs)
+        log.info("ELEVENLABS_API_KEY found (music/voice enabled)");
+      if (hasReplicate) log.info("REPLICATE_API_TOKEN found (lipsync enabled)");
+      if (hasGroq) log.info("GROQ_API_KEY found (transcription enabled)");
+    } else {
+      log.warn(".env file not found");
+    }
+
+    if (!hasFalKey) {
+      console.log(`
+${COLORS.yellow}FAL_KEY is required for video generation.${COLORS.reset}
+
+Get your free API key at: ${COLORS.cyan}https://fal.ai/dashboard/keys${COLORS.reset}
+`);
+
+      process.stdout.write("Enter your FAL_KEY (or press Enter to skip): ");
+
+      const falKey = await new Promise<string>((resolve) => {
+        process.stdin.setEncoding("utf8");
+        process.stdin.once("data", (data) => {
+          resolve(data.toString().trim());
+        });
+      });
+
+      if (falKey) {
+        if (existsSync(envPath)) {
+          const newEnvContent = envContent.includes("FAL_KEY")
+            ? envContent.replace(/^FAL_KEY=.*/m, `FAL_KEY=${falKey}`)
+            : `${envContent}\nFAL_KEY=${falKey}`;
+          writeFileSync(envPath, newEnvContent);
+        } else {
+          writeFileSync(
+            envPath,
+            ENV_TEMPLATE.replace("FAL_KEY=", `FAL_KEY=${falKey}`),
+          );
+        }
+        log.success("FAL_KEY saved to .env");
+        hasFalKey = true;
+      } else {
+        if (!existsSync(envPath)) {
+          writeFileSync(envPath, ENV_TEMPLATE);
+          log.info("Created .env template - add your keys manually");
+        }
+      }
+    }
+
+    // Step 3: Install Agent Skills
+    log.step("Installing Agent Skills");
+
+    const skillsDir = join(cwd, ".claude/skills/varg-video-generation");
+    const skillPath = join(skillsDir, "SKILL.md");
+
+    if (!existsSync(skillsDir)) {
+      mkdirSync(skillsDir, { recursive: true });
+    }
+
+    writeFileSync(skillPath, SKILL_MD);
+    log.success("Installed SKILL.md (Agent Skills format)");
+
+    const guidePath = join(skillsDir, "GUIDE.md");
+    writeFileSync(guidePath, GUIDE_MD);
+    log.success("Installed GUIDE.md (usage guide)");
+
+    const rulesDir = join(cwd, ".claude/rules");
+    const rulePath = join(rulesDir, "video-generation.md");
+
+    if (!existsSync(rulesDir)) {
+      mkdirSync(rulesDir, { recursive: true });
+    }
+
+    if (existsSync(rulePath)) {
+      unlinkSync(rulePath);
+    }
+
+    symlinkSync("../skills/varg-video-generation/SKILL.md", rulePath);
+    log.success("Created Claude Code rules symlink");
+
+    // Step 4: Create hello.tsx
+    log.step("Creating hello.tsx");
+
+    const helloPath = join(cwd, "hello.tsx");
+    if (!existsSync(helloPath)) {
+      writeFileSync(helloPath, HELLO_TEMPLATE);
+      log.success("Created hello.tsx");
+    } else {
+      log.info("hello.tsx already exists");
+    }
+
+    // Step 5: Update .gitignore
+    log.step("Updating .gitignore");
+
+    const gitignorePath = join(cwd, ".gitignore");
+    const gitignoreEntries = [".env", ".cache/", "output/"];
+    let gitignoreContent = existsSync(gitignorePath)
+      ? readFileSync(gitignorePath, "utf8")
+      : "";
+
+    let added = false;
+    for (const entry of gitignoreEntries) {
+      if (!gitignoreContent.includes(entry)) {
+        gitignoreContent += `\n${entry}`;
+        added = true;
+      }
+    }
+
+    if (added) {
+      writeFileSync(gitignorePath, gitignoreContent.trim() + "\n");
+      log.success("Updated .gitignore");
+    } else {
+      log.info(".gitignore already configured");
+    }
+
+    // Summary
+    console.log(`
+${COLORS.green}${COLORS.bold}Setup complete!${COLORS.reset}
+
+${COLORS.bold}What was installed:${COLORS.reset}
+  ${COLORS.dim}├─${COLORS.reset} hello.tsx ${COLORS.dim}(starter video)${COLORS.reset}
+  ${COLORS.dim}├─${COLORS.reset} .claude/skills/varg-video-generation/SKILL.md ${COLORS.dim}(Agent Skills)${COLORS.reset}
+  ${COLORS.dim}├─${COLORS.reset} .claude/skills/varg-video-generation/GUIDE.md ${COLORS.dim}(usage guide)${COLORS.reset}
+  ${COLORS.dim}├─${COLORS.reset} output/ ${COLORS.dim}(video output folder)${COLORS.reset}
+  ${COLORS.dim}└─${COLORS.reset} .cache/ai/ ${COLORS.dim}(generation cache)${COLORS.reset}
+
+${COLORS.bold}Next steps:${COLORS.reset}
+`);
+
+    if (!hasFalKey) {
+      console.log(`  ${COLORS.yellow}1. Add FAL_KEY to .env${COLORS.reset}
+     Get it at: https://fal.ai/dashboard/keys
+`);
+    }
+
+    console.log(`  ${hasFalKey ? "1" : "2"}. Render your first video:
+     ${COLORS.cyan}bunx vargai render hello.tsx${COLORS.reset}
+
+  ${hasFalKey ? "2" : "3"}. Or ask Claude to create a video:
+     ${COLORS.cyan}claude "create a 10 second tiktok video about cats"${COLORS.reset}
+
+${COLORS.dim}Documentation: https://github.com/vargHQ/sdk${COLORS.reset}
+`);
+  },
+});

package/src/cli/commands/list.tsx

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