Paginate settled threads on the session board

- Share settled-tail page limits with the sidebar
- Preserve whole worktree groups when slicing board results
- Reset board pagination when the project filter changes

Author: tim-smart

apps/web/src/components/Sidebar.logic.ts

@@ -22,6 +22,10 @@ export const THREAD_JUMP_HINT_SHOW_DELAY_MS = 100;
 // Visible sidebar rows are prewarmed into the thread-detail cache so opening a
 // nearby thread usually reuses an already-hot subscription.
 export const SIDEBAR_THREAD_PREWARM_LIMIT = 10;
+// Settled-tail paging: recent history is the common lookup; the deep tail
+// stays behind an explicit Show more. Shared by SidebarV2 and the board.
+export const SETTLED_TAIL_INITIAL_COUNT = 10;
+export const SETTLED_TAIL_PAGE_COUNT = 25;
 type SidebarProject = {
   id: string;
   title: string;

apps/web/src/components/SidebarV2.tsx

@@ -103,6 +103,8 @@ import { formatRelativeTimeLabel, parseTimestampDate } from "../timestampFormat"
 import type { SidebarThreadSummary } from "../types";
 import { cn } from "~/lib/utils";
 import {
+  SETTLED_TAIL_INITIAL_COUNT,
+  SETTLED_TAIL_PAGE_COUNT,
   formatWorkingDurationLabel,
   firstValidTimestampMs,
   hasUnseenCompletion,
@@ -152,10 +154,6 @@ import { Popover, PopoverPopup, PopoverTrigger } from "./ui/popover";
 import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import { useComposerDraftStore } from "../composerDraftStore";
 
-// Settled-tail paging: recent history is the common lookup; the deep tail
-// stays behind an explicit Show more.
-const SETTLED_TAIL_INITIAL_COUNT = 10;
-const SETTLED_TAIL_PAGE_COUNT = 25;
 const PROJECT_GROUPING_MODE_LABELS: Record<SidebarProjectGroupingMode, string> = {
   repository: "Group by repository",
   repository_path: "Group by repository path",

apps/web/src/components/board/Board.logic.test.ts

@@ -10,9 +10,11 @@ import {
   boardWorktreeKey,
   buildBoardColumns,
   buildBoardProjectFilterPredicate,
+  countBoardColumnThreads,
   deriveBoardColumn,
   parseBoardWorktreeGroupDragId,
   resolveBoardDropIntent,
+  sliceBoardSettledItems,
   sortBoardThreads,
   type BoardColumnItem,
   type BoardColumnInput,
@@ -471,6 +473,68 @@ describe("buildBoardColumns", () => {
   });
 });
 
+describe("countBoardColumnThreads", () => {
+  it("counts a worktree group as its member count", () => {
+    const items: BoardColumnItem<{ readonly id: string }>[] = [
+      { kind: "thread", thread: { id: "thread-1" } },
+      {
+        kind: "worktreeGroup",
+        worktreeKey: "shared-worktree",
+        threads: [{ id: "thread-2" }, { id: "thread-3" }],
+      },
+    ];
+    expect(countBoardColumnThreads(items)).toBe(3);
+    expect(countBoardColumnThreads([])).toBe(0);
+  });
+});
+
+describe("sliceBoardSettledItems", () => {
+  const thread = (id: string): BoardColumnItem<{ readonly id: string }> => ({
+    kind: "thread",
+    thread: { id },
+  });
+  const group = (
+    worktreeKey: string,
+    ...ids: string[]
+  ): BoardColumnItem<{ readonly id: string }> => ({
+    kind: "worktreeGroup",
+    worktreeKey,
+    threads: ids.map((id) => ({ id })),
+  });
+
+  it("returns the same array with no hidden count when the total fits the limit", () => {
+    const items = [thread("thread-1"), group("shared-worktree", "thread-2", "thread-3")];
+    const result = sliceBoardSettledItems(items, 3);
+    expect(result.visibleItems).toBe(items);
+    expect(result.hiddenThreadCount).toBe(0);
+  });
+
+  it("slices plain thread items at the limit", () => {
+    const items = [thread("thread-1"), thread("thread-2"), thread("thread-3")];
+    const result = sliceBoardSettledItems(items, 2);
+    expect(columnThreadIds(result.visibleItems)).toEqual(["thread-1", "thread-2"]);
+    expect(result.hiddenThreadCount).toBe(1);
+  });
+
+  it("includes a group straddling the limit whole and counts its members", () => {
+    const items = [
+      thread("thread-1"),
+      group("shared-worktree", "thread-2", "thread-3", "thread-4"),
+      thread("thread-5"),
+    ];
+    const result = sliceBoardSettledItems(items, 2);
+    expect(result.visibleItems).toEqual([items[0], items[1]]);
+    expect(result.hiddenThreadCount).toBe(1);
+  });
+
+  it("returns no visible items for a zero limit with non-empty input", () => {
+    const items = [thread("thread-1"), thread("thread-2")];
+    const result = sliceBoardSettledItems(items, 0);
+    expect(result.visibleItems).toEqual([]);
+    expect(result.hiddenThreadCount).toBe(2);
+  });
+});
+
 describe("buildBoardProjectFilterPredicate", () => {
   const projectId = ProjectId.make("project-1");
   const otherProjectId = ProjectId.make("project-2");

apps/web/src/components/board/Board.logic.ts

@@ -301,6 +301,38 @@ export function buildBoardColumns<T extends BoardSortableThread>(
   return columns;
 }
 
+/** Total threads across column items; a worktree group counts each member. */
+export function countBoardColumnThreads<T>(items: readonly BoardColumnItem<T>[]): number {
+  return items.reduce(
+    (count, item) => count + (item.kind === "thread" ? 1 : item.threads.length),
+    0,
+  );
+}
+
+/**
+ * Settled-tail slice for the board column. The limit counts threads (a
+ * worktree group counts as its member count) so paging matches the sidebar's
+ * thread-based tail; a group straddling the limit is included whole since a
+ * group card cannot render partially.
+ */
+export function sliceBoardSettledItems<T>(
+  items: readonly BoardColumnItem<T>[],
+  limit: number,
+): { visibleItems: readonly BoardColumnItem<T>[]; hiddenThreadCount: number } {
+  const total = countBoardColumnThreads(items);
+  if (total <= limit) {
+    return { visibleItems: items, hiddenThreadCount: 0 };
+  }
+  const visibleItems: BoardColumnItem<T>[] = [];
+  let shown = 0;
+  for (const item of items) {
+    if (shown >= limit) break;
+    visibleItems.push(item);
+    shown += item.kind === "thread" ? 1 : item.threads.length;
+  }
+  return { visibleItems, hiddenThreadCount: total - shown };
+}
+
 export interface BoardWorktreeThread {
   readonly environmentId: EnvironmentId;
   readonly worktreePath: string | null;

apps/web/src/components/board/BoardView.tsx

@@ -54,6 +54,8 @@ import { useUiStateStore } from "../../uiStateStore";
 import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "../../workspaceTitlebar";
 import { ProjectFavicon, ProjectFaviconFallback } from "../ProjectFavicon";
 import {
+  SETTLED_TAIL_INITIAL_COUNT,
+  SETTLED_TAIL_PAGE_COUNT,
   archiveSelectedThreadEntries,
   buildSidebarV2ThreadContextMenuItems,
   isThreadSettledForDisplay,
@@ -81,10 +83,11 @@ import {
   boardWorktreeKey,
   buildBoardColumns,
   buildBoardProjectFilterPredicate,
+  countBoardColumnThreads,
   deriveBoardColumn,
   parseBoardWorktreeGroupDragId,
   resolveBoardDropIntent,
-  type BoardColumnItem,
+  sliceBoardSettledItems,
   type BoardDropIntent,
 } from "./Board.logic";
 import { BoardCard, BoardCardDragOverlay } from "./BoardCard";
@@ -105,13 +108,6 @@ interface BoardThreadGitContext {
   readonly gitStatusPending: boolean;
 }
 
-function countBoardColumnThreads<T>(items: readonly BoardColumnItem<T>[]): number {
-  return items.reduce(
-    (count, item) => count + (item.kind === "thread" ? 1 : item.threads.length),
-    0,
-  );
-}
-
 /** Error toast for a failed thread action; interruptions and successes are silent. */
 function reportThreadActionFailure(result: AtomCommandResult<unknown, unknown>, title: string) {
   if (result._tag !== "Failure" || isAtomCommandInterrupted(result)) {
@@ -429,6 +425,24 @@ function BoardContent() {
     ],
   );
 
+  // Settled tail renders in pages, mirroring SidebarV2: expansion resets when
+  // the project filter changes so a scope flip never inherits a deep page.
+  const [settledVisibleCount, setSettledVisibleCount] = useState(SETTLED_TAIL_INITIAL_COUNT);
+  const settledResetKey = storedProjectFilter ?? "all";
+  const lastSettledResetKeyRef = useRef(settledResetKey);
+  if (lastSettledResetKeyRef.current !== settledResetKey) {
+    lastSettledResetKeyRef.current = settledResetKey;
+    setSettledVisibleCount(SETTLED_TAIL_INITIAL_COUNT);
+  }
+  const settledTail = useMemo(
+    () => sliceBoardSettledItems(columns.settled, settledVisibleCount),
+    [columns, settledVisibleCount],
+  );
+  const showMoreSettled = useCallback(
+    () => setSettledVisibleCount((count) => count + SETTLED_TAIL_PAGE_COUNT),
+    [],
+  );
+
   const dragClickGuard = useMemo(() => createBoardDragClickGuard(), []);
   useEffect(() => () => dragClickGuard.dispose(), [dragClickGuard]);
   const [activeDragId, setActiveDragId] = useState<string | null>(null);
@@ -792,55 +806,71 @@ function BoardContent() {
               data-testid="board-column-row"
               className="flex h-full w-full min-w-max justify-center gap-3 p-3 sm:p-4"
             >
-              {BOARD_COLUMN_IDS.map((columnId) => (
-                <BoardColumn
-                  key={columnId}
-                  columnId={columnId}
-                  count={countBoardColumnThreads(columns[columnId])}
-                >
-                  {columns[columnId].map((item) => {
-                    const renderCard = (thread: SidebarThreadSummary) => {
-                      const gitContext = getThreadGitContext(thread);
-                      const threadKey = scopedThreadKey(
-                        scopeThreadRef(thread.environmentId, thread.id),
-                      );
+              {BOARD_COLUMN_IDS.map((columnId) => {
+                const items = columnId === "settled" ? settledTail.visibleItems : columns[columnId];
+                return (
+                  <BoardColumn
+                    key={columnId}
+                    columnId={columnId}
+                    count={countBoardColumnThreads(columns[columnId])}
+                  >
+                    {items.map((item) => {
+                      const renderCard = (thread: SidebarThreadSummary) => {
+                        const gitContext = getThreadGitContext(thread);
+                        const threadKey = scopedThreadKey(
+                          scopeThreadRef(thread.environmentId, thread.id),
+                        );
+                        return (
+                          <BoardCard
+                            key={threadKey}
+                            thread={thread}
+                            project={gitContext.project}
+                            gitStatus={gitContext.gitStatus}
+                            gitStatusPending={gitContext.gitStatusPending}
+                            isSettled={settledThreadKeys.has(threadKey)}
+                            onOpenThread={handleOpenThread}
+                            onShowContextMenu={showThreadContextMenu}
+                            dragClickGuard={dragClickGuard}
+                          />
+                        );
+                      };
+                      if (item.kind === "thread") {
+                        return renderCard(item.thread);
+                      }
+                      // buildBoardColumns only emits groups with >= 2 members.
+                      const mostRecentThread = item.threads[0]!;
                       return (
-                        <BoardCard
-                          key={threadKey}
-                          thread={thread}
-                          project={gitContext.project}
-                          gitStatus={gitContext.gitStatus}
-                          gitStatusPending={gitContext.gitStatusPending}
-                          isSettled={settledThreadKeys.has(threadKey)}
-                          onOpenThread={handleOpenThread}
-                          onShowContextMenu={showThreadContextMenu}
+                        <BoardWorktreeGroup
+                          key={item.worktreeKey}
+                          worktreeKey={item.worktreeKey}
+                          threadRefs={item.threads.map((thread) =>
+                            scopeThreadRef(thread.environmentId, thread.id),
+                          )}
+                          worktreePath={mostRecentThread.worktreePath ?? ""}
+                          branch={mostRecentThread.branch}
+                          mostRecentCard={renderCard(mostRecentThread)}
                           dragClickGuard={dragClickGuard}
-                        />
+                        >
+                          {item.threads.slice(1).map(renderCard)}
+                        </BoardWorktreeGroup>
                       );
-                    };
-                    if (item.kind === "thread") {
-                      return renderCard(item.thread);
-                    }
-                    // buildBoardColumns only emits groups with >= 2 members.
-                    const mostRecentThread = item.threads[0]!;
-                    return (
-                      <BoardWorktreeGroup
-                        key={item.worktreeKey}
-                        worktreeKey={item.worktreeKey}
-                        threadRefs={item.threads.map((thread) =>
-                          scopeThreadRef(thread.environmentId, thread.id),
-                        )}
-                        worktreePath={mostRecentThread.worktreePath ?? ""}
-                        branch={mostRecentThread.branch}
-                        mostRecentCard={renderCard(mostRecentThread)}
-                        dragClickGuard={dragClickGuard}
+                    })}
+                    {columnId === "settled" && settledTail.hiddenThreadCount > 0 ? (
+                      <button
+                        type="button"
+                        onClick={showMoreSettled}
+                        data-testid="board-settled-show-more"
+                        className="mt-1 flex h-[30px] w-full items-center justify-center gap-1.5 rounded-md border border-dashed border-border font-mono text-[11px] text-muted-foreground transition-colors hover:border-solid hover:border-input hover:bg-background/45 hover:text-foreground dark:border-white/15 dark:hover:border-white/30 dark:hover:bg-transparent"
                       >
-                        {item.threads.slice(1).map(renderCard)}
-                      </BoardWorktreeGroup>
-                    );
-                  })}
-                </BoardColumn>
-              ))}
+                        Show {Math.min(settledTail.hiddenThreadCount, SETTLED_TAIL_PAGE_COUNT)} more
+                        <span className="text-muted-foreground/50">
+                          ({settledTail.hiddenThreadCount} settled hidden)
+                        </span>
+                      </button>
+                    ) : null}
+                  </BoardColumn>
+                );
+              })}
             </div>
           </div>
           {activeDragId !== null ? (