C-09: コーチチャット画面（内省型対話UI）

項目	内容
ステータス	📝 Refinement
カテゴリ	Coach
優先度	P1

実装状況（main 基準）

領域	状況
基本チャット	CoachChatView にメッセージ一覧、左右吹き出し、送信欄、終了アラートは実装済み
API連携	CoachStore.sendMessage から /coach へ送信し、Firestore セッション ID を保持
日記文脈	startSessionWithDiary で日記内容を含む初回送信は実装済み
エラー表示	ネットワーク・再認証・リトライ UI は実装済み
未実装	テーマ表示、感情サジェストチップ、呼吸型 thinking indicator、終了時まとめ画面

リファインメント結果

既存の CoachChatView は実用チャットとして成立しているため、全置換ではなく「内省型対話UIの不足分」を段階追加する。MVP ではテーマ表示とサジェストチップを UI だけ先に入れ、AI 生成やテーマ自動更新は C-10 / C-11 のサーバー拡張後に接続する。

実装単位

1. CoachSession に theme: String? 相当の表示用プロパティを追加する。サーバー項目が未整備の間はローカル derived value でよい。
2. CoachChatView のメッセージ一覧上部にテーマバーを追加する。未確定時は「今日のテーマを見つけています」と表示する。
3. 入力欄の上にサジェストチップ領域を追加する。MVP では固定候補または MessageMetadata.emotionDetected からの簡易候補でよい。
4. 3点タイピング表示を、呼吸する円の ThinkingIndicatorView に置き換える。
5. キーボード表示時の入力欄追従を実機/シミュレータで確認する。

受け入れ条件

• 既存の送信・履歴・日記起点チャットが壊れない。
• セッションテーマの表示領域があり、未確定/確定の状態を表現できる。
• サジェストチップをタップすると入力欄に反映される。
• ローディング中の表示が一般的な点滅ではなく、静かな呼吸表現になる。
• 長文メッセージ、空セッション、APIエラー時でもレイアウトが崩れない。

非対象

• AI によるサジェスト生成
• 会話終了後の要約生成
• テーマ変更メニュー
• チャット全文のデータモデル再設計

目的

AIコーチとの対話を、一般的なチャットUIではなく、Cycleらしい「静けさ」「内省」「やわらかな伴走感」が伝わる体験として設計する。 ユーザーが安心して感情や思考を言語化できることを最優先にする。

画面概要

コーチとの対話を行うチャット画面。 通常のメッセージ表示に加えて、今回のテーマ表示、感情の言語化を助けるサジェストチップ、自由入力欄を配置する。

画面構成

上部ヘッダー

• 上部中央タイトル: 「新しい会話」
• 右上: 終了ボタン

テーマ表示エリア

ヘッダー下に、横幅いっぱいに近い角丸カードを配置。

• 先頭に小さなドット
• テキスト例: 「今日のテーマ：なぜ仕事に気持ちが入らないのか」
• そのセッションで今扱っている主題を固定表示するエリア

コーチメッセージ

• 白背景の角丸吹き出しカード
• 左寄せ
• テキストは複数行表示
• 行間はやや広めにして、詰まりすぎないようにする

表示文例:

今日も来てくれてありがとうございます。

『仕事に気持ちが入らない』という感覚、 いつ頃から気になり始めましたか？

ユーザーメッセージ

• 右寄せの角丸吹き出し
• 背景色はCycleのメインブラウン系
• 文字色は白系
• テキストは複数行対応

表示文例:

3ヶ月くらい前からだと思います。 プロジェクトが変わってから、なんとなく…

サジェストエリア

ユーザーの返答後、入力補助としてサジェストチップを表示。

• 見出し: 「気持ちを言葉にするなら」
• チップ例: 「もっと自由でいたい」「認められたい気持ちがある」
• 横スクロール可能、1行表示
• 角丸のアウトラインチップ
• タップすると入力欄に反映、または送信用テキスト候補として利用できる形

入力エリア

画面最下部に固定配置。

• 左側に横長の入力フィールド（プレースホルダー: 「ここに思いを書く…」）
• 右側に円形送信ボタン（背景ブラウン系、中に送信アイコン）

レイアウト方針

• 全体に余白を広く取る
• 要素間の間隔はやや大きめ
• 圧迫感をなくし、呼吸できるUI
• チャットアプリ感よりも、内省ノートと対話が融合した印象を優先

デザイン方針

• 背景は明るい生成り〜淡いベージュ系
• コーチ吹き出しは白
• ユーザー吹き出しはブラウン
• テキストは濃いブラウン〜グレーで、黒すぎない見え方
• 角丸は全体的に大きめ
• 線や枠は細くやわらかく

コーチ思考中の表現

一般的なタイピングインジケーター（…の点滅）は使わない。 代わりに、丸い円が呼吸するように静かに拡大・縮小するアニメーションで表現する。

ユーザーの言葉を受け取り、整えている「余白」として感じられることを重視する。 待ち時間ではなく、対話の一部としての静けさを演出する。

挙動仕様

• キーボード表示時も入力欄が隠れないこと
• メッセージ一覧は縦スクロール
• サジェストチップは横スクロール
• 長文でも吹き出しが自然に伸びること
• セッションテーマはスクロールしても上部に自然に残る設計でも、通常表示でも可

今後の拡張を見越した点

• サジェストチップはAI生成に差し替え可能な構造にしておきたい
• テーマ表示は会話文脈から動的変更できるようにしたい
• メニューから「会話を保存」「テーマを変更」「終了」などを追加できる余地を持たせたい

補足

この画面は、一般的なチャットの効率性よりも、ユーザーが安心して自分の内側を見つめられることを優先する。 情報量を増やしすぎず、静かな余白のある画面にする。