docs: replace placeholder screenshots and add a one-minute tour video

Every placeholder frame in docs/ now shows a real capture of the current build: 20 screenshots plus two short looping clips (prompt editor, pane drag). The README and the docs home page link a one-minute tour covering agent status across repos, one agent driving another through the CLI, the prompt editor, diffs, pane dragging, and sessions surviving a quit.
2026-09-25 08:02:32 +00:00 · 2026-09-24 08:18:14 +08:00
parent 1ca7268919
commit fed4aec170
50 changed files with 64 additions and 44 deletions
@@ -36,6 +36,14 @@ below follows from that.
 - **Editor-grade input** — suggestions, completion, highlighting, history search, with no plugin to install
 - **Remote development** — files, repos, panes, and git data stay on the remote machine, over a native SSH stack

+<div align="center">
+
+<a href="assets/tour.mp4"><img src="assets/tour-poster.webp" alt="One-minute tour of tty7: agents across repos, one agent driving another through the CLI, the prompt editor, diffs, dragging panes, and sessions that survive quitting the app" width="720" /></a>
+
+<sub>Agents across repos · one agent driving another · the prompt editor · diffs · dragging panes · quit, reopen, still running</sub>
+
+</div>
+
 ## Install

 Native builds for macOS, Windows, and Linux on [**Releases**](https://github.com/l0ng-ai/tty7/releases):
@@ -35,6 +35,14 @@
 - **编辑器级输入**：建议、补全、高亮、历史搜索，不用装任何插件
 - **远程开发**：文件、仓库、pane 和 git 信息都留在远端机器上，走自带的 SSH 栈

+<div align="center">
+
+<a href="assets/tour.mp4"><img src="assets/tour-poster.webp" alt="tty7 一分钟演示：多仓库 agent、一个 agent 通过 CLI 驱动另一个、提示符编辑器、diff、拖动 pane、退出应用后会话仍在运行" width="720" /></a>
+
+<sub>多仓库 agent · agent 驱动 agent · 提示符编辑器 · diff · 拖动 pane · 退出重开，照样在跑</sub>
+
+</div>
+
 ## 安装

 macOS、Windows、Linux 的原生构建都在 [**Releases**](https://github.com/l0ng-ai/tty7/releases)：
@@ -9,8 +9,8 @@ the agent you get, running in a normal PTY, with its own UI. tty7 adds the
 things a terminal is in a position to add — who is running where, what they
 need, and what changed.

-<Frame caption="Placeholder — screenshot: a sidebar of agent sessions across several repos, each with a brand avatar and status dot">
-  <img src="/images/placeholder.svg" alt="Agent sessions in the tty7 sidebar" />
+<Frame caption="Agent sessions across several repos, each with its avatar, status dot, branch, and diff">
+  <img src="/images/agents-overview.webp" alt="Agent sessions in the tty7 sidebar" />
 </Frame>

 ## Which agents
@@ -56,8 +56,8 @@ Every tab chip and sidebar row carries a dot:
 | 🟠 **Amber** | Needs your input — a permission prompt, a question |
 | 🟢 **Green** | Done with this turn |

-<Frame caption="Placeholder — screenshot: three sidebar rows, one working, one waiting, one done">
-  <img src="/images/placeholder.svg" alt="Agent status dots" />
+<Frame caption="Working (blue), waiting on you (amber), and done (green), side by side">
+  <img src="/images/agent-status.webp" alt="Agent status dots" />
 </Frame>

 The same three states are what `tty7 agents` reports as `working` / `waiting` /
@@ -30,8 +30,8 @@ button, which puts the default back.
 **Restore all defaults** at the bottom undoes every rebinding at once. There is
 no undo for that one.

-<Frame caption="Placeholder — screenshot: the Keybindings page mid-capture, showing “Press keys…”">
-  <img src="/images/placeholder.svg" alt="Rebinding a shortcut" />
+<Frame caption="Rebinding a shortcut: the row waits for “Press keys…”">
+  <img src="/images/keybindings-capture.webp" alt="Rebinding a shortcut" />
 </Frame>

 ## Actions with no default key
@@ -7,8 +7,8 @@ description: "What lives in each section, and how the settings file works."
 setting names *and* keywords, which is usually faster than remembering which
 section something is in.

-<Frame caption="Placeholder — screenshot: the Settings window with the section list on the left">
-  <img src="/images/placeholder.svg" alt="tty7 Settings" />
+<Frame caption="Settings opens in its own window, sections down the left">
+  <img src="/images/settings.webp" alt="tty7 Settings" />
 </Frame>

 ## The eight sections
@@ -12,8 +12,8 @@ palette — opens the theme picker.
 |---|---|
 | Light *(default)* · One Light · Catppuccin Latte · Rosé Pine Dawn | Dark · Dracula · Harbor · One Dark Pro · Rosé Pine · Catppuccin Mocha · Gruvbox Dark · Nord · Tokyo Night |

-<Frame caption="Placeholder — screenshot: the theme picker with light and dark sections">
-  <img src="/images/placeholder.svg" alt="The tty7 theme picker" />
+<Frame caption="The theme picker, light themes first, then dark">
+  <img src="/images/theme-picker.webp" alt="The tty7 theme picker" />
 </Frame>

 ## Following the system
@@ -48,8 +48,8 @@ Workspaces are how tty7 keeps ten repositories from becoming forty
 indistinguishable tabs. They also travel: a workspace on a remote machine is
 still a workspace, opened from the same switcher.

-<Frame caption="Placeholder — screenshot: the workspace switcher, workspaces on the left, that workspace's tabs on the right">
-  <img src="/images/placeholder.svg" alt="The tty7 workspace switcher" />
+<Frame caption="The workspace switcher: workspaces on the left, that workspace's tabs on the right">
+  <img src="/images/workspace-switcher.webp" alt="The tty7 workspace switcher" />
 </Frame>

 ## The server
@@ -10,8 +10,8 @@ end up changing anyway, so they are worth five minutes now.
 Open Settings with <kbd>⌘ ,</kbd> (<kbd>Ctrl ,</kbd> on Windows and Linux), or
 from the command palette (<kbd>⌘ P</kbd> → *Settings*).

-<Frame caption="Placeholder — screenshot: the Settings window, Appearance section">
-  <img src="/images/placeholder.svg" alt="tty7 Settings" />
+<Frame caption="Settings → Appearance">
+  <img src="/images/settings-appearance.webp" alt="tty7 Settings" />
 </Frame>

 ## 1. Pick a theme
@@ -16,8 +16,8 @@ pane you were reading stays on screen. <kbd>Esc</kbd> closes it, and its header
 right-clicks to a menu that fills the window with it if you prefer that —
 [more about the column →](/window/side-panel#where-it-opens)

-<Frame caption="Placeholder — screenshot: the diff overlay, side-by-side, several files">
-  <img src="/images/placeholder.svg" alt="The tty7 diff overlay" />
+<Frame caption="The diff, side by side, across every changed file">
+  <img src="/images/diff-overlay.webp" alt="The tty7 diff overlay" />
 </Frame>

 ## Side-by-side or unified
@@ -7,8 +7,8 @@ The **Source Control** tab of the [side panel](/window/side-panel) (<kbd>⌘ J</
 is a full git client for whichever repository the focused pane is in. It follows
 the pane: `cd` into another repository and the panel switches with you.

-<Frame caption="Placeholder — screenshot: the Source Control panel with staged and unstaged groups and a commit box">
-  <img src="/images/placeholder.svg" alt="The tty7 source control panel" />
+<Frame caption="The Source Control panel: branch, commit box, staged and unstaged changes, history">
+  <img src="/images/source-control.webp" alt="The tty7 source control panel" />
 </Frame>

 ## Changes
@@ -19,8 +19,8 @@ the application menu — asks three things:

 Each field opens on a suggestion you can accept or type straight over.

-<Frame caption="Placeholder — screenshot: the New Worktree Tab dialog">
-  <img src="/images/placeholder.svg" alt="Creating a worktree" />
+<Frame caption="The New Worktree Tab dialog, every field pre-filled">
+  <img src="/images/new-worktree.webp" alt="Creating a worktree" />
 </Frame>

 Confirm and tty7 creates the worktree, opens a tab in it, and starts a shell
@@ -19,6 +19,10 @@ terminal core. In practice that means roughly twice the throughput of Alacritty,
 Ghostty, or Kitty on a big `cat`, and a frame rate that does not fall over when
 something floods the screen.

+<Frame caption="A one-minute tour: agents across repos, one agent driving another, the prompt editor, diffs, dragging panes, and sessions that outlive the window">
+  <video controls playsInline poster="/images/tour-poster.webp" src="/images/tour.mp4" aria-label="tty7 tour" />
+</Frame>
+
 ## What makes it different

 <CardGroup cols={2}>
@@ -67,8 +67,8 @@ need it about as often as you need `ssh -R`.

 These live only as long as the session unless you save them into the profile.

-<Frame caption="Placeholder — screenshot: the Ports section with a forwarded port and a dynamic rule">
-  <img src="/images/placeholder.svg" alt="The ports section" />
+<Frame caption="The Ports section with a local forward and a dynamic (SOCKS) rule">
+  <img src="/images/ports.webp" alt="The ports section" />
 </Frame>

 ## Links in the terminal
@@ -7,8 +7,8 @@ While a pane is in an SSH session, *SSH: Remote Files* (command palette) slides
 a file panel in over it. It is a real SFTP client on the same connection — no
 second login, no second password.

-<Frame caption="Placeholder — screenshot: the SFTP panel over a pane, with a transfer in progress">
-  <img src="/images/placeholder.svg" alt="The tty7 SFTP panel" />
+<Frame caption="The SFTP panel over an SSH pane, a download in progress">
+  <img src="/images/sftp-panel.webp" alt="The tty7 SFTP panel" />
 </Frame>

 ## Browsing
@@ -11,8 +11,8 @@ That is what makes the rest possible: credentials in the OS keychain,
 you can add mid-session, and authentication prompts drawn as sheets in the pane
 instead of a password echoing into your shell.

-<Frame caption="Placeholder — screenshot: an SSH connection sheet asking for a key passphrase inside a pane">
-  <img src="/images/placeholder.svg" alt="Connecting over SSH in tty7" />
+<Frame caption="A key passphrase asked for as a sheet inside the pane, with the option to keep it in the keychain">
+  <img src="/images/ssh-passphrase.webp" alt="Connecting over SSH in tty7" />
 </Frame>

 ## Four ways to connect
@@ -10,8 +10,8 @@ list — all of it is the remote machine's, rendered here.

 Nothing is synced or copied. The repository stays where it is.

-<Frame caption="Placeholder — screenshot: a remote workspace open, sidebar showing remote repos, with the machine name in the strip">
-  <img src="/images/placeholder.svg" alt="A remote workspace in tty7" />
+<Frame caption="A remote workspace: repos, branches, and changes from the far machine">
+  <img src="/images/remote-workspace.webp" alt="A remote workspace in tty7" />
 </Frame>

 ## Connecting
@@ -18,8 +18,8 @@ into their most recent occurrence. Ranking mixes frequency with recency, and
 commands you ran in the *current* directory are pushed up, so the thing you want
 is usually the thing you last did here.

-<Frame caption="Placeholder — screenshot: ⌃R open, matching rows showing relative time and a failed exit">
-  <img src="/images/placeholder.svg" alt="Fuzzy history search" />
+<Frame caption="⌃R: fuzzy matches with relative time, a failed run marked by its exit code">
+  <img src="/images/history-search.webp" alt="Fuzzy history search" />
 </Frame>

 <kbd>⏎</kbd> puts the command on the prompt. <kbd>⌘ ⏎</kbd> puts it there and
@@ -6,8 +6,8 @@ description: "Ghost suggestions, tab completion that explains itself, syntax hig
 tty7 puts an editor at the shell prompt. Nothing to install, no plugin to source
 — the moment a supported shell starts in a pane, the prompt behaves like this.

-<Frame caption="Placeholder — video: typing a command with a ghost suggestion, accepting it, then opening the completion menu">
-  <img src="/images/placeholder.svg" alt="The tty7 prompt" />
+<Frame caption="Ghost suggestions from history, then the completion menu">
+  <video autoPlay muted loop playsInline src="/images/prompt-editor.mp4" aria-label="The tty7 prompt" />
 </Frame>

 ## Ghost suggestions
@@ -35,8 +35,8 @@ build up first, and it carries across sessions and reboots.
  commands — `git`, `cargo`, `docker`, `kubectl`, `npm`, `brew` and the rest
 - **Values** where a flag only takes certain ones

-<Frame caption="Placeholder — screenshot: the completion menu on `git c`, each subcommand with its description">
-  <img src="/images/placeholder.svg" alt="Explained tab completion" />
+<Frame caption="Completion on `git ch`, each subcommand with its description">
+  <img src="/images/prompt-completion.webp" alt="Explained tab completion" />
 </Frame>

 When tty7 has nothing useful to offer, the <kbd>⇥</kbd> falls through to your
@@ -10,8 +10,8 @@ Every action tty7 can perform is in here, whether or not it has a keybinding —
 which makes it the fastest way to reach the ones that deliberately ship unbound,
 like pane resize and swap.

-<Frame caption="Placeholder — screenshot: the command palette open over a terminal, grouped results">
-  <img src="/images/placeholder.svg" alt="The tty7 command palette" />
+<Frame caption="The command palette over a terminal, filtered to pane actions">
+  <img src="/images/command-palette.webp" alt="The tty7 command palette" />
 </Frame>

 ## What is in it
@@ -24,8 +24,8 @@ Matches are highlighted in place and the view scrolls to each one as you step
 through. On Windows and Linux the shortcuts are <kbd>Ctrl ⇧ F</kbd> to open,
 <kbd>F3</kbd> and <kbd>⇧ F3</kbd> to step.

-<Frame caption="Placeholder — screenshot: the find bar with matches highlighted in the scrollback">
-  <img src="/images/placeholder.svg" alt="Searching the scrollback" />
+<Frame caption="The find bar, with matches highlighted in the scrollback">
+  <img src="/images/find-bar.webp" alt="Searching the scrollback" />
 </Frame>

 <Tip>
@@ -9,8 +9,8 @@ hidden by default; whichever tab you leave it on is where it opens next time.
 The three icons at the top switch tabs, and clicking the lit one puts the panel
 away again.

-<Frame caption="Placeholder — screenshot: the side panel showing the Info tab beside a terminal">
-  <img src="/images/placeholder.svg" alt="The tty7 side panel" />
+<Frame caption="The Info tab beside a terminal: session, processes, listening ports">
+  <img src="/images/side-panel.webp" alt="The tty7 side panel" />
 </Frame>

 ## Info
@@ -10,8 +10,8 @@ is doing.

 <kbd>⌘ B</kbd> shows and hides it. Drag its right edge to resize.

-<Frame caption="Placeholder — screenshot: the sidebar with two repo groups, agent avatars and status dots, branch and +N −M counts">
-  <img src="/images/placeholder.svg" alt="The tty7 tab sidebar" />
+<Frame caption="Tabs grouped by repository, with agent avatars, status dots, branch, and +N −M">
+  <img src="/images/sidebar.webp" alt="The tty7 tab sidebar" />
 </Frame>

 ## Grouped by repository
@@ -54,8 +54,8 @@ with **Settings → Appearance → Dim inactive panes**.
 Hover a pane and a small grip appears along its top edge. Drag it to move that
 pane somewhere else in the tab.

-<Frame caption="Placeholder — video: dragging a pane by its grip, with the landing highlighted">
-  <img src="/images/placeholder.svg" alt="Dragging a pane to a new position" />
+<Frame caption="Dragging a pane by its grip, with the landing highlighted">
+  <video autoPlay muted loop playsInline src="/images/pane-drag.mp4" aria-label="Dragging a pane to a new position" />
 </Frame>

 Where you drop it decides what happens: