claude-session-insights 0.4.0 → 0.4.1

package/README.md

@@ -10,8 +10,8 @@ Think "Spotify Wrapped" for your Claude Code usage — scores, summaries, badges
 - **Overall Summary** — natural-language assessment of your prompting habits with specific recommendations
 - **Per-Session Summary** — each session gets a plain-English breakdown of what happened, what went well, and what could improve
 - **Session Drill-down** — click any session to see the full conversation timeline with per-turn token counts, costs, tool calls, and prompt previews
-- **Workflow Optimizer** — analyzes your session patterns and recommends Claude Code setup improvements: skills to create, CLAUDE.md files to write, and subagents to configure. Optional AI generation produces ready-to-copy artifact content (full CLAUDE.md text, skill prompt bodies, agent configs)
-- **AI Insights** — on-demand deeper analysis powered by the Claude CLI, with model picker (Sonnet, Opus, Haiku) and streaming output
+- **Session Intelligence** — unified card combining a rule-based overview (patterns, model choices, token habits) with on-demand **AI Analyze** powered by Claude, with model picker (Sonnet, Opus, Haiku) and streaming output
+- **Workflow Optimizer** — analyzes session patterns and recommends Claude Code setup improvements: skills, CLAUDE.md files, agents, and plugins. Pattern-based suggestions load instantly; **AI Optimize** generates AI-enhanced suggestions (defaults to Opus). Optional AI artifact content generation produces ready-to-copy CLAUDE.md files, skill prompts, and agent configs
 - **Heaviest Sessions** — top sessions ranked by cost for quick identification of expensive outliers
 - **Daily Score Chart** — trend visualization of your efficiency score, session count, tokens, and cost over time
 - **Badges** — positive achievements (Surgical Prompter, Cache Whisperer, etc.) and negative anti-patterns (Opus Addict, Token Furnace, etc.)
@@ -79,27 +79,33 @@ The dashboard generates rule-based summaries at two levels:
 
 ## Workflow Optimizer
 
-Closes the loop from "how am I doing?" to "here's what to build to do better." The optimizer runs two phases:
+Closes the loop from "how am I doing?" to "here's what to build to do better."
 
-**Phase 1 — Rule-based suggestions (instant):** Detects patterns from your badges, tool usage, session titles, and project history to recommend:
+**Pattern-based suggestions (instant):** Detects patterns from your badges, tool usage, session titles, and project history to recommend:
 
 - **Skills** — slash commands to create in `~/.claude/skills/`. Example: if you have the Vague Commander badge, it suggests a `/spec` skill to help you write thorough task specs before Claude starts working
 - **CLAUDE.md** — project-scoped or global config files to reduce repeated explanations. Triggered by projects with 5+ sessions, the Context Hoarder badge, Opus overuse, etc.
 - **Agents** — subagent configurations for offloading exploration or repetitive task types
 - **Plugins** — MCP servers only where CLI tools have a genuine capability gap (e.g. Playwright for browser tasks, not tools with good CLI equivalents that would just add context overhead)
 
-**Phase 2 — AI content generation (optional):** Click "Generate artifact content with AI" to stream ready-to-copy content for each suggestion — the actual CLAUDE.md file, the real skill prompt body, agent configuration — not just a description of what to build.
+**AI Optimize (optional):** Click "AI Optimize" to stream AI-generated suggestions that either replace or supplement the pattern-based ones — defaults to Opus. AI suggestions appear at the top of the card when generated and persist across refreshes until cleared.
 
-## AI Insights
+**Artifact content generation (optional):** Click "Generate artifact content with AI" on any suggestion card to stream ready-to-copy content — the actual CLAUDE.md file, the real skill prompt body, agent configuration — not just a description of what to build.
 
-Click "Generate AI Insights" to run a deeper analysis using the Claude CLI. This streams a response via SSE that covers:
+## Session Intelligence
+
+The Session Intelligence card combines a rule-based overview of your prompting habits with on-demand AI analysis.
+
+The static overview surfaces patterns across your sessions: cache efficiency, model selection, prompt specificity, and cost distribution.
+
+Click **AI Analyze** to run a deeper analysis using the Claude CLI. This streams a response via SSE that covers:
 
 - **Key Patterns** — non-obvious trends the static rules miss (time-of-day patterns, project-specific habits, cost trajectories)
 - **Biggest Opportunities** — specific workflow changes with quantified potential savings
 - **What's Working Well** — habits worth keeping
 - **Standout Session** — the most interesting session and what can be learned from it
 
-You can pick which model to use (Sonnet, Opus, or Haiku) from the model picker. Results are cached for the session. Requires the `claude` CLI to be installed and in your PATH.
+AI analysis appears at the top of the card when generated and persists across refreshes until cleared. You can pick which model to use (Sonnet, Opus, or Haiku) from the model picker. Requires the `claude` CLI to be installed and in your PATH.
 
 ## Badges
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-session-insights",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Analyze Claude Code sessions for efficiency insights, scores, and team metrics",
   "type": "module",
   "bin": {

package/public/index.html

@@ -163,13 +163,13 @@
     background: var(--surface3); color: var(--text); border-color: var(--border-hover);
   }
 
-  /* Hero: two-column layout */
-  .hero { display: flex; gap: 20px; margin-bottom: 28px; align-items: stretch; }
-  .hero-left { display: flex; flex-direction: column; gap: 14px; width: 340px; flex-shrink: 0; }
-  .hero-right { flex: 1; min-width: 0; }
+  /* Hero: single row — score card fixed-width, badges fill the rest */
+  .hero { margin-bottom: 28px; }
+  .hero-left { display: flex; flex-direction: row; gap: 14px; align-items: stretch; }
+  .hero-left .score-card { width: 230px; flex-shrink: 0; }
   @media (max-width: 720px) {
-    .hero { flex-direction: column; }
-    .hero-left { width: auto; min-width: 0; }
+    .hero-left { flex-direction: column; }
+    .hero-left .score-card { width: auto; }
   }
   .score-card {
     background: var(--surface); border: 1px solid var(--border);
@@ -320,7 +320,7 @@
 
   /* Score breakdown */
   .score-info-toggle {
-    background: none; border: none; color: var(--text3); cursor: pointer;
+    display: block; background: none; border: none; color: var(--text3); cursor: pointer;
     font-size: 11px; margin-top: 10px; padding: 0; transition: color 0.15s;
   }
   .score-info-toggle:hover { color: var(--accent); }
@@ -526,8 +526,27 @@
   .ai-insights-card h3 {
     font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px;
     color: var(--purple); margin-bottom: 14px; font-weight: 600;
-    display: flex; align-items: center; gap: 8px;
+    display: flex; align-items: center; gap: 8px; justify-content: space-between;
+  }
+  .card-header-actions {
+    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
+  }
+  .ai-generate-btn-sm {
+    background: var(--purple-dim); border: 1px solid rgba(210,168,255,0.2);
+    color: var(--purple); padding: 5px 12px; border-radius: 7px;
+    cursor: pointer; font-size: 11px; font-weight: 600; transition: all 0.2s;
+    text-transform: none; letter-spacing: 0;
+  }
+  .ai-generate-btn-sm:hover { background: rgba(210,168,255,0.2); border-color: rgba(210,168,255,0.3); }
+  .ai-generate-btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }
+  .optimizer-generate-btn-sm {
+    background: var(--accent-dim); border: 1px solid rgba(37,99,235,0.2);
+    color: var(--accent); padding: 5px 12px; border-radius: 7px;
+    cursor: pointer; font-size: 11px; font-weight: 600; transition: all 0.2s;
+    text-transform: none; letter-spacing: 0;
   }
+  .optimizer-generate-btn-sm:hover { background: rgba(37,99,235,0.15); border-color: rgba(37,99,235,0.3); }
+  .optimizer-generate-btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }
   .ai-insights-content { font-size: 13px; line-height: 1.75; color: var(--text); }
   .ai-insights-content h2 {
     font-size: 13px; font-weight: 700; color: var(--text); margin: 16px 0 8px 0;
@@ -541,6 +560,21 @@
     font-family: var(--mono); font-size: 11px; background: var(--surface2);
     padding: 1px 5px; border-radius: 3px;
   }
+  /* Session Intelligence — merged static + AI card */
+  .session-section-label {
+    font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px;
+    color: var(--text3); font-weight: 600; margin-bottom: 12px;
+  }
+  .ai-divider {
+    display: flex; align-items: center; gap: 10px;
+    margin: 22px 0 18px; color: var(--purple);
+    font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600;
+  }
+  .ai-divider::before, .ai-divider::after {
+    content: ''; flex: 1; height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(210,168,255,0.35), transparent);
+  }
+  .ai-divider span { white-space: nowrap; }
   .ai-generate-btn {
     background: var(--purple-dim); border: 1px solid rgba(210,168,255,0.2);
     color: var(--purple); padding: 10px 20px; border-radius: 7px;
@@ -569,7 +603,7 @@
     animation: ai-spin 0.8s linear infinite;
   }
   @keyframes ai-spin { to { transform: rotate(360deg); } }
-  .ai-controls { display: flex; align-items: center; gap: 10px; }
+  .ai-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
   .ai-model-picker { position: relative; display: inline-block; }
   .ai-model-pill {
     display: inline-flex; align-items: center; gap: 5px;
@@ -607,12 +641,22 @@
   .ai-model-option:hover { background: var(--surface2); }
   .ai-model-option.active { color: var(--text); font-weight: 600; }
   .ai-model-option .check { width: 14px; color: var(--purple); font-size: 13px; }
-  .ai-token-warning {
-    margin-top: 10px; padding: 8px 12px; border-radius: 6px;
-    background: rgba(255,200,80,0.07); border: 1px solid rgba(255,200,80,0.2);
-    font-size: 11px; color: var(--text3); display: flex; align-items: flex-start; gap: 7px;
+  [data-warn] { position: relative; }
+  [data-warn]:hover::before {
+    content: attr(data-warn);
+    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
+    background: var(--surface); border: 1px solid rgba(255,200,80,0.3);
+    color: var(--text2); font-size: 11px; font-weight: 400;
+    padding: 7px 10px; border-radius: 6px; pointer-events: none; z-index: 300;
+    white-space: normal; max-width: 260px; width: max-content; line-height: 1.5;
+    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
+  }
+  [data-warn]:hover::after {
+    content: '';
+    position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
+    border: 5px solid transparent; border-top-color: rgba(255,200,80,0.3);
+    pointer-events: none; z-index: 300;
   }
-  .ai-token-warning .warn-icon { color: #f5c842; flex-shrink: 0; margin-top: 1px; }
   .ai-model-label {
     font-size: 10px; color: var(--text3); font-family: var(--mono);
     display: flex; align-items: center; gap: 6px;
@@ -645,6 +689,71 @@
   }
   .ai-prompt-close:hover { color: var(--text); }
 
+  /* Workflow Optimizer — mode toggle (Static / AI Suggestions) */
+  .optimizer-mode-tabs {
+    display: flex; gap: 4px; margin-bottom: 16px;
+  }
+  .optimizer-mode-tab {
+    padding: 6px 14px; border-radius: 7px; border: 1px solid var(--border);
+    background: var(--surface2); color: var(--text2); font-size: 12px;
+    font-weight: 500; cursor: pointer; transition: all 0.15s;
+  }
+  .optimizer-mode-tab:hover { background: var(--surface3); color: var(--text); }
+  .optimizer-mode-tab.active {
+    background: var(--accent-dim); border-color: rgba(37,99,235,0.3);
+    color: var(--accent); font-weight: 600;
+  }
+  .optimizer-mode-panel { display: none; }
+  .optimizer-mode-panel.active { display: block; }
+  .optimizer-ai-panel-header {
+    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
+  }
+  .optimizer-ai-suggestions-output { margin-top: 4px; }
+  .ai-optimizer-model-picker { position: relative; display: inline-block; }
+  .ai-optimizer-model-pill {
+    display: inline-flex; align-items: center; gap: 5px;
+    background: var(--surface2); border: 1px solid var(--border); color: var(--text3);
+    padding: 5px 10px; border-radius: 20px; font-size: 11px; font-family: var(--mono);
+    cursor: pointer; transition: all 0.2s; user-select: none; position: relative;
+  }
+  .ai-optimizer-model-pill:hover { border-color: var(--border-hover); color: var(--text2); }
+  .ai-optimizer-model-pill[data-tip]:hover::after {
+    content: attr(data-tip);
+    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
+    background: var(--text); color: var(--bg); font-size: 10px; white-space: nowrap;
+    padding: 4px 8px; border-radius: 4px; pointer-events: none; z-index: 200;
+  }
+  .ai-optimizer-model-picker.open .pill-chevron { transform: rotate(180deg); }
+  .ai-optimizer-model-menu {
+    position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
+    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
+    padding: 4px; min-width: 140px; box-shadow: var(--shadow-tooltip);
+    opacity: 0; transform: translateY(-4px); pointer-events: none;
+    transition: opacity 0.15s, transform 0.15s;
+  }
+  .ai-optimizer-model-picker.open .ai-optimizer-model-menu {
+    opacity: 1; transform: translateY(0); pointer-events: auto;
+  }
+  .ai-optimizer-model-option {
+    display: flex; align-items: center; gap: 8px;
+    padding: 6px 10px; border-radius: 5px; font-size: 11px; font-family: var(--mono);
+    color: var(--text2); cursor: pointer; transition: background 0.1s;
+  }
+  .ai-optimizer-model-option:hover { background: var(--surface2); }
+  .ai-optimizer-model-option.active { color: var(--text); font-weight: 600; }
+  .ai-optimizer-model-option .check { width: 14px; color: var(--purple); font-size: 13px; }
+  .ai-suggestions-type-group { margin-bottom: 18px; }
+  .ai-suggestions-type-group:last-child { margin-bottom: 0; }
+  .ai-suggestions-type-label {
+    font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px;
+    color: var(--text3); font-weight: 600; margin-bottom: 8px;
+  }
+  .ai-suggestion-badge {
+    display: inline-flex; align-items: center; gap: 4px; font-size: 9px;
+    font-weight: 600; padding: 1px 6px; border-radius: 4px; margin-left: 6px;
+    background: rgba(37,99,235,0.1); color: var(--accent); vertical-align: middle;
+  }
+
   /* Workflow Optimizer */
   .optimizer-card {
     background: var(--surface); border: 1px solid var(--border);
@@ -659,7 +768,7 @@
   .optimizer-card h3 {
     font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px;
     color: var(--accent); margin-bottom: 14px; font-weight: 600;
-    display: flex; align-items: center; gap: 8px;
+    display: flex; align-items: center; gap: 8px; justify-content: space-between;
   }
   .optimizer-tabs {
     display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap;
@@ -1228,12 +1337,19 @@ function renderDashboard(data) {
             : '<span style="color: var(--text3); font-size: 13px">Keep going -- badges unlock after 5+ sessions</span>'}
         </div>
       </div>
-      ${data.overallSummary ? `
-      <div class="hero-right">
-        <div class="summary-card">
-          <h3>How You're Using Claude Code
-            <span class="help-icon">?<span class="help-tooltip">Generated from static rules based on your session data — patterns, model choices, and token habits.<br><br><a onclick="document.getElementById('ai-insights-section').scrollIntoView({behavior:'smooth'})">Try AI Insights ↓</a> for a deeper, non-obvious analysis powered by Claude.</span></span>
-          </h3>
+    </div>
+    <section id="session-insights-section">
+      <div class="ai-insights-card">
+        <h3>Session Intelligence
+          <span class="card-header-actions">
+            <span class="ai-model-picker" id="ai-model-picker"><span class="ai-model-pill" onclick="toggleModelMenu(event)" data-tip="Click to switch model"></span><div class="ai-model-menu"></div></span>
+            <button class="ai-generate-btn-sm" id="ai-gen-header-btn" onclick="generateAIInsights()" data-warn="⚠ This runs a real Claude session and will show up in your own usage stats. Each generation costs roughly the same as a short coding task.">AI Analyze</button>
+          </span>
+        </h3>
+        <div id="ai-insights-body"></div>
+        ${data.overallSummary ? `
+        <div class="ai-divider"><span>Overview</span></div>
+        <div class="session-static-section">
           <div class="summary-paragraphs">
             ${data.overallSummary.paragraphs.map(p => `<p>${escHtml(p)}</p>`).join('')}
           </div>
@@ -1242,28 +1358,12 @@ function renderDashboard(data) {
             <h4>Recommendations</h4>
             <ul>${data.overallSummary.recommendations.map(r => `<li>${escHtml(r)}</li>`).join('')}</ul>
           </div>` : ''}
-        </div>
-      </div>` : ''}
-    </div>
-    <section id="ai-insights-section">
-      <div class="ai-insights-card">
-        <h3>AI Insights</h3>
-        <div id="ai-insights-body">
-          <div class="ai-controls">
-            <button class="ai-generate-btn" onclick="generateAIInsights()">Generate AI Insights</button>
-            <span class="ai-model-picker" id="ai-model-picker"><span class="ai-model-pill" onclick="toggleModelMenu(event)" data-tip="Click to switch model"></span><div class="ai-model-menu"></div></span>
-          </div>
-          <button class="score-info-toggle" onclick="togglePromptView()">What prompt is it sending to Claude?</button>
-          <div class="ai-token-warning">
-            <span class="warn-icon">⚠</span>
-            <span>This runs a real Claude session and will show up in your own usage stats. Each generation costs roughly the same as a short coding task.</span>
-          </div>
-        </div>
+        </div>` : ''}
       </div>
     </section>
     <section id="optimizer-section">
       <div class="optimizer-card">
-        <h3>Workflow Optimizer</h3>
+        <h3>Workflow Optimizer<span id="optimizer-header-controls"></span></h3>
         <div id="optimizer-body">
           <div style="color:var(--text3); font-size:13px; padding: 4px 0 12px;">Loading suggestions<span id="optimizer-dots"></span></div>
         </div>
@@ -1638,6 +1738,7 @@ function selectModel(modelId) {
 
 document.addEventListener('click', () => {
   document.querySelectorAll('.ai-model-picker.open').forEach(p => p.classList.remove('open'));
+  document.querySelectorAll('.ai-optimizer-model-picker.open').forEach(p => p.classList.remove('open'));
 });
 
 function applyAIState() {
@@ -1646,23 +1747,25 @@ function applyAIState() {
   } else {
     renderModelPicker();
   }
+  if (optimizerSuggestions) renderOptimizerTabs();
 }
 
 function renderAIComplete(content, generatedAt, model) {
   cachedAIRender = { content, generatedAt, model };
   const body = document.getElementById('ai-insights-body');
   if (!body) return;
+  const headerBtn = document.getElementById('ai-gen-header-btn');
+  if (headerBtn) { headerBtn.textContent = 'AI Analyze'; headerBtn.disabled = false; }
   body.innerHTML = `
+    <div class="ai-divider" style="margin-top:0"><span>AI Analysis</span></div>
     <div class="ai-insights-content">${renderMarkdown(escHtml(content))}</div>
     <div class="ai-timestamp">
       Generated ${new Date(generatedAt).toLocaleString()}
       ${model ? ` · ${modelLabel(model)}` : ''}
-      <div style="margin-top: 10px;" class="ai-controls">
-        <button class="ai-generate-btn" style="padding: 5px 14px; font-size: 11px;" onclick="generateAIInsights()">Regenerate</button>
-        <button class="ai-generate-btn" style="padding: 5px 14px; font-size: 11px; background: var(--surface2); color: var(--text2);" onclick="clearAIInsights()">Clear</button>
-        <span class="ai-model-picker" id="ai-model-picker"><span class="ai-model-pill" onclick="toggleModelMenu(event)" data-tip="Click to switch model"></span><div class="ai-model-menu"></div></span>
+      <div style="margin-top:8px" class="ai-controls">
+        <button class="ai-generate-btn" style="padding:5px 14px;font-size:11px;background:var(--surface2);border-color:var(--border);color:var(--text2)" onclick="clearAIInsights()">Clear</button>
       </div>
-      <button class="score-info-toggle" onclick="togglePromptView()">What prompt is it sending to Claude?</button>
+      <div><button class="score-info-toggle" onclick="togglePromptView()">What prompt is it sending to Claude?</button></div>
     </div>`;
   renderModelPicker();
 }
@@ -1672,16 +1775,9 @@ function clearAIInsights() {
   fetch('/api/ai-analyze', { method: 'DELETE' }).catch(() => {});
   const body = document.getElementById('ai-insights-body');
   if (!body) return;
-  body.innerHTML = `
-    <div class="ai-controls">
-      <button class="ai-generate-btn" onclick="generateAIInsights()">Generate AI Insights</button>
-      <span class="ai-model-picker" id="ai-model-picker"><span class="ai-model-pill" onclick="toggleModelMenu(event)" data-tip="Click to switch model"></span><div class="ai-model-menu"></div></span>
-    </div>
-    <button class="score-info-toggle" onclick="togglePromptView()">What prompt is it sending to Claude?</button>
-    <div class="ai-token-warning">
-      <span class="warn-icon">⚠</span>
-      <span>This runs a real Claude session and will show up in your own usage stats. Each generation costs roughly the same as a short coding task.</span>
-    </div>`;
+  body.innerHTML = '';
+  const headerBtn = document.getElementById('ai-gen-header-btn');
+  if (headerBtn) { headerBtn.textContent = 'AI Analyze'; headerBtn.disabled = false; }
   renderModelPicker();
 }
 
@@ -1707,6 +1803,9 @@ function generateAIInsights() {
   const body = document.getElementById('ai-insights-body');
   if (!body) return;
 
+  const headerBtn = document.getElementById('ai-gen-header-btn');
+  if (headerBtn) { headerBtn.textContent = 'Generating…'; headerBtn.disabled = true; }
+
   const wasActive = autoRefreshActive;
   if (autoRefreshActive) pauseAutoRefresh();
 
@@ -1714,11 +1813,11 @@ function generateAIInsights() {
   const modelParam = modelId ? `?model=${encodeURIComponent(modelId)}` : '';
 
   body.innerHTML = `
+    <div class="ai-divider" style="margin-top:0"><span>AI Analysis</span></div>
     <div class="ai-loading">
       <div class="ai-spinner"></div>
       <div>
         <div>Generating with ${modelId ? modelLabel(modelId) : 'default model'}, please wait...</div>
-        ${wasActive ? '<div style="font-size:11px; color:var(--yellow); margin-top:4px">Auto-refresh paused while generating</div>' : ''}
       </div>
     </div>
     <div class="ai-insights-content" id="ai-stream-content"></div>`;
@@ -1766,12 +1865,9 @@ async function streamAIFetch(modelParam, body) {
             renderAIComplete(fullContent, generatedAt, usedModel);
           } else if (currentEvent === 'error') {
             const { message } = JSON.parse(data);
-            body.innerHTML = `<div class="ai-error">${escHtml(message)}</div>
-              <div class="ai-controls" style="margin-top: 8px;">
-                <button class="ai-generate-btn" onclick="generateAIInsights()">Retry</button>
-                <span class="ai-model-picker" id="ai-model-picker"><span class="ai-model-pill" onclick="toggleModelMenu(event)" data-tip="Click to switch model"></span><div class="ai-model-menu"></div></span>
-              </div>`;
-            renderModelPicker();
+            const headerBtn = document.getElementById('ai-gen-header-btn');
+            if (headerBtn) { headerBtn.textContent = 'AI Analyze'; headerBtn.disabled = false; }
+            body.innerHTML = `<div class="ai-error">${escHtml(message)}</div>`;
             resumeAutoRefreshIfPaused();
           }
           currentEvent = '';
@@ -1780,12 +1876,9 @@ async function streamAIFetch(modelParam, body) {
     }
     resumeAutoRefreshIfPaused();
   } catch (err) {
-    body.innerHTML = `<div class="ai-error">Failed to connect to server</div>
-      <div class="ai-controls" style="margin-top: 8px;">
-        <button class="ai-generate-btn" onclick="generateAIInsights()">Retry</button>
-        <span class="ai-model-picker" id="ai-model-picker"><span class="ai-model-pill" onclick="toggleModelMenu(event)" data-tip="Click to switch model"></span><div class="ai-model-menu"></div></span>
-      </div>`;
-    renderModelPicker();
+    const headerBtnCatch = document.getElementById('ai-gen-header-btn');
+    if (headerBtnCatch) { headerBtnCatch.textContent = 'AI Analyze'; headerBtnCatch.disabled = false; }
+    body.innerHTML = `<div class="ai-error">Failed to connect to server</div>`;
     resumeAutoRefreshIfPaused();
   }
 }
@@ -1812,6 +1905,9 @@ async function loadCachedAIInsights() {
 let optimizerSuggestions = null;
 let activeOptimizerTab = 'all';
 let cachedOptimizerAI = null;
+let optimizerMode = 'static'; // 'static' | 'ai'
+let aiOptimizerModelId = 'claude-opus-4-6'; // default Opus for AI suggestions
+let cachedAIOptimizerSuggestions = null; // { suggestions, generatedAt, model }
 
 const OPTIMIZER_TABS = [
   { id: 'all', label: 'All' },
@@ -1830,8 +1926,15 @@ async function loadSuggestions() {
   }, 400);
 
   try {
-    const res = await fetch('/api/suggestions');
-    optimizerSuggestions = await res.json();
+    const [suggestionsRes, aiCacheRes] = await Promise.all([
+      fetch('/api/suggestions'),
+      fetch('/api/ai-optimizer'),
+    ]);
+    optimizerSuggestions = await suggestionsRes.json();
+    const aiCache = await aiCacheRes.json();
+    if (aiCache.suggestions) {
+      cachedAIOptimizerSuggestions = aiCache;
+    }
     clearInterval(dotTimer);
     renderOptimizerTabs();
   } catch {
@@ -1875,7 +1978,7 @@ function renderOptimizerTabs() {
   const aiSection = `
     <div class="optimizer-ai-section">
       <div class="optimizer-ai-controls">
-        <button class="optimizer-generate-btn" onclick="generateOptimizerContent()" id="optimizer-gen-btn">
+        <button class="optimizer-generate-btn" onclick="generateOptimizerContent()" id="optimizer-gen-btn" data-warn="⚠ This runs a real Claude session and will show up in your own usage stats. Each generation costs roughly the same as a short coding task.">
           Generate artifact content with AI
         </button>
         <span class="ai-model-picker" id="optimizer-model-picker">
@@ -1886,15 +1989,42 @@ function renderOptimizerTabs() {
       <div id="optimizer-ai-output"></div>
     </div>`;
 
+  // Build AI Advisor model picker for card header
+  const opusModel = aiModels.find(m => m.id === 'claude-opus-4-6') || aiModels[0];
+  const currentAIModel = aiModels.find(m => m.id === aiOptimizerModelId) || opusModel || aiModels[0];
+  const aiModelMenuHtml = aiModels.map(m =>
+    `<div class="ai-optimizer-model-option${m.id === aiOptimizerModelId ? ' active' : ''}" onclick="selectAIOptimizerModel('${m.id}')">` +
+    `<span class="check">${m.id === aiOptimizerModelId ? '●' : ''}</span>${m.label}</div>`
+  ).join('');
+
+  // Populate card header controls
+  const headerControls = document.getElementById('optimizer-header-controls');
+  if (headerControls) {
+    headerControls.innerHTML = `
+      <span class="card-header-actions">
+        <div class="ai-optimizer-model-picker" id="ai-optimizer-model-picker" onclick="event.stopPropagation()">
+          <div class="ai-optimizer-model-pill" onclick="toggleAIOptimizerModelMenu()" data-tip="Click to switch model">${currentAIModel ? currentAIModel.label : 'Opus 4.6'} <span class="pill-chevron">&#x25BE;</span></div>
+          <div class="ai-optimizer-model-menu">${aiModelMenuHtml}</div>
+        </div>
+        <button class="optimizer-generate-btn-sm" id="ai-optimizer-gen-btn" onclick="generateAIOptimizerSuggestions()" data-warn="⚠ This runs a real Claude session and will show up in your own usage stats. Each generation costs roughly the same as a short coding task.">AI Optimize</button>
+      </span>`;
+  }
+
+  // Body: AI section at top (hidden until generated), then patterns
   body.innerHTML = `
+    <div id="ai-optimizer-top-section" style="display:none">
+      <div class="ai-divider" style="margin-top:0"><span>AI Optimize</span></div>
+      <div id="ai-optimizer-suggestions-output"></div>
+      <div class="ai-divider"><span>Patterns</span></div>
+    </div>
     <p style="font-size:12px; color:var(--text3); margin-bottom:12px;">
-      Based on ${(optimizerSuggestions.skills.length + optimizerSuggestions.claudeMd.length + optimizerSuggestions.agents.length + optimizerSuggestions.plugins.length)} patterns found in your sessions.
+      Based on ${total} patterns found in your sessions.
     </p>
     <div class="optimizer-tabs">${tabsHtml}</div>
     ${panelsHtml}
     ${aiSection}`;
 
-  // Sync model picker — reuse same aiModels
+  // Sync artifact content model picker
   const optimizerPicker = document.getElementById('optimizer-model-picker');
   if (optimizerPicker && aiModels.length > 0) {
     const current = aiModels.find(m => m.id === selectedModelId) ||
@@ -1911,9 +2041,13 @@ function renderOptimizerTabs() {
   if (cachedOptimizerAI) {
     renderOptimizerAIComplete(cachedOptimizerAI.content, cachedOptimizerAI.generatedAt, cachedOptimizerAI.model);
   }
+
+  if (cachedAIOptimizerSuggestions) {
+    renderAIOptimizerSuggestionsComplete(cachedAIOptimizerSuggestions.suggestions, cachedAIOptimizerSuggestions.generatedAt, cachedAIOptimizerSuggestions.model);
+  }
 }
 
-function renderSuggestionList(type, items) {
+function renderSuggestionList(type, items, isAI = false) {
   if (!items.length) return '<div class="suggestion-empty">No suggestions for this category.</div>';
   return items.map(item => {
     const priorityClass = `priority-${item.priority || 'medium'}`;
@@ -1923,10 +2057,12 @@ function renderSuggestionList(type, items) {
     if (type === 'claudeMd') meta = `<span>scope: <strong>${escHtml(item.scope)}${item.projectName ? ' · ' + escHtml(item.projectName) : ''}</strong></span>`;
     if (type === 'plugins' && item.installCmd) meta = `<span style="font-family:var(--mono)">${escHtml(item.installCmd)}</span>`;
     if (type === 'agents' && item.use_case) meta = `<span>${escHtml(item.use_case)}</span>`;
+    const aiNewBadge = isAI && item.aiNew ? '<span class="ai-suggestion-badge">AI new</span>' : '';
+    const aiEnhancedBadge = isAI && item.aiEnhanced ? '<span class="ai-suggestion-badge">AI enhanced</span>' : '';
     return `
       <div class="suggestion-card">
         <div class="suggestion-header">
-          <div class="suggestion-title">${escHtml(item.title || item.name || item.use_case || '')}</div>
+          <div class="suggestion-title">${escHtml(item.title || item.name || item.use_case || '')}${aiNewBadge}${aiEnhancedBadge}</div>
           <span class="suggestion-priority ${priorityClass}">${priorityLabel}</span>
         </div>
         <div class="suggestion-rationale">${escHtml(item.rationale)}</div>
@@ -1947,6 +2083,202 @@ function switchOptimizerTab(tabId) {
   });
 }
 
+function switchOptimizerMode(mode) {
+  optimizerMode = mode;
+  document.querySelectorAll('.optimizer-mode-panel').forEach(p => {
+    p.classList.toggle('active', p.id === `optimizer-${mode === 'static' ? 'static' : 'ai-suggestions'}-panel`);
+  });
+  document.querySelectorAll('.optimizer-mode-tab').forEach(t => {
+    const onclick = t.getAttribute('onclick') || '';
+    const match = onclick.match(/switchOptimizerMode\('([^']+)'\)/);
+    if (match) t.classList.toggle('active', match[1] === mode);
+  });
+}
+
+function toggleAIOptimizerModelMenu() {
+  const picker = document.getElementById('ai-optimizer-model-picker');
+  if (!picker) return;
+  const wasOpen = picker.classList.contains('open');
+  document.querySelectorAll('.ai-optimizer-model-picker.open').forEach(p => p.classList.remove('open'));
+  if (!wasOpen) picker.classList.add('open');
+}
+
+function selectAIOptimizerModel(modelId) {
+  aiOptimizerModelId = modelId;
+  document.querySelectorAll('.ai-optimizer-model-picker.open').forEach(p => p.classList.remove('open'));
+  // Update pill label
+  const pill = document.querySelector('#ai-optimizer-model-picker .ai-optimizer-model-pill');
+  const menu = document.querySelector('#ai-optimizer-model-picker .ai-optimizer-model-menu');
+  const model = aiModels.find(m => m.id === modelId);
+  if (pill && model) { pill.innerHTML = `${model.label} <span class="pill-chevron">&#x25BE;</span>`; pill.setAttribute('data-tip', 'Click to switch model'); }
+  if (menu) menu.innerHTML = aiModels.map(m =>
+    `<div class="ai-optimizer-model-option${m.id === modelId ? ' active' : ''}" onclick="selectAIOptimizerModel('${m.id}')">` +
+    `<span class="check">${m.id === modelId ? '●' : ''}</span>${m.label}</div>`
+  ).join('');
+}
+
+function generateAIOptimizerSuggestions() {
+  const btn = document.getElementById('ai-optimizer-gen-btn');
+  const output = document.getElementById('ai-optimizer-suggestions-output');
+  const topSection = document.getElementById('ai-optimizer-top-section');
+  if (!btn || !output) return;
+
+  const wasActive = autoRefreshActive || autoRefreshPaused;
+  if (autoRefreshActive) pauseAutoRefresh();
+
+  const modelParam = aiOptimizerModelId ? `?model=${encodeURIComponent(aiOptimizerModelId)}` : '';
+  const modelName = modelLabel(aiOptimizerModelId) || aiOptimizerModelId;
+
+  btn.disabled = true;
+  if (topSection) topSection.style.display = '';
+  output.innerHTML = `
+    <div class="ai-loading">
+      <div class="ai-spinner"></div>
+      <div>
+        <div>Optimizing with ${modelName}, please wait...</div>
+      </div>
+    </div>
+    <div id="ai-optimizer-cards-streaming" style="margin-top:12px"></div>`;
+
+  streamAIOptimizerFetch(modelParam, output, wasActive);
+}
+
+async function streamAIOptimizerFetch(modelParam, output, wasActive) {
+  const accumulatedSuggestions = [];
+
+  try {
+    const res = await fetch('/api/ai-optimizer' + modelParam, { method: 'POST' });
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop();
+
+      let currentEvent = '';
+      for (const line of lines) {
+        if (line.startsWith('event: ')) {
+          currentEvent = line.slice(7);
+        } else if (line.startsWith('data: ')) {
+          const data = line.slice(6);
+          if (currentEvent === 'model') {
+            const usedModel = JSON.parse(data);
+            const loading = output.querySelector('.ai-loading div:last-child');
+            if (loading) loading.textContent = `Optimizing with ${modelLabel(usedModel)}, please wait...`;
+          } else if (currentEvent === 'suggestion') {
+            const suggestion = JSON.parse(data);
+            accumulatedSuggestions.push(suggestion);
+            // Render cards progressively
+            const streamEl = document.getElementById('ai-optimizer-cards-streaming');
+            if (streamEl) streamEl.innerHTML = renderAIOptimizerCards(accumulatedSuggestions);
+          } else if (currentEvent === 'done') {
+            const { generatedAt, model } = JSON.parse(data);
+            const loading = output.querySelector('.ai-loading');
+            if (loading) loading.remove();
+            // Merge AI suggestions with static and cache
+            const merged = optimizerSuggestions
+              ? mergeAISuggestionsWithStatic(optimizerSuggestions, accumulatedSuggestions)
+              : null;
+            cachedAIOptimizerSuggestions = { suggestions: accumulatedSuggestions, mergedSuggestions: merged, generatedAt, model };
+            renderAIOptimizerSuggestionsComplete(accumulatedSuggestions, generatedAt, model);
+            if (wasActive) resumeAutoRefreshIfPaused();
+          } else if (currentEvent === 'error') {
+            const { message } = JSON.parse(data);
+            const btn = document.getElementById('ai-optimizer-gen-btn');
+            if (btn) { btn.disabled = false; btn.textContent = 'AI Optimize'; }
+            output.innerHTML = `<div class="ai-error">${escHtml(message)}</div>`;
+            if (wasActive) resumeAutoRefreshIfPaused();
+          }
+        }
+      }
+    }
+  } catch (err) {
+    const btn = document.getElementById('ai-optimizer-gen-btn');
+    if (btn) { btn.disabled = false; btn.textContent = 'AI Optimize'; }
+    output.innerHTML = `<div class="ai-error">Failed to connect to server</div>`;
+    if (wasActive) resumeAutoRefreshIfPaused();
+  }
+}
+
+function mergeAISuggestionsWithStatic(staticSuggestions, aiSuggestions) {
+  const normalize = (s) => (s || '').toLowerCase().replace(/[^a-z0-9 ]/g, '').trim();
+  const priorityOrder = { high: 0, medium: 1, low: 2 };
+
+  const result = {
+    skills: [...staticSuggestions.skills],
+    claudeMd: [...staticSuggestions.claudeMd],
+    agents: [...staticSuggestions.agents],
+    plugins: [...staticSuggestions.plugins],
+  };
+
+  for (const ai of aiSuggestions) {
+    const type = ai.type;
+    if (!result[type]) continue;
+    const aiTitle = normalize(ai.title);
+    const idx = result[type].findIndex(s => {
+      const st = normalize(s.title || s.name || s.use_case || '');
+      return st === aiTitle || st.includes(aiTitle) || aiTitle.includes(st);
+    });
+    if (idx >= 0) {
+      result[type][idx] = { ...result[type][idx], ...ai, aiEnhanced: true };
+    } else {
+      result[type].push({ ...ai, aiNew: true });
+    }
+  }
+
+  for (const type of Object.keys(result)) {
+    result[type].sort((a, b) => (priorityOrder[a.priority] ?? 1) - (priorityOrder[b.priority] ?? 1));
+  }
+  return result;
+}
+
+function renderAIOptimizerCards(suggestions) {
+  if (!suggestions.length) return '';
+  const groups = { skills: [], claudeMd: [], agents: [], plugins: [] };
+  for (const s of suggestions) {
+    if (groups[s.type]) groups[s.type].push(s);
+  }
+  const typeLabels = { skills: 'Skills', claudeMd: 'CLAUDE.md', agents: 'Agents', plugins: 'Plugins' };
+  return Object.entries(groups).filter(([, items]) => items.length > 0).map(([type, items]) => `
+    <div class="ai-suggestions-type-group">
+      <div class="ai-suggestions-type-label">${typeLabels[type] || type}</div>
+      ${renderSuggestionList(type, items, true)}
+    </div>`).join('');
+}
+
+function renderAIOptimizerSuggestionsComplete(suggestions, generatedAt, model) {
+  const output = document.getElementById('ai-optimizer-suggestions-output');
+  const btn = document.getElementById('ai-optimizer-gen-btn');
+  const topSection = document.getElementById('ai-optimizer-top-section');
+  if (!output) return;
+  if (btn) { btn.disabled = false; btn.textContent = 'AI Optimize'; }
+  if (topSection) topSection.style.display = '';
+  output.innerHTML = `
+    <div>${renderAIOptimizerCards(suggestions)}</div>
+    <div class="optimizer-timestamp">
+      Generated ${new Date(generatedAt).toLocaleString()}${model ? ' · ' + modelLabel(model) : ''}
+      <div style="margin-top:8px">
+        <button class="optimizer-generate-btn" style="padding:4px 12px;font-size:11px;background:var(--surface2);border-color:var(--border);color:var(--text2)" onclick="clearAIOptimizerSuggestions()">Clear</button>
+      </div>
+    </div>`;
+}
+
+function clearAIOptimizerSuggestions() {
+  cachedAIOptimizerSuggestions = null;
+  fetch('/api/ai-optimizer', { method: 'DELETE' }).catch(() => {});
+  const output = document.getElementById('ai-optimizer-suggestions-output');
+  const btn = document.getElementById('ai-optimizer-gen-btn');
+  const topSection = document.getElementById('ai-optimizer-top-section');
+  if (output) output.innerHTML = '';
+  if (topSection) topSection.style.display = 'none';
+  if (btn) { btn.disabled = false; btn.textContent = 'AI Optimize'; }
+}
+
 function generateOptimizerContent() {
   const btn = document.getElementById('optimizer-gen-btn');
   const output = document.getElementById('optimizer-ai-output');
@@ -2071,7 +2403,7 @@ function renderOptimizerAIComplete(content, generatedAt, model) {
     <div class="optimizer-ai-content">${renderOptimizerMarkdown(escHtml(content))}</div>
     <div class="optimizer-timestamp">
       Generated ${new Date(generatedAt).toLocaleString()}${model ? ' · ' + modelLabel(model) : ''}
-      <button class="optimizer-generate-btn" style="padding:4px 12px;font-size:11px;margin-left:8px" onclick="generateOptimizerContent()">Regenerate</button>
+      <button class="optimizer-generate-btn" style="padding:4px 12px;font-size:11px;margin-left:8px" onclick="generateOptimizerContent()" data-warn="⚠ This runs a real Claude session and will show up in your own usage stats. Each generation costs roughly the same as a short coding task.">Regenerate</button>
       <button class="optimizer-generate-btn" style="padding:4px 12px;font-size:11px;background:var(--surface2);color:var(--text2)" onclick="clearOptimizerAI()">Clear</button>
     </div>`;
 }
@@ -2566,7 +2898,7 @@ sse.onmessage = async (e) => {
     location.reload();
   } else {
     currentData = await fetchData();
-    if (currentView === 'dashboard') renderDashboard(currentData);
+    if (currentView === 'dashboard') { renderDashboard(currentData); applyAIState(); }
   }
 };
 </script>

package/src/ai-analyze.js

@@ -458,3 +458,225 @@ export function getCachedSuggestions() {
 export function clearCachedSuggestions() {
   cachedSuggestionResult = null;
 }
+
+// --- AI Optimizer Suggestions (structured suggestion objects) ---
+
+function buildOptimizerSuggestionsPrompt(scoredData, staticSuggestions) {
+  const { sessions, badges, overallScore } = scoredData;
+  const totalCost = sessions.reduce((s, x) => s + x.totals.estimatedCost, 0);
+  const projectNames = [...new Set(sessions.map((s) => s.project).filter(Boolean))].slice(0, 5);
+  const badgeNames = badges.map((b) => `${b.negative ? "⚠ " : "✓ "}${b.name}`).join(", ");
+
+  const staticSummary = [
+    ...staticSuggestions.skills.map(s => `skills: "${s.title}" (${s.priority})`),
+    ...staticSuggestions.claudeMd.map(s => `claudeMd: "${s.title}" (${s.priority})`),
+    ...staticSuggestions.agents.map(s => `agents: "${s.title || s.name}" (${s.priority})`),
+    ...staticSuggestions.plugins.map(s => `plugins: "${s.title || s.name}" (${s.priority})`),
+  ].join("\n");
+
+  return `You are analyzing a developer's Claude Code session data to generate workflow improvement suggestions.
+
+## Their Usage Context
+- ${sessions.length} total sessions across ${projectNames.length} project(s): ${projectNames.join(", ")}
+- Overall efficiency score: ${overallScore}/100
+- Total spend: $${totalCost.toFixed(2)}
+- Badges: ${badgeNames || "none"}
+
+## Existing rule-based suggestions (already shown to user)
+${staticSummary || "none"}
+
+## Your task
+Generate 4-8 workflow suggestions based on a deeper analysis of their patterns. You may enhance existing rule-based suggestions with better rationale, or add entirely new suggestions the rules missed.
+
+Output ONLY a series of JSON objects, one per line, with NO other text, markdown, or explanation. Each line must be valid JSON in exactly one of these formats:
+
+For skills: {"type":"skills","title":"Short action title","rationale":"Why this helps, referencing their specific data","priority":"high","trigger":"/slash-command"}
+For CLAUDE.md: {"type":"claudeMd","title":"Short title","rationale":"Why this helps","priority":"medium","scope":"global","projectName":"optional project name"}
+For agents: {"type":"agents","title":"Agent name","rationale":"Why this helps","priority":"low","use_case":"One-line description"}
+For plugins: {"type":"plugins","title":"Plugin name","rationale":"Why this helps","priority":"high","installCmd":"mcp install command"}
+
+Rules:
+- Output 4-8 total suggestions
+- Reference specific patterns from their data (costs, badges, session counts)
+- Prioritize suggestions NOT already in the rule-based list, or meaningfully improve on them with richer rationale
+- Output ONLY JSON lines, nothing else`;
+}
+
+let cachedOptimizerSuggestionsResult = null;
+
+/**
+ * Stream AI-generated structured suggestion objects.
+ * Emits: { event: "model", data: modelId }
+ *        { event: "suggestion", data: { type, title, rationale, priority, ... } }
+ *        { event: "done", data: { generatedAt, model } }
+ *        { event: "error", data: { message } }
+ */
+export function streamAIOptimizerSuggestions(scoredData, staticSuggestions, res, modelId) {
+  const prompt = buildOptimizerSuggestionsPrompt(scoredData, staticSuggestions);
+
+  const args = ["-p", "-", "--output-format", "stream-json", "--verbose"];
+  if (modelId) args.push("--model", modelId);
+
+  const resolvedModel = modelId || "default";
+  console.log(`[ai-optimizer] Starting (model: ${resolvedModel})`);
+  res.write(`event: model\ndata: ${JSON.stringify(resolvedModel)}\n\n`);
+
+  const child = spawn("claude", args, {
+    stdio: ["pipe", "pipe", "pipe"],
+    env: cleanEnv,
+  });
+  activeChildren.add(child);
+
+  child.stdin.write(prompt);
+  child.stdin.end();
+
+  const aiSuggestions = [];
+  let errOutput = "";
+  let detectedModel = modelId || detectedDefaultModel || null;
+  let lineBuf = "";
+  let textBuf = "";
+
+  child.stdout.on("data", (buf) => {
+    lineBuf += buf.toString();
+    const lines = lineBuf.split("\n");
+    lineBuf = lines.pop();
+    for (const line of lines) {
+      if (!line.trim()) continue;
+      try {
+        const obj = JSON.parse(line);
+        if (obj.type === "system" || obj.type === "rate_limit_event") continue;
+        if (obj.type === "result") {
+          const models = Object.keys(obj.modelUsage || {});
+          if (models.length > 0) {
+            detectedModel = models[0];
+            if (!modelId) detectedDefaultModel = models[0];
+          }
+          continue;
+        }
+        if (obj.type === "assistant" && obj.message?.content) {
+          for (const block of obj.message.content) {
+            if (block.type === "text" && block.text) {
+              textBuf += block.text;
+              // Try to parse complete JSON lines from the text buffer
+              const textLines = textBuf.split("\n");
+              textBuf = textLines.pop(); // keep last (possibly incomplete) line
+              for (const tl of textLines) {
+                const trimmed = tl.trim();
+                if (!trimmed) continue;
+                try {
+                  const suggestion = JSON.parse(trimmed);
+                  if (suggestion.type && suggestion.title) {
+                    aiSuggestions.push(suggestion);
+                    res.write(`event: suggestion\ndata: ${JSON.stringify(suggestion)}\n\n`);
+                  }
+                } catch {
+                  // not a valid JSON suggestion line, skip
+                }
+              }
+            }
+          }
+          if (obj.message.model && !detectedModel) {
+            detectedModel = obj.message.model;
+            if (!modelId) detectedDefaultModel = obj.message.model;
+          }
+        }
+      } catch {
+        // not stream-json, treat as raw text
+      }
+    }
+  });
+
+  child.stderr.on("data", (buf) => {
+    errOutput += buf.toString();
+  });
+
+  child.on("error", (err) => {
+    const message =
+      err.code === "ENOENT"
+        ? "Claude CLI not found. Make sure `claude` is installed and in your PATH."
+        : `Claude CLI error: ${err.message}`;
+    res.write(`event: error\ndata: ${JSON.stringify({ message })}\n\n`);
+    res.end();
+  });
+
+  child.on("close", (code) => {
+    activeChildren.delete(child);
+    // Flush any remaining text buffer
+    if (textBuf.trim()) {
+      try {
+        const suggestion = JSON.parse(textBuf.trim());
+        if (suggestion.type && suggestion.title) {
+          aiSuggestions.push(suggestion);
+          res.write(`event: suggestion\ndata: ${JSON.stringify(suggestion)}\n\n`);
+        }
+      } catch { /* ignore */ }
+    }
+    if (code !== 0 && aiSuggestions.length === 0) {
+      const message = errOutput.trim() || `Claude CLI exited with code ${code}`;
+      console.error(`[ai-optimizer] Failed (exit ${code}): ${message}`);
+      res.write(`event: error\ndata: ${JSON.stringify({ message })}\n\n`);
+    } else {
+      const finalModel = detectedModel || resolvedModel;
+      console.log(`[ai-optimizer] Done (model: ${finalModel}, ${aiSuggestions.length} suggestions)`);
+      cachedOptimizerSuggestionsResult = {
+        suggestions: aiSuggestions,
+        generatedAt: new Date().toISOString(),
+        model: finalModel,
+      };
+      res.write(`event: done\ndata: ${JSON.stringify({ generatedAt: cachedOptimizerSuggestionsResult.generatedAt, model: finalModel })}\n\n`);
+    }
+    res.end();
+  });
+
+  res.on("close", () => {
+    if (child.exitCode === null) child.kill();
+  });
+}
+
+export function getCachedOptimizerSuggestions() {
+  return cachedOptimizerSuggestionsResult;
+}
+
+export function clearCachedOptimizerSuggestions() {
+  cachedOptimizerSuggestionsResult = null;
+}
+
+/**
+ * Merge AI-generated suggestions with static rule-based ones.
+ * AI suggestions matching an existing one (by type + title similarity) replace it;
+ * novel AI suggestions are appended.
+ */
+export function mergeAISuggestionsWithStatic(staticSuggestions, aiSuggestions) {
+  const normalize = (s) => (s || "").toLowerCase().replace(/[^a-z0-9 ]/g, "").trim();
+  const priorityOrder = { high: 0, medium: 1, low: 2 };
+
+  const result = {
+    skills: [...staticSuggestions.skills],
+    claudeMd: [...staticSuggestions.claudeMd],
+    agents: [...staticSuggestions.agents],
+    plugins: [...staticSuggestions.plugins],
+  };
+
+  for (const ai of aiSuggestions) {
+    const type = ai.type;
+    if (!result[type]) continue;
+
+    const aiTitle = normalize(ai.title);
+    const idx = result[type].findIndex((s) => {
+      const st = normalize(s.title || s.name || s.use_case || "");
+      return st === aiTitle || st.includes(aiTitle) || aiTitle.includes(st);
+    });
+
+    if (idx >= 0) {
+      result[type][idx] = { ...result[type][idx], ...ai };
+    } else {
+      result[type].push(ai);
+    }
+  }
+
+  for (const type of Object.keys(result)) {
+    result[type].sort((a, b) => (priorityOrder[a.priority] ?? 1) - (priorityOrder[b.priority] ?? 1));
+  }
+
+  return result;
+}

package/src/server.js

@@ -7,7 +7,7 @@ import { execFile } from "node:child_process";
 import { promisify } from "node:util";
 import { parseAllSessions } from "./parser.js";
 import { scoreAllSessions } from "./scorer.js";
-import { streamAIAnalysis, getCachedAnalysis, clearCachedAnalysis, getAvailableModels, killActiveProcesses, detectDefaultModel, buildPrompt, buildDataSnapshot, streamAISuggestions, getCachedSuggestions, clearCachedSuggestions } from "./ai-analyze.js";
+import { streamAIAnalysis, getCachedAnalysis, clearCachedAnalysis, getAvailableModels, killActiveProcesses, detectDefaultModel, buildPrompt, buildDataSnapshot, streamAISuggestions, getCachedSuggestions, clearCachedSuggestions, streamAIOptimizerSuggestions, getCachedOptimizerSuggestions, clearCachedOptimizerSuggestions } from "./ai-analyze.js";
 import { generateSuggestions } from "./suggestions.js";
 
 const execFileAsync = promisify(execFile);
@@ -207,6 +207,29 @@ export function startServer(port = 6543) {
         return json(res, cached || { content: null });
       }
 
+      if (url.pathname === "/api/ai-optimizer" && req.method === "POST") {
+        const data = await getData();
+        const suggestions = generateSuggestions(data);
+        const modelId = url.searchParams.get("model") || "";
+        res.writeHead(200, {
+          "Content-Type": "text/event-stream",
+          "Cache-Control": "no-cache",
+          Connection: "keep-alive",
+        });
+        streamAIOptimizerSuggestions(data, suggestions, res, modelId || undefined);
+        return;
+      }
+
+      if (url.pathname === "/api/ai-optimizer" && req.method === "DELETE") {
+        clearCachedOptimizerSuggestions();
+        return json(res, { ok: true });
+      }
+
+      if (url.pathname === "/api/ai-optimizer" && req.method === "GET") {
+        const cached = getCachedOptimizerSuggestions();
+        return json(res, cached || { suggestions: null });
+      }
+
       if (url.pathname === "/api/refresh") {
         const data = await getData(true);
         return json(res, { sessions: data.sessions.length, overallScore: data.overallScore });