agentreel 0.2.7 → 0.3.2

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,
@@ -158,11 +162,18 @@ function extractBrowserHighlights(videoPath, task) {
 
 function buildBrowserHighlights(clicks, videoPath, task) {
   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**"];
 
-  // If we have clicks, cluster them into highlights
-  if (clicks.length >= 2) {
+  // Estimate video duration from last click or default to 25s
+  const lastClickTime = clicks.length > 0 ? clicks[clicks.length - 1].timeSec : 0;
+  const videoDur = Math.max(25, lastClickTime + 5);
+
+  // Build click-based highlights
+  const clickHighlights = [];
+  if (clicks.length >= 1) {
     // Group clicks that are within 3s of each other
     const clusters = [];
     let cluster = [clicks[0]];
@@ -177,14 +188,14 @@ function buildBrowserHighlights(clicks, videoPath, task) {
     }
     clusters.push(cluster);
 
-    // Take up to 4 clusters, pick the ones with most clicks
+    // Take top clusters by density, sorted by time
     const ranked = clusters
-      .map((c, i) => ({ cluster: c, idx: i }))
+      .map((c) => ({ cluster: c }))
       .sort((a, b) => b.cluster.length - a.cluster.length)
-      .slice(0, 4)
+      .slice(0, MAX_HIGHLIGHTS)
       .sort((a, b) => a.cluster[0].timeSec - b.cluster[0].timeSec);
 
-    const highlights = ranked.map((r, i) => {
+    for (const r of ranked) {
       const first = r.cluster[0];
       const last = r.cluster[r.cluster.length - 1];
       const center = (first.timeSec + last.timeSec) / 2;
@@ -200,41 +211,50 @@ function buildBrowserHighlights(clicks, videoPath, task) {
       const focusX = hlClicks.reduce((s, c) => s + c.x, 0) / hlClicks.length / 1280;
       const focusY = hlClicks.reduce((s, c) => s + c.y, 0) / hlClicks.length / 800;
 
-      return {
-        label: labels[i % labels.length],
-        overlay: overlays[i % overlays.length],
+      clickHighlights.push({
         videoSrc: "browser-demo.mp4",
         videoStartSec: Math.round(startSec * 10) / 10,
         videoEndSec: Math.round(endSec * 10) / 10,
         focusX,
         focusY,
         clicks: hlClicks,
-      };
-    });
-
-    console.error(`  ${highlights.length} highlights from ${clicks.length} clicks`);
-    return highlights;
+      });
+    }
   }
 
-  // Fallback: try Claude extraction, or use evenly-spaced defaults
-  try {
-    const highlightsPath = extractBrowserHighlights(videoPath, task);
-    const highlights = JSON.parse(readFileSync(highlightsPath, "utf-8"));
-    if (highlights.length > 0) {
-      console.error(`  ${highlights.length} highlights from Claude`);
-      return highlights;
+  // Pad to MIN_HIGHLIGHTS with evenly-spaced filler clips
+  const highlights = [...clickHighlights];
+  if (highlights.length < MIN_HIGHLIGHTS) {
+    // Find time gaps not covered by existing highlights
+    const covered = highlights.map(h => [h.videoStartSec, h.videoEndSec]);
+    const fillerCount = MIN_HIGHLIGHTS - highlights.length;
+
+    // Divide full video into slots, pick uncovered ones
+    const slotDur = videoDur / (fillerCount + covered.length + 1);
+    for (let i = 0; i < fillerCount; i++) {
+      const candidate = slotDur * (i + 1);
+      // Skip if overlaps with existing highlight
+      const overlaps = covered.some(([s, e]) => candidate >= s && candidate <= e);
+      const startSec = overlaps
+        ? Math.max(0, videoDur - CLIP_DUR * (fillerCount - i))
+        : Math.max(0, candidate - CLIP_DUR / 2);
+      highlights.push({
+        videoSrc: "browser-demo.mp4",
+        videoStartSec: Math.round(startSec * 10) / 10,
+        videoEndSec: Math.round((startSec + CLIP_DUR) * 10) / 10,
+      });
     }
-  } catch {
-    // Claude failed, use defaults
   }
 
-  // Last resort: evenly-spaced clips
-  console.error("  Using default highlights (no clicks, no Claude)");
-  return [
-    { label: "Overview", overlay: "**Quick look**", videoSrc: "browser-demo.mp4", videoStartSec: 1, videoEndSec: 8 },
-    { label: "Features", overlay: "**Key features**", videoSrc: "browser-demo.mp4", videoStartSec: 8, videoEndSec: 15 },
-    { label: "Result", overlay: "**See it work**", videoSrc: "browser-demo.mp4", videoStartSec: 15, videoEndSec: 22 },
-  ];
+  // Sort by start time and assign labels
+  highlights.sort((a, b) => a.videoStartSec - b.videoStartSec);
+  for (let i = 0; i < highlights.length; i++) {
+    highlights[i].label = labels[i % labels.length];
+    highlights[i].overlay = overlays[i % overlays.length];
+  }
+
+  console.error(`  ${highlights.length} highlights (${clickHighlights.length} from clicks, ${highlights.length - clickHighlights.length} filler)`);
+  return highlights;
 }
 
 // ── Render ──────────────────────────────────────────────────
@@ -323,10 +343,11 @@ async function shareFlow(outputPath, title, prompt) {
   const shouldShare = await askYesNo("Share to Twitter? [Y/n] ");
   if (!shouldShare) return;
 
-  // Use prompt for tweet text if available, otherwise title
-  const tweetBody = prompt || title;
-
-  const text = `${tweetBody}\n\nMade with agentreel`;
+  const name = title || "this";
+  const desc = prompt || "";
+  const text = desc
+    ? `Introducing ${name} — ${desc}\n\nMade with https://github.com/islo-labs/agentreel`
+    : `Introducing ${name}\n\nMade with https://github.com/islo-labs/agentreel`;
   const tweetText = encodeURIComponent(text);
   const intentURL = `https://twitter.com/intent/tweet?text=${tweetText}`;
 
@@ -341,6 +362,22 @@ async function shareFlow(outputPath, title, prompt) {
   }
 }
 
+// ── Auto-describe ──────────────────────────────────────────
+
+function autoDescribe(cmd, url) {
+  const target = cmd || url;
+  try {
+    const result = execFileSync("claude", [
+      "-p",
+      `Describe what this tool/app does in one short sentence (under 10 words). No quotes, no period. Just the description.\n\n${target}`,
+      "--output-format", "text",
+    ], { encoding: "utf-8", timeout: 30000, stdio: ["ignore", "pipe", "ignore"] });
+    const desc = result.trim();
+    if (desc && desc.length < 100) return desc;
+  } catch { /* fall through */ }
+  return cmd ? cmd.split(/\s+/).pop() : "Web app demo";
+}
+
 // ── Main ────────────────────────────────────────────────────
 
 async function main() {
@@ -352,6 +389,13 @@ async function main() {
   let demoURL = flags.url;
   let prompt = flags.prompt;
 
+  // Auto-generate description if not provided
+  if (!prompt) {
+    console.error("Generating description...");
+    prompt = autoDescribe(demoCmd, demoURL);
+    console.error(`  "${prompt}"`);
+  }
+
   if (!demoCmd && !demoURL) {
     console.error("Please provide --cmd or --url.\n");
     printUsage();
@@ -388,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.2.7",
+  "version": "0.3.2",
   "description": "Turn your web apps and CLIs into viral clips",
   "bin": {
     "agentreel": "./bin/agentreel.mjs"

package/scripts/browser_demo.py

@@ -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

@@ -114,18 +114,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

package/src/CastVideo.tsx

@@ -673,17 +673,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 */}

package/src/types.ts

@@ -35,57 +35,53 @@ 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",
+  endUrl: "github.com/islo-labs/agentreel",
   gradient: ["#0f0f1a", "#1a0f2e"],
 };