# 画面設計書 9-SnippetsPaneContent（スニペット管理）

## 概要

本ドキュメントは、Windows Terminal のコードスニペット管理・検索・実行を行う SnippetsPaneContent の画面設計書である。settings.json に保存された sendInput コマンドの一覧を TreeView 形式で表示し、名前やタグによる検索・実行を提供するペインである。

### 本画面の処理概要

**業務上の目的・背景**：SnippetsPaneContent は頻繁に使用するコマンドやスクリプトスニペットを保存・管理し、ワンクリックでターミナルに送信できるようにする機能を提供する。開発者が定型コマンドの入力を効率化し、入力ミスを減らすことを目的としている。

**画面へのアクセス方法**：TerminalPage のアクションからスニペットペインが開かれた際にペイン内に表示される。

**主要な操作・処理内容**：
1. スニペット一覧の TreeView 表示（ネストされたコマンド対応）
2. フィルターボックスによる名前検索（fzf マッチャー使用）
3. 再生ボタン（Play）クリックによるスニペットのターミナルへの送信
4. TreeView アイテムの展開/折りたたみ
5. 閉じるボタンによるペインの閉鎖
6. スニペット未登録時のガイダンスメッセージ表示

**画面遷移**：
- 親：Pane（TerminalPage 内のペイン）

**権限による表示制御**：特になし

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 113 | スニペットペイン | 主機能 | 保存されたsendInputコマンドの一覧表示 |
| 114 | スニペットの保存 | 主機能 | スニペットをsettings.jsonに保存 |
| 34 | 入力の送信 | 補助機能 | スニペット選択時にターミナルへコマンドを送信 |

## 画面種別

コンテンツペイン / 一覧・実行

## URL/ルーティング

該当なし

## 入出力項目

| 項目名 | 入出力 | 型 | 説明 |
|--------|--------|------|------|
| CascadiaSettings | 入力 | CascadiaSettings | スニペットデータの読み込み元 |
| HasSnippets | 出力 | bool | スニペットが存在するかどうか |
| _allTasks | 内部 | IObservableVector<FilteredTask> | 全スニペットのフィルタリング済みリスト |

## 表示項目

| 項目名 | 表示位置 | 説明 |
|--------|----------|------|
| _title | Grid.Row=0 左 | ペインタイトル「Snippets」（FontSize=24） |
| CloseSnippetsPaneButton | Grid.Row=0 右 | 閉じるボタン（Glyph: E8BB） |
| SnippetsPaneNoneFound | Grid.Row=1 | スニペット未登録時のガイダンスメッセージ |
| _filterBox | Grid.Row=1 | フィルターテキストボックス（HasSnippets=true時に表示） |
| _treeView | Grid.Row=2 | スニペット一覧TreeView（HasSnippets=true時に表示） |

## イベント仕様

### 1-フィルター入力（_filterTextChanged）

_filterBox のテキスト変更時に _filterTextChanged が呼び出され、_updateFilteredCommands() でfzfマッチャーを使用してスニペットをフィルタリングする。各 FilteredTask の UpdateFilter() が呼び出され、Weight に基づいて Visibility が更新される。

### 2-スニペット実行（_runCommandButtonClicked）

再生ボタン（SnippetPlayButton）クリックで _runCommandButtonClicked が呼び出される。選択されたスニペットの SendInput コマンドが TermControl に送信される。

### 3-TreeView アイテム選択（_treeItemInvokedHandler）

TreeView アイテムがダブルクリックまたはEnterキーで選択されると _treeItemInvokedHandler が呼び出され、ネストされたコマンドでない場合は _runCommand() でスニペットが実行される。

### 4-キーボード操作（_treeItemKeyUpHandler）

TreeView アイテム上でEnterキーが押されるとスニペットが実行される。

### 5-閉じる（_closePaneClick）

CloseSnippetsPaneButton のクリックで Close() が呼び出され、ペインが閉じられる。

## データベース更新仕様

該当なし（settings.json からの読み込みのみ）

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|---------|
| SnippetPaneTitle | タイトル | Snippets | 常時表示 |
| SnippetsPaneNoneFoundHeader | ガイダンス | スニペット未登録ヘッダー | HasSnippets=false時 |
| SnippetsPaneNoneFoundDetails | ガイダンス | スニペット登録方法の説明 | HasSnippets=false時 |
| SnippetsFilterBox | プレースホルダー | フィルター入力ヒント | フィルター未入力時 |
| SnippetPlayButton | ToolTip | スニペット実行 | 再生ボタンホバー時 |
| CloseSnippetsPaneButton | ToolTip | ペインを閉じる | 閉じるボタンホバー時 |

## 例外処理

該当なし

## 備考

- UserControl ベース、IPaneContent/BasicPaneEvents 実装
- TreeView（mux:TreeView）を使用したネスト対応の一覧表示
- fzf マッチャーによるファジー検索（FilteredTask/FilteredCommand を使用）
- FilteredTask は FilteredCommand をラップし、Children プロパティでネスト構造を表現
- TaskItemTemplate DataTemplate でアイテムのレイアウトを定義
- スニペットの Input 表示は Cascadia Mono, Consolas フォントで、選択時のみ表示
- 再生ボタンは PlayButtonTemplate スタイルで、ホバー時にカラー変更（PlayButtonHoveredColor / PlayButtonNormalColor）
- TabFocusNavigation=Cycle でフォーカスが循環
- AllowFocusOnInteraction=False でルートGridはフォーカス不可
- Dark/Light/HighContrast の3テーマに対応（PageBackground: #282828 / #F9F9F9）

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | SnippetsPaneContent.h | `src/cascadia/TerminalApp/SnippetsPaneContent.h` | SnippetsPaneContent クラス（13-56行目）と FilteredTask 構造体（58-141行目）。FilteredTask は Command をラップし、Children/Input/Row/Visibility プロパティを提供 |

**読解のコツ**: FilteredTask はfzfマッチャーの Pattern を保持し（110行目）、UpdateFilter() で重みを計算する。Visibility() は自身と子の重みの合計で決定される（117-133行目）。

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | SnippetsPaneContent.xaml | `src/cascadia/TerminalApp/SnippetsPaneContent.xaml` | 3行Grid（226-230行目）。TaskItemTemplate（90-191行目）でTreeViewアイテムのレイアウトを定義 |

**主要処理フロー**:
1. **90-191行目**: TaskItemTemplate - TreeViewItem のDataTemplate（再生ボタン、HighlightedTextControl、入力テキスト）
2. **232-249行目**: タイトル行と閉じるボタン
3. **260-270行目**: _filterBox - テキストフィルター
4. **272-279行目**: _treeView - スニペット一覧TreeView

### プログラム呼び出し階層図

```
Pane
  └─ SnippetsPaneContent (IPaneContent)
       ├─ UpdateSettings(settings) -> スニペットデータ読み込み
       │    └─ _allTasks 生成 (FilteredTask の構築)
       ├─ _filterBox -> _filterTextChanged
       │    └─ _updateFilteredCommands()
       │         └─ FilteredTask.UpdateFilter(pattern)
       ├─ _treeView -> _treeItemInvokedHandler
       │    └─ _runCommand(command)
       ├─ PlayButton -> _runCommandButtonClicked
       │    └─ _runCommand(command)
       │         └─ TermControl に SendInput 送信
       └─ CloseButton -> _closePaneClick -> Close()
```

### データフロー図

```
[入力]                    [処理]                    [出力]

settings.json ────> UpdateSettings()        ──> _allTasks
(sendInput          └─> FilteredTask生成          (IObservableVector)
 コマンド群)

フィルターテキスト > _updateFilteredCommands ──> TreeView 表示更新
                     └─> fzf マッチャー           (Visibility 制御)

スニペット選択 ───> _runCommand()            ──> TermControl.SendInput
(ボタン/ダブルクリック)                             └─> シェルにコマンド送信
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| SnippetsPaneContent.xaml | `src/cascadia/TerminalApp/SnippetsPaneContent.xaml` | テンプレート | XAML レイアウト定義 |
| SnippetsPaneContent.h | `src/cascadia/TerminalApp/SnippetsPaneContent.h` | ソース | クラス宣言・FilteredTask定義 |
| SnippetsPaneContent.cpp | `src/cascadia/TerminalApp/SnippetsPaneContent.cpp` | ソース | 実装 |
| FilteredCommand.h | `src/cascadia/TerminalApp/FilteredCommand.h` | ソース | フィルタリング済みコマンド |
| CommandPaletteItems.h | `src/cascadia/TerminalApp/CommandPaletteItems.h` | ソース | ActionPaletteItem定義 |
| BasicPaneEvents.h | `src/cascadia/TerminalApp/BasicPaneEvents.h` | ソース | ペイン共通イベント基底クラス |
