agentreel 0.4.1 → 0.4.3

package/bin/agentreel.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 import { execFileSync, spawn } from "node:child_process";
-import { readFileSync, statSync, existsSync, mkdirSync, copyFileSync } from "node:fs";
+import { readFileSync, writeFileSync, statSync, existsSync, mkdirSync, copyFileSync } from "node:fs";
 import { join, dirname, resolve } from "node:path";
 import { tmpdir } from "node:os";
 import { fileURLToPath } from "node:url";
@@ -282,6 +282,101 @@ Labels: 1-2 words each, specific to this app (not generic). Overlays: short punc
   return highlights;
 }
 
+// ── SVG Fallback ───────────────────────────────────────────
+
+function escSvg(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+function renderSVG(props, output) {
+  const TERM_BG = "#282a36";
+  const TITLE_BAR = "#1e1f29";
+  const ACCENT = "#50fa7b";
+  const DIM = "#6272a4";
+  const WHITE = "#f8f8f2";
+  const FONT = '"SF Mono", "Fira Code", "Cascadia Code", monospace';
+  const SANS = '-apple-system, "SF Pro Display", system-ui, sans-serif';
+
+  const W = props.mode === "demo" ? 1200 : 700;
+  const PAD = 32;
+  const LINE_H = 22;
+  const TERM_PAD = 16;
+  const TITLE_BAR_H = 36;
+  const CHAPTER_GAP = 28;
+  const LABEL_H = 24;
+  const FONT_SIZE = 13;
+
+  let y = PAD;
+  let blocks = "";
+
+  // Title
+  blocks += `<text x="${W / 2}" y="${y + 28}" font-family="${escSvg(SANS)}" font-size="32" font-weight="800" fill="${WHITE}" text-anchor="middle">${escSvg(props.title)}</text>`;
+  y += 40;
+  if (props.subtitle) {
+    blocks += `<text x="${W / 2}" y="${y + 18}" font-family="${escSvg(SANS)}" font-size="16" fill="${DIM}" text-anchor="middle">${escSvg(props.subtitle)}</text>`;
+    y += 28;
+  }
+  y += 16;
+
+  for (const hl of props.highlights) {
+    if (!hl.lines || hl.lines.length === 0) continue;
+
+    // Chapter label
+    blocks += `<text x="${PAD}" y="${y + 14}" font-family="${escSvg(FONT)}" font-size="11" fill="${ACCENT}" letter-spacing="2" text-transform="uppercase">${escSvg(hl.label.toUpperCase())}</text>`;
+    y += LABEL_H;
+
+    const bodyH = TERM_PAD * 2 + hl.lines.length * LINE_H;
+    const termH = TITLE_BAR_H + bodyH;
+
+    // Terminal window
+    blocks += `<rect x="${PAD}" y="${y}" width="${W - PAD * 2}" height="${termH}" rx="8" fill="${TITLE_BAR}"/>`;
+    // Traffic lights
+    blocks += `<circle cx="${PAD + 16}" cy="${y + TITLE_BAR_H / 2}" r="5" fill="#ff5555"/>`;
+    blocks += `<circle cx="${PAD + 34}" cy="${y + TITLE_BAR_H / 2}" r="5" fill="#f1fa8c"/>`;
+    blocks += `<circle cx="${PAD + 52}" cy="${y + TITLE_BAR_H / 2}" r="5" fill="#50fa7b"/>`;
+    // Body
+    blocks += `<rect x="${PAD}" y="${y + TITLE_BAR_H}" width="${W - PAD * 2}" height="${bodyH}" fill="${TERM_BG}"/>`;
+
+    let lineY = y + TITLE_BAR_H + TERM_PAD;
+    for (const line of hl.lines) {
+      const color = line.dim ? DIM : line.color || WHITE;
+      const weight = line.bold ? "700" : "400";
+      const prefix = line.isPrompt ? `<tspan fill="${ACCENT}">$ </tspan>` : "";
+      const text = line.isPrompt ? line.text.replace(/^\$\s*/, "") : line.text;
+      blocks += `<text x="${PAD + TERM_PAD}" y="${lineY + FONT_SIZE}" font-family="${escSvg(FONT)}" font-size="${FONT_SIZE}" font-weight="${weight}" fill="${color}">${prefix}${escSvg(text)}</text>`;
+      lineY += LINE_H;
+    }
+
+    y += termH + CHAPTER_GAP;
+  }
+
+  // End text
+  if (props.endUrl) {
+    blocks += `<text x="${W / 2}" y="${y + 16}" font-family="${escSvg(SANS)}" font-size="14" fill="${DIM}" text-anchor="middle">${escSvg(props.endUrl)}</text>`;
+    y += 28;
+  }
+  y += PAD;
+
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${y}" viewBox="0 0 ${W} ${y}">
+<rect width="${W}" height="${y}" fill="#0f0f1a"/>
+${blocks}
+</svg>`;
+
+  writeFileSync(output, svg);
+  console.error(`\nDone: ${output} (SVG fallback)`);
+}
+
+async function renderWithFallback(props, output, musicPath) {
+  try {
+    await renderVideo(props, output, musicPath);
+  } catch (e) {
+    console.error(`  Video rendering failed: ${e.message}`);
+    const svgOutput = output.replace(/\.[^.]+$/, ".svg");
+    console.error(`  Falling back to SVG: ${svgOutput}`);
+    renderSVG(props, svgOutput);
+  }
+}
+
 // ── Render ──────────────────────────────────────────────────
 
 async function renderVideo(props, output, musicPath) {
@@ -566,7 +661,7 @@ async function main() {
         const highlights = buildBrowserHighlights(allClicks, videoPath, demoGuidelines, demoGuidelines);
 
         console.error("Step 3/3: Rendering video...");
-        await renderVideo({
+        await renderWithFallback({
           title: videoTitle,
           subtitle: description,
           highlights,
@@ -593,7 +688,7 @@ async function main() {
       console.error(`  ${highlights.length} highlights extracted`);
 
       console.error("Step 3/3: Rendering video...");
-      await renderVideo({
+      await renderWithFallback({
         title: videoTitle,
         subtitle: description,
         highlights,
@@ -622,7 +717,7 @@ async function main() {
     console.error(`  ${highlights.length} highlights extracted`);
 
     console.error("Step 3/3: Rendering video...");
-    await renderVideo({
+    await renderWithFallback({
       title: videoTitle,
       highlights,
       endText: flags.cmd,
@@ -655,7 +750,7 @@ async function main() {
     const highlights = buildBrowserHighlights(allClicks, videoPath, task, flags.guidelines);
 
     console.error("Step 3/3: Rendering video...");
-    await renderVideo({
+    await renderWithFallback({
       title: videoTitle,
       highlights,
       endText: flags.url,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentreel",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Turn your web apps and CLIs into viral clips",
   "bin": {
     "agentreel": "./bin/agentreel.mjs"

package/scripts/cli_demo.py

@@ -63,7 +63,7 @@ Return ONLY the JSON array, no markdown, no explanation."""
         [claude, "-p", prompt, "--output-format", "text"],
         capture_output=True,
         text=True,
-        timeout=120,
+        timeout=300,
     )
 
     if result.returncode != 0:
@@ -213,57 +213,67 @@ def extract_highlights(cast_path: str, context: str, guidelines: str = "") -> li
                 continue
 
     raw_output = "".join(lines_output)
-    # Clean ANSI for Claude to read, but keep the raw for display
+    # Clean ANSI escape codes
     clean = re.sub(r'\x1b\[[0-9;]*[a-zA-Z]', '', raw_output)
+    # Strip other common escape sequences (title sets, OSC, etc.)
+    clean = re.sub(r'\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)', '', clean)
+    # Collapse carriage-return overwrites (spinners, progress bars).
+    # \r means "go back to line start" — keep only the final version of each line.
+    collapsed_lines = []
+    for line in clean.split('\n'):
+        parts = line.split('\r')
+        final = parts[-1].strip() if parts else ""
+        if final:
+            # Deduplicate consecutive identical lines (spinner frames)
+            if not collapsed_lines or final != collapsed_lines[-1]:
+                collapsed_lines.append(final)
+    clean = '\n'.join(collapsed_lines)
 
     guidelines_block = f"\n\nAdditional guidelines: {guidelines}" if guidelines else ""
 
     # Demo mode: more chapters, more lines, show full flows
     is_demo = "demo" in guidelines.lower() if guidelines else False
 
-    if is_demo:
-        prompt = f"""You are creating chapter-based highlights for a demo walkthrough video. Here is the full terminal output:
+    # If terminal output is empty (e.g. tmux sessions, interactive tools),
+    # tell Claude to generate representative highlights from context alone
+    output_block = f"\nTerminal output:\n---\n{clean[:6000 if is_demo else 3000]}\n---" if clean.strip() else "\n(No terminal output captured — generate representative highlights from the context below.)"
 
----
-{clean[:6000]}
----
+    if is_demo:
+        prompt = f"""You are creating chapter-based highlights for a demo walkthrough video.
+{output_block}
 
 Context: {context}{guidelines_block}
 
-Create 4-6 chapters that walk through the full demo. Each chapter shows a complete command and its output. For each chapter, return:
-- "label": chapter name (1-3 words) like "Setup", "Run Command", "View Results", "Verify"
-- "lines": array of objects, each with "text" (string), and optionally "color" (hex), "bold" (bool), "dim" (bool), "isPrompt" (bool if it's a shell command)
+Create 4-6 chapters that walk through the demo. For each chapter, return:
+- "label": chapter name (1-3 words)
+- "lines": array of objects with "text" (string), optionally "color" (hex), "bold" (bool), "dim" (bool), "isPrompt" (bool)
 
-Each chapter should have 12-20 lines. Show the COMPLETE command and output for each step.
-Include the prompt line (isPrompt: true) followed by the actual output.
-Use these colors: green="#50fa7b", yellow="#f1fa8c", purple="#bd93f9", red="#ff5555", dim="#6272a4", white="#f8f8f2"
+Each chapter: 12-20 lines. Include the prompt (isPrompt: true) and realistic output.
+Colors: green="#50fa7b", yellow="#f1fa8c", purple="#bd93f9", red="#ff5555", dim="#6272a4", white="#f8f8f2"
 
 Return ONLY a JSON array. No markdown fences."""
     else:
-        prompt = f"""You are creating a highlights reel for a CLI tool demo video. Here is the full terminal output:
-
----
-{clean[:3000]}
----
+        prompt = f"""You are creating a highlights reel for a CLI demo video.
+{output_block}
 
 Context: {context}{guidelines_block}
 
-Pick 3-4 highlight moments that would look impressive in a short video. For each highlight, return:
-- "label": short label (1-2 words) like "Initialize", "Configure", "Run", "Results"
-- "lines": array of objects, each with "text" (string), and optionally "color" (hex), "bold" (bool), "dim" (bool), "isPrompt" (bool if it's a shell command)
-- "zoomLine": (optional) index of the most impressive line to zoom into
+Pick 3-4 highlight moments. For each, return:
+- "label": 1-2 word label
+- "lines": array of objects with "text", optionally "color" (hex), "bold", "dim", "isPrompt"
+- "zoomLine": (optional) index of the most impressive line
 
-Each highlight should have 4-8 lines max. Keep the text concise.
-Use these colors: green="#50fa7b", yellow="#f1fa8c", purple="#bd93f9", red="#ff5555", dim="#6272a4", white="#f8f8f2"
+Each highlight: 4-8 lines max.
+Colors: green="#50fa7b", yellow="#f1fa8c", purple="#bd93f9", red="#ff5555", dim="#6272a4", white="#f8f8f2"
 
-Return ONLY a JSON array of highlights. No markdown fences."""
+Return ONLY a JSON array. No markdown fences."""
 
     claude = find_claude()
     result = subprocess.run(
         [claude, "-p", prompt, "--output-format", "text"],
         capture_output=True,
         text=True,
-        timeout=120,
+        timeout=300,
     )
 
     text = result.stdout.strip()