ADE Code TUI: kill drawer flicker + marketing site refresh (#594)

* ADE Code TUI: kill drawer flicker + marketing site refresh

ADE Code (TUI):
- Kill drawer flicker: single-line lane cards so selecting a lane only adds a
  violet border (no row reflow); a shared ChatRow renders the expanded + compact
  chat lists identically; drop the CHATS header and timestamps;
  stableInkViewportRows reserves a row to avoid Ink-5 full-screen clears;
  terminal-preview frame dedup; visible-only PTY buffering with bounded flush.
- Sync provider glyphs/colors 1:1 to the model picker; per-draft notice scoping
  (draft:N); simplified cross-terminal mouse baseline; modified-key word
  backspace; grid Tab escapes to side panes.

Web:
- PNG -> WebP image migration; HomePage editorial restructure into FeatureGrid /
  ShipShowcase; new OgImage /_og card; vercel cache headers for images/videos;
  brand + demo media assets.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* fix(ci+review): commit README hero asset + address CodeRabbit feedback

- assets/readme/hero.png: force-add the README hero image (gitignored as *.png,
  so validate-docs failed in CI on the missing target while passing locally).
  Matches the existing tracked-PNG pattern (og-image.png, logo.png).
- vercel.json: drop `immutable` for /images + /videos (stable, non-fingerprinted
  filenames) in favor of `max-age=0, s-maxage=31536000, must-revalidate` so the
  CDN still caches a year but browsers pick up media updates.
- FeatureGrid Lightbox: add modal focus containment + restoration (focus the
  close button on open, trap Tab inside the dialog, restore focus on close).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: arul28

README.md

@@ -1,36 +1,35 @@
 <p align="center">
   <a href="https://ade-app.dev">
-    <img src="assets/logo.png" alt="ADE" width="260" />
+    <img src="assets/logo.png" alt="ADE" width="240" />
   </a>
 </p>
 
 <p align="center">
   <strong>A single native workspace for every AI coding agent.</strong><br />
-  <em>macOS, Windows, iOS, CLI — synced in real time.</em>
+  <em>macOS, iOS, CLI — synced in real time.</em>
 </p>
 
 <p align="center">
-  <a href="https://ade-app.dev"><strong>Website</strong></a>
-  &nbsp;·&nbsp;
-  <a href="https://ade-app.dev/docs"><strong>Docs</strong></a>
-  &nbsp;·&nbsp;
-  <a href="https://github.com/arul28/ADE/releases/latest"><strong>Download</strong></a>
-  &nbsp;·&nbsp;
-  <a href="https://www.ade-app.dev/docs/changelog"><strong>Changelog</strong></a>
+  <a href="https://github.com/arul28/ADE/releases/latest"><img src="https://img.shields.io/badge/Download_for_macOS-7C3AED?style=for-the-badge&logo=apple&logoColor=white" alt="Download for macOS" /></a>
+  &nbsp;
+  <a href="https://ade-app.dev"><img src="https://img.shields.io/badge/Website-12101a?style=for-the-badge&logo=googlechrome&logoColor=a78bfa" alt="Website" /></a>
+  &nbsp;
+  <a href="https://ade-app.dev/docs"><img src="https://img.shields.io/badge/Docs-12101a?style=for-the-badge&logo=readthedocs&logoColor=a78bfa" alt="Docs" /></a>
+  &nbsp;
+  <a href="https://github.com/arul28/ADE"><img src="https://img.shields.io/badge/GitHub-12101a?style=for-the-badge&logo=github&logoColor=a78bfa" alt="GitHub" /></a>
 </p>
 
 <p align="center">
-  <img src="https://img.shields.io/badge/100%25%20Free-7c3aed?style=flat-square&labelColor=1a1a24" alt="100% Free" />
-  <img src="https://img.shields.io/badge/Open%20Source-a78bfa?style=flat-square&labelColor=1a1a24" alt="Open source" />
-  <a href="LICENSE"><img src="https://img.shields.io/badge/AGPL--3.0-efe6d0?style=flat-square&labelColor=1a1a24" alt="AGPL-3.0 license" /></a>
-  <a href="https://github.com/arul28/ADE/releases/latest"><img src="https://img.shields.io/github/v/release/arul28/ADE?label=latest&style=flat-square&labelColor=1a1a24&color=a78bfa" alt="Latest release" /></a>
-  <a href="https://github.com/arul28/ADE/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/arul28/ADE/ci.yml?branch=main&label=CI&style=flat-square&labelColor=1a1a24" alt="CI status" /></a>
+  <a href="https://github.com/arul28/ADE/releases/latest"><img src="https://img.shields.io/github/v/release/arul28/ADE?style=flat-square&label=release&labelColor=12101a&color=a78bfa" alt="Latest release" /></a>
+  <a href="https://github.com/arul28/ADE/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/arul28/ADE/ci.yml?branch=main&style=flat-square&label=CI&labelColor=12101a&color=7c3aed" alt="CI" /></a>
+  <a href="LICENSE"><img src="https://img.shields.io/badge/license-AGPL--3.0-7c3aed?style=flat-square&labelColor=12101a" alt="AGPL-3.0" /></a>
+  <img src="https://img.shields.io/github/downloads/arul28/ADE/total?style=flat-square&label=downloads&labelColor=12101a&color=a78bfa" alt="Downloads" />
+  <a href="https://github.com/arul28/ADE/stargazers"><img src="https://img.shields.io/github/stars/arul28/ADE?style=flat-square&labelColor=12101a&color=a78bfa" alt="Stars" /></a>
+  <img src="https://img.shields.io/badge/macOS-13%2B-efe6d0?style=flat-square&labelColor=12101a" alt="macOS 13+" />
 </p>
 
 <p align="center">
-  <img src="assets/readme/hero-desktop.png" alt="ADE on macOS" width="720" />
-  &nbsp;
-  <img src="assets/readme/hero-iphone.png" alt="ADE on iOS" width="180" />
+  <a href="https://ade-app.dev"><img src="assets/readme/hero.png" alt="ADE — every AI coding tool, one app that runs everywhere" width="900" /></a>
 </p>
 
 ADE runs **Claude Code, Codex, Cursor, Factory Droid, OpenCode** — every major AI coding agent — inside one native workspace. Claude runs through the bundled Claude Agent SDK, while desktop and `ade code` share the same worktree-scoped chat runtime. Every task is its own git worktree, so agents ship features in parallel. Review and merge PRs in-app. Approve a diff from your phone while another agent tests on your Mac.
@@ -42,12 +41,12 @@ Free, open source, local-first. Bring your own keys or subs.
 <table>
 <tr>
 <td width="55%" valign="middle">
-  <img src="apps/web/public/images/screenshots/lanes.png" alt="Parallel worktrees" />
+  <img src="assets/readme/auto-worktrees.gif" alt="Auto-create a git worktree from a task" />
 </td>
 <td width="45%" valign="middle">
 
 ### Manage worktrees. In parallel.
-Every task gets its own git worktree. Branch, edit, test, and commit side by side — no stashing, no rebasing, no context switch.
+Every task gets its own git worktree. Describe it and ADE spins up the branch — edit, test, and commit side by side, with no stashing, no rebasing, no context switch.
 
 </td>
 </tr>
@@ -56,52 +55,70 @@ Every task gets its own git worktree. Branch, edit, test, and commit side by sid
 <td width="45%" valign="middle">
 
 ### Every coding agent. One workspace.
-Claude Code, Codex, Cursor, Factory Droid, OpenCode — pick whichever model fits the task. All run against the same worktree, with live diffs and approval gates.
+Claude Code, Codex, Cursor, Factory Droid, OpenCode — pick whichever model fits the task. All run against the same worktree, with live diffs and approval gates. Grid view tiles every run side by side.
 
 </td>
 <td width="55%" valign="middle">
-  <img src="apps/web/public/images/screenshots/run.png" alt="An agent executing live" />
+  <img src="assets/readme/grid-view.gif" alt="Grid view — multiple agents running in parallel" />
 </td>
 </tr>
 
 <tr>
 <td width="55%" valign="middle">
-  <img src="apps/web/public/images/screenshots/prs.png" alt="Pull request review" />
+  <img src="assets/readme/ade-code-tui.gif" alt="ADE Code — the terminal-native TUI" />
 </td>
 <td width="45%" valign="middle">
 
+### The whole IDE. In your terminal.
+`ade code` is ADE, terminal-native — the same worktrees, chats, and PRs in a fast TUI. Start in the shell, finish on the desktop or your phone.
+
+</td>
+</tr>
+
+<tr>
+<td width="45%" valign="middle">
+
 ### Open, review, and merge PRs.
 Every PR your agents open lands in ADE — diff, CI, comments, merge button. No GitHub tab. Auto-merge when green.
 
+</td>
+<td width="55%" valign="middle">
+  <img src="assets/readme/pr-review.webp" alt="Pull request review inside ADE" />
 </td>
 </tr>
 
 <tr>
+<td width="55%" valign="middle">
+  <img src="assets/readme/cto.webp" alt="The CTO — a team of worker agents" />
+</td>
 <td width="45%" valign="middle">
 
 ### The conductor for your agents.
 An always-on CTO with context across every worktree. Pulls work from Linear, dispatches to the right worker, reports back when it's done.
 
-</td>
-<td width="55%" valign="middle">
-  <img src="apps/web/public/images/screenshots/cto.png" alt="The CTO agent" />
 </td>
 </tr>
 
 <tr>
-<td width="55%" valign="middle" align="center">
-  <img src="apps/web/public/images/screenshots/agent-chat.png" alt="ADE on iOS" width="240" />
-</td>
 <td width="45%" valign="middle">
 
 ### Everything above. On your phone.
 Every worktree, every agent, every PR — synced to iOS. Start a task on macOS, approve the diff from the train.
 
+</td>
+<td width="55%" valign="middle" align="center">
+  <img src="assets/readme/mobile-chat.webp" alt="ADE on iOS — agent chat" width="216" />
+  &nbsp;
+  <img src="assets/readme/mobile-pr.webp" alt="ADE on iOS — pull requests" width="216" />
 </td>
 </tr>
 </table>
 
-Plus files, terminals, git history, workspace graph, multi-tasking, Linear sync, cron automations, computer-use proofs, and the `ade` CLI.
+<p align="center">
+  <img src="assets/readme/worktree-graph.webp" alt="The worktree graph — dependencies, conflict risk, and rebase order" width="900" />
+</p>
+
+Plus files, terminals, git history, the workspace graph, multi-tasking, Linear sync, cron automations, computer-use proofs, and the `ade` CLI.
 
 ## Install
 

apps/ade-cli/src/tuiClient/__tests__/Drawer.test.tsx

@@ -42,7 +42,7 @@ afterEach(() => {
 });
 
 describe("Drawer diff stats", () => {
-  it("renders the selected lane's diff stats from line stats, not ahead/behind, and hides others", () => {
+  it("renders every lane's diff stats inline (not just the selected one) and shows no timestamp", () => {
     vi.useFakeTimers();
     vi.setSystemTime(new Date("2026-05-12T12:00:00.000Z"));
 
@@ -55,7 +55,7 @@ describe("Drawer diff stats", () => {
       "lane-2": { additions: 428, deletions: 112, files: 6 },
     };
 
-    const frameSelectFirst = stripAnsi(render(
+    const frame = stripAnsi(render(
       <Drawer
         lanes={lanes}
         sessions={[]}
@@ -69,36 +69,17 @@ describe("Drawer diff stats", () => {
       />,
     ).lastFrame() ?? "");
 
-    // lane-1 is selected → its diff renders; lane-2 stays hidden.
-    expect(frameSelectFirst).toContain("+64");
-    expect(frameSelectFirst).toContain("−18");
-    expect(frameSelectFirst).toContain("5m");
-    expect(frameSelectFirst).not.toContain("+428");
-    expect(frameSelectFirst).not.toContain("−112");
-    expect(frameSelectFirst).not.toContain("+492");
-    expect(frameSelectFirst).not.toContain("−130");
-    expect(frameSelectFirst).not.toContain("+141 / −112");
-    expect(frameSelectFirst).not.toContain("-18");
-
-    const frameSelectSecond = stripAnsi(render(
-      <Drawer
-        lanes={lanes}
-        sessions={[]}
-        activeLaneId="lane-2"
-        activeSessionId={null}
-        browsingLaneId="lane-2"
-        selectedLaneIndex={1}
-        selectedChatIndex={-1}
-        panelHeight={30}
-        diffByLaneId={diffByLaneId}
-      />,
-    ).lastFrame() ?? "");
-
-    // lane-2 selected → its diff shows; lane-1 stays hidden.
-    expect(frameSelectSecond).toContain("+428");
-    expect(frameSelectSecond).toContain("−112");
-    expect(frameSelectSecond).not.toContain("+64");
-    expect(frameSelectSecond).not.toContain("−18");
+    // The diff is shown on every lane card, selected or not — it replaced the
+    // green "run" chip and refreshes in place.
+    expect(frame).toContain("+64");
+    expect(frame).toContain("−18");
+    expect(frame).toContain("+428");
+    expect(frame).toContain("−112");
+    // ahead/behind line stats are not surfaced, and the lane card no longer
+    // carries a "Xm" age timestamp.
+    expect(frame).not.toContain("+141 / −112");
+    expect(frame).not.toContain("-18");
+    expect(frame).not.toContain("5m");
   });
 });
 
@@ -166,7 +147,11 @@ describe("Drawer lane and chat navigation layout", () => {
     expect(laneModeFrame).toContain("First chat");
     expect(laneModeFrame).toContain("enter chats");
     expect(laneModeFrame).not.toContain("││");
-    expect(chatModeFrame).toContain("CHATS · 1");
+    // The expanded chat list no longer carries a "CHATS · N" sub-header — a
+    // selected lane looks like a collapsed one plus its violet border and the
+    // trailing "+ new chat" row.
+    expect(chatModeFrame).not.toContain("CHATS ·");
+    expect(chatModeFrame).toContain("First chat");
     expect(chatModeFrame.indexOf("First chat")).toBeLessThan(chatModeFrame.indexOf("+ new chat"));
     expect(chatModeFrame).not.toContain("││");
     // Chats-mode footer now hints at how to escape the chat list since arrows
@@ -277,7 +262,6 @@ describe("Drawer lane and chat navigation layout", () => {
     ).lastFrame() ?? "");
 
     expect(frame).toContain("miss");
-    expect(frame).toContain("CHATS · unavailable");
     expect(frame).toContain("worktree missing");
     expect(frame).toContain("lane unavailable");
     expect(frame).not.toContain("+ new chat");
@@ -380,6 +364,9 @@ describe("Drawer active chat indicator", () => {
       />,
     ).lastFrame() ?? "");
 
-    expect(frame).toMatch(/[◐◓◑◒] now/);
+    // The active chat carries a live spinner (no "now"/age text — the panel
+    // shows no timestamps).
+    expect(frame).toMatch(/[◐◓◑◒]/);
+    expect(frame).not.toContain("now");
   });
 });