feat: セッション一覧を内部スクロール対応（ヘッダ/フッタ固定） (#16)

## 概要


セッション一覧が端末の高さに収まりきらないとき、これまでは溢れた行がクリップされて下のセッションに到達できなかった。本PRで一覧領域を**内部スクロール**対応にし、選択中のセッションを常に画面内に保ちながらウィンドウを動かす。ヘッダ（バナー）とフッタ（入力欄・ステータス）は最下部に固定したまま。

## 変更点

- **`src/core/layout.ts`**: 純粋関数 `listView(total, selected, cap)` を追加。
  - 高さ `cap` 行に収まる表示範囲 `[start, end)` を、`selected` を常に見える位置に保ちながら算出。
- 項目が溢れる端には「さらに N 件」インジケータ用に 1 行を予約し、**描画行数（項目＋インジケータ）は常に `cap`
以下**になるよう保証（極端に低い `cap` ではインジケータを落として内容行を優先）。
- 選択はウィンドウ下端寄りにアンカー（コンポーザの `visibleLineRange`
と同じ挙動）。予約でウィンドウが縮んで別の端が溢れるケースは不動点反復で収束。
- **`src/ui/hooks.ts`**: `useBoxHeight` を追加。`flexGrow`
ボックスの実測高さ（＝一覧が使える行数）を取得する。
- **`src/ui/session-list.tsx`**:
  - 実測高さぶんだけ内部スクロールして描画。上下端に「さらに N 件」インジケータを表示。
- 全画面でない（`isFullscreenViewport` が false
の）インライン描画時はクリップされないため全件描画し、端末側スクロールに委譲。
  - マウスのヒットテストを可視ウィンドウ（`view.start..end` ＋ 上インジケータのオフセット）へ写像するよう更新。
- **`src/core/i18n.ts`**: `moreAbove` / `moreBelow` を ja / en 両方に追加（UI
文字列はカタログに集約という i18n 規約に準拠）。

## テスト計画

- [x] `src/core/layout.spec.ts`: `listView` のテーブルドリブンテスト（先頭/末尾/中央、全
index でのウィンドウ不変条件、`cap` 超過なし、極小 `cap`、範囲外選択のクランプ）。
- [x] `tests/app.test.tsx`: 実 Yoga レイアウトの全画面ハーネスで、12 セッション時に
**フレーム高さが端末ぴったり・フッタ固定**、下インジケータ表示、末尾まで選択を下げると上インジケータ表示＋末尾セッションが可視・先頭が隠れることを検証。
- [x] `npm test`（358 passed / coverage 閾値クリア）、`npm run
lint`（新規エラーなし）、`npm run typecheck` 通過。

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Author: takecchi

src/core/i18n.ts

@@ -35,6 +35,10 @@ export interface Messages {
     busySuffix: string;
     /** session_id 未確定（creating 直後など）でまだ claude で開けない */
     openNotReady: string;
+    /** 一覧スクロール時、上に隠れている件数のインジケータ */
+    moreAbove: (n: number) => string;
+    /** 一覧スクロール時、下に隠れている件数のインジケータ */
+    moreBelow: (n: number) => string;
   };
   /** ステータスバッジ（progress-badge.tsx） */
   badge: {
@@ -115,6 +119,8 @@ const ja: Messages = {
     confirmRun: '実行しますか？',
     busySuffix: '…実行中',
     openNotReady: 'このセッションはまだ claude で開けません（セッションID未取得）',
+    moreAbove: (n) => `↑ 他 ${n} 件`,
+    moreBelow: (n) => `↓ 他 ${n} 件`,
   },
   badge: {
     creating: '準備中',
@@ -182,6 +188,8 @@ const en: Messages = {
     confirmRun: 'Proceed?',
     busySuffix: '…running',
     openNotReady: 'This session cannot be opened in claude yet (no session id).',
+    moreAbove: (n) => `↑ ${n} more`,
+    moreBelow: (n) => `↓ ${n} more`,
   },
   badge: {
     creating: 'Preparing',

src/core/layout.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { isFullscreenViewport, MIN_FULLSCREEN_ROWS } from './layout';
+import { isFullscreenViewport, listView, MIN_FULLSCREEN_ROWS } from './layout';
 
 describe('isFullscreenViewport', () => {
   it.each([
@@ -12,3 +12,94 @@ describe('isFullscreenViewport', () => {
     expect(isFullscreenViewport(rows)).toBe(expected);
   });
 });
+
+describe('listView', () => {
+  /** 描画行数（項目 + 表示インジケータ）は cap を超えない、という不変条件。 */
+  const renderedRows = (v: ReturnType<typeof listView>) =>
+    v.end - v.start + (v.showAbove ? 1 : 0) + (v.showBelow ? 1 : 0);
+
+  it('shows everything and no indicators when the list fits', () => {
+    expect(listView(3, 0, 10)).toEqual({
+      start: 0,
+      end: 3,
+      hiddenAbove: 0,
+      hiddenBelow: 0,
+      showAbove: false,
+      showBelow: false,
+    });
+  });
+
+  it('shows everything when total equals cap', () => {
+    const v = listView(5, 4, 5);
+    expect(v).toEqual({
+      start: 0,
+      end: 5,
+      hiddenAbove: 0,
+      hiddenBelow: 0,
+      showAbove: false,
+      showBelow: false,
+    });
+  });
+
+  it('at the top: only a below indicator, selection visible', () => {
+    const v = listView(10, 0, 5);
+    expect(v.start).toBe(0);
+    expect(v.showAbove).toBe(false);
+    expect(v.showBelow).toBe(true);
+    expect(v.hiddenBelow).toBe(10 - v.end);
+    expect(0).toBeGreaterThanOrEqual(v.start);
+    expect(0).toBeLessThan(v.end);
+    expect(renderedRows(v)).toBe(5);
+  });
+
+  it('at the bottom: only an above indicator, selection visible', () => {
+    const v = listView(10, 9, 5);
+    expect(v.end).toBe(10);
+    expect(v.showAbove).toBe(true);
+    expect(v.showBelow).toBe(false);
+    expect(9).toBeGreaterThanOrEqual(v.start);
+    expect(9).toBeLessThan(v.end);
+    expect(renderedRows(v)).toBe(5);
+  });
+
+  it('in the middle: both indicators, selection visible', () => {
+    const v = listView(20, 10, 5);
+    expect(v.showAbove).toBe(true);
+    expect(v.showBelow).toBe(true);
+    expect(10).toBeGreaterThanOrEqual(v.start);
+    expect(10).toBeLessThan(v.end);
+    expect(renderedRows(v)).toBe(5);
+  });
+
+  it('keeps the selection visible for every index without overflowing cap', () => {
+    const total = 30;
+    const cap = 7;
+    for (let sel = 0; sel < total; sel++) {
+      const v = listView(total, sel, cap);
+      expect(sel, `sel=${sel} start`).toBeGreaterThanOrEqual(v.start);
+      expect(sel, `sel=${sel} end`).toBeLessThan(v.end);
+      expect(renderedRows(v), `sel=${sel} rows`).toBeLessThanOrEqual(cap);
+      expect(v.showAbove).toBe(v.start > 0);
+      expect(v.showBelow).toBe(v.end < total);
+    }
+  });
+
+  it('never overflows a tiny cap (drops indicators, keeps one content row)', () => {
+    const v1 = listView(10, 5, 1);
+    expect(v1.end - v1.start).toBe(1);
+    expect(v1.showAbove).toBe(false);
+    expect(v1.showBelow).toBe(false);
+    expect(renderedRows(v1)).toBe(1);
+
+    const v2 = listView(10, 5, 2);
+    expect(renderedRows(v2)).toBe(2);
+    expect(5).toBeGreaterThanOrEqual(v2.start);
+    expect(5).toBeLessThan(v2.end);
+  });
+
+  it('clamps out-of-range selection', () => {
+    expect(() => listView(10, 99, 5)).not.toThrow();
+    const v = listView(10, 99, 5);
+    expect(v.end).toBe(10);
+  });
+});

src/core/layout.ts

@@ -1,3 +1,5 @@
+import { visibleLineRange } from './text-buffer';
+
 /**
  * 全画面レイアウトに必要な最小の端末行数。固定部分（バナー6行 + 入力欄3行 +
  * フッタ・余白・パディング）だけで約15行あり、これ未満で root の height を
@@ -13,3 +15,83 @@ export const MIN_FULLSCREEN_ROWS = 16;
 export function isFullscreenViewport(rows: number): boolean {
   return rows >= MIN_FULLSCREEN_ROWS;
 }
+
+/**
+ * セッション一覧を高さ `cap` 行のウィンドウに収めるための表示範囲。
+ * 一覧がヘッダ/フッタの間で内部スクロールするときに使う純粋な計算。
+ */
+export interface ListView {
+  /** 表示する最初の項目インデックス（含む） */
+  start: number;
+  /** 表示する最後の項目インデックスの次（含まない） */
+  end: number;
+  /** ウィンドウより上に隠れている項目数 */
+  hiddenAbove: number;
+  /** ウィンドウより下に隠れている項目数 */
+  hiddenBelow: number;
+  /** 上端に「さらに N 件」インジケータ行を出すか */
+  showAbove: boolean;
+  /** 下端に「さらに N 件」インジケータ行を出すか */
+  showBelow: boolean;
+}
+
+/**
+ * `total` 件のうち `cap` 行に収まる表示範囲を、`selected` を常に見える位置に
+ * 保ちながら求める。項目が溢れる端には「さらに N 件」インジケータ用に 1 行を
+ * 予約するため、描画行数（項目 + インジケータ）は常に `cap` 以下になる。
+ * 選択はウィンドウ下端寄りにアンカーする（下へ動かすとスクロールする挙動。
+ * コンポーザの {@link visibleLineRange} と同じ）。
+ */
+export function listView(total: number, selected: number, cap: number): ListView {
+  const c = Math.max(1, Math.floor(cap));
+  if (total <= c) {
+    return {
+      start: 0,
+      end: total,
+      hiddenAbove: 0,
+      hiddenBelow: 0,
+      showAbove: false,
+      showBelow: false,
+    };
+  }
+  const sel = Math.max(0, Math.min(selected, total - 1));
+  // 溢れる端ごとにインジケータ 1 行を予約するが、その予約でウィンドウが縮むと
+  // 別の端が新たに溢れることがある（縮小は隠れ項目を増やすだけなので単調）。
+  // 予約は増やす方向にのみ更新して不動点まで反復する（最大 3 周で収束）。
+  let above = false;
+  let below = false;
+  let win = { start: 0, end: 0 };
+  for (let i = 0; i < 3; i++) {
+    // インジケータで席を使い切らないよう、内容行を必ず 1 行は残す。
+    const reserved = Math.min((above ? 1 : 0) + (below ? 1 : 0), c - 1);
+    win = visibleLineRange(total, sel, c - reserved);
+    const nextAbove = win.start > 0;
+    const nextBelow = win.end < total;
+    if (nextAbove === above && nextBelow === below) {
+      break;
+    }
+    above = above || nextAbove;
+    below = below || nextBelow;
+  }
+  // 極端に低い cap では両方は出せない。内容行を守るため下インジケータから捨てる。
+  const rows = win.end - win.start;
+  let showAbove = above;
+  let showBelow = below;
+  while ((showAbove ? 1 : 0) + (showBelow ? 1 : 0) > c - rows) {
+    if (showBelow) {
+      showBelow = false;
+    } else {
+      showAbove = false;
+    }
+  }
+  const hiddenAbove = win.start;
+  const hiddenBelow = total - win.end;
+  return {
+    start: win.start,
+    end: win.end,
+    hiddenAbove,
+    hiddenBelow,
+    showAbove: showAbove && hiddenAbove > 0,
+    showBelow: showBelow && hiddenBelow > 0,
+  };
+}

src/ui/hooks.ts

@@ -78,6 +78,23 @@ export function useAbsolutePosition(
   return pos;
 }
 
+/**
+ * Computed content height (terminal rows) of an Ink box, measured after every
+ * render. A `flexGrow` box in a height-constrained parent reports its allocated
+ * height regardless of how much content it holds, so this yields the space a
+ * scrollable list may fill. Undefined until first measured. Re-renders only when
+ * the height actually changes.
+ */
+export function useBoxHeight(ref: RefObject<DOMElement | null>): number | undefined {
+  const [height, setHeight] = useState<number | undefined>(undefined);
+  useEffect(() => {
+    const layout = ref.current?.yogaNode?.getComputedLayout();
+    const next = layout?.height;
+    setHeight((prev) => (prev === next ? prev : next));
+  });
+  return height;
+}
+
 /** A clock that ticks every `ms` so elapsed-time displays stay current. */
 export function useClock(ms = 1000): number {
   const [now, setNow] = useState(() => Date.now());