@makeitvisible/cli 0.1.0 → 0.2.0

package/dist/bin/index.js

@@ -4,9 +4,10 @@ import chalk from 'chalk';
 import ora from 'ora';
 import { execSync } from 'child_process';
 import OpenAI from 'openai';
-import { readFileSync, existsSync, readdirSync, statSync } from 'fs';
-import { join, relative, basename } from 'path';
+import { existsSync, mkdirSync, writeFileSync, readFileSync, readdirSync, statSync } from 'fs';
+import { dirname, resolve, join, relative, basename } from 'path';
 import { glob } from 'glob';
+import { fileURLToPath, pathToFileURL } from 'url';
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
@@ -67,6 +68,92 @@ function getCommits(range) {
 function getDiffContent(range) {
   return git(`diff ${range}`);
 }
+function extractCodeSnippets(diffContent, maxSnippets = 6) {
+  const snippets = [];
+  const lines = diffContent.split("\n");
+  let currentFile = "";
+  let currentHunk = [];
+  let currentStartLine = 0;
+  let inHunk = false;
+  for (const line of lines) {
+    if (line.startsWith("diff --git")) {
+      if (currentHunk.length > 0 && currentFile) {
+        snippets.push(createSnippetFromHunk(currentFile, currentHunk, currentStartLine));
+        if (snippets.length >= maxSnippets) break;
+      }
+      currentHunk = [];
+      inHunk = false;
+      continue;
+    }
+    if (line.startsWith("+++ b/")) {
+      currentFile = line.slice(6);
+      continue;
+    }
+    if (line.startsWith("@@")) {
+      if (currentHunk.length > 0 && currentFile) {
+        snippets.push(createSnippetFromHunk(currentFile, currentHunk, currentStartLine));
+        if (snippets.length >= maxSnippets) break;
+      }
+      const match = line.match(/@@ -\d+(?:,\d+)? \+(\d+)/);
+      currentStartLine = match ? parseInt(match[1], 10) : 1;
+      currentHunk = [];
+      inHunk = true;
+      continue;
+    }
+    if (inHunk && currentHunk.length < 15) {
+      currentHunk.push(line);
+    }
+  }
+  if (currentHunk.length > 0 && currentFile && snippets.length < maxSnippets) {
+    snippets.push(createSnippetFromHunk(currentFile, currentHunk, currentStartLine));
+  }
+  return snippets;
+}
+function createSnippetFromHunk(file, hunkLines, startLine) {
+  const hasAdditions = hunkLines.some((l) => l.startsWith("+"));
+  const hasDeletions = hunkLines.some((l) => l.startsWith("-"));
+  let changeType;
+  if (hasAdditions && hasDeletions) {
+    changeType = "modified";
+  } else if (hasAdditions) {
+    changeType = "added";
+  } else if (hasDeletions) {
+    changeType = "deleted";
+  } else {
+    changeType = "context";
+  }
+  const code = hunkLines.map((line) => {
+    if (line.startsWith("+") || line.startsWith("-") || line.startsWith(" ")) {
+      return line.slice(1);
+    }
+    return line;
+  }).join("\n");
+  const ext = file.split(".").pop()?.toLowerCase() || "";
+  const langMap = {
+    ts: "typescript",
+    tsx: "typescript",
+    js: "javascript",
+    jsx: "javascript",
+    vue: "vue",
+    py: "python",
+    rb: "ruby",
+    go: "go",
+    rs: "rust",
+    java: "java",
+    css: "css",
+    scss: "scss",
+    html: "html",
+    json: "json"
+  };
+  return {
+    file,
+    code,
+    startLine,
+    language: langMap[ext] || "text",
+    description: `${changeType === "added" ? "Added" : changeType === "deleted" ? "Removed" : "Changed"} in ${file}`,
+    changeType
+  };
+}
 function detectBreakingChanges(commits, diffContent) {
   const breakingPatterns = [
     /BREAKING CHANGE/i,
@@ -217,12 +304,14 @@ async function analyzeDiff(range) {
     breakingChanges,
     keywords
   };
+  const codeSnippets = extractCodeSnippets(diffContent);
   return {
     title,
     description,
     source,
     context,
-    guidelines
+    guidelines,
+    codeSnippets
   };
 }
 async function analyzePR(options) {
@@ -1095,6 +1184,14 @@ Your mission is to investigate a codebase based on a user's query and produce a
 
 6. **Document Technical Details**: Note any important patterns, validations, error handling, or edge cases.
 
+## Efficiency Rules (Important)
+
+- Be efficient: use as few tools as possible (aim for 8-12 tool calls).
+- Prefer targeted \`search_files\` in content or filename over broad directory listing.
+- Read only the most relevant files; avoid reading the same file multiple times.
+- If you have enough information to explain the feature, **complete the investigation** even if some sections are partial.
+- Use empty arrays for unknown sections rather than continuing to search.
+
 ## Tool Usage Tips
 
 - Use \`search_files\` with searchIn="filename" first for broad discovery
@@ -1138,6 +1235,7 @@ var DetectiveAgent = class {
     this.context = { projectRoot: options.projectRoot };
     this.options = {
       maxIterations: 25,
+      maxToolCalls: 18,
       ...options
     };
     this.messages = [{ role: "system", content: SYSTEM_PROMPT }];
@@ -1156,14 +1254,23 @@ Use the available tools to explore the codebase, understand the feature, and the
     });
     let iterations = 0;
     const maxIterations = this.options.maxIterations;
+    const maxToolCalls = this.options.maxToolCalls;
     while (iterations < maxIterations) {
       iterations++;
       try {
+        const shouldForceCompletion = this.toolCallCount >= maxToolCalls || iterations === maxIterations;
+        if (shouldForceCompletion) {
+          this.messages.push({
+            role: "user",
+            content: "Finalize the investigation now using ONLY the information already gathered. Do not call any tools except complete_investigation. Use empty arrays for any section you could not verify."
+          });
+        }
+        const tools = shouldForceCompletion ? AGENT_TOOLS.filter((tool) => tool.function.name === "complete_investigation") : AGENT_TOOLS;
         const response = await this.openai.chat.completions.create({
-          model: "gpt-4o",
+          model: "gpt-5.2",
           messages: this.messages,
-          tools: AGENT_TOOLS,
-          tool_choice: "auto",
+          tools,
+          tool_choice: shouldForceCompletion ? "required" : "auto",
           temperature: 0.1
         });
         const message = response.choices[0].message;
@@ -1171,15 +1278,41 @@ Use the available tools to explore the codebase, understand the feature, and the
         if (message.content && this.options.onThinking) {
           this.options.onThinking(message.content);
         }
-        if (!message.tool_calls || message.tool_calls.length === 0) {
-          return {
-            success: false,
-            error: "Agent finished without completing investigation",
-            toolCalls: this.toolCallCount
-          };
+        let toolCalls = message.tool_calls;
+        if (!toolCalls || toolCalls.length === 0) {
+          if (!shouldForceCompletion) {
+            this.messages.push({
+              role: "user",
+              content: "Complete the investigation now using the current context. Call complete_investigation with best-effort details and empty arrays where needed."
+            });
+            const forced = await this.openai.chat.completions.create({
+              model: "gpt-5.2",
+              messages: this.messages,
+              tools: AGENT_TOOLS.filter((tool) => tool.function.name === "complete_investigation"),
+              tool_choice: "required",
+              temperature: 0.1
+            });
+            const forcedMessage = forced.choices[0].message;
+            this.messages.push(forcedMessage);
+            if (forcedMessage.tool_calls && forcedMessage.tool_calls.length > 0) {
+              toolCalls = forcedMessage.tool_calls;
+            } else {
+              return {
+                success: false,
+                error: forcedMessage.content ? `Agent finished without tool calls: ${forcedMessage.content}` : "Agent finished without completing investigation",
+                toolCalls: this.toolCallCount
+              };
+            }
+          } else {
+            return {
+              success: false,
+              error: message.content ? `Agent finished without tool calls: ${message.content}` : "Agent finished without completing investigation",
+              toolCalls: this.toolCallCount
+            };
+          }
         }
         const toolResults = [];
-        for (const toolCall of message.tool_calls) {
+        for (const toolCall of toolCalls ?? []) {
           const toolName = toolCall.function.name;
           let args;
           try {
@@ -1254,34 +1387,48 @@ function getProjectRoot() {
 
 // src/api/client.ts
 function getConfig() {
-  const baseUrl = process.env.VISIBLE_API_BASE_URL;
+  const baseUrl = (process.env.VISIBLE_API_BASE_URL || "http://localhost:3000/api").replace(
+    /\/$/,
+    ""
+  );
   const apiKey = process.env.VISIBLE_API_KEY;
-  if (!baseUrl) {
-    throw new Error(
-      "Missing VISIBLE_API_BASE_URL environment variable.\nSet it to your Visible API endpoint (e.g., https://api.visible.dev)"
-    );
-  }
-  if (!apiKey) {
+  if (!apiKey && !isLocalApi(baseUrl)) {
     throw new Error(
       "Missing VISIBLE_API_KEY environment variable.\nGet your API key from the Visible dashboard."
     );
   }
-  return { baseUrl: baseUrl.replace(/\/$/, ""), apiKey };
+  return { baseUrl, apiKey };
+}
+function isLocalApi(baseUrl) {
+  return baseUrl.includes("localhost") || baseUrl.includes("127.0.0.1") || baseUrl.includes("0.0.0.0");
+}
+function buildRawChangelog(payload) {
+  const details = payload.context.technicalDetails || [];
+  const lines = [
+    payload.description,
+    details.length > 0 ? "" : void 0,
+    details.length > 0 ? "Technical details:" : void 0,
+    ...details.map((detail) => `- ${detail}`)
+  ].filter((line) => typeof line === "string" && line.length > 0);
+  return lines.join("\n");
 }
 async function postArtifact(payload) {
   const { baseUrl, apiKey } = getConfig();
-  const response = await fetch(`${baseUrl}/api/artifacts`, {
+  const apiBase = baseUrl.endsWith("/api") ? baseUrl : `${baseUrl}/api`;
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (apiKey) {
+    headers.Authorization = `Bearer ${apiKey}`;
+  }
+  const response = await fetch(`${apiBase}/generate`, {
     method: "POST",
     headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${apiKey}`
+      ...headers
     },
     body: JSON.stringify({
       title: payload.title,
-      description: payload.description,
-      source: payload.source,
-      context: payload.context,
-      guidelines: payload.guidelines
+      raw_changelog: buildRawChangelog(payload)
     })
   });
   if (!response.ok) {
@@ -1302,19 +1449,374 @@ async function postArtifact(payload) {
     throw new Error(errorMessage);
   }
   const data = await response.json();
-  if (!data.id || !data.url) {
-    throw new Error("Invalid API response: missing id or url");
+  if (!data.link) {
+    throw new Error("Invalid API response: missing link");
   }
   return {
-    id: data.id,
-    url: data.url
+    link: data.link
+  };
+}
+
+// src/video/types.ts
+var RESOLUTIONS = {
+  "1080p": { width: 1920, height: 1080 },
+  "720p": { width: 1280, height: 720 },
+  "480p": { width: 854, height: 480 },
+  square: { width: 1080, height: 1080 },
+  vertical: { width: 1080, height: 1920 }
+};
+var DEFAULT_THEME = {
+  primaryColor: "#10B981",
+  // Green accent
+  backgroundColor: "#0A0A0B",
+  // Dark background
+  foregroundColor: "#FAFAFA",
+  // Light text
+  accentColor: "#10B981",
+  // Green accent
+  mutedColor: "#A1A1A6",
+  // Secondary text
+  cardColor: "#141415",
+  // Card background
+  borderColor: "#1C1C1E",
+  // Border
+  fontFamily: "Inter, system-ui, sans-serif"
+};
+
+// src/video/storyboard.ts
+var FPS = 30;
+var DURATIONS = {
+  title: 4,
+  overview: 6,
+  walkthrough: 8,
+  code: 6,
+  outro: 4
+};
+function generateStoryboard(artifact, theme = {}, codeSnippets, uiScenes) {
+  const mergedTheme = { ...DEFAULT_THEME, ...theme };
+  const scenes = [];
+  const snippets = codeSnippets || artifact.codeSnippets || [];
+  scenes.push(createTitleScene(artifact));
+  scenes.push(createOverviewScene(artifact));
+  const walkthroughScenes = createWalkthroughScenes(artifact);
+  scenes.push(...walkthroughScenes);
+  if (snippets.length > 0) {
+    const codeHighlightScenes = createCodeHighlightScenes(snippets);
+    scenes.push(...codeHighlightScenes);
+  }
+  if (artifact.context.affectedComponents.length > 0) {
+    scenes.push(createCodeScene(artifact));
+  }
+  scenes.push(createOutroScene(artifact));
+  const totalDurationInFrames = scenes.reduce((sum, s) => sum + s.durationInFrames, 0);
+  const enhancedArtifact = {
+    ...artifact,
+    codeSnippets: snippets
+  };
+  return {
+    title: artifact.title,
+    totalDurationInFrames,
+    scenes,
+    artifact: enhancedArtifact,
+    theme: mergedTheme
+  };
+}
+function createTitleScene(artifact) {
+  return {
+    id: "title",
+    type: "title",
+    title: artifact.title,
+    content: artifact.description,
+    durationInFrames: DURATIONS.title * FPS,
+    props: {
+      source: artifact.source,
+      keywords: artifact.context.keywords.slice(0, 5)
+    }
+  };
+}
+function createOverviewScene(artifact) {
+  return {
+    id: "overview",
+    type: "overview",
+    title: "What Changed",
+    content: artifact.context.summary,
+    durationInFrames: DURATIONS.overview * FPS,
+    props: {
+      breakingChanges: artifact.context.breakingChanges,
+      componentCount: artifact.context.affectedComponents.length
+    }
+  };
+}
+function createWalkthroughScenes(artifact) {
+  const scenes = [];
+  const details = artifact.context.technicalDetails;
+  const chunks = chunkArray(details, 3);
+  chunks.forEach((chunk, index) => {
+    scenes.push({
+      id: `walkthrough-${index + 1}`,
+      type: "walkthrough",
+      title: index === 0 ? "How It Works" : `Details (${index + 1})`,
+      content: chunk.join("\n\n"),
+      durationInFrames: DURATIONS.walkthrough * FPS,
+      props: {
+        steps: chunk,
+        stepIndex: index
+      }
+    });
+  });
+  if (scenes.length === 0) {
+    scenes.push({
+      id: "walkthrough-1",
+      type: "walkthrough",
+      title: "How It Works",
+      content: artifact.context.summary,
+      durationInFrames: DURATIONS.walkthrough * FPS,
+      props: {
+        steps: [artifact.context.summary],
+        stepIndex: 0
+      }
+    });
+  }
+  return scenes;
+}
+function createCodeHighlightScenes(snippets) {
+  const scenes = [];
+  const displaySnippets = snippets.slice(0, 6);
+  const chunkedSnippets = chunkArray(displaySnippets, 2);
+  chunkedSnippets.forEach((chunk, index) => {
+    scenes.push({
+      id: `code-highlight-${index + 1}`,
+      type: "code-highlight",
+      title: index === 0 ? "Code Changes" : `More Changes (${index + 1})`,
+      content: chunk.map((s) => s.description || s.file).join(", "),
+      durationInFrames: DURATIONS.code * FPS,
+      props: {
+        snippets: chunk.map((s) => ({
+          file: s.file,
+          code: s.code,
+          language: s.language || detectLanguage(s.file),
+          description: s.description,
+          changeType: s.changeType,
+          startLine: s.startLine
+        }))
+      }
+    });
+  });
+  return scenes;
+}
+function detectLanguage(filename) {
+  const ext = filename.split(".").pop()?.toLowerCase() || "";
+  const langMap = {
+    ts: "typescript",
+    tsx: "typescript",
+    js: "javascript",
+    jsx: "javascript",
+    vue: "vue",
+    py: "python",
+    rb: "ruby",
+    go: "go",
+    rs: "rust",
+    java: "java",
+    css: "css",
+    scss: "scss",
+    html: "html",
+    json: "json",
+    md: "markdown",
+    yaml: "yaml",
+    yml: "yaml"
+  };
+  return langMap[ext] || "text";
+}
+function createCodeScene(artifact) {
+  const components = artifact.context.affectedComponents;
+  const displayComponents = components.slice(0, 8);
+  return {
+    id: "code",
+    type: "code",
+    title: "Files Changed",
+    content: `${components.length} file${components.length !== 1 ? "s" : ""} affected`,
+    durationInFrames: DURATIONS.code * FPS,
+    props: {
+      files: displayComponents,
+      totalFiles: components.length,
+      hasMore: components.length > 8
+    }
+  };
+}
+function createOutroScene(artifact) {
+  const cta = artifact.guidelines[0] || "Learn more about this feature";
+  return {
+    id: "outro",
+    type: "outro",
+    title: "Summary",
+    content: cta,
+    durationInFrames: DURATIONS.outro * FPS,
+    props: {
+      guidelines: artifact.guidelines.slice(0, 3),
+      source: artifact.source
+    }
   };
 }
+function chunkArray(array, size) {
+  const chunks = [];
+  for (let i = 0; i < array.length; i += size) {
+    chunks.push(array.slice(i, i + size));
+  }
+  return chunks;
+}
+function getVideoDurationSeconds(storyboard) {
+  return storyboard.totalDurationInFrames / FPS;
+}
+function formatDuration(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+var __dirname$1 = dirname(fileURLToPath(import.meta.url));
+async function generateVideo(input) {
+  const startTime = Date.now();
+  try {
+    const { artifact, codeSnippets, config, theme = {}, verbose } = input;
+    const mergedTheme = { ...DEFAULT_THEME, ...theme };
+    const storyboard = generateStoryboard(artifact, mergedTheme, codeSnippets);
+    if (verbose) {
+      console.log(`
+Storyboard generated:`);
+      console.log(`  - Scenes: ${storyboard.scenes.length}`);
+      console.log(`  - Duration: ${formatDuration(getVideoDurationSeconds(storyboard))}`);
+    }
+    const outputDir = resolve(config.outputDir);
+    if (!existsSync(outputDir)) {
+      mkdirSync(outputDir, { recursive: true });
+    }
+    const storyboardPath = join(outputDir, "storyboard.json");
+    writeFileSync(storyboardPath, JSON.stringify(storyboard, null, 2));
+    if (verbose) {
+      console.log(`  - Storyboard saved: ${storyboardPath}`);
+    }
+    const propsPath = join(outputDir, "video-props.json");
+    const videoProps = {
+      storyboard,
+      resolution: config.resolution || RESOLUTIONS["1080p"],
+      fps: config.fps || 30
+    };
+    writeFileSync(propsPath, JSON.stringify(videoProps, null, 2));
+    if (verbose) {
+      console.log(`  - Props saved: ${propsPath}`);
+    }
+    const filename = config.filename || "video";
+    const format = config.format || "mp4";
+    const videoPath = join(outputDir, `${filename}.${format}`);
+    const renderResult = await tryRenderWithRemotion({
+      storyboard,
+      outputPath: videoPath,
+      config,
+      verbose
+    });
+    if (renderResult.success) {
+      return {
+        success: true,
+        videoPath: renderResult.videoPath,
+        posterPath: renderResult.posterPath,
+        durationMs: Date.now() - startTime
+      };
+    }
+    const durationMs = Date.now() - startTime;
+    return {
+      success: true,
+      videoPath: propsPath,
+      durationMs
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : String(error),
+      durationMs: Date.now() - startTime
+    };
+  }
+}
+async function tryRenderWithRemotion(options) {
+  const { storyboard, outputPath, config, verbose } = options;
+  const remotionAvailable = await isRemotionAvailable();
+  if (!remotionAvailable) {
+    if (verbose) {
+      console.log("\n  \u26A0\uFE0F  Remotion dependencies not installed.");
+      console.log("  To enable automatic video rendering, install Remotion in the CLI:");
+      console.log("");
+      console.log("    cd $(npm root -g)/@makeitvisible/cli && npm install");
+      console.log("");
+      console.log("  Or install locally:");
+      console.log("    npm install @remotion/bundler @remotion/renderer @remotion/cli remotion react react-dom");
+      console.log("");
+      console.log("  For now, you can render manually with the generated video-props.json");
+    }
+    return { success: false, error: "Remotion not available" };
+  }
+  try {
+    const renderPath = pathToFileURL(join(__dirname$1, "remotion", "render.js")).href;
+    const { renderVideo } = await import(
+      /* @vite-ignore */
+      renderPath
+    );
+    const resolution = config.resolution || RESOLUTIONS["1080p"];
+    let resolutionKey = "1080p";
+    if (resolution.width === RESOLUTIONS["720p"].width) {
+      resolutionKey = "720p";
+    } else if (resolution.width === RESOLUTIONS.square.width && resolution.height === RESOLUTIONS.square.height) {
+      resolutionKey = "square";
+    } else if (resolution.width === RESOLUTIONS.vertical.width && resolution.height === RESOLUTIONS.vertical.height) {
+      resolutionKey = "vertical";
+    }
+    if (verbose) {
+      console.log(`
+  Rendering video with Remotion...`);
+      console.log(`  Resolution: ${resolution.width}x${resolution.height}`);
+    }
+    const result = await renderVideo({
+      storyboard,
+      outputPath,
+      resolution: resolutionKey,
+      codec: "h264",
+      verbose,
+      onProgress: (progress) => {
+        if (verbose) {
+          process.stdout.write(`\r  Rendering: ${Math.round(progress * 100)}%`);
+        }
+      }
+    });
+    if (verbose && result.success) {
+      console.log("\n");
+    }
+    return result;
+  } catch (error) {
+    if (verbose) {
+      console.log(`
+  Remotion render failed: ${error instanceof Error ? error.message : error}`);
+    }
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+async function isRemotionAvailable() {
+  try {
+    await import('@remotion/bundler');
+    await import('@remotion/renderer');
+    await import('remotion');
+    return true;
+  } catch (error) {
+    if (process.env.DEBUG_REMOTION) {
+      console.error("Remotion availability check failed:", error);
+    }
+    return false;
+  }
+}
 
 // src/commands/analyze.ts
 var analyzeCommand = new Command("analyze").description("Analyze code changes and create artifacts").addCommand(createDiffCommand()).addCommand(createPRCommand()).addCommand(createPromptCommand());
 function createDiffCommand() {
-  return new Command("diff").description("Analyze git diff between commits").argument("[range]", "Git commit range (e.g., HEAD~1..HEAD)", "HEAD~1..HEAD").option("--no-post", "Skip posting artifact to API").action(async (range, options) => {
+  return new Command("diff").description("Analyze git diff between commits").argument("[range]", "Git commit range (e.g., HEAD~1..HEAD)", "HEAD~1..HEAD").option("--no-post", "Skip posting artifact to API").option("--video [output]", "Generate video from artifact (optional: output directory)").option("--video-format <format>", "Video format: mp4 or webm", "mp4").option("--video-resolution <res>", "Resolution: 1080p, 720p, 480p, square, vertical", "1080p").action(async (range, options) => {
     const spinner = ora("Analyzing diff...").start();
     try {
       const result = await analyzeDiff(range);
@@ -1325,11 +1827,22 @@ function createDiffCommand() {
       console.log(chalk.cyan("Description:"), result.description);
       console.log(chalk.cyan("Files changed:"), result.context.affectedComponents.length);
       console.log(chalk.cyan("Breaking changes:"), result.context.breakingChanges ? "Yes" : "No");
+      if (options.video !== void 0) {
+        const snippets = (result.codeSnippets || []).map((s) => ({
+          file: s.file,
+          code: s.code,
+          startLine: s.startLine,
+          language: s.language,
+          description: s.description,
+          changeType: s.changeType
+        }));
+        await handleVideoGeneration(result, options, spinner, snippets);
+      }
       if (options.post) {
         spinner.start("Posting artifact to Visible API...");
         const response = await postArtifact(result);
         spinner.succeed("Artifact posted successfully");
-        console.log(chalk.green("\n\u2713 Artifact created:"), response.url);
+        console.log(chalk.green("\n\u2713 Artifact created:"), response.link);
       } else {
         console.log(chalk.yellow("\nSkipped posting to API (--no-post)"));
         console.log(chalk.dim("Artifact payload:"));
@@ -1343,7 +1856,7 @@ function createDiffCommand() {
   });
 }
 function createPRCommand() {
-  return new Command("pr").description("Analyze a pull request").option("--url <url>", "Pull request URL (e.g., https://github.com/owner/repo/pull/123)").option("--number <number>", "Pull request number (uses current repo)").option("--no-post", "Skip posting artifact to API").action(async (options) => {
+  return new Command("pr").description("Analyze a pull request").option("--url <url>", "Pull request URL (e.g., https://github.com/owner/repo/pull/123)").option("--number <number>", "Pull request number (uses current repo)").option("--no-post", "Skip posting artifact to API").option("--video [output]", "Generate video from artifact (optional: output directory)").option("--video-format <format>", "Video format: mp4 or webm", "mp4").option("--video-resolution <res>", "Resolution: 1080p, 720p, 480p, square, vertical", "1080p").action(async (options) => {
     const spinner = ora("Analyzing pull request...").start();
     try {
       if (!options.url && !options.number) {
@@ -1362,11 +1875,22 @@ function createPRCommand() {
       console.log(chalk.cyan("Description:"), result.description);
       console.log(chalk.cyan("Files changed:"), result.context.affectedComponents.length);
       console.log(chalk.cyan("Breaking changes:"), result.context.breakingChanges ? "Yes" : "No");
+      if (options.video !== void 0) {
+        const snippets = (result.codeSnippets || []).map((s) => ({
+          file: s.file,
+          code: s.code,
+          startLine: s.startLine,
+          language: s.language,
+          description: s.description,
+          changeType: s.changeType
+        }));
+        await handleVideoGeneration(result, options, spinner, snippets);
+      }
       if (options.post) {
         spinner.start("Posting artifact to Visible API...");
         const response = await postArtifact(result);
         spinner.succeed("Artifact posted successfully");
-        console.log(chalk.green("\n\u2713 Artifact created:"), response.url);
+        console.log(chalk.green("\n\u2713 Artifact created:"), response.link);
       } else {
         console.log(chalk.yellow("\nSkipped posting to API (--no-post)"));
         console.log(chalk.dim("Artifact payload:"));
@@ -1380,10 +1904,11 @@ function createPRCommand() {
   });
 }
 function createPromptCommand() {
-  return new Command("prompt").description("Explore codebase with an AI agent").argument("<query>", "Natural language prompt describing what to analyze").option("--no-post", "Skip posting artifact to API").option("-v, --verbose", "Show detailed agent activity").action(async (query, options) => {
-    console.log(chalk.bold("\n\u{1F50D} The Detective is investigating...\n"));
+  return new Command("prompt").description("Explore codebase with an AI agent").argument("<query>", "Natural language prompt describing what to analyze").option("--no-post", "Skip posting artifact to API").option("-v, --verbose", "Show detailed agent activity").option("--video [output]", "Generate video from artifact (optional: output directory)").option("--video-format <format>", "Video format: mp4 or webm", "mp4").option("--video-resolution <res>", "Resolution: 1080p, 720p, 480p, square, vertical", "1080p").action(async (query, options) => {
+    console.log(chalk.bold("\n\u{1F50D} The Detective is investigating... (hot)\n"));
     console.log(chalk.dim(`Query: "${query}"
 `));
+    const asArray = (value) => Array.isArray(value) ? value : [];
     let spinner = null;
     let toolCount = 0;
     try {
@@ -1451,53 +1976,63 @@ function createPromptCommand() {
           console.log(chalk.dim(`    ${ep.description}`));
         }
       }
-      if (investigation.dataFlow && investigation.dataFlow.length > 0) {
+      if (asArray(investigation.dataFlow).length > 0) {
         console.log(chalk.cyan("\nData Flow:"));
-        for (const step of investigation.dataFlow) {
+        for (const step of asArray(investigation.dataFlow)) {
           console.log(chalk.dim(`  ${step.step}. ${step.description}`));
-          if (step.files.length > 0) {
-            console.log(chalk.dim(`     Files: ${step.files.join(", ")}`));
+          const stepFiles = asArray(step.files);
+          if (stepFiles.length > 0) {
+            console.log(chalk.dim(`     Files: ${stepFiles.join(", ")}`));
           }
         }
       }
-      if (investigation.keyFiles && investigation.keyFiles.length > 0) {
+      if (asArray(investigation.keyFiles).length > 0) {
         console.log(chalk.cyan("\nKey Files:"));
-        for (const file of investigation.keyFiles) {
+        for (const file of asArray(investigation.keyFiles)) {
           console.log(chalk.dim(`  \u2022 ${file.path}`));
           console.log(chalk.dim(`    Purpose: ${file.purpose}`));
-          if (file.keyExports.length > 0) {
-            console.log(chalk.dim(`    Exports: ${file.keyExports.join(", ")}`));
+          const keyExports = asArray(file.keyExports);
+          if (keyExports.length > 0) {
+            console.log(chalk.dim(`    Exports: ${keyExports.join(", ")}`));
           }
         }
       }
-      if (investigation.dataStructures && investigation.dataStructures.length > 0) {
+      if (asArray(investigation.dataStructures).length > 0) {
         console.log(chalk.cyan("\nData Structures:"));
-        for (const ds of investigation.dataStructures) {
+        for (const ds of asArray(investigation.dataStructures)) {
           console.log(chalk.dim(`  \u2022 ${ds.name} (${ds.file})`));
           console.log(chalk.dim(`    ${ds.description}`));
-          if (ds.fields.length > 0) {
-            console.log(chalk.dim(`    Fields: ${ds.fields.slice(0, 5).join(", ")}${ds.fields.length > 5 ? "..." : ""}`));
+          const fields = asArray(ds.fields);
+          if (fields.length > 0) {
+            console.log(
+              chalk.dim(
+                `    Fields: ${fields.slice(0, 5).join(", ")}${fields.length > 5 ? "..." : ""}`
+              )
+            );
           }
         }
       }
-      if (investigation.usageExamples && investigation.usageExamples.length > 0) {
+      if (asArray(investigation.usageExamples).length > 0) {
         console.log(chalk.cyan("\nUsage Examples:"));
-        for (const example of investigation.usageExamples) {
+        for (const example of asArray(investigation.usageExamples)) {
           console.log(chalk.dim(`  \u2022 ${example.description} (${example.file})`));
         }
       }
-      if (investigation.technicalNotes && investigation.technicalNotes.length > 0) {
+      if (asArray(investigation.technicalNotes).length > 0) {
         console.log(chalk.cyan("\nTechnical Notes:"));
-        for (const note of investigation.technicalNotes) {
+        for (const note of asArray(investigation.technicalNotes)) {
           console.log(chalk.dim(`  \u2022 ${note}`));
         }
       }
-      const artifact = investigationToArtifact(query, investigation);
+      const { artifact, codeSnippets } = investigationToArtifact(query, investigation);
+      if (options.video !== void 0) {
+        await handleVideoGeneration(artifact, options, null, codeSnippets);
+      }
       if (options.post) {
         const postSpinner = ora("Posting artifact to Visible API...").start();
         const response = await postArtifact(artifact);
         postSpinner.succeed("Artifact posted successfully");
-        console.log(chalk.green("\n\u2713 Artifact created:"), response.url);
+        console.log(chalk.green("\n\u2713 Artifact created:"), response.link);
       } else {
         console.log(chalk.yellow("\nSkipped posting to API (--no-post)"));
         console.log(chalk.dim("\nArtifact payload:"));
@@ -1511,6 +2046,7 @@ function createPromptCommand() {
   });
 }
 function investigationToArtifact(query, investigation) {
+  const asArray = (value) => Array.isArray(value) ? value : [];
   const source = {
     type: "code-section",
     reference: query
@@ -1525,29 +2061,19 @@ function investigationToArtifact(query, investigation) {
     technicalDetails.push(...investigation.technicalNotes);
   }
   const affectedComponents = [];
-  if (investigation.keyFiles) {
-    affectedComponents.push(...investigation.keyFiles.map((f) => f.path));
-  }
-  if (investigation.entryPoints) {
-    affectedComponents.push(...investigation.entryPoints.map((e) => e.file));
-  }
-  if (investigation.dataStructures) {
-    affectedComponents.push(...investigation.dataStructures.map((d) => d.file));
-  }
-  if (investigation.usageExamples) {
-    affectedComponents.push(...investigation.usageExamples.map((e) => e.file));
-  }
+  affectedComponents.push(...asArray(investigation.keyFiles).map((f) => f.path));
+  affectedComponents.push(...asArray(investigation.entryPoints).map((e) => e.file));
+  affectedComponents.push(...asArray(investigation.dataStructures).map((d) => d.file));
+  affectedComponents.push(...asArray(investigation.usageExamples).map((e) => e.file));
   const uniqueComponents = [...new Set(affectedComponents)];
   const keywords = [];
-  if (investigation.dataStructures) {
-    keywords.push(...investigation.dataStructures.map((d) => d.name.toLowerCase()));
-  }
-  if (investigation.keyFiles) {
-    keywords.push(...investigation.keyFiles.flatMap((f) => f.keyExports.map((e) => e.toLowerCase())));
-  }
-  if (investigation.relatedFeatures) {
-    keywords.push(...investigation.relatedFeatures.map((f) => f.toLowerCase()));
-  }
+  keywords.push(...asArray(investigation.dataStructures).map((d) => d.name.toLowerCase()));
+  keywords.push(
+    ...asArray(investigation.keyFiles).flatMap(
+      (f) => asArray(f.keyExports).map((e) => e.toLowerCase())
+    )
+  );
+  keywords.push(...asArray(investigation.relatedFeatures).map((f) => f.toLowerCase()));
   const uniqueKeywords = [...new Set(keywords)].slice(0, 20);
   const context = {
     summary: investigation.summary || "",
@@ -1559,25 +2085,113 @@ function investigationToArtifact(query, investigation) {
   const guidelines = [
     "Explain the feature from the user's perspective first."
   ];
-  if (investigation.entryPoints && investigation.entryPoints.length > 0) {
+  if (asArray(investigation.entryPoints).length > 0) {
     guidelines.push("Show how users trigger/access this feature.");
   }
-  if (investigation.dataFlow && investigation.dataFlow.length > 0) {
+  if (asArray(investigation.dataFlow).length > 0) {
     guidelines.push("Walk through the data flow step by step.");
   }
-  if (investigation.dataStructures && investigation.dataStructures.length > 0) {
+  if (asArray(investigation.dataStructures).length > 0) {
     guidelines.push("Define the key data structures and their fields.");
   }
-  if (investigation.usageExamples && investigation.usageExamples.length > 0) {
+  if (asArray(investigation.usageExamples).length > 0) {
     guidelines.push("Include code examples showing real usage.");
   }
-  return {
+  const codeSnippets = [];
+  for (const example of asArray(investigation.usageExamples)) {
+    if (example.codeSnippet) {
+      codeSnippets.push({
+        file: example.file,
+        code: example.codeSnippet,
+        description: example.description,
+        changeType: "context"
+      });
+    }
+  }
+  for (const ds of asArray(investigation.dataStructures)) {
+    if (ds.fields && ds.fields.length > 0) {
+      const typeCode = `interface ${ds.name} {
+  ${ds.fields.slice(0, 8).join("\n  ")}
+}`;
+      codeSnippets.push({
+        file: ds.file,
+        code: typeCode,
+        description: ds.description,
+        changeType: "context"
+      });
+    }
+  }
+  const artifact = {
     title: investigation.title || `Feature: ${query}`,
     description: investigation.summary || `Investigation of: ${query}`,
     source,
     context,
     guidelines
   };
+  return { artifact, codeSnippets };
+}
+async function handleVideoGeneration(artifact, options, existingSpinner, codeSnippets) {
+  const spinner = existingSpinner || ora();
+  spinner.start("Generating video...");
+  const outputDir = typeof options.video === "string" ? options.video : process.cwd();
+  const resolutionKey = options.videoResolution || "1080p";
+  const resolution = RESOLUTIONS[resolutionKey] || RESOLUTIONS["1080p"];
+  const format = options.videoFormat === "webm" ? "webm" : "mp4";
+  const config = {
+    outputDir,
+    filename: sanitizeFilename(artifact.title),
+    format,
+    resolution,
+    fps: 30,
+    generatePoster: true
+  };
+  const storyboard = generateStoryboard(artifact, {}, codeSnippets);
+  const duration = getVideoDurationSeconds(storyboard);
+  const snippetCount = codeSnippets?.length || 0;
+  spinner.text = `Generating video (${storyboard.scenes.length} scenes, ${snippetCount} code snippets, ${formatDuration(duration)})...`;
+  const result = await generateVideo({
+    artifact,
+    codeSnippets,
+    config,
+    verbose: false
+  });
+  const isActualVideo = result.videoPath?.endsWith(".mp4") || result.videoPath?.endsWith(".webm");
+  if (result.success && isActualVideo) {
+    spinner.succeed("Video rendered successfully");
+    console.log(chalk.bold("\n\u{1F3AC} Video Output:"));
+    console.log(chalk.dim("\u2500".repeat(50)));
+    console.log(chalk.cyan("Scenes:"), storyboard.scenes.length);
+    console.log(chalk.cyan("Duration:"), formatDuration(duration));
+    console.log(chalk.cyan("Resolution:"), `${resolution.width}x${resolution.height}`);
+    console.log(chalk.cyan("Output:"), result.videoPath);
+    if (result.posterPath) {
+      console.log(chalk.cyan("Poster:"), result.posterPath);
+    }
+    console.log(chalk.dim(`
+Render time: ${result.durationMs}ms`));
+  } else if (result.success) {
+    spinner.warn("Storyboard saved (Remotion not installed for rendering)");
+    console.log(chalk.bold("\n\u{1F4CB} Storyboard Output:"));
+    console.log(chalk.dim("\u2500".repeat(50)));
+    console.log(chalk.cyan("Scenes:"), storyboard.scenes.length);
+    console.log(chalk.cyan("Duration:"), formatDuration(duration));
+    console.log(chalk.cyan("Resolution:"), `${resolution.width}x${resolution.height}`);
+    console.log(chalk.cyan("Props file:"), result.videoPath);
+    console.log(chalk.yellow("\n\u26A0\uFE0F  To render the actual video, install Remotion:"));
+    console.log(chalk.dim(""));
+    console.log(chalk.dim("  npm install @remotion/bundler @remotion/renderer @remotion/cli remotion react react-dom"));
+    console.log(chalk.dim(""));
+    console.log(chalk.yellow("Then run the command again, or render manually:"));
+    console.log(chalk.dim(`  # From the CLI package directory:`));
+    console.log(chalk.dim(`  cd $(npm root -g)/@makeitvisible/cli`));
+    console.log(chalk.dim(`  npx remotion render src/video/remotion/index.tsx Main ${outputDir}/video.mp4 --props=${result.videoPath}`));
+  } else {
+    spinner.fail("Video generation failed");
+    console.log(chalk.red("\nError:"), result.error);
+  }
+}
+function sanitizeFilename(name) {
+  return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 50);
 }
 
 // src/bin/index.ts