// PRWalkthrough.jsx — mocked GitHub PR with scrubbable narrated walkthrough video const PR_CLIPS = [ { start: 0, end: 10, file: "capture/service.py", range: "L42–L68", tag: "EDIT", tagCls: "b", narration: "Wiring up wf-recorder and ffmpeg+pulse. Heartbeat every 5s so a crash mid-session doesn't lose the capture.", transcript: "starting screen capture, need to mux audio separately on wayland…", diff: [ { sign: "+", text: "proc = Popen([\"wf-recorder\", \"-f\", str(out)])" }, { sign: "+", text: "audio = Popen([\"ffmpeg\", \"-f\", \"pulse\", \"-i\", \"default\", ...])" }, { sign: "+", text: "heartbeat.start(session_id, interval=5)" }, ], }, { start: 10, end: 20, file: "indexing/pipeline.py", range: "L55", tag: "STUCK", tagCls: "r", narration: "Switching to chunked upload for the live ingest path. Same VideoDB surfaces, no RTSP tunnel required.", transcript: "switching to collection.upload, same surfaces light up anyway", diff: [ { sign: "-", text: "from videodb.capture import CaptureSession" }, { sign: "+", text: "# chunked upload for live ingest" }, { sign: "+", text: "video = collection.upload(file_path=str(mp4))" }, ], }, { start: 20, end: 31, file: "indexing/pipeline.py", range: "L91–L110", tag: "PROGRESS", tagCls: "g", narration: "Indexing with both spoken_words and scene classification. Custom classifier prompt tags moments as stuck, research, progress, or speech.", transcript: "index_scenes with a custom prompt so it knows what stuck looks like…", diff: [ { sign: "+", text: "video.index_spoken_words(SegmentationType.sentence)" }, { sign: "+", text: "video.index_scenes(SceneExtractionType.time_based," }, { sign: "+", text: " prompt=CLASSIFIER_PROMPT)" }, ], }, { start: 31, end: 40, file: "pr_video/narration.py", range: "L88–L110", tag: "EDIT", tagCls: "b", narration: "Passing scene index + transcript into the narration prompt. Without this the LLM was inventing function names that were never on screen.", transcript: "need to pass the scene context or it just makes stuff up…", diff: [ { sign: "+", text: "scene_hint = f\"On screen: {scene_text}\" if scene_text else \"\"" }, { sign: "+", text: "# only describe what the scene index + transcript show" }, ], }, { start: 40, end: 47, file: "pr_video/render.py", range: "L180–L210", tag: "PROGRESS", tagCls: "g", narration: "Three-track Timeline: video muted on z=0, narration audio on z=1, TextAsset badges on z=2. generate_stream() returns the HLS m3u8.", transcript: "three tracks, video muted, narration on top… generate_stream", diff: [ { sign: "+", text: "video_track.add_clip(Clip(VideoAsset(id=video_id, volume=0), ...))" }, { sign: "+", text: "narration_track.add_clip(Clip(AudioAsset(id=audio_id), ...))" }, { sign: "+", text: "url = tl.generate_stream() # → HLS m3u8" }, ], }, ]; const PR_DURATION = 47; function fmtPRTime(s) { const m = Math.floor(s / 60); const sec = Math.floor(s % 60); return `${m}:${String(sec).padStart(2, "0")}`; } function PRWalkthrough() { const [t, setT] = React.useState(0); const [playing, setPlaying] = React.useState(false); const [activeTab, setActiveTab] = React.useState(0); const lastRef = React.useRef(performance.now()); const dragRef = React.useRef(false); const trackRef = React.useRef(null); React.useEffect(() => { let raf; function step(now) { const dt = (now - lastRef.current) / 1000; lastRef.current = now; if (playing) { setT((prev) => { const next = prev + dt; if (next >= PR_DURATION) return 0; return next; }); } raf = requestAnimationFrame(step); } lastRef.current = performance.now(); raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [playing]); function scrubTo(clientX) { if (!trackRef.current) return; const r = trackRef.current.getBoundingClientRect(); const pct = Math.max(0, Math.min(1, (clientX - r.left) / r.width)); setT(pct * PR_DURATION); } function onDown(e) { dragRef.current = true; scrubTo(e.clientX); setPlaying(false); } React.useEffect(() => { function move(e) { if (dragRef.current) scrubTo(e.clientX); } function up() { dragRef.current = false; } window.addEventListener("mousemove", move); window.addEventListener("mouseup", up); return () => { window.removeEventListener("mousemove", move); window.removeEventListener("mouseup", up); }; }, []); const clip = PR_CLIPS.find((c) => t >= c.start && t < c.end) || PR_CLIPS[PR_CLIPS.length - 1]; const pct = (t / PR_DURATION) * 100; return (
Output

Your PR,
narrated.

After trace generate, reviewers see this. Scrub the timeline: narration, diff, and badges swap per clip. Every word is grounded in the scene index + transcript. No hallucination.

you / your-repo · PR #38 OPEN
6 files · +312 −47 · session 7a2f
feat(capture): chunked upload + scene-grounded narration
{/* Video player — no header, no pills */}
● {clip.file.split("/").pop()}
{clip.diff.map((d, i) => (
{String(80 + i).padStart(3, " ")} {d.sign} {d.text}
))}
{clip.tag} {clip.file} · {clip.range}
{Array.from({ length: 56 }).map((_, i) => { const phase = (t * 4 + i * 0.2); const h = 30 + Math.abs(Math.sin(phase) * 60) + (i % 3) * 8; return ; })}
NARRATION · generate_voice
{clip.narration}
transcript: “{clip.transcript}”
{/* Controls — no editor.Timeline pill, no track labels */}
{fmtPRTime(t)} / {fmtPRTime(PR_DURATION)}
{PR_CLIPS.map((c, i) => { const w = ((c.end - c.start) / PR_DURATION) * 100; const left = (c.start / PR_DURATION) * 100; return (
{c.tag}
); })}
{fmtPRTime(t)}
{/* Tabs — interactive, Q&A and Contribution map shown on click */}
setActiveTab(0)}>Description setActiveTab(1)}>Contribution map setActiveTab(2)}>Q&A
{activeTab === 0 && (
# What

Replace CaptureSession (macOS/Windows only) with 15s chunked collection.upload. Add scene grounding to narration.

# Why

Chunked upload chosen for the live ingest path. Scene grounding added after narration invented function names never on screen.

# Struggles

12 min on videodb[capture] install failure. Switched to LiveIndexer. Same API surfaces, no RTSP tunnel.

# Follow-ups

Cache voice clone ref audio per session instead of regenerating each run.

)} {activeTab === 1 && (
capture/service.py 30% human · 70% agent
indexing/pipeline.py 60% human · 40% agent
pr_video/render.py 100% agent
human agent
)} {activeTab === 2 && (
reviewer · /trace why not use the official CaptureSession API?

“switching to collection.upload, same surfaces light up anyway.”

▶ 01:34 → 02:10 · stuck on CaptureSession install ▶ 02:49 → 03:22 · wires LiveIndexer thread
)}
); } window.PRWalkthrough = PRWalkthrough;