@iaforged/context-code 1.2.9 → 1.2.12

package/dist/src/commands/insights.js

@@ -246,32 +246,32 @@ function getFacetsDir() {
 function getSessionMetaDir() {
     return join(getDataDir(), 'session-meta');
 }
-const FACET_EXTRACTION_PROMPT = `Analyze this Context Code session and extract structured facets.
-
-CRITICAL GUIDELINES:
-
-1. **goal_categories**: Count ONLY what the USER explicitly asked for.
-   - DO NOT count Claude's autonomous codebase exploration
-   - DO NOT count work Claude decided to do on its own
-   - ONLY count when user says "can you...", "please...", "I need...", "let's..."
-
-2. **user_satisfaction_counts**: Base ONLY on explicit user signals.
-   - "Yay!", "great!", "perfect!" → happy
-   - "thanks", "looks good", "that works" → satisfied
-   - "ok, now let's..." (continuing without complaint) → likely_satisfied
-   - "that's not right", "try again" → dissatisfied
-   - "this is broken", "I give up" → frustrated
-
-3. **friction_counts**: Be specific about what went wrong.
-   - misunderstood_request: Claude interpreted incorrectly
-   - wrong_approach: Right goal, wrong solution method
-   - buggy_code: Code didn't work correctly
-   - user_rejected_action: User said no/stop to a tool call
-   - excessive_changes: Over-engineered or changed too much
-
-4. If very short or just warmup, use warmup_minimal for goal_category
-
-SESSION:
+const FACET_EXTRACTION_PROMPT = `Analyze this Context Code session and extract structured facets.
+
+CRITICAL GUIDELINES:
+
+1. **goal_categories**: Count ONLY what the USER explicitly asked for.
+   - DO NOT count Claude's autonomous codebase exploration
+   - DO NOT count work Claude decided to do on its own
+   - ONLY count when user says "can you...", "please...", "I need...", "let's..."
+
+2. **user_satisfaction_counts**: Base ONLY on explicit user signals.
+   - "Yay!", "great!", "perfect!" → happy
+   - "thanks", "looks good", "that works" → satisfied
+   - "ok, now let's..." (continuing without complaint) → likely_satisfied
+   - "that's not right", "try again" → dissatisfied
+   - "this is broken", "I give up" → frustrated
+
+3. **friction_counts**: Be specific about what went wrong.
+   - misunderstood_request: Claude interpreted incorrectly
+   - wrong_approach: Right goal, wrong solution method
+   - buggy_code: Code didn't work correctly
+   - user_rejected_action: User said no/stop to a tool call
+   - excessive_changes: Over-engineered or changed too much
+
+4. If very short or just warmup, use warmup_minimal for goal_category
+
+SESSION:
 `;
 // ============================================================================
 // Helper Functions
@@ -627,15 +627,15 @@ function formatTranscriptForFacets(log) {
     }
     return lines.join('\n');
 }
-const SUMMARIZE_CHUNK_PROMPT = `Summarize this portion of a Context Code session transcript. Focus on:
-1. What the user asked for
-2. What Claude did (tools used, files modified)
-3. Any friction or issues
-4. The outcome
-
-Keep it concise - 3-5 sentences. Preserve specific details like file names, error messages, and user feedback.
-
-TRANSCRIPT CHUNK:
+const SUMMARIZE_CHUNK_PROMPT = `Summarize this portion of a Context Code session transcript. Focus on:
+1. What the user asked for
+2. What Claude did (tools used, files modified)
+3. Any friction or issues
+4. The outcome
+
+Keep it concise - 3-5 sentences. Preserve specific details like file names, error messages, and user feedback.
+
+TRANSCRIPT CHUNK:
 `;
 async function summarizeTranscriptChunk(chunk) {
     try {
@@ -749,20 +749,20 @@ async function extractFacetsFromAPI(log, sessionId) {
         // Use summarization for long transcripts
         const transcript = await formatTranscriptWithSummarization(log);
         // Build prompt asking for JSON directly (no tool use)
-        const jsonPrompt = `${FACET_EXTRACTION_PROMPT}${transcript}
-
-RESPOND WITH ONLY A VALID JSON OBJECT matching this schema:
-{
-  "underlying_goal": "What the user fundamentally wanted to achieve",
-  "goal_categories": {"category_name": count, ...},
-  "outcome": "fully_achieved|mostly_achieved|partially_achieved|not_achieved|unclear_from_transcript",
-  "user_satisfaction_counts": {"level": count, ...},
-  "claude_helpfulness": "unhelpful|slightly_helpful|moderately_helpful|very_helpful|essential",
-  "session_type": "single_task|multi_task|iterative_refinement|exploration|quick_question",
-  "friction_counts": {"friction_type": count, ...},
-  "friction_detail": "One sentence describing friction or empty",
-  "primary_success": "none|fast_accurate_search|correct_code_edits|good_explanations|proactive_help|multi_file_changes|good_debugging",
-  "brief_summary": "One sentence: what user wanted and whether they got it"
+        const jsonPrompt = `${FACET_EXTRACTION_PROMPT}${transcript}
+
+RESPOND WITH ONLY A VALID JSON OBJECT matching this schema:
+{
+  "underlying_goal": "What the user fundamentally wanted to achieve",
+  "goal_categories": {"category_name": count, ...},
+  "outcome": "fully_achieved|mostly_achieved|partially_achieved|not_achieved|unclear_from_transcript",
+  "user_satisfaction_counts": {"level": count, ...},
+  "claude_helpfulness": "unhelpful|slightly_helpful|moderately_helpful|very_helpful|essential",
+  "session_type": "single_task|multi_task|iterative_refinement|exploration|quick_question",
+  "friction_counts": {"friction_type": count, ...},
+  "friction_detail": "One sentence describing friction or empty",
+  "primary_success": "none|fast_accurate_search|correct_code_edits|good_explanations|proactive_help|multi_file_changes|good_debugging",
+  "brief_summary": "One sentence: what user wanted and whether they got it"
 }`;
         const result = await queryWithModel({
             systemPrompt: asSystemPrompt([]),
@@ -1022,114 +1022,114 @@ function aggregateData(sessions, facets) {
 const INSIGHT_SECTIONS = [
     {
         name: 'project_areas',
-        prompt: `Analyze this Context Code usage data and identify project areas.
-
-RESPOND WITH ONLY A VALID JSON OBJECT:
-{
-  "areas": [
-    {"name": "Area name", "session_count": N, "description": "2-3 sentences about what was worked on and how Context Code was used."}
-  ]
-}
-
+        prompt: `Analyze this Context Code usage data and identify project areas.
+
+RESPOND WITH ONLY A VALID JSON OBJECT:
+{
+  "areas": [
+    {"name": "Area name", "session_count": N, "description": "2-3 sentences about what was worked on and how Context Code was used."}
+  ]
+}
+
 Include 4-5 areas. Skip internal CC operations.`,
         maxTokens: 8192,
     },
     {
         name: 'interaction_style',
-        prompt: `Analyze this Context Code usage data and describe the user's interaction style.
-
-RESPOND WITH ONLY A VALID JSON OBJECT:
-{
-  "narrative": "2-3 paragraphs analyzing HOW the user interacts with Context Code. Use second person 'you'. Describe patterns: iterate quickly vs detailed upfront specs? Interrupt often or let Claude run? Include specific examples. Use **bold** for key insights.",
-  "key_pattern": "One sentence summary of most distinctive interaction style"
+        prompt: `Analyze this Context Code usage data and describe the user's interaction style.
+
+RESPOND WITH ONLY A VALID JSON OBJECT:
+{
+  "narrative": "2-3 paragraphs analyzing HOW the user interacts with Context Code. Use second person 'you'. Describe patterns: iterate quickly vs detailed upfront specs? Interrupt often or let Claude run? Include specific examples. Use **bold** for key insights.",
+  "key_pattern": "One sentence summary of most distinctive interaction style"
 }`,
         maxTokens: 8192,
     },
     {
         name: 'what_works',
-        prompt: `Analyze this Context Code usage data and identify what's working well for this user. Use second person ("you").
-
-RESPOND WITH ONLY A VALID JSON OBJECT:
-{
-  "intro": "1 sentence of context",
-  "impressive_workflows": [
-    {"title": "Short title (3-6 words)", "description": "2-3 sentences describing the impressive workflow or approach. Use 'you' not 'the user'."}
-  ]
-}
-
+        prompt: `Analyze this Context Code usage data and identify what's working well for this user. Use second person ("you").
+
+RESPOND WITH ONLY A VALID JSON OBJECT:
+{
+  "intro": "1 sentence of context",
+  "impressive_workflows": [
+    {"title": "Short title (3-6 words)", "description": "2-3 sentences describing the impressive workflow or approach. Use 'you' not 'the user'."}
+  ]
+}
+
 Include 3 impressive workflows.`,
         maxTokens: 8192,
     },
     {
         name: 'friction_analysis',
-        prompt: `Analyze this Context Code usage data and identify friction points for this user. Use second person ("you").
-
-RESPOND WITH ONLY A VALID JSON OBJECT:
-{
-  "intro": "1 sentence summarizing friction patterns",
-  "categories": [
-    {"category": "Concrete category name", "description": "1-2 sentences explaining this category and what could be done differently. Use 'you' not 'the user'.", "examples": ["Specific example with consequence", "Another example"]}
-  ]
-}
-
+        prompt: `Analyze this Context Code usage data and identify friction points for this user. Use second person ("you").
+
+RESPOND WITH ONLY A VALID JSON OBJECT:
+{
+  "intro": "1 sentence summarizing friction patterns",
+  "categories": [
+    {"category": "Concrete category name", "description": "1-2 sentences explaining this category and what could be done differently. Use 'you' not 'the user'.", "examples": ["Specific example with consequence", "Another example"]}
+  ]
+}
+
 Include 3 friction categories with 2 examples each.`,
         maxTokens: 8192,
     },
     {
         name: 'suggestions',
-        prompt: `Analyze this Context Code usage data and suggest improvements.
-
-## CC FEATURES REFERENCE (pick from these for features_to_try):
-1. **MCP Servers**: Connect Claude to external tools, databases, and APIs via Model Context Protocol.
-   - How to use: Run \`claude mcp add <server-name> -- <command>\`
-   - Good for: database queries, Slack integration, GitHub issue lookup, connecting to internal APIs
-
-2. **Custom Skills**: Reusable prompts you define as markdown files that run with a single /command.
-   - How to use: Create \`.claude/skills/commit/SKILL.md\` with instructions. Then type \`/commit\` to run it.
-   - Good for: repetitive workflows - /commit, /review, /test, /deploy, /pr, or complex multi-step workflows
-
-3. **Hooks**: Shell commands that auto-run at specific lifecycle events.
-   - How to use: Add to \`.claude/settings.json\` under "hooks" key.
-   - Good for: auto-formatting code, running type checks, enforcing conventions
-
-4. **Headless Mode**: Run Claude non-interactively from scripts and CI/CD.
-   - How to use: \`claude -p "fix lint errors" --allowedTools "Edit,Read,Bash"\`
-   - Good for: CI/CD integration, batch code fixes, automated reviews
-
-5. **Task Agents**: Claude spawns focused sub-agents for complex exploration or parallel work.
-   - How to use: Claude auto-invokes when helpful, or ask "use an agent to explore X"
-   - Good for: codebase exploration, understanding complex systems
-
-RESPOND WITH ONLY A VALID JSON OBJECT:
-{
-  "claude_md_additions": [
-    {"addition": "A specific line or block to add to CLAUDE.md based on workflow patterns. E.g., 'Always run tests after modifying auth-related files'", "why": "1 sentence explaining why this would help based on actual sessions", "prompt_scaffold": "Instructions for where to add this in CLAUDE.md. E.g., 'Add under ## Testing section'"}
-  ],
-  "features_to_try": [
-    {"feature": "Feature name from CC FEATURES REFERENCE above", "one_liner": "What it does", "why_for_you": "Why this would help YOU based on your sessions", "example_code": "Actual command or config to copy"}
-  ],
-  "usage_patterns": [
-    {"title": "Short title", "suggestion": "1-2 sentence summary", "detail": "3-4 sentences explaining how this applies to YOUR work", "copyable_prompt": "A specific prompt to copy and try"}
-  ]
-}
-
-IMPORTANT for claude_md_additions: PRIORITIZE instructions that appear MULTIPLE TIMES in the user data. If user told Claude the same thing in 2+ sessions (e.g., 'always run tests', 'use TypeScript'), that's a PRIME candidate - they shouldn't have to repeat themselves.
-
+        prompt: `Analyze this Context Code usage data and suggest improvements.
+
+## CC FEATURES REFERENCE (pick from these for features_to_try):
+1. **MCP Servers**: Connect Claude to external tools, databases, and APIs via Model Context Protocol.
+   - How to use: Run \`claude mcp add <server-name> -- <command>\`
+   - Good for: database queries, Slack integration, GitHub issue lookup, connecting to internal APIs
+
+2. **Custom Skills**: Reusable prompts you define as markdown files that run with a single /command.
+   - How to use: Create \`.claude/skills/commit/SKILL.md\` with instructions. Then type \`/commit\` to run it.
+   - Good for: repetitive workflows - /commit, /review, /test, /deploy, /pr, or complex multi-step workflows
+
+3. **Hooks**: Shell commands that auto-run at specific lifecycle events.
+   - How to use: Add to \`.claude/settings.json\` under "hooks" key.
+   - Good for: auto-formatting code, running type checks, enforcing conventions
+
+4. **Headless Mode**: Run Claude non-interactively from scripts and CI/CD.
+   - How to use: \`claude -p "fix lint errors" --allowedTools "Edit,Read,Bash"\`
+   - Good for: CI/CD integration, batch code fixes, automated reviews
+
+5. **Task Agents**: Claude spawns focused sub-agents for complex exploration or parallel work.
+   - How to use: Claude auto-invokes when helpful, or ask "use an agent to explore X"
+   - Good for: codebase exploration, understanding complex systems
+
+RESPOND WITH ONLY A VALID JSON OBJECT:
+{
+  "claude_md_additions": [
+    {"addition": "A specific line or block to add to CLAUDE.md based on workflow patterns. E.g., 'Always run tests after modifying auth-related files'", "why": "1 sentence explaining why this would help based on actual sessions", "prompt_scaffold": "Instructions for where to add this in CLAUDE.md. E.g., 'Add under ## Testing section'"}
+  ],
+  "features_to_try": [
+    {"feature": "Feature name from CC FEATURES REFERENCE above", "one_liner": "What it does", "why_for_you": "Why this would help YOU based on your sessions", "example_code": "Actual command or config to copy"}
+  ],
+  "usage_patterns": [
+    {"title": "Short title", "suggestion": "1-2 sentence summary", "detail": "3-4 sentences explaining how this applies to YOUR work", "copyable_prompt": "A specific prompt to copy and try"}
+  ]
+}
+
+IMPORTANT for claude_md_additions: PRIORITIZE instructions that appear MULTIPLE TIMES in the user data. If user told Claude the same thing in 2+ sessions (e.g., 'always run tests', 'use TypeScript'), that's a PRIME candidate - they shouldn't have to repeat themselves.
+
 IMPORTANT for features_to_try: Pick 2-3 from the CC FEATURES REFERENCE above. Include 2-3 items for each category.`,
         maxTokens: 8192,
     },
     {
         name: 'on_the_horizon',
-        prompt: `Analyze this Context Code usage data and identify future opportunities.
-
-RESPOND WITH ONLY A VALID JSON OBJECT:
-{
-  "intro": "1 sentence about evolving AI-assisted development",
-  "opportunities": [
-    {"title": "Short title (4-8 words)", "whats_possible": "2-3 ambitious sentences about autonomous workflows", "how_to_try": "1-2 sentences mentioning relevant tooling", "copyable_prompt": "Detailed prompt to try"}
-  ]
-}
-
+        prompt: `Analyze this Context Code usage data and identify future opportunities.
+
+RESPOND WITH ONLY A VALID JSON OBJECT:
+{
+  "intro": "1 sentence about evolving AI-assisted development",
+  "opportunities": [
+    {"title": "Short title (4-8 words)", "whats_possible": "2-3 ambitious sentences about autonomous workflows", "how_to_try": "1-2 sentences mentioning relevant tooling", "copyable_prompt": "Detailed prompt to try"}
+  ]
+}
+
 Include 3 opportunities. Think BIG - autonomous workflows, parallel agents, iterating against tests.`,
         maxTokens: 8192,
     },
@@ -1137,29 +1137,29 @@ Include 3 opportunities. Think BIG - autonomous workflows, parallel agents, iter
         ? [
             {
                 name: 'cc_team_improvements',
-                prompt: `Analyze this Context Code usage data and suggest product improvements for the CC team.
-
-RESPOND WITH ONLY A VALID JSON OBJECT:
-{
-  "improvements": [
-    {"title": "Product/tooling improvement", "detail": "3-4 sentences describing the improvement", "evidence": "3-4 sentences with specific session examples"}
-  ]
-}
-
+                prompt: `Analyze this Context Code usage data and suggest product improvements for the CC team.
+
+RESPOND WITH ONLY A VALID JSON OBJECT:
+{
+  "improvements": [
+    {"title": "Product/tooling improvement", "detail": "3-4 sentences describing the improvement", "evidence": "3-4 sentences with specific session examples"}
+  ]
+}
+
 Include 2-3 improvements based on friction patterns observed.`,
                 maxTokens: 8192,
             },
             {
                 name: 'model_behavior_improvements',
-                prompt: `Analyze this Context Code usage data and suggest model behavior improvements.
-
-RESPOND WITH ONLY A VALID JSON OBJECT:
-{
-  "improvements": [
-    {"title": "Model behavior change", "detail": "3-4 sentences describing what the model should do differently", "evidence": "3-4 sentences with specific examples"}
-  ]
-}
-
+                prompt: `Analyze this Context Code usage data and suggest model behavior improvements.
+
+RESPOND WITH ONLY A VALID JSON OBJECT:
+{
+  "improvements": [
+    {"title": "Model behavior change", "detail": "3-4 sentences describing what the model should do differently", "evidence": "3-4 sentences with specific examples"}
+  ]
+}
+
 Include 2-3 improvements based on friction patterns observed.`,
                 maxTokens: 8192,
             },
@@ -1167,14 +1167,14 @@ Include 2-3 improvements based on friction patterns observed.`,
         : []),
     {
         name: 'fun_ending',
-        prompt: `Analyze this Context Code usage data and find a memorable moment.
-
-RESPOND WITH ONLY A VALID JSON OBJECT:
-{
-  "headline": "A memorable QUALITATIVE moment from the transcripts - not a statistic. Something human, funny, or surprising.",
-  "detail": "Brief context about when/where this happened"
-}
-
+        prompt: `Analyze this Context Code usage data and find a memorable moment.
+
+RESPOND WITH ONLY A VALID JSON OBJECT:
+{
+  "headline": "A memorable QUALITATIVE moment from the transcripts - not a statistic. Something human, funny, or surprising.",
+  "detail": "Brief context about when/where this happened"
+}
+
 Find something genuinely interesting or amusing from the session summaries.`,
         maxTokens: 8192,
     },
@@ -1287,47 +1287,47 @@ async function generateParallelInsights(data, facets) {
         ?.map(o => `- ${o.title}: ${o.whats_possible}`)
         .join('\n') || '';
     // Now generate "At a Glance" with access to other sections' outputs
-    const atAGlancePrompt = `You're writing an "At a Glance" summary for a Context Code usage insights report for Context Code users. The goal is to help them understand their usage and improve how they can use Claude better, especially as models improve.
-
-Use this 4-part structure:
-
-1. **What's working** - What is the user's unique style of interacting with Claude and what are some impactful things they've done? You can include one or two details, but keep it high level since things might not be fresh in the user's memory. Don't be fluffy or overly complimentary. Also, don't focus on the tool calls they use.
-
-2. **What's hindering you** - Split into (a) Claude's fault (misunderstandings, wrong approaches, bugs) and (b) user-side friction (not providing enough context, environment issues -- ideally more general than just one project). Be honest but constructive.
-
-3. **Quick wins to try** - Specific Context Code features they could try from the examples below, or a workflow technique if you think it's really compelling. (Avoid stuff like "Ask Claude to confirm before taking actions" or "Type out more context up front" which are less compelling.)
-
-4. **Ambitious workflows for better models** - As we move to much more capable models over the next 3-6 months, what should they prepare for? What workflows that seem impossible now will become possible? Draw from the appropriate section below.
-
-Keep each section to 2-3 not-too-long sentences. Don't overwhelm the user. Don't mention specific numerical stats or underlined_categories from the session data below. Use a coaching tone.
-
-RESPOND WITH ONLY A VALID JSON OBJECT:
-{
-  "whats_working": "(refer to instructions above)",
-  "whats_hindering": "(refer to instructions above)",
-  "quick_wins": "(refer to instructions above)",
-  "ambitious_workflows": "(refer to instructions above)"
-}
-
-SESSION DATA:
-${fullContext}
-
-## Project Areas (what user works on)
-${projectAreasText}
-
-## Big Wins (impressive accomplishments)
-${bigWinsText}
-
-## Friction Categories (where things go wrong)
-${frictionText}
-
-## Features to Try
-${featuresText}
-
-## Usage Patterns to Adopt
-${patternsText}
-
-## On the Horizon (ambitious workflows for better models)
+    const atAGlancePrompt = `You're writing an "At a Glance" summary for a Context Code usage insights report for Context Code users. The goal is to help them understand their usage and improve how they can use Claude better, especially as models improve.
+
+Use this 4-part structure:
+
+1. **What's working** - What is the user's unique style of interacting with Claude and what are some impactful things they've done? You can include one or two details, but keep it high level since things might not be fresh in the user's memory. Don't be fluffy or overly complimentary. Also, don't focus on the tool calls they use.
+
+2. **What's hindering you** - Split into (a) Claude's fault (misunderstandings, wrong approaches, bugs) and (b) user-side friction (not providing enough context, environment issues -- ideally more general than just one project). Be honest but constructive.
+
+3. **Quick wins to try** - Specific Context Code features they could try from the examples below, or a workflow technique if you think it's really compelling. (Avoid stuff like "Ask Claude to confirm before taking actions" or "Type out more context up front" which are less compelling.)
+
+4. **Ambitious workflows for better models** - As we move to much more capable models over the next 3-6 months, what should they prepare for? What workflows that seem impossible now will become possible? Draw from the appropriate section below.
+
+Keep each section to 2-3 not-too-long sentences. Don't overwhelm the user. Don't mention specific numerical stats or underlined_categories from the session data below. Use a coaching tone.
+
+RESPOND WITH ONLY A VALID JSON OBJECT:
+{
+  "whats_working": "(refer to instructions above)",
+  "whats_hindering": "(refer to instructions above)",
+  "quick_wins": "(refer to instructions above)",
+  "ambitious_workflows": "(refer to instructions above)"
+}
+
+SESSION DATA:
+${fullContext}
+
+## Project Areas (what user works on)
+${projectAreasText}
+
+## Big Wins (impressive accomplishments)
+${bigWinsText}
+
+## Friction Categories (where things go wrong)
+${frictionText}
+
+## Features to Try
+${featuresText}
+
+## Usage Patterns to Adopt
+${patternsText}
+
+## On the Horizon (ambitious workflows for better models)
 ${horizonText}`;
     const atAGlanceSection = {
         name: 'at_a_glance',
@@ -1384,10 +1384,10 @@ function generateBarChart(data, color, maxItems = 6, fixedOrder) {
         // Use LABEL_MAP if available, otherwise clean up underscores and title case
         const cleanLabel = LABEL_MAP[label] ||
             label.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
-        return `<div class="bar-row">
-        <div class="bar-label">${escapeHtml(cleanLabel)}</div>
-        <div class="bar-track"><div class="bar-fill" style="width:${pct}%;background:${color}"></div></div>
-        <div class="bar-value">${count}</div>
+        return `<div class="bar-row">
+        <div class="bar-label">${escapeHtml(cleanLabel)}</div>
+        <div class="bar-track"><div class="bar-fill" style="width:${pct}%;background:${color}"></div></div>
+        <div class="bar-value">${count}</div>
       </div>`;
     })
         .join('\n');
@@ -1427,10 +1427,10 @@ function generateResponseTimeHistogram(times) {
     return Object.entries(buckets)
         .map(([label, count]) => {
         const pct = (count / maxVal) * 100;
-        return `<div class="bar-row">
-        <div class="bar-label">${label}</div>
-        <div class="bar-track"><div class="bar-fill" style="width:${pct}%;background:#6366f1"></div></div>
-        <div class="bar-value">${count}</div>
+        return `<div class="bar-row">
+        <div class="bar-label">${label}</div>
+        <div class="bar-track"><div class="bar-fill" style="width:${pct}%;background:#6366f1"></div></div>
+        <div class="bar-value">${count}</div>
       </div>`;
     })
         .join('\n');
@@ -1455,11 +1455,11 @@ function generateTimeOfDayChart(messageHours) {
     }));
     const maxVal = Math.max(...periodCounts.map(p => p.count)) || 1;
     const barsHtml = periodCounts
-        .map(p => `
-      <div class="bar-row">
-        <div class="bar-label">${p.label}</div>
-        <div class="bar-track"><div class="bar-fill" style="width:${(p.count / maxVal) * 100}%;background:#8b5cf6"></div></div>
-        <div class="bar-value">${p.count}</div>
+        .map(p => `
+      <div class="bar-row">
+        <div class="bar-label">${p.label}</div>
+        <div class="bar-track"><div class="bar-fill" style="width:${(p.count / maxVal) * 100}%;background:#8b5cf6"></div></div>
+        <div class="bar-value">${p.count}</div>
       </div>`)
         .join('\n');
     return `<div id="hour-histogram">${barsHtml}</div>`;
@@ -1489,191 +1489,191 @@ function generateHtmlReport(data, insights) {
     // Build At a Glance section (new 4-part format with links to sections)
     const atAGlance = insights.at_a_glance;
     const atAGlanceHtml = atAGlance
-        ? `
-    <div class="at-a-glance">
-      <div class="glance-title">At a Glance</div>
-      <div class="glance-sections">
-        ${atAGlance.whats_working ? `<div class="glance-section"><strong>What's working:</strong> ${escapeHtmlWithBold(atAGlance.whats_working)} <a href="#section-wins" class="see-more">Impressive Things You Did →</a></div>` : ''}
-        ${atAGlance.whats_hindering ? `<div class="glance-section"><strong>What's hindering you:</strong> ${escapeHtmlWithBold(atAGlance.whats_hindering)} <a href="#section-friction" class="see-more">Where Things Go Wrong →</a></div>` : ''}
-        ${atAGlance.quick_wins ? `<div class="glance-section"><strong>Quick wins to try:</strong> ${escapeHtmlWithBold(atAGlance.quick_wins)} <a href="#section-features" class="see-more">Features to Try →</a></div>` : ''}
-        ${atAGlance.ambitious_workflows ? `<div class="glance-section"><strong>Ambitious workflows:</strong> ${escapeHtmlWithBold(atAGlance.ambitious_workflows)} <a href="#section-horizon" class="see-more">On the Horizon →</a></div>` : ''}
-      </div>
-    </div>
+        ? `
+    <div class="at-a-glance">
+      <div class="glance-title">At a Glance</div>
+      <div class="glance-sections">
+        ${atAGlance.whats_working ? `<div class="glance-section"><strong>What's working:</strong> ${escapeHtmlWithBold(atAGlance.whats_working)} <a href="#section-wins" class="see-more">Impressive Things You Did →</a></div>` : ''}
+        ${atAGlance.whats_hindering ? `<div class="glance-section"><strong>What's hindering you:</strong> ${escapeHtmlWithBold(atAGlance.whats_hindering)} <a href="#section-friction" class="see-more">Where Things Go Wrong →</a></div>` : ''}
+        ${atAGlance.quick_wins ? `<div class="glance-section"><strong>Quick wins to try:</strong> ${escapeHtmlWithBold(atAGlance.quick_wins)} <a href="#section-features" class="see-more">Features to Try →</a></div>` : ''}
+        ${atAGlance.ambitious_workflows ? `<div class="glance-section"><strong>Ambitious workflows:</strong> ${escapeHtmlWithBold(atAGlance.ambitious_workflows)} <a href="#section-horizon" class="see-more">On the Horizon →</a></div>` : ''}
+      </div>
+    </div>
     `
         : '';
     // Build project areas section
     const projectAreas = insights.project_areas?.areas || [];
     const projectAreasHtml = projectAreas.length > 0
-        ? `
-    <h2 id="section-work">What You Work On</h2>
-    <div class="project-areas">
+        ? `
+    <h2 id="section-work">What You Work On</h2>
+    <div class="project-areas">
       ${projectAreas
-            .map(area => `
-        <div class="project-area">
-          <div class="area-header">
-            <span class="area-name">${escapeHtml(area.name)}</span>
-            <span class="area-count">~${area.session_count} sessions</span>
-          </div>
-          <div class="area-desc">${escapeHtml(area.description)}</div>
-        </div>
+            .map(area => `
+        <div class="project-area">
+          <div class="area-header">
+            <span class="area-name">${escapeHtml(area.name)}</span>
+            <span class="area-count">~${area.session_count} sessions</span>
+          </div>
+          <div class="area-desc">${escapeHtml(area.description)}</div>
+        </div>
       `)
-            .join('')}
-    </div>
+            .join('')}
+    </div>
     `
         : '';
     // Build interaction style section
     const interactionStyle = insights.interaction_style;
     const interactionHtml = interactionStyle?.narrative
-        ? `
-    <h2 id="section-usage">How You Use Context Code</h2>
-    <div class="narrative">
-      ${markdownToHtml(interactionStyle.narrative)}
-      ${interactionStyle.key_pattern ? `<div class="key-insight"><strong>Key pattern:</strong> ${escapeHtml(interactionStyle.key_pattern)}</div>` : ''}
-    </div>
+        ? `
+    <h2 id="section-usage">How You Use Context Code</h2>
+    <div class="narrative">
+      ${markdownToHtml(interactionStyle.narrative)}
+      ${interactionStyle.key_pattern ? `<div class="key-insight"><strong>Key pattern:</strong> ${escapeHtml(interactionStyle.key_pattern)}</div>` : ''}
+    </div>
     `
         : '';
     // Build what works section
     const whatWorks = insights.what_works;
     const whatWorksHtml = whatWorks?.impressive_workflows && whatWorks.impressive_workflows.length > 0
-        ? `
-    <h2 id="section-wins">Impressive Things You Did</h2>
-    ${whatWorks.intro ? `<p class="section-intro">${escapeHtml(whatWorks.intro)}</p>` : ''}
-    <div class="big-wins">
+        ? `
+    <h2 id="section-wins">Impressive Things You Did</h2>
+    ${whatWorks.intro ? `<p class="section-intro">${escapeHtml(whatWorks.intro)}</p>` : ''}
+    <div class="big-wins">
       ${whatWorks.impressive_workflows
-            .map(wf => `
-        <div class="big-win">
-          <div class="big-win-title">${escapeHtml(wf.title || '')}</div>
-          <div class="big-win-desc">${escapeHtml(wf.description || '')}</div>
-        </div>
+            .map(wf => `
+        <div class="big-win">
+          <div class="big-win-title">${escapeHtml(wf.title || '')}</div>
+          <div class="big-win-desc">${escapeHtml(wf.description || '')}</div>
+        </div>
       `)
-            .join('')}
-    </div>
+            .join('')}
+    </div>
     `
         : '';
     // Build friction section
     const frictionAnalysis = insights.friction_analysis;
     const frictionHtml = frictionAnalysis?.categories && frictionAnalysis.categories.length > 0
-        ? `
-    <h2 id="section-friction">Where Things Go Wrong</h2>
-    ${frictionAnalysis.intro ? `<p class="section-intro">${escapeHtml(frictionAnalysis.intro)}</p>` : ''}
-    <div class="friction-categories">
+        ? `
+    <h2 id="section-friction">Where Things Go Wrong</h2>
+    ${frictionAnalysis.intro ? `<p class="section-intro">${escapeHtml(frictionAnalysis.intro)}</p>` : ''}
+    <div class="friction-categories">
       ${frictionAnalysis.categories
-            .map(cat => `
-        <div class="friction-category">
-          <div class="friction-title">${escapeHtml(cat.category || '')}</div>
-          <div class="friction-desc">${escapeHtml(cat.description || '')}</div>
-          ${cat.examples ? `<ul class="friction-examples">${cat.examples.map(ex => `<li>${escapeHtml(ex)}</li>`).join('')}</ul>` : ''}
-        </div>
+            .map(cat => `
+        <div class="friction-category">
+          <div class="friction-title">${escapeHtml(cat.category || '')}</div>
+          <div class="friction-desc">${escapeHtml(cat.description || '')}</div>
+          ${cat.examples ? `<ul class="friction-examples">${cat.examples.map(ex => `<li>${escapeHtml(ex)}</li>`).join('')}</ul>` : ''}
+        </div>
       `)
-            .join('')}
-    </div>
+            .join('')}
+    </div>
     `
         : '';
     // Build suggestions section
     const suggestions = insights.suggestions;
     const suggestionsHtml = suggestions
-        ? `
+        ? `
     ${suggestions.claude_md_additions &&
             suggestions.claude_md_additions.length > 0
-            ? `
-    <h2 id="section-features">Existing CC Features to Try</h2>
-    <div class="claude-md-section">
-      <h3>Suggested CLAUDE.md Additions</h3>
-      <p style="font-size: 12px; color: #64748b; margin-bottom: 12px;">Just copy this into Context Code to add it to your CLAUDE.md.</p>
-      <div class="claude-md-actions">
-        <button class="copy-all-btn" onclick="copyAllCheckedClaudeMd()">Copy All Checked</button>
-      </div>
+            ? `
+    <h2 id="section-features">Existing CC Features to Try</h2>
+    <div class="claude-md-section">
+      <h3>Suggested CLAUDE.md Additions</h3>
+      <p style="font-size: 12px; color: #64748b; margin-bottom: 12px;">Just copy this into Context Code to add it to your CLAUDE.md.</p>
+      <div class="claude-md-actions">
+        <button class="copy-all-btn" onclick="copyAllCheckedClaudeMd()">Copy All Checked</button>
+      </div>
       ${suggestions.claude_md_additions
-                .map((add, i) => `
-        <div class="claude-md-item">
-          <input type="checkbox" id="cmd-${i}" class="cmd-checkbox" checked data-text="${escapeHtml(add.prompt_scaffold || add.where || 'Add to CLAUDE.md')}\\n\\n${escapeHtml(add.addition)}">
-          <label for="cmd-${i}">
-            <code class="cmd-code">${escapeHtml(add.addition)}</code>
-            <button class="copy-btn" onclick="copyCmdItem(${i})">Copy</button>
-          </label>
-          <div class="cmd-why">${escapeHtml(add.why)}</div>
-        </div>
+                .map((add, i) => `
+        <div class="claude-md-item">
+          <input type="checkbox" id="cmd-${i}" class="cmd-checkbox" checked data-text="${escapeHtml(add.prompt_scaffold || add.where || 'Add to CLAUDE.md')}\\n\\n${escapeHtml(add.addition)}">
+          <label for="cmd-${i}">
+            <code class="cmd-code">${escapeHtml(add.addition)}</code>
+            <button class="copy-btn" onclick="copyCmdItem(${i})">Copy</button>
+          </label>
+          <div class="cmd-why">${escapeHtml(add.why)}</div>
+        </div>
       `)
-                .join('')}
-    </div>
+                .join('')}
+    </div>
     `
-            : ''}
+            : ''}
     ${suggestions.features_to_try && suggestions.features_to_try.length > 0
-            ? `
-    <p style="font-size: 13px; color: #64748b; margin-bottom: 12px;">Just copy this into Context Code and it'll set it up for you.</p>
-    <div class="features-section">
+            ? `
+    <p style="font-size: 13px; color: #64748b; margin-bottom: 12px;">Just copy this into Context Code and it'll set it up for you.</p>
+    <div class="features-section">
       ${suggestions.features_to_try
-                .map(feat => `
-        <div class="feature-card">
-          <div class="feature-title">${escapeHtml(feat.feature || '')}</div>
-          <div class="feature-oneliner">${escapeHtml(feat.one_liner || '')}</div>
-          <div class="feature-why"><strong>Why for you:</strong> ${escapeHtml(feat.why_for_you || '')}</div>
+                .map(feat => `
+        <div class="feature-card">
+          <div class="feature-title">${escapeHtml(feat.feature || '')}</div>
+          <div class="feature-oneliner">${escapeHtml(feat.one_liner || '')}</div>
+          <div class="feature-why"><strong>Why for you:</strong> ${escapeHtml(feat.why_for_you || '')}</div>
           ${feat.example_code
-                ? `
-          <div class="feature-examples">
-            <div class="feature-example">
-              <div class="example-code-row">
-                <code class="example-code">${escapeHtml(feat.example_code)}</code>
-                <button class="copy-btn" onclick="copyText(this)">Copy</button>
-              </div>
-            </div>
-          </div>
+                ? `
+          <div class="feature-examples">
+            <div class="feature-example">
+              <div class="example-code-row">
+                <code class="example-code">${escapeHtml(feat.example_code)}</code>
+                <button class="copy-btn" onclick="copyText(this)">Copy</button>
+              </div>
+            </div>
+          </div>
           `
-                : ''}
-        </div>
+                : ''}
+        </div>
       `)
-                .join('')}
-    </div>
+                .join('')}
+    </div>
     `
-            : ''}
+            : ''}
     ${suggestions.usage_patterns && suggestions.usage_patterns.length > 0
-            ? `
-    <h2 id="section-patterns">New Ways to Use Context Code</h2>
-    <p style="font-size: 13px; color: #64748b; margin-bottom: 12px;">Just copy this into Context Code and it'll walk you through it.</p>
-    <div class="patterns-section">
+            ? `
+    <h2 id="section-patterns">New Ways to Use Context Code</h2>
+    <p style="font-size: 13px; color: #64748b; margin-bottom: 12px;">Just copy this into Context Code and it'll walk you through it.</p>
+    <div class="patterns-section">
       ${suggestions.usage_patterns
-                .map(pat => `
-        <div class="pattern-card">
-          <div class="pattern-title">${escapeHtml(pat.title || '')}</div>
-          <div class="pattern-summary">${escapeHtml(pat.suggestion || '')}</div>
-          ${pat.detail ? `<div class="pattern-detail">${escapeHtml(pat.detail)}</div>` : ''}
+                .map(pat => `
+        <div class="pattern-card">
+          <div class="pattern-title">${escapeHtml(pat.title || '')}</div>
+          <div class="pattern-summary">${escapeHtml(pat.suggestion || '')}</div>
+          ${pat.detail ? `<div class="pattern-detail">${escapeHtml(pat.detail)}</div>` : ''}
           ${pat.copyable_prompt
-                ? `
-          <div class="copyable-prompt-section">
-            <div class="prompt-label">Paste into Context Code:</div>
-            <div class="copyable-prompt-row">
-              <code class="copyable-prompt">${escapeHtml(pat.copyable_prompt)}</code>
-              <button class="copy-btn" onclick="copyText(this)">Copy</button>
-            </div>
-          </div>
+                ? `
+          <div class="copyable-prompt-section">
+            <div class="prompt-label">Paste into Context Code:</div>
+            <div class="copyable-prompt-row">
+              <code class="copyable-prompt">${escapeHtml(pat.copyable_prompt)}</code>
+              <button class="copy-btn" onclick="copyText(this)">Copy</button>
+            </div>
+          </div>
           `
-                : ''}
-        </div>
+                : ''}
+        </div>
       `)
-                .join('')}
-    </div>
+                .join('')}
+    </div>
     `
-            : ''}
+            : ''}
     `
         : '';
     // Build On the Horizon section
     const horizonData = insights.on_the_horizon;
     const horizonHtml = horizonData?.opportunities && horizonData.opportunities.length > 0
-        ? `
-    <h2 id="section-horizon">On the Horizon</h2>
-    ${horizonData.intro ? `<p class="section-intro">${escapeHtml(horizonData.intro)}</p>` : ''}
-    <div class="horizon-section">
+        ? `
+    <h2 id="section-horizon">On the Horizon</h2>
+    ${horizonData.intro ? `<p class="section-intro">${escapeHtml(horizonData.intro)}</p>` : ''}
+    <div class="horizon-section">
       ${horizonData.opportunities
-            .map(opp => `
-        <div class="horizon-card">
-          <div class="horizon-title">${escapeHtml(opp.title || '')}</div>
-          <div class="horizon-possible">${escapeHtml(opp.whats_possible || '')}</div>
-          ${opp.how_to_try ? `<div class="horizon-tip"><strong>Getting started:</strong> ${escapeHtml(opp.how_to_try)}</div>` : ''}
-          ${opp.copyable_prompt ? `<div class="pattern-prompt"><div class="prompt-label">Paste into Context Code:</div><code>${escapeHtml(opp.copyable_prompt)}</code><button class="copy-btn" onclick="copyText(this)">Copy</button></div>` : ''}
-        </div>
+            .map(opp => `
+        <div class="horizon-card">
+          <div class="horizon-title">${escapeHtml(opp.title || '')}</div>
+          <div class="horizon-possible">${escapeHtml(opp.whats_possible || '')}</div>
+          ${opp.how_to_try ? `<div class="horizon-tip"><strong>Getting started:</strong> ${escapeHtml(opp.how_to_try)}</div>` : ''}
+          ${opp.copyable_prompt ? `<div class="pattern-prompt"><div class="prompt-label">Paste into Context Code:</div><code>${escapeHtml(opp.copyable_prompt)}</code><button class="copy-btn" onclick="copyText(this)">Copy</button></div>` : ''}
+        </div>
       `)
-            .join('')}
-    </div>
+            .join('')}
+    </div>
     `
         : '';
     // Build Team Feedback section (collapsible, ant-only)
@@ -1684,435 +1684,435 @@ function generateHtmlReport(data, insights) {
         ? insights.model_behavior_improvements?.improvements || []
         : [];
     const teamFeedbackHtml = ccImprovements.length > 0 || modelImprovements.length > 0
-        ? `
-    <h2 id="section-feedback" class="feedback-header">Closing the Loop: Feedback for Other Teams</h2>
-    <p class="feedback-intro">Suggestions for the CC product and model teams based on your usage patterns. Click to expand.</p>
+        ? `
+    <h2 id="section-feedback" class="feedback-header">Closing the Loop: Feedback for Other Teams</h2>
+    <p class="feedback-intro">Suggestions for the CC product and model teams based on your usage patterns. Click to expand.</p>
     ${ccImprovements.length > 0
-            ? `
-    <div class="collapsible-section">
-      <div class="collapsible-header" onclick="toggleCollapsible(this)">
-        <span class="collapsible-arrow">▶</span>
-        <h3>Product Improvements for CC Team</h3>
-      </div>
-      <div class="collapsible-content">
-        <div class="suggestions-section">
+            ? `
+    <div class="collapsible-section">
+      <div class="collapsible-header" onclick="toggleCollapsible(this)">
+        <span class="collapsible-arrow">▶</span>
+        <h3>Product Improvements for CC Team</h3>
+      </div>
+      <div class="collapsible-content">
+        <div class="suggestions-section">
           ${ccImprovements
-                .map(imp => `
-            <div class="feedback-card team-card">
-              <div class="feedback-title">${escapeHtml(imp.title || '')}</div>
-              <div class="feedback-detail">${escapeHtml(imp.detail || '')}</div>
-              ${imp.evidence ? `<div class="feedback-evidence"><em>Evidence:</em> ${escapeHtml(imp.evidence)}</div>` : ''}
-            </div>
+                .map(imp => `
+            <div class="feedback-card team-card">
+              <div class="feedback-title">${escapeHtml(imp.title || '')}</div>
+              <div class="feedback-detail">${escapeHtml(imp.detail || '')}</div>
+              ${imp.evidence ? `<div class="feedback-evidence"><em>Evidence:</em> ${escapeHtml(imp.evidence)}</div>` : ''}
+            </div>
           `)
-                .join('')}
-        </div>
-      </div>
-    </div>
+                .join('')}
+        </div>
+      </div>
+    </div>
     `
-            : ''}
+            : ''}
     ${modelImprovements.length > 0
-            ? `
-    <div class="collapsible-section">
-      <div class="collapsible-header" onclick="toggleCollapsible(this)">
-        <span class="collapsible-arrow">▶</span>
-        <h3>Model Behavior Improvements</h3>
-      </div>
-      <div class="collapsible-content">
-        <div class="suggestions-section">
+            ? `
+    <div class="collapsible-section">
+      <div class="collapsible-header" onclick="toggleCollapsible(this)">
+        <span class="collapsible-arrow">▶</span>
+        <h3>Model Behavior Improvements</h3>
+      </div>
+      <div class="collapsible-content">
+        <div class="suggestions-section">
           ${modelImprovements
-                .map(imp => `
-            <div class="feedback-card model-card">
-              <div class="feedback-title">${escapeHtml(imp.title || '')}</div>
-              <div class="feedback-detail">${escapeHtml(imp.detail || '')}</div>
-              ${imp.evidence ? `<div class="feedback-evidence"><em>Evidence:</em> ${escapeHtml(imp.evidence)}</div>` : ''}
-            </div>
+                .map(imp => `
+            <div class="feedback-card model-card">
+              <div class="feedback-title">${escapeHtml(imp.title || '')}</div>
+              <div class="feedback-detail">${escapeHtml(imp.detail || '')}</div>
+              ${imp.evidence ? `<div class="feedback-evidence"><em>Evidence:</em> ${escapeHtml(imp.evidence)}</div>` : ''}
+            </div>
           `)
-                .join('')}
-        </div>
-      </div>
-    </div>
+                .join('')}
+        </div>
+      </div>
+    </div>
     `
-            : ''}
+            : ''}
     `
         : '';
     // Build Fun Ending section
     const funEnding = insights.fun_ending;
     const funEndingHtml = funEnding?.headline
-        ? `
-    <div class="fun-ending">
-      <div class="fun-headline">"${escapeHtml(funEnding.headline)}"</div>
-      ${funEnding.detail ? `<div class="fun-detail">${escapeHtml(funEnding.detail)}</div>` : ''}
-    </div>
+        ? `
+    <div class="fun-ending">
+      <div class="fun-headline">"${escapeHtml(funEnding.headline)}"</div>
+      ${funEnding.detail ? `<div class="fun-detail">${escapeHtml(funEnding.detail)}</div>` : ''}
+    </div>
     `
         : '';
-    const css = `
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: #f8fafc; color: #334155; line-height: 1.65; padding: 48px 24px; }
-    .container { max-width: 800px; margin: 0 auto; }
-    h1 { font-size: 32px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
-    h2 { font-size: 20px; font-weight: 600; color: #0f172a; margin-top: 48px; margin-bottom: 16px; }
-    .subtitle { color: #64748b; font-size: 15px; margin-bottom: 32px; }
-    .nav-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 32px 0; padding: 16px; background: white; border-radius: 8px; border: 1px solid #e2e8f0; }
-    .nav-toc a { font-size: 12px; color: #64748b; text-decoration: none; padding: 6px 12px; border-radius: 6px; background: #f1f5f9; transition: all 0.15s; }
-    .nav-toc a:hover { background: #e2e8f0; color: #334155; }
-    .stats-row { display: flex; gap: 24px; margin-bottom: 40px; padding: 20px 0; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; }
-    .stat { text-align: center; }
-    .stat-value { font-size: 24px; font-weight: 700; color: #0f172a; }
-    .stat-label { font-size: 11px; color: #64748b; text-transform: uppercase; }
-    .at-a-glance { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 1px solid #f59e0b; border-radius: 12px; padding: 20px 24px; margin-bottom: 32px; }
-    .glance-title { font-size: 16px; font-weight: 700; color: #92400e; margin-bottom: 16px; }
-    .glance-sections { display: flex; flex-direction: column; gap: 12px; }
-    .glance-section { font-size: 14px; color: #78350f; line-height: 1.6; }
-    .glance-section strong { color: #92400e; }
-    .see-more { color: #b45309; text-decoration: none; font-size: 13px; white-space: nowrap; }
-    .see-more:hover { text-decoration: underline; }
-    .project-areas { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
-    .project-area { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; }
-    .area-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
-    .area-name { font-weight: 600; font-size: 15px; color: #0f172a; }
-    .area-count { font-size: 12px; color: #64748b; background: #f1f5f9; padding: 2px 8px; border-radius: 4px; }
-    .area-desc { font-size: 14px; color: #475569; line-height: 1.5; }
-    .narrative { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin-bottom: 24px; }
-    .narrative p { margin-bottom: 12px; font-size: 14px; color: #475569; line-height: 1.7; }
-    .key-insight { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px 16px; margin-top: 12px; font-size: 14px; color: #166534; }
-    .section-intro { font-size: 14px; color: #64748b; margin-bottom: 16px; }
-    .big-wins { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
-    .big-win { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 16px; }
-    .big-win-title { font-weight: 600; font-size: 15px; color: #166534; margin-bottom: 8px; }
-    .big-win-desc { font-size: 14px; color: #15803d; line-height: 1.5; }
-    .friction-categories { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
-    .friction-category { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px; padding: 16px; }
-    .friction-title { font-weight: 600; font-size: 15px; color: #991b1b; margin-bottom: 6px; }
-    .friction-desc { font-size: 13px; color: #7f1d1d; margin-bottom: 10px; }
-    .friction-examples { margin: 0 0 0 20px; font-size: 13px; color: #334155; }
-    .friction-examples li { margin-bottom: 4px; }
-    .claude-md-section { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 16px; margin-bottom: 20px; }
-    .claude-md-section h3 { font-size: 14px; font-weight: 600; color: #1e40af; margin: 0 0 12px 0; }
-    .claude-md-actions { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #dbeafe; }
-    .copy-all-btn { background: #2563eb; color: white; border: none; border-radius: 4px; padding: 6px 12px; font-size: 12px; cursor: pointer; font-weight: 500; transition: all 0.2s; }
-    .copy-all-btn:hover { background: #1d4ed8; }
-    .copy-all-btn.copied { background: #16a34a; }
-    .claude-md-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 10px 0; border-bottom: 1px solid #dbeafe; }
-    .claude-md-item:last-child { border-bottom: none; }
-    .cmd-checkbox { margin-top: 2px; }
-    .cmd-code { background: white; padding: 8px 12px; border-radius: 4px; font-size: 12px; color: #1e40af; border: 1px solid #bfdbfe; font-family: monospace; display: block; white-space: pre-wrap; word-break: break-word; flex: 1; }
-    .cmd-why { font-size: 12px; color: #64748b; width: 100%; padding-left: 24px; margin-top: 4px; }
-    .features-section, .patterns-section { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
-    .feature-card { background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px; padding: 16px; }
-    .pattern-card { background: #f0f9ff; border: 1px solid #7dd3fc; border-radius: 8px; padding: 16px; }
-    .feature-title, .pattern-title { font-weight: 600; font-size: 15px; color: #0f172a; margin-bottom: 6px; }
-    .feature-oneliner { font-size: 14px; color: #475569; margin-bottom: 8px; }
-    .pattern-summary { font-size: 14px; color: #475569; margin-bottom: 8px; }
-    .feature-why, .pattern-detail { font-size: 13px; color: #334155; line-height: 1.5; }
-    .feature-examples { margin-top: 12px; }
-    .feature-example { padding: 8px 0; border-top: 1px solid #d1fae5; }
-    .feature-example:first-child { border-top: none; }
-    .example-desc { font-size: 13px; color: #334155; margin-bottom: 6px; }
-    .example-code-row { display: flex; align-items: flex-start; gap: 8px; }
-    .example-code { flex: 1; background: #f1f5f9; padding: 8px 12px; border-radius: 4px; font-family: monospace; font-size: 12px; color: #334155; overflow-x: auto; white-space: pre-wrap; }
-    .copyable-prompt-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
-    .copyable-prompt-row { display: flex; align-items: flex-start; gap: 8px; }
-    .copyable-prompt { flex: 1; background: #f8fafc; padding: 10px 12px; border-radius: 4px; font-family: monospace; font-size: 12px; color: #334155; border: 1px solid #e2e8f0; white-space: pre-wrap; line-height: 1.5; }
-    .feature-code { background: #f8fafc; padding: 12px; border-radius: 6px; margin-top: 12px; border: 1px solid #e2e8f0; display: flex; align-items: flex-start; gap: 8px; }
-    .feature-code code { flex: 1; font-family: monospace; font-size: 12px; color: #334155; white-space: pre-wrap; }
-    .pattern-prompt { background: #f8fafc; padding: 12px; border-radius: 6px; margin-top: 12px; border: 1px solid #e2e8f0; }
-    .pattern-prompt code { font-family: monospace; font-size: 12px; color: #334155; display: block; white-space: pre-wrap; margin-bottom: 8px; }
-    .prompt-label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #64748b; margin-bottom: 6px; }
-    .copy-btn { background: #e2e8f0; border: none; border-radius: 4px; padding: 4px 8px; font-size: 11px; cursor: pointer; color: #475569; flex-shrink: 0; }
-    .copy-btn:hover { background: #cbd5e1; }
-    .charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; }
-    .chart-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; }
-    .chart-title { font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; margin-bottom: 12px; }
-    .bar-row { display: flex; align-items: center; margin-bottom: 6px; }
-    .bar-label { width: 100px; font-size: 11px; color: #475569; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .bar-track { flex: 1; height: 6px; background: #f1f5f9; border-radius: 3px; margin: 0 8px; }
-    .bar-fill { height: 100%; border-radius: 3px; }
-    .bar-value { width: 28px; font-size: 11px; font-weight: 500; color: #64748b; text-align: right; }
-    .empty { color: #94a3b8; font-size: 13px; }
-    .horizon-section { display: flex; flex-direction: column; gap: 16px; }
-    .horizon-card { background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%); border: 1px solid #c4b5fd; border-radius: 8px; padding: 16px; }
-    .horizon-title { font-weight: 600; font-size: 15px; color: #5b21b6; margin-bottom: 8px; }
-    .horizon-possible { font-size: 14px; color: #334155; margin-bottom: 10px; line-height: 1.5; }
-    .horizon-tip { font-size: 13px; color: #6b21a8; background: rgba(255,255,255,0.6); padding: 8px 12px; border-radius: 4px; }
-    .feedback-header { margin-top: 48px; color: #64748b; font-size: 16px; }
-    .feedback-intro { font-size: 13px; color: #94a3b8; margin-bottom: 16px; }
-    .feedback-section { margin-top: 16px; }
-    .feedback-section h3 { font-size: 14px; font-weight: 600; color: #475569; margin-bottom: 12px; }
-    .feedback-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; margin-bottom: 12px; }
-    .feedback-card.team-card { background: #eff6ff; border-color: #bfdbfe; }
-    .feedback-card.model-card { background: #faf5ff; border-color: #e9d5ff; }
-    .feedback-title { font-weight: 600; font-size: 14px; color: #0f172a; margin-bottom: 6px; }
-    .feedback-detail { font-size: 13px; color: #475569; line-height: 1.5; }
-    .feedback-evidence { font-size: 12px; color: #64748b; margin-top: 8px; }
-    .fun-ending { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 1px solid #fbbf24; border-radius: 12px; padding: 24px; margin-top: 40px; text-align: center; }
-    .fun-headline { font-size: 18px; font-weight: 600; color: #78350f; margin-bottom: 8px; }
-    .fun-detail { font-size: 14px; color: #92400e; }
-    .collapsible-section { margin-top: 16px; }
-    .collapsible-header { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 12px 0; border-bottom: 1px solid #e2e8f0; }
-    .collapsible-header h3 { margin: 0; font-size: 14px; font-weight: 600; color: #475569; }
-    .collapsible-arrow { font-size: 12px; color: #94a3b8; transition: transform 0.2s; }
-    .collapsible-content { display: none; padding-top: 16px; }
-    .collapsible-content.open { display: block; }
-    .collapsible-header.open .collapsible-arrow { transform: rotate(90deg); }
-    @media (max-width: 640px) { .charts-row { grid-template-columns: 1fr; } .stats-row { justify-content: center; } }
+    const css = `
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: #f8fafc; color: #334155; line-height: 1.65; padding: 48px 24px; }
+    .container { max-width: 800px; margin: 0 auto; }
+    h1 { font-size: 32px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
+    h2 { font-size: 20px; font-weight: 600; color: #0f172a; margin-top: 48px; margin-bottom: 16px; }
+    .subtitle { color: #64748b; font-size: 15px; margin-bottom: 32px; }
+    .nav-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 32px 0; padding: 16px; background: white; border-radius: 8px; border: 1px solid #e2e8f0; }
+    .nav-toc a { font-size: 12px; color: #64748b; text-decoration: none; padding: 6px 12px; border-radius: 6px; background: #f1f5f9; transition: all 0.15s; }
+    .nav-toc a:hover { background: #e2e8f0; color: #334155; }
+    .stats-row { display: flex; gap: 24px; margin-bottom: 40px; padding: 20px 0; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; }
+    .stat { text-align: center; }
+    .stat-value { font-size: 24px; font-weight: 700; color: #0f172a; }
+    .stat-label { font-size: 11px; color: #64748b; text-transform: uppercase; }
+    .at-a-glance { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 1px solid #f59e0b; border-radius: 12px; padding: 20px 24px; margin-bottom: 32px; }
+    .glance-title { font-size: 16px; font-weight: 700; color: #92400e; margin-bottom: 16px; }
+    .glance-sections { display: flex; flex-direction: column; gap: 12px; }
+    .glance-section { font-size: 14px; color: #78350f; line-height: 1.6; }
+    .glance-section strong { color: #92400e; }
+    .see-more { color: #b45309; text-decoration: none; font-size: 13px; white-space: nowrap; }
+    .see-more:hover { text-decoration: underline; }
+    .project-areas { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
+    .project-area { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; }
+    .area-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+    .area-name { font-weight: 600; font-size: 15px; color: #0f172a; }
+    .area-count { font-size: 12px; color: #64748b; background: #f1f5f9; padding: 2px 8px; border-radius: 4px; }
+    .area-desc { font-size: 14px; color: #475569; line-height: 1.5; }
+    .narrative { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin-bottom: 24px; }
+    .narrative p { margin-bottom: 12px; font-size: 14px; color: #475569; line-height: 1.7; }
+    .key-insight { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px 16px; margin-top: 12px; font-size: 14px; color: #166534; }
+    .section-intro { font-size: 14px; color: #64748b; margin-bottom: 16px; }
+    .big-wins { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
+    .big-win { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 16px; }
+    .big-win-title { font-weight: 600; font-size: 15px; color: #166534; margin-bottom: 8px; }
+    .big-win-desc { font-size: 14px; color: #15803d; line-height: 1.5; }
+    .friction-categories { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
+    .friction-category { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px; padding: 16px; }
+    .friction-title { font-weight: 600; font-size: 15px; color: #991b1b; margin-bottom: 6px; }
+    .friction-desc { font-size: 13px; color: #7f1d1d; margin-bottom: 10px; }
+    .friction-examples { margin: 0 0 0 20px; font-size: 13px; color: #334155; }
+    .friction-examples li { margin-bottom: 4px; }
+    .claude-md-section { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 16px; margin-bottom: 20px; }
+    .claude-md-section h3 { font-size: 14px; font-weight: 600; color: #1e40af; margin: 0 0 12px 0; }
+    .claude-md-actions { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #dbeafe; }
+    .copy-all-btn { background: #2563eb; color: white; border: none; border-radius: 4px; padding: 6px 12px; font-size: 12px; cursor: pointer; font-weight: 500; transition: all 0.2s; }
+    .copy-all-btn:hover { background: #1d4ed8; }
+    .copy-all-btn.copied { background: #16a34a; }
+    .claude-md-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 10px 0; border-bottom: 1px solid #dbeafe; }
+    .claude-md-item:last-child { border-bottom: none; }
+    .cmd-checkbox { margin-top: 2px; }
+    .cmd-code { background: white; padding: 8px 12px; border-radius: 4px; font-size: 12px; color: #1e40af; border: 1px solid #bfdbfe; font-family: monospace; display: block; white-space: pre-wrap; word-break: break-word; flex: 1; }
+    .cmd-why { font-size: 12px; color: #64748b; width: 100%; padding-left: 24px; margin-top: 4px; }
+    .features-section, .patterns-section { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
+    .feature-card { background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px; padding: 16px; }
+    .pattern-card { background: #f0f9ff; border: 1px solid #7dd3fc; border-radius: 8px; padding: 16px; }
+    .feature-title, .pattern-title { font-weight: 600; font-size: 15px; color: #0f172a; margin-bottom: 6px; }
+    .feature-oneliner { font-size: 14px; color: #475569; margin-bottom: 8px; }
+    .pattern-summary { font-size: 14px; color: #475569; margin-bottom: 8px; }
+    .feature-why, .pattern-detail { font-size: 13px; color: #334155; line-height: 1.5; }
+    .feature-examples { margin-top: 12px; }
+    .feature-example { padding: 8px 0; border-top: 1px solid #d1fae5; }
+    .feature-example:first-child { border-top: none; }
+    .example-desc { font-size: 13px; color: #334155; margin-bottom: 6px; }
+    .example-code-row { display: flex; align-items: flex-start; gap: 8px; }
+    .example-code { flex: 1; background: #f1f5f9; padding: 8px 12px; border-radius: 4px; font-family: monospace; font-size: 12px; color: #334155; overflow-x: auto; white-space: pre-wrap; }
+    .copyable-prompt-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
+    .copyable-prompt-row { display: flex; align-items: flex-start; gap: 8px; }
+    .copyable-prompt { flex: 1; background: #f8fafc; padding: 10px 12px; border-radius: 4px; font-family: monospace; font-size: 12px; color: #334155; border: 1px solid #e2e8f0; white-space: pre-wrap; line-height: 1.5; }
+    .feature-code { background: #f8fafc; padding: 12px; border-radius: 6px; margin-top: 12px; border: 1px solid #e2e8f0; display: flex; align-items: flex-start; gap: 8px; }
+    .feature-code code { flex: 1; font-family: monospace; font-size: 12px; color: #334155; white-space: pre-wrap; }
+    .pattern-prompt { background: #f8fafc; padding: 12px; border-radius: 6px; margin-top: 12px; border: 1px solid #e2e8f0; }
+    .pattern-prompt code { font-family: monospace; font-size: 12px; color: #334155; display: block; white-space: pre-wrap; margin-bottom: 8px; }
+    .prompt-label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #64748b; margin-bottom: 6px; }
+    .copy-btn { background: #e2e8f0; border: none; border-radius: 4px; padding: 4px 8px; font-size: 11px; cursor: pointer; color: #475569; flex-shrink: 0; }
+    .copy-btn:hover { background: #cbd5e1; }
+    .charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; }
+    .chart-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; }
+    .chart-title { font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; margin-bottom: 12px; }
+    .bar-row { display: flex; align-items: center; margin-bottom: 6px; }
+    .bar-label { width: 100px; font-size: 11px; color: #475569; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .bar-track { flex: 1; height: 6px; background: #f1f5f9; border-radius: 3px; margin: 0 8px; }
+    .bar-fill { height: 100%; border-radius: 3px; }
+    .bar-value { width: 28px; font-size: 11px; font-weight: 500; color: #64748b; text-align: right; }
+    .empty { color: #94a3b8; font-size: 13px; }
+    .horizon-section { display: flex; flex-direction: column; gap: 16px; }
+    .horizon-card { background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%); border: 1px solid #c4b5fd; border-radius: 8px; padding: 16px; }
+    .horizon-title { font-weight: 600; font-size: 15px; color: #5b21b6; margin-bottom: 8px; }
+    .horizon-possible { font-size: 14px; color: #334155; margin-bottom: 10px; line-height: 1.5; }
+    .horizon-tip { font-size: 13px; color: #6b21a8; background: rgba(255,255,255,0.6); padding: 8px 12px; border-radius: 4px; }
+    .feedback-header { margin-top: 48px; color: #64748b; font-size: 16px; }
+    .feedback-intro { font-size: 13px; color: #94a3b8; margin-bottom: 16px; }
+    .feedback-section { margin-top: 16px; }
+    .feedback-section h3 { font-size: 14px; font-weight: 600; color: #475569; margin-bottom: 12px; }
+    .feedback-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; margin-bottom: 12px; }
+    .feedback-card.team-card { background: #eff6ff; border-color: #bfdbfe; }
+    .feedback-card.model-card { background: #faf5ff; border-color: #e9d5ff; }
+    .feedback-title { font-weight: 600; font-size: 14px; color: #0f172a; margin-bottom: 6px; }
+    .feedback-detail { font-size: 13px; color: #475569; line-height: 1.5; }
+    .feedback-evidence { font-size: 12px; color: #64748b; margin-top: 8px; }
+    .fun-ending { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 1px solid #fbbf24; border-radius: 12px; padding: 24px; margin-top: 40px; text-align: center; }
+    .fun-headline { font-size: 18px; font-weight: 600; color: #78350f; margin-bottom: 8px; }
+    .fun-detail { font-size: 14px; color: #92400e; }
+    .collapsible-section { margin-top: 16px; }
+    .collapsible-header { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 12px 0; border-bottom: 1px solid #e2e8f0; }
+    .collapsible-header h3 { margin: 0; font-size: 14px; font-weight: 600; color: #475569; }
+    .collapsible-arrow { font-size: 12px; color: #94a3b8; transition: transform 0.2s; }
+    .collapsible-content { display: none; padding-top: 16px; }
+    .collapsible-content.open { display: block; }
+    .collapsible-header.open .collapsible-arrow { transform: rotate(90deg); }
+    @media (max-width: 640px) { .charts-row { grid-template-columns: 1fr; } .stats-row { justify-content: center; } }
   `;
     const hourCountsJson = getHourCountsJson(data.message_hours);
-    const js = `
-    function toggleCollapsible(header) {
-      header.classList.toggle('open');
-      const content = header.nextElementSibling;
-      content.classList.toggle('open');
-    }
-    function copyText(btn) {
-      const code = btn.previousElementSibling;
-      navigator.clipboard.writeText(code.textContent).then(() => {
-        btn.textContent = 'Copied!';
-        setTimeout(() => { btn.textContent = 'Copy'; }, 2000);
-      });
-    }
-    function copyCmdItem(idx) {
-      const checkbox = document.getElementById('cmd-' + idx);
-      if (checkbox) {
-        const text = checkbox.dataset.text;
-        navigator.clipboard.writeText(text).then(() => {
-          const btn = checkbox.nextElementSibling.querySelector('.copy-btn');
-          if (btn) { btn.textContent = 'Copied!'; setTimeout(() => { btn.textContent = 'Copy'; }, 2000); }
-        });
-      }
-    }
-    function copyAllCheckedClaudeMd() {
-      const checkboxes = document.querySelectorAll('.cmd-checkbox:checked');
-      const texts = [];
-      checkboxes.forEach(cb => {
-        if (cb.dataset.text) { texts.push(cb.dataset.text); }
-      });
-      const combined = texts.join('\\n');
-      const btn = document.querySelector('.copy-all-btn');
-      if (btn) {
-        navigator.clipboard.writeText(combined).then(() => {
-          btn.textContent = 'Copied ' + texts.length + ' items!';
-          btn.classList.add('copied');
-          setTimeout(() => { btn.textContent = 'Copy All Checked'; btn.classList.remove('copied'); }, 2000);
-        });
-      }
-    }
-    // Timezone selector for time of day chart (data is from our own analytics, not user input)
-    const rawHourCounts = ${hourCountsJson};
-    function updateHourHistogram(offsetFromPT) {
-      const periods = [
-        { label: "Morning (6-12)", range: [6,7,8,9,10,11] },
-        { label: "Afternoon (12-18)", range: [12,13,14,15,16,17] },
-        { label: "Evening (18-24)", range: [18,19,20,21,22,23] },
-        { label: "Night (0-6)", range: [0,1,2,3,4,5] }
-      ];
-      const adjustedCounts = {};
-      for (const [hour, count] of Object.entries(rawHourCounts)) {
-        const newHour = (parseInt(hour) + offsetFromPT + 24) % 24;
-        adjustedCounts[newHour] = (adjustedCounts[newHour] || 0) + count;
-      }
-      const periodCounts = periods.map(p => ({
-        label: p.label,
-        count: p.range.reduce((sum, h) => sum + (adjustedCounts[h] || 0), 0)
-      }));
-      const maxCount = Math.max(...periodCounts.map(p => p.count)) || 1;
-      const container = document.getElementById('hour-histogram');
-      container.textContent = '';
-      periodCounts.forEach(p => {
-        const row = document.createElement('div');
-        row.className = 'bar-row';
-        const label = document.createElement('div');
-        label.className = 'bar-label';
-        label.textContent = p.label;
-        const track = document.createElement('div');
-        track.className = 'bar-track';
-        const fill = document.createElement('div');
-        fill.className = 'bar-fill';
-        fill.style.width = (p.count / maxCount) * 100 + '%';
-        fill.style.background = '#8b5cf6';
-        track.appendChild(fill);
-        const value = document.createElement('div');
-        value.className = 'bar-value';
-        value.textContent = p.count;
-        row.appendChild(label);
-        row.appendChild(track);
-        row.appendChild(value);
-        container.appendChild(row);
-      });
-    }
-    document.getElementById('timezone-select').addEventListener('change', function() {
-      const customInput = document.getElementById('custom-offset');
-      if (this.value === 'custom') {
-        customInput.style.display = 'inline-block';
-        customInput.focus();
-      } else {
-        customInput.style.display = 'none';
-        updateHourHistogram(parseInt(this.value));
-      }
-    });
-    document.getElementById('custom-offset').addEventListener('change', function() {
-      const offset = parseInt(this.value) + 8;
-      updateHourHistogram(offset);
-    });
+    const js = `
+    function toggleCollapsible(header) {
+      header.classList.toggle('open');
+      const content = header.nextElementSibling;
+      content.classList.toggle('open');
+    }
+    function copyText(btn) {
+      const code = btn.previousElementSibling;
+      navigator.clipboard.writeText(code.textContent).then(() => {
+        btn.textContent = 'Copied!';
+        setTimeout(() => { btn.textContent = 'Copy'; }, 2000);
+      });
+    }
+    function copyCmdItem(idx) {
+      const checkbox = document.getElementById('cmd-' + idx);
+      if (checkbox) {
+        const text = checkbox.dataset.text;
+        navigator.clipboard.writeText(text).then(() => {
+          const btn = checkbox.nextElementSibling.querySelector('.copy-btn');
+          if (btn) { btn.textContent = 'Copied!'; setTimeout(() => { btn.textContent = 'Copy'; }, 2000); }
+        });
+      }
+    }
+    function copyAllCheckedClaudeMd() {
+      const checkboxes = document.querySelectorAll('.cmd-checkbox:checked');
+      const texts = [];
+      checkboxes.forEach(cb => {
+        if (cb.dataset.text) { texts.push(cb.dataset.text); }
+      });
+      const combined = texts.join('\\n');
+      const btn = document.querySelector('.copy-all-btn');
+      if (btn) {
+        navigator.clipboard.writeText(combined).then(() => {
+          btn.textContent = 'Copied ' + texts.length + ' items!';
+          btn.classList.add('copied');
+          setTimeout(() => { btn.textContent = 'Copy All Checked'; btn.classList.remove('copied'); }, 2000);
+        });
+      }
+    }
+    // Timezone selector for time of day chart (data is from our own analytics, not user input)
+    const rawHourCounts = ${hourCountsJson};
+    function updateHourHistogram(offsetFromPT) {
+      const periods = [
+        { label: "Morning (6-12)", range: [6,7,8,9,10,11] },
+        { label: "Afternoon (12-18)", range: [12,13,14,15,16,17] },
+        { label: "Evening (18-24)", range: [18,19,20,21,22,23] },
+        { label: "Night (0-6)", range: [0,1,2,3,4,5] }
+      ];
+      const adjustedCounts = {};
+      for (const [hour, count] of Object.entries(rawHourCounts)) {
+        const newHour = (parseInt(hour) + offsetFromPT + 24) % 24;
+        adjustedCounts[newHour] = (adjustedCounts[newHour] || 0) + count;
+      }
+      const periodCounts = periods.map(p => ({
+        label: p.label,
+        count: p.range.reduce((sum, h) => sum + (adjustedCounts[h] || 0), 0)
+      }));
+      const maxCount = Math.max(...periodCounts.map(p => p.count)) || 1;
+      const container = document.getElementById('hour-histogram');
+      container.textContent = '';
+      periodCounts.forEach(p => {
+        const row = document.createElement('div');
+        row.className = 'bar-row';
+        const label = document.createElement('div');
+        label.className = 'bar-label';
+        label.textContent = p.label;
+        const track = document.createElement('div');
+        track.className = 'bar-track';
+        const fill = document.createElement('div');
+        fill.className = 'bar-fill';
+        fill.style.width = (p.count / maxCount) * 100 + '%';
+        fill.style.background = '#8b5cf6';
+        track.appendChild(fill);
+        const value = document.createElement('div');
+        value.className = 'bar-value';
+        value.textContent = p.count;
+        row.appendChild(label);
+        row.appendChild(track);
+        row.appendChild(value);
+        container.appendChild(row);
+      });
+    }
+    document.getElementById('timezone-select').addEventListener('change', function() {
+      const customInput = document.getElementById('custom-offset');
+      if (this.value === 'custom') {
+        customInput.style.display = 'inline-block';
+        customInput.focus();
+      } else {
+        customInput.style.display = 'none';
+        updateHourHistogram(parseInt(this.value));
+      }
+    });
+    document.getElementById('custom-offset').addEventListener('change', function() {
+      const offset = parseInt(this.value) + 8;
+      updateHourHistogram(offset);
+    });
   `;
-    return `<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Context Code Insights</title>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-  <style>${css}</style>
-</head>
-<body>
-  <div class="container">
-    <h1>Context Code Insights</h1>
-    <p class="subtitle">${data.total_messages.toLocaleString()} messages across ${data.total_sessions} sessions${data.total_sessions_scanned && data.total_sessions_scanned > data.total_sessions ? ` (${data.total_sessions_scanned.toLocaleString()} total)` : ''} | ${data.date_range.start} to ${data.date_range.end}</p>
-
-    ${atAGlanceHtml}
-
-    <nav class="nav-toc">
-      <a href="#section-work">What You Work On</a>
-      <a href="#section-usage">How You Use CC</a>
-      <a href="#section-wins">Impressive Things</a>
-      <a href="#section-friction">Where Things Go Wrong</a>
-      <a href="#section-features">Features to Try</a>
-      <a href="#section-patterns">New Usage Patterns</a>
-      <a href="#section-horizon">On the Horizon</a>
-      <a href="#section-feedback">Team Feedback</a>
-    </nav>
-
-    <div class="stats-row">
-      <div class="stat"><div class="stat-value">${data.total_messages.toLocaleString()}</div><div class="stat-label">Messages</div></div>
-      <div class="stat"><div class="stat-value">+${data.total_lines_added.toLocaleString()}/-${data.total_lines_removed.toLocaleString()}</div><div class="stat-label">Lines</div></div>
-      <div class="stat"><div class="stat-value">${data.total_files_modified}</div><div class="stat-label">Files</div></div>
-      <div class="stat"><div class="stat-value">${data.days_active}</div><div class="stat-label">Days</div></div>
-      <div class="stat"><div class="stat-value">${data.messages_per_day}</div><div class="stat-label">Msgs/Day</div></div>
-    </div>
-
-    ${projectAreasHtml}
-
-    <div class="charts-row">
-      <div class="chart-card">
-        <div class="chart-title">What You Wanted</div>
-        ${generateBarChart(data.goal_categories, '#2563eb')}
-      </div>
-      <div class="chart-card">
-        <div class="chart-title">Top Tools Used</div>
-        ${generateBarChart(data.tool_counts, '#0891b2')}
-      </div>
-    </div>
-
-    <div class="charts-row">
-      <div class="chart-card">
-        <div class="chart-title">Languages</div>
-        ${generateBarChart(data.languages, '#10b981')}
-      </div>
-      <div class="chart-card">
-        <div class="chart-title">Session Types</div>
-        ${generateBarChart(data.session_types || {}, '#8b5cf6')}
-      </div>
-    </div>
-
-    ${interactionHtml}
-
-    <!-- Response Time Distribution -->
-    <div class="chart-card" style="margin: 24px 0;">
-      <div class="chart-title">User Response Time Distribution</div>
-      ${generateResponseTimeHistogram(data.user_response_times)}
-      <div style="font-size: 12px; color: #64748b; margin-top: 8px;">
-        Median: ${data.median_response_time.toFixed(1)}s &bull; Average: ${data.avg_response_time.toFixed(1)}s
-      </div>
-    </div>
-
-    <!-- Multi-clauding Section (matching Python reference) -->
-    <div class="chart-card" style="margin: 24px 0;">
-      <div class="chart-title">Multi-Clauding (Parallel Sessions)</div>
+    return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Context Code Insights</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>${css}</style>
+</head>
+<body>
+  <div class="container">
+    <h1>Context Code Insights</h1>
+    <p class="subtitle">${data.total_messages.toLocaleString()} messages across ${data.total_sessions} sessions${data.total_sessions_scanned && data.total_sessions_scanned > data.total_sessions ? ` (${data.total_sessions_scanned.toLocaleString()} total)` : ''} | ${data.date_range.start} to ${data.date_range.end}</p>
+
+    ${atAGlanceHtml}
+
+    <nav class="nav-toc">
+      <a href="#section-work">What You Work On</a>
+      <a href="#section-usage">How You Use CC</a>
+      <a href="#section-wins">Impressive Things</a>
+      <a href="#section-friction">Where Things Go Wrong</a>
+      <a href="#section-features">Features to Try</a>
+      <a href="#section-patterns">New Usage Patterns</a>
+      <a href="#section-horizon">On the Horizon</a>
+      <a href="#section-feedback">Team Feedback</a>
+    </nav>
+
+    <div class="stats-row">
+      <div class="stat"><div class="stat-value">${data.total_messages.toLocaleString()}</div><div class="stat-label">Messages</div></div>
+      <div class="stat"><div class="stat-value">+${data.total_lines_added.toLocaleString()}/-${data.total_lines_removed.toLocaleString()}</div><div class="stat-label">Lines</div></div>
+      <div class="stat"><div class="stat-value">${data.total_files_modified}</div><div class="stat-label">Files</div></div>
+      <div class="stat"><div class="stat-value">${data.days_active}</div><div class="stat-label">Days</div></div>
+      <div class="stat"><div class="stat-value">${data.messages_per_day}</div><div class="stat-label">Msgs/Day</div></div>
+    </div>
+
+    ${projectAreasHtml}
+
+    <div class="charts-row">
+      <div class="chart-card">
+        <div class="chart-title">What You Wanted</div>
+        ${generateBarChart(data.goal_categories, '#2563eb')}
+      </div>
+      <div class="chart-card">
+        <div class="chart-title">Top Tools Used</div>
+        ${generateBarChart(data.tool_counts, '#0891b2')}
+      </div>
+    </div>
+
+    <div class="charts-row">
+      <div class="chart-card">
+        <div class="chart-title">Languages</div>
+        ${generateBarChart(data.languages, '#10b981')}
+      </div>
+      <div class="chart-card">
+        <div class="chart-title">Session Types</div>
+        ${generateBarChart(data.session_types || {}, '#8b5cf6')}
+      </div>
+    </div>
+
+    ${interactionHtml}
+
+    <!-- Response Time Distribution -->
+    <div class="chart-card" style="margin: 24px 0;">
+      <div class="chart-title">User Response Time Distribution</div>
+      ${generateResponseTimeHistogram(data.user_response_times)}
+      <div style="font-size: 12px; color: #64748b; margin-top: 8px;">
+        Median: ${data.median_response_time.toFixed(1)}s &bull; Average: ${data.avg_response_time.toFixed(1)}s
+      </div>
+    </div>
+
+    <!-- Multi-clauding Section (matching Python reference) -->
+    <div class="chart-card" style="margin: 24px 0;">
+      <div class="chart-title">Multi-Clauding (Parallel Sessions)</div>
       ${data.multi_clauding.overlap_events === 0
-        ? `
-        <p style="font-size: 14px; color: #64748b; padding: 8px 0;">
-          No parallel session usage detected. You typically work with one Context Code session at a time.
-        </p>
+        ? `
+        <p style="font-size: 14px; color: #64748b; padding: 8px 0;">
+          No parallel session usage detected. You typically work with one Context Code session at a time.
+        </p>
       `
-        : `
-        <div style="display: flex; gap: 24px; margin: 12px 0;">
-          <div style="text-align: center;">
-            <div style="font-size: 24px; font-weight: 700; color: #7c3aed;">${data.multi_clauding.overlap_events}</div>
-            <div style="font-size: 11px; color: #64748b; text-transform: uppercase;">Overlap Events</div>
-          </div>
-          <div style="text-align: center;">
-            <div style="font-size: 24px; font-weight: 700; color: #7c3aed;">${data.multi_clauding.sessions_involved}</div>
-            <div style="font-size: 11px; color: #64748b; text-transform: uppercase;">Sessions Involved</div>
-          </div>
-          <div style="text-align: center;">
-            <div style="font-size: 24px; font-weight: 700; color: #7c3aed;">${data.total_messages > 0 ? Math.round((100 * data.multi_clauding.user_messages_during) / data.total_messages) : 0}%</div>
-            <div style="font-size: 11px; color: #64748b; text-transform: uppercase;">Of Messages</div>
-          </div>
-        </div>
-        <p style="font-size: 13px; color: #475569; margin-top: 12px;">
-          You run multiple Context Code sessions simultaneously. Multi-clauding is detected when sessions
-          overlap in time, suggesting parallel workflows.
-        </p>
-      `}
-    </div>
-
-    <!-- Time of Day & Tool Errors -->
-    <div class="charts-row">
-      <div class="chart-card">
-        <div class="chart-title" style="display: flex; align-items: center; gap: 12px;">
-          User Messages by Time of Day
-          <select id="timezone-select" style="font-size: 12px; padding: 4px 8px; border-radius: 4px; border: 1px solid #e2e8f0;">
-            <option value="0">PT (UTC-8)</option>
-            <option value="3">ET (UTC-5)</option>
-            <option value="8">London (UTC)</option>
-            <option value="9">CET (UTC+1)</option>
-            <option value="17">Tokyo (UTC+9)</option>
-            <option value="custom">Custom offset...</option>
-          </select>
-          <input type="number" id="custom-offset" placeholder="UTC offset" style="display: none; width: 80px; font-size: 12px; padding: 4px; border-radius: 4px; border: 1px solid #e2e8f0;">
-        </div>
-        ${generateTimeOfDayChart(data.message_hours)}
-      </div>
-      <div class="chart-card">
-        <div class="chart-title">Tool Errors Encountered</div>
-        ${Object.keys(data.tool_error_categories).length > 0 ? generateBarChart(data.tool_error_categories, '#dc2626') : '<p class="empty">No tool errors</p>'}
-      </div>
-    </div>
-
-    ${whatWorksHtml}
-
-    <div class="charts-row">
-      <div class="chart-card">
-        <div class="chart-title">What Helped Most (Claude's Capabilities)</div>
-        ${generateBarChart(data.success, '#16a34a')}
-      </div>
-      <div class="chart-card">
-        <div class="chart-title">Outcomes</div>
-        ${generateBarChart(data.outcomes, '#8b5cf6', 6, OUTCOME_ORDER)}
-      </div>
-    </div>
-
-    ${frictionHtml}
-
-    <div class="charts-row">
-      <div class="chart-card">
-        <div class="chart-title">Primary Friction Types</div>
-        ${generateBarChart(data.friction, '#dc2626')}
-      </div>
-      <div class="chart-card">
-        <div class="chart-title">Inferred Satisfaction (model-estimated)</div>
-        ${generateBarChart(data.satisfaction, '#eab308', 6, SATISFACTION_ORDER)}
-      </div>
-    </div>
-
-    ${suggestionsHtml}
-
-    ${horizonHtml}
-
-    ${funEndingHtml}
-
-    ${teamFeedbackHtml}
-  </div>
-  <script>${js}</script>
-</body>
+        : `
+        <div style="display: flex; gap: 24px; margin: 12px 0;">
+          <div style="text-align: center;">
+            <div style="font-size: 24px; font-weight: 700; color: #7c3aed;">${data.multi_clauding.overlap_events}</div>
+            <div style="font-size: 11px; color: #64748b; text-transform: uppercase;">Overlap Events</div>
+          </div>
+          <div style="text-align: center;">
+            <div style="font-size: 24px; font-weight: 700; color: #7c3aed;">${data.multi_clauding.sessions_involved}</div>
+            <div style="font-size: 11px; color: #64748b; text-transform: uppercase;">Sessions Involved</div>
+          </div>
+          <div style="text-align: center;">
+            <div style="font-size: 24px; font-weight: 700; color: #7c3aed;">${data.total_messages > 0 ? Math.round((100 * data.multi_clauding.user_messages_during) / data.total_messages) : 0}%</div>
+            <div style="font-size: 11px; color: #64748b; text-transform: uppercase;">Of Messages</div>
+          </div>
+        </div>
+        <p style="font-size: 13px; color: #475569; margin-top: 12px;">
+          You run multiple Context Code sessions simultaneously. Multi-clauding is detected when sessions
+          overlap in time, suggesting parallel workflows.
+        </p>
+      `}
+    </div>
+
+    <!-- Time of Day & Tool Errors -->
+    <div class="charts-row">
+      <div class="chart-card">
+        <div class="chart-title" style="display: flex; align-items: center; gap: 12px;">
+          User Messages by Time of Day
+          <select id="timezone-select" style="font-size: 12px; padding: 4px 8px; border-radius: 4px; border: 1px solid #e2e8f0;">
+            <option value="0">PT (UTC-8)</option>
+            <option value="3">ET (UTC-5)</option>
+            <option value="8">London (UTC)</option>
+            <option value="9">CET (UTC+1)</option>
+            <option value="17">Tokyo (UTC+9)</option>
+            <option value="custom">Custom offset...</option>
+          </select>
+          <input type="number" id="custom-offset" placeholder="UTC offset" style="display: none; width: 80px; font-size: 12px; padding: 4px; border-radius: 4px; border: 1px solid #e2e8f0;">
+        </div>
+        ${generateTimeOfDayChart(data.message_hours)}
+      </div>
+      <div class="chart-card">
+        <div class="chart-title">Tool Errors Encountered</div>
+        ${Object.keys(data.tool_error_categories).length > 0 ? generateBarChart(data.tool_error_categories, '#dc2626') : '<p class="empty">No tool errors</p>'}
+      </div>
+    </div>
+
+    ${whatWorksHtml}
+
+    <div class="charts-row">
+      <div class="chart-card">
+        <div class="chart-title">What Helped Most (Claude's Capabilities)</div>
+        ${generateBarChart(data.success, '#16a34a')}
+      </div>
+      <div class="chart-card">
+        <div class="chart-title">Outcomes</div>
+        ${generateBarChart(data.outcomes, '#8b5cf6', 6, OUTCOME_ORDER)}
+      </div>
+    </div>
+
+    ${frictionHtml}
+
+    <div class="charts-row">
+      <div class="chart-card">
+        <div class="chart-title">Primary Friction Types</div>
+        ${generateBarChart(data.friction, '#dc2626')}
+      </div>
+      <div class="chart-card">
+        <div class="chart-title">Inferred Satisfaction (model-estimated)</div>
+        ${generateBarChart(data.satisfaction, '#eab308', 6, SATISFACTION_ORDER)}
+      </div>
+    </div>
+
+    ${suggestionsHtml}
+
+    ${horizonHtml}
+
+    ${funEndingHtml}
+
+    ${teamFeedbackHtml}
+  </div>
+  <script>${js}</script>
+</body>
 </html>`;
 }
 /**
@@ -2457,8 +2457,8 @@ const usageReport = {
             catch {
                 // Upload failed - fall back to local file and show upload command
                 reportUrl = `file://${htmlPath}`;
-                uploadHint = `\nAutomatic upload failed. Are you on the boron namespace? Try \`use-bo\` and ensure you've run \`sso\`.
-To share, run: ff cp ${htmlPath} ${s3Path}
+                uploadHint = `\nAutomatic upload failed. Are you on the boron namespace? Try \`use-bo\` and ensure you've run \`sso\`.
+To share, run: ff cp ${htmlPath} ${s3Path}
 Then access at: ${s3Url}`;
             }
         }
@@ -2491,48 +2491,48 @@ Then access at: ${s3Url}`;
         // Build markdown summary from insights
         const atAGlance = insights.at_a_glance;
         const summaryText = atAGlance
-            ? `## At a Glance
-
-${atAGlance.whats_working ? `**What's working:** ${atAGlance.whats_working} See _Impressive Things You Did_.` : ''}
-
-${atAGlance.whats_hindering ? `**What's hindering you:** ${atAGlance.whats_hindering} See _Where Things Go Wrong_.` : ''}
-
-${atAGlance.quick_wins ? `**Quick wins to try:** ${atAGlance.quick_wins} See _Features to Try_.` : ''}
-
+            ? `## At a Glance
+
+${atAGlance.whats_working ? `**What's working:** ${atAGlance.whats_working} See _Impressive Things You Did_.` : ''}
+
+${atAGlance.whats_hindering ? `**What's hindering you:** ${atAGlance.whats_hindering} See _Where Things Go Wrong_.` : ''}
+
+${atAGlance.quick_wins ? `**Quick wins to try:** ${atAGlance.quick_wins} See _Features to Try_.` : ''}
+
 ${atAGlance.ambitious_workflows ? `**Ambitious workflows:** ${atAGlance.ambitious_workflows} See _On the Horizon_.` : ''}`
             : '_No insights generated_';
-        const header = `# Context Code Insights
-
-${stats}
-${data.date_range.start} to ${data.date_range.end}
-${remoteInfo}
+        const header = `# Context Code Insights
+
+${stats}
+${data.date_range.start} to ${data.date_range.end}
+${remoteInfo}
 `;
-        const userSummary = `${header}${summaryText}
-
+        const userSummary = `${header}${summaryText}
+
 Your full shareable insights report is ready: ${reportUrl}${uploadHint}`;
         // Return prompt for Claude to respond to
         return [
             {
                 type: 'text',
-                text: `The user just ran /insights to generate a usage report analyzing their Context Code sessions.
-
-Here is the full insights data:
-${jsonStringify(insights, null, 2)}
-
-Report URL: ${reportUrl}
-HTML file: ${htmlPath}
-Facets directory: ${getFacetsDir()}
-
-Here is what the user sees:
-${userSummary}
-
-Now output the following message exactly:
-
-<message>
-Your shareable insights report is ready:
-${reportUrl}${uploadHint}
-
-Want to dig into any section or try one of the suggestions?
+                text: `The user just ran /insights to generate a usage report analyzing their Context Code sessions.
+
+Here is the full insights data:
+${jsonStringify(insights, null, 2)}
+
+Report URL: ${reportUrl}
+HTML file: ${htmlPath}
+Facets directory: ${getFacetsDir()}
+
+Here is what the user sees:
+${userSummary}
+
+Now output the following message exactly:
+
+<message>
+Your shareable insights report is ready:
+${reportUrl}${uploadHint}
+
+Want to dig into any section or try one of the suggestions?
 </message>`,
             },
         ];