fix(app): settle padded and stalled chat history

Measure the native history edge using the same content area as viewport filling, and bound child history requests so retry can start after a stalled fetch.

docs/timeline-sync.md

@@ -69,8 +69,8 @@ Source coverage still includes interleaved tool updates.
 
 Canonical IDs define runs. With missing IDs, human prompts, heartbeats and typed received
 agent messages each start a fallback turn. This deterministic fallback is shared by paging
-and presentation; it cannot recover historical batching or steering. Older history remains
-user-driven by scrolling upward.
+and presentation; it cannot recover historical batching or steering. An underfilled viewport
+loads older history until it fills or history is exhausted. Further history is user-driven.
 
 A failed catch-up or subscription reconcile retries on its own, doubling from 1s to a 30s ceiling.
 A fixed 1s retry turned a persistent daemon-side refusal — a Codex thread that already has an active

packages/app/e2e/browser/turn-collapse.spec.ts

@@ -407,34 +407,86 @@ async function seedWholeTurnHistory() {
   return agent;
 }
 
-test("loads complete long turns and preserves expansion while revealing older history", async ({
-  page,
-}) => {
+async function expectInitialFillIsConcealed(page: Page) {
+  await expect(page.getByTestId("agent-initial-fill")).toBeVisible();
+  await expect(page.getByTestId("agent-chat-scroll")).toHaveCSS("opacity", "0");
+}
+
+async function expectFilledChatAtBottom(page: Page) {
+  await expect(page.getByTestId("agent-initial-fill")).toBeHidden();
+  const chat = page.getByTestId("agent-chat-scroll");
+  await expect(chat).toHaveCSS("opacity", "1");
+  await expect
+    .poll(() =>
+      chat.evaluate((element) => ({
+        hasOverflow: element.scrollHeight > element.clientHeight,
+        atBottom: Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) <= 2,
+      })),
+    )
+    .toEqual({ hasOverflow: true, atBottom: true });
+}
+
+test("fills collapsed history before revealing a fresh chat", async ({ page }) => {
   test.setTimeout(120_000);
+  await page.setViewportSize({ width: 1280, height: 1000 });
   await useChatDisplay(page, "collapseTurns");
   const agent = await seedWholeTurnHistory();
   try {
     const history = await holdOlderHistoryPages(page, agent);
     await openAgentRoute(page, agent);
+    await history.expectRequestedPages(1);
+    await expectInitialFillIsConcealed(page);
+    history.releasePage(1);
+    await history.expectRequestedPages(2);
+    await expectInitialFillIsConcealed(page);
+    history.releasePage(2);
+    await expectFilledChatAtBottom(page);
+    await page.setViewportSize({ width: 1280, height: 8000 });
+    await history.expectRequestedPages(3);
+    await expect(page.getByTestId("agent-chat-scroll")).toHaveCSS("opacity", "1");
+    await expect(page.getByTestId("agent-initial-fill")).toBeHidden();
+    history.releasePage(3);
+    await history.expectSettledWithRequestedPages(3);
+    history.expectNoRepeatedEntries();
+  } finally {
+    await agent.cleanup();
+  }
+});
+
+test("loads complete long turns and preserves expansion while revealing older history", async ({
+  page,
+}) => {
+  test.setTimeout(120_000);
+  await page.setViewportSize({ width: 1280, height: 1000 });
+  await useChatDisplay(page, "collapseTurns");
+  const agent = await seedWholeTurnHistory();
+  try {
+    const history = await holdOlderHistoryPages(page, agent);
+    await openAgentRoute(page, agent);
+    await history.expectRequestedPages(1);
+    history.releasePage(1);
+    await history.expectRequestedPages(2);
+    history.releasePage(2);
+    await expectFilledChatAtBottom(page);
     await expectComposerVisible(page);
     const latest = page
       .getByTestId("turn-summary")
       .getByRole("button", { name: "Ran 120 commands", exact: true });
     await expect(latest).toBeVisible();
-    await expect.poll(() => rowsBetweenLatestSummaryAndReply(page)).toBe(0);
-    await latest.click();
-    await expect.poll(() => rowsBetweenLatestSummaryAndReply(page)).toBe(120);
-    await userScrollsTimelineToHistoryStart(page);
-    await history.expectRequestedPages(1);
-    history.releasePage(1);
     await expect(
       page
         .getByTestId("turn-summary")
         .getByRole("button", { name: "Ran 60 commands", exact: true }),
     ).toBeVisible();
+    await expect.poll(() => rowsBetweenLatestSummaryAndReply(page)).toBe(0);
+    await latest.click();
+    await expect.poll(() => rowsBetweenLatestSummaryAndReply(page)).toBe(120);
+    await userScrollsTimelineToHistoryStart(page);
+    await history.expectRequestedPages(3);
+    history.releasePage(3);
+    await page.getByTestId("scroll-to-bottom-button").click();
     await expect.poll(() => rowsBetweenLatestSummaryAndReply(page)).toBe(120);
     history.expectNoRepeatedEntries();
-    await latest.scrollIntoViewIfNeeded();
     await latest.click();
     await expect.poll(() => rowsBetweenLatestSummaryAndReply(page)).toBe(0);
   } finally {

packages/app/modules/paseo-terminal/android/src/androidTest/java/sh/paseo/terminal/TerminalRowLayoutTest.kt

@@ -10,6 +10,7 @@ import androidx.test.platform.app.InstrumentationRegistry
 import org.json.JSONArray
 import org.json.JSONObject
 import org.junit.Assert.assertTrue
+import org.junit.Assert.assertEquals
 import org.junit.Test
 import org.junit.runner.RunWith
 
@@ -55,6 +56,40 @@ class TerminalRowLayoutTest {
     }
   }
 
+  @Test
+  fun selectionCompositesOverCellAndTerminalBackgroundsWithoutChangingForeground() {
+    val red = 0xffff0000.toInt()
+    val green = 0xff00aa00.toInt()
+    val overlay = 0x472684ff
+    val source = TerminalRowSource.decode("1,1;1,4294901760,4278233600,0;M")
+    val layout = TerminalRowLayout(source, font, TerminalCustomGlyphs.EMPTY)
+    paints.selectionBackground = overlay
+    for (terminalBackground in listOf(0xffffffff.toInt(), 0xff000000.toInt())) {
+      val actual = raster { canvas ->
+        canvas.drawColor(terminalBackground)
+        layout.drawSelected(canvas, 0, TerminalSelection(TerminalSelectionRecord()), paints)
+      }
+      val expected = raster { canvas ->
+        canvas.drawColor(terminalBackground)
+        canvas.drawColor(green)
+        canvas.drawColor(overlay)
+      }
+      assertEquals(expected.getPixel(0, 0), actual.getPixel(0, 0))
+      assertTrue("selected glyph retains its red foreground", (0 until font.cellHeightPx).any { y ->
+        (0 until font.cellWidthPx).any { x -> actual.getPixel(x, y) == red }
+      })
+    }
+    val defaultBackground = TerminalRowLayout(TerminalRowSource.decode("1,1;1,4294901760,0,0;M"), font, TerminalCustomGlyphs.EMPTY)
+    for (terminalBackground in listOf(0xffffffff.toInt(), 0xff000000.toInt())) {
+      val actual = raster { canvas ->
+        canvas.drawColor(terminalBackground)
+        defaultBackground.drawSelected(canvas, 0, TerminalSelection(TerminalSelectionRecord()), paints)
+      }
+      val expected = raster { canvas -> canvas.drawColor(terminalBackground); canvas.drawColor(overlay) }
+      assertEquals(expected.getPixel(0, 0), actual.getPixel(0, 0))
+    }
+  }
+
   private fun starts(row: JSONObject, key: String): List<Int> =
     row.getJSONArray(key).let { starts -> List(starts.length()) { starts.getInt(it) } }
 

packages/app/modules/paseo-terminal/android/src/main/java/sh/paseo/terminal/PaseoTerminalView.kt

@@ -63,7 +63,6 @@ class PaseoTerminalView(context: Context, appContext: AppContext) : ExpoView(con
     backgroundColor = argb(value.background)
     cursorColor = argb(value.cursor)
     paints.selectionBackground = argb(value.selectionBackground)
-    paints.selectionForeground = argb(value.selectionForeground)
     invalidate()
   }
 

packages/app/modules/paseo-terminal/android/src/main/java/sh/paseo/terminal/TerminalFrame.kt

@@ -27,7 +27,6 @@ class TerminalThemeRecord : Record {
   @Field val background: Double = 0.0
   @Field val cursor: Double = 0.0
   @Field val selectionBackground: Double = 0.0
-  @Field val selectionForeground: Double = 0.0
 }
 
 class TerminalCustomGlyphRecord : Record {

packages/app/modules/paseo-terminal/android/src/main/java/sh/paseo/terminal/TerminalRowLayout.kt

@@ -23,7 +23,7 @@ private const val CLIP_UNBOUNDED_PX = 100_000f
  * either half alone would show an explicit virama. Each resulting group is drawn from the shaped
  * run (in context) at its first cell's column, centred in the columns it owns, and scaled down only when
  * its glyphs are wider than those columns. Colors never split groups or reshape the row: a group
- * whose cells differ in color or selection is drawn once per color, clipped to those cells' columns.
+ * whose cells differ in color is drawn once per color, clipped to those cells' columns.
  */
 internal class TerminalRowLayout(
   val source: TerminalRowSource,
@@ -195,7 +195,7 @@ internal class TerminalRowLayout(
     canvas.drawRenderNode(recorded)
   }
 
-  /** Draws the row with selected cells in selection colors. Selection never reshapes the row. */
+  /** Draws backgrounds, the selection overlay, then text with its original colors. */
   fun drawSelected(canvas: Canvas, row: Int, selection: TerminalSelection, paints: TerminalPaints) {
     drawContent(canvas, row, selection, paints)
   }
@@ -213,17 +213,17 @@ internal class TerminalRowLayout(
     val cellHeight = font.cellHeightPx.toFloat()
     val fill = paints.fill
     for (cell in 0 until cellCount) {
-      val background =
-        if (selected(row, selection, cell)) paints.selectionBackground else cellBackground[cell]
-      if (background ushr 24 == 0) continue
-      fill.color = background
-      canvas.drawRect(
-        cellCol[cell] * cellWidth,
-        0f,
-        (cellCol[cell] + cellSpan[cell]) * cellWidth,
-        cellHeight,
-        fill,
-      )
+      val left = cellCol[cell] * cellWidth
+      val right = (cellCol[cell] + cellSpan[cell]) * cellWidth
+      val background = cellBackground[cell]
+      if (background ushr 24 != 0) {
+        fill.color = background
+        canvas.drawRect(left, 0f, right, cellHeight, fill)
+      }
+      if (selected(row, selection, cell)) {
+        fill.color = paints.selectionBackground
+        canvas.drawRect(left, 0f, right, cellHeight, fill)
+      }
     }
 
     val baseline = font.baselinePx.toFloat()
@@ -234,9 +234,9 @@ internal class TerminalRowLayout(
         val paint = font.paint(cellFlags[group.firstCell])
         var first = group.firstCell
         while (first <= group.lastCell) {
-          val color = foreground(row, selection, first, paints)
+          val color = cellForeground[first]
           var last = first
-          while (last < group.lastCell && foreground(row, selection, last + 1, paints) == color) last += 1
+          while (last < group.lastCell && cellForeground[last + 1] == color) last += 1
           // Only edges between differently colored cells clip; the group's outer edges may overhang.
           val clipped = first > group.firstCell || last < group.lastCell
           canvas.save()
@@ -257,7 +257,7 @@ internal class TerminalRowLayout(
     for (cell in 0 until cellCount) {
       val glyph = cellGlyph[cell]
       val flags = cellFlags[cell]
-      val foreground = foreground(row, selection, cell, paints)
+      val foreground = cellForeground[cell]
       if (glyph != null) {
         fill.color = foreground
         glyph.draw(canvas, cellCol[cell] * cellWidth, cellSpan[cell] * cellWidth, cellHeight, font.density, fill)
@@ -291,9 +291,6 @@ internal class TerminalRowLayout(
     canvas.drawTextRun(text, group.start, group.end, group.contextStart, group.contextEnd, x, baseline, false, paint)
   }
 
-  private fun foreground(row: Int, selection: TerminalSelection?, cell: Int, paints: TerminalPaints): Int =
-    if (selected(row, selection, cell)) paints.selectionForeground else cellForeground[cell]
-
   /** The row's text as accessibility reads it. */
   fun describe(): String = source.text.trimEnd()
 }
@@ -301,6 +298,5 @@ internal class TerminalRowLayout(
 /** Paint state shared by every row of one view. */
 internal class TerminalPaints {
   val fill = Paint(Paint.ANTI_ALIAS_FLAG)
-  var selectionBackground: Int = 0xFFFFFF00.toInt()
-  var selectionForeground: Int = 0xFF000000.toInt()
+  var selectionBackground: Int = 0x472684FF
 }

packages/app/modules/paseo-terminal/contract.ts

@@ -43,7 +43,6 @@ export interface PaseoTerminalTheme {
   background: number;
   cursor: number;
   selectionBackground: number;
-  selectionForeground: number;
 }
 
 export interface PaseoTerminalCellMetrics {

packages/app/modules/paseo-terminal/ios/PaseoTerminalView.swift

@@ -24,8 +24,7 @@ final class PaseoTerminalView: ExpoView {
   private var background = TerminalColor(Double(0xff00_0000))
   private var cursorColor = TerminalColor(Double(0xffff_ffff))
   private var rowPaint = TerminalRowPaint(
-    selectionBackground: TerminalColor(Double(0xffff_ff00)),
-    selectionForeground: TerminalColor(Double(0xff00_0000)))
+    selectionBackground: TerminalColor(Double(0x4726_84ff)))
   private var rowCache: [String: TerminalRowLayout] = [:]
 
   required init(appContext: AppContext? = nil) {
@@ -44,8 +43,7 @@ final class PaseoTerminalView: ExpoView {
     background = TerminalColor(record.background)
     cursorColor = TerminalColor(record.cursor)
     rowPaint = TerminalRowPaint(
-      selectionBackground: TerminalColor(record.selectionBackground),
-      selectionForeground: TerminalColor(record.selectionForeground))
+      selectionBackground: TerminalColor(record.selectionBackground))
     backgroundColor = UIColor(cgColor: background.cgColor())
     setNeedsDisplay()
   }

packages/app/modules/paseo-terminal/ios/TerminalFrame.swift

@@ -25,7 +25,6 @@ struct TerminalThemeRecord: Record {
   @Field var background: Double = 0
   @Field var cursor: Double = 0
   @Field var selectionBackground: Double = 0
-  @Field var selectionForeground: Double = 0
 }
 
 struct TerminalCustomGlyphRecord: Record {

packages/app/modules/paseo-terminal/ios/TerminalRowLayout.swift

@@ -27,7 +27,6 @@ private let leftToRightAttributes: [NSAttributedString.Key: Any] = {
 /// Colors a row is painted with besides its own styles.
 struct TerminalRowPaint {
   let selectionBackground: TerminalColor
-  let selectionForeground: TerminalColor
 }
 
 /// One row shaped once and placed on the terminal grid.
@@ -267,31 +266,33 @@ final class TerminalRowLayout {
     selection?.contains(row: row, col: cellCol[cell], span: cellSpan[cell]) ?? false
   }
 
-  private func foreground(_ cell: Int, row: Int, selection: TerminalSelection?, paint: TerminalRowPaint) -> TerminalColor {
-    isSelected(cell, row: row, selection: selection) ? paint.selectionForeground : cellForeground[cell]
-  }
-
-  /// Draws the row with its top edge at `top`, selected cells in selection colors.
+  /// Draws cell backgrounds, the selection overlay, then text with its original colors.
   func draw(in context: CGContext, row: Int, top: CGFloat, selection: TerminalSelection?, paint: TerminalRowPaint) {
     let cellWidth = font.cellWidth
     let cellHeight = font.cellHeight
     for cell in 0..<cellCount {
-      let background = isSelected(cell, row: row, selection: selection) ? paint.selectionBackground : cellBackground[cell]
-      guard background.isPainted else { continue }
-      context.setFillColor(background.cgColor())
-      context.fill(CGRect(x: CGFloat(cellCol[cell]) * cellWidth, y: top, width: CGFloat(cellSpan[cell]) * cellWidth, height: cellHeight))
+      let rect = CGRect(x: CGFloat(cellCol[cell]) * cellWidth, y: top, width: CGFloat(cellSpan[cell]) * cellWidth, height: cellHeight)
+      let background = cellBackground[cell]
+      if background.isPainted {
+        context.setFillColor(background.cgColor())
+        context.fill(rect)
+      }
+      if isSelected(cell, row: row, selection: selection) {
+        context.setFillColor(paint.selectionBackground.cgColor())
+        context.fill(rect)
+      }
     }
 
     let centerY = top + cellHeight / 2
     let baselineInTextSpace = cellHeight / 2 - font.baseline
-    // A group whose cells differ in color or selection is drawn once per color, clipped to those
+    // A group whose cells differ in color is drawn once per color, clipped to those
     // cells' columns. Only edges between differently colored cells clip; outer edges may overhang.
     for group in groups {
       var first = group.firstCell
       while first <= group.lastCell {
-        let color = foreground(first, row: row, selection: selection, paint: paint)
+        let color = cellForeground[first]
         var last = first
-        while last < group.lastCell && foreground(last + 1, row: row, selection: selection, paint: paint) == color {
+        while last < group.lastCell && cellForeground[last + 1] == color {
           last += 1
         }
         context.saveGState()
@@ -315,7 +316,7 @@ final class TerminalRowLayout {
 
     let baseline = top + font.baseline
     for cell in 0..<cellCount {
-      let color = foreground(cell, row: row, selection: selection, paint: paint)
+      let color = cellForeground[cell]
       let left = CGFloat(cellCol[cell]) * cellWidth
       let width = CGFloat(cellSpan[cell]) * cellWidth
       if let glyph = cellGlyph[cell] {

packages/app/src/agent-stream/history-start-pagination.test.ts

@@ -1,197 +1,238 @@
-import { describe, expect, it } from "vitest";
+import { nativeHistoryStartGeometry } from "./native-history-start-geometry";
+import { describe, expect, it, vi } from "vitest";
 import {
-  abandonHistoryStartPaginationRequest,
-  createHistoryStartPaginationState,
-  evaluateHistoryStartPagination,
-  isHistoryStartLoadingOperation,
-  rearmHistoryStartPagination,
-  settleHistoryStartPagination,
+  createHistoryStartPagination,
   type HistoryStartPaginationInput,
 } from "./history-start-pagination";
 
-function createArmedHistoryStartPaginationState() {
-  return rearmHistoryStartPagination(createHistoryStartPaginationState());
-}
-
-const visibleHistoryStart: HistoryStartPaginationInput = {
+const initial: HistoryStartPaginationInput = {
   distanceFromHistoryStart: 0,
+  isUnderfilled: true,
   hasOlderHistory: true,
   isLoadingOlderHistory: false,
   isReady: true,
-  progressKey: "epoch-1:20",
+  progressKey: "20",
 };
 
+function harness(initiallyVisible = false) {
+  let geometry = { ...initial };
+  const requests: Array<(value: boolean) => void> = [];
+  let settles = 0;
+  const pagination = createHistoryStartPagination({
+    initiallyVisible,
+    read: () => geometry,
+    load: () => new Promise<boolean>((resolve) => requests.push(resolve)),
+    changed: () => {},
+    scheduleSettle: () => {
+      settles++;
+    },
+  });
+  return {
+    pagination,
+    requests,
+    get settles() {
+      return settles;
+    },
+    set(patch: Partial<HistoryStartPaginationInput>) {
+      geometry = { ...geometry, ...patch };
+      pagination.update();
+    },
+  };
+}
+
 describe("history start pagination", () => {
-  it("treats locally revealed history as progress before remote pagination", () => {
-    const first = evaluateHistoryStartPagination(
-      createArmedHistoryStartPaginationState(),
-      visibleHistoryStart,
-    );
-    const localReveal = evaluateHistoryStartPagination(first.state, {
-      ...visibleHistoryStart,
-      progressKey: "epoch-1:20:local-60",
-    });
-
-    expect(first.shouldLoad).toBe(true);
-    expect(localReveal.state).toEqual({
-      status: "settling",
-      loadedProgressKey: "epoch-1:20:local-60",
-    });
+  it("waits for a delayed request and its committed page before settling", async () => {
+    const h = harness();
+    h.pagination.update();
+    h.set({ progressKey: "10" });
+    expect(h.settles).toBe(0);
+    h.requests[0](true);
+    await Promise.resolve();
+    expect(h.settles).toBe(1);
+    expect(h.pagination.state.visible).toBe(false);
+    h.set({ isUnderfilled: false });
+    h.pagination.settle();
+    expect(h.pagination.state).toEqual({ status: "dormant", visible: true });
+    h.pagination.dispose();
   });
-  it("waits for user scroll intent before loading", () => {
-    const dormant = createHistoryStartPaginationState();
-    const evaluated = evaluateHistoryStartPagination(dormant, visibleHistoryStart);
-
-    expect(evaluated).toEqual({ state: { status: "dormant" }, shouldLoad: false });
+  it("waits for the committed page after a request completes", async () => {
+    const h = harness();
+    h.pagination.update();
+    h.requests[0](true);
+    await Promise.resolve();
+    expect(h.settles).toBe(0);
+    h.set({ progressKey: "10" });
+    expect(h.settles).toBe(1);
+    h.pagination.dispose();
   });
-
-  it("waits for anchored page geometry before authorizing another page", () => {
-    const first = evaluateHistoryStartPagination(
-      createArmedHistoryStartPaginationState(),
-      visibleHistoryStart,
-    );
-    const inFlight = evaluateHistoryStartPagination(first.state, {
-      ...visibleHistoryStart,
-      isLoadingOlderHistory: true,
-    });
-    const pageApplied = evaluateHistoryStartPagination(inFlight.state, {
-      ...visibleHistoryStart,
-      isLoadingOlderHistory: true,
-      progressKey: "epoch-1:10",
-    });
-
-    expect([first.shouldLoad, inFlight.shouldLoad, pageApplied.shouldLoad]).toEqual([
-      true,
-      false,
-      false,
-    ]);
-    expect(pageApplied.state).toEqual({ status: "settling", loadedProgressKey: "epoch-1:10" });
+  it("continues short pages and reveals on exhaustion", async () => {
+    const h = harness();
+    h.pagination.update();
+    h.set({ progressKey: "10" });
+    h.requests[0](true);
+    await Promise.resolve();
+    h.pagination.settle();
+    expect(h.requests).toHaveLength(2);
+    h.set({ hasOlderHistory: false });
+    h.requests[1](true);
+    await Promise.resolve();
+    expect(h.pagination.state).toEqual({ status: "dormant", visible: true });
+    h.pagination.dispose();
   });
-
-  it("loads one page each time anchored geometry leaves and returns to history start", () => {
-    const first = evaluateHistoryStartPagination(
-      createArmedHistoryStartPaginationState(),
-      visibleHistoryStart,
-    );
-    const pageApplied = evaluateHistoryStartPagination(first.state, {
-      ...visibleHistoryStart,
-      progressKey: "epoch-1:10",
-    });
-    const settledAway = settleHistoryStartPagination(pageApplied.state, {
-      ...visibleHistoryStart,
-      distanceFromHistoryStart: 300,
-      progressKey: "epoch-1:10",
-    });
-    const returned = evaluateHistoryStartPagination(settledAway.state, {
-      ...visibleHistoryStart,
-      progressKey: "epoch-1:10",
-    });
-
-    expect([
-      first.shouldLoad,
-      pageApplied.shouldLoad,
-      settledAway.shouldLoad,
-      returned.shouldLoad,
-    ]).toEqual([true, false, false, true]);
+  it("releases a failed or stalled request and allows retry", async () => {
+    vi.useFakeTimers();
+    const h = harness();
+    h.pagination.update();
+    vi.advanceTimersByTime(15_000);
+    expect(h.pagination.state).toEqual({ status: "failed", visible: true });
+    h.pagination.rearm();
+    expect(h.requests).toHaveLength(2);
+    h.requests[1](false);
+    await Promise.resolve();
+    expect(h.pagination.state.status).toBe("failed");
+    h.pagination.dispose();
+    vi.useRealTimers();
   });
-
-  it("continues the same loading operation when anchored geometry remains at history start", () => {
-    const first = evaluateHistoryStartPagination(
-      createArmedHistoryStartPaginationState(),
-      visibleHistoryStart,
-    );
-    const pageApplied = evaluateHistoryStartPagination(first.state, {
-      ...visibleHistoryStart,
-      progressKey: "epoch-1:10",
-    });
-    const continued = settleHistoryStartPagination(pageApplied.state, {
-      ...visibleHistoryStart,
-      progressKey: "epoch-1:10",
-    });
-
-    expect(continued.shouldLoad).toBe(true);
-    expect(isHistoryStartLoadingOperation(first.state)).toBe(true);
-    expect(isHistoryStartLoadingOperation(pageApplied.state)).toBe(true);
-    expect(isHistoryStartLoadingOperation(continued.state)).toBe(true);
+  it("keeps visible history visible while filling", () => {
+    const h = harness(true);
+    h.pagination.update();
+    expect(h.pagination.state.visible).toBe(true);
+    h.pagination.dispose();
   });
-
-  it("latches a request that finishes without cursor progress", () => {
-    const first = evaluateHistoryStartPagination(
-      createArmedHistoryStartPaginationState(),
-      visibleHistoryStart,
-    );
-    const inFlight = evaluateHistoryStartPagination(first.state, {
-      ...visibleHistoryStart,
-      isLoadingOlderHistory: true,
-    });
-    const finished = evaluateHistoryStartPagination(inFlight.state, visibleHistoryStart);
-    const duplicate = evaluateHistoryStartPagination(finished.state, visibleHistoryStart);
-    const away = evaluateHistoryStartPagination(duplicate.state, {
-      ...visibleHistoryStart,
-      distanceFromHistoryStart: 300,
-    });
-
-    expect(finished.state).toEqual({ status: "latched" });
-    expect([finished.shouldLoad, duplicate.shouldLoad, away.shouldLoad]).toEqual([
-      false,
-      false,
-      false,
-    ]);
-    expect(away.state).toEqual({ status: "ready" });
+  it("does not load a full viewport until user intent and respects inactive views", () => {
+    const h = harness();
+    h.set({ isUnderfilled: false });
+    expect(h.requests).toHaveLength(0);
+    h.set({ isReady: false });
+    h.pagination.rearm();
+    expect(h.requests).toHaveLength(0);
+    h.set({ isReady: true });
+    expect(h.requests).toHaveLength(1);
+    h.pagination.dispose();
   });
-
-  it("allows another user attempt after a request finishes without progress", () => {
-    const first = evaluateHistoryStartPagination(
-      createArmedHistoryStartPaginationState(),
-      visibleHistoryStart,
-    );
-    const inFlight = evaluateHistoryStartPagination(first.state, {
-      ...visibleHistoryStart,
-      isLoadingOlderHistory: true,
-    });
-    const failed = evaluateHistoryStartPagination(inFlight.state, visibleHistoryStart);
-    const retried = evaluateHistoryStartPagination(
-      rearmHistoryStartPagination(failed.state),
-      visibleHistoryStart,
-    );
-
-    expect(failed.state).toEqual({ status: "latched" });
-    expect(retried.shouldLoad).toBe(true);
-  });
-
-  it("latches an attempt that becomes invalid before entering flight", () => {
-    const requested = evaluateHistoryStartPagination(
-      createArmedHistoryStartPaginationState(),
-      visibleHistoryStart,
-    );
-
-    expect(abandonHistoryStartPaginationRequest(requested.state, "epoch-1:20")).toEqual({
-      status: "latched",
-    });
-  });
-
-  it("does not mistake repeated edge observations for a finished request", () => {
-    const first = evaluateHistoryStartPagination(
-      createArmedHistoryStartPaginationState(),
-      visibleHistoryStart,
-    );
-    const repeated = evaluateHistoryStartPagination(first.state, visibleHistoryStart);
-
-    expect(repeated.state).toBe(first.state);
-    expect(repeated.shouldLoad).toBe(false);
-  });
-
-  it("waits while history loading is unavailable or already active", () => {
-    const state = createArmedHistoryStartPaginationState();
-
-    expect([
-      evaluateHistoryStartPagination(state, { ...visibleHistoryStart, isReady: false }).shouldLoad,
-      evaluateHistoryStartPagination(state, { ...visibleHistoryStart, hasOlderHistory: false })
-        .shouldLoad,
-      evaluateHistoryStartPagination(state, { ...visibleHistoryStart, isLoadingOlderHistory: true })
-        .shouldLoad,
-      evaluateHistoryStartPagination(state, { ...visibleHistoryStart, progressKey: null })
-        .shouldLoad,
-    ]).toEqual([false, false, false, false]);
+  it("preserves the reading position after an anchored page moves away from the start", async () => {
+    const h = harness(true);
+    h.set({ isUnderfilled: false });
+    h.pagination.rearm();
+    h.set({ progressKey: "10", distanceFromHistoryStart: 300 });
+    h.requests[0](true);
+    await Promise.resolve();
+    h.pagination.settle();
+    expect(h.requests).toHaveLength(1);
+    h.set({ distanceFromHistoryStart: 0 });
+    expect(h.requests).toHaveLength(2);
+    h.pagination.dispose();
   });
 });
+
+it("ignores a timed-out response after the reader retries", async () => {
+  vi.useFakeTimers();
+  const h = harness();
+  h.pagination.update();
+  vi.advanceTimersByTime(15_000);
+  h.pagination.rearm();
+  h.requests[0](true);
+  await Promise.resolve();
+  expect(h.pagination.state.status).toBe("loading");
+  expect(h.settles).toBe(0);
+  h.requests[1](false);
+  await Promise.resolve();
+  expect(h.pagination.state.status).toBe("failed");
+  h.pagination.dispose();
+  vi.useRealTimers();
+});
+
+it("does not repeat a successful page that made no progress", async () => {
+  vi.useFakeTimers();
+  const h = harness();
+  h.pagination.update();
+  h.requests[0](true);
+  await Promise.resolve();
+  h.pagination.update();
+  expect(h.requests).toHaveLength(1);
+  vi.advanceTimersByTime(15_000);
+  expect(h.pagination.state).toEqual({ status: "failed", visible: true });
+  h.pagination.dispose();
+  vi.useRealTimers();
+});
+
+it("waits until the cursor and active history are available", () => {
+  const h = harness();
+  h.set({ isReady: false, progressKey: null });
+  h.set({ isReady: true, isLoadingOlderHistory: true });
+  h.set({ isLoadingOlderHistory: false });
+  expect(h.requests).toHaveLength(0);
+  h.set({ progressKey: "20" });
+  expect(h.requests).toHaveLength(1);
+  h.pagination.dispose();
+});
+
+it("reveals immediately on exhausted history without offering retry", () => {
+  const h = harness();
+  h.set({ hasOlderHistory: false });
+  expect(h.requests).toHaveLength(0);
+  expect(h.pagination.state).toEqual({ status: "dormant", visible: true });
+  h.pagination.dispose();
+});
+
+it("keeps a settled page pending while its view is inactive", async () => {
+  const h = harness();
+  h.pagination.update();
+  h.set({ progressKey: "10" });
+  h.requests[0](true);
+  await Promise.resolve();
+  h.set({ isReady: false });
+  h.pagination.settle();
+  expect(h.pagination.state.status).toBe("settling");
+  expect(h.requests).toHaveLength(1);
+  h.set({ isReady: true, isUnderfilled: false });
+  h.pagination.settle();
+  expect(h.pagination.state).toEqual({ status: "dormant", visible: true });
+  h.pagination.dispose();
+});
+
+it("keeps cached history visible after synchronization and subsequent pagination", async () => {
+  const h = harness();
+  h.pagination.reveal();
+  h.pagination.update();
+  h.set({ progressKey: "10" });
+  h.requests[0](true);
+  await Promise.resolve();
+  h.pagination.settle();
+  expect(h.pagination.state.visible).toBe(true);
+  expect(h.requests).toHaveLength(2);
+  h.pagination.dispose();
+});
+
+it.each([
+  [true, 123, 0],
+  [false, 123, 0],
+  [true, 0, 123],
+  [false, 0, 123],
+])(
+  "handles native padding when short history has older=%s",
+  (hasOlderHistory, topOverlayInset, bottomPadding) => {
+    const geometry = nativeHistoryStartGeometry({
+      contentHeight: 825,
+      viewportHeight: 700,
+      offsetY: 0,
+      topOverlayInset,
+      bottomPadding,
+    });
+    let requests = 0;
+    const pagination = createHistoryStartPagination({
+      initiallyVisible: false,
+      read: () => ({ ...initial, ...geometry, hasOlderHistory }),
+      load: () => {
+        requests++;
+        return new Promise<boolean>(() => {});
+      },
+      changed: () => {},
+      scheduleSettle: () => {},
+    });
+    pagination.update();
+    expect(requests).toBe(hasOlderHistory ? 1 : 0);
+    expect(pagination.state.visible).toBe(!hasOlderHistory);
+    pagination.dispose();
+  },
+);

packages/app/src/agent-stream/history-start-pagination.ts

@@ -1,138 +1,135 @@
 export const HISTORY_START_THRESHOLD_PX = 96;
 
-export type HistoryStartPaginationState =
-  | { status: "dormant" }
-  | { status: "ready" }
-  | { status: "loading"; requestedProgressKey: string; requestObserved: boolean }
-  | { status: "settling"; loadedProgressKey: string }
-  | { status: "latched" };
-
 export interface HistoryStartPaginationInput {
   distanceFromHistoryStart: number;
+  isUnderfilled: boolean;
   hasOlderHistory: boolean;
   isLoadingOlderHistory: boolean;
   isReady: boolean;
   progressKey: string | null;
 }
 
-export interface HistoryStartPaginationTransition {
-  state: HistoryStartPaginationState;
-  shouldLoad: boolean;
-}
-
-export function createHistoryStartPaginationState(): HistoryStartPaginationState {
-  return { status: "dormant" };
+export interface HistoryStartPaginationState {
+  status: "dormant" | "ready" | "loading" | "settling" | "failed";
+  visible: boolean;
 }
 
 export function isHistoryStartLoadingOperation(state: HistoryStartPaginationState): boolean {
   return state.status === "loading" || state.status === "settling";
 }
 
-export function rearmHistoryStartPagination(
-  state: HistoryStartPaginationState,
-): HistoryStartPaginationState {
-  return state.status === "dormant" || state.status === "latched" ? { status: "ready" } : state;
-}
+/** Owns one pagination operation, including the initial viewport reveal. */
+export function createHistoryStartPagination(input: {
+  initiallyVisible: boolean;
+  read: () => HistoryStartPaginationInput | null;
+  load: () => Promise<boolean>;
+  changed: (state: HistoryStartPaginationState) => void;
+  scheduleSettle: () => void;
+}) {
+  let state: HistoryStartPaginationState = { status: "dormant", visible: input.initiallyVisible };
+  let requestedKey: string | null = null;
+  let completed = false;
+  let fill = false;
+  let generation = 0;
+  let timeout: ReturnType<typeof setTimeout> | undefined;
 
-export function abandonHistoryStartPaginationRequest(
-  state: HistoryStartPaginationState,
-  requestedProgressKey: string,
-): HistoryStartPaginationState {
-  if (
-    state.status !== "loading" ||
-    state.requestObserved ||
-    state.requestedProgressKey !== requestedProgressKey
-  ) {
-    return state;
-  }
-  return { status: "latched" };
-}
+  const publish = (status: HistoryStartPaginationState["status"], visible = state.visible) => {
+    if (status === state.status && visible === state.visible) return;
+    state = { status, visible };
+    input.changed(state);
+  };
+  const clear = () => {
+    generation++;
+    clearTimeout(timeout);
+    timeout = undefined;
+  };
+  const finish = (status: HistoryStartPaginationState["status"]) => {
+    clear();
+    publish(status, true);
+  };
+  const fail = () => finish("failed");
 
-export function evaluateHistoryStartPagination(
-  state: HistoryStartPaginationState,
-  input: HistoryStartPaginationInput,
-): HistoryStartPaginationTransition {
-  if (state.status === "dormant") {
-    return { state, shouldLoad: false };
-  }
-  if (state.status === "loading") {
-    if (input.progressKey !== null && input.progressKey !== state.requestedProgressKey) {
-      return {
-        state: { status: "settling", loadedProgressKey: input.progressKey },
-        shouldLoad: false,
-      };
+  const update = () => {
+    const geometry = input.read();
+    if (!geometry) return;
+    if (state.status === "loading") {
+      if (!completed) return;
+      if (geometry.progressKey !== null && geometry.progressKey !== requestedKey) {
+        publish("settling");
+        input.scheduleSettle();
+      } else if (!geometry.hasOlderHistory) {
+        finish("dormant");
+      }
+      return;
     }
-    if (input.isLoadingOlderHistory && !state.requestObserved) {
-      return { state: { ...state, requestObserved: true }, shouldLoad: false };
+    if (state.status === "settling" || state.status === "failed" || !geometry.isReady) return;
+    const atStart = geometry.distanceFromHistoryStart <= HISTORY_START_THRESHOLD_PX;
+    if (state.status === "dormant" && !geometry.isUnderfilled) {
+      publish("dormant", true);
+      return;
     }
-    if (!input.isLoadingOlderHistory && !input.hasOlderHistory) {
-      return { state: { status: "latched" }, shouldLoad: false };
+    if (!atStart || (!geometry.isUnderfilled && state.status !== "ready")) return;
+    if (!geometry.hasOlderHistory) {
+      finish("dormant");
+      return;
     }
-    if (
-      state.requestObserved &&
-      !input.isLoadingOlderHistory &&
-      input.progressKey === state.requestedProgressKey
-    ) {
-      return { state: { status: "latched" }, shouldLoad: false };
-    }
-    return { state, shouldLoad: false };
-  }
-
-  if (state.status === "settling") {
-    return { state, shouldLoad: false };
-  }
-
-  const isAtHistoryStart = input.distanceFromHistoryStart <= HISTORY_START_THRESHOLD_PX;
-  if (!isAtHistoryStart) {
-    return state.status === "ready"
-      ? { state, shouldLoad: false }
-      : { state: { status: "ready" }, shouldLoad: false };
-  }
-  if (
-    state.status === "latched" ||
-    !input.isReady ||
-    !input.hasOlderHistory ||
-    input.isLoadingOlderHistory ||
-    input.progressKey === null
-  ) {
-    return { state, shouldLoad: false };
-  }
+    if (geometry.isLoadingOlderHistory || geometry.progressKey === null) return;
+    fill = geometry.isUnderfilled;
+    requestedKey = geometry.progressKey;
+    completed = false;
+    publish("loading");
+    const request = ++generation;
+    timeout = setTimeout(() => {
+      if (request === generation) fail();
+    }, 15_000);
+    void input.load().then(
+      (applied) => {
+        if (request !== generation) return undefined;
+        if (!applied) {
+          fail();
+          return undefined;
+        }
+        completed = true;
+        update();
+        return undefined;
+      },
+      () => {
+        if (request === generation) fail();
+      },
+    );
+  };
   return {
-    state: {
-      status: "loading",
-      requestedProgressKey: input.progressKey,
-      requestObserved: false,
+    get state() {
+      return state;
     },
-    shouldLoad: true,
-  };
-}
-
-export function settleHistoryStartPagination(
-  state: HistoryStartPaginationState,
-  input: HistoryStartPaginationInput,
-): HistoryStartPaginationTransition {
-  if (state.status !== "settling") {
-    return { state, shouldLoad: false };
-  }
-  const isAtHistoryStart = input.distanceFromHistoryStart <= HISTORY_START_THRESHOLD_PX;
-  if (
-    !isAtHistoryStart ||
-    !input.isReady ||
-    !input.hasOlderHistory ||
-    input.isLoadingOlderHistory ||
-    input.progressKey === null
-  ) {
-    return {
-      state: isAtHistoryStart ? { status: "latched" } : { status: "ready" },
-      shouldLoad: false,
-    };
-  }
-  return {
-    state: {
-      status: "loading",
-      requestedProgressKey: input.progressKey,
-      requestObserved: false,
+    update,
+    settle() {
+      if (state.status !== "settling") return;
+      const geometry = input.read();
+      if (!geometry?.isReady) return;
+      clear();
+      if (fill && !geometry.isUnderfilled) {
+        publish("dormant", true);
+      } else if (geometry.distanceFromHistoryStart > HISTORY_START_THRESHOLD_PX) {
+        publish("ready", true);
+      } else if (!geometry.hasOlderHistory) {
+        publish("dormant", true);
+      } else {
+        publish("ready");
+        update();
+      }
     },
-    shouldLoad: true,
+    rearm() {
+      if (state.status === "dormant" || state.status === "failed") publish("ready", true);
+      update();
+    },
+    reveal() {
+      publish(state.status, true);
+    },
+    reset(visible: boolean) {
+      clear();
+      publish("dormant", visible);
+    },
+    dispose: clear,
   };
 }

packages/app/src/agent-stream/native-history-start-geometry.ts

@@ -0,0 +1,13 @@
+export function nativeHistoryStartGeometry(input: {
+  contentHeight: number;
+  viewportHeight: number;
+  offsetY: number;
+  topOverlayInset: number;
+  bottomPadding: number;
+}) {
+  const contentHeight = input.contentHeight - 32 - input.topOverlayInset - input.bottomPadding;
+  return {
+    distanceFromHistoryStart: contentHeight - input.viewportHeight - input.offsetY,
+    isUnderfilled: contentHeight < input.viewportHeight,
+  };
+}

packages/app/src/agent-stream/strategy-native.tsx

@@ -1,12 +1,4 @@
-import {
-  Fragment,
-  type ReactElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { Fragment, type ReactElement, useCallback, useEffect, useMemo, useRef } from "react";
 import {
   FlatList,
   Platform,
@@ -19,6 +11,9 @@ import {
 } from "react-native";
 import { withUnistyles } from "react-native-unistyles";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { Button } from "@/components/ui/button";
+import { useRetainedPanelActive } from "@/components/retained-panel";
+import { useTranslation } from "react-i18next";
 import type { StreamItem } from "@/types/stream";
 import type { Theme } from "@/styles/theme";
 import { useStableEvent } from "@/hooks/use-stable-event";
@@ -34,15 +29,11 @@ import {
   resolveBottomAnchorTransportBehavior,
 } from "./strategy";
 import {
-  abandonHistoryStartPaginationRequest,
-  createHistoryStartPaginationState,
-  evaluateHistoryStartPagination,
   isHistoryStartLoadingOperation,
-  rearmHistoryStartPagination,
-  settleHistoryStartPagination,
   type HistoryStartPaginationInput,
-  type HistoryStartPaginationTransition,
 } from "./history-start-pagination";
+import { useHistoryStartPagination } from "./use-history-start-pagination";
+import { nativeHistoryStartGeometry } from "./native-history-start-geometry";
 import { useStreamTopOverlayInset } from "./top-overlay";
 import {
   createHistoryStartSettleScheduler,
@@ -65,6 +56,16 @@ const historyStartSlotStyle: ViewStyle = {
   flexShrink: 0,
 };
 const HISTORY_START_SETTLE_FRAMES = 2;
+const viewportStyle: ViewStyle = { flex: 1 };
+const initialFillStyle: ViewStyle = {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  alignItems: "center",
+  justifyContent: "center",
+};
 const NATIVE_STREAM_WINDOW_SIZE = 10;
 
 function keyExtractor(item: { id: string }): string {
@@ -83,6 +84,8 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
     viewportRef,
     routeBottomAnchorRequest,
     isAuthoritativeHistoryReady,
+    isInitialHistoryLoading,
+    revealInitialHistory,
     onNearBottomChange,
     onNearHistoryStart,
     isLoadingOlderHistory,
@@ -93,6 +96,8 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
     baseListContentContainerStyle,
     strategy,
   } = props;
+  const isActive = useRetainedPanelActive();
+  const { t } = useTranslation();
   const { renderHistoryMountedRow, renderLiveHeadRow, renderLiveAuxiliary } = renderers;
   const flatListRef = useRef<FlatList<StreamItem>>(null);
   const streamViewportMetricsRef = useRef({
@@ -113,10 +118,6 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
   const isNativeViewportSettlingRef = useRef(false);
   const nativeViewportSettlingFrameIdRef = useRef<number | null>(null);
   const historyStartReadyRef = useRef(false);
-  const [historyStartPaginationState, setHistoryStartPaginationState] = useState(
-    createHistoryStartPaginationState,
-  );
-  const historyStartPaginationStateRef = useRef(historyStartPaginationState);
   const historyStartSettleSchedulerRef = useRef<HistoryStartSettleScheduler | null>(null);
 
   const historyItems = useMemo(() => {
@@ -132,48 +133,40 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
       metrics.viewportMeasuredForKey === metrics.containerKey &&
       metrics.contentMeasuredForKey === metrics.containerKey;
     return {
-      distanceFromHistoryStart: metrics.contentHeight - metrics.viewportHeight - metrics.offsetY,
+      ...nativeHistoryStartGeometry({
+        contentHeight: metrics.contentHeight,
+        viewportHeight: metrics.viewportHeight,
+        offsetY: metrics.offsetY,
+        topOverlayInset,
+        bottomPadding: streamKeyboardInset.contentContainerPaddingBottom,
+      }),
       hasOlderHistory,
       isLoadingOlderHistory,
-      isReady: historyStartReadyRef.current && hasMeasuredViewport,
+      isReady:
+        isActive &&
+        isAuthoritativeHistoryReady &&
+        historyStartReadyRef.current &&
+        hasMeasuredViewport,
       progressKey: olderHistoryProgressKey,
     };
   });
-  const applyHistoryStartPaginationTransition = useStableEvent(
-    (transition: HistoryStartPaginationTransition) => {
-      const previousState = historyStartPaginationStateRef.current;
-      historyStartPaginationStateRef.current = transition.state;
-      if (transition.state !== previousState) {
-        setHistoryStartPaginationState(transition.state);
-      }
-      if (transition.shouldLoad) {
-        const requestedProgressKey = olderHistoryProgressKey;
-        if (requestedProgressKey === null) {
-          return;
-        }
-        void (async () => {
-          const started = await onNearHistoryStart();
-          if (started === true) {
-            return;
-          }
-          applyHistoryStartPaginationTransition({
-            state: abandonHistoryStartPaginationRequest(
-              historyStartPaginationStateRef.current,
-              requestedProgressKey,
-            ),
-            shouldLoad: false,
-          });
-        })();
-      }
-    },
+  const { state: historyStartPaginationState, controller: historyStartPagination } =
+    useHistoryStartPagination({
+      initiallyVisible: !isInitialHistoryLoading,
+      read: getHistoryStartPaginationInput,
+      load: async () => onNearHistoryStart(),
+      scheduleSettle: () => scheduleHistoryStartSettle(),
+    });
+  const evaluateHistoryStart = useStableEvent(() => historyStartPagination.update());
+  const resetHistoryStart = useStableEvent(() =>
+    historyStartPagination.reset(!isInitialHistoryLoading),
   );
-  const evaluateHistoryStart = useStableEvent(() => {
-    const transition = evaluateHistoryStartPagination(
-      historyStartPaginationStateRef.current,
-      getHistoryStartPaginationInput(),
-    );
-    applyHistoryStartPaginationTransition(transition);
-  });
+  const disposeHistoryStart = useStableEvent(() => historyStartPagination.dispose());
+  const isHistoryStartSettling = useStableEvent(
+    () => historyStartPagination.state.status === "settling",
+  );
+  const finishInitialFill = useStableEvent(() => historyStartPagination.reveal());
+  const retryHistoryStart = useStableEvent(() => historyStartPagination.rearm());
   const scheduleHistoryStartSettle = useStableEvent(() => {
     let scheduler = historyStartSettleSchedulerRef.current;
     if (!scheduler) {
@@ -181,15 +174,9 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
         settleFrames: HISTORY_START_SETTLE_FRAMES,
         requestFrame: requestAnimationFrame,
         cancelFrame: cancelAnimationFrame,
-        isSettling: () => historyStartPaginationStateRef.current.status === "settling",
+        isSettling: () => isHistoryStartSettling(),
         isLoading: () => getHistoryStartPaginationInput().isLoadingOlderHistory,
-        onSettle: () => {
-          const transition = settleHistoryStartPagination(
-            historyStartPaginationStateRef.current,
-            getHistoryStartPaginationInput(),
-          );
-          applyHistoryStartPaginationTransition(transition);
-        },
+        onSettle: () => historyStartPagination.settle(),
       });
       historyStartSettleSchedulerRef.current = scheduler;
     }
@@ -328,9 +315,7 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
     clearNativeViewportSettling();
     isNativeViewportSettlingRef.current = false;
     historyStartReadyRef.current = false;
-    const initialHistoryStartState = createHistoryStartPaginationState();
-    historyStartPaginationStateRef.current = initialHistoryStartState;
-    setHistoryStartPaginationState(initialHistoryStartState);
+    resetHistoryStart();
     const frame = requestAnimationFrame(() => {
       historyStartReadyRef.current = true;
       evaluateHistoryStart();
@@ -338,10 +323,18 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
     return () => {
       cancelAnimationFrame(frame);
       clearPendingUserScrollEnd();
+      disposeHistoryStart();
       historyStartSettleSchedulerRef.current?.cancel();
       historyStartSettleSchedulerRef.current = null;
     };
-  }, [agentId, clearNativeViewportSettling, clearPendingUserScrollEnd, evaluateHistoryStart]);
+  }, [
+    agentId,
+    clearNativeViewportSettling,
+    clearPendingUserScrollEnd,
+    disposeHistoryStart,
+    evaluateHistoryStart,
+    resetHistoryStart,
+  ]);
 
   useEffect(() => () => clearNativeViewportSettling(), [clearNativeViewportSettling]);
 
@@ -421,18 +414,18 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
   });
 
   const handleScrollBeginDrag = useStableEvent((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    finishInitialFill();
     clearPendingUserScrollEnd();
     isUserScrollActiveRef.current = true;
     scrollKeyboardDismiss.onScrollBeginDrag(event);
     bottomAnchorController.beginUserScroll();
-    const rearmed = rearmHistoryStartPagination(historyStartPaginationStateRef.current);
-    if (rearmed !== historyStartPaginationStateRef.current) {
-      historyStartPaginationStateRef.current = rearmed;
-      setHistoryStartPaginationState(rearmed);
-      evaluateHistoryStart();
-    }
+    historyStartPagination.rearm();
   });
 
+  useEffect(() => {
+    if (revealInitialHistory) finishInitialFill();
+  }, [finishInitialFill, revealInitialHistory]);
+
   // Defer drag end so momentum can take ownership, but capture the terminal
   // gesture position now because layout may move the viewport in the meantime.
   const handleScrollEndDrag = useStableEvent((event: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -506,22 +499,25 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
       contentHeight: nextContentHeight,
     });
     evaluateHistoryStart();
-    if (historyStartPaginationStateRef.current.status === "settling") {
+    if (isHistoryStartSettling()) {
       scheduleHistoryStartSettle();
     }
   });
 
   useEffect(() => {
     evaluateHistoryStart();
-    if (historyStartPaginationStateRef.current.status === "settling") {
+    if (isHistoryStartSettling()) {
       scheduleHistoryStartSettle();
     }
   }, [
     evaluateHistoryStart,
     hasOlderHistory,
+    isActive,
+    isAuthoritativeHistoryReady,
     isLoadingOlderHistory,
     olderHistoryProgressKey,
     scheduleHistoryStartSettle,
+    isHistoryStartSettling,
   ]);
 
   const renderItem = useStableEvent(
@@ -566,50 +562,64 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
     const isLoadingOperation = isHistoryStartLoadingOperation(historyStartPaginationState);
     return (
       <View style={historyStartSlotStyle} testID="older-history-slot">
-        {isLoadingOperation ? (
+        {isLoadingOperation && (
           <View testID="load-older-history-spinner">
             <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
           </View>
-        ) : null}
+        )}
+        {!isLoadingOperation &&
+          historyStartPaginationState.status === "failed" &&
+          hasOlderHistory && (
+            <Button variant="ghost" size="sm" onPress={retryHistoryStart}>
+              {t("paneFind.retry")}
+            </Button>
+          )}
       </View>
     );
-  }, [historyStartPaginationState]);
+  }, [historyStartPaginationState, hasOlderHistory, retryHistoryStart, t]);
 
   // RN's FlatList strictMode keeps its internal renderItem wrapper stable when
   // data or the live header changes, preserving the row identities above.
   return (
-    <FlatList
-      {...listInsetProps}
-      ref={flatListRef}
-      data={historyRows}
-      renderItem={renderItem}
-      keyExtractor={keyExtractor}
-      strictMode
-      testID="agent-chat-scroll"
-      nativeID="agent-chat-scroll-native-virtualized"
-      ListHeaderComponent={liveHeaderContent ?? undefined}
-      ListFooterComponent={historyFooterContent ?? undefined}
-      contentContainerStyle={listContentContainerStyle}
-      style={listStyle}
-      onLayout={handleListLayout}
-      onScroll={handleScroll}
-      onScrollBeginDrag={handleScrollBeginDrag}
-      onScrollEndDrag={handleScrollEndDrag}
-      onMomentumScrollBegin={handleMomentumScrollBegin}
-      onMomentumScrollEnd={handleMomentumScrollEnd}
-      scrollEventThrottle={16}
-      onContentSizeChange={handleContentSizeChange}
-      maintainVisibleContentPosition={maintainVisibleContentPosition}
-      // Tall Markdown rows exhaust a shallow window during flings. Keep the initial
-      // render small, then refill a deeper window in batches large enough to keep up.
-      initialNumToRender={2}
-      maxToRenderPerBatch={10}
-      windowSize={NATIVE_STREAM_WINDOW_SIZE}
-      removeClippedSubviews={false}
-      scrollEnabled={scrollEnabled}
-      showsVerticalScrollIndicator
-      inverted
-    />
+    <View style={viewportStyle}>
+      <FlatList
+        {...listInsetProps}
+        ref={flatListRef}
+        data={historyRows}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        strictMode
+        testID="agent-chat-scroll"
+        nativeID="agent-chat-scroll-native-virtualized"
+        ListHeaderComponent={liveHeaderContent ?? undefined}
+        ListFooterComponent={historyFooterContent ?? undefined}
+        contentContainerStyle={listContentContainerStyle}
+        style={[listStyle, { opacity: historyStartPaginationState.visible ? 1 : 0 }]}
+        onLayout={handleListLayout}
+        onScroll={handleScroll}
+        onScrollBeginDrag={handleScrollBeginDrag}
+        onScrollEndDrag={handleScrollEndDrag}
+        onMomentumScrollBegin={handleMomentumScrollBegin}
+        onMomentumScrollEnd={handleMomentumScrollEnd}
+        scrollEventThrottle={16}
+        onContentSizeChange={handleContentSizeChange}
+        maintainVisibleContentPosition={maintainVisibleContentPosition}
+        // Tall Markdown rows exhaust a shallow window during flings. Keep the initial
+        // render small, then refill a deeper window in batches large enough to keep up.
+        initialNumToRender={2}
+        maxToRenderPerBatch={10}
+        windowSize={NATIVE_STREAM_WINDOW_SIZE}
+        removeClippedSubviews={false}
+        scrollEnabled={scrollEnabled}
+        showsVerticalScrollIndicator
+        inverted
+      />
+      {!historyStartPaginationState.visible ? (
+        <View pointerEvents="none" testID="agent-initial-fill" style={initialFillStyle}>
+          <ThemedLoadingSpinner size="large" uniProps={foregroundMutedColorMapping} />
+        </View>
+      ) : null}
+    </View>
   );
 }
 

packages/app/src/agent-stream/strategy-web.test.tsx

@@ -152,7 +152,7 @@ describe("createWebStreamStrategy", () => {
         routeBottomAnchorRequest: null,
         isAuthoritativeHistoryReady: true,
         onNearBottomChange: () => {},
-        onNearHistoryStart: () => true,
+        onNearHistoryStart: async () => true,
         isLoadingOlderHistory: false,
         hasOlderHistory: false,
         olderHistoryProgressKey: null,
@@ -274,7 +274,7 @@ describe("createWebStreamStrategy", () => {
       routeBottomAnchorRequest: null,
       isAuthoritativeHistoryReady: true,
       onNearBottomChange: () => {},
-      onNearHistoryStart: () => true,
+      onNearHistoryStart: async () => true,
       isLoadingOlderHistory: false,
       hasOlderHistory: false,
       olderHistoryProgressKey: null,

packages/app/src/agent-stream/strategy-web.tsx

@@ -20,6 +20,7 @@ import { withUnistyles } from "react-native-unistyles";
 import { useRetainedPanelActive } from "@/components/retained-panel";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { useStableEvent } from "@/hooks/use-stable-event";
+import { useTranslation } from "react-i18next";
 import { getStreamItemMessageId, type StreamItem } from "@/types/stream";
 import type { Theme } from "@/styles/theme";
 import { WEB_SCROLLBAR_SIZE_PX } from "@/styles/web-scrollbar";
@@ -30,15 +31,10 @@ import type { StreamRenderInput, StreamStrategy, StreamViewportHandle } from "./
 import { useRevisedHistoryRows } from "./history-row-revision";
 import { createStreamStrategy } from "./strategy";
 import {
-  abandonHistoryStartPaginationRequest,
-  createHistoryStartPaginationState,
-  evaluateHistoryStartPagination,
   isHistoryStartLoadingOperation,
-  rearmHistoryStartPagination,
-  settleHistoryStartPagination,
   type HistoryStartPaginationInput,
-  type HistoryStartPaginationTransition,
 } from "./history-start-pagination";
+import { useHistoryStartPagination } from "./use-history-start-pagination";
 import {
   createHistoryStartSettleScheduler,
   type HistoryStartSettleScheduler,
@@ -77,6 +73,14 @@ const historyStartSlotStyle: CSSProperties = {
 };
 
 const streamRowsHostStyle: CSSProperties = { position: "relative", width: "100%" };
+const initialFillStyle: CSSProperties = {
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  pointerEvents: "none",
+};
 
 const streamRowStyle: CSSProperties = {
   display: "flex",
@@ -298,6 +302,8 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     viewportRef,
     routeBottomAnchorRequest,
     isAuthoritativeHistoryReady,
+    isInitialHistoryLoading,
+    revealInitialHistory,
     onNearBottomChange,
     onReadingPositionChange,
     onNearHistoryStart,
@@ -318,6 +324,9 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     [historyMounted, historyVirtualized, inputSegments],
   );
   const isActive = useRetainedPanelActive();
+  const { t } = useTranslation();
+  const rowsHostRef = useRef<HTMLDivElement | null>(null);
+  const auxiliaryRef = useRef<HTMLDivElement | null>(null);
   const isActiveRef = useRef(isActive);
   const scrollContainerRef = useRef<HTMLElement | null>(null);
   const contentRef = useRef<HTMLElement | null>(null);
@@ -351,10 +360,6 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
   const pendingAutoScrollFrameRef = useRef<number | null>(null);
   const pendingAutoScrollTimeoutRef = useRef<number | null>(null);
   const historyStartReadyRef = useRef(false);
-  const [historyStartPaginationState, setHistoryStartPaginationState] = useState(
-    createHistoryStartPaginationState,
-  );
-  const historyStartPaginationStateRef = useRef(historyStartPaginationState);
   const readingAnchor = useMemo(createReadingAnchor, []);
   const measuredRowHeights = useRef(new Map<string, { width: number; height: number }>());
   const historyStartSettleSchedulerRef = useRef<HistoryStartSettleScheduler | null>(null);
@@ -479,60 +484,39 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
       !followOutputRef.current || isScrollContainerNearBottom(scrollContainer);
     return {
       distanceFromHistoryStart: scrollContainer.scrollTop,
+      isUnderfilled:
+        (rowsHostRef.current?.getBoundingClientRect().height ?? 0) +
+          (auxiliaryRef.current?.getBoundingClientRect().height ?? 0) <
+        scrollContainer.clientHeight,
       hasOlderHistory,
       isLoadingOlderHistory,
       // An explicit jump owns the landing position. Revealing another local
       // page here changes the virtual index before the target has mounted.
-      isReady: historyStartReadyRef.current && bottomAnchorSettled && !isJumpSettling(),
+      isReady:
+        historyStartReadyRef.current &&
+        isAuthoritativeHistoryReady &&
+        bottomAnchorSettled &&
+        !isJumpSettling(),
       progressKey: olderHistoryProgressKey,
     };
   });
-  const applyHistoryStartPaginationTransition = useStableEvent(
-    (transition: HistoryStartPaginationTransition) => {
-      const previousState = historyStartPaginationStateRef.current;
-      historyStartPaginationStateRef.current = transition.state;
-      if (transition.state !== previousState) {
-        setHistoryStartPaginationState(transition.state);
-      }
-      if (!transition.shouldLoad || olderHistoryProgressKey === null) {
-        return;
-      }
-      const requestedProgressKey = olderHistoryProgressKey;
-      void (async () => {
-        const started = await onNearHistoryStart();
-        if (started === true) {
-          return;
-        }
-        applyHistoryStartPaginationTransition({
-          state: abandonHistoryStartPaginationRequest(
-            historyStartPaginationStateRef.current,
-            requestedProgressKey,
-          ),
-          shouldLoad: false,
-        });
-      })();
-    },
+  const { state: historyStartPaginationState, controller: historyStartPagination } =
+    useHistoryStartPagination({
+      initiallyVisible: !isInitialHistoryLoading,
+      read: getHistoryStartPaginationInput,
+      load: async () => onNearHistoryStart(),
+      scheduleSettle: () => scheduleHistoryStartPrependSettle(),
+    });
+  const evaluateHistoryStart = useStableEvent(() => historyStartPagination.update());
+  const resetHistoryStart = useStableEvent(() =>
+    historyStartPagination.reset(!isInitialHistoryLoading),
   );
-  const evaluateHistoryStart = useStableEvent(() => {
-    const input = getHistoryStartPaginationInput();
-    if (!input) {
-      return;
-    }
-    const transition = evaluateHistoryStartPagination(
-      historyStartPaginationStateRef.current,
-      input,
-    );
-    applyHistoryStartPaginationTransition(transition);
-  });
-  const rearmHistoryStartFromUserIntent = useStableEvent(() => {
-    const rearmed = rearmHistoryStartPagination(historyStartPaginationStateRef.current);
-    if (rearmed === historyStartPaginationStateRef.current) {
-      return;
-    }
-    historyStartPaginationStateRef.current = rearmed;
-    setHistoryStartPaginationState(rearmed);
-    evaluateHistoryStart();
-  });
+  const disposeHistoryStart = useStableEvent(() => historyStartPagination.dispose());
+  const isHistoryStartSettling = useStableEvent(
+    () => historyStartPagination.state.status === "settling",
+  );
+  const finishInitialFill = useStableEvent(() => historyStartPagination.reveal());
+  const rearmHistoryStartFromUserIntent = useStableEvent(() => historyStartPagination.rearm());
   const scheduleHistoryStartPrependSettle = useStableEvent(() => {
     let scheduler = historyStartSettleSchedulerRef.current;
     if (!scheduler) {
@@ -540,22 +524,12 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
         settleFrames: HISTORY_START_SETTLE_FRAMES,
         requestFrame: (callback) => window.requestAnimationFrame(callback),
         cancelFrame: (frame) => window.cancelAnimationFrame(frame),
-        isSettling: () => historyStartPaginationStateRef.current.status === "settling",
+        isSettling: () => isHistoryStartSettling(),
         isLoading: () => {
           const input = getHistoryStartPaginationInput();
           return !input || input.isLoadingOlderHistory;
         },
-        onSettle: () => {
-          const input = getHistoryStartPaginationInput();
-          if (!input) {
-            return;
-          }
-          const transition = settleHistoryStartPagination(
-            historyStartPaginationStateRef.current,
-            input,
-          );
-          applyHistoryStartPaginationTransition(transition);
-        },
+        onSettle: () => historyStartPagination.settle(),
       });
       historyStartSettleSchedulerRef.current = scheduler;
     }
@@ -782,6 +756,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
   ]);
 
   const stopFollowingOutputFromUserIntent = useStableEvent(() => {
+    finishInitialFill();
     cancelPendingStickToBottom();
     if (followOutputRef.current) {
       setFollowOutput(false);
@@ -789,6 +764,10 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     rearmHistoryStartFromUserIntent();
   });
 
+  useEffect(() => {
+    if (revealInitialHistory) finishInitialFill();
+  }, [finishInitialFill, revealInitialHistory]);
+
   const handleDomScroll = useCallback(() => {
     const scrollContainer = scrollContainerRef.current;
     if (!isActiveRef.current || !scrollContainer || !isScrollContainerMeasurable(scrollContainer)) {
@@ -827,9 +806,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
   ]);
 
   useEffect(() => {
-    const initialHistoryStartState = createHistoryStartPaginationState();
-    historyStartPaginationStateRef.current = initialHistoryStartState;
-    setHistoryStartPaginationState(initialHistoryStartState);
+    resetHistoryStart();
     readingAnchor.reset();
     const frame = window.requestAnimationFrame(() => {
       historyStartReadyRef.current = true;
@@ -838,10 +815,11 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     return () => {
       window.cancelAnimationFrame(frame);
       historyStartReadyRef.current = false;
+      disposeHistoryStart();
       historyStartSettleSchedulerRef.current?.cancel();
       historyStartSettleSchedulerRef.current = null;
     };
-  }, [evaluateHistoryStart, props.agentId, readingAnchor]);
+  }, [disposeHistoryStart, evaluateHistoryStart, props.agentId, readingAnchor, resetHistoryStart]);
 
   useLayoutEffect(() => {
     if (!isActiveRef.current || !isActivationReady) {
@@ -930,16 +908,18 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
       updateScrollMetrics();
     }
     evaluateHistoryStart();
-    if (historyStartPaginationStateRef.current.status === "settling") {
+    if (isHistoryStartSettling()) {
       scheduleHistoryStartPrependSettle();
     }
   }, [
     evaluateHistoryStart,
     hasOlderHistory,
     isActive,
+    isAuthoritativeHistoryReady,
     isLoadingOlderHistory,
     olderHistoryProgressKey,
     scheduleHistoryStartPrependSettle,
+    isHistoryStartSettling,
     segments.historyMounted.length,
     segments.historyVirtualized.length,
     segments.liveHead.length,
@@ -978,7 +958,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
         lastObservedViewportGeometryRef.current = nextGeometry;
       }
       reconcileReadingPosition();
-      if (historyStartPaginationStateRef.current.status === "settling") {
+      if (isHistoryStartSettling()) {
         scheduleHistoryStartPrependSettle();
       }
       updateScrollMetrics();
@@ -1012,6 +992,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     isActive,
     reportReadingPosition,
     scheduleHistoryStartPrependSettle,
+    isHistoryStartSettling,
     forceStickToBottom,
     updateScrollMetrics,
     measureVirtualizedRows,
@@ -1229,8 +1210,9 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
       // Detached reading has one owner: reconcileReadingPosition.
       overflowAnchor: followOutput ? "auto" : "none",
       scrollbarWidth: overlayScrollbarEnabled ? "none" : undefined,
+      opacity: historyStartPaginationState.visible ? 1 : 0,
     };
-  }, [followOutput, isMobileBreakpoint, scrollEnabled]);
+  }, [followOutput, historyStartPaginationState.visible, isMobileBreakpoint, scrollEnabled]);
   const viewportStyle = useMemo(
     (): CSSProperties => ({
       position: "relative",
@@ -1307,14 +1289,21 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     const isLoadingOperation = isHistoryStartLoadingOperation(historyStartPaginationState);
     return (
       <div style={historyStartSlotStyle} data-testid="older-history-slot">
-        {isLoadingOperation ? (
+        {isLoadingOperation && (
           <div data-testid="load-older-history-spinner">
             <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
           </div>
-        ) : null}
+        )}
+        {!isLoadingOperation &&
+          historyStartPaginationState.status === "failed" &&
+          hasOlderHistory && (
+            <button type="button" onClick={rearmHistoryStartFromUserIntent}>
+              {t("paneFind.retry")}
+            </button>
+          )}
       </div>
     );
-  }, [historyStartPaginationState]);
+  }, [historyStartPaginationState, hasOlderHistory, rearmHistoryStartFromUserIntent, t]);
   const shouldRenderEmpty =
     !boundary.hasMountedHistory &&
     !boundary.hasVirtualizedHistory &&
@@ -1334,7 +1323,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
       >
         <div ref={handleContentRef} style={contentContainerStyle}>
           {historyStartSlot}
-          <div style={streamRowsHostStyle}>
+          <div ref={rowsHostRef} style={streamRowsHostStyle}>
             <div style={virtualRowsContainerStyle} />
             {[
               ...virtualRows.map((virtualRow) => {
@@ -1362,10 +1351,15 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
               ...mountedRows,
             ]}
           </div>
-          {liveAuxiliary}
+          <div ref={auxiliaryRef}>{liveAuxiliary}</div>
           {shouldRenderEmpty ? listEmptyComponent : null}
         </div>
       </div>
+      {!historyStartPaginationState.visible ? (
+        <div data-testid="agent-initial-fill" style={initialFillStyle}>
+          <ThemedLoadingSpinner size="large" uniProps={foregroundMutedColorMapping} />
+        </div>
+      ) : null}
       {scrollEnabled && !isMobileBreakpoint ? (
         <DomOverlayScrollbar
           scrollContainerRef={scrollContainerRef}

packages/app/src/agent-stream/strategy.ts

@@ -87,11 +87,13 @@ export interface StreamRenderInput {
   viewportRef: RefObject<StreamViewportHandle | null>;
   routeBottomAnchorRequest: BottomAnchorRouteRequest | null;
   isAuthoritativeHistoryReady: boolean;
+  isInitialHistoryLoading?: boolean;
+  revealInitialHistory?: boolean;
   onNearBottomChange: (value: boolean) => void;
   // The history row under the top of the viewport, for surfaces that mark where the reader
   // is in the transcript. Only the web viewport measures it today.
   onReadingPositionChange?: (rowId: string | null) => void;
-  onNearHistoryStart: () => boolean | Promise<boolean>;
+  onNearHistoryStart: () => Promise<boolean>;
   isLoadingOlderHistory: boolean;
   hasOlderHistory: boolean;
   olderHistoryProgressKey: string | null;

packages/app/src/agent-stream/use-history-start-pagination.ts

@@ -0,0 +1,33 @@
+import { useRef, useState } from "react";
+import { useStableEvent } from "@/hooks/use-stable-event";
+import {
+  createHistoryStartPagination,
+  type HistoryStartPaginationInput,
+  type HistoryStartPaginationState,
+} from "./history-start-pagination";
+
+export function useHistoryStartPagination(input: {
+  initiallyVisible: boolean;
+  read: () => HistoryStartPaginationInput | null;
+  load: () => Promise<boolean>;
+  scheduleSettle: () => void;
+}) {
+  const read = useStableEvent(input.read);
+  const load = useStableEvent(input.load);
+  const scheduleSettle = useStableEvent(input.scheduleSettle);
+  const [state, setState] = useState<HistoryStartPaginationState>(() => ({
+    status: "dormant",
+    visible: input.initiallyVisible,
+  }));
+  const controller = useRef<ReturnType<typeof createHistoryStartPagination> | null>(null);
+  if (!controller.current) {
+    controller.current = createHistoryStartPagination({
+      initiallyVisible: input.initiallyVisible,
+      read,
+      load,
+      scheduleSettle,
+      changed: setState,
+    });
+  }
+  return { state, controller: controller.current };
+}

packages/app/src/agent-stream/view.tsx

@@ -281,6 +281,8 @@ export interface AgentStreamViewProps {
   turnPresentation: TurnPresentation;
   routeBottomAnchorRequest?: BottomAnchorRouteRequest | null;
   isAuthoritativeHistoryReady?: boolean;
+  isInitialHistoryLoading?: boolean;
+  revealInitialHistory?: boolean;
   /** Tail space required by a transparent overlay rendered at the bottom edge. */
   bottomOverlayTailClearance?: number;
   /** Bottom offset required for controls floating above that overlay. */
@@ -337,6 +339,8 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
       turnPresentation,
       routeBottomAnchorRequest = null,
       isAuthoritativeHistoryReady = true,
+      isInitialHistoryLoading,
+      revealInitialHistory,
       bottomOverlayTailClearance = 0,
       bottomOverlayControlClearance,
       toast,
@@ -1218,6 +1222,8 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
                   viewportRef,
                   routeBottomAnchorRequest,
                   isAuthoritativeHistoryReady,
+                  isInitialHistoryLoading,
+                  revealInitialHistory,
                   onNearBottomChange: setIsNearBottom,
                   onReadingPositionChange: handleReadingPositionChange,
                   onNearHistoryStart: loadOlder,
@@ -1369,6 +1375,12 @@ function agentStreamViewPropsEqual(
   if (left.isAuthoritativeHistoryReady !== right.isAuthoritativeHistoryReady) {
     reasons.push("isAuthoritativeHistoryReady");
   }
+  if (left.isInitialHistoryLoading !== right.isInitialHistoryLoading) {
+    reasons.push("isInitialHistoryLoading");
+  }
+  if (left.revealInitialHistory !== right.revealInitialHistory) {
+    reasons.push("revealInitialHistory");
+  }
   if (left.bottomOverlayTailClearance !== right.bottomOverlayTailClearance) {
     reasons.push("bottomOverlayTailClearance");
   }

packages/app/src/components/terminal-emulator-native-grid.native.tsx

@@ -1,14 +1,13 @@
+import Svg, { Path } from "react-native-svg";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import {
   Keyboard,
   type LayoutChangeEvent,
   PanResponder,
-  type PanResponderGestureState,
   Pressable,
   StyleSheet,
   Text,
   View,
-  type GestureResponderEvent,
   type StyleProp,
   type ViewStyle,
 } from "react-native";
@@ -47,13 +46,10 @@ import {
   type TerminalSelectionViewport,
 } from "../terminal/native-renderer/terminal-selection";
 import {
-  TERMINAL_GESTURE_LONG_PRESS_MS,
-  TERMINAL_GESTURE_TAP_TOLERANCE_PX,
-  advanceTerminalScrollGesture,
-  classifyTerminalGestureIntent,
-  resolveTerminalGestureReleaseAction,
-  type TerminalGestureIntent,
-} from "../terminal/native-renderer/terminal-selection-gesture";
+  createTerminalSelectionController,
+  terminalSelectionHandles,
+  TERMINAL_SELECTION_GRIP_SIZE,
+} from "../terminal/native-renderer/terminal-selection-controller";
 import { resolveNativeTerminalMountAction } from "../terminal/native-renderer/terminal-mount-policy";
 import {
   forwardNativeTerminalKey,
@@ -87,38 +83,6 @@ const DEFAULT_XTERM_THEME: ITheme = {
   foreground: "#e6e6e6",
   cursor: "#e6e6e6",
 };
-interface NativeTerminalPanState {
-  lastDy: number;
-  rowRemainder: number;
-  didScroll: boolean;
-  didNavigate: boolean;
-  movedBeyondTapTolerance: boolean;
-  intent: TerminalGestureIntent | null;
-}
-
-interface NativeTerminalSelectionPress {
-  startX: number;
-  startY: number;
-  startedAt: number;
-  startedWithSelection: boolean;
-  status: "pressing" | "selecting";
-}
-
-function resolvePanResponderPoint(
-  press: NativeTerminalSelectionPress,
-  event: GestureResponderEvent,
-  gesture: PanResponderGestureState,
-): { x: number; y: number } {
-  const eventDx = event.nativeEvent.locationX - press.startX;
-  const eventDy = event.nativeEvent.locationY - press.startY;
-  const dx = Math.abs(eventDx) > Math.abs(gesture.dx) ? eventDx : gesture.dx;
-  const dy = Math.abs(eventDy) > Math.abs(gesture.dy) ? eventDy : gesture.dy;
-  return {
-    x: press.startX + dx,
-    y: press.startY + dy,
-  };
-}
-
 function initialNativeTerminalSize(): TerminalMeasuredSize {
   return { rows: MIN_NATIVE_TERMINAL_ROWS, cols: MIN_NATIVE_TERMINAL_COLS };
 }
@@ -163,19 +127,14 @@ function NativeTerminalEmulator({
   const outputDrainRef = useRef<NativeTerminalOutputDrain | null>(null);
   const screenModelRef = useRef<TerminalScreenModel | null>(null);
   const selectionModelRef = useRef<TerminalSelectionModel>(createTerminalSelectionModel());
-  const selectionLongPressTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const selectionPressRef = useRef<NativeTerminalSelectionPress | null>(null);
+  const selectionControllerRef = useRef<ReturnType<
+    typeof createTerminalSelectionController
+  > | null>(null);
+  const gestureStartRef = useRef({ x: 0, y: 0 });
+  const [cellMetrics, setCellMetrics] = useState<TerminalGridCellMetrics | null>(null);
   const latestResolvedScreenRef = useRef<TerminalScreenState | null>(null);
   const paintFrameRef = useRef<number | null>(null);
   const outputDecoderRef = useRef(new TextDecoder());
-  const panStateRef = useRef<NativeTerminalPanState>({
-    lastDy: 0,
-    rowRemainder: 0,
-    didScroll: false,
-    didNavigate: false,
-    movedBeyondTapTolerance: false,
-    intent: null,
-  });
   const inputModeTrackerRef = useRef(new TerminalInputModeTracker());
   const lastInputModeStateRef = useRef<TerminalInputModeState>({
     ...inputModeTrackerRef.current.getState(),
@@ -245,6 +204,7 @@ function NativeTerminalEmulator({
   }, []);
 
   const clearSelection = useCallback(() => {
+    selectionControllerRef.current?.cancel();
     const snapshot = selectionModelRef.current.clear();
     commitSelectionRange(snapshot.range);
   }, [commitSelectionRange]);
@@ -255,20 +215,14 @@ function NativeTerminalEmulator({
 
   const syncSelectionWithTerminal = useCallback(
     (terminal: NativeHeadlessTerminal) => {
+      const previous = selectionModelRef.current.getSnapshot().range;
       const snapshot = selectionModelRef.current.sync({ bounds: terminal.getBufferBounds() });
+      if (previous && !snapshot.range) selectionControllerRef.current?.cancel();
       commitSelectionRange(snapshot.range);
     },
     [commitSelectionRange],
   );
 
-  const clearSelectionLongPressTimeout = useCallback(() => {
-    if (selectionLongPressTimeoutRef.current === null) {
-      return;
-    }
-    clearTimeout(selectionLongPressTimeoutRef.current);
-    selectionLongPressTimeoutRef.current = null;
-  }, []);
-
   const resolveVisibleRows = useCallback((terminal: NativeHeadlessTerminal): number => {
     return (
       resolveMeasuredNativeTerminalSize({
@@ -523,8 +477,7 @@ function NativeTerminalEmulator({
     emitMeasuredSize({ source: "measure" });
     return () => {
       callbacksRef.current.onRendererReadyChange?.({ streamKey, isReady: false });
-      clearSelectionLongPressTimeout();
-      selectionPressRef.current = null;
+      selectionControllerRef.current?.cancel();
       if (paintFrameRef.current !== null) {
         cancelAnimationFrame(paintFrameRef.current);
         paintFrameRef.current = null;
@@ -534,7 +487,7 @@ function NativeTerminalEmulator({
       terminalRef.current?.dispose();
       terminalRef.current = null;
     };
-  }, [clearSelectionLongPressTimeout, emitMeasuredSize, resetTerminal, streamKey]);
+  }, [emitMeasuredSize, resetTerminal, streamKey]);
 
   useEffect(() => {
     if (focusRequestToken <= 0) return;
@@ -591,6 +544,7 @@ function NativeTerminalEmulator({
   const handleCellMetricsChange = useCallback(
     (metrics: TerminalGridCellMetrics) => {
       metricsRef.current = metrics;
+      setCellMetrics(metrics);
       emitMeasuredSize({ source: "measure" });
     },
     [emitMeasuredSize],
@@ -663,14 +617,6 @@ function NativeTerminalEmulator({
       if (!coordinate) {
         return;
       }
-      const existingPress = selectionPressRef.current;
-      selectionPressRef.current = {
-        startX: point.x,
-        startY: point.y,
-        startedAt: existingPress?.startedAt ?? Date.now(),
-        startedWithSelection: existingPress?.startedWithSelection ?? false,
-        status: "selecting",
-      };
       const bounds = terminal.getBufferBounds();
       const wordSelection = resolveTerminalWordSelection({ terminal, coordinate });
       let snapshot = selectionModelRef.current.begin({
@@ -685,222 +631,61 @@ function NativeTerminalEmulator({
     [commitSelectionRange, resolveSelectionCoordinate],
   );
 
-  const updateSelectionAtPoint = useCallback(
-    (point: { x: number; y: number }) => {
-      const terminal = terminalRef.current;
-      if (!terminal || selectionPressRef.current?.status !== "selecting") {
-        return;
-      }
-      const coordinate = resolveSelectionCoordinate(point);
-      if (!coordinate) {
-        return;
-      }
-      const snapshot = selectionModelRef.current.update({
-        coordinate,
-        bounds: terminal.getBufferBounds(),
-      });
-      commitSelectionRange(snapshot.range);
-    },
-    [commitSelectionRange, resolveSelectionCoordinate],
-  );
-
-  const handlePanResponderScroll = useCallback(
-    (currentDy: number) => {
-      const cellHeight = metricsRef.current?.cellHeight;
-      if (!cellHeight || cellHeight <= 0) {
-        return;
-      }
-      const panState = panStateRef.current;
-      const update = advanceTerminalScrollGesture({
-        state: panState,
-        currentDy,
-        cellHeight,
-      });
-      panState.lastDy = update.state.lastDy;
-      panState.rowRemainder = update.state.rowRemainder;
-      panState.didScroll = update.state.didScroll;
-      const { rowDelta } = update;
-      if (rowDelta === 0) {
-        return;
-      }
-      if (rowDelta > 0) {
-        applyScroll("up", rowDelta);
-        return;
-      }
-      applyScroll("down", Math.abs(rowDelta));
-    },
-    [applyScroll],
+  const selectionController = useMemo(
+    () =>
+      createTerminalSelectionController({
+        getGeometry: () => {
+          const viewport = resolveSelectionViewport();
+          const metrics = metricsRef.current;
+          return viewport && metrics
+            ? { range: selectionRangeRef.current, viewport, metrics }
+            : null;
+        },
+        onBeginHandle: (endpoint, cols) =>
+          selectionModelRef.current.beginEndpointDrag(endpoint, cols),
+        onMoveHandle: (coordinate) => {
+          const terminal = terminalRef.current;
+          if (!terminal) return;
+          commitSelectionRange(
+            selectionModelRef.current.update({ coordinate, bounds: terminal.getBufferBounds() })
+              .range,
+          );
+        },
+        onLongPress: beginSelectionAtPoint,
+        onTap: focusTerminalFromTap,
+        onScroll: applyScroll,
+        schedule: (callback, delay) => setTimeout(callback, delay) as unknown as number,
+        cancel: (timer) => clearTimeout(timer),
+      }),
+    [
+      applyScroll,
+      beginSelectionAtPoint,
+      commitSelectionRange,
+      focusTerminalFromTap,
+      resolveSelectionViewport,
+    ],
   );
+  selectionControllerRef.current = selectionController;
 
   const panResponder = useMemo(
     () =>
       PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onStartShouldSetPanResponderCapture: () => true,
-        onMoveShouldSetPanResponder: (_event, gesture) => {
-          const intent = classifyTerminalGestureIntent({
-            status: selectionRangeRef.current ? "selecting" : "pressing",
-            dx: gesture.dx,
-            dy: gesture.dy,
-            vx: gesture.vx,
-            vy: gesture.vy,
-          });
-          return intent === "scroll" || intent === "select";
-        },
-        onMoveShouldSetPanResponderCapture: (_event, gesture) => {
-          const intent = classifyTerminalGestureIntent({
-            status: selectionRangeRef.current ? "selecting" : "pressing",
-            dx: gesture.dx,
-            dy: gesture.dy,
-            vx: gesture.vx,
-            vy: gesture.vy,
-          });
-          return intent === "scroll" || intent === "select";
-        },
         onPanResponderGrant: (event) => {
-          panStateRef.current = {
-            lastDy: 0,
-            rowRemainder: 0,
-            didScroll: false,
-            didNavigate: false,
-            movedBeyondTapTolerance: false,
-            intent: null,
-          };
-          const point = {
-            x: event.nativeEvent.locationX,
-            y: event.nativeEvent.locationY,
-          };
-          const pressStatus = selectionRangeRef.current ? "selecting" : "pressing";
-          selectionPressRef.current = {
-            startX: point.x,
-            startY: point.y,
-            startedAt: Date.now(),
-            startedWithSelection: pressStatus === "selecting",
-            status: pressStatus,
-          };
-          clearSelectionLongPressTimeout();
-          if (pressStatus === "selecting") {
-            return;
-          }
-          selectionLongPressTimeoutRef.current = setTimeout(() => {
-            selectionLongPressTimeoutRef.current = null;
-            const press = selectionPressRef.current;
-            if (press?.status !== "pressing") {
-              return;
-            }
-            beginSelectionAtPoint({ x: press.startX, y: press.startY });
-          }, TERMINAL_GESTURE_LONG_PRESS_MS);
-        },
-        onPanResponderMove: (event, gesture) => {
-          const selectionPress = selectionPressRef.current;
-          const panState = panStateRef.current;
-          if (Math.hypot(gesture.dx, gesture.dy) > TERMINAL_GESTURE_TAP_TOLERANCE_PX) {
-            panState.movedBeyondTapTolerance = true;
-          }
-          if (selectionPress?.status === "selecting") {
-            if (panState.movedBeyondTapTolerance) {
-              updateSelectionAtPoint(resolvePanResponderPoint(selectionPress, event, gesture));
-            }
-            return;
-          }
-
-          if (panState.intent === "scroll") {
-            handlePanResponderScroll(gesture.dy);
-            return;
-          }
-          if (panState.didNavigate) {
-            return;
-          }
-
-          if (selectionPress?.status === "pressing") {
-            const point = resolvePanResponderPoint(selectionPress, event, gesture);
-            const dx = point.x - selectionPress.startX;
-            const dy = point.y - selectionPress.startY;
-            const intent = classifyTerminalGestureIntent({
-              status: "pressing",
-              dx,
-              dy,
-              vx: gesture.vx,
-              vy: gesture.vy,
-              elapsedMs: Date.now() - selectionPress.startedAt,
-            });
-            if (intent === "tap" || intent === "pending") {
-              return;
-            }
-
-            clearSelectionLongPressTimeout();
-            panState.intent = intent;
-
-            if (intent === "scroll") {
-              selectionPressRef.current = null;
-              handlePanResponderScroll(gesture.dy);
-              return;
-            }
-
-            if (intent === "select") {
-              beginSelectionAtPoint({ x: selectionPress.startX, y: selectionPress.startY });
-              updateSelectionAtPoint(point);
-              return;
-            }
-          }
-        },
-        onPanResponderRelease: (event, gesture) => {
-          clearSelectionLongPressTimeout();
-          const selectionPress = selectionPressRef.current;
-          if (
-            selectionPress?.status === "selecting" &&
-            panStateRef.current.movedBeyondTapTolerance
-          ) {
-            updateSelectionAtPoint(resolvePanResponderPoint(selectionPress, event, gesture));
-          }
-          selectionPressRef.current = null;
-          const { didScroll, didNavigate, movedBeyondTapTolerance } = panStateRef.current;
-          panStateRef.current = {
-            lastDy: 0,
-            rowRemainder: 0,
-            didScroll: false,
-            didNavigate: false,
-            movedBeyondTapTolerance: false,
-            intent: null,
-          };
-          const releaseAction = resolveTerminalGestureReleaseAction({
-            status: selectionPress?.status ?? "idle",
-            startedWithSelection: selectionPress?.startedWithSelection,
-            didScroll,
-            didNavigate,
-            movedBeyondTapTolerance,
-            pressDurationMs: selectionPress ? Date.now() - selectionPress.startedAt : 0,
-            longPressMs: TERMINAL_GESTURE_LONG_PRESS_MS,
-            scrollMode: terminalScreenRef.current?.scroll.mode ?? "following",
-          });
-          if (releaseAction === "select" && selectionPress) {
-            beginSelectionAtPoint({ x: selectionPress.startX, y: selectionPress.startY });
-            return;
-          }
-          if (releaseAction === "focus" || releaseAction === "clear") {
-            focusTerminalFromTap();
-          }
-        },
-        onPanResponderTerminate: () => {
-          clearSelectionLongPressTimeout();
-          selectionPressRef.current = null;
-          panStateRef.current = {
-            lastDy: 0,
-            rowRemainder: 0,
-            didScroll: false,
-            didNavigate: false,
-            movedBeyondTapTolerance: false,
-            intent: null,
-          };
+          const point = { x: event.nativeEvent.locationX, y: event.nativeEvent.locationY };
+          gestureStartRef.current = point;
+          selectionController.press(point);
         },
+        onPanResponderMove: (_event, gesture) =>
+          selectionController.move({
+            x: gestureStartRef.current.x + gesture.dx,
+            y: gestureStartRef.current.y + gesture.dy,
+          }),
+        onPanResponderRelease: () => selectionController.release(),
+        onPanResponderTerminate: () => selectionController.cancel(),
       }),
-    [
-      beginSelectionAtPoint,
-      clearSelectionLongPressTimeout,
-      focusTerminalFromTap,
-      handlePanResponderScroll,
-      updateSelectionAtPoint,
-    ],
+    [selectionController],
   );
 
   const backgroundColor = xtermTheme.background ?? "#0b0b0b";
@@ -911,6 +696,11 @@ function NativeTerminalEmulator({
 
   const terminalState = terminalScreen?.viewport ?? null;
   const isScrolled = terminalScreen?.scroll.mode === "scrolled";
+  const viewport = resolveSelectionViewport();
+  const handles =
+    viewport && cellMetrics
+      ? terminalSelectionHandles({ range: selectionRange, viewport, metrics: cellMetrics })
+      : [];
   const terminalGrid = terminalState ? (
     <TerminalGridView
       state={terminalState}
@@ -927,6 +717,41 @@ function NativeTerminalEmulator({
     <View onLayout={handleLayout} style={rootStyle} testID={testId}>
       <View {...panResponder.panHandlers} accessible={false} style={styles.nativeSurface}>
         {terminalGrid}
+        <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+          {handles.map((handle) => (
+            <View key={handle.endpoint}>
+              <View
+                style={[
+                  styles.selectionStem,
+                  {
+                    left: Math.max(
+                      0,
+                      Math.min(handle.x - 1, viewport!.cols * cellMetrics!.cellWidth - 2),
+                    ),
+                    top: handle.stemTop,
+                    height: handle.stemHeight,
+                  },
+                ]}
+              />
+              <Svg
+                width={TERMINAL_SELECTION_GRIP_SIZE}
+                height={TERMINAL_SELECTION_GRIP_SIZE}
+                viewBox="0 0 18 18"
+                style={[styles.selectionGrip, { left: handle.gripX - 9, top: handle.gripY - 9 }]}
+              >
+                <Path
+                  fill="#2684ff"
+                  d={
+                    handle.gripDirection === "left"
+                      ? "M18 0H9C4 0 0 4 0 9S4 18 9 18 18 14 18 9Z"
+                      : "M0 0H9C14 0 18 4 18 9S14 18 9 18 0 14 0 9Z"
+                  }
+                  transform={handle.gripAbove ? "translate(0 18) scale(1 -1)" : undefined}
+                />
+              </Svg>
+            </View>
+          ))}
+        </View>
         <TerminalInput
           ref={inputRef}
           isKeyboardVisible={isKeyboardVisible}
@@ -969,6 +794,8 @@ const styles = StyleSheet.create({
   nativeGrid: {
     flex: 1,
   },
+  selectionGrip: { position: "absolute" },
+  selectionStem: { position: "absolute", width: 2, backgroundColor: "#2684ff" },
   followButton: {
     position: "absolute",
     right: 12,

packages/app/src/hooks/use-load-older-agent-history.test.ts

@@ -129,7 +129,7 @@ describe("loadOlderAgentHistory", () => {
 
     expect(client.calls).toEqual([]);
     expect(inFlight.values).toEqual([true]);
-    expect(started).toBe(true);
+    expect(started).toBe(false);
   });
 
   it("requests the page before the current start cursor and clears in-flight on success", async () => {
@@ -153,6 +153,7 @@ describe("loadOlderAgentHistory", () => {
           limit: TIMELINE_FETCH_PAGE_SIZE,
           projection: "projected",
           wholeTurns: true,
+          timeout: 10_000,
         },
       },
     ]);
@@ -169,7 +170,7 @@ describe("loadOlderAgentHistory", () => {
     const toast = createToast();
     const logger = createLogger();
 
-    await loadOlderAgentHistory(agentId, {
+    const applied = await loadOlderAgentHistory(agentId, {
       client,
       cursor: someCursor,
       hasOlder: true,
@@ -179,6 +180,7 @@ describe("loadOlderAgentHistory", () => {
       logger,
     });
 
+    expect(applied).toBe(false);
     expect(client.calls).toHaveLength(1);
     expect(toast.shown).toEqual([
       {

packages/app/src/hooks/use-load-older-agent-history.ts

@@ -18,6 +18,7 @@ export interface LoadOlderAgentHistoryClient {
       cursor: { epoch: string; seq: number };
       limit: number;
       projection: "projected";
+      timeout: number;
     },
   ) => Promise<unknown>;
 }
@@ -44,7 +45,7 @@ export async function loadOlderAgentHistory(
   const { client, cursor, hasOlder, isLoadingOlder, setInFlight, toast, logger, failedMessage } =
     deps;
   if (isLoadingOlder) {
-    return true;
+    return false;
   }
   if (!client || !cursor || !hasOlder) {
     return false;
@@ -52,16 +53,17 @@ export async function loadOlderAgentHistory(
 
   setInFlight(true);
   try {
-    await client.fetchAgentTimeline(
-      agentId,
-      planTimelineOlderFetch({ epoch: cursor.epoch, seq: cursor.startSeq }),
-    );
+    await client.fetchAgentTimeline(agentId, {
+      ...planTimelineOlderFetch({ epoch: cursor.epoch, seq: cursor.startSeq }),
+      timeout: 10_000,
+    });
   } catch (error) {
     (logger ?? console).warn("[Timeline] failed to load older agent history", agentId, error);
     toast?.show(failedMessage ?? i18n.t("loadOlderHistory.failed"), {
       durationMs: 2200,
       testID: "agent-load-older-history-toast",
     });
+    return false;
   } finally {
     setInFlight(false);
   }

packages/app/src/panels/agent-panel.tsx

@@ -1021,6 +1021,10 @@ function ChatAgentContent({
       effectiveAgent={effectiveAgent}
       routeBottomAnchorRequest={routeBottomAnchorRequest}
       hasAppliedAuthoritativeHistory={hasAppliedAuthoritativeHistory}
+      shouldHoldInitialFill={
+        routeBottomAnchorRequest?.reason === "initial-entry" && replicaTimelineStatus !== "painted"
+      }
+      hasCachedHistory={replicaTimelineStatus === "painted"}
       toastApi={toastApi}
       toast={toastState}
       dismiss={dismissToast}
@@ -1051,6 +1055,8 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
   effectiveAgent,
   routeBottomAnchorRequest,
   hasAppliedAuthoritativeHistory,
+  shouldHoldInitialFill,
+  hasCachedHistory,
   toastApi,
   toast,
   dismiss,
@@ -1077,6 +1083,8 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
   effectiveAgent: AgentScreenAgent;
   routeBottomAnchorRequest: RouteBottomAnchorRequest;
   hasAppliedAuthoritativeHistory: boolean;
+  shouldHoldInitialFill: boolean;
+  hasCachedHistory: boolean;
   toastApi: ToastApi;
   toast: ToastState | null;
   dismiss: () => void;
@@ -1203,6 +1211,8 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
           agent={effectiveAgent}
           routeBottomAnchorRequest={routeBottomAnchorRequest}
           hasAppliedAuthoritativeHistory={hasAppliedAuthoritativeHistory}
+          isInitialHistoryLoading={shouldHoldInitialFill && !showHistorySyncError}
+          revealInitialHistory={hasCachedHistory || showHistorySyncError}
           hasActiveComposer={hasActiveComposer}
           hasVisibleAgentTracks={hasVisibleAgentTracks}
           toast={toastApi}
@@ -1339,6 +1349,8 @@ const AgentStreamSection = memo(function AgentStreamSection({
   agent,
   routeBottomAnchorRequest,
   hasAppliedAuthoritativeHistory,
+  isInitialHistoryLoading,
+  revealInitialHistory,
   hasActiveComposer,
   hasVisibleAgentTracks,
   toast,
@@ -1351,6 +1363,8 @@ const AgentStreamSection = memo(function AgentStreamSection({
   agent: AgentScreenAgent;
   routeBottomAnchorRequest: RouteBottomAnchorRequest;
   hasAppliedAuthoritativeHistory: boolean;
+  isInitialHistoryLoading: boolean;
+  revealInitialHistory: boolean;
   hasActiveComposer: boolean;
   hasVisibleAgentTracks: boolean;
   toast: ReturnType<typeof useToastHost>["api"];
@@ -1419,6 +1433,8 @@ const AgentStreamSection = memo(function AgentStreamSection({
       pendingPermissions={pendingPermissions}
       routeBottomAnchorRequest={routeBottomAnchorRequest}
       isAuthoritativeHistoryReady={hasAppliedAuthoritativeHistory}
+      isInitialHistoryLoading={isInitialHistoryLoading}
+      revealInitialHistory={revealInitialHistory}
       bottomOverlayTailClearance={bottomOverlayTailClearance}
       bottomOverlayControlClearance={bottomOverlayControlClearance}
       toast={toast}

packages/app/src/panels/provider-subagent-panel.tsx

@@ -26,6 +26,7 @@ import {
   providerSubagentLifecycleStatus,
   refreshProviderSubagents,
   observeProviderSubagentTimeline,
+  loadOlderProviderSubagentTimeline,
   useProviderSubagentStore,
 } from "@/subagents/provider-store";
 import { useTranslation } from "react-i18next";
@@ -180,26 +181,24 @@ function ProviderSubagentPanel() {
     });
   }, [client, supported, serverId, target.parentAgentId, target.subagentId]);
 
-  const loadOlder = useCallback((): boolean => {
+  const loadOlder = useCallback(async (): Promise<boolean> => {
     if (!client || !supported || isLoadingOlder || !timeline?.hasOlder || !timeline.epoch) {
       return false;
     }
-    const firstSeq = timeline.cursor?.startSeq ?? null;
-    if (firstSeq === null) return false;
     setIsLoadingOlder(true);
-    void client
-      .fetchProviderSubagentTimeline(target.parentAgentId, target.subagentId, {
-        direction: "before",
-        cursor: { epoch: timeline.epoch, seq: firstSeq },
+    try {
+      return await loadOlderProviderSubagentTimeline({
+        client,
+        serverId,
+        parentAgentId: target.parentAgentId,
+        subagentId: target.subagentId,
         limit: TIMELINE_FETCH_PAGE_SIZE,
-      })
-      .then((payload) => {
-        useProviderSubagentStore.getState().replaceTimeline(serverId, payload);
-        return undefined;
-      })
-      .catch(() => undefined)
-      .finally(() => setIsLoadingOlder(false));
-    return true;
+      });
+    } catch {
+      return false;
+    } finally {
+      setIsLoadingOlder(false);
+    }
   }, [
     client,
     isLoadingOlder,

packages/app/src/subagents/provider-store.test.ts

@@ -1,7 +1,9 @@
+import { createHistoryStartPagination } from "@/agent-stream/history-start-pagination";
 import { DaemonConnectionError } from "@getpaseo/client/internal/daemon-client";
-import { afterEach, describe, expect, test } from "vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
 import type { ProviderSubagentDescriptorPayload } from "@getpaseo/protocol/messages";
 import {
+  loadOlderProviderSubagentTimeline,
   observeProviderSubagentTimeline,
   providerSubagentKey,
   refreshProviderSubagents,
@@ -565,6 +567,95 @@ describe("projected child history", () => {
       .getState()
       .replaceTimeline(SERVER_ID, response(value, seqStart, seqEnd, direction));
   }
+  test("older child history completes only after the delayed page is applied", async () => {
+    const tail = { ...response("B", 2, 2), hasOlder: true };
+    useProviderSubagentStore.getState().replaceTimeline(SERVER_ID, tail);
+    let deliver!: (payload: Payload) => void;
+    const client = {
+      fetchProviderSubagentTimeline: () =>
+        new Promise<Payload>((resolve) => {
+          deliver = resolve;
+        }),
+    };
+    let completed = false;
+    const request = loadOlderProviderSubagentTimeline({
+      client,
+      serverId: SERVER_ID,
+      parentAgentId: PARENT_ID,
+      subagentId: SUBAGENT_ID,
+      limit: 100,
+    }).then((result) => {
+      completed = true;
+      return result;
+    });
+    await Promise.resolve();
+    expect(completed).toBe(false);
+    deliver({ ...response("A", 1, 1), direction: "before" });
+    expect(await request).toBe(true);
+    expect(current().cursor?.startSeq).toBe(1);
+  });
+  test("bounds an older child request so a timeout permits another attempt", async () => {
+    vi.useFakeTimers();
+    try {
+      useProviderSubagentStore
+        .getState()
+        .replaceTimeline(SERVER_ID, { ...response("B", 2, 2), hasOlder: true });
+      const timeouts: Array<number | undefined> = [];
+      const client = {
+        fetchProviderSubagentTimeline: (
+          _parent: string,
+          _child: string,
+          options: { timeout?: number },
+        ) => {
+          timeouts.push(options.timeout);
+          return new Promise<Payload>((_resolve, reject) =>
+            setTimeout(() => reject(new Error("timeout")), options.timeout ?? 60_000),
+          );
+        },
+      };
+      let loading = false;
+      const pagination = createHistoryStartPagination({
+        initiallyVisible: true,
+        read: () => ({
+          distanceFromHistoryStart: 0,
+          isUnderfilled: true,
+          hasOlderHistory: true,
+          isLoadingOlderHistory: loading,
+          isReady: true,
+          progressKey: "e:2",
+        }),
+        load: async () => {
+          loading = true;
+          try {
+            return await loadOlderProviderSubagentTimeline({
+              client,
+              serverId: SERVER_ID,
+              parentAgentId: PARENT_ID,
+              subagentId: SUBAGENT_ID,
+              limit: 100,
+            });
+          } catch {
+            return false;
+          } finally {
+            loading = false;
+          }
+        },
+        changed: () => {},
+        scheduleSettle: () => {},
+      });
+      pagination.update();
+      expect(timeouts).toEqual([10_000]);
+      await vi.advanceTimersByTimeAsync(10_000);
+      expect(pagination.state.status).toBe("failed");
+      pagination.rearm();
+      expect(timeouts).toEqual([10_000, 10_000]);
+      expect(pagination.state.status).toBe("loading");
+      pagination.dispose();
+      await vi.advanceTimersByTimeAsync(10_000);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
   test("replaces overlapping fetched text and continues live streaming", () => {
     page("AB", 1, 2);
     stream(3, "C");

packages/app/src/subagents/provider-store.ts

@@ -355,6 +355,35 @@ export const useProviderSubagentStore = create<ProviderSubagentState>((set) => (
 }));
 
 /** Owns child history bootstrap and recovery while a pane observes the child. */
+export async function loadOlderProviderSubagentTimeline({
+  client,
+  serverId,
+  parentAgentId,
+  subagentId,
+  limit,
+}: {
+  client: Pick<DaemonClient, "fetchProviderSubagentTimeline">;
+  serverId: string;
+  parentAgentId: string;
+  subagentId: string;
+  limit: number;
+}): Promise<boolean> {
+  const timeline = useProviderSubagentStore
+    .getState()
+    .timelines.get(providerSubagentKey(serverId, parentAgentId, subagentId));
+  const seq = timeline?.cursor?.startSeq;
+  if (!timeline?.hasOlder || !timeline.epoch || seq == null) return false;
+  const payload = await client.fetchProviderSubagentTimeline(parentAgentId, subagentId, {
+    direction: "before",
+    cursor: { epoch: timeline.epoch, seq },
+    limit,
+    timeout: 10_000,
+  });
+  if (payload.error) return false;
+  useProviderSubagentStore.getState().replaceTimeline(serverId, payload);
+  return true;
+}
+
 export function observeProviderSubagentTimeline({
   client,
   serverId,

packages/app/src/terminal/native-renderer/colors.ts

@@ -48,8 +48,7 @@ export interface TerminalCellStyleResolver {
 export const DEFAULT_TERMINAL_THEME = toXtermTheme(darkTheme.colors.terminal);
 
 export const NATIVE_TERMINAL_SELECTION_COLORS = {
-  background: 0xffffff00,
-  foreground: 0xff000000,
+  background: 0x472684ff,
 } as const;
 
 function build256Palette(theme: ITheme): number[] {

packages/app/src/terminal/native-renderer/terminal-grid-view.native.tsx

@@ -77,7 +77,6 @@ export function TerminalGridView({
       background: resolver.backgroundColor,
       cursor: resolver.cursorColor,
       selectionBackground: NATIVE_TERMINAL_SELECTION_COLORS.background,
-      selectionForeground: NATIVE_TERMINAL_SELECTION_COLORS.foreground,
     }),
     [resolver],
   );

packages/app/src/terminal/native-renderer/terminal-selection-controller.test.ts

@@ -0,0 +1,411 @@
+import { describe, expect, it } from "vitest";
+import { createNativeHeadlessTerminal } from "./headless-terminal-state";
+import {
+  createTerminalSelectionModel,
+  extractTerminalSelectedText,
+  resolveTerminalSelectionRects,
+} from "./terminal-selection";
+import {
+  createTerminalSelectionController,
+  terminalSelectionHandles,
+} from "./terminal-selection-controller";
+
+describe("selection handle controller", () => {
+  it("preserves the grab offset while moving a handle", () => {
+    const range = { start: { row: 1, col: 2 }, end: { row: 1, col: 5 }, coordinateEpoch: 0 };
+    const moves: Array<{ row: number; col: number }> = [];
+    const controller = createTerminalSelectionController({
+      getGeometry: () => ({
+        range,
+        viewport: { firstRow: 0, rows: 10, cols: 10 },
+        metrics: { cellWidth: 10, cellHeight: 10 },
+      }),
+      onBeginHandle: () => {},
+      onMoveHandle: (coordinate) => moves.push(coordinate),
+      onLongPress: () => {},
+      onTap: () => {},
+      onScroll: () => {},
+      schedule: () => 1,
+      cancel: () => {},
+    });
+    controller.press({ x: 23, y: 15 });
+    controller.move({ x: 63, y: 15 });
+    controller.release();
+    expect(moves).toEqual([{ row: 1, col: 5 }]);
+  });
+});
+
+it("selects on hold, preserves a handle tap, and cancels an active drag", () => {
+  const actions: string[] = [];
+  let timer: (() => void) | null = null;
+  const controller = createTerminalSelectionController({
+    getGeometry: () => ({
+      range: { start: { row: 2, col: 2 }, end: { row: 2, col: 5 }, coordinateEpoch: 0 },
+      viewport: { firstRow: 0, rows: 10, cols: 10 },
+      metrics: { cellWidth: 10, cellHeight: 10 },
+    }),
+    onBeginHandle: (endpoint) => actions.push(endpoint),
+    onMoveHandle: () => actions.push("move"),
+    onLongPress: () => actions.push("long"),
+    onTap: () => actions.push("tap"),
+    onScroll: () => actions.push("scroll"),
+    schedule: (callback) => {
+      timer = callback;
+      return 1;
+    },
+    cancel: () => {
+      timer = null;
+    },
+  });
+  controller.press({ x: 90, y: 80 });
+  (timer as (() => void) | null)?.();
+  controller.release();
+  controller.press({ x: 20, y: 25 });
+  controller.release();
+  controller.press({ x: 20, y: 25 });
+  controller.cancel();
+  controller.move({ x: 50, y: 25 });
+  expect(actions).toEqual(["long", "start", "start"]);
+});
+
+it("scrolls selection into history while holding a handle at the edge", () => {
+  let firstRow = 10;
+  let timer: (() => void) | null = null;
+  const coordinates: Array<{ row: number; col: number }> = [];
+  const controller = createTerminalSelectionController({
+    getGeometry: () => ({
+      range: { start: { row: 12, col: 2 }, end: { row: 13, col: 5 }, coordinateEpoch: 0 },
+      viewport: { firstRow, rows: 10, cols: 10 },
+      metrics: { cellWidth: 10, cellHeight: 10 },
+    }),
+    onBeginHandle: () => {},
+    onMoveHandle: (point) => coordinates.push(point),
+    onLongPress: () => {},
+    onTap: () => {},
+    onScroll: (direction) => {
+      if (direction === "up") firstRow--;
+    },
+    schedule: (callback) => {
+      timer = callback;
+      return 1;
+    },
+    cancel: () => {
+      timer = null;
+    },
+  });
+  controller.press({ x: 20, y: 25 });
+  controller.move({ x: 20, y: 1 });
+  (timer as (() => void) | null)?.();
+  (timer as (() => void) | null)?.();
+  controller.release();
+  expect(coordinates).toEqual([
+    { row: 10, col: 2 },
+    { row: 9, col: 2 },
+    { row: 8, col: 2 },
+  ]);
+  expect(timer).toBeNull();
+});
+
+it("scrolls outside handles without clearing selection and clears on an outside tap", () => {
+  const actions: string[] = [];
+  const controller = createTerminalSelectionController({
+    getGeometry: () => ({
+      range: { start: { row: 2, col: 2 }, end: { row: 2, col: 5 }, coordinateEpoch: 0 },
+      viewport: { firstRow: 0, rows: 10, cols: 10 },
+      metrics: { cellWidth: 10, cellHeight: 10 },
+    }),
+    onBeginHandle: () => actions.push("handle"),
+    onMoveHandle: () => actions.push("move"),
+    onLongPress: () => actions.push("long"),
+    onTap: () => actions.push("tap"),
+    onScroll: (direction, rows) => actions.push(`${direction}:${rows}`),
+    schedule: () => 1,
+    cancel: () => {},
+  });
+  controller.press({ x: 95, y: 70 });
+  controller.move({ x: 95, y: 90 });
+  controller.release();
+  controller.press({ x: 95, y: 70 });
+  controller.release();
+  expect(actions).toEqual(["up:2", "tap"]);
+});
+
+it("extends the selection after a long press and drag", () => {
+  let timer: (() => void) | null = null;
+  const moves: Array<{ row: number; col: number }> = [];
+  const controller = createTerminalSelectionController({
+    getGeometry: () => ({
+      range: null,
+      viewport: { firstRow: 0, rows: 10, cols: 10 },
+      metrics: { cellWidth: 10, cellHeight: 10 },
+    }),
+    onBeginHandle: () => {},
+    onMoveHandle: (coordinate) => moves.push(coordinate),
+    onLongPress: () => {},
+    onTap: () => {},
+    onScroll: () => {},
+    schedule: (callback) => {
+      timer = callback;
+      return 1;
+    },
+    cancel: () => {
+      timer = null;
+    },
+  });
+  controller.press({ x: 25, y: 25 });
+  (timer as (() => void) | null)?.();
+  controller.move({ x: 65, y: 35 });
+  controller.release();
+  expect(moves).toEqual([{ row: 3, col: 6 }]);
+});
+
+it.each([
+  {
+    endpoint: "start" as const,
+    startX: 20,
+    crossedX: 80,
+    crossedText: "gh",
+    crossedStart: 6,
+    crossedEnd: 7,
+    backX: 10,
+    backText: "bcdef",
+    backStart: 1,
+    backEnd: 5,
+  },
+  {
+    endpoint: "end" as const,
+    startX: 60,
+    crossedX: 10,
+    crossedText: "b",
+    crossedStart: 1,
+    crossedEnd: 1,
+    backX: 80,
+    backText: "cdefgh",
+    backStart: 2,
+    backEnd: 7,
+  },
+])("tracks the $endpoint handle through crossing and back", async (scenario) => {
+  const terminal = createNativeHeadlessTerminal({ rows: 4, cols: 10 });
+  try {
+    await terminal.write("abcdefghij");
+    const bounds = terminal.getBufferBounds();
+    const model = createTerminalSelectionModel();
+    model.begin({ coordinate: { row: 0, col: 2 }, bounds });
+    model.update({ coordinate: { row: 0, col: 5 }, bounds });
+    const viewport = { firstRow: 0, rows: 4, cols: 10 };
+    const metrics = { cellWidth: 10, cellHeight: 10 };
+    const geometry = () => ({ range: model.getSnapshot().range, viewport, metrics });
+    const controller = createTerminalSelectionController({
+      getGeometry: geometry,
+      onBeginHandle: (endpoint, cols) => model.beginEndpointDrag(endpoint, cols),
+      onMoveHandle: (coordinate) => {
+        model.update({ coordinate, bounds });
+      },
+      onLongPress: () => {},
+      onTap: () => {},
+      onScroll: () => {},
+      schedule: () => 1,
+      cancel: () => {},
+    });
+    const check = (start: number, end: number, text: string) => {
+      const range = model.getSnapshot().range;
+      expect(range).toEqual({
+        start: { row: 0, col: start },
+        end: { row: 0, col: end },
+        coordinateEpoch: bounds.coordinateEpoch,
+      });
+      expect(terminalSelectionHandles(geometry())).toMatchObject([
+        { endpoint: "start", x: start * 10, y: 5 },
+        { endpoint: "end", x: (end + 1) * 10, y: 5 },
+      ]);
+      expect(resolveTerminalSelectionRects({ selection: range, viewport, metrics })).toEqual([
+        {
+          key: `0:${start}:${end}`,
+          x: start * 10,
+          y: 0,
+          width: (end - start + 1) * 10,
+          height: 10,
+        },
+      ]);
+      expect(extractTerminalSelectedText({ terminal, selection: range })).toBe(text);
+    };
+    controller.press({ x: scenario.startX, y: 5 });
+    controller.move({ x: scenario.crossedX, y: 5 });
+    check(scenario.crossedStart, scenario.crossedEnd, scenario.crossedText);
+    controller.move({ x: scenario.backX, y: 5 });
+    check(scenario.backStart, scenario.backEnd, scenario.backText);
+    controller.release();
+  } finally {
+    terminal.dispose();
+  }
+});
+
+it.each([
+  {
+    endpoint: "end" as const,
+    initialRow: 0,
+    targetRow: 1,
+    targetX: 0,
+    expectedRow: 0,
+    expectedCol: 9,
+    text: "cdefghij",
+  },
+  {
+    endpoint: "start" as const,
+    initialRow: 1,
+    targetRow: 0,
+    targetX: 100,
+    expectedRow: 1,
+    expectedCol: 0,
+    text: "KLMNOP",
+  },
+])("preserves a $endpoint boundary at a row edge", async (scenario) => {
+  const terminal = createNativeHeadlessTerminal({ rows: 4, cols: 10 });
+  try {
+    await terminal.write("abcdefghij\r\nKLMNOPQRST");
+    const bounds = terminal.getBufferBounds();
+    const model = createTerminalSelectionModel();
+    model.begin({ coordinate: { row: scenario.initialRow, col: 2 }, bounds });
+    model.update({ coordinate: { row: scenario.initialRow, col: 5 }, bounds });
+    const viewport = { firstRow: 0, rows: 4, cols: 10 };
+    const metrics = { cellWidth: 10, cellHeight: 10 };
+    const geometry = () => ({ range: model.getSnapshot().range, viewport, metrics });
+    const controller = createTerminalSelectionController({
+      getGeometry: geometry,
+      onBeginHandle: (endpoint, cols) => model.beginEndpointDrag(endpoint, cols),
+      onMoveHandle: (coordinate) => {
+        model.update({ coordinate, bounds });
+      },
+      onLongPress: () => {},
+      onTap: () => {},
+      onScroll: () => {},
+      schedule: () => 1,
+      cancel: () => {},
+    });
+    controller.press({ x: scenario.endpoint === "end" ? 60 : 20, y: scenario.initialRow * 10 + 5 });
+    controller.move({ x: scenario.targetX, y: scenario.targetRow * 10 + 5 });
+    const range = model.getSnapshot().range;
+    expect(range?.[scenario.endpoint]).toEqual({
+      row: scenario.expectedRow,
+      col: scenario.expectedCol,
+    });
+    expect(extractTerminalSelectedText({ terminal, selection: range })).toBe(scenario.text);
+    expect(
+      terminalSelectionHandles(geometry()).find((handle) => handle.endpoint === scenario.endpoint),
+    ).toMatchObject({
+      x: scenario.endpoint === "end" ? 100 : 0,
+      y: scenario.expectedRow * 10 + 5,
+    });
+    controller.release();
+  } finally {
+    terminal.dispose();
+  }
+});
+
+it("cancels a drag when buffer coordinates are invalidated", () => {
+  const model = createTerminalSelectionModel();
+  const bounds = { oldestRow: 0, newestRow: 9, coordinateEpoch: 0 };
+  model.begin({ coordinate: { row: 2, col: 2 }, bounds });
+  model.update({ coordinate: { row: 2, col: 5 }, bounds });
+  const viewport = { firstRow: 0, rows: 10, cols: 10 };
+  const metrics = { cellWidth: 10, cellHeight: 10 };
+  const controller = createTerminalSelectionController({
+    getGeometry: () => ({ range: model.getSnapshot().range, viewport, metrics }),
+    onBeginHandle: (endpoint, cols) => model.beginEndpointDrag(endpoint, cols),
+    onMoveHandle: (coordinate) => {
+      model.update({ coordinate, bounds });
+    },
+    onLongPress: () => {},
+    onTap: () => {},
+    onScroll: () => {},
+    schedule: () => 1,
+    cancel: () => {},
+  });
+  controller.press({ x: 20, y: 25 });
+  const previous = model.getSnapshot().range;
+  const snapshot = model.sync({ bounds: { ...bounds, coordinateEpoch: 1 } });
+  if (previous && !snapshot.range) controller.cancel();
+  controller.move({ x: 80, y: 25 });
+  controller.release();
+  expect(model.getSnapshot().range).toBeNull();
+});
+
+it("preserves a newly selected word through small movement at the viewport edge", () => {
+  const model = createTerminalSelectionModel();
+  const bounds = { oldestRow: 0, newestRow: 9, coordinateEpoch: 0 };
+  let timer: (() => void) | null = null;
+  const controller = createTerminalSelectionController({
+    getGeometry: () => ({
+      range: model.getSnapshot().range,
+      viewport: { firstRow: 0, rows: 10, cols: 20 },
+      metrics: { cellWidth: 10, cellHeight: 10 },
+    }),
+    onBeginHandle: (endpoint, cols) => model.beginEndpointDrag(endpoint, cols),
+    onMoveHandle: (coordinate) => {
+      model.update({ coordinate, bounds });
+    },
+    onLongPress: () => {
+      model.begin({ coordinate: { row: 0, col: 2 }, bounds });
+      model.update({ coordinate: { row: 0, col: 6 }, bounds });
+    },
+    onTap: () => {},
+    onScroll: () => {},
+    schedule: (callback) => {
+      timer = callback;
+      return 1;
+    },
+    cancel: () => {
+      timer = null;
+    },
+  });
+  controller.press({ x: 45, y: 5 });
+  const fire = timer as (() => void) | null;
+  timer = null;
+  fire?.();
+  controller.move({ x: 44, y: 4 });
+  controller.release();
+  expect(model.getSnapshot().range).toEqual({
+    start: { row: 0, col: 2 },
+    end: { row: 0, col: 6 },
+    coordinateEpoch: 0,
+  });
+  expect(timer).toBeNull();
+});
+
+it("places mirrored teardrop grips below the selected row", () => {
+  const handles = terminalSelectionHandles({
+    range: { start: { row: 2, col: 2 }, end: { row: 2, col: 5 }, coordinateEpoch: 0 },
+    viewport: { firstRow: 0, rows: 10, cols: 10 },
+    metrics: { cellWidth: 10, cellHeight: 10 },
+  });
+  expect(handles).toMatchObject([
+    { endpoint: "start", x: 20, y: 25, gripX: 11, gripY: 39, gripDirection: "left" },
+    { endpoint: "end", x: 60, y: 25, gripX: 69, gripY: 39, gripDirection: "right" },
+  ]);
+});
+
+it("keeps edge grips reachable and preserves the offset from the cell when dragging a grip", () => {
+  const range = { start: { row: 0, col: 0 }, end: { row: 9, col: 9 }, coordinateEpoch: 0 };
+  const viewport = { firstRow: 0, rows: 10, cols: 10 };
+  const metrics = { cellWidth: 10, cellHeight: 10 };
+  const handles = terminalSelectionHandles({ range, viewport, metrics });
+  expect(handles.map(({ gripX, gripY }) => ({ gripX, gripY }))).toEqual([
+    { gripX: 9, gripY: 19 },
+    { gripX: 91, gripY: 81 },
+  ]);
+  const moves: Array<{ row: number; col: number }> = [];
+  const controller = createTerminalSelectionController({
+    getGeometry: () => ({ range, viewport, metrics }),
+    onBeginHandle: () => {},
+    onMoveHandle: (coordinate) => moves.push(coordinate),
+    onLongPress: () => {},
+    onTap: () => {},
+    onScroll: () => {},
+    schedule: () => 1,
+    cancel: () => {},
+  });
+  controller.press({ x: 9, y: 19 });
+  controller.move({ x: 19, y: 29 });
+  controller.release();
+  expect(moves).toEqual([{ row: 1, col: 1 }]);
+});

packages/app/src/terminal/native-renderer/terminal-selection-controller.ts

@@ -0,0 +1,208 @@
+import type { TerminalGridCellMetrics } from "./terminal-grid-metrics";
+import type {
+  TerminalBufferCoordinate,
+  TerminalSelectionPoint,
+  TerminalSelectionRange,
+  TerminalSelectionViewport,
+} from "./terminal-selection";
+export const TERMINAL_SELECTION_GRIP_SIZE = 18;
+const TERMINAL_GESTURE_LONG_PRESS_MS = 450;
+const TERMINAL_GESTURE_TAP_TOLERANCE_PX = 8;
+
+type Endpoint = "start" | "end";
+interface Geometry {
+  range: TerminalSelectionRange | null;
+  viewport: TerminalSelectionViewport;
+  metrics: TerminalGridCellMetrics;
+}
+interface Ports {
+  getGeometry(): Geometry | null;
+  onBeginHandle(endpoint: Endpoint, cols: number): void;
+  onMoveHandle(coordinate: TerminalBufferCoordinate): void;
+  onLongPress(point: TerminalSelectionPoint): void;
+  onTap(): void;
+  onScroll(direction: "up" | "down", rows: number): void;
+  schedule(callback: () => void, delay: number): number;
+  cancel(timer: number): void;
+}
+
+export function terminalSelectionHandles(geometry: Geometry): Array<{
+  endpoint: Endpoint;
+  x: number;
+  y: number;
+  gripX: number;
+  gripY: number;
+  gripDirection: "left" | "right";
+  gripAbove: boolean;
+  stemTop: number;
+  stemHeight: number;
+}> {
+  const { range, viewport, metrics } = geometry;
+  if (!range) return [];
+  return (["start", "end"] as const).flatMap((endpoint) => {
+    const cell = range[endpoint];
+    if (cell.row < viewport.firstRow || cell.row >= viewport.firstRow + viewport.rows) return [];
+    const x = (cell.col + (endpoint === "end" ? 1 : 0)) * metrics.cellWidth;
+    const stemTop = (cell.row - viewport.firstRow) * metrics.cellHeight;
+    const size = TERMINAL_SELECTION_GRIP_SIZE;
+    const width = viewport.cols * metrics.cellWidth;
+    const height = viewport.rows * metrics.cellHeight;
+    const wantsLeft = endpoint === "start";
+    const gripDirection =
+      (wantsLeft && x >= size) || (!wantsLeft && x > width - size) ? "left" : "right";
+    const gripAbove = stemTop + metrics.cellHeight + size > height;
+    const gripTop = gripAbove ? Math.max(0, stemTop - size) : stemTop + metrics.cellHeight;
+    return [
+      {
+        endpoint,
+        x,
+        y: stemTop + metrics.cellHeight / 2,
+        gripX: x + (gripDirection === "left" ? -size / 2 : size / 2),
+        gripY: gripTop + size / 2,
+        gripDirection,
+        gripAbove,
+        stemTop,
+        stemHeight: metrics.cellHeight,
+      },
+    ];
+  });
+}
+
+export function createTerminalSelectionController(ports: Ports) {
+  let press: {
+    start: TerminalSelectionPoint;
+    point: TerminalSelectionPoint;
+    endpoint: Endpoint | null;
+    offset: TerminalSelectionPoint;
+    fixed: TerminalBufferCoordinate | null;
+    moved: boolean;
+    long: boolean;
+    scrolling: boolean;
+    remainder: number;
+  } | null = null;
+  let timer: number | null = null;
+  function stopTimer() {
+    if (timer !== null) ports.cancel(timer);
+    timer = null;
+  }
+  function updateHandle() {
+    const geometry = ports.getGeometry();
+    if (!press || (!press.endpoint && !press.long) || !geometry) return;
+    const { viewport, metrics } = geometry;
+    const x = press.point.x - press.offset.x;
+    const y = press.point.y - press.offset.y;
+    let row =
+      viewport.firstRow +
+      Math.max(0, Math.min(viewport.rows - 1, Math.floor(y / metrics.cellHeight)));
+    let col = Math.floor(x / metrics.cellWidth);
+    if (press.endpoint && press.fixed) {
+      const boundary = Math.round(x / metrics.cellWidth);
+      const isEnd =
+        row > press.fixed.row || (row === press.fixed.row && boundary > press.fixed.col);
+      col = boundary - (isEnd ? 1 : 0);
+      if (col < 0 && isEnd) {
+        row -= 1;
+        col = viewport.cols - 1;
+      } else if (col >= viewport.cols && !isEnd) {
+        row += 1;
+        col = 0;
+      }
+    }
+    col = Math.max(0, Math.min(viewport.cols - 1, col));
+    ports.onMoveHandle({ row, col });
+  }
+  function edgeTick() {
+    timer = null;
+    const geometry = ports.getGeometry();
+    if (!press || (!press.endpoint && !press.long) || !geometry) return;
+    const y = press.point.y - press.offset.y;
+    const height = geometry.viewport.rows * geometry.metrics.cellHeight;
+    let direction: "up" | "down" | null = null;
+    if (y < geometry.metrics.cellHeight) direction = "up";
+    else if (y > height - geometry.metrics.cellHeight) direction = "down";
+    if (!direction) return;
+    ports.onScroll(direction, 1);
+    if (!press) return;
+    updateHandle();
+    if (press) timer = ports.schedule(edgeTick, 100);
+  }
+  return {
+    press(point: TerminalSelectionPoint) {
+      stopTimer();
+      const geometry = ports.getGeometry();
+      const handles = geometry ? terminalSelectionHandles(geometry) : [];
+      const handle = handles
+        .map((item) => ({
+          endpoint: item.endpoint,
+          x: item.x,
+          y: item.y,
+          distance: Math.hypot(point.x - item.gripX, point.y - item.gripY),
+        }))
+        .filter((item) => item.distance <= 28)
+        .sort((a, b) => a.distance - b.distance)[0];
+      press = {
+        start: point,
+        point,
+        endpoint: handle?.endpoint ?? null,
+        offset: handle ? { x: point.x - handle.x, y: point.y - handle.y } : { x: 0, y: 0 },
+        fixed:
+          handle && geometry?.range
+            ? geometry.range[handle.endpoint === "start" ? "end" : "start"]
+            : null,
+        moved: false,
+        long: false,
+        scrolling: false,
+        remainder: 0,
+      };
+      if (handle && geometry) {
+        ports.onBeginHandle(handle.endpoint, geometry.viewport.cols);
+        return;
+      }
+      timer = ports.schedule(() => {
+        timer = null;
+        if (press && !press.moved) {
+          press.long = true;
+          ports.onLongPress(press.start);
+        }
+      }, TERMINAL_GESTURE_LONG_PRESS_MS);
+    },
+    move(point: TerminalSelectionPoint) {
+      if (!press) return;
+      const previous = press.point;
+      press.point = point;
+      const dx = point.x - press.start.x,
+        dy = point.y - press.start.y;
+      if (Math.hypot(dx, dy) > TERMINAL_GESTURE_TAP_TOLERANCE_PX) {
+        press.moved = true;
+        if (!press.endpoint) stopTimer();
+      }
+      if (press.endpoint || press.long) {
+        if (press.endpoint || press.moved) {
+          updateHandle();
+          stopTimer();
+          if (press) timer = ports.schedule(edgeTick, 100);
+        }
+      } else if (!press.long) {
+        if (!press.scrolling && Math.abs(dy) > 12 && Math.abs(dy) > Math.abs(dx)) {
+          press.scrolling = true;
+          press.remainder = dy;
+        } else if (press.scrolling) press.remainder += point.y - previous.y;
+        const height = ports.getGeometry()?.metrics.cellHeight ?? 0;
+        if (press.scrolling && height > 0) {
+          const rows = Math.trunc(press.remainder / height);
+          press.remainder -= rows * height;
+          if (rows) ports.onScroll(rows > 0 ? "up" : "down", Math.abs(rows));
+        }
+      }
+    },
+    release() {
+      stopTimer();
+      if (press && !press.endpoint && !press.long && !press.moved) ports.onTap();
+      press = null;
+    },
+    cancel() {
+      stopTimer();
+      press = null;
+    },
+  };
+}

packages/app/src/terminal/native-renderer/terminal-selection-gesture.test.ts

@@ -1,354 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import {
-  TERMINAL_GESTURE_LONG_PRESS_MS,
-  TERMINAL_GESTURE_TAP_TOLERANCE_PX,
-  TERMINAL_GESTURE_VERTICAL_SCROLL_THRESHOLD_PX,
-  advanceTerminalScrollGesture,
-  classifyTerminalGestureIntent,
-  resolveTerminalGestureReleaseAction,
-} from "./terminal-selection-gesture";
-
-describe("native terminal gesture policy", () => {
-  describe("advanceTerminalScrollGesture", () => {
-    it("keeps consuming a slow drag after scroll intent arms below one row", () => {
-      let state = { lastDy: 0, rowRemainder: 0, didScroll: false };
-      const rowDeltas: number[] = [];
-
-      for (const currentDy of [13, 15, 18, 22, 28]) {
-        const update = advanceTerminalScrollGesture({
-          state,
-          currentDy,
-          cellHeight: 14,
-        });
-        state = update.state;
-        rowDeltas.push(update.rowDelta);
-      }
-
-      expect({ rowDeltas, state }).toEqual({
-        rowDeltas: [0, 1, 0, 0, 1],
-        state: { lastDy: 28, rowRemainder: 0, didScroll: true },
-      });
-    });
-  });
-
-  describe("classifyTerminalGestureIntent", () => {
-    it("treats a motionless press as a tap", () => {
-      expect(
-        classifyTerminalGestureIntent({
-          status: "pressing",
-          dx: 0,
-          dy: 0,
-          vx: 0,
-          vy: 0,
-        }),
-      ).toEqual("tap");
-    });
-
-    it("treats a tiny jitter within tap tolerance as a tap", () => {
-      expect(
-        classifyTerminalGestureIntent({
-          status: "pressing",
-          dx: TERMINAL_GESTURE_TAP_TOLERANCE_PX - 4,
-          dy: TERMINAL_GESTURE_TAP_TOLERANCE_PX - 4,
-          vx: 0,
-          vy: 0,
-        }),
-      ).toEqual("tap");
-    });
-
-    it("leaves horizontal movement available to terminal selection", () => {
-      expect(
-        classifyTerminalGestureIntent({
-          status: "pressing",
-          dx: TERMINAL_GESTURE_TAP_TOLERANCE_PX + 20,
-          dy: 4,
-          vx: 0,
-          vy: 0,
-        }),
-      ).toEqual("pending");
-    });
-
-    it("does not infer selection from slow horizontal drag dwell", () => {
-      expect(
-        classifyTerminalGestureIntent({
-          status: "pressing",
-          dx: TERMINAL_GESTURE_TAP_TOLERANCE_PX + 40,
-          dy: 3,
-          vx: 0,
-          vy: 0,
-          elapsedMs: TERMINAL_GESTURE_LONG_PRESS_MS + 50,
-        }),
-      ).toEqual("pending");
-    });
-
-    it("keeps tiny horizontal jitter inside tap tolerance as a tap", () => {
-      expect(
-        classifyTerminalGestureIntent({
-          status: "pressing",
-          dx: TERMINAL_GESTURE_TAP_TOLERANCE_PX - 1,
-          dy: 1,
-          vx: 2,
-          vy: 0,
-          elapsedMs: 20,
-        }),
-      ).toEqual("tap");
-    });
-
-    it("keeps horizontal movement below navigation distance pending", () => {
-      expect(
-        classifyTerminalGestureIntent({
-          status: "pressing",
-          dx: TERMINAL_GESTURE_TAP_TOLERANCE_PX + 10,
-          dy: 2,
-          vx: 0,
-          vy: 0,
-        }),
-      ).toEqual("pending");
-    });
-
-    it("treats a clearly vertical drag as scroll", () => {
-      expect(
-        classifyTerminalGestureIntent({
-          status: "pressing",
-          dx: 4,
-          dy: TERMINAL_GESTURE_VERTICAL_SCROLL_THRESHOLD_PX + 5,
-          vx: 0,
-          vy: 0.2,
-        }),
-      ).toEqual("scroll");
-    });
-
-    it("does not navigate on a fast rightward swipe", () => {
-      expect(
-        classifyTerminalGestureIntent({
-          status: "pressing",
-          dx: TERMINAL_GESTURE_TAP_TOLERANCE_PX + 40,
-          dy: 4,
-          vx: 2,
-          vy: 0,
-        }),
-      ).toEqual("pending");
-    });
-
-    it("does not navigate on a slow rightward swipe", () => {
-      expect(
-        classifyTerminalGestureIntent({
-          status: "pressing",
-          dx: TERMINAL_GESTURE_TAP_TOLERANCE_PX + 40,
-          dy: 4,
-          vx: 0,
-          vy: 0,
-        }),
-      ).toEqual("pending");
-    });
-
-    it("does not navigate on a fast leftward swipe", () => {
-      expect(
-        classifyTerminalGestureIntent({
-          status: "pressing",
-          dx: -(TERMINAL_GESTURE_TAP_TOLERANCE_PX + 40),
-          dy: -4,
-          vx: -2,
-          vy: 0,
-        }),
-      ).toEqual("pending");
-    });
-
-    it("does not navigate while movement stays inside tap tolerance", () => {
-      expect(
-        classifyTerminalGestureIntent({
-          status: "pressing",
-          dx: TERMINAL_GESTURE_TAP_TOLERANCE_PX - 1,
-          dy: 2,
-          vx: 2,
-          vy: 0,
-        }),
-      ).toEqual("tap");
-    });
-
-    it("keeps selection intent once selection is active", () => {
-      expect(
-        classifyTerminalGestureIntent({
-          status: "selecting",
-          dx: 100,
-          dy: 50,
-          vx: 2,
-          vy: 1,
-        }),
-      ).toEqual("select");
-    });
-  });
-
-  describe("resolveTerminalGestureReleaseAction", () => {
-    it("focuses the terminal after a normal tap", () => {
-      expect(
-        resolveTerminalGestureReleaseAction({
-          status: "pressing",
-          didScroll: false,
-          didNavigate: false,
-          movedBeyondTapTolerance: false,
-          pressDurationMs: 80,
-          longPressMs: TERMINAL_GESTURE_LONG_PRESS_MS,
-          scrollMode: "following",
-        }),
-      ).toEqual("focus");
-    });
-
-    it("focuses the terminal after a normal tap while scrolled", () => {
-      expect(
-        resolveTerminalGestureReleaseAction({
-          status: "pressing",
-          didScroll: false,
-          didNavigate: false,
-          movedBeyondTapTolerance: false,
-          pressDurationMs: 80,
-          longPressMs: TERMINAL_GESTURE_LONG_PRESS_MS,
-          scrollMode: "scrolled",
-        }),
-      ).toEqual("focus");
-    });
-
-    it("starts selection after a long press", () => {
-      expect(
-        resolveTerminalGestureReleaseAction({
-          status: "pressing",
-          didScroll: false,
-          didNavigate: false,
-          movedBeyondTapTolerance: false,
-          pressDurationMs: TERMINAL_GESTURE_LONG_PRESS_MS + 50,
-          longPressMs: TERMINAL_GESTURE_LONG_PRESS_MS,
-          scrollMode: "following",
-        }),
-      ).toEqual("select");
-    });
-
-    it("starts selection after a 500ms hold", () => {
-      expect(
-        resolveTerminalGestureReleaseAction({
-          status: "pressing",
-          didScroll: false,
-          didNavigate: false,
-          movedBeyondTapTolerance: false,
-          pressDurationMs: 500,
-          longPressMs: TERMINAL_GESTURE_LONG_PRESS_MS,
-          scrollMode: "following",
-        }),
-      ).toEqual("select");
-    });
-
-    it("keeps a 400ms press as a tap", () => {
-      expect(
-        resolveTerminalGestureReleaseAction({
-          status: "pressing",
-          didScroll: false,
-          didNavigate: false,
-          movedBeyondTapTolerance: false,
-          pressDurationMs: 400,
-          longPressMs: TERMINAL_GESTURE_LONG_PRESS_MS,
-          scrollMode: "following",
-        }),
-      ).toEqual("focus");
-    });
-
-    it("does nothing after a scroll gesture", () => {
-      expect(
-        resolveTerminalGestureReleaseAction({
-          status: "pressing",
-          didScroll: true,
-          didNavigate: false,
-          movedBeyondTapTolerance: true,
-          pressDurationMs: 80,
-          longPressMs: TERMINAL_GESTURE_LONG_PRESS_MS,
-          scrollMode: "scrolled",
-        }),
-      ).toEqual("none");
-    });
-
-    it("does nothing after a navigation swipe", () => {
-      expect(
-        resolveTerminalGestureReleaseAction({
-          status: "pressing",
-          didScroll: false,
-          didNavigate: true,
-          movedBeyondTapTolerance: true,
-          pressDurationMs: 80,
-          longPressMs: TERMINAL_GESTURE_LONG_PRESS_MS,
-          scrollMode: "following",
-        }),
-      ).toEqual("none");
-    });
-
-    it("does nothing while actively selecting", () => {
-      expect(
-        resolveTerminalGestureReleaseAction({
-          status: "selecting",
-          didScroll: false,
-          didNavigate: false,
-          movedBeyondTapTolerance: true,
-          pressDurationMs: 80,
-          longPressMs: TERMINAL_GESTURE_LONG_PRESS_MS,
-          scrollMode: "following",
-        }),
-      ).toEqual("none");
-    });
-
-    it("clears an existing selection after a short tap", () => {
-      expect(
-        resolveTerminalGestureReleaseAction({
-          status: "selecting",
-          startedWithSelection: true,
-          didScroll: false,
-          didNavigate: false,
-          movedBeyondTapTolerance: false,
-          pressDurationMs: 80,
-          longPressMs: TERMINAL_GESTURE_LONG_PRESS_MS,
-          scrollMode: "following",
-        }),
-      ).toEqual("clear");
-    });
-
-    it("preserves a word selection created by the current long press", () => {
-      expect(
-        resolveTerminalGestureReleaseAction({
-          status: "selecting",
-          startedWithSelection: false,
-          didScroll: false,
-          didNavigate: false,
-          movedBeyondTapTolerance: false,
-          pressDurationMs: TERMINAL_GESTURE_LONG_PRESS_MS + 50,
-          longPressMs: TERMINAL_GESTURE_LONG_PRESS_MS,
-          scrollMode: "following",
-        }),
-      ).toEqual("none");
-    });
-
-    it("does not focus after an undecided fast drag", () => {
-      expect(
-        resolveTerminalGestureReleaseAction({
-          status: "pressing",
-          didScroll: false,
-          didNavigate: false,
-          movedBeyondTapTolerance: true,
-          pressDurationMs: 80,
-          longPressMs: TERMINAL_GESTURE_LONG_PRESS_MS,
-          scrollMode: "following",
-        }),
-      ).toEqual("none");
-    });
-
-    it("does nothing from idle", () => {
-      expect(
-        resolveTerminalGestureReleaseAction({
-          status: "idle",
-          didScroll: false,
-          didNavigate: false,
-          movedBeyondTapTolerance: false,
-          pressDurationMs: 80,
-          longPressMs: TERMINAL_GESTURE_LONG_PRESS_MS,
-          scrollMode: "following",
-        }),
-      ).toEqual("none");
-    });
-  });
-});

packages/app/src/terminal/native-renderer/terminal-selection-gesture.ts

@@ -1,108 +0,0 @@
-export type TerminalGestureStatus = "idle" | "pressing" | "selecting";
-export type TerminalGestureIntent = "tap" | "pending" | "select" | "scroll";
-export type TerminalGestureScrollMode = "following" | "scrolled";
-
-export interface TerminalGestureMoveInput {
-  status: TerminalGestureStatus;
-  dx: number;
-  dy: number;
-  vx: number;
-  vy: number;
-  elapsedMs?: number;
-}
-
-export interface TerminalGestureReleaseInput {
-  status: TerminalGestureStatus;
-  startedWithSelection?: boolean;
-  didScroll: boolean;
-  didNavigate: boolean;
-  movedBeyondTapTolerance: boolean;
-  pressDurationMs: number;
-  longPressMs: number;
-  scrollMode: TerminalGestureScrollMode;
-}
-
-export interface TerminalScrollGestureState {
-  lastDy: number;
-  rowRemainder: number;
-  didScroll: boolean;
-}
-
-export interface TerminalScrollGestureUpdate {
-  state: TerminalScrollGestureState;
-  rowDelta: number;
-}
-
-export type TerminalGestureAction = "none" | "focus" | "select" | "clear";
-
-export const TERMINAL_GESTURE_TAP_TOLERANCE_PX = 8;
-export const TERMINAL_GESTURE_LONG_PRESS_MS = 450;
-export const TERMINAL_GESTURE_VERTICAL_SCROLL_THRESHOLD_PX = 12;
-
-export function classifyTerminalGestureIntent(
-  input: TerminalGestureMoveInput,
-): TerminalGestureIntent {
-  if (input.status === "selecting") {
-    return "select";
-  }
-
-  const absDx = Math.abs(input.dx);
-  const absDy = Math.abs(input.dy);
-
-  if (absDy > TERMINAL_GESTURE_VERTICAL_SCROLL_THRESHOLD_PX && absDy > absDx) {
-    return "scroll";
-  }
-
-  if (Math.hypot(input.dx, input.dy) > TERMINAL_GESTURE_TAP_TOLERANCE_PX) {
-    return "pending";
-  }
-
-  return "tap";
-}
-
-export function advanceTerminalScrollGesture(input: {
-  state: TerminalScrollGestureState;
-  currentDy: number;
-  cellHeight: number;
-}): TerminalScrollGestureUpdate {
-  const deltaY = input.currentDy - input.state.lastDy;
-  const accumulatedRows = input.state.rowRemainder + deltaY;
-  const rowDelta = Math.trunc(accumulatedRows / input.cellHeight);
-  return {
-    state: {
-      lastDy: input.currentDy,
-      rowRemainder: accumulatedRows - rowDelta * input.cellHeight,
-      didScroll: input.state.didScroll || rowDelta !== 0,
-    },
-    rowDelta,
-  };
-}
-
-export function resolveTerminalGestureReleaseAction(
-  input: TerminalGestureReleaseInput,
-): TerminalGestureAction {
-  if (input.didScroll || input.didNavigate) {
-    return "none";
-  }
-
-  if (input.status === "selecting") {
-    if (!input.startedWithSelection) {
-      return "none";
-    }
-    return input.movedBeyondTapTolerance ? "none" : "clear";
-  }
-
-  if (input.status !== "pressing") {
-    return "none";
-  }
-
-  if (input.pressDurationMs >= input.longPressMs) {
-    return "select";
-  }
-
-  if (input.movedBeyondTapTolerance) {
-    return "none";
-  }
-
-  return "focus";
-}

packages/app/src/terminal/native-renderer/terminal-selection.test.ts

@@ -483,3 +483,51 @@ describe("native terminal selection", () => {
     expect(copied).toEqual([]);
   });
 });
+
+describe("endpoint dragging", () => {
+  it.each([
+    {
+      endpoint: "start" as const,
+      fixed: { row: 2, col: 9 },
+      target: { row: 3, col: 2 },
+      expected: { row: 3, col: 0 },
+    },
+    {
+      endpoint: "end" as const,
+      fixed: { row: 2, col: 0 },
+      target: { row: 1, col: 7 },
+      expected: { row: 1, col: 9 },
+    },
+  ])(
+    "preserves the fixed boundary across a row edge for $endpoint",
+    ({ endpoint, fixed, target, expected }) => {
+      const selection = createTerminalSelectionModel();
+      const bounds = { oldestRow: 0, newestRow: 10, coordinateEpoch: 1 };
+      selection.begin({ coordinate: fixed, bounds });
+      selection.update({ coordinate: fixed, bounds });
+      selection.beginEndpointDrag(endpoint, 10);
+      selection.update({ coordinate: target, bounds });
+      expect(selection.getSnapshot().range?.[endpoint === "start" ? "start" : "end"]).toEqual(
+        expected,
+      );
+    },
+  );
+
+  it.each(["start", "end"] as const)(
+    "keeps the opposite endpoint fixed as %s crosses it",
+    (endpoint) => {
+      const selection = createTerminalSelectionModel();
+      const bounds = { oldestRow: 0, newestRow: 10, coordinateEpoch: 1 };
+      selection.begin({ coordinate: { row: 2, col: 2 }, bounds });
+      selection.update({ coordinate: { row: 3, col: 4 }, bounds });
+      selection.beginEndpointDrag(endpoint, 10);
+      const coordinate = endpoint === "start" ? { row: 4, col: 5 } : { row: 1, col: 1 };
+      selection.update({ coordinate, bounds });
+      expect(selection.getSnapshot().range).toEqual(
+        endpoint === "start"
+          ? { start: { row: 3, col: 5 }, end: coordinate, coordinateEpoch: 1 }
+          : { start: coordinate, end: { row: 2, col: 1 }, coordinateEpoch: 1 },
+      );
+    },
+  );
+});

packages/app/src/terminal/native-renderer/terminal-selection.ts

@@ -25,6 +25,7 @@ export interface TerminalSelectionBounds {
 export interface TerminalSelectionModel {
   begin(input: TerminalSelectionUpdateInput): TerminalSelectionSnapshot;
   update(input: TerminalSelectionUpdateInput): TerminalSelectionSnapshot;
+  beginEndpointDrag(endpoint: "start" | "end", cols: number): void;
   clear(): TerminalSelectionSnapshot;
   sync(input: TerminalSelectionSyncInput): TerminalSelectionSnapshot;
   getSnapshot(): TerminalSelectionSnapshot;
@@ -252,6 +253,7 @@ export function resolveTerminalSelectionRects(
 
 export function createTerminalSelectionModel(): TerminalSelectionModel {
   let state: TerminalSelectionState = { anchor: null, range: null };
+  let drag: { endpoint: "start" | "end"; cols: number } | null = null;
 
   function snapshot(): TerminalSelectionSnapshot {
     return { range: state.range };
@@ -259,18 +261,31 @@ export function createTerminalSelectionModel(): TerminalSelectionModel {
 
   function setSelection(input: TerminalSelectionUpdateInput): TerminalSelectionSnapshot {
     const coordinate = clampCoordinate(input.coordinate, input.bounds);
-    const anchor = state.anchor ?? coordinate;
+    const fixed = state.anchor ?? coordinate;
+    let anchor = fixed;
+    if (drag?.endpoint === "start" && compareCoordinates(coordinate, fixed) > 0) {
+      anchor =
+        fixed.col + 1 < drag.cols
+          ? { row: fixed.row, col: fixed.col + 1 }
+          : { row: fixed.row + 1, col: 0 };
+    } else if (drag?.endpoint === "end" && compareCoordinates(coordinate, fixed) < 0) {
+      anchor =
+        fixed.col > 0
+          ? { row: fixed.row, col: fixed.col - 1 }
+          : { row: fixed.row - 1, col: drag.cols - 1 };
+    }
     const range = normalizeTerminalSelection({
       anchor,
       focus: coordinate,
       coordinateEpoch: input.bounds.coordinateEpoch,
     });
-    state = { anchor, range };
+    state = { anchor: fixed, range };
     return snapshot();
   }
 
   return {
     begin(input: TerminalSelectionUpdateInput): TerminalSelectionSnapshot {
+      drag = null;
       const coordinate = clampCoordinate(input.coordinate, input.bounds);
       state = {
         anchor: coordinate,
@@ -285,7 +300,14 @@ export function createTerminalSelectionModel(): TerminalSelectionModel {
     update(input: TerminalSelectionUpdateInput): TerminalSelectionSnapshot {
       return setSelection(input);
     },
+    beginEndpointDrag(endpoint, cols) {
+      if (state.range) {
+        drag = { endpoint, cols };
+        state = { ...state, anchor: state.range[endpoint === "start" ? "end" : "start"] };
+      }
+    },
     clear(): TerminalSelectionSnapshot {
+      drag = null;
       state = { anchor: null, range: null };
       return snapshot();
     },
@@ -293,6 +315,7 @@ export function createTerminalSelectionModel(): TerminalSelectionModel {
       if (!state.range || rangeIsSafe(state.range, input.bounds)) {
         return snapshot();
       }
+      drag = null;
       state = { anchor: null, range: null };
       return snapshot();
     },