screen recorder for agents

Requires Node.js 22.22+

install @yyopc/yyoreel globally, verify it works, then tell me how to use it.

pnpm add -g @yyopc/yyoreel
Or use,,

your agent clicks, types, drags, and scrolls. yyoreel turns it into a video worth sharing.

autozoomkeystroke overlayscustom backgrounds

see what the solo founders and cracked engineers first time experience was with yyoreel.

Install

Claude Code v2.1.206
Welcome back yyovil!
Fable 5 with xhigh effort · Claude Max
yyovil's Organization
~/Projects/agent-orchestrator
Tips for getting started
Ask Claude to build a feature, then record a yyoreel of it
What's new
yyoreel records scripted browser demos straight from a run
Added a /doctor check that proposes trims
/release-notes for more
· Thinking… (0s · ↑ 0 tokens · esc to interrupt)
◉ xhigh · /effort
❯
⏵⏵ auto mode on (shift+tab to cycle) · ← for agents

feat(files): render Files tab diffs with @pierre/diffs#4112

Draft
yyovilwants to merge 1 commit into Untrivial-ai:mainfrom yyovil:feat/pierre-diffs-files-tab
Conversation 0 Commits 1 Checks 0 Files changed 10
yyovilcommented on Aug 18, 2026

Summary

  • Replace the hand-written unified-diff parser/renderer in the session Files tab with @pierre/diffs, gaining real Shiki syntax highlighting and built-in row virtualization.
  • SessionFilesView parses each file's diff via getSingularPatch and renders it with @pierre/diffs/react's FileDiff, wrapped in its Virtualizer (replaces the @tanstack/react-virtual row window).
  • Line/file annotations map onto FileDiff's lineAnnotations/renderAnnotation and a custom renderGutterUtility button; selection → instruction now uses @pierre/diffs' own line-selection API (enableLineSelection, onLineSelectionChange, selectedLines) instead of native browser text selection, still surfaced through the existing right-click DiffSelectionMenu.
  • New src/renderer/lib/diff-lines.ts adapts @pierre/diffs' parsed FileDiffMetadata into the flat, line-numbered lookup the annotation and selection features need.
  • Split/unified toggle, new-file rendering, and live SSE-driven updates are unchanged; theme is wired to pierre-dark/pierre-light via the app's resolved light/dark mode.
  • Removes diff-parser.ts, its worker, and useParsedDiff.ts.
  • No backend/API contract changes.

Demo

pierre-diffs-files-tab-e2e.mp4

Test plan

  • npm run typecheck
  • Full test suite (documented one pre-existing, unrelated packages/product-ui gap)
  • Manual E2E pass against a real local daemon: Files tab open, syntax highlighting, file-level annotation send (real backend round-trip), search filter, split/unified toggle, maximize/restore
0:00 / 0:41

Features

Testimonials

Chat about yyoreel and its use cases, with replies welcoming the idea and describing a direct need for it.

Jonny Gravity Founder of getatrium.dev Ex-Meta engineer

We couldn’t load this story. Try the next one.

Chat about manually checking work from multiple agents, followed by a positive reaction to a yyoreel pull-request video.

Adhyaay Karnwal 16 y/o intern at OasisHQ joinoasis.com (a16z-backed startup)

We couldn’t load this story. Try the next one.

Chat reacting to yyoreel and explaining it as a way for agents to record videos and attach them to pull requests.

We couldn’t load this story. Try the next one.

Chat about a yyoreel-recorded pull request, including a request to avoid self-promotion and the response that the video is cool.

Prateek Karnal Founder of aoagents.dev

We couldn’t load this story. Try the next one.

LinkedIn conversation with Aksht Jain, who would love to use yyoreel and had a PR-to-video flow on his task list.

Aksht Jain Founder of Ekly.ai

We couldn’t load this story. Try the next one.

yyoreel
Testimonials

Open original screenshot

Story transcript