UX6. チャットとフロー図ノードの連動ハイライト

[claude]

課題

いまどのノードについて聞かれているのか、フロー図側がハイライトされない。職員は「今どこの話か」を自分で探す必要があり、会話とフロー図の対応が取りづらい。

Before（現状）

• フロー図のノードをクリックすると詳細モーダルが開く（フロー図 → 詳細の一方向）。
• チャットの現在の質問がフロー図のどのノード／標準フローのどのステップに対応するかは、図側でハイライトされない。

After（あるべき姿）

• 現在の質問が対象にしているステップ（標準フロー／抽出キャンバス）が図側でハイライトされ、「今どこの話か」が一目で分かる。
• 会話が進むとハイライトが追従する。

技術的な着手ポイント

• components/session/SessionView.tsx
  • 現在の質問対象ノードを保持する状態を追加し、FlowCanvas / StandardFlowPanel へ渡す。既存の selectedNodeId はユーザークリック起点のみ。
• components/canvas/FlowCanvas.tsx
  • onNodeClick → onNodeSelect（図 → 詳細）は既存。逆方向（外部からの activeNode ハイライト）prop が未実装のため追加が必要。
• components/session/StandardFlowPanel.tsx
  • Mermaid 描画側で対象ノードをハイライトする手段の検討（Mermaid ノードの特定・装飾）。
• バックエンド連携（要調査）：現状、質問がどの標準ノード／ステップを対象にしているかを示す情報を返していない。lib/server/interview/followup.ts / controller.ts で「対象ノード」を質問メタとして返す拡張が必要になりうる。UX1（本筋ノード追跡）と設計を共有できる。

受け入れ条件

• 現在の質問に対応するステップが、フロー図（標準フローまたは抽出キャンバス）でハイライトされる
• 会話が進むとハイライトが追従する
• 対応ノードが特定できない質問では、ハイライトなしでも破綻しない
• 既存のノードクリック→詳細モーダルの挙動が壊れない

優先度

中。理解を助けるが、まず脱線・ギャップ（UX1/2）で中身を良くするのが先。UX1 の「対象ノード追跡」と実装を共有すると効率的。

このIssueは Slack #gov_ai_agent での議論（Yuki Kawabe / sunagawa）に基づき起票されました。