refactor: Issues #2〜#8 コード品質改善

[ktmage]

Summary

webview のコード品質・保守性を一括で改善する。Atomic Design による再設計、XSS 対策、i18n 修正、CSS Modules 化を実施。

Related Issue

Resolves #2, Resolves #3, Resolves #4, Resolves #5, Resolves #6, Resolves #7, Resolves #8

Changes

#2 Split InputArea.tsx responsibilities

• InputArea.tsx から以下を分割抽出：
  • FileAttachmentBar（Molecule）: クリップボタン・ファイルチップ・ファイルピッカー
  • HashFilePopup（Molecule）: # トリガーのファイル選択ポップアップ
  • InputActions（Organism）: ModelSelector・Terminal/Settings/Send/Abort ボタン群
• InputArea はテキスト入力 + IME ハンドリング + 子コンポーネント組み合わせに縮小
• 各コンポーネントの単体テストを作成

#3 Split ToolPartView.tsx into smaller modules

• ToolPartView.tsx から以下を分割抽出：
  • DiffView（Molecule）: ファイル編集の差分表示
  • FileCreateView（Molecule）: ファイル新規作成の表示
  • TodoView（Molecule）: Todo リストの表示
• ToolPartView はルーティング的な Organism に縮小
• ユーティリティ関数（diff.ts, todo.ts, tool-categories.ts）を utils/ に抽出
• 各コンポーネント・ユーティリティの単体テストを作成

#4 Split global CSS into component-scoped styles

• 1,628行の単一 styles.css を CSS Modules に分割
• 25コンポーネントに .module.css ファイルを配置し、スコープ化されたクラス名に変更
• styles.css は31行（グローバルリセット + .chat-container レイアウトのみ）に削減
• コンポーネントごとのディレクトリ構造（Component/Component.tsx + Component.module.css + index.ts）に再編

#5 Add XSS protection for Markdown rendering

• dompurify パッケージを導入
• TextPartView.tsx で marked.parse() の出力を DOMPurify.sanitize() で処理してから dangerouslySetInnerHTML に渡すように変更
• biome-ignore コメントの文言を「DOMPurify でサニタイズ済み」に更新

#6 Consolidate inline SVG icons into shared module

• 全コンポーネントからインライン SVG を抽出し、共通 IconProps 型 + 名前付きコンポーネントとして atoms/icons/icons.tsx に集約（20種以上）
• 各コンポーネントの SVG を icons.tsx からの import に置換
• アイコン単体テストを作成

#7 Fix hardcoded time units in SessionList

• formatRelativeTime() のハードコード英語略語（m, h, d）をロケールファイル経由に変更
• en.ts / ja.ts に time.now, time.minutes, time.hours, time.days キーを追加
• 日本語 UI で「5分」「2時間」等が正しく表示されるように修正

#8 Improve state management to reduce props drilling

• AppContext + 5つのカスタムフック（useSession, useMessages, useProviders, usePermissions, useLocale）を導入
• App.tsx の14個の useState をドメイン別フックに整理
• Props drilling を Context 経由に変更し、コンポーネント間の結合度を低減
• 各フックの単体テストを作成（renderHook 使用）

その他

• Atomic Design の簡易3層（Atoms / Molecules / Organisms）にディレクトリ構造を再設計
• 全コンポーネント・全フック・全ユーティリティの単体テストを作成（600テスト）
• 既存シナリオテスト13件を維持・修正

Checklist

• npm run build passes
• npm test passes