From 47b97d1037edf13c2f4fc645a719fe5b0ed16f88 Mon Sep 17 00:00:00 2001
From: dhanya elizabath jose <DhanyaJose@users.noreply.github.com>
Date: Sun, 26 Apr 2026 19:20:22 +0100
Subject: [PATCH] feat(hooks): add SessionEnd progress logger and local
 progress tracker (#87)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(hooks): add SessionEnd progress logger and local progress tracker

Adds a SessionEnd hook that prompts for modules studied at session end
and appends a record to ~/.claude-howto-progress.json — outside the repo
so progress survives git pull without being overwritten.

Also adds local-progress/index.html: a self-contained visual tracker
with checkboxes for all 10 modules, per-module notes, an overall progress
bar, and Export/Import to sync with a local JSON backup file.

Key patterns demonstrated:
- SessionEnd vs Stop (fires once on exit, not after every response)
- /dev/tty for interactive input in hooks (stdin carries the JSON payload)
- $CLAUDE_PROJECT_DIR for portable paths (never hardcode /Users/...)
- Guard clause to prevent global hook running in unrelated projects

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

* fix(hooks): address PR review — bash 3.2 compat, JSON escaping, textarea XSS
  - Replace pipeline+while with IFS for-loop (bash 3.2 compatible)
  - Pass NOTES as Python arg to avoid broken JSON on quotes/backslashes
  - Set textarea.value instead of innerHTML to prevent XSS from imported JSON
  Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 .gitignore                |   3 +
 06-hooks/README.md        | 135 ++++++++
 06-hooks/session-end.sh   |  94 +++++
 local-progress/index.html | 697 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 929 insertions(+)
 create mode 100755 06-hooks/session-end.sh
 create mode 100644 local-progress/index.html

diff --git a/.gitignore b/.gitignore
index fd5335b..054fbe0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -51,6 +51,9 @@ yarn-error.log*
 !.claude/skills/lesson-quiz/
 blog-posts/
 
+# Local progress tracker — HTML ships in repo, but exported JSON data files stay local
+local-progress/*.json
+
 # EPUB files in root directory
 /*.epub
 
diff --git a/06-hooks/README.md b/06-hooks/README.md
index 68b7db7..31837b2 100644
--- a/06-hooks/README.md
+++ b/06-hooks/README.md
@@ -965,6 +965,141 @@ python3 09-advanced-features/setup-auto-mode-permissions.py
 - `DROP TABLE`, `kubectl delete`, `terraform destroy`
 - `npm publish`, `curl | bash`, production deploys
 
+### Example 8: Learning Progress Logger (SessionEnd)
+
+Log which modules you studied at the end of each Claude Code session. Progress is stored
+in `~/.claude-howto-progress.json` — outside the repo, so it survives `git pull` without
+being overwritten.
+
+**Why `SessionEnd` and not `Stop`?**
+`Stop` fires after *every* Claude response. `SessionEnd` fires once when the session
+terminates — exactly what you want for an end-of-session diary entry.
+
+**Why `/dev/tty` for input?**
+Hook scripts receive the hook JSON payload via `stdin`, so interactive `read` must use
+`/dev/tty` directly to reach the terminal.
+
+**File:** `06-hooks/session-end.sh`
+
+```bash
+#!/usr/bin/env bash
+# SessionEnd hook: prompts for modules worked on, then appends a session record
+# to ~/.claude-howto-progress.json for persistent learning progress tracking.
+
+PROGRESS_FILE="$HOME/.claude-howto-progress.json"
+
+# Guard: only run inside this repo
+if [[ "$CLAUDE_PROJECT_DIR" != *"claude-howto"* ]] && [[ "$PWD" != *"claude-howto"* ]]; then
+  exit 0
+fi
+
+if [ ! -f "$PROGRESS_FILE" ]; then
+  echo '{"sessions":[]}' > "$PROGRESS_FILE"
+fi
+
+DATE=$(date +"%Y-%m-%d")
+TIME=$(date +"%H:%M")
+
+echo ""
+echo " Which modules did you work on? (e.g. 06,07 or press Enter to skip)"
+echo " 01=Slash  02=Memory  03=Skills  04=Subagents  05=MCP"
+echo " 06=Hooks  07=Plugins 08=Checkpoints 09=Advanced 10=CLI"
+printf " > "
+read -r INPUT </dev/tty
+
+if [ -z "$INPUT" ] || [ "$INPUT" = "skip" ]; then
+  exit 0
+fi
+
+MODULES_JSON=$(echo "$INPUT" | tr ',' '\n' | tr -d ' ' | while read -r m; do
+  case "$m" in
+    01) echo '"01-slash-commands"' ;;
+    02) echo '"02-memory"' ;;
+    03) echo '"03-skills"' ;;
+    04) echo '"04-subagents"' ;;
+    05) echo '"05-mcp"' ;;
+    06) echo '"06-hooks"' ;;
+    07) echo '"07-plugins"' ;;
+    08) echo '"08-checkpoints"' ;;
+    09) echo '"09-advanced-features"' ;;
+    10) echo '"10-cli"' ;;
+    *)  echo "\"$m\"" ;;
+  esac
+done | paste -sd ',' -)
+
+printf " Notes? (optional, press Enter to skip): "
+read -r NOTES </dev/tty
+
+SESSION="{\"date\":\"$DATE\",\"time\":\"$TIME\",\"modules\":[${MODULES_JSON}],\"notes\":\"${NOTES}\"}"
+
+python3 - "$PROGRESS_FILE" "$SESSION" <<'PYEOF'
+import sys, json
+path, new_session = sys.argv[1], json.loads(sys.argv[2])
+with open(path, 'r') as f:
+    data = json.load(f)
+data.setdefault('sessions', []).append(new_session)
+with open(path, 'w') as f:
+    json.dump(data, f, indent=2)
+PYEOF
+
+echo " Saved to $PROGRESS_FILE"
+```
+
+**Configuration** (in `.claude/settings.json`):
+
+```json
+{
+  "hooks": {
+    "SessionEnd": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "\"$CLAUDE_PROJECT_DIR/.claude/hooks/session-end.sh\""
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+**Output — `~/.claude-howto-progress.json`:**
+
+```json
+{
+  "sessions": [
+    {
+      "date": "2026-04-18",
+      "time": "14:32",
+      "modules": ["06-hooks", "07-plugins"],
+      "notes": "Installed first hook, tried pre-commit example"
+    }
+  ]
+}
+```
+
+**Key patterns demonstrated:**
+
+| Pattern | Why it matters |
+|---------|----------------|
+| `SessionEnd` event | Fires once on exit — not after every response like `Stop` |
+| `read -r INPUT </dev/tty` | Hooks own `stdin` (JSON payload); use `/dev/tty` for user input |
+| `$CLAUDE_PROJECT_DIR` | Portable path — never hardcode `/Users/yourname/...` |
+| Guard clause at top | Prevents the hook running in unrelated projects if installed globally |
+| Store outside the repo | `~/` path survives `git pull` without overwriting your data |
+
+**Companion: visual progress tracker**
+
+For a full checkbox-based UI covering all 10 modules, open the included tracker in your browser:
+
+```bash
+open local-progress/index.html
+```
+
+Progress is stored in browser `localStorage` (never written to disk inside the repo).
+Use the **Export** button to save a snapshot as JSON, and **Import** to restore it.
+
 ## Plugin Hooks
 
 Plugins can include hooks in their `hooks/hooks.json` file:
diff --git a/06-hooks/session-end.sh b/06-hooks/session-end.sh
new file mode 100755
index 0000000..e5df24a
--- /dev/null
+++ b/06-hooks/session-end.sh
@@ -0,0 +1,94 @@
+#!/usr/bin/env bash
+# SessionEnd hook: prompts for modules worked on, then appends a session record
+# to ~/.claude-howto-progress.json for persistent learning progress tracking.
+#
+# Fires once when the Claude Code session terminates — not after every response.
+# Uses /dev/tty for interactive input since stdin carries the hook's JSON payload.
+#
+# Install: add to .claude/settings.json under the "SessionEnd" event (see below).
+
+PROGRESS_FILE="$HOME/.claude-howto-progress.json"
+
+# Guard: only run inside this repo
+if [[ "$CLAUDE_PROJECT_DIR" != *"claude-howto"* ]] && [[ "$PWD" != *"claude-howto"* ]]; then
+  exit 0
+fi
+
+# Create progress file if it doesn't exist
+if [ ! -f "$PROGRESS_FILE" ]; then
+  echo '{"sessions":[]}' > "$PROGRESS_FILE"
+fi
+
+DATE=$(date +"%Y-%m-%d")
+TIME=$(date +"%H:%M")
+
+echo ""
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo " Claude Code — Learning Session End"
+echo " $DATE $TIME"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo ""
+echo " Which modules did you work on? (e.g. 06,07 or press Enter to skip)"
+echo " 01=Slash  02=Memory  03=Skills  04=Subagents  05=MCP"
+echo " 06=Hooks  07=Plugins 08=Checkpoints 09=Advanced 10=CLI"
+echo ""
+printf " > "
+read -r INPUT </dev/tty
+
+if [ -z "$INPUT" ] || [ "$INPUT" = "skip" ]; then
+  echo " Skipped — no session logged."
+  echo ""
+  exit 0
+fi
+
+# Map short numbers to module names (for loop avoids pipeline+while, which bash 3.2 can't parse)
+IFS=',' read -ra PARTS <<< "$INPUT"
+MODULES_JSON=""
+for m in "${PARTS[@]}"; do
+  m="${m// /}"  # strip spaces
+  case "$m" in
+    01) label='"01-slash-commands"' ;;
+    02) label='"02-memory"' ;;
+    03) label='"03-skills"' ;;
+    04) label='"04-subagents"' ;;
+    05) label='"05-mcp"' ;;
+    06) label='"06-hooks"' ;;
+    07) label='"07-plugins"' ;;
+    08) label='"08-checkpoints"' ;;
+    09) label='"09-advanced-features"' ;;
+    10) label='"10-cli"' ;;
+    *)  label="\"$m\"" ;;
+  esac
+  MODULES_JSON="${MODULES_JSON:+$MODULES_JSON,}$label"
+done
+
+printf " Notes? (optional, press Enter to skip): "
+read -r NOTES </dev/tty
+
+# Pass NOTES as a separate argument so Python handles JSON escaping —
+# avoids broken JSON when notes contain quotes or backslashes.
+python3 - "$PROGRESS_FILE" "$DATE" "$TIME" "$MODULES_JSON" "$NOTES" <<'PYEOF'
+import sys, json
+
+path, date, time_str, modules_raw, notes = sys.argv[1], sys.argv[2], sys.argv[3], sys.argv[4], sys.argv[5]
+
+new_session = {
+    "date": date,
+    "time": time_str,
+    "modules": json.loads(f"[{modules_raw}]") if modules_raw else [],
+    "notes": notes,
+}
+
+with open(path, 'r') as f:
+    data = json.load(f)
+
+data.setdefault('sessions', []).append(new_session)
+
+with open(path, 'w') as f:
+    json.dump(data, f, indent=2)
+PYEOF
+
+echo ""
+echo " Saved to $PROGRESS_FILE"
+[ -n "$NOTES" ] && echo " Notes: $NOTES"
+echo ""
diff --git a/local-progress/index.html b/local-progress/index.html
new file mode 100644
index 0000000..ff27f9d
--- /dev/null
+++ b/local-progress/index.html
@@ -0,0 +1,697 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Claude Code — Learning Progress</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --bg: #0f1117;
+      --surface: #1a1d27;
+      --surface2: #22263a;
+      --border: #2e3350;
+      --accent: #6c8cff;
+      --accent2: #4ade80;
+      --text: #e2e8f0;
+      --muted: #8892b0;
+      --done: #4ade80;
+      --radius: 10px;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      padding: 2rem 1rem 4rem;
+    }
+
+    header {
+      max-width: 860px;
+      margin: 0 auto 2.5rem;
+    }
+
+    header h1 {
+      font-size: 1.75rem;
+      font-weight: 700;
+      color: var(--text);
+      letter-spacing: -0.5px;
+    }
+
+    header p {
+      color: var(--muted);
+      font-size: 0.9rem;
+      margin-top: 0.4rem;
+    }
+
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      margin-top: 1.25rem;
+      flex-wrap: wrap;
+    }
+
+    button, .import-label {
+      font-size: 0.82rem;
+      font-weight: 600;
+      padding: 0.45rem 1rem;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background: var(--surface2);
+      color: var(--text);
+      cursor: pointer;
+      transition: background 0.15s, border-color 0.15s;
+      white-space: nowrap;
+    }
+
+    button:hover, .import-label:hover {
+      background: var(--border);
+      border-color: var(--accent);
+    }
+
+    #reset-btn { color: #f87171; border-color: #3a1e1e; }
+    #reset-btn:hover { background: #3a1e1e; border-color: #f87171; }
+
+    input[type="file"] { display: none; }
+
+    .progress-bar-wrap {
+      max-width: 860px;
+      margin: 0 auto 1.75rem;
+    }
+
+    .progress-meta {
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.8rem;
+      color: var(--muted);
+      margin-bottom: 0.5rem;
+    }
+
+    .progress-meta span.pct { color: var(--accent2); font-weight: 700; font-size: 1rem; }
+
+    .bar-track {
+      height: 8px;
+      background: var(--surface2);
+      border-radius: 99px;
+      overflow: hidden;
+    }
+
+    .bar-fill {
+      height: 100%;
+      background: linear-gradient(90deg, var(--accent), var(--accent2));
+      border-radius: 99px;
+      transition: width 0.4s ease;
+    }
+
+    main {
+      max-width: 860px;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      gap: 1.25rem;
+    }
+
+    .module {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      overflow: hidden;
+    }
+
+    .module.complete { border-color: #1a3a2a; }
+
+    .module-header {
+      display: flex;
+      align-items: center;
+      gap: 0.85rem;
+      padding: 1rem 1.25rem;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .module-header:hover { background: var(--surface2); }
+
+    .module-num {
+      font-size: 0.72rem;
+      font-weight: 700;
+      color: var(--muted);
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      padding: 2px 7px;
+      letter-spacing: 0.5px;
+      flex-shrink: 0;
+    }
+
+    .module.complete .module-num {
+      background: #0f2d1f;
+      border-color: #1a3a2a;
+      color: var(--done);
+    }
+
+    .module-title {
+      font-weight: 600;
+      font-size: 0.97rem;
+      flex: 1;
+    }
+
+    .module-sub {
+      font-size: 0.78rem;
+      color: var(--muted);
+    }
+
+    .module-chevron {
+      color: var(--muted);
+      font-size: 0.8rem;
+      transition: transform 0.2s;
+    }
+
+    .module.open .module-chevron { transform: rotate(90deg); }
+
+    .module-body {
+      display: none;
+      padding: 0 1.25rem 1.25rem;
+      border-top: 1px solid var(--border);
+    }
+
+    .module.open .module-body { display: block; }
+
+    .items-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+      gap: 0.5rem;
+      margin-top: 1rem;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      gap: 0.6rem;
+      padding: 0.5rem 0.65rem;
+      border-radius: 6px;
+      border: 1px solid transparent;
+      cursor: pointer;
+      transition: background 0.12s;
+    }
+
+    .item:hover { background: var(--surface2); border-color: var(--border); }
+    .item.checked { background: #0f2d1f; border-color: #1a3a2a; }
+
+    .item input[type="checkbox"] {
+      appearance: none;
+      width: 16px;
+      height: 16px;
+      border: 2px solid var(--border);
+      border-radius: 4px;
+      flex-shrink: 0;
+      cursor: pointer;
+      position: relative;
+      transition: background 0.12s, border-color 0.12s;
+    }
+
+    .item input[type="checkbox"]:checked {
+      background: var(--done);
+      border-color: var(--done);
+    }
+
+    .item input[type="checkbox"]:checked::after {
+      content: "✓";
+      position: absolute;
+      color: #0f1117;
+      font-size: 10px;
+      font-weight: 900;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .item-label {
+      font-size: 0.83rem;
+      line-height: 1.3;
+      color: var(--text);
+    }
+
+    .item.checked .item-label { color: var(--done); }
+
+    .notes-wrap {
+      margin-top: 1rem;
+    }
+
+    .notes-wrap label {
+      font-size: 0.75rem;
+      color: var(--muted);
+      font-weight: 600;
+      letter-spacing: 0.5px;
+      text-transform: uppercase;
+      display: block;
+      margin-bottom: 0.4rem;
+    }
+
+    textarea {
+      width: 100%;
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      color: var(--text);
+      font-size: 0.83rem;
+      font-family: inherit;
+      padding: 0.6rem 0.75rem;
+      resize: vertical;
+      min-height: 70px;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+
+    textarea:focus { border-color: var(--accent); }
+
+    .mod-progress-bar {
+      margin-top: 0.75rem;
+      height: 4px;
+      background: var(--surface2);
+      border-radius: 99px;
+      overflow: hidden;
+    }
+
+    .mod-progress-fill {
+      height: 100%;
+      background: var(--done);
+      border-radius: 99px;
+      transition: width 0.3s ease;
+    }
+
+    .toast {
+      position: fixed;
+      bottom: 1.5rem;
+      right: 1.5rem;
+      background: var(--surface2);
+      border: 1px solid var(--accent);
+      color: var(--text);
+      padding: 0.65rem 1.1rem;
+      border-radius: 8px;
+      font-size: 0.85rem;
+      opacity: 0;
+      transform: translateY(10px);
+      transition: opacity 0.25s, transform 0.25s;
+      pointer-events: none;
+      z-index: 100;
+    }
+
+    .toast.show { opacity: 1; transform: translateY(0); }
+
+    .last-saved {
+      font-size: 0.75rem;
+      color: var(--muted);
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+
+<header>
+  <h1>Claude Code — Learning Progress</h1>
+  <p>10 modules · Progress stored in browser localStorage · Export to back up</p>
+  <div class="toolbar">
+    <button id="export-btn">Export JSON</button>
+    <label class="import-label" for="import-file">Import JSON</label>
+    <input type="file" id="import-file" accept=".json">
+    <button id="reset-btn">Reset All</button>
+    <span class="last-saved" id="last-saved"></span>
+  </div>
+</header>
+
+<div class="progress-bar-wrap">
+  <div class="progress-meta">
+    <span>Overall progress</span>
+    <span class="pct" id="overall-pct">0%</span>
+  </div>
+  <div class="bar-track"><div class="bar-fill" id="overall-bar" style="width:0%"></div></div>
+</div>
+
+<main id="modules-container"></main>
+
+<div class="toast" id="toast"></div>
+
+<script>
+const STORAGE_KEY = 'claude-howto-progress';
+
+const MODULES = [
+  {
+    id: '01-slash-commands',
+    num: '01',
+    title: 'Slash Commands',
+    subtitle: '~30 min · Quick productivity shortcuts',
+    items: [
+      'Read module README',
+      '/optimize — code performance analysis',
+      '/pr — pull request preparation',
+      '/commit — commit message helper',
+      '/generate-api-docs — API documentation',
+      '/setup-ci-cd — CI/CD pipeline setup',
+      '/push-all — push all changes workflow',
+      '/unit-test-expand — unit test coverage',
+      '/doc-refactor — documentation refactoring',
+      'Create your own slash command',
+    ],
+  },
+  {
+    id: '02-memory',
+    num: '02',
+    title: 'Memory & CLAUDE.md',
+    subtitle: '~45 min · Persistent context across sessions',
+    items: [
+      'Read module README',
+      'Understand project-level CLAUDE.md',
+      'Understand directory-level CLAUDE.md',
+      'Understand personal CLAUDE.md',
+      'Create a project CLAUDE.md for your own project',
+      'Create a directory-specific CLAUDE.md',
+      'Test memory persistence across sessions',
+    ],
+  },
+  {
+    id: '03-skills',
+    num: '03',
+    title: 'Skills',
+    subtitle: '~1 hour · Reusable auto-invoked capabilities',
+    items: [
+      'Read module README',
+      'code-review skill',
+      'brand-voice skill',
+      'doc-generator skill',
+      'refactor skill',
+      'claude-md skill',
+      'blog-draft skill',
+      'Create a custom skill for your workflow',
+    ],
+  },
+  {
+    id: '04-subagents',
+    num: '04',
+    title: 'Subagents',
+    subtitle: '~1.5 hours · Specialized AI assistants',
+    items: [
+      'Read module README',
+      'code-reviewer agent',
+      'test-engineer agent',
+      'documentation-writer agent',
+      'secure-reviewer agent',
+      'implementation-agent',
+      'debugger agent',
+      'data-scientist agent',
+      'clean-code-reviewer agent',
+      'Run your first subagent task',
+    ],
+  },
+  {
+    id: '05-mcp',
+    num: '05',
+    title: 'MCP Integrations',
+    subtitle: '~1 hour · Model Context Protocol',
+    items: [
+      'Read module README',
+      'github-mcp config',
+      'database-mcp config',
+      'filesystem-mcp config',
+      'multi-mcp combined config',
+      'Install and test one MCP server',
+    ],
+  },
+  {
+    id: '06-hooks',
+    num: '06',
+    title: 'Hooks',
+    subtitle: '~1 hour · Event-driven automation',
+    items: [
+      'Read module README',
+      'format-code.sh — auto-format on write',
+      'pre-commit.sh — run tests before commit',
+      'security-scan.sh — vulnerability scanning',
+      'log-bash.sh — command logging',
+      'validate-prompt.sh — input validation',
+      'notify-team.sh — team notifications',
+      'context-tracker.py — context monitoring',
+      'Install a hook in settings.json',
+      'Observe hook firing in a session',
+    ],
+  },
+  {
+    id: '07-plugins',
+    num: '07',
+    title: 'Plugins',
+    subtitle: '~2 hours · Bundled feature collections',
+    items: [
+      'Read module README',
+      'pr-review plugin — complete PR workflow',
+      'devops-automation plugin — Kubernetes deploy',
+      'documentation plugin — API docs generation',
+      'Understand plugin.json structure',
+      'Create a minimal plugin',
+    ],
+  },
+  {
+    id: '08-checkpoints',
+    num: '08',
+    title: 'Checkpoints',
+    subtitle: '~45 min · Session snapshots & recovery',
+    items: [
+      'Read module README',
+      'Read checkpoint-examples.md',
+      'Create a checkpoint mid-task',
+      'Restore from a checkpoint',
+      'Use checkpoints for risky operations',
+    ],
+  },
+  {
+    id: '09-advanced-features',
+    num: '09',
+    title: 'Advanced Features',
+    subtitle: '~2–3 hours · Power user capabilities',
+    items: [
+      'Read module README',
+      'Study config-examples.json (10+ configs)',
+      'planning-mode-examples — REST API planning',
+      'planning-mode-examples — migration planning',
+      'planning-mode-examples — refactoring',
+      'Use Plan mode on a real task',
+      'Try extended thinking mode',
+    ],
+  },
+  {
+    id: '10-cli',
+    num: '10',
+    title: 'CLI Mastery',
+    subtitle: '~30 min + advanced · Command-line interface',
+    items: [
+      'Read module README',
+      'Learn key CLI flags (--print, --output-format)',
+      'Non-interactive / scripted usage',
+      'Pipe input/output patterns',
+      'Chain Claude Code in shell scripts',
+      'Integrate with CI/CD pipeline',
+    ],
+  },
+];
+
+// ── State ──────────────────────────────────────────────────────────────────
+
+function loadState() {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY)) || {};
+  } catch { return {}; }
+}
+
+function saveState(state) {
+  state._savedAt = new Date().toISOString();
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  updateLastSaved(state._savedAt);
+}
+
+function updateLastSaved(iso) {
+  if (!iso) return;
+  const el = document.getElementById('last-saved');
+  const d = new Date(iso);
+  el.textContent = `Last saved ${d.toLocaleDateString()} ${d.toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'})}`;
+}
+
+// ── Render ─────────────────────────────────────────────────────────────────
+
+function render() {
+  const state = loadState();
+  const container = document.getElementById('modules-container');
+  container.innerHTML = '';
+
+  MODULES.forEach(mod => {
+    const modState = state[mod.id] || { checked: {}, notes: '' };
+    const total = mod.items.length;
+    const done = mod.items.filter((_, i) => modState.checked[i]).length;
+    const pct = total ? Math.round(done / total * 100) : 0;
+    const isComplete = pct === 100;
+    const isOpen = state[`_open_${mod.id}`];
+
+    const div = document.createElement('div');
+    div.className = `module${isComplete ? ' complete' : ''}${isOpen ? ' open' : ''}`;
+    div.dataset.id = mod.id;
+
+    div.innerHTML = `
+      <div class="module-header">
+        <span class="module-num">${mod.num}</span>
+        <div style="flex:1">
+          <div class="module-title">${mod.title}</div>
+          <div class="module-sub">${mod.subtitle} · ${done}/${total} done</div>
+        </div>
+        <span class="module-chevron">▶</span>
+      </div>
+      <div class="module-body">
+        <div class="mod-progress-bar">
+          <div class="mod-progress-fill" style="width:${pct}%"></div>
+        </div>
+        <div class="items-grid">
+          ${mod.items.map((item, i) => `
+            <label class="item${modState.checked[i] ? ' checked' : ''}" data-idx="${i}">
+              <input type="checkbox" ${modState.checked[i] ? 'checked' : ''} data-mod="${mod.id}" data-idx="${i}">
+              <span class="item-label">${item}</span>
+            </label>
+          `).join('')}
+        </div>
+        <div class="notes-wrap">
+          <label>Notes</label>
+          <textarea data-mod="${mod.id}" placeholder="Your notes for this module…"></textarea>
+        </div>
+      </div>
+    `;
+
+    // Set textarea value via .value (not innerHTML) to prevent XSS from imported JSON
+    div.querySelector('textarea[data-mod]').value = modState.notes || '';
+
+    container.appendChild(div);
+  });
+
+  updateOverall(state);
+  updateLastSaved(state._savedAt);
+  bindEvents();
+}
+
+function updateOverall(state) {
+  let total = 0, done = 0;
+  MODULES.forEach(mod => {
+    const modState = state[mod.id] || { checked: {} };
+    total += mod.items.length;
+    done += mod.items.filter((_, i) => modState.checked[i]).length;
+  });
+  const pct = total ? Math.round(done / total * 100) : 0;
+  document.getElementById('overall-pct').textContent = `${pct}%`;
+  document.getElementById('overall-bar').style.width = `${pct}%`;
+}
+
+// ── Events ─────────────────────────────────────────────────────────────────
+
+function bindEvents() {
+  document.querySelectorAll('.module-header').forEach(header => {
+    header.addEventListener('click', () => {
+      const mod = header.closest('.module');
+      const id = mod.dataset.id;
+      const state = loadState();
+      state[`_open_${id}`] = !mod.classList.contains('open');
+      saveState(state);
+      mod.classList.toggle('open');
+      mod.querySelector('.module-chevron').style.transform =
+        mod.classList.contains('open') ? 'rotate(90deg)' : '';
+    });
+  });
+
+  document.querySelectorAll('input[type="checkbox"][data-mod]').forEach(cb => {
+    cb.addEventListener('change', e => {
+      e.stopPropagation();
+      const { mod, idx } = cb.dataset;
+      const state = loadState();
+      if (!state[mod]) state[mod] = { checked: {}, notes: '' };
+      state[mod].checked[idx] = cb.checked;
+      saveState(state);
+      const label = cb.closest('.item');
+      label.classList.toggle('checked', cb.checked);
+
+      // update sub-counts without full re-render
+      const modEl = cb.closest('.module');
+      const modDef = MODULES.find(m => m.id === mod);
+      const modState = state[mod];
+      const done = modDef.items.filter((_, i) => modState.checked[i]).length;
+      const total = modDef.items.length;
+      const pct = Math.round(done / total * 100);
+      modEl.querySelector('.module-sub').textContent =
+        `${modDef.subtitle} · ${done}/${total} done`;
+      modEl.querySelector('.mod-progress-fill').style.width = `${pct}%`;
+      const isComplete = pct === 100;
+      modEl.classList.toggle('complete', isComplete);
+      const numEl = modEl.querySelector('.module-num');
+      numEl.style.color = isComplete ? 'var(--done)' : '';
+
+      updateOverall(state);
+    });
+  });
+
+  document.querySelectorAll('textarea[data-mod]').forEach(ta => {
+    ta.addEventListener('input', () => {
+      const mod = ta.dataset.mod;
+      const state = loadState();
+      if (!state[mod]) state[mod] = { checked: {}, notes: '' };
+      state[mod].notes = ta.value;
+      saveState(state);
+    });
+  });
+}
+
+// ── Toolbar ────────────────────────────────────────────────────────────────
+
+document.getElementById('export-btn').addEventListener('click', () => {
+  const state = loadState();
+  const blob = new Blob([JSON.stringify(state, null, 2)], { type: 'application/json' });
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = `claude-howto-progress-${new Date().toISOString().slice(0,10)}.json`;
+  a.click();
+  showToast('Progress exported — save the file as ~/.claude-howto-progress.json');
+});
+
+document.getElementById('import-file').addEventListener('change', e => {
+  const file = e.target.files[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = ev => {
+    try {
+      const data = JSON.parse(ev.target.result);
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+      render();
+      showToast('Progress imported successfully');
+    } catch {
+      showToast('Error: invalid JSON file');
+    }
+  };
+  reader.readAsText(file);
+  e.target.value = '';
+});
+
+document.getElementById('reset-btn').addEventListener('click', () => {
+  if (!confirm('Reset ALL progress? This cannot be undone.')) return;
+  localStorage.removeItem(STORAGE_KEY);
+  render();
+  showToast('Progress reset');
+});
+
+// ── Toast ──────────────────────────────────────────────────────────────────
+
+function showToast(msg) {
+  const t = document.getElementById('toast');
+  t.textContent = msg;
+  t.classList.add('show');
+  setTimeout(() => t.classList.remove('show'), 3000);
+}
+
+// ── Init ───────────────────────────────────────────────────────────────────
+
+render();
+</script>
+</body>
+</html>