agentreel 0.3.1 → 0.3.3

package/bin/agentreel.mjs

@@ -29,6 +29,7 @@ function parseArgs() {
     else if (arg === "--title" || arg === "-t") flags.title = args[++i];
     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 === "--no-share") flags.noShare = true;
   }
   return flags;
@@ -47,6 +48,7 @@ Flags:
   -p, --prompt <text>     description of what the tool does
   -t, --title <text>      video title
   -o, --output <file>     output file (default: agentreel.mp4)
+  -a, --auth <file>       Playwright storage state (cookies/auth) for browser demos
       --music <file>      path to background music mp3
       --no-share          skip the share prompt
   -h, --help              show help
@@ -128,13 +130,15 @@ function browserEnv() {
   return { ...process.env, PLAYWRIGHT_BROWSERS_PATH: browsersDir };
 }
 
-function recordBrowser(url, task) {
+function recordBrowser(url, task, authState) {
   const python = findPython();
   const script = join(ROOT, "scripts", "browser_demo.py");
   const outFile = join(tmpdir(), "agentreel-browser-demo.mp4");
 
   console.error(`Agent demoing browser app: ${url}`);
-  execFileSync(python, [script, url, outFile, task], {
+  const args = [script, url, outFile, task];
+  if (authState) args.push("--auth", authState);
+  execFileSync(python, args, {
     stdio: ["ignore", "inherit", "inherit"],
     env: browserEnv(),
     timeout: 300000,
@@ -428,7 +432,7 @@ async function main() {
 
     ensureBrowserDeps();
     console.error("Step 1/3: Recording browser demo...");
-    const videoPath = recordBrowser(demoURL, task);
+    const videoPath = recordBrowser(demoURL, task, flags.auth);
 
     // Copy video to Remotion public dir so it can be served
     const publicDir = join(ROOT, "public");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentreel",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "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()
@@ -124,7 +124,7 @@ def extract_highlights(video_path, task):
     return highlights
 
 
-async def record_browser_demo(url, task, output_path):
+async def record_browser_demo(url, task, output_path, auth_state=None):
     """Generate and run a Playwright demo with video recording."""
     from playwright.async_api import async_playwright
 
@@ -137,11 +137,15 @@ async def record_browser_demo(url, task, output_path):
 
     async with async_playwright() as p:
         browser = await p.chromium.launch(headless=True)
-        context = await browser.new_context(
+        ctx_opts = dict(
             viewport={"width": 1280, "height": 800},
             record_video_dir=video_dir,
             record_video_size={"width": 1280, "height": 800},
         )
+        if auth_state and os.path.isfile(auth_state):
+            ctx_opts["storage_state"] = auth_state
+            print(f"Using auth state: {auth_state}", file=sys.stderr)
+        context = await browser.new_context(**ctx_opts)
 
         # Inject click tracker — persists across navigations
         click_tracker_js = (
@@ -262,5 +266,15 @@ if __name__ == "__main__":
     else:
         url = sys.argv[1]
         output = sys.argv[2]
-        task = sys.argv[3] if len(sys.argv) > 3 else "Explore the main features"
-        asyncio.run(record_browser_demo(url, task, output))
+        # Parse remaining args: [task] [--auth <state_file>]
+        task = "Explore the main features"
+        auth_state = None
+        i = 3
+        while i < len(sys.argv):
+            if sys.argv[i] == "--auth" and i + 1 < len(sys.argv):
+                auth_state = sys.argv[i + 1]
+                i += 2
+            else:
+                task = sys.argv[i]
+                i += 1
+        asyncio.run(record_browser_demo(url, task, output, auth_state=auth_state))

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()
@@ -114,18 +134,23 @@ def record_demo(steps: list[dict], workdir: str, output_path: str):
                 write_event("o", f"\x1b[38;5;245m# {desc}\x1b[0m\r\n")
                 time.sleep(0.3)
 
-            # Type the command character by character
-            write_event("o", "\x1b[38;5;76m$\x1b[0m ")
+            # Type the command character by character (no $ prompt — the renderer adds one)
+            write_event("o", "")
             for char in cmd:
                 write_event("o", char)
                 time.sleep(0.04)
             write_event("o", "\r\n")
             time.sleep(0.2)
 
-            # Execute in PTY
+            # Execute in PTY with sanitized env (hide username/hostname)
             pid, fd = pty.fork()
             if pid == 0:
                 os.chdir(workdir)
+                os.environ["PS1"] = "$ "
+                os.environ["PROMPT_COMMAND"] = ""
+                os.environ.pop("BASH_COMMAND", None)
+                # Suppress terminal title sequences (user@host)
+                os.environ["TERM"] = "dumb"
                 os.execvp("/bin/sh", ["/bin/sh", "-c", cmd])
             else:
                 deadline = time.time() + 15
@@ -135,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:
@@ -149,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:
@@ -187,7 +212,6 @@ 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)
 
     prompt = f"""You are creating a highlights reel for a CLI tool demo video. Here is the full terminal output:

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}>
@@ -673,17 +657,7 @@ const HighlightClip: React.FC<{
                 backgroundColor: "#50fa7b",
               }}
             />
-            <div
-              style={{
-                flex: 1,
-                textAlign: "center",
-                fontFamily: MONO,
-                fontSize: 12,
-                color: "rgba(255,255,255,0.25)",
-              }}
-            >
-              Terminal
-            </div>
+            <div style={{ flex: 1 }} />
           </div>
 
           {/* Terminal body */}
@@ -704,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;
@@ -715,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;
                 }
               }
 
@@ -1176,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

@@ -35,57 +35,52 @@ export interface CastProps {
   title: string; // big opening title
   subtitle?: string; // smaller text under title
   highlights: Highlight[];
-  endText?: string; // closing CTA command, e.g. "npm install itsovertime"
-  endUrl?: string; // URL shown under CTA, e.g. "github.com/islo-labs/overtime"
+  endText?: string; // closing CTA command, e.g. "npx agentreel"
+  endUrl?: string; // URL shown under CTA, e.g. "github.com/islo-labs/agentreel"
   gradient?: [string, string]; // background gradient colors
 }
 
 export const defaultProps: CastProps = {
-  title: "itsovertime",
-  subtitle: "Cron for AI agents",
+  title: "agentreel",
+  subtitle: "Turn your apps into viral clips",
   highlights: [
     {
-      label: "Initialize",
+      label: "Record",
       overlay: "One command.",
       lines: [
-        { text: "npx @islo-labs/overtime init", isPrompt: true },
+        { text: "npx agentreel --cmd 'my-cli-tool'", isPrompt: true },
         { text: "" },
-        { text: "  itsovertime  Cron for AI agents", bold: true, color: "#bd93f9" },
+        { text: "  agentreel  Turn your apps into viral clips", bold: true, color: "#bd93f9" },
         { text: "" },
-        { text: "  ✓ Created overtime.yml", color: "#50fa7b" },
+        { text: "  ✓ Recording CLI demo...", color: "#50fa7b" },
       ],
     },
     {
-      label: "Configure",
-      overlay: "Plain English schedules.",
+      label: "Highlight",
+      overlay: "AI picks the best moments.",
       lines: [
-        { text: "cat overtime.yml", isPrompt: true },
-        { text: "shifts:", dim: true },
-        { text: "  - name: pr-review", color: "#f8f8f2" },
-        { text: '    schedule: "every hour"', color: "#50fa7b" },
-        { text: '    task: "Review open PRs..."', color: "#50fa7b" },
-        { text: "    notify: slack", color: "#f8f8f2" },
+        { text: "Extracting highlights...", dim: true },
+        { text: "" },
+        { text: "  ✓ 4 highlights extracted", color: "#50fa7b" },
+        { text: '    "Initialize" — first run', color: "#f8f8f2" },
+        { text: '    "Configure" — setup step', color: "#f8f8f2" },
+        { text: '    "Run" — the wow moment', color: "#f1fa8c" },
       ],
-      zoomLine: 3,
+      zoomLine: 2,
     },
     {
-      label: "Run",
-      overlay: "Fully autonomous.",
+      label: "Share",
+      overlay: "Ready to post.",
       lines: [
-        { text: "npx @islo-labs/overtime", isPrompt: true },
+        { text: "Rendering video...", dim: true },
         { text: "" },
-        { text: "┌─ itsovertime ───────────────────────────┐", color: "#bd93f9" },
-        { text: "│ pr-review    every hour     ⟳ running   │", color: "#f1fa8c" },
-        { text: "│ dep-updates  Mon at 2am     idle        │", dim: true },
-        { text: "└──────────────────────────────────────────┘", color: "#bd93f9" },
+        { text: "  Done: agentreel.mp4 (2.4 MB)", color: "#50fa7b" },
         { text: "" },
-        { text: "  ✓ PR #42 reviewed — approved", color: "#50fa7b" },
-        { text: "  ✓ PR #43 reviewed — changes requested", color: "#f1fa8c" },
+        { text: "  Share to Twitter? [Y/n]", color: "#f8f8f2" },
       ],
-      zoomLine: 3,
+      zoomLine: 2,
     },
   ],
-  endText: "npx @islo-labs/overtime",
-  endUrl: "github.com/islo-labs/overtime",
+  endText: "npx agentreel",
   gradient: ["#0f0f1a", "#1a0f2e"],
 };