agentreel 0.3.2 → 0.3.4

package/bin/agentreel.mjs

@@ -30,6 +30,7 @@ function parseArgs() {
     else if (arg === "--output" || arg === "-o") flags.output = args[++i];
     else if (arg === "--music") flags.music = args[++i];
     else if (arg === "--auth" || arg === "-a") flags.auth = args[++i];
+    else if (arg === "--guidelines" || arg === "-g") flags.guidelines = args[++i];
     else if (arg === "--no-share") flags.noShare = true;
   }
   return flags;
@@ -49,6 +50,7 @@ Flags:
   -t, --title <text>      video title
   -o, --output <file>     output file (default: agentreel.mp4)
   -a, --auth <file>       Playwright storage state (cookies/auth) for browser demos
+  -g, --guidelines <text>  guidelines for highlight generation (e.g. "focus on speed")
       --music <file>      path to background music mp3
       --no-share          skip the share prompt
   -h, --help              show help
@@ -111,13 +113,14 @@ function recordCLI(command, workDir, context) {
   return outFile;
 }
 
-function extractHighlightsFromCast(castPath, context) {
+function extractHighlightsFromCast(castPath, context, guidelines) {
   const python = findPython();
   const script = join(ROOT, "scripts", "cli_demo.py");
   const outFile = castPath + "-highlights.json";
 
   const args = [script, "--highlights", castPath, outFile];
   if (context) args.push(context);
+  if (guidelines) args.push(guidelines);
 
   execFileSync(python, args, { stdio: ["ignore", "inherit", "inherit"], env: process.env });
   return outFile;
@@ -160,12 +163,28 @@ function extractBrowserHighlights(videoPath, task) {
 
 // ── Browser Highlight Builder ───────────────────────────────
 
-function buildBrowserHighlights(clicks, videoPath, task) {
+function buildBrowserHighlights(clicks, videoPath, task, guidelines) {
   const CLIP_DUR = 7;
   const MIN_HIGHLIGHTS = 3;
   const MAX_HIGHLIGHTS = 4;
-  const labels = ["Overview", "Interact", "Navigate", "Result"];
-  const overlays = ["**First look**", "**Key action**", "**Exploring**", "**The result**"];
+  // Ask Claude to generate labels/overlays based on the task
+  let labels, overlays;
+  try {
+    const guidelinesLine = guidelines ? `\nGuidelines: ${guidelines}` : "";
+    const genPrompt = `Generate exactly 4 highlight labels and overlay captions for a short browser demo video.
+Task: ${task}${guidelinesLine}
+
+Return a JSON object: {"labels": ["word1", "word2", "word3", "word4"], "overlays": ["**caption1**", "**caption2**", "**caption3**", "**caption4**"]}
+Labels: 1-2 words each, specific to this app (not generic). Overlays: short punchy captions with **markdown bold** for emphasis. Return ONLY JSON.`;
+    const result = execFileSync("claude", ["-p", genPrompt, "--output-format", "text"], {
+      encoding: "utf-8", timeout: 30000, stdio: ["ignore", "pipe", "ignore"],
+    }).trim();
+    const parsed = JSON.parse(result.replace(/```json?\n?/g, "").replace(/```/g, "").trim());
+    labels = parsed.labels?.length >= 4 ? parsed.labels : null;
+    overlays = parsed.overlays?.length >= 4 ? parsed.overlays : null;
+  } catch { /* fall through */ }
+  if (!labels) labels = ["Overview", "Interact", "Navigate", "Result"];
+  if (!overlays) overlays = ["**First look**", "**Key action**", "**Exploring**", "**The result**"];
 
   // Estimate video duration from last click or default to 25s
   const lastClickTime = clicks.length > 0 ? clicks[clicks.length - 1].timeSec : 0;
@@ -409,7 +428,7 @@ async function main() {
     const castPath = recordCLI(demoCmd, process.cwd(), prompt);
 
     console.error("Step 2/3: Extracting highlights...");
-    const highlightsPath = extractHighlightsFromCast(castPath, prompt);
+    const highlightsPath = extractHighlightsFromCast(castPath, prompt, flags.guidelines);
     const highlights = JSON.parse(readFileSync(highlightsPath, "utf-8"));
     console.error(`  ${highlights.length} highlights extracted`);
 
@@ -449,7 +468,7 @@ async function main() {
       console.error(`  ${allClicks.length} clicks captured`);
     }
 
-    const highlights = buildBrowserHighlights(allClicks, videoPath, task);
+    const highlights = buildBrowserHighlights(allClicks, videoPath, task, flags.guidelines);
 
     console.error("Step 3/3: Rendering video...");
     await renderVideo({

package/package.json

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

package/scripts/browser_demo.py

@@ -54,7 +54,7 @@ def generate_playwright_script(url, task):
         [claude, "-p", prompt, "--output-format", "text"],
         capture_output=True,
         text=True,
-        timeout=120,
+        timeout=300,
     )
 
     text = result.stdout.strip()
@@ -88,7 +88,7 @@ def extract_highlights(video_path, task):
         [claude, "-p", prompt, "--output-format", "text"],
         capture_output=True,
         text=True,
-        timeout=120,
+        timeout=300,
     )
 
     text = result.stdout.strip()

package/scripts/cli_demo.py

@@ -4,10 +4,13 @@ CLI demo recorder. Uses `claude` CLI to plan the demo, then records it.
 Usage:
     python cli_demo.py <command> <workdir> <output_cast> [context]
 """
+import getpass
 import json
 import os
 import pty
+import re
 import select
+import socket
 import subprocess
 import sys
 import time
@@ -97,7 +100,24 @@ def record_demo(steps: list[dict], workdir: str, output_path: str):
         }
         f.write(json.dumps(header) + "\n")
 
-        def write_event(event_type: str, data: str):
+        # Build patterns to strip user identity from output
+        _user = getpass.getuser()
+        _host = socket.gethostname().split(".")[0]
+        _home = os.path.expanduser("~")
+        _title_seq = re.compile(r'\x1b\][\d;]*[^\x07\x1b]*(?:\x07|\x1b\\)')
+        _identity = re.compile(
+            r'|'.join(re.escape(s) for s in {_user, _host, _home} if s),
+            re.IGNORECASE,
+        )
+
+        def _sanitize(text: str) -> str:
+            text = _title_seq.sub('', text)
+            text = _identity.sub('user', text)
+            return text
+
+        def write_event(event_type: str, data: str, sanitize: bool = False):
+            if sanitize:
+                data = _sanitize(data)
             elapsed = time.time() - start_time
             f.write(json.dumps([round(elapsed, 6), event_type, data]) + "\n")
             f.flush()
@@ -140,7 +160,7 @@ def record_demo(steps: list[dict], workdir: str, output_path: str):
                         try:
                             data = os.read(fd, 4096)
                             if data:
-                                write_event("o", data.decode("utf-8", errors="replace"))
+                                write_event("o", data.decode("utf-8", errors="replace"), sanitize=True)
                             else:
                                 break
                         except OSError:
@@ -154,7 +174,7 @@ def record_demo(steps: list[dict], workdir: str, output_path: str):
                                 if r:
                                     data = os.read(fd, 4096)
                                     if data:
-                                        write_event("o", data.decode("utf-8", errors="replace"))
+                                        write_event("o", data.decode("utf-8", errors="replace"), sanitize=True)
                                     else:
                                         break
                                 else:
@@ -175,7 +195,7 @@ def record_demo(steps: list[dict], workdir: str, output_path: str):
     print(f"Saved: {output_path}", file=sys.stderr)
 
 
-def extract_highlights(cast_path: str, context: str) -> list[dict]:
+def extract_highlights(cast_path: str, context: str, guidelines: str = "") -> list[dict]:
     """Ask Claude to pick 3-4 highlight moments from the recorded session."""
     # Read the asciicast and strip to just the text content
     lines_output = []
@@ -192,16 +212,17 @@ def extract_highlights(cast_path: str, context: str) -> list[dict]:
 
     raw_output = "".join(lines_output)
     # Clean ANSI for Claude to read, but keep the raw for display
-    import re
     clean = re.sub(r'\x1b\[[0-9;]*[a-zA-Z]', '', raw_output)
 
+    guidelines_block = f"\n\nAdditional guidelines: {guidelines}" if guidelines else ""
+
     prompt = f"""You are creating a highlights reel for a CLI tool demo video. Here is the full terminal output:
 
 ---
 {clean[:3000]}
 ---
 
-Context: {context}
+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"
@@ -255,8 +276,9 @@ if __name__ == "__main__":
         cast_file = sys.argv[2]
         output = sys.argv[3]
         context = sys.argv[4] if len(sys.argv) > 4 else ""
+        guidelines = sys.argv[5] if len(sys.argv) > 5 else ""
         print(f"Extracting highlights from: {cast_file}", file=sys.stderr)
-        highlights = extract_highlights(cast_file, context)
+        highlights = extract_highlights(cast_file, context, guidelines)
         with open(output, "w") as f:
             json.dump(highlights, f, indent=2)
         print(f"Saved {len(highlights)} highlights to: {output}", file=sys.stderr)

package/src/CastVideo.tsx

@@ -121,22 +121,6 @@ export const CastVideo: React.FC<CastProps> = ({
       {/* Subtle animated glow blobs in background */}
       <AnimatedBackground frame={frame} duration={durationInFrames} />
 
-      {/* Global watermark — always visible */}
-      <div
-        style={{
-          position: "absolute",
-          top: 16,
-          right: 20,
-          zIndex: 5,
-          fontFamily: MONO,
-          fontSize: 11,
-          color: "rgba(255,255,255,0.2)",
-          letterSpacing: 2,
-        }}
-      >
-        made with agentreel
-      </div>
-
       <MusicTrack />
 
       <Sequence durationInFrames={titleFrames}>
@@ -694,7 +678,9 @@ const HighlightClip: React.FC<{
               const lineOpacity = interpolate(lineSpring, [0, 1], [0, 1]);
               const lineX = interpolate(lineSpring, [0, 1], [12, 0]);
 
-              let displayText = line.text;
+              // Strip leading "$ " from text — renderer adds its own $ prefix
+              const cleanText = line.isPrompt ? line.text.replace(/^\$\s*/, "") : line.text;
+              let displayText = cleanText;
               let isTyping = false;
               if (line.isPrompt) {
                 const typingEnd = lineFrame + fps * 0.6;
@@ -705,9 +691,9 @@ const HighlightClip: React.FC<{
                     [0, 1],
                     { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
                   );
-                  const chars = Math.floor(progress * line.text.length);
-                  displayText = line.text.slice(0, chars);
-                  isTyping = chars < line.text.length;
+                  const chars = Math.floor(progress * cleanText.length);
+                  displayText = cleanText.slice(0, chars);
+                  isTyping = chars < cleanText.length;
                 }
               }
 
@@ -1166,11 +1152,12 @@ const EndCard: React.FC<{ text: string; url?: string }> = ({ text, url }) => {
       <div
         style={{
           position: "absolute",
-          bottom: 40,
+          top: 24,
+          right: 28,
           opacity: brandSpring * 0.4,
-          transform: `translateY(${interpolate(brandSpring, [0, 1], [10, 0])}px)`,
+          transform: `translateY(${interpolate(brandSpring, [0, 1], [-10, 0])}px)`,
           fontFamily: MONO,
-          fontSize: 13,
+          fontSize: 16,
           color: DIM,
           letterSpacing: 3,
         }}

package/src/types.ts

@@ -82,6 +82,5 @@ export const defaultProps: CastProps = {
     },
   ],
   endText: "npx agentreel",
-  endUrl: "github.com/islo-labs/agentreel",
   gradient: ["#0f0f1a", "#1a0f2e"],
 };