npm - claude-session-insights - Versions diffs - 0.3.1 → 0.3.2 - Mend

claude-session-insights 0.3.1 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -18,6 +18,12 @@ Think "Spotify Wrapped" for your Claude Code usage — scores, summaries, badges
 - **Auto-Refresh** — optional 15-second polling to keep the dashboard current while you work
 - **Account Info** — displays your subscription type, org, and email from `claude auth status`
+## Screenshots
+<img width="1080" height="880" alt="image" src="https://github.com/user-attachments/assets/d9914527-4ea5-49ed-aa8a-09a2896b1c67" />
+<img width="1080" height="845" alt="image" src="https://github.com/user-attachments/assets/20799313-617c-4bc6-a999-76a0d95e2d8e" />
+<img width="1080" height="823" alt="image" src="https://github.com/user-attachments/assets/249b4c78-8849-4db6-91bf-5ac87b4defbc" />
 ## Quick Start
 ```bash

package/package.json CHANGED Viewed

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

package/public/index.html CHANGED Viewed

@@ -698,10 +698,43 @@
     color: var(--text3); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px;
   }
   .share-close:hover { color: var(--text); }
+  /* Session drawer */
+  .session-drawer-overlay {
+    position: fixed; inset: 0; z-index: 500;
+    background: rgba(0,0,0,0.4); backdrop-filter: blur(2px);
+    opacity: 0; pointer-events: none; transition: opacity 0.25s;
+  }
+  .session-drawer-overlay.open { opacity: 1; pointer-events: auto; }
+  .session-drawer {
+    position: absolute; top: 0; right: 0; bottom: 0;
+    width: min(840px, 92vw);
+    background: var(--bg); overflow-y: auto;
+    padding: 24px 32px;
+    transform: translateX(100%);
+    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: -4px 0 40px rgba(0,0,0,0.18);
+  }
+  .session-drawer-overlay.open .session-drawer { transform: translateX(0); }
+  .drawer-topbar {
+    display: flex; justify-content: space-between; align-items: center;
+    margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
+  }
+  .drawer-topbar-label { font-size: 11px; color: var(--text3); font-weight: 500; }
+  .drawer-close-btn {
+    background: var(--surface2); border: 1px solid var(--border); color: var(--text2);
+    width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 17px; line-height: 1; padding: 0; transition: all 0.15s; flex-shrink: 0;
+  }
+  .drawer-close-btn:hover { background: var(--surface3); color: var(--text); border-color: var(--border-hover); }
 </style>
 </head>
 <body>
 <div id="app" class="loading">Loading sessions...</div>
+<div class="session-drawer-overlay" id="session-drawer-overlay" onclick="if(event.target===this)closeSessionDrawer()">
+  <div class="session-drawer" id="session-drawer"></div>
+</div>
 <script>
 const $ = (s) => document.querySelector(s);
@@ -1202,7 +1235,12 @@ function renderDashboard(data) {
 async function openSession(id) {
   currentView = 'session';
-  $('#app').innerHTML = '<div class="loading">Loading session...</div>';
+  const overlay = document.getElementById('session-drawer-overlay');
+  const drawer = document.getElementById('session-drawer');
+  drawer.innerHTML = '<div class="loading">Loading session...</div>';
+  overlay.classList.add('open');
+  document.body.style.overflow = 'hidden';
+  if (autoRefreshActive) pauseAutoRefresh();
   const s = await fetchSession(id);
   renderSession(s);
 }
@@ -1218,8 +1256,11 @@ function renderSession(s) {
   let cumCost = 0;
-  $('#app').innerHTML = `
-    <button class="back-btn" onclick="goBack()">&larr; Back to dashboard</button>
+  document.getElementById('session-drawer').innerHTML = `
+    <div class="drawer-topbar">
+      <span class="drawer-topbar-label">Session Detail</span>
+      <button class="drawer-close-btn" onclick="closeSessionDrawer()" title="Close (Esc)">&times;</button>
+    </div>
     <div class="session-header">
       <h2>${escHtml(s.title)}</h2>
@@ -1300,13 +1341,20 @@ function renderSession(s) {
   if (costCanvas) drawCostPerTurn(costCanvas, s.turns);
 }
+function closeSessionDrawer() {
+  document.getElementById('session-drawer-overlay').classList.remove('open');
+  document.body.style.overflow = '';
+  currentView = 'dashboard';
+  resumeAutoRefreshIfPaused();
+}
 function toggleScoreBreakdown() {
   const el = document.getElementById('score-breakdown-overlay');
   if (el) el.classList.toggle('open');
 }
 function goBack() {
-  if (currentData) { renderDashboard(currentData); loadCachedAIInsights(); }
+  closeSessionDrawer();
 }
 // --- AI Insights ---
@@ -1314,6 +1362,7 @@ function goBack() {
 let aiModels = [];
 let aiDefaultModel = null;
 let aiDefaultModelLabel = null;
+let cachedAIRender = null; // persists AI insights across renderDashboard calls
 function renderMarkdown(text) {
   return text
@@ -1374,7 +1423,16 @@ document.addEventListener('click', () => {
   document.querySelectorAll('.ai-model-picker.open').forEach(p => p.classList.remove('open'));
 });
+function applyAIState() {
+  if (cachedAIRender) {
+    renderAIComplete(cachedAIRender.content, cachedAIRender.generatedAt, cachedAIRender.model);
+  } else {
+    renderModelPicker();
+  }
+}
 function renderAIComplete(content, generatedAt, model) {
+  cachedAIRender = { content, generatedAt, model };
   const body = document.getElementById('ai-insights-body');
   if (!body) return;
   body.innerHTML = `
@@ -1393,6 +1451,7 @@ function renderAIComplete(content, generatedAt, model) {
 }
 function clearAIInsights() {
+  cachedAIRender = null;
   fetch('/api/ai-analyze', { method: 'DELETE' }).catch(() => {});
   const body = document.getElementById('ai-insights-body');
   if (!body) return;
@@ -1871,6 +1930,7 @@ async function doRefresh() {
   btn.classList.add('spinning');
   currentData = await fetchData(true);
   renderDashboard(currentData);
+  applyAIState();
   btn.classList.remove('spinning');
 }
@@ -1897,6 +1957,7 @@ function startAutoRefresh() {
         if (btn) btn.classList.add('spinning');
         currentData = await fetchData(true);
         renderDashboard(currentData);
+        applyAIState();
         if (btn) btn.classList.remove('spinning');
         updateCountdownLabel();
       })();
@@ -1935,13 +1996,14 @@ function resumeAutoRefreshIfPaused() {
   }
 }
-// Clear AI insights on fresh page load (not on in-app refresh)
-fetch('/api/ai-analyze', { method: 'DELETE' }).catch(() => {});
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape' && currentView === 'session') closeSessionDrawer();
+});
 fetchData().then(data => {
   currentData = data;
   renderDashboard(data);
-  loadCachedAIInsights(); // loads model list (cache already cleared above)
+  loadCachedAIInsights();
   if (autoRefreshActive) startAutoRefresh();
 });