作業が終わったら、勝手にHTMLで"見える化"する

いまの作業の結果を、Markdownの長文ではなく「1枚のHTMLダッシュボード」に
まとめて progress/最新.html に書き出してください。

含める内容:
- この作業のゴール（1〜2行）
- 全体の進捗%（ドーナツ or バーで）
- やったこと / 変更したファイル（チェックリスト）
- 残っているTODO・次の一手
- いま詰まっている点があれば1行

制約:
- 1ファイル自己完結（外部CDN・外部フォント・画像URLを使わない）
- 落ち着いたライトテーマ1色で、毎回同じ見た目に
- ひと目で「今どこ・次どこ」が分かるレイアウト最優先

最後に、開くコマンド（open progress/最新.html）を教えてください。

このプロジェクト全体を調べて、現状を「1枚のHTMLダッシュボード」に
まとめて overview.html に書き出してください。

調べて反映してほしいこと:
- リポジトリ構成と、主要ディレクトリ／ファイルの役割
- 実装済み / 進行中 / 未着手 の機能（実ファイルから判定。
  推測が混じる場合は「推測」と明記する）
- TODO・FIXME・未解決の課題（コード内コメントも拾う）
- 直近の git ログから読み取れる「今の作業」

見せ方:
- 上部に「全体の進捗%（ドーナツ）」と「工程バー / チェックリスト」
- 各機能はカードで状態バッジ（済 / 進行中 / 未）を付ける
- 1ファイル自己完結（外部CDN・外部フォントなし）、落ち着いたライトテーマ

事実に基づいて書き、分からない所は「未確認」と正直に書いてください。
最後に、開くコマンド（open overview.html）を教えてください。

## 成果物の見える化ルール（HTMLプレビュー）

作業（1タスク・1機能・1調査）が一区切りしたら、その進捗を
**Markdownの長文ではなく、1枚のHTMLダッシュボード**として書き出す。

- 出力先: `progress/status.html`（毎回このファイルを上書き。履歴は git に任せる）
- 内容: 全体の進捗% / やったこと（チェックリスト）/ 残タスク / 次の一手 / 詰まり
- 1ファイル自己完結（外部CDN・外部フォント・外部画像を使わない）
- 配色は落ち着いたライトテーマ1つに固定し、毎回同じ見た目にする
- 事実に基づく。分からない所は「未確認」と書く（それらしく埋めない）

{
  "hooks": {
    "Stop": [
      {
        "hooks": [
          {
            "type": "command",
            "command": "bash \"$CLAUDE_PROJECT_DIR/.claude/hooks/regen-preview.sh\"",
            "async": true,
            "timeout": 60,
            "statusMessage": "HTMLプレビューを再生成中…"
          }
        ]
      }
    ]
  }
}

#!/bin/bash
# HTMLプレビューの自動再生成（Stop / SessionStart hook から async 呼び出し）
# - 120秒以内に再生成済みならスキップ（毎ターン走っても軽い）
# - 失敗してもセッションを止めない（常に exit 0）
set -u
ROOT="${CLAUDE_PROJECT_DIR:-$(pwd)}"
OUT="$ROOT/progress/status.html"
LOG="$ROOT/.claude/hooks/regen-preview.log"

[ -f "$ROOT/build-preview.py" ] || exit 0   # ← 自作ビルダーが無ければ何もしない

if [ -f "$OUT" ]; then
  now=$(date +%s)
  mt=$(stat -f %m "$OUT" 2>/dev/null || stat -c %Y "$OUT" 2>/dev/null || echo 0)
  [ $((now - mt)) -lt 120 ] && exit 0
fi

{
  echo "--- $(date '+%Y-%m-%d %H:%M:%S') regen-preview"
  /usr/bin/python3 "$ROOT/build-preview.py"
} >> "$LOG" 2>&1 || true

exit 0