From dd0029dd3536c986cbaa1aecfb0c49d207dc396d Mon Sep 17 00:00:00 2001
From: Stefan Haller <stefan@haller-berlin.de>
Date: Sun, 27 Sep 2026 14:40:46 +0200
Subject: [PATCH 01/11] Use accordion mode in diff_commits demo

When running the demos at a hight of 35, as the new recording mechanism
will, this demo failed because the commits list was too small to show
both commits at the same time, and NavigateToLine has a bug that
prevents it from finding it by going to the top and pressing down until
it matches. We are going to fix that bug in the next commit for similar
future situations, but we also solve the problem here by setting the
side panels to accordion mode so that more commits are visible; this
looks better for this demo anyway.
---
 pkg/integration/tests/demo/diff_commits.go | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pkg/integration/tests/demo/diff_commits.go b/pkg/integration/tests/demo/diff_commits.go
index ddc7b7ba7a0..bfabdb86569 100644
--- a/pkg/integration/tests/demo/diff_commits.go
+++ b/pkg/integration/tests/demo/diff_commits.go
@@ -15,6 +15,7 @@ var DiffCommits = NewIntegrationTest(NewIntegrationTestArgs{
 
 		config.GetUserConfig().Gui.ShowFileTree = false
 		config.GetUserConfig().Gui.ShowCommandLog = false
+		config.GetUserConfig().Gui.ExpandFocusedSidePanel = true
 	},
 	SetupRepo: func(shell *Shell) {
 		shell.CreateNCommitsWithRandomMessages(50)

From a2dd3327eb386bb71fd6bd0278e7da4cda98b6c2 Mon Sep 17 00:00:00 2001
From: Stefan Haller <stefan@haller-berlin.de>
Date: Thu, 24 Sep 2026 21:55:40 +0200
Subject: [PATCH 02/11] Check the line we start on when navigating to a list
 item

NavigateToLine looks for its target among the lines the view has
rendered. When a list is scrolled, the view holds only the part of it
that is on screen, so the target may not be among them. For that case
the helper jumps to the top of the list and walks down instead.

That walk presses a key before it looks, so it never sees the item it
starts on, which after jumping is the first item of the list. A target
sitting there is reported as missing. The shorter the terminal, the more
of a list is scrolled out of view and the more often that walk is
needed, so this surfaced once the demos began running in a 35 line
terminal.

Check the line the walk starts on before moving off it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 pkg/integration/components/view_driver.go | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/pkg/integration/components/view_driver.go b/pkg/integration/components/view_driver.go
index 818385ca1e5..b5168487a9c 100644
--- a/pkg/integration/components/view_driver.go
+++ b/pkg/integration/components/view_driver.go
@@ -905,6 +905,14 @@ func (self *ViewDriver) NavigateToLine(matcher *TextMatcher) *ViewDriver {
 		keyPress = func() { self.SelectPreviousItem() }
 	}
 
+	// The loop below only looks at the lines it moves onto, so the line we are
+	// starting from has to be checked here. After jumping to the top that line
+	// is the first item of the list, and for a list we had to scroll through
+	// it is a plausible target.
+	if ok, _ := matcher.test(view.BufferLines()[selectedLineIdx]); ok {
+		return self
+	}
+
 	for range maxNumKeyPresses {
 		keyPress()
 		idx := self.getSelectedLineIdx()

From f3e8d8801903aa70a8adad4f7df5b664f922ef47 Mon Sep 17 00:00:00 2001
From: Stefan Haller <stefan@haller-berlin.de>
Date: Thu, 24 Sep 2026 21:48:32 +0200
Subject: [PATCH 03/11] Run demos at the size they are recorded at

How a demo behaves depends on how much of a list fits on the screen, and
`just e2e` ran demos on a 150x100 screen while we record them at 120x35.
So a demo could pass the test suite and still fail partway through a
recording, and there was no way to find out short of recording it.

Give a demo the recording size when it doesn't ask for a size of its
own.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 pkg/integration/components/test.go | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/pkg/integration/components/test.go b/pkg/integration/components/test.go
index 6eab23ae04a..064449d105d 100644
--- a/pkg/integration/components/test.go
+++ b/pkg/integration/components/test.go
@@ -23,6 +23,14 @@ const (
 	defaultHeight = 100
 )
 
+// The terminal size that demo/settings.tape gives a recording. How a demo
+// behaves depends on how much of a list fits on the screen, so run demos at
+// the size they will be recorded at. Keep these in step with that file.
+const (
+	demoWidth  = 120
+	demoHeight = 35
+)
+
 type IntegrationTest struct {
 	name         string
 	description  string
@@ -213,6 +221,10 @@ func (self *IntegrationTest) Run(gui integrationTypes.GuiDriver) {
 
 func (self *IntegrationTest) HeadlessDimensions() (int, int) {
 	if self.width == 0 && self.height == 0 {
+		if self.isDemo {
+			return demoWidth, demoHeight
+		}
+
 		return defaultWidth, defaultHeight
 	}
 

From 115e3fb389c9c2dc59c710a29a5939231ad31848 Mon Sep 17 00:00:00 2001
From: Stefan Haller <stefan@haller-berlin.de>
Date: Thu, 24 Sep 2026 20:08:10 +0200
Subject: [PATCH 04/11] Update demos and readme for new staging-in-main-view
 functionality

We don't bother rendering the updated or new demos yet, because we are
about to change them to a different format.
---
 README.md                                     | 14 ++-
 pkg/integration/tests/demo/custom_patch.go    | 93 +++++++++++++------
 .../tests/demo/remove_hunk_from_commit.go     | 82 ++++++++++++++++
 ...stage_lines.go => stage_hunks_or_lines.go} | 38 +++++---
 pkg/integration/tests/test_list.go            |  3 +-
 5 files changed, 182 insertions(+), 48 deletions(-)
 create mode 100644 pkg/integration/tests/demo/remove_hunk_from_commit.go
 rename pkg/integration/tests/demo/{stage_lines.go => stage_hunks_or_lines.go} (63%)

diff --git a/README.md b/README.md
index aafd2768d65..25ab6848381 100644
--- a/README.md
+++ b/README.md
@@ -73,7 +73,7 @@ If you're a mere mortal like me and you're tired of hearing how powerful git is
 - [Elevator Pitch](#elevator-pitch)
 - [Table of contents](#table-of-contents)
 - [Features](#features)
-  - [Stage individual lines](#stage-individual-lines)
+  - [Stage hunks or individual lines](#stage-hunks-or-individual-lines)
   - [Interactive Rebase](#interactive-rebase)
   - [Cherry-pick](#cherry-pick)
   - [Bisect](#bisect)
@@ -133,11 +133,11 @@ Lazygit is not my fulltime job but it is a hefty part time job so if you want to
 
 ## Features
 
-### Stage individual lines
+### Stage hunks or individual lines
 
-Press `<enter>` on a changed file to focus its diff in the main view. Press `<space>` on the selected line to stage it, or press `v` to start selecting a range of lines. You can also press `a` to switch to hunk selection mode. When a file has both staged and unstaged changes, use `<tab>` to move between the two diff panes; the same actions stage or unstage the selection depending on the pane.
+Press `0` on a changed file to focus its diff in the main view. The selection covers a whole hunk to begin with, so `<space>` stages that hunk and moves on to the next one. When you want only part of a hunk, press `a` for line-by-line selection and `v` to select a range of lines. What you staged shows up in the pane below. Press `<tab>` to move between the two panes; `<space>` unstages in the lower one. Press `c` to commit without leaving the diff.
 
-![stage_lines](../assets/demo/stage_lines-compressed.gif)
+![stage_hunks_or_lines](../assets/demo/stage_hunks_or_lines-compressed.gif)
 
 ### Interactive Rebase
 
@@ -195,12 +195,16 @@ You can create worktrees to have multiple branches going at once without the nee
 
 You can build a custom patch from an old commit and then remove the patch from the commit, split out a new commit, apply the patch in reverse to the index, and more.
 
-In this example we have a redundant comment that we want to remove from an old commit. We hit `<enter>` on the commit to view its files, then `<enter>` on a file to focus its diff. From there, `<space>` adds the selected comment line to the custom patch and `ctrl+p` opens the custom patch options, where we choose to remove the patch from the original commit.
+In this example an old commit contains a change that belongs in a commit of its own. We hit `0` on the commit to focus its diff. `<space>` on the hunk we want to move adds it to the custom patch, and `ctrl+p` opens the custom patch options, where we choose to move the patch into a new commit.
 
 Learn more in the [Rebase magic Youtube tutorial](https://youtu.be/4XaToVut_hs).
 
 ![custom_patch](../assets/demo/custom_patch-compressed.gif)
 
+If you only want to remove a hunk from an old commit, you don't need a custom patch for that. Select the hunk in the commit's diff and press `d`. Lazygit rewrites the commit without it, running an interactive rebase in the background.
+
+![remove_hunk_from_commit](../assets/demo/remove_hunk_from_commit-compressed.gif)
+
 ### Rebase from marked base commit
 
 Say you're on a feature branch that was itself branched off of the develop branch, and you've decided you'd rather be branching off the master branch. You need a way to rebase only the commits from your feature branch. In this demo we check to see which was the last commit on the develop branch, then press `shift+b` to mark that commit as our base commit, then press `r` on the master branch to rebase onto it, only bringing across the commits from our feature branch. Then we push our changes with `shift+p`.
diff --git a/pkg/integration/tests/demo/custom_patch.go b/pkg/integration/tests/demo/custom_patch.go
index 9235963973d..6e2dfa93b41 100644
--- a/pkg/integration/tests/demo/custom_patch.go
+++ b/pkg/integration/tests/demo/custom_patch.go
@@ -10,66 +10,99 @@ var usersFileContent = `package main
 import "fmt"
 
 func main() {
-	// TODO: verify that this actually works
+	fmt.Println(shims.Greeting())
+	serve()
+}
+
+func serve() {
+	fmt.Println("listening on :8080")
+}
+`
+
+var usersFileContentWithLogging = `package main
+
+import "fmt"
+
+func main() {
 	fmt.Println("hello world")
+	serve()
+}
+
+func logRequest(path string) {
+	fmt.Println("request:", path)
+}
+
+func serve() {
+	fmt.Println("listening on :8080")
 }
 `
 
 var CustomPatch = NewIntegrationTest(NewIntegrationTestArgs{
-	Description:  "Remove a line from an old commit",
+	Description:  "Split a change out of an old commit into a new one",
 	ExtraCmdArgs: []string{},
 	Skip:         false,
 	IsDemo:       true,
 	SetupConfig: func(cfg *config.AppConfig) {
 		setDefaultDemoConfig(cfg)
-		cfg.GetUserConfig().Gui.UseHunkModeInDiffView = false
 	},
 	SetupRepo: func(shell *Shell) {
 		shell.CreateNCommitsWithRandomMessages(30)
 		shell.NewBranch("feature/user-authentication")
 		shell.EmptyCommit("Add user authentication feature")
-		shell.CreateFileAndAdd("src/users.go", "package main\n")
+		shell.CreateFileAndAdd("src/users.go", usersFileContent)
 		shell.Commit("Fix local session storage")
 		shell.CreateFile("src/authentication.go", "package main")
 		shell.CreateFile("src/session.go", "package main")
-		shell.UpdateFileAndAdd("src/users.go", usersFileContent)
-		shell.EmptyCommit("Stop using shims")
+		shell.UpdateFileAndAdd("src/users.go", usersFileContentWithLogging)
+		shell.Commit("Stop using shims")
 		shell.UpdateFileAndAdd("src/authentication.go", "package authentication")
 		shell.UpdateFileAndAdd("src/session.go", "package session")
 		shell.Commit("Enhance user authentication feature")
 	},
 	Run: func(t *TestDriver, keys config.KeybindingConfig) {
-		t.SetCaptionPrefix("Remove a line from an old commit")
+		t.SetCaptionPrefix("Split a change out of an old commit")
 		t.Wait(1000)
 
 		t.Views().Commits().
 			Focus().
 			NavigateToLine(Contains("Stop using shims")).
 			Wait(1000).
-			PressEnter().
+			Press(keys.Universal.FocusMainView)
+
+		t.Views().Main().
+			IsFocused().
+			Wait(1000).
+			Press(keys.Universal.NextItem).
+			SelectedLines(
+				Contains("+func logRequest(path string) {"),
+				Contains(`fmt.Println("request:", path)`),
+				Contains("+}"),
+				Equals("+"),
+			).
+			Wait(500).
+			SetCaptionPrefix("Add the hunk to a custom patch").
+			PressPrimaryAction().
+			Wait(1000).
+			SetCaptionPrefix("Move the patch into a new commit").
+			Press(keys.Universal.CreatePatchOptionsMenu).
 			Tap(func() {
-				t.Views().CommitFiles().
-					IsFocused().
-					NavigateToLine(Contains("users.go")).
-					Wait(1000).
-					PressEnter().
-					Tap(func() {
-						t.Views().Main().
-							IsFocused().
-							NavigateToLine(Contains("TODO")).
-							Wait(500).
-							PressPrimaryAction().
-							PressEscape()
-					}).
-					Press(keys.Universal.CreatePatchOptionsMenu).
-					Tap(func() {
-						t.ExpectPopup().Menu().
-							Title(Equals("Patch options")).
-							Select(Contains("Remove patch from original commit")).
-							Wait(500).
-							Confirm()
-					}).
-					PressEscape()
+				t.ExpectPopup().Menu().
+					Title(Equals("Patch options")).
+					Select(Contains("Move patch into new commit after the original commit")).
+					Wait(500).
+					Confirm()
+
+				t.ExpectPopup().CommitMessagePanel().
+					Type("Add request logging").
+					Confirm()
 			})
+
+		t.Views().Commits().
+			IsFocused().
+			TopLines(
+				Contains("Enhance user authentication feature"),
+				Contains("Add request logging"),
+				Contains("Stop using shims"),
+			)
 	},
 })
diff --git a/pkg/integration/tests/demo/remove_hunk_from_commit.go b/pkg/integration/tests/demo/remove_hunk_from_commit.go
new file mode 100644
index 00000000000..c7fad1949d8
--- /dev/null
+++ b/pkg/integration/tests/demo/remove_hunk_from_commit.go
@@ -0,0 +1,82 @@
+package demo
+
+import (
+	"github.com/jesseduffield/lazygit/pkg/config"
+	. "github.com/jesseduffield/lazygit/pkg/integration/components"
+)
+
+var greetingFileContent = `package main
+
+import "fmt"
+
+func greet(name string) {
+	fmt.Println("hello", name)
+}
+
+func farewell(name string) {
+	fmt.Println("bye", name)
+}
+`
+
+var greetingFileContentWithDebugLine = `package main
+
+import "fmt"
+
+func greet(name string) {
+	fmt.Println("hello there", name)
+}
+
+func farewell(name string) {
+	fmt.Println("DEBUG: saying bye to", name)
+	fmt.Println("bye", name)
+}
+`
+
+var RemoveHunkFromCommit = NewIntegrationTest(NewIntegrationTestArgs{
+	Description:  "Remove a hunk from an old commit",
+	ExtraCmdArgs: []string{},
+	Skip:         false,
+	IsDemo:       true,
+	SetupConfig: func(cfg *config.AppConfig) {
+		setDefaultDemoConfig(cfg)
+	},
+	SetupRepo: func(shell *Shell) {
+		shell.CreateNCommitsWithRandomMessages(30)
+		shell.NewBranch("feature/user-authentication")
+		shell.CreateFileAndAdd("src/greeting.go", greetingFileContent)
+		shell.Commit("Greet users when they sign in")
+		shell.UpdateFileAndAdd("src/greeting.go", greetingFileContentWithDebugLine)
+		shell.Commit("Make the greeting friendlier")
+		shell.EmptyCommit("Expire sessions after a day")
+		shell.EmptyCommit("Enhance user authentication feature")
+	},
+	Run: func(t *TestDriver, keys config.KeybindingConfig) {
+		t.SetCaptionPrefix("Remove a hunk from an old commit")
+		t.Wait(1000)
+
+		t.Views().Commits().
+			Focus().
+			NavigateToLine(Contains("Make the greeting friendlier")).
+			Wait(1000).
+			Press(keys.Universal.FocusMainView)
+
+		t.Views().Main().
+			IsFocused().
+			Wait(1000).
+			Press(keys.Universal.NextItem).
+			SelectedLines(
+				Contains(`fmt.Println("DEBUG: saying bye to", name)`),
+			).
+			Wait(1000).
+			Press(keys.Universal.Remove).
+			Tap(func() {
+				t.ExpectPopup().Confirmation().
+					Title(Equals("Discard lines from commit")).
+					Content(AnyString()).
+					Wait(1000).
+					Confirm()
+			}).
+			Wait(1000).
+			Content(Contains(`fmt.Println("hello there", name)`).DoesNotContain("DEBUG"))
+	},
+})
diff --git a/pkg/integration/tests/demo/stage_lines.go b/pkg/integration/tests/demo/stage_hunks_or_lines.go
similarity index 63%
rename from pkg/integration/tests/demo/stage_lines.go
rename to pkg/integration/tests/demo/stage_hunks_or_lines.go
index 8d05749f637..5457ecfc0ec 100644
--- a/pkg/integration/tests/demo/stage_lines.go
+++ b/pkg/integration/tests/demo/stage_hunks_or_lines.go
@@ -30,11 +30,11 @@ Simple terminal UI for git
 
 Just do brew install lazygit and bada bing bada
 boom you have begun on the path of laziness.
-
+TODO: mention the other install methods
 `
 
-var StageLines = NewIntegrationTest(NewIntegrationTestArgs{
-	Description:  "Stage individual lines",
+var StageHunksOrLines = NewIntegrationTest(NewIntegrationTestArgs{
+	Description:  "Stage hunks or individual lines",
 	ExtraCmdArgs: []string{},
 	Skip:         false,
 	IsDemo:       true,
@@ -51,29 +51,43 @@ var StageLines = NewIntegrationTest(NewIntegrationTestArgs{
 		shell.UpdateFile("docs/README.md", updatedFile)
 	},
 	Run: func(t *TestDriver, keys config.KeybindingConfig) {
-		t.SetCaptionPrefix("Stage individual lines")
+		t.SetCaptionPrefix("Stage a hunk")
 		t.Wait(1000)
 
 		t.Views().Files().
 			IsFocused().
-			PressEnter()
+			Press(keys.Universal.FocusMainView)
 
 		t.Views().Main().
 			IsFocused().
+			SelectedLines(
+				Contains("-Simple terminal UI for git commands"),
+				Contains("+Simple terminal UI for git"),
+				Contains("+(Not too simple though)"),
+			).
+			Wait(1000).
+			PressPrimaryAction().
+			Wait(1000).
+			SetCaptionPrefix("Stage individual lines").
+			Press(keys.Main.ToggleSelectHunk).
+			Wait(500).
 			Press(keys.Universal.ToggleRangeSelect).
 			PressFast(keys.Universal.NextItem).
-			PressFast(keys.Universal.NextItem).
+			SelectedLines(
+				Contains("+Just do brew install lazygit"),
+				Contains("+boom you have begun"),
+			).
 			Wait(500).
 			PressPrimaryAction().
-			Wait(500).
-			PressEscape()
-
-		t.Views().Files().
-			IsFocused().
+			Wait(1000).
+			SelectedLines(
+				Contains("+TODO: mention the other install methods"),
+			).
+			SetCaptionPrefix("Commit our changes").
 			Press(keys.Files.CommitChanges).
 			Tap(func() {
 				t.ExpectPopup().CommitMessagePanel().
-					Type("Update tagline").
+					Type("Update tagline and install instructions").
 					Confirm()
 			})
 
diff --git a/pkg/integration/tests/test_list.go b/pkg/integration/tests/test_list.go
index 29d18db02a3..54fe8f2b34c 100644
--- a/pkg/integration/tests/test_list.go
+++ b/pkg/integration/tests/test_list.go
@@ -220,7 +220,8 @@ var tests = []*components.IntegrationTest{
 	demo.InteractiveRebase,
 	demo.NukeWorkingTree,
 	demo.RebaseOnto,
-	demo.StageLines,
+	demo.RemoveHunkFromCommit,
+	demo.StageHunksOrLines,
 	demo.Undo,
 	demo.WorktreeCreateFromBranches,
 	diff.CopyToClipboard,

From 212142ff746812e698d5c80bff7fbbeb641bff47 Mon Sep 17 00:00:00 2001
From: Stefan Haller <stefan@haller-berlin.de>
Date: Mon, 5 Oct 2026 17:42:58 +0200
Subject: [PATCH 05/11] Confirm the nuke prompt in the nuke_working_tree demo

The recording of this demo stops with the confirmation popup still on
screen. The explosion animation and the emptied Files panel that the demo
exists to show never happen at all. Nuking the working tree has asked for
confirmation since 238fdd573c, and the demo only selects the menu item, so
the nuke never runs. The demo asserted nothing about the outcome, so it
stayed green all the while.

Answer the confirmation, and assert that the Files panel ends up empty.
That assertion also holds the recording open until the animation has
played out and the panel has been refreshed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 pkg/integration/tests/demo/nuke_working_tree.go | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/pkg/integration/tests/demo/nuke_working_tree.go b/pkg/integration/tests/demo/nuke_working_tree.go
index 5ff2a5dd623..9db2cc1124c 100644
--- a/pkg/integration/tests/demo/nuke_working_tree.go
+++ b/pkg/integration/tests/demo/nuke_working_tree.go
@@ -39,6 +39,15 @@ var NukeWorkingTree = NewIntegrationTest(NewIntegrationTestArgs{
 					Title(Equals("")).
 					Select(Contains("Nuke working tree")).
 					Confirm()
-			})
+
+				t.ExpectPopup().Confirmation().
+					Title(Equals("Nuke working tree")).
+					Content(AnyString()).
+					Wait(1000).
+					Confirm()
+			}).
+			// Retries until the explosion animation has played out and the panel has
+			// been refreshed, so that the recording shows both.
+			IsEmpty()
 	},
 })

From 0026f853c79f2ca66f5058ed895f77fc6a6e4497 Mon Sep 17 00:00:00 2001
From: Stefan Haller <stefan@haller-berlin.de>
Date: Tue, 22 Sep 2026 20:22:05 +0200
Subject: [PATCH 06/11] Give the tests a visible inactive border colour

The integration test config asks for `black` inactive borders. In a
recording that comes out as a mid grey, because the recording theme
remaps the terminal's black to #7a7a7a. In an ordinary terminal it is
real black, so when you watch a test with `just e2e-cli` the inactive
frames all but disappear against the background.

Name the grey directly instead (but a little bit brighter than the #7a
we had before), so that the frames look the same either way.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 test/default_test_config/config.yml | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/test/default_test_config/config.yml b/test/default_test_config/config.yml
index e5a893a13c4..52aaa9aac26 100644
--- a/test/default_test_config/config.yml
+++ b/test/default_test_config/config.yml
@@ -8,8 +8,11 @@ gui:
     activeBorderColor:
     - green
     - bold
+    # Not the "black" of the terminal palette: that is a real black in an
+    # ordinary terminal, which makes the frames all but invisible when you run
+    # a test with `just e2e-cli`.
     inactiveBorderColor:
-    - black
+    - '#999999'
   # Not important in tests but it creates clutter in demos
   showRandomTip: false
   # The expected output of the tests draws the commit graph with box drawing

From d24bb08384e725d7d731b08e5424016e298da9d8 Mon Sep 17 00:00:00 2001
From: Stefan Haller <stefan@haller-berlin.de>
Date: Tue, 22 Sep 2026 19:30:19 +0200
Subject: [PATCH 07/11] Record demos with vhs and publish them to GitHub's
 attachment store

The demo gifs in the README start on their own, loop without telling the
reader where a run begins, and give no way to pause, seek or replay. A
video with the browser's own controls fixes all three, but GitHub plays
a video in a README only when it is served from its own attachment
store. If you commit one to the assets branch and link it the way we
link the images, GitHub drops the whole <video> element when it renders
the page.

Replace terminalizer with vhs. vhs records the demo straight to mp4
rather than going through a gif, and it takes the terminal size, font
and colours from demo/settings.tape. Then upload the result from the
endpoint that GitHub's own drag-and-drop upload posts to, and print the
tag to paste into the page.

Uploading alone is not enough. An attachment is readable only by people
who are signed in to GitHub until a posted comment in the repository
refers to it, and a README on a branch does not count. So post each
recording to a collecting issue and wait until the video can be fetched
without a token. Miss that step and the video plays for whoever recorded
it and 404s for every other reader.

Two things about the frame. Pad the bottom, because the browser draws
its playback controls over the video and they are tall enough to cover
the line where the demos put their captions. And cut the end: vhs
records until the marker reaches the screen, by which time lazygit has
exited and the shell has painted its prompt back over the demo. A
browser holds the last frame of a video once it has played to the end,
so leaving those frames in would end every demo on a terminal prompt
and leave it there.

Pass --no-upload while you are still working on how a demo looks. That
writes the video to demo/output and stops, so trying out a colour or a
font costs nothing but the recording itself.

The recording is sharper and smaller than the gif it replaces, at
1866x1230 and 25 fps against 1140x828 and about 5 fps. It also costs the
reader nothing until they press play, whereas the gifs are fetched every
time the README is opened.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 demo/config.yml                    | 112 -------------
 demo/record_demo.sh                | 257 ++++++++++++++++++++++++-----
 demo/settings.tape                 |  46 ++++++
 docs-master/dev/Demo_Recordings.md |  76 ++++++---
 4 files changed, 314 insertions(+), 177 deletions(-)
 delete mode 100644 demo/config.yml
 create mode 100644 demo/settings.tape

diff --git a/demo/config.yml b/demo/config.yml
deleted file mode 100644
index defe50a5bc1..00000000000
--- a/demo/config.yml
+++ /dev/null
@@ -1,112 +0,0 @@
-# Specify a command to be executed
-# like `/bin/bash -l`, `ls`, or any other commands
-# the default is bash for Linux
-# or powershell.exe for Windows
-command: echo "YOU NEED TO SPECIFY YOUR OWN COMMAND WITH THE -d ARG"
-
-# Specify the current working directory path
-# the default is the current working directory path
-cwd: null
-
-# Export additional ENV variables
-env:
-  recording: true
-
-# Explicitly set the number of columns
-# or use `auto` to take the current
-# number of columns of your shell
-cols: 120 # 100
-
-# Explicitly set the number of rows
-# or use `auto` to take the current
-# number of rows of your shell
-rows: 35 # 30
-
-# Amount of times to repeat GIF
-# If value is -1, play once
-# If value is 0, loop indefinitely
-# If value is a positive number, loop n times
-repeat: 0
-
-# Quality
-# 1 - 100
-# Higher quality seems to make no difference, but running it through
-# gifsicle ends up with a much better compressed version.
-quality: 100
-
-# Delay between frames in ms
-# If the value is `auto` use the actual recording delays
-frameDelay: auto
-
-# Maximum delay between frames in ms
-# Ignored if the `frameDelay` isn't set to `auto`
-# Set to `auto` to prevent limiting the max idle time
-maxIdleTime: 2000
-
-# The surrounding frame box
-# The `type` can be null, window, floating, or solid`
-# To hide the title use the value null
-# Don't forget to add a backgroundColor style with a null as type
-frameBox:
-  type: floating
-  title: Lazygit
-  style:
-    border: 0px black solid
-    backgroundColor: "#1d1d1d"
-    margin: -5px
-
-# Add a watermark image to the rendered gif
-# You need to specify an absolute path for
-# the image on your machine or a URL, and you can also
-# add your own CSS styles
-watermark:
-  imagePath: null
-  style:
-    position: absolute
-    right: 15px
-    bottom: 15px
-    width: 100px
-    opacity: 0.9
-
-# Cursor style can be one of
-# `block`, `underline`, or `bar`
-cursorStyle: block
-
-# Font family
-# You can use any font that is installed on your machine
-# in CSS-like syntax
-# Download from:
-# https://github.com/ryanoasis/nerd-fonts/releases/download/v3.0.2/DejaVuSansMono.zip
-# Not using the mono font because it makes icons too small.
-fontFamily: "DejaVuSansM Nerd Font"
-
-# The size of the font
-fontSize: 8
-
-# The height of lines
-lineHeight: 1
-
-# The spacing between letters
-letterSpacing: 0
-
-# Theme
-theme:
-  background: "transparent"
-  foreground: "#dddad6"
-  cursor: "#c7c7c7"
-  black: "#7a7a7a"
-  red: "#fc4384"
-  green: "#b3e33b"
-  yellow: "#ffa727"
-  blue: "#102895"
-  magenta: "#c930c7"
-  cyan: "#00c5c7"
-  white: "#c7c7c7"
-  brightBlack: "#676767"
-  brightRed: "#ff7fac"
-  brightGreen: "#c8ed71"
-  brightYellow: "#ebdf86"
-  brightBlue: "#6871ff"
-  brightMagenta: "#ff76ff"
-  brightCyan: "#5ffdff"
-  brightWhite: "#fffefe"
diff --git a/demo/record_demo.sh b/demo/record_demo.sh
index 97d5c2f3631..88b43cbead3 100755
--- a/demo/record_demo.sh
+++ b/demo/record_demo.sh
@@ -2,55 +2,72 @@
 
 set -e
 
-TYPE=$1
-TEST=$2
+# The repository the demo is uploaded to. GitHub only plays videos that live in
+# its own attachment store, and an attachment is tied to one repository.
+REPO=jesseduffield/lazygit
+
+# The issue that collects the demo recordings. Posting a comment there is what
+# makes an uploaded video readable by people who are not signed in to GitHub.
+# It can stay closed; commenting on a closed issue publishes the video just as
+# well, and does not reopen it.
+PUBLISH_ISSUE=6051
 
 usage() {
-    echo "Usage: $0 [gif|mp4] <test path>"
-    echo "e.g. using full path: $0 gif pkg/integration/tests/demo/nuke_working_tree.go"
+    echo "Usage: $0 [--no-upload] <test path>"
+    echo "e.g. $0 pkg/integration/tests/demo/nuke_working_tree.go"
+    echo
+    echo "--no-upload leaves the video in demo/output and stops there, for"
+    echo "checking how a change to demo/settings.tape turns out."
     exit 1
 }
 
-if [ "$#" -ne 2 ]
-then
-    usage
-fi
+UPLOAD=true
 
-if [ "$TYPE" != "gif" ] && [ "$TYPE" != "mp4" ]
+if [ "$1" = "--no-upload" ]
 then
-    usage
-    exit 1
+    UPLOAD=false
+    shift
 fi
 
-if [ -z "$TEST" ]
+TEST=$1
+
+if [ "$#" -ne 1 ]
 then
     usage
 fi
 
-WORKTREE_PATH=$(git worktree list | grep assets | awk '{print $1}')
+TOOLS="vhs ttyd ffmpeg"
 
-if [ -z "$WORKTREE_PATH" ]
+if [ "$UPLOAD" = true ]
 then
-    echo "Could not find assets worktree. You'll need to create a worktree for the assets branch using the following command:"
-    echo "git worktree add .worktrees/assets assets"
-    echo "The assets branch has no shared history with the main branch: it exists to store assets which are too large to store in the main branch."
-    exit 1
+    TOOLS="$TOOLS gh"
 fi
 
-OUTPUT_DIR="$WORKTREE_PATH/demo"
+for TOOL in $TOOLS
+do
+    if ! command -v "$TOOL" > /dev/null 2>&1
+    then
+        echo "$TOOL could not be found"
+        echo "Install it with: brew install $TOOL"
+        exit 1
+    fi
+done
 
-if ! command -v terminalizer &> /dev/null
+if [ "$UPLOAD" = true ]
 then
-    echo "terminalizer could not be found"
-    echo "Install it with: npm install -g terminalizer"
-    exit 1
-fi
+    WORKTREE_PATH=$(git worktree list | grep assets | awk '{print $1}')
 
-if ! command -v "gifsicle" &> /dev/null
-then
-    echo "gifsicle could not be found"
-    echo "Install it with: npm install -g gifsicle"
-    exit 1
+    if [ -z "$WORKTREE_PATH" ]
+    then
+        echo "Could not find assets worktree. You'll need to create a worktree for the assets branch using the following command:"
+        echo "git worktree add .worktrees/assets assets"
+        echo "The assets branch has no shared history with the main branch: it exists to store assets which are too large to store in the main branch."
+        exit 1
+    fi
+
+    OUTPUT_DIR="$WORKTREE_PATH/demo"
+else
+    OUTPUT_DIR=demo/output
 fi
 
 # Get last part of the test path and set that as the output name
@@ -63,19 +80,179 @@ go generate pkg/integration/tests/tests.go
 
 mkdir -p "$OUTPUT_DIR"
 
-# First we record the demo into a yaml representation
-terminalizer -c demo/config.yml record --skip-sharing -d "go run cmd/integration_test/main.go cli --slow $TEST" "$OUTPUT_DIR/$NAME"
-# Then we render it into a gif
-terminalizer render "$OUTPUT_DIR/$NAME" -o "$OUTPUT_DIR/$NAME.gif"
+SCRATCH=$(mktemp -d)
+trap 'rm -rf "$SCRATCH"' EXIT
+
+TAPE="$SCRATCH/$NAME.tape"
+RECORDING="$SCRATCH/$NAME.mp4"
+OUTPUT="$OUTPUT_DIR/$NAME.mp4"
+
+# Start recording once lazygit has drawn the top left corner of a view frame.
+# Demos run in whichever screen mode they ask for, so no particular panel is
+# on screen for all of them, but every view is drawn with a frame. This is the
+# corner that `border: rounded` draws; a demo config that turns borders off
+# would need a different signal.
+#
+# The two quotes in the end marker keep the literal VHSDONE out of the command
+# line, so that waiting for the marker cannot match the command that prints it.
+#
+# The screen is cleared before lazygit is started, so that the screen the
+# terminal restores when lazygit exits is a blank one rather than the typed
+# command line. The frames vhs records after lazygit has exited are then blank
+# apart from the marker, which is what the trimming below looks for.
+cat > "$TAPE" <<EOF
+Output "$RECORDING"
+
+Source demo/settings.tape
+
+# The command is typed while the recording is hidden, so there is nothing to
+# gain from animating it.
+Set TypingSpeed 0ms
+
+Hide
+Type "clear; go run cmd/integration_test/main.go cli --slow $TEST; echo VHS''DONE"
+Enter
+Wait+Screen@180s /╭/
+Show
+Wait+Screen@600s /VHSDONE/
+Hide
+EOF
+
+vhs "$TAPE"
+
+if [ ! -f "$RECORDING" ]
+then
+    echo "vhs recorded the demo but wrote no video."
+    echo "vhs 0.12.0 does this; see https://github.com/charmbracelet/vhs/issues/787."
+    echo "Install a working version with: go install github.com/charmbracelet/vhs@v0.11.0"
+    exit 1
+fi
+
+# The browser draws its playback controls over the bottom of the video, and
+# they are tall enough to hide lazygit's caption line. Pad the frame so that
+# the caption sits above them. Chrome draws the tallest bar of the three, and
+# at the width a README gives the video its buttons start to overlap the
+# caption below about 90px, so there is not much room to trim here. Measure it
+# again if demo/settings.tape changes the size of the recording.
+CAPTION_CLEARANCE=90
 
-# Then we convert it to either an mp4 or gif based on the command line argument
-if [ "$TYPE" = "mp4" ]
+BACKGROUND=$(sed -n 's/.*"background": *"\(#[0-9a-fA-F]*\)".*/\1/p' demo/settings.tape)
+
+if [ -z "$BACKGROUND" ]
+then
+    echo "Could not read the background colour from demo/settings.tape"
+    exit 1
+fi
+
+# vhs keeps recording until the marker reaches the screen, and by then lazygit
+# has exited and the terminal has been cleared for the marker. Find the first
+# of those blank frames so we can cut them off. Measure the share of pixels
+# that are not background: a cleared terminal reads around 0.03, while the
+# emptiest thing lazygit draws reads around 1.2, an empty panel still being
+# drawn with a frame around it. Demos whose config turns borders off would
+# need a different signal, as the start marker above would too.
+BLANK_INK=0.5
+
+CUT=$(ffmpeg -v error -i "$RECORDING" \
+    -vf "format=gray,lutyuv=y='if(gt(val\,60)\,255\,0)',signalstats,metadata=print:key=lavfi.signalstats.YAVG:file=-" \
+    -an -f null - 2>/dev/null |
+    # ffmpeg writes these numbers with a decimal point, so keep awk in a
+    # locale that reads them back that way. The + 0 turns them from strings
+    # into numbers, without which awk compares them as text.
+    LC_ALL=C awk -v blank="$BLANK_INK" '
+         /pts_time:/ { split($3, a, ":"); time = a[2] }
+         /YAVG=/ { split($0, b, "="); n++; at[n] = time + 0; ink[n] = b[2] + 0 }
+         END {
+             # Walk back over the blank frames at the end. Starting from the
+             # end leaves a blank frame that the demo painted over again where
+             # it is, so only the tail after lazygit is cut.
+             k = n + 1
+             while (k > 1 && ink[k - 1] < blank) {
+                 k--
+             }
+             if (k <= n) {
+                 printf "%.3f\n", at[k]
+             }
+         }')
+
+if [ -n "$CUT" ]
 then
-    COMPRESSED_PATH="$OUTPUT_DIR/$NAME.mp4"
-    ffmpeg -y -i "$OUTPUT_DIR/$NAME.gif" -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" "$COMPRESSED_PATH"
+    TRIM="-t $CUT"
 else
-    COMPRESSED_PATH="$OUTPUT_DIR/$NAME-compressed.gif"
-    gifsicle --colors 256 --use-col=web -O3 < "$OUTPUT_DIR/$NAME.gif" > "$COMPRESSED_PATH"
+    TRIM=
+fi
+
+# The video ends on the last frame of the demo. A browser goes on showing that
+# frame once it has played to the end, so it needs no padding out. Move the
+# moov atom to the front so that playback can start before the whole file has
+# downloaded.
+# shellcheck disable=SC2086
+ffmpeg -y -loglevel error -i "$RECORDING" $TRIM \
+    -vf "pad=iw:ih+$CAPTION_CLEARANCE:0:0:color=$BACKGROUND" \
+    -c:v libx264 -crf 23 -preset slow -pix_fmt yuv420p \
+    -movflags +faststart -an "$OUTPUT"
+
+if [ "$UPLOAD" = false ]
+then
+    echo "Demo recorded to $OUTPUT"
+    exit 0
+fi
+
+# GitHub's web editor posts to this endpoint when you drag a file into a
+# comment box. It is undocumented, but it accepts an ordinary token, so we can
+# upload from here. You need push access to $REPO for it to work. If the
+# endpoint ever goes away, drag the video into a comment box on github.com
+# instead and copy the URL that GitHub inserts.
+REPOSITORY_ID=$(gh api "repos/$REPO" --jq .id)
+
+RESPONSE=$(curl --silent --show-error --fail \
+    --request POST \
+    --header "Authorization: Bearer $(gh auth token)" \
+    --header "Accept: application/json" \
+    --header "Content-Type: video/mp4" \
+    --data-binary "@$OUTPUT" \
+    "https://uploads.github.com/user-attachments/assets?name=$NAME.mp4&content_type=video%2Fmp4&repository_id=$REPOSITORY_ID")
+
+URL=$(echo "$RESPONSE" | sed -e 's/.*"url":"//' -e 's/".*//')
+
+if [ -z "$URL" ]
+then
+    echo "Could not read an attachment URL out of GitHub's response:"
+    echo "$RESPONSE"
+    exit 1
+fi
+
+# An attachment stays private until a posted comment somewhere in the
+# repository refers to it. Until that happens the video is a 404 for anyone who
+# is not signed in, and the README shows a broken player. Referring to it once
+# makes it public for good, even if the comment is deleted afterwards, so we
+# collect the recordings in one issue and leave the comments in place.
+gh api "repos/$REPO/issues/$PUBLISH_ISSUE/comments" \
+    --raw-field "body=$NAME
+
+$URL" > /dev/null
+
+# Make sure that worked before handing over a URL, because the person recording
+# the demo is signed in and will not see the failure.
+ATTEMPT=0
+while [ "$ATTEMPT" -lt 30 ]
+do
+    if curl --silent --fail --output /dev/null --max-time 20 --range 0-1 "$URL"
+    then
+        break
+    fi
+    ATTEMPT=$((ATTEMPT + 1))
+    sleep 2
+done
+
+if [ "$ATTEMPT" -eq 30 ]
+then
+    echo "$URL is still not readable without signing in to GitHub."
+    echo "Embedding it now would give logged-out readers a broken player."
+    exit 1
 fi
 
-echo "Demo recorded to $COMPRESSED_PATH"
+echo "Demo recorded to $OUTPUT"
+echo
+echo "Embed it with:"
+echo "<video src=\"$URL\" controls></video>"
diff --git a/demo/settings.tape b/demo/settings.tape
new file mode 100644
index 00000000000..3c98a213b17
--- /dev/null
+++ b/demo/settings.tape
@@ -0,0 +1,46 @@
+# Terminal settings shared by all demo recordings. The tape that
+# demo/record_demo.sh generates for a demo sources this file.
+
+# Use the non-Mono Nerd Font variant; the Mono variant renders the icons too
+# small.
+Set FontFamily "SauceCodePro NF"
+Set FontSize 24
+Set LineHeight 1.0
+Set Padding 20
+
+# vhs sizes the terminal in pixels rather than in cells, so these two numbers
+# are what produce a 120x35 grid at the font settings above. If you change the
+# font, the font size or the padding, record a tape that runs `stty size` and
+# adjust them until the grid is 120x35 again.
+Set Width 1866
+Set Height 1140
+
+# There is no frame rate setting here because vhs ignores `Set Framerate` when
+# it writes a video; it captures at 25 fps either way.
+
+# The frame around the focused view is bold green, and xterm.js draws bold text
+# in the bright variant of a colour, so brightGreen is the one those frames end
+# up using.
+
+Set Theme {
+    "background": "#1d1d1d",
+    "foreground": "#dddad6",
+    "cursor": "#c7c7c7",
+    "selection": "#44475a",
+    "black": "#7a7a7a",
+    "red": "#fc4384",
+    "green": "#3fb950",
+    "yellow": "#ffa727",
+    "blue": "#102895",
+    "magenta": "#c930c7",
+    "cyan": "#00c5c7",
+    "white": "#c7c7c7",
+    "brightBlack": "#676767",
+    "brightRed": "#ff7fac",
+    "brightGreen": "#56d364",
+    "brightYellow": "#ebdf86",
+    "brightBlue": "#6871ff",
+    "brightMagenta": "#ff76ff",
+    "brightCyan": "#5ffdff",
+    "brightWhite": "#fffefe"
+}
diff --git a/docs-master/dev/Demo_Recordings.md b/docs-master/dev/Demo_Recordings.md
index 1068e688f47..67626ec4c80 100644
--- a/docs-master/dev/Demo_Recordings.md
+++ b/docs-master/dev/Demo_Recordings.md
@@ -8,17 +8,18 @@ You'll want to familiarise yourself with how integration tests are written: see
 
 Ideally we'd run this whole thing through docker but we haven't got that working. So you will need:
 ```
-# for recording
-npm i -g terminalizer
-# for gif compression
-npm i -g gifsicle
-# for mp4 conversion
-brew install ffmpeg
+# for recording; vhs drives ttyd and ffmpeg under the hood
+brew install ttyd ffmpeg
+
+# vhs 0.12.0 runs the tape, reports success and writes no video at all
+# (https://github.com/charmbracelet/vhs/issues/787), so pin the release
+# before it
+go install github.com/charmbracelet/vhs@v0.11.0
 
 # font with icons
-wget https://github.com/ryanoasis/nerd-fonts/releases/download/v3.0.2/DejaVuSansMono.tar.xz && \
-  tar -xf DejaVuSansMono.tar.xz -C /usr/local/share/fonts && \
-  rm DejaVuSansMono.tar.xz
+wget https://github.com/ryanoasis/nerd-fonts/releases/download/v3.0.2/SourceCodePro.tar.xz && \
+  tar -xf SourceCodePro.tar.xz -C ~/Library/Fonts && \
+  rm SourceCodePro.tar.xz
 ```
 
 ## Creating a demo
@@ -49,34 +50,59 @@ The scripts and demo definitions live in the code branches but the output lives
 git worktree add .worktrees/assets assets
 ```
 
-Outputs will be stored in `.worktrees/assets/demos/`. We'll store three separate things:
-* the yaml of the recording
-* the original gif
-* either the compressed gif or the mp4 depending on the output you chose (see below)
+The mp4 of the recording will be stored in `.worktrees/assets/demo/`.
 
 ### Recording the demo
 
 Once you're happy with your demo you can record it using:
 ```sh
-scripts/record_demo.sh [gif|mp4] <path>
+scripts/record_demo.sh <path>
 # e.g.
-scripts/record_demo.sh gif pkg/integration/tests/demo/interactive_rebase.go
+scripts/record_demo.sh pkg/integration/tests/demo/interactive_rebase.go
 ```
 
-~~The gif format is for use in the first video of the readme (it has a larger size but has auto-play and looping)~~
-~~The mp4 format is for everything else (no looping, requires clicking, but smaller size).~~
+The terminal size, font and colours live in `demo/settings.tape`, which the
+script sources into the tape it generates for the demo.
 
-Turns out that you can't store mp4s in a repo and link them from a README so we're gonna just use gifs across the board for now.
+While you are still working on how a demo looks, pass `--no-upload`. That
+leaves the video in `demo/output` (which is git-ignored) and stops there, so
+you can watch it without uploading anything or touching the assets worktree:
 
-### Including demos in README/docs
+```sh
+scripts/record_demo.sh --no-upload pkg/integration/tests/demo/interactive_rebase.go
+```
 
-If you've followed the above steps you'll end up with your output in your assets worktree.
+### Including demos in README/docs
 
-Within that worktree, stage all three output files and raise a PR against the assets branch.
+Recording a demo does three things with the mp4: it writes it to your assets
+worktree, it uploads a copy to GitHub's attachment store, and it posts that
+copy as a comment on the issue named by `PUBLISH_ISSUE` in the script. Then it
+prints the tag to embed:
 
-Then back in the code branch, in the doc, you can embed the recording like so:
-```md
-![Nuke working tree](../assets/demo/interactive_rebase-compressed.gif)
+```html
+<video src="https://github.com/user-attachments/assets/<uuid>" controls></video>
 ```
 
-This means we can update assets without needing to update the docs that embed them.
+GitHub plays a video in a README only when it is served from its own attachment
+store. If you commit a video to the assets branch and link it the way we link
+the images, GitHub drops the whole `<video>` element when it renders the page.
+So the README reads the uploaded copy rather than the one in the assets
+worktree. Keep that one anyway, so that we still have the file if we ever need
+to upload it again. Stage it and raise a PR against the assets branch as you
+would for any other asset.
+
+Attachment URLs are opaque and have no path we can predict, so a new recording
+of an existing demo means a new URL and an edit to the page that embeds it.
+
+That comment on `PUBLISH_ISSUE` is not bookkeeping; it is what makes the video
+watchable. An uploaded attachment is readable only by people signed in to
+GitHub until some posted comment in the repository refers to it, and a README
+on a branch does not count. Skip that step and the video plays for you and
+404s for everyone else, which is easy to miss because you are signed in. The
+script waits until the video can be fetched without a token before it prints
+the tag. Referring to an attachment once is enough and cannot be undone, so
+the comments could be deleted later, but leaving them gives us a dated list of
+every recording.
+
+Uploading needs push access to the lazygit repository. If you don't have it,
+record the demo, then ask a maintainer to upload the mp4 for you.

From 9c86ef15b29f804c44a1957f3fcaf26f8244741c Mon Sep 17 00:00:00 2001
From: Stefan Haller <stefan@haller-berlin.de>
Date: Tue, 22 Sep 2026 19:30:23 +0200
Subject: [PATCH 08/11] Change the demos in the README to videos

---
 README.md | 48 ++++++++++++++++++++++++++++++++----------------
 1 file changed, 32 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 25ab6848381..3440c7b52c8 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,8 @@ A simple terminal UI for git commands
 
 [![GitHub Releases](https://img.shields.io/github/downloads/jesseduffield/lazygit/total)](https://github.com/jesseduffield/lazygit/releases) [![Go Report Card](https://goreportcard.com/badge/github.com/jesseduffield/lazygit)](https://goreportcard.com/report/github.com/jesseduffield/lazygit) [![Codacy Badge](https://app.codacy.com/project/badge/Grade/f46416b715d74622895657935fcada21)](https://app.codacy.com/gh/jesseduffield/lazygit/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade) [![Codacy Badge](https://app.codacy.com/project/badge/Coverage/f46416b715d74622895657935fcada21)](https://app.codacy.com/gh/jesseduffield/lazygit/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_coverage) [![golangci-lint](https://img.shields.io/badge/linted%20by-golangci--lint-brightgreen)](https://golangci-lint.run/) [![GitHub tag](https://img.shields.io/github/v/tag/jesseduffield/lazygit?color=blue)](https://github.com/jesseduffield/lazygit/releases/latest) [![homebrew](https://img.shields.io/homebrew/v/lazygit?color=blue)](https://formulae.brew.sh/formula/lazygit)
 
-![commit_and_push](../assets/demo/commit_and_push-compressed.gif)
+<!-- demo: commit_and_push -->
+<video src="https://github.com/user-attachments/assets/031799d1-740d-4cda-90cf-689513fa9860" controls></video>
 
 </div>
 
@@ -137,7 +138,8 @@ Lazygit is not my fulltime job but it is a hefty part time job so if you want to
 
 Press `0` on a changed file to focus its diff in the main view. The selection covers a whole hunk to begin with, so `<space>` stages that hunk and moves on to the next one. When you want only part of a hunk, press `a` for line-by-line selection and `v` to select a range of lines. What you staged shows up in the pane below. Press `<tab>` to move between the two panes; `<space>` unstages in the lower one. Press `c` to commit without leaving the diff.
 
-![stage_hunks_or_lines](../assets/demo/stage_hunks_or_lines-compressed.gif)
+<!-- demo: stage_hunks_or_lines -->
+<video src="https://github.com/user-attachments/assets/f02dfaca-c64b-4836-953a-9c856c00f7c2" controls></video>
 
 ### Interactive Rebase
 
@@ -147,49 +149,57 @@ You can also perform any of these actions as a once-off (e.g. pressing `s` on a
 
 This demo also uses shift+down to select a range of commits to move and fixup.
 
-![interactive_rebase](../assets/demo/interactive_rebase-compressed.gif)
+<!-- demo: interactive_rebase -->
+<video src="https://github.com/user-attachments/assets/fc546a17-7bde-41d4-b58d-2ec95134d8ae" controls></video>
 
 ### Cherry-pick
 
 Press `shift+c` on a commit to copy it and press `shift+v` to paste (cherry-pick) it.
 
-![cherry_pick](../assets/demo/cherry_pick-compressed.gif)
+<!-- demo: cherry_pick -->
+<video src="https://github.com/user-attachments/assets/740d3af2-e548-47ad-8480-6b117dca939e" controls></video>
 
 ### Bisect
 
 Press `b` in the commits view to mark a commit as good/bad in order to begin a git bisect.
 
-![bisect](../assets/demo/bisect-compressed.gif)
+<!-- demo: bisect -->
+<video src="https://github.com/user-attachments/assets/b05f3d63-7c78-43ef-b4ed-dc335065cdef" controls></video>
 
 ### Nuke the working tree
 
 For when you really want to just get rid of anything that shows up when you run `git status` (and yes that includes dirty submodules) [kidpix style](https://www.youtube.com/watch?v=N4E2B_k2Bss), press `shift+d` to bring up the reset options menu and then select the 'nuke' option.
 
-![Nuke working tree](../assets/demo/nuke_working_tree-compressed.gif)
+<!-- demo: nuke_working_tree -->
+<video src="https://github.com/user-attachments/assets/81f3d396-54f7-4b92-92d7-4711f56b9c17" controls></video>
 
 ### Amend an old commit
 
 Pressing `shift+a` on any commit will amend that commit with the currently staged changes (running an interactive rebase in the background).
 
-![amend_old_commit](../assets/demo/amend_old_commit-compressed.gif)
+<!-- demo: amend_old_commit -->
+<video src="https://github.com/user-attachments/assets/41e34cac-1698-446e-bae8-9eb794b33b3d" controls></video>
 
 ### Filter
 
 You can filter a view with `/`. Here we filter down our branches view and then hit `enter` to view its commits.
 
-![filter](../assets/demo/filter-compressed.gif)
+<!-- demo: filter -->
+<video src="https://github.com/user-attachments/assets/94bf28e8-2309-45b6-9e3d-de7f43200d22" controls></video>
 
 ### Invoke a custom command
 
 Lazygit has a very flexible [custom command system](docs/Custom_Command_Keybindings.md). In this example a custom command is defined which emulates the built-in branch checkout action.
 
-![custom_command](../assets/demo/custom_command-compressed.gif)
+<!-- demo: custom_command -->
+<video src="https://github.com/user-attachments/assets/f7c68622-2c58-43b9-bd47-a1117ff11fd3" controls></video>
 
 ### Worktrees
 
 You can create worktrees to have multiple branches going at once without the need for stashing or creating WIP commits when switching between them. Press `w` in the branches view to create a worktree from the selected branch and switch to it.
 
-![worktree_create_from_branches](../assets/demo/worktree_create_from_branches-compressed.gif)
+<!-- demo: worktree_create_from_branches -->
+<video src="https://github.com/user-attachments/assets/a8cafbb6-9fc0-45bb-860e-cbd88f8b65bb" controls></video>
 
 ### Rebase magic (custom patches)
 
@@ -199,17 +209,20 @@ In this example an old commit contains a change that belongs in a commit of its
 
 Learn more in the [Rebase magic Youtube tutorial](https://youtu.be/4XaToVut_hs).
 
-![custom_patch](../assets/demo/custom_patch-compressed.gif)
+<!-- demo: custom_patch -->
+<video src="https://github.com/user-attachments/assets/9d36b387-56e6-4c72-9c44-83fcf5ad6228" controls></video>
 
 If you only want to remove a hunk from an old commit, you don't need a custom patch for that. Select the hunk in the commit's diff and press `d`. Lazygit rewrites the commit without it, running an interactive rebase in the background.
 
-![remove_hunk_from_commit](../assets/demo/remove_hunk_from_commit-compressed.gif)
+<!-- demo: remove_hunk_from_commit -->
+<video src="https://github.com/user-attachments/assets/86d0b3ec-126d-4c80-a9f2-d2419ab1e578" controls></video>
 
 ### Rebase from marked base commit
 
 Say you're on a feature branch that was itself branched off of the develop branch, and you've decided you'd rather be branching off the master branch. You need a way to rebase only the commits from your feature branch. In this demo we check to see which was the last commit on the develop branch, then press `shift+b` to mark that commit as our base commit, then press `r` on the master branch to rebase onto it, only bringing across the commits from our feature branch. Then we push our changes with `shift+p`.
 
-![rebase_onto](../assets/demo/rebase_onto-compressed.gif)
+<!-- demo: rebase_onto -->
+<video src="https://github.com/user-attachments/assets/7cd0c1d2-d737-4ef9-934e-54a01bd7d270" controls></video>
 
 ### Undo
 
@@ -218,19 +231,22 @@ Undo uses the reflog which is specific to commits and branches so we can't undo
 
 [More info](/docs/Undoing.md)
 
-![undo](../assets/demo/undo-compressed.gif)
+<!-- demo: undo -->
+<video src="https://github.com/user-attachments/assets/8a870289-2ab7-4a7e-8152-a04fa52310c1" controls></video>
 
 ### Commit graph
 
 When viewing the commit graph in an enlarged window (use `+` and `_` to cycle screen modes), the commit graph is shown. Colours correspond to the commit authors, and as you navigate down the graph, the parent commits of the selected commit are highlighted.
 
-![commit_graph](../assets/demo/commit_graph-compressed.gif)
+<!-- demo: commit_graph -->
+<video src="https://github.com/user-attachments/assets/83b8103c-dafc-4540-acd2-0fd9f8227aff" controls></video>
 
 ### Compare two commits
 
 If you press `shift+w` on a commit (or branch/ref) a menu will open that allows you to mark that commit so that any other commit you select will be diffed against it. Once you've selected the second commit, you'll see the diff in the main view and if you press `<enter>` you'll see the files of the diff. You can press `shift+w` to view the diff menu again to see options like reversing the diff direction or exiting diff mode. You can also exit diff mode by pressing `<escape>`.
 
-![diff_commits](../assets/demo/diff_commits-compressed.gif)
+<!-- demo: diff_commits -->
+<video src="https://github.com/user-attachments/assets/7094d9dd-d167-4caf-b79d-6da35a3f0279" controls></video>
 
 ### Show GitHub pull requests
 

From 5a56c609c258be74a863d947f18e63763eddaeb9 Mon Sep 17 00:00:00 2001
From: Stefan Haller <stefan@haller-berlin.de>
Date: Tue, 22 Sep 2026 22:07:30 +0200
Subject: [PATCH 09/11] Add a script for re-recording every demo a page embeds

Changing demo/settings.tape, or anything about how lazygit looks, dates
every recording at once, and re-recording them one at a time means
running the recorder fifteen times and pasting fifteen new URLs.
Attachment URLs say nothing about where they came from, so there is also
nothing to tell you which demo a video in the README is of.

Name the demo in a comment above each video. GitHub drops the comment
when it renders the page, so it costs the reader nothing, and it gives
us a way back from a page to the demo that produced it. Then walk those
comments, re-record each demo and rewrite the URL below it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 Makefile                           |   4 +
 demo/rerecord_demos.sh             | 113 +++++++++++++++++++++++++++++
 docs-master/dev/Demo_Recordings.md |  23 ++++++
 justfile                           |   4 +
 scripts/rerecord_demos.sh          |   3 +
 5 files changed, 147 insertions(+)
 create mode 100755 demo/rerecord_demos.sh
 create mode 100755 scripts/rerecord_demos.sh

diff --git a/Makefile b/Makefile
index 3e56a282102..c1af01d7a4b 100644
--- a/Makefile
+++ b/Makefile
@@ -68,6 +68,10 @@ bump-lazycore:
 record-demo:
 	demo/record_demo.sh $(filter-out $@,$(MAKECMDGOALS))
 
+.PHONY: rerecord-demos
+rerecord-demos:
+	demo/rerecord_demos.sh $(filter-out $@,$(MAKECMDGOALS))
+
 .PHONY: vendor
 vendor:
 	go mod tidy && go mod vendor
diff --git a/demo/rerecord_demos.sh b/demo/rerecord_demos.sh
new file mode 100755
index 00000000000..db5c7140cf9
--- /dev/null
+++ b/demo/rerecord_demos.sh
@@ -0,0 +1,113 @@
+#!/bin/sh
+
+set -e
+
+# Re-records the demos that a page embeds and points the page at the new
+# videos. Use it when a change to demo/settings.tape, or to lazygit's
+# appearance, leaves the existing recordings looking out of date.
+#
+# A page names the demo behind each video in a comment above it:
+#
+#   <!-- demo: commit_and_push -->
+#   <video src="https://github.com/user-attachments/assets/..." controls></video>
+#
+# GitHub drops that comment when it renders the page, so it costs the reader
+# nothing. This script re-records the demo the comment names and rewrites the
+# URL on the line below it.
+
+usage() {
+    echo "Usage: $0 [--no-upload] [page ...]"
+    echo "e.g. $0 README.md"
+    echo
+    echo "Re-records every demo the given pages embed. With no page given,"
+    echo "that means README.md."
+    echo
+    echo "--no-upload leaves the videos in demo/output and the pages untouched,"
+    echo "which is what you want for reviewing a change to demo/settings.tape."
+    exit 1
+}
+
+NO_UPLOAD=
+
+if [ "$1" = "--no-upload" ]
+then
+    NO_UPLOAD=--no-upload
+    shift
+fi
+
+if [ "$1" = "-h" ] || [ "$1" = "--help" ]
+then
+    usage
+fi
+
+if [ ! -x demo/record_demo.sh ]
+then
+    echo "Run this from the root of the repository."
+    exit 1
+fi
+
+if [ "$#" -eq 0 ]
+then
+    set -- README.md
+fi
+
+for PAGE in "$@"
+do
+    if [ ! -f "$PAGE" ]
+    then
+        echo "$PAGE does not exist"
+        exit 1
+    fi
+
+    NAMES=$(sed -n 's/^<!-- demo: \([A-Za-z0-9_]*\) -->$/\1/p' "$PAGE")
+
+    if [ -z "$NAMES" ]
+    then
+        echo "$PAGE embeds no demos. Each video needs a <!-- demo: <name> -->"
+        echo "comment on the line above it to say which demo it came from."
+        exit 1
+    fi
+
+    for NAME in $NAMES
+    do
+        TEST="pkg/integration/tests/demo/$NAME.go"
+
+        if [ ! -f "$TEST" ]
+        then
+            echo "$PAGE asks for a demo called $NAME, but $TEST does not exist"
+            exit 1
+        fi
+
+        echo
+        echo "=== $NAME ==="
+
+        if [ -n "$NO_UPLOAD" ]
+        then
+            demo/record_demo.sh --no-upload "$TEST"
+            continue
+        fi
+
+        # Keep the recording chatter on screen, since a full run takes a while,
+        # and read the new URL back out of it afterwards.
+        LOG=$(mktemp)
+        demo/record_demo.sh "$TEST" | tee "$LOG"
+        URL=$(sed -n 's/.*<video src="\([^"]*\)".*/\1/p' "$LOG")
+        rm -f "$LOG"
+
+        if [ -z "$URL" ]
+        then
+            echo "Recording $NAME produced no URL"
+            exit 1
+        fi
+
+        awk -v marker="<!-- demo: $NAME -->" -v url="$URL" '
+            hit { sub(/src="[^"]*"/, "src=\"" url "\""); hit = 0 }
+            $0 == marker { hit = 1 }
+            { print }
+        ' "$PAGE" > "$PAGE.new"
+
+        mv "$PAGE.new" "$PAGE"
+
+        echo "$PAGE now points at $URL"
+    done
+done
diff --git a/docs-master/dev/Demo_Recordings.md b/docs-master/dev/Demo_Recordings.md
index 67626ec4c80..29b835f3221 100644
--- a/docs-master/dev/Demo_Recordings.md
+++ b/docs-master/dev/Demo_Recordings.md
@@ -106,3 +106,26 @@ every recording.
 
 Uploading needs push access to the lazygit repository. If you don't have it,
 record the demo, then ask a maintainer to upload the mp4 for you.
+
+### Re-recording every demo on a page
+
+Write the name of the demo above each video, so that we can find our way from
+a page back to the demo that produced it:
+
+```html
+<!-- demo: commit_and_push -->
+<video src="https://github.com/user-attachments/assets/<uuid>" controls></video>
+```
+
+GitHub drops the comment when it renders the page. With it in place, a change
+to `demo/settings.tape` or to lazygit's own appearance can be rolled out across
+every recording at once:
+
+```sh
+scripts/rerecord_demos.sh
+# or, to look before you upload anything:
+scripts/rerecord_demos.sh --no-upload
+```
+
+That re-records every demo the README embeds and rewrites each URL in place.
+Name other pages as arguments to do the same for them.
diff --git a/justfile b/justfile
index 0851179b915..07f4a9f9e05 100644
--- a/justfile
+++ b/justfile
@@ -74,5 +74,9 @@ bump-gocui:
 demo *args:
     demo/record_demo.sh {{ args }}
 
+# Re-record every demo the README embeds
+rerecord-demos *args:
+    demo/rerecord_demos.sh {{ args }}
+
 vendor:
     go mod tidy && go mod vendor
diff --git a/scripts/rerecord_demos.sh b/scripts/rerecord_demos.sh
new file mode 100755
index 00000000000..f99f2e3f1b0
--- /dev/null
+++ b/scripts/rerecord_demos.sh
@@ -0,0 +1,3 @@
+#!/bin/sh
+
+demo/rerecord_demos.sh "$@"

From ff8d74971fd9e46f3cc2377b8e93469b972edc64 Mon Sep 17 00:00:00 2001
From: Stefan Haller <stefan@haller-berlin.de>
Date: Mon, 28 Sep 2026 10:25:45 +0200
Subject: [PATCH 10/11] Add a font with the branch drawing symbols for the demo
 recordings

The terminal that vhs records is xterm.js running in a browser, and the
xterm.js that ttyd bundles doesn't draw the branch drawing symbols
itself. So they have to come from a font, and SauceCodePro NF doesn't
have them, nor does any font that macOS comes with. The detailed commit
graph shows up as garbage.

Newer versions of xterm.js do draw the symbols, but only in the WebGL
renderer. vhs forces the canvas renderer, and xterm.js has removed that
since, so moving to a newer xterm.js would mean patching both ttyd and
vhs.

The Flog Symbols font has the symbols, but it draws its lines for a
smaller cell than the one xterm.js uses at our font settings. As a
fallback font, it leaves a gap at the edges of every cell, and each line
of the graph comes out dashed.

Add a copy of the font that fits the cells of the recordings. xterm.js
clips each character to its row, so the vertical strokes reach well
past the top and bottom of the cell and end exactly at the row's edges.
It doesn't clip a character to its cell horizontally, so the horizontal
strokes reach only a little way into the neighbouring cells. Any
further, and they would show past the start of a bend in the next cell.

Give the font a bold face with the same outlines. lazygit draws the
lines of the selected commit in bold, and without a bold face the
browser makes the symbols bold itself by thickening them. That leaves
gaps where they meet.

Add the script that made the font, and list the font after
SauceCodePro NF in demo/settings.tape so that the browser takes the
symbols from it.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 demo/fonts/FlogSymbolsDemo-Bold.ttf    | Bin 0 -> 9716 bytes
 demo/fonts/FlogSymbolsDemo-Regular.ttf | Bin 0 -> 9668 bytes
 demo/fonts/LICENSE-FlogSymbols         |  21 +++++
 demo/fonts/fit_flog_symbols.py         | 116 +++++++++++++++++++++++++
 demo/settings.tape                     |   6 +-
 docs-master/dev/Demo_Recordings.md     |   3 +
 6 files changed, 144 insertions(+), 2 deletions(-)
 create mode 100644 demo/fonts/FlogSymbolsDemo-Bold.ttf
 create mode 100644 demo/fonts/FlogSymbolsDemo-Regular.ttf
 create mode 100644 demo/fonts/LICENSE-FlogSymbols
 create mode 100644 demo/fonts/fit_flog_symbols.py

diff --git a/demo/fonts/FlogSymbolsDemo-Bold.ttf b/demo/fonts/FlogSymbolsDemo-Bold.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..864b6449599ec703f441671a2e1232d362c0606f
GIT binary patch
literal 9716
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
BwTA!z

literal 0
HcmV?d00001

diff --git a/demo/fonts/FlogSymbolsDemo-Regular.ttf b/demo/fonts/FlogSymbolsDemo-Regular.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..0946f38ab7c62f18d0b9c967efd66b67769a33a4
GIT binary patch
literal 9668
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

literal 0
HcmV?d00001

diff --git a/demo/fonts/LICENSE-FlogSymbols b/demo/fonts/LICENSE-FlogSymbols
new file mode 100644
index 00000000000..af6af6c9c7a
--- /dev/null
+++ b/demo/fonts/LICENSE-FlogSymbols
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 rbong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/demo/fonts/fit_flog_symbols.py b/demo/fonts/fit_flog_symbols.py
new file mode 100644
index 00000000000..048aaa1e941
--- /dev/null
+++ b/demo/fonts/fit_flog_symbols.py
@@ -0,0 +1,116 @@
+"""Make a copy of the Flog Symbols font whose lines fill a terminal cell.
+
+The demo recordings draw the commit graph with the branch drawing symbols, and
+the terminal that vhs records takes them from the Flog Symbols Demo font in
+demo/fonts. This script made its regular and bold faces from FlogSymbols.ttf of
+https://github.com/rbong/flog-symbols (see LICENSE-FlogSymbols):
+
+    pip install fonttools
+    python3 demo/fonts/fit_flog_symbols.py FlogSymbols.ttf "Flog Symbols Demo" \\
+        demo/fonts
+
+Flog Symbols draws its lines for a cell that is 620 units wide and reaches from
+-206 to 1006 units. A terminal that takes the symbols from a fallback font
+draws them in the cells of its main font, and if those are larger, the lines
+stop short of the cell edges and leave gaps between neighbouring cells.
+
+So move the ends of the strokes that run to an edge of the cell out to the
+terminal's cell edges, and centre everything else in the cell. The circles and
+bends in the middle of the cell keep their shape.
+"""
+
+import os
+import sys
+
+from fontTools.ttLib import TTFont
+
+# The cell of the symbols, in font units
+LEFT, RIGHT, BOTTOM, TOP = -6, 626, -206, 1006
+
+# The width of the terminal cells in the recordings, in font units: at the font
+# size in demo/settings.tape they are 16 pixels wide (SauceCodePro's 14.4
+# pixels, plus the pixel of letter spacing that vhs adds, rounded up), which is
+# 16/24 of an em. Regenerate the font if the font size changes.
+CELL_WIDTH = 667
+
+# How far the horizontal strokes reach into the neighbouring cells, in font
+# units. xterm.js doesn't clip a character to its cell horizontally, so this
+# has to stay short of where the bends in a neighbouring cell begin. In the
+# recordings, less than 30 leaves a dim line where two cells meet, and 35 or
+# more opens a dark gap there.
+HORIZONTAL_OVERLAP = 30
+
+# How far past the top and bottom of the symbols' cell the vertical strokes
+# reach, in font units. xterm.js clips a character to its row, so this only
+# has to be more than the terminal's row sticks out beyond the symbols' cell.
+VERTICAL_REACH = 400
+
+# Points this close to an edge of the symbols' cell belong to the end of a
+# stroke that runs to that edge
+EDGE_TOLERANCE = 30
+
+
+def main():
+    flog_path, family, output_dir = sys.argv[1:4]
+    font = TTFont(flog_path)
+    fit_to_cell(font)
+
+    # The bold face has the same outlines. Without one, the browser makes the
+    # symbols of bold text bold itself by thickening them, and that leaves gaps
+    # where they meet.
+    for style in ("Regular", "Bold"):
+        set_style(font, family, style)
+        font.save(os.path.join(output_dir, f"{family.replace(' ', '')}-{style}.ttf"))
+
+
+def fit_to_cell(font):
+    glyf = font["glyf"]
+
+    # Centre the symbols in the terminal's cell
+    dx = round((CELL_WIDTH - (RIGHT + LEFT)) / 2)
+
+    for name in font.getGlyphOrder():
+        glyph = glyf[name]
+        if glyph.numberOfContours <= 0:
+            continue
+        coordinates = glyph.coordinates
+        for i, (x, y) in enumerate(coordinates):
+            if x <= LEFT + EDGE_TOLERANCE:
+                x = -HORIZONTAL_OVERLAP
+            elif x >= RIGHT - EDGE_TOLERANCE:
+                x = CELL_WIDTH + HORIZONTAL_OVERLAP
+            else:
+                x += dx
+            if y <= BOTTOM + EDGE_TOLERANCE:
+                y -= VERTICAL_REACH
+            elif y >= TOP - EDGE_TOLERANCE:
+                y += VERTICAL_REACH
+            coordinates[i] = (x, y)
+        glyph.recalcBounds(glyf)
+        font["hmtx"][name] = (CELL_WIDTH, glyph.xMin)
+
+
+def set_style(font, family, style):
+    bold = style == "Bold"
+    postscript_name = f"{family.replace(' ', '')}-{style}"
+    full_name = family if not bold else f"{family} {style}"
+    for record in font["name"].names:
+        if record.nameID == 1:
+            record.string = family
+        elif record.nameID == 2:
+            record.string = style
+        elif record.nameID == 4:
+            record.string = full_name
+        elif record.nameID in (3, 6):
+            record.string = postscript_name
+
+    os2 = font["OS/2"]
+    os2.usWeightClass = 700 if bold else 400
+    fs_bold, fs_regular = 1 << 5, 1 << 6
+    os2.fsSelection &= ~(fs_bold | fs_regular)
+    os2.fsSelection |= fs_bold if bold else fs_regular
+    font["head"].macStyle = 1 if bold else 0
+
+
+if __name__ == "__main__":
+    main()
diff --git a/demo/settings.tape b/demo/settings.tape
index 3c98a213b17..96e81c55dd6 100644
--- a/demo/settings.tape
+++ b/demo/settings.tape
@@ -2,8 +2,10 @@
 # demo/record_demo.sh generates for a demo sources this file.
 
 # Use the non-Mono Nerd Font variant; the Mono variant renders the icons too
-# small.
-Set FontFamily "SauceCodePro NF"
+# small. The terminal that vhs records doesn't draw the branch drawing symbols
+# of the commit graph itself, so they come from the second font, which is in
+# demo/fonts.
+Set FontFamily "SauceCodePro NF,Flog Symbols Demo"
 Set FontSize 24
 Set LineHeight 1.0
 Set Padding 20
diff --git a/docs-master/dev/Demo_Recordings.md b/docs-master/dev/Demo_Recordings.md
index 29b835f3221..20750071129 100644
--- a/docs-master/dev/Demo_Recordings.md
+++ b/docs-master/dev/Demo_Recordings.md
@@ -20,6 +20,9 @@ go install github.com/charmbracelet/vhs@v0.11.0
 wget https://github.com/ryanoasis/nerd-fonts/releases/download/v3.0.2/SourceCodePro.tar.xz && \
   tar -xf SourceCodePro.tar.xz -C ~/Library/Fonts && \
   rm SourceCodePro.tar.xz
+
+# font with the branch drawing symbols of the commit graph
+cp demo/fonts/FlogSymbolsDemo-*.ttf ~/Library/Fonts
 ```
 
 ## Creating a demo

From 40a1027b89541a1524e4a0b89aa5556914cc5205 Mon Sep 17 00:00:00 2001
From: Stefan Haller <stefan@haller-berlin.de>
Date: Mon, 28 Sep 2026 10:26:22 +0200
Subject: [PATCH 11/11] Draw the commit graph in the demos with the detailed
 style

The 'auto' style doesn't recognize the terminal that vhs records, so it
would draw the classic graph. Now that the recordings have a font for
the branch drawing symbols, use the detailed graph in all demos.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 pkg/integration/tests/demo/shared.go | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pkg/integration/tests/demo/shared.go b/pkg/integration/tests/demo/shared.go
index f647829628c..734c1e1f816 100644
--- a/pkg/integration/tests/demo/shared.go
+++ b/pkg/integration/tests/demo/shared.go
@@ -16,4 +16,7 @@ func setGeneratedAuthorColours(config *config.AppConfig) {
 func setDefaultDemoConfig(config *config.AppConfig) {
 	// demos look much nicer with icons shown
 	config.GetUserConfig().Gui.NerdFontsVersion = "3"
+	// The terminal that we record demos in doesn't tell us that it can draw the
+	// detailed graph; demo/settings.tape gives it a font for it
+	config.GetUserConfig().Gui.CommitGraphStyle = "detailed"
 }