Bug: The display does not update when scrolling within the modal.

[goofmint]

When I scroll down, the cursor disappears.

[goofmint]

@coderabbtiai make plan in Japanese

[goofmint]

@coderabbitai make plan in Japanese

---

Generated by Claude Code

[coderabbitai]

Coding Plan

Summary

不具合の原因は、List が高さを項目数に固定し、モーダルの外側 <box> が垂直方向の制約を持たないことである。この結果、項目数が端末高さを超えるとモーダルがクリップされ、選択行（カーソル）が可視領域外に出る。

対策として、モーダルの高さを端末サイズで制約し、リスト領域を境界のあるスクロール可能領域にする。これにより、OpenTUI ネイティブ <select> の内部スクロールを有効にする。

List を親レイアウトの高さ制約に従うよう変更し、selectedIndex を渡し続けて選択行を可視領域に保つ。

ネイティブ <select> が非フォーカス時に自動スクロールしない場合は、エディタの viewport.ts パターンを流用したアプリ側可視ウィンドウをフォールバックとして実装する。

ファイルレベルの変更まとめ（後続エージェント向け）

• packages/core/src/ui/modalOverlay.tsx: 外側 <box> に垂直方向の高さ制約（top+bottom または maxHeight）を追加する。QuickPickBody のリスト領域を flexGrow: 1 + overflow: "hidden" にし、Input を固定高さにする。必要に応じて端末寸法フックを導入する。
• packages/core/src/ui/components.tsx: List を、呼び出し側の style（flexGrow/height）で内部の固定高さを上書きできるように変更する。selectedIndex の受け渡しは維持する。
• packages/core/src/ui/modalService.ts（フォールバック時のみ）: 可視ウィンドウ（スクロールオフセット）状態と、viewport.ts に準じた reveal ロジックを追加する。
• packages/core/src/ui/modalOverlay.test.tsx / modalService.test.ts: 長いリストと可視性のテストを追加する。
• docs/manual-release-verification.md: 長いモーダルリストのスクロール検証手順を追加する。

後続エージェントへの指示

• まず Task 2.2 の検証を先に行い、ネイティブ <select> の非フォーカス自動スクロールの有無を確定してから、Option 1 か Option 2（フォールバック）かを決定すること。
• 既存の List 呼び出し元（Explorer の Tree は別コンポーネントで対象外）の描画が変わらないことを確認すること。

Design Choices

Design Choice 1: 選択行の可視化方式：ネイティブ select の内部スクロールか、アプリ側の可視ウィンドウ算出か

Options Considered:

1. モーダルとリストの高さを端末サイズで制約し、OpenTUI ネイティブ <select> の内部スクロールに選択行の可視化を任せる。selectedIndex を渡し続けて自動スクロールを期待する。
2. ModalService にスクロールオフセット（可視ウィンドウ）状態を追加し、エディタの viewport.ts パターン（computeVisibleLineRange/revealLine に相当）を流用して、List へ可視範囲の項目のみを渡すアプリ側仮想化を実装する。

Chosen Option: 1

Rationale: components.tsx の設計方針（List は最小限のラッパーであり、親レイアウトが高さを制約できる）と整合し、追加状態を持たずに済む。ただし、ネイティブ <select> が非フォーカス時に prop 由来の選択へスクロールしないことが確認された場合に限り、Option 2 のアプリ側可視ウィンドウへ切り替える。これは Phase 2 のフォールバックとして記載する。

モーダルのリストはフォーカスをフィルタ Input に固定し、List へは selectedIndex を prop として渡す。フォーカスを持たないネイティブ <select> が prop 由来の selectedIndex へ自動スクロールするかどうかは、この時点では不確実である。

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: モーダルの高さを端末サイズで制約する

このフェーズの目的は、モーダルが端末より高くならないようにすることである。現在はモーダルの外側 <box> に垂直方向の制約がなく、項目数が多いと下側がクリップされる。端末の高さに基づく上限を設け、リスト領域を境界のあるスクロール可能領域にする。

Task 1: モーダルオーバーレイに垂直方向の高さ制約を追加する

モーダル全体が端末の可視領域に収まるようにする。

• packages/core/src/ui/modalOverlay.tsx の外側 <box> に垂直方向の制約を追加する。top と bottom の両方（例: top: "15%", bottom: "15%"）、または端末寸法から算出した maxHeight を設定する。
• 端末の高さが必要な場合、@opentui/react が提供する端末寸法フックを使って現在の端末サイズを取得する。フックが利用可能なことを確認する。
• 端末サイズの変更（リサイズ）に応じて再描画されることを確認する。

Task 2: リスト領域を境界のあるスクロール可能領域にする

リストのコンテナを、固定高さ内で内部スクロールする領域にする。

• packages/core/src/ui/modalOverlay.tsx の QuickPickBody 内で、List を包む領域に flexGrow: 1 と overflow: "hidden" を設定し、フィルタ Input を固定高さ（flexShrink: 0）にする。
• これにより、リストは残りの高さに収まり、超過分はネイティブ <select> の内部スクロールに委ねられる。
• 条件: リスト領域が高さを持つ場合、List はその高さを尊重しなければならない（Task 2.1 で対応する）。

🤖 Prompt for AI agents

このフェーズでは、モーダルオーバーレイの高さを端末サイズに制約し、リスト領域を内部スクロール可能にする。目的は、項目数が多いときにモーダルが端末外にクリップされないようにすることである。

- `packages/core/src/ui/modalOverlay.tsx` の外側 `<box>` に垂直方向の制約を追加する。`top` と
`bottom` の両方（例: `top: "15%"`, `bottom: "15%"`）、または端末寸法から算出した `maxHeight` を設定する。
- 端末の高さが必要な場合は、`@opentui/react`
が提供する端末寸法フックを使って現在の端末サイズを取得する。このフックが利用可能なことを確認する。
- 端末サイズが変更（リサイズ）されたとき、モーダルが再描画されることを確認する。
- `QuickPickBody` 内で、`List` を包む領域に `flexGrow: 1` と `overflow: "hidden"` を設定する。
- フィルタ用 `Input` は固定高さ（`flexShrink: 0`）にする。
- この結果、リストは残りの高さに収まり、超過分はネイティブ `<select>` の内部スクロールに委ねられるようにする。
- リスト領域が高さを持つ場合、`List` がその高さを尊重できるようにする（この対応は Phase 2 で行う）。

Phase 2: List コンポーネントを境界高さに対応させ、選択行を可視化する

このフェーズの目的は、List が親から与えられた高さを尊重し、選択行が常に可視領域に入るようにすることである。現在の List は高さを Math.max(items.length, 1) に固定するため、親のレイアウト制約を上書きしてしまう。

Task 1: List が親から与えられた高さを尊重するようにする

List を、親レイアウトが高さを制約できる形に変更する。

• packages/core/src/ui/components.tsx の List を変更し、呼び出し側が style（flexGrow または明示的な height）を渡した場合に、内部の height={Math.max(items.length, 1)} を上書きできるようにする。
• 呼び出し側が高さ制約を渡さない場合は、従来どおり項目数に合わせた高さを維持し、既存の呼び出し元（Explorer などは対象外）の動作を変えない。
• selectedIndex を引き続き <select> へ渡し、ネイティブレンダラが選択行を可視領域に保つようにする。

Task 2: 選択行の自動スクロール（reveal）を保証する

選択行が可視領域の外にあるとき、可視領域に入るようにする。

• 検証（Phase 3）で、非フォーカス状態のネイティブ <select> が prop 由来の selectedIndex へ自動スクロールすることを確認する。
• 条件: ネイティブ <select> が自動スクロールしない場合、フォールバックとして packages/core/src/ui/modalService.ts に可視ウィンドウ（スクロールオフセット）の概念を追加する。エディタの packages/core/src/ui/viewport.ts の computeVisibleLineRange/revealLine パターンを流用し、activeIndex から可視範囲を算出する。
• 条件: フォールバックを採用する場合、ModalOverlay は可視範囲の項目のみを List に渡し、selectedIndex を可視範囲内の相対位置に変換する。

🤖 Prompt for AI agents

このフェーズでは、`List`
コンポーネントが親から与えられた高さを尊重するように変更し、選択行が常に可視領域に入るようにする。目的は、現状の高さ固定ロジック（`Math.max(items.length,
1)`）が親のレイアウト制約を上書きしてしまう問題を解消することである。

- `packages/core/src/ui/components.tsx` の `List` を変更する。呼び出し側が `style`（`flexGrow`
または明示的な `height`）を渡した場合、内部の `height={Math.max(items.length, 1)}` を上書きできるようにする。
- 呼び出し側が高さ制約を渡さない場合は、従来どおり項目数に合わせた高さを維持する。既存の呼び出し元（Explorer の `Tree`
は別コンポーネントであり対象外）の動作を変えないこと。
- `selectedIndex` は引き続き `<select>` へ渡し、ネイティブレンダラが選択行を可視領域に保つようにする。
- 選択行の自動スクロールを保証するため、まず、非フォーカス状態のネイティブ `<select>` が prop 由来の `selectedIndex`
へ自動スクロールするかどうかを検証する（この検証は Phase 3 で行う）。
- 条件: ネイティブ `<select>` が自動スクロールしない場合、フォールバックとして
`packages/core/src/ui/modalService.ts` に可視ウィンドウ（スクロールオフセット）の概念を追加する。このとき、エディタの
`packages/core/src/ui/viewport.ts` にある `computeVisibleLineRange`/`revealLine`
パターンを流用し、`activeIndex` から可視範囲を算出する。
- 条件: フォールバックを採用する場合、`ModalOverlay` は可視範囲の項目のみを `List` に渡し、`selectedIndex`
を可視範囲内の相対位置に変換する。

Phase 3: 動作確認とテスト

このフェーズの目的は、長いリストでのスクロールと選択行の可視性を検証し、回帰を防ぐことである。現在、長いリストやスクロールを対象とするテストは存在しない。

Task 1: モーダルの長いリストに対するテストを追加する

項目数が多い場合の高さ制約と選択挙動を検証する。

• packages/core/src/ui/modalOverlay.test.tsx に、端末高さを超える項目数のケースを追加する。モーダルの高さが端末内に収まること、リスト領域が高さ制約を受けることを検証する。
• packages/core/src/ui/modalService.test.ts のフォールバックを採用した場合、可視ウィンドウ算出（activeIndex 移動時の可視範囲更新）の単体テストを追加する。

Task 2: 長いリストの手動検証手順を追加する

実際のフロー（quick open、show commands、show resolved keybindings）でスクロール動作を確認できるようにする。

• docs/manual-release-verification.md に、多数の項目を持つモーダル（workbench.action.quickOpen、workbench.action.showCommands、keybindings.showResolved）を開き、下方向へ選択を移動しても選択行が可視領域に残ることを確認する手順を追加する。

🤖 Prompt for AI agents

このフェーズでは、長いリストでのスクロールと選択行の可視性を検証するテストと手動検証手順を追加する。目的は、回帰を防ぐことである。

- `packages/core/src/ui/modalOverlay.test.tsx`
に、端末高さを超える項目数のケースを追加する。モーダルの高さが端末内に収まること、リスト領域が高さ制約を受けることを検証する。
- フォールバック（アプリ側可視ウィンドウ）を採用した場合、`packages/core/src/ui/modalService.test.ts`
に可視ウィンドウ算出（`activeIndex` 移動時の可視範囲更新）の単体テストを追加する。
- `docs/manual-release-verification.md`
に手動検証手順を追加する。手順では、多数の項目を持つモーダル（`workbench.action.quickOpen`、`workbench.action.showCommands`、`keybindings.showResolved`）を開き、下方向へ選択を移動しても選択行が可視領域に残ることを確認する。

Research

本プロジェクトは @opentui/core と @opentui/react（v0.1.107）を唯一の端末描画スタックとして使う。

モーダルは次の2ファイルで構成される。

• packages/core/src/ui/modalService.ts（状態管理）
• packages/core/src/ui/modalOverlay.tsx（描画）

modalOverlay.tsx はフィルタ用 Input とリスト用 List を絶対配置の <box> に並べる。

List（packages/core/src/ui/components.tsx）は OpenTUI ネイティブの <select> を薄くラップする。List は高さを Math.max(items.length, 1) に固定する。

ModalService は activeIndex のみを保持する。ModalService はスクロールオフセットや可視範囲の概念を持たない。

modalOverlay.tsx の外側 <box> は top/left/right のみを指定する。この <box> は bottom・height・maxHeight を持たない。

エディタ（editorView.tsx + viewport.ts）は scrollTop と revealLine による独自のスクロール制御を持つ。この仕組みはモーダルには適用されていない。

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

このフェーズでは、モーダルオーバーレイの高さを端末サイズに制約し、リスト領域を内部スクロール可能にする。目的は、項目数が多いときにモーダルが端末外にクリップされないようにすることである。

- `packages/core/src/ui/modalOverlay.tsx` の外側 `<box>` に垂直方向の制約を追加する。`top` と
`bottom` の両方（例: `top: "15%"`, `bottom: "15%"`）、または端末寸法から算出した `maxHeight` を設定する。
- 端末の高さが必要な場合は、`@opentui/react`
が提供する端末寸法フックを使って現在の端末サイズを取得する。このフックが利用可能なことを確認する。
- 端末サイズが変更（リサイズ）されたとき、モーダルが再描画されることを確認する。
- `QuickPickBody` 内で、`List` を包む領域に `flexGrow: 1` と `overflow: "hidden"` を設定する。
- フィルタ用 `Input` は固定高さ（`flexShrink: 0`）にする。
- この結果、リストは残りの高さに収まり、超過分はネイティブ `<select>` の内部スクロールに委ねられるようにする。
- リスト領域が高さを持つ場合、`List` がその高さを尊重できるようにする（この対応は Phase 2 で行う）。
===============================================================================

Task: 2

このフェーズでは、`List`
コンポーネントが親から与えられた高さを尊重するように変更し、選択行が常に可視領域に入るようにする。目的は、現状の高さ固定ロジック（`Math.max(items.length,
1)`）が親のレイアウト制約を上書きしてしまう問題を解消することである。

- `packages/core/src/ui/components.tsx` の `List` を変更する。呼び出し側が `style`（`flexGrow`
または明示的な `height`）を渡した場合、内部の `height={Math.max(items.length, 1)}` を上書きできるようにする。
- 呼び出し側が高さ制約を渡さない場合は、従来どおり項目数に合わせた高さを維持する。既存の呼び出し元（Explorer の `Tree`
は別コンポーネントであり対象外）の動作を変えないこと。
- `selectedIndex` は引き続き `<select>` へ渡し、ネイティブレンダラが選択行を可視領域に保つようにする。
- 選択行の自動スクロールを保証するため、まず、非フォーカス状態のネイティブ `<select>` が prop 由来の `selectedIndex`
へ自動スクロールするかどうかを検証する（この検証は Phase 3 で行う）。
- 条件: ネイティブ `<select>` が自動スクロールしない場合、フォールバックとして
`packages/core/src/ui/modalService.ts` に可視ウィンドウ（スクロールオフセット）の概念を追加する。このとき、エディタの
`packages/core/src/ui/viewport.ts` にある `computeVisibleLineRange`/`revealLine`
パターンを流用し、`activeIndex` から可視範囲を算出する。
- 条件: フォールバックを採用する場合、`ModalOverlay` は可視範囲の項目のみを `List` に渡し、`selectedIndex`
を可視範囲内の相対位置に変換する。
===============================================================================

Task: 3

このフェーズでは、長いリストでのスクロールと選択行の可視性を検証するテストと手動検証手順を追加する。目的は、回帰を防ぐことである。

- `packages/core/src/ui/modalOverlay.test.tsx`
に、端末高さを超える項目数のケースを追加する。モーダルの高さが端末内に収まること、リスト領域が高さ制約を受けることを検証する。
- フォールバック（アプリ側可視ウィンドウ）を採用した場合、`packages/core/src/ui/modalService.test.ts`
に可視ウィンドウ算出（`activeIndex` 移動時の可視範囲更新）の単体テストを追加する。
- `docs/manual-release-verification.md`
に手動検証手順を追加する。手順では、多数の項目を持つモーダル（`workbench.action.quickOpen`、`workbench.action.showCommands`、`keybindings.showResolved`）を開き、下方向へ選択を移動しても選択行が可視領域に残ることを確認する。

💡 Iterate on the plan with: `@coderabbitai` <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---