今後の改善課題: Store導入・TypeScript化・Vercel環境変数整備

## 概要

MANDARA Insight 機能 (PR #48) のマージと一連の修正で見えてきた残課題をまとめます。

---

## 🔴 優先度: 高

### 1. Vercel 環境変数の設定
本番環境 (4st.vercel.app) で以下の環境変数を設定する必要があります:

**必須:**
- \`ALLOWED_GOOGLE_EMAIL\`: Google ログインを許可するメールアドレス
- 未設定時: Googleログインは \`auth/access-denied\` エラー
- 他のログイン方法 (メールリンク/パスワード/GitHub) は引き続き動作

**オプション (AI機能用):**
- \`GEMINI_API_KEY\`: MANDARA Insight の AI 分析用
- \`OPENAI_API_KEY\`: OpenAI プロバイダ利用時
- \`ACTIVE_AI_PROVIDER\`: \`gemini\` | \`openai\` (デフォルト: gemini)

**設定箇所**: Vercel Dashboard → Project Settings → Environment Variables

⚠️ Firebase のクライアント設定 (FIREBASE_API_KEY等) は公開安全なため
\`scripts/generate-config.js\` にデフォルト値を含めています。変更不要。

### 2. Store パターンの段階的導入
\`js/mandara-store.js\` が未使用のままコミットされています。

**現状**: 各モジュールに \`currentMandara\` 等のローカル状態が散在
**理想**: Pub/Sub Store で状態を一元管理

**推奨アプローチ**:
- 別PRで段階的に移行 (一気に書き換えると既存機能が壊れる)
- まず \`currentMandara\` を store 経由に変更
- 次に \`allMandaras\`、\`mandaraOrder\` と順次

---

## 🟡 優先度: 中

### 3. TypeScript 段階的移行
\`js/\` 配下はすべて \`.js\`。レビューで指摘あり。

**推奨アプローチ**:
1. \`tsconfig.json\` を \`allowJs: true, checkJs: true\` で導入
2. 新規ファイルから \`.ts\` で書き始める
3. 既存ファイルは触る時に変換 (一括変換は避ける)

### 4. mandara-insight-controller の責務分割
現在約 450 行で肥大化しつつあります。

**候補**:
- \`handleInsightCreateGarage\` → 別モジュール
- \`showInsightIntro\` (HTML生成含む) → 別モジュール

### 5. e2e テストの追加
PR #48 で多くの UI 機能を追加したが、e2e テストは未追加:
- INSIGHT パネルの開閉・タブ切替
- API キー入力フロー
- TODO フィルター/却下ボタン
- サイドバー幅切替
- Markdown エクスポート

---

## 🟢 優先度: 低

### 6. coderabbitai 指摘の軽微な修正
- \`scripts/generate-config.js\` の \`escapeJS\` に \`\\u2028\`/\`\\u2029\` エスケープ追加

### 7. ドキュメント更新
- \`README.md\` または \`SETUP.md\` に MANDARA Insight の使い方を追記
- \`.env.example\` に \`ALLOWED_GOOGLE_EMAIL\` を追加

### 8. INSIGHT ボタンの視認性向上
緑色でいいが、他のボタンと並んだ時のコントラストを再検証

---

## 📊 現在の状態

- ✅ PR #48 (MANDARA Insight) マージ済
- ✅ 本番デプロイ成功 (https://4st.vercel.app)
- ✅ Firebase graceful degradation 実装済
- ✅ テスト 403件 全pass
- ⚠️ Google ログインは ALLOWED_GOOGLE_EMAIL 設定後に利用可

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Treat this as a coordination issue rather than one starter task, and split the listed work into focused issues. For the implementation areas, begin with js/mandara-store.js, mandara-insight-controller, scripts/generate-config.js, tsconfig.json, README.md or SETUP.md, and .env.example; the issue also identifies the INSIGHT e2e flows to cover. Each split issue is done when its stated migration, configuration, test coverage, or documentation goal is complete and the existing 403 tests still pass.

Written by the indexing model from the issue text.