3.1 Implement quick pick and input box

[goofmint]

Part of Phase 3 — Directory workflow (tasks.md Task 3.1).

Summary

Implement the core modal overlay layer with showQuickPick, showInputBox, and showMessage.

Details

• Modal overlay layer owned by core (centered overlay component) — the palette and pickers must exist before any extension UI (design.md §12).
• showQuickPick(items, opts): list rendering, filter-as-you-type, keyboard navigation (up/down/enter/escape), returns the selected item or undefined on cancel.
• showInputBox(opts): single-line input with placeholder/validation hook, returns the value or undefined.
• showMessage routed to the status bar (MVP: no modal message dialogs).
• Focus management: opening a modal moves focus and sets a context key; closing restores prior focus.

Completion requirements

• Interaction tests: filter narrows the list, enter resolves, escape resolves undefined
• Focus restore verified after close (context keys and OpenTUI focus)
• Snapshot tests of quick pick (with filter active) and input box
• API contract tests extended to cover tecode.window fully
• bun test and lint pass

References

• requirements.md: Req 10.1 (tecode.window)
• design.md: §12

Dependencies

Blocked by: 1.14 (#15). Blocks 3.2 and parts of 3.3.

[goofmint]

@coderabbitai make plan in Japanese

---

Generated by Claude Code

[coderabbitai]

Coding Plan

Summary

• findService.ts を手本に、モーダルの状態と Promise 解決を扱う core 所有の ModalService を新設する。
• List/Input を合成したオーバーレイ UI を作り、OpenTUI の position: "absolute" と zIndex で中央寄せし、Shell の兄弟としてマウントする。
• フォーカスとコンテキストキーは useFocusTracking と親所有のフォーカス復元エフェクトで管理し、キーボード操作は when 制御のキーバインドで処理する。
• showMessage は既存のステータスバー描画経路を再利用し、createTecodeApi に任意依存を追加してスタブから実サービスへ切り替える。契約テストと相互作用・スナップショットテストを追加する。

Design Choices

Design Choice 1: モーダル状態の保持場所をどこにするか

Options Considered:

1. EditorState に quickPick スロットを追加する。
2. findService を手本に、新規のシェルスコープのサービス（ModalService）を作る。

Chosen Option: 2

Rationale: find の状態はタブ単位で EditorState に保持する。クイックピックはシェル全体で 1 つの一時 UI である。クイックピックはタブに紐づかないグローバルな一時 UI であるため、EditorState ではなくシェルスコープの独立サービスが適切である。

Design Choice 2: モーダルオーバーレイの配置方法をどうするか

Options Considered:

1. findWidget と同様にフレックス兄弟として配置する。
2. OpenTUI の position: "absolute" と zIndex で中央寄せの独立オーバーレイを描画する。

Chosen Option: 2

Rationale: findWidget は通常のフレックス兄弟として条件付きでマウントする。中央寄せモーダルは通常フローの外に描画する必要がある。@opentui/core 0.1.107 は position: "absolute"、top/left、zIndex を提供する。中央寄せの真のモーダルにはこれが適切である。

Design Choice 3: `showInputBox` の検証フックを型に追加するか

Options Considered:

1. InputBoxOptions に validateInput?: (value: string) => string | undefined を追加する。
2. 検証フックを実装せず、既存の型のままとする。

Chosen Option: 1

Rationale: チケットは「validation hook」を要求する。現在の InputBoxOptions に検証フィールドは無い。チケットが検証フックを明示するため、packages/api/src/namespaces.ts の InputBoxOptions に validateInput を追加し、既存の型パターンに合わせて再エクスポートする。

💡 User Tips

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

Implementation Steps

Phase 1: モーダルサービス層の構築

このフェーズは、モーダルの実行時状態と Promise 解決を扱う core サービスを作る。UI は持たない。findService.ts の「外部状態＋onDidChange＋ファクトリ関数」パターンを手本にする。このサービスが showQuickPick/showInputBox の Promise を保持し、ユーザー操作で解決する。

Task 1: モーダルサービスの作成

モーダルの開閉状態、項目リスト、絞り込みクエリ、保留中の Promise を管理するサービスを作る。

• packages/core/src/ui/ に新規モジュール（例: modalService.ts）を作る。ファクトリ関数 createModalService(deps) とし、既存の createFindService/createEditorSessionService の作法に合わせる。
• 状態として mode（"quickPick" | "inputBox" | null）、items、filterQuery、activeIndex、inputValue、validationMessage を保持する。
• openQuickPick(items, options): Promise<QuickPickItem | undefined> を提供する。Promise を構築し、その resolve を状態に保存し、状態を開に設定し、onDidChange を発火する。
• openInputBox(options): Promise<string | undefined> を提供する。同様に resolve を保存し、validateInput を保持する。
• setFilter(query)、selectNext()、selectPrevious()、accept()、cancel() を提供する。accept/cancel は保存した resolve を呼び、状態をクリアし、onDidChange を発火する。
• getState() と onDidChange を公開する。findService.ts と同様に、throw するリスナーを隔離する。

Task 2: 絞り込みロジックの実装

showQuickPick の「入力に応じた絞り込み」を実装する。

• 絞り込みは label（必要に応じて description/detail）に対する部分一致とする。MVP では単純な大文字小文字非依存の包含判定でよい。
• 絞り込み結果は getState() の派生値として返す。絞り込みで activeIndex が範囲外になった場合は先頭へ丸める。
• 絞り込み用の純粋関数を分離し、単体テスト可能にする。

🤖 Prompt for AI agents

このフェーズでは、モーダルの実行時状態と Promise 解決を扱う core サービスを実装する。UI
コンポーネントはこのフェーズでは作らない。`findService.ts` の「外部状態＋`onDidChange`＋ファクトリ関数」パターンを手本にする。

- `packages/core/src/ui/` に新規モジュール（例: `modalService.ts`）を作る。
- ファクトリ関数 `createModalService(deps)` を実装し、既存の
`createFindService`/`createEditorSessionService` の作法に合わせる。
- 状態として `mode`（`"quickPick" | "inputBox" |
null`）、`items`、`filterQuery`、`activeIndex`、`inputValue`、`validationMessage`
を保持する。
- `openQuickPick(items, options): Promise<QuickPickItem | undefined>`
を実装する。Promise を構築し、その `resolve` を状態に保存し、状態を開に設定し、`onDidChange` を発火する。
- `openInputBox(options): Promise<string | undefined>` を実装する。同様に `resolve`
を保存し、`validateInput` を保持する。
- `setFilter(query)`、`selectNext()`、`selectPrevious()`、`accept()`、`cancel()`
を実装する。`accept`/`cancel` は保存した `resolve` を呼び、状態をクリアし、`onDidChange` を発火する。
- `getState()` と `onDidChange` を公開する。`findService.ts` と同様に、throw するリスナーを隔離する。
- 絞り込みロジックを実装する。絞り込みは `label`（必要に応じて `description`/`detail`）に対する部分一致とし、MVP
では単純な大文字小文字非依存の包含判定とする。
- 絞り込み結果は `getState()` の派生値として返す。絞り込みで `activeIndex` が範囲外になった場合は先頭へ丸める。
- 絞り込み用の純粋関数は分離し、単体テスト可能な形にする。

Phase 2: モーダルオーバーレイ UI とフォーカス制御

このフェーズは、ModalService の状態を描画するオーバーレイ UI を作る。components.tsx の List と Input を合成する。OpenTUI の position: "absolute" と zIndex で中央寄せする。フォーカスとコンテキストキーを findWidget.tsx のパターンで管理する。

Task 1: オーバーレイコンポーネントの作成

クイックピックと入力ボックスを描画する単一のオーバーレイコンポーネントを作る。

• packages/core/src/ui/ に新規コンポーネント（例: modalOverlay.tsx）を作る。ModalService を prop で受け取り、onDidChange を購読して再描画する。shell.tsx の購読フックの作法（useReducer による forceRender、描画後の購読レースへの対処）に合わせる。
• mode が null の場合は何も描画しない。
• mode が "quickPick" の場合は、上部にフィルタ用 Input、その下に絞り込み後の項目を表示する List を描画する。List の onSelect は service.accept() に委譲する。Input の onChange は service.setFilter() に委譲する。
• mode が "inputBox" の場合は Input のみを描画する。options.prompt/placeHolder/password を反映する。検証メッセージがある場合はそれを表示する。
• 中央寄せは OpenTUI の position: "absolute"、top/left の百分率指定、負のマージン、zIndex で行う。Web 検索で確認したとおり、@opentui/core 0.1.107 はこれらを提供する。

Task 2: フォーカスとコンテキストキーの管理

モーダルの開閉でフォーカスとコンテキストキーを制御する。

• モーダル内の Input に useFocusTracking("quickPickFocus")（クイックピック）と useFocusTracking("inputBoxFocus")（入力ボックス）を接続する。これにより when 節でキーバインドを制御できる。
• マウント時に useEffect 内で Input のノードへ命令的に .focus() を呼ぶ。宣言的な focused prop はタイミングが早すぎるため使わない。findWidget.tsx の理由と同じである。
• オーバーレイは条件付きでマウントし、閉じるとアンマウントする。閉じたときの以前のフォーカス復元は、常にマウントされている親（Shell またはオーバーレイをマウントする層）が担う。EditorArea の wasFindOpenRef/textPlaneNodeRef によるエッジトリガの useEffect を手本にする。開く前にフォーカス中ノードを記録し、閉じたときにそのノードへ .focus() を戻す。

Task 3: キーボード操作のキーバインド

上下移動、確定、キャンセルをキーバインドで処理する。

• モーダル用のコマンドを登録する。例: modal.selectNext（down）、modal.selectPrevious（up）、modal.accept（return）、modal.close（escape）。各コマンドは ModalService の対応メソッドへの薄い委譲とする。
• 各キーバインドを新規コンテキストキー（quickPickFocus または inputBoxFocus）で when 制御する。editor-core の findWidgetFocus による find バインドと同じ方式にする。
• 入力ボックスでは return を modal.accept、escape を modal.close に割り当てる。フィルタ入力への文字入力は絞り込みへ流す。
• OpenTUI の <select>/<input> は Escape のキャンセルを内蔵しない。Escape はアプリ側でキーバインドとして処理する。
• 既定キーバインドの登録先は、bindingTable の defaults/fallback 層とする。モーダルは core 所有であるため、拡張マニフェストではなく core 側の既定として登録する。

Task 4: オーバーレイのマウント

オーバーレイを最前面に描画するために Shell の兄弟として配置する。

• packages/cli/src/renderShell.tsx の renderShellToTerminal で、<ThemeProvider>/<ContextFocusTracker> の内側かつ <Shell/> の兄弟（最後）として <ModalOverlay/> をマウントする。
• ShellRenderDeps に ModalService を渡すための任意 prop を追加する。slotRegistry/layoutState と同じ経路で渡す。
• Shell を直接マウントするテストハーネスでも同様に配置する。

🤖 Prompt for AI agents

このフェーズでは、`ModalService` の状態を描画するオーバーレイ UI を実装し、フォーカスとコンテキストキーを制御し、キーボード操作を配線する。

オーバーレイコンポーネントの作成:
- `packages/core/src/ui/` に新規コンポーネント（例: `modalOverlay.tsx`）を作る。`components.tsx`
の `List` と `Input` を合成する。
- `ModalService` を prop で受け取り、`onDidChange` を購読して再描画する。`shell.tsx`
の購読フックの作法（`useReducer` による `forceRender`、描画後の購読レースへの対処）に合わせる。
- `mode` が `null` の場合は何も描画しない。
- `mode` が `"quickPick"` の場合は、上部にフィルタ用 `Input`、その下に絞り込み後の項目を表示する `List`
を描画する。`List` の `onSelect` は `service.accept()` に委譲する。`Input` の `onChange` は
`service.setFilter()` に委譲する。
- `mode` が `"inputBox"` の場合は `Input`
のみを描画する。`options.prompt`/`placeHolder`/`password` を反映する。検証メッセージがある場合はそれを表示する。
- 中央寄せは OpenTUI の `position: "absolute"`、`top`/`left` の百分率指定、負のマージン、`zIndex`
で行う。`@opentui/core` 0.1.107 はこれらを提供する。

フォーカスとコンテキストキーの管理:
- モーダル内の `Input` に `useFocusTracking("quickPickFocus")`（クイックピック）と
`useFocusTracking("inputBoxFocus")`（入力ボックス）を接続する。
- マウント時に `useEffect` 内で `Input` のノードへ命令的に `.focus()` を呼ぶ。宣言的な `focused` prop
は使わない。
- オーバーレイは条件付きでマウントし、閉じるとアンマウントする。フォーカス復元は常にマウントされている親が担う。`EditorArea` の
`wasFindOpenRef`/`textPlaneNodeRef` によるエッジトリガの `useEffect`
を手本にする。開く前にフォーカス中ノードを記録し、閉じたときにそのノードへ `.focus()` を戻す。

キーボード操作のキーバインド:
- モーダル用のコマンド
`modal.selectNext`（`down`）、`modal.selectPrevious`（`up`）、`modal.accept`（`return`）、`modal.close`（`escape`）を登録する。各コマンドは
`ModalService` の対応メソッドへの薄い委譲とする。
- 各キーバインドを新規コンテキストキー（`quickPickFocus` または `inputBoxFocus`）で `when`
制御する。`editor-core` の `findWidgetFocus` の方式に合わせる。
- 入力ボックスでは `return` を `modal.accept`、`escape` を `modal.close`
に割り当てる。フィルタ入力への文字入力は絞り込みへ流す。
- Escape のキャンセルはアプリ側のキーバインドで処理する。
- 既定キーバインドは `bindingTable` の defaults/fallback 層に、core 側の既定として登録する。

オーバーレイのマウント:
- `packages/cli/src/renderShell.tsx` の `renderShellToTerminal`
で、`<ThemeProvider>`/`<ContextFocusTracker>` の内側かつ `<Shell/>` の兄弟（最後）として
`<ModalOverlay/>` をマウントする。
- `ShellRenderDeps` に `ModalService` を渡すための任意 prop
を追加する。`slotRegistry`/`layoutState` と同じ経路で渡す。
- `Shell` を直接マウントするテストハーネスでも同様に配置する。

Phase 3: API 配線、showMessage、テスト

このフェーズは、サービスを公開 API に接続する。showMessage をステータスバーへ配線する。契約テストと相互作用テストを追加する。

Task 1: window namespace の実配線

ModalService を tecode.window に接続する。

• packages/core/src/api/create.ts の CreateTecodeApiDeps に任意の依存（例: modalService?: Pick<ModalService, "openQuickPick" | "openInputBox">）を追加する。editorSession/themeRegistry の任意依存パターンに合わせる。
• 依存が渡された場合は window.showQuickPick/showInputBox を ModalService へ委譲する。渡されない場合は既存の createWindowStub() にフォールバックする。
• packages/cli/src/main.ts の buildAssemblyRoot() で ModalService を構築する。slotRegistry/layoutState の近くで生成し、AssemblyRoot に加え、createTecodeApi(...) と renderShell(...) の両方へ渡す。
• 型追加（validateInput）が必要な場合は packages/api/src/namespaces.ts に加え、packages/api/src/index.ts から再エクスポートする。

Task 2: showMessage のステータスバー配線

showMessage をステータスバーへ表示する。MVP ではモーダルのメッセージダイアログは作らない。

• showMessage(message, kind) は既存のステータスバー描画経路を再利用する。SlotRegistry.registerView("statusBar.item", ...) と shell.tsx の StatusBar コンポーネントが既に存在する。
• showMessage はステータスバー項目を登録し、一定時間後、または次のメッセージで置き換える一時表示とする。kind（"info" | "warning" | "error"）に応じた表現を付ける。
• window.setStatusBarItem（現在は createRegistrySet で登録するが描画未接続）と ui.registerView("statusBar.item", ...) の二重機構を再利用側に統一する。showMessage は SlotRegistry 経由で描画し、独自描画を作らない。

Task 3: テストの追加

チケットの完了要件を満たすテストを追加する。

• 相互作用テストを追加する。フィルタでリストが絞り込まれること、return が選択項目で解決すること、escape が undefined で解決することを検証する。ModalService レベルと UI レベルの両方で検証する。
• フォーカス復元テストを追加する。閉じた後にコンテキストキーが false になること、OpenTUI のフォーカスが以前のノードへ戻ることを検証する。
• スナップショットテストを追加する。フィルタ適用中のクイックピックと入力ボックスを対象にする。components.test.tsx の testRender/captureCharFrame パターンに合わせる。
• API 契約テストを拡張する。packages/core/src/api/create.contract.test.ts に、editorSession/findService の対と同じ方式で modalService の対を追加する。依存が無い場合はスタブ挙動、依存がある場合は実サービスへの委譲を検証する。window namespace の freeze、setStatusBarItem の register/dispose 対称性、activeEditor の反映、モジュールエイリアス同一性（tecodeModule.window === api.window）を確認する。
• create.window.test.ts を新規に追加してもよい。create.themes.test.ts/create.languages.test.ts の「依存が無ければスタブ、両依存があれば実サービス」の構造に合わせる。
• bun test と lint を通す。

🤖 Prompt for AI agents

このフェーズでは、`ModalService` を公開 API に接続し、`showMessage` をステータスバーへ配線し、テストを追加する。

window namespace の実配線:
- `packages/core/src/api/create.ts` の `CreateTecodeApiDeps` に任意の依存（例:
`modalService?: Pick<ModalService, "openQuickPick" |
"openInputBox">`）を追加する。`editorSession`/`themeRegistry` の任意依存パターンに合わせる。
- 依存が渡された場合は `window.showQuickPick`/`showInputBox` を `ModalService`
へ委譲する。渡されない場合は既存の `createWindowStub()` にフォールバックする。
- `packages/cli/src/main.ts` の `buildAssemblyRoot()` で `ModalService`
を構築する。`slotRegistry`/`layoutState` の近くで生成し、`AssemblyRoot`
に加え、`createTecodeApi(...)` と `renderShell(...)` の両方へ渡す。
- 型追加（`validateInput`）が必要な場合は `packages/api/src/namespaces.ts`
に加え、`packages/api/src/index.ts` から再エクスポートする。

showMessage のステータスバー配線:
- `showMessage(message, kind)`
は既存のステータスバー描画経路（`SlotRegistry.registerView("statusBar.item", ...)` と `shell.tsx`
の `StatusBar` コンポーネント）を再利用する。MVP ではモーダルのメッセージダイアログを作らない。
- `showMessage` はステータスバー項目を登録し、一定時間後、または次のメッセージで置き換える一時表示とする。`kind`（`"info" |
"warning" | "error"`）に応じた表現を付ける。
- `window.setStatusBarItem` と `ui.registerView("statusBar.item", ...)`
の二重機構は再利用側に統一する。`showMessage` は `SlotRegistry` 経由で描画し、独自描画を作らない。

テストの追加:
- 相互作用テストを追加する。フィルタでリストが絞り込まれること、`return` が選択項目で解決すること、`escape` が `undefined`
で解決することを、`ModalService` レベルと UI レベルの両方で検証する。
- フォーカス復元テストを追加する。閉じた後にコンテキストキーが `false` になること、OpenTUI のフォーカスが以前のノードへ戻ることを検証する。
- スナップショットテストを追加する。フィルタ適用中のクイックピックと入力ボックスを対象にし、`components.test.tsx` の
`testRender`/`captureCharFrame` パターンに合わせる。
- API 契約テストを拡張する。`packages/core/src/api/create.contract.test.ts` に
`modalService` の対を追加し、依存が無い場合はスタブ挙動、依存がある場合は実サービスへの委譲を検証する。`window` namespace の
freeze、`setStatusBarItem` の register/dispose 対称性、`activeEditor`
の反映、モジュールエイリアス同一性（`tecodeModule.window === api.window`）を確認する。
- 必要であれば `create.window.test.ts`
を新規に追加し、`create.themes.test.ts`/`create.languages.test.ts` の構造に合わせる。
- `bun test` と lint を通す。

Research

本プロジェクトは Bun ワークスペースで構成する。

packages/api は実行コードを持たない型のみのパッケージである。WindowNamespace などの型は packages/api/src/namespaces.ts に既に定義済みである。

packages/core は API 型に実行時挙動を接続する。createTecodeApi（packages/core/src/api/create.ts）が唯一の合成点である。現在 window.showMessage/showQuickPick/showInputBox は packages/core/src/api/stubs.ts の createWindowStub() により no-op である。

UI シェルは packages/core/src/ui/shell.tsx に定義する。既存の findService.ts と findWidget.tsx は、外部状態サービスと宣言的 UI を接続する参照パターンである。

フォーカスとコンテキストキーは packages/core/src/ui/focus.tsx の useFocusTracking が扱う。キーバインドは packages/core/src/keymap のコンテキストキーと when 節で制御する。

合成ルートは packages/cli/src/main.ts の buildAssemblyRoot() である。

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

このフェーズでは、モーダルの実行時状態と Promise 解決を扱う core サービスを実装する。UI
コンポーネントはこのフェーズでは作らない。`findService.ts` の「外部状態＋`onDidChange`＋ファクトリ関数」パターンを手本にする。

- `packages/core/src/ui/` に新規モジュール（例: `modalService.ts`）を作る。
- ファクトリ関数 `createModalService(deps)` を実装し、既存の
`createFindService`/`createEditorSessionService` の作法に合わせる。
- 状態として `mode`（`"quickPick" | "inputBox" |
null`）、`items`、`filterQuery`、`activeIndex`、`inputValue`、`validationMessage`
を保持する。
- `openQuickPick(items, options): Promise<QuickPickItem | undefined>`
を実装する。Promise を構築し、その `resolve` を状態に保存し、状態を開に設定し、`onDidChange` を発火する。
- `openInputBox(options): Promise<string | undefined>` を実装する。同様に `resolve`
を保存し、`validateInput` を保持する。
- `setFilter(query)`、`selectNext()`、`selectPrevious()`、`accept()`、`cancel()`
を実装する。`accept`/`cancel` は保存した `resolve` を呼び、状態をクリアし、`onDidChange` を発火する。
- `getState()` と `onDidChange` を公開する。`findService.ts` と同様に、throw するリスナーを隔離する。
- 絞り込みロジックを実装する。絞り込みは `label`（必要に応じて `description`/`detail`）に対する部分一致とし、MVP
では単純な大文字小文字非依存の包含判定とする。
- 絞り込み結果は `getState()` の派生値として返す。絞り込みで `activeIndex` が範囲外になった場合は先頭へ丸める。
- 絞り込み用の純粋関数は分離し、単体テスト可能な形にする。
===============================================================================

Task: 2

このフェーズでは、`ModalService` の状態を描画するオーバーレイ UI を実装し、フォーカスとコンテキストキーを制御し、キーボード操作を配線する。

オーバーレイコンポーネントの作成:
- `packages/core/src/ui/` に新規コンポーネント（例: `modalOverlay.tsx`）を作る。`components.tsx`
の `List` と `Input` を合成する。
- `ModalService` を prop で受け取り、`onDidChange` を購読して再描画する。`shell.tsx`
の購読フックの作法（`useReducer` による `forceRender`、描画後の購読レースへの対処）に合わせる。
- `mode` が `null` の場合は何も描画しない。
- `mode` が `"quickPick"` の場合は、上部にフィルタ用 `Input`、その下に絞り込み後の項目を表示する `List`
を描画する。`List` の `onSelect` は `service.accept()` に委譲する。`Input` の `onChange` は
`service.setFilter()` に委譲する。
- `mode` が `"inputBox"` の場合は `Input`
のみを描画する。`options.prompt`/`placeHolder`/`password` を反映する。検証メッセージがある場合はそれを表示する。
- 中央寄せは OpenTUI の `position: "absolute"`、`top`/`left` の百分率指定、負のマージン、`zIndex`
で行う。`@opentui/core` 0.1.107 はこれらを提供する。

フォーカスとコンテキストキーの管理:
- モーダル内の `Input` に `useFocusTracking("quickPickFocus")`（クイックピック）と
`useFocusTracking("inputBoxFocus")`（入力ボックス）を接続する。
- マウント時に `useEffect` 内で `Input` のノードへ命令的に `.focus()` を呼ぶ。宣言的な `focused` prop
は使わない。
- オーバーレイは条件付きでマウントし、閉じるとアンマウントする。フォーカス復元は常にマウントされている親が担う。`EditorArea` の
`wasFindOpenRef`/`textPlaneNodeRef` によるエッジトリガの `useEffect`
を手本にする。開く前にフォーカス中ノードを記録し、閉じたときにそのノードへ `.focus()` を戻す。

キーボード操作のキーバインド:
- モーダル用のコマンド
`modal.selectNext`（`down`）、`modal.selectPrevious`（`up`）、`modal.accept`（`return`）、`modal.close`（`escape`）を登録する。各コマンドは
`ModalService` の対応メソッドへの薄い委譲とする。
- 各キーバインドを新規コンテキストキー（`quickPickFocus` または `inputBoxFocus`）で `when`
制御する。`editor-core` の `findWidgetFocus` の方式に合わせる。
- 入力ボックスでは `return` を `modal.accept`、`escape` を `modal.close`
に割り当てる。フィルタ入力への文字入力は絞り込みへ流す。
- Escape のキャンセルはアプリ側のキーバインドで処理する。
- 既定キーバインドは `bindingTable` の defaults/fallback 層に、core 側の既定として登録する。

オーバーレイのマウント:
- `packages/cli/src/renderShell.tsx` の `renderShellToTerminal`
で、`<ThemeProvider>`/`<ContextFocusTracker>` の内側かつ `<Shell/>` の兄弟（最後）として
`<ModalOverlay/>` をマウントする。
- `ShellRenderDeps` に `ModalService` を渡すための任意 prop
を追加する。`slotRegistry`/`layoutState` と同じ経路で渡す。
- `Shell` を直接マウントするテストハーネスでも同様に配置する。
===============================================================================

Task: 3

このフェーズでは、`ModalService` を公開 API に接続し、`showMessage` をステータスバーへ配線し、テストを追加する。

window namespace の実配線:
- `packages/core/src/api/create.ts` の `CreateTecodeApiDeps` に任意の依存（例:
`modalService?: Pick<ModalService, "openQuickPick" |
"openInputBox">`）を追加する。`editorSession`/`themeRegistry` の任意依存パターンに合わせる。
- 依存が渡された場合は `window.showQuickPick`/`showInputBox` を `ModalService`
へ委譲する。渡されない場合は既存の `createWindowStub()` にフォールバックする。
- `packages/cli/src/main.ts` の `buildAssemblyRoot()` で `ModalService`
を構築する。`slotRegistry`/`layoutState` の近くで生成し、`AssemblyRoot`
に加え、`createTecodeApi(...)` と `renderShell(...)` の両方へ渡す。
- 型追加（`validateInput`）が必要な場合は `packages/api/src/namespaces.ts`
に加え、`packages/api/src/index.ts` から再エクスポートする。

showMessage のステータスバー配線:
- `showMessage(message, kind)`
は既存のステータスバー描画経路（`SlotRegistry.registerView("statusBar.item", ...)` と `shell.tsx`
の `StatusBar` コンポーネント）を再利用する。MVP ではモーダルのメッセージダイアログを作らない。
- `showMessage` はステータスバー項目を登録し、一定時間後、または次のメッセージで置き換える一時表示とする。`kind`（`"info" |
"warning" | "error"`）に応じた表現を付ける。
- `window.setStatusBarItem` と `ui.registerView("statusBar.item", ...)`
の二重機構は再利用側に統一する。`showMessage` は `SlotRegistry` 経由で描画し、独自描画を作らない。

テストの追加:
- 相互作用テストを追加する。フィルタでリストが絞り込まれること、`return` が選択項目で解決すること、`escape` が `undefined`
で解決することを、`ModalService` レベルと UI レベルの両方で検証する。
- フォーカス復元テストを追加する。閉じた後にコンテキストキーが `false` になること、OpenTUI のフォーカスが以前のノードへ戻ることを検証する。
- スナップショットテストを追加する。フィルタ適用中のクイックピックと入力ボックスを対象にし、`components.test.tsx` の
`testRender`/`captureCharFrame` パターンに合わせる。
- API 契約テストを拡張する。`packages/core/src/api/create.contract.test.ts` に
`modalService` の対を追加し、依存が無い場合はスタブ挙動、依存がある場合は実サービスへの委譲を検証する。`window` namespace の
freeze、`setStatusBarItem` の register/dispose 対称性、`activeEditor`
の反映、モジュールエイリアス同一性（`tecodeModule.window === api.window`）を確認する。
- 必要であれば `create.window.test.ts`
を新規に追加し、`create.themes.test.ts`/`create.languages.test.ts` の構造に合わせる。
- `bun test` と lint を通す。

💡 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.

---