@kosinal/claude-code-dashboard 0.0.5 → 0.0.6

package/dist/bin.js

@@ -13,7 +13,6 @@ var MARKER_QUICK = "__claude_code_dashboard_quick__";
 var MARKER_INSTALL = "__claude_code_dashboard_install__";
 var MARKER_LEGACY = "__claude_code_dashboard__";
 var HOOK_EVENTS = ["SessionStart", "UserPromptSubmit", "Stop", "SessionEnd"];
-var INTERACTIVE_TOOLS_MATCHER = "ExitPlanMode|AskUserQuestion";
 function getConfigDir(configDir) {
   return configDir ?? path.join(os.homedir(), ".claude");
 }
@@ -104,7 +103,6 @@ function installHooks(port, configDir) {
     settings.hooks.PreToolUse = [];
   }
   settings.hooks.PreToolUse.push({
-    matcher: INTERACTIVE_TOOLS_MATCHER,
     hooks: [
       {
         type: "command",
@@ -142,7 +140,6 @@ function installHooksWithCommand(command, configDir) {
     settings.hooks.PreToolUse = [];
   }
   settings.hooks.PreToolUse.push({
-    matcher: INTERACTIVE_TOOLS_MATCHER,
     hooks: [
       {
         type: "command",
@@ -304,7 +301,7 @@ async function waitForServer(maxWaitMs = 10000) {
   let delay = 100;
   while (Date.now() - start < maxWaitMs) {
     try {
-      await postHook('{"session_id":"ping","hook_event_name":"Ping"}');
+      await httpPing();
       return true;
     } catch {
       await new Promise(r => setTimeout(r, delay));
@@ -762,6 +759,43 @@ function getDashboardHtml() {
 
   .connection-dot.connected { background: #3fb950; }
 
+  .notif-banner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: rgba(210, 153, 34, 0.15);
+    border: 1px solid #d29922;
+    border-radius: 6px;
+    padding: 10px 16px;
+    margin-bottom: 24px;
+    font-size: 13px;
+    color: #d29922;
+    animation: bannerFadeIn 0.2s ease-out;
+  }
+
+  .notif-banner button {
+    background: #d29922;
+    color: #0d1117;
+    border: none;
+    border-radius: 4px;
+    padding: 4px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    white-space: nowrap;
+    margin-left: 12px;
+    transition: background 0.2s;
+  }
+
+  .notif-banner button:hover {
+    background: #e3b341;
+  }
+
+  @keyframes bannerFadeIn {
+    from { opacity: 0; transform: translateY(-4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
   .overlay {
     position: fixed;
     top: 0;
@@ -985,6 +1019,7 @@ function getDashboardHtml() {
     </div>
   </div>
 </header>
+<div id="notifBanner"></div>
 <div id="overlayContainer"></div>
 <main id="app">
   <div class="empty-state">
@@ -1006,18 +1041,51 @@ function getDashboardHtml() {
   var btnStop = document.getElementById('btnStop');
   var btnRestart = document.getElementById('btnRestart');
   var notifToggle = document.getElementById('notifToggle');
+  var notifBanner = document.getElementById('notifBanner');
   var notificationsEnabled = localStorage.getItem('notificationsEnabled') !== 'false';
   var sessions = [];
   var previousStatuses = {};
   var initialized = false;
   var es = null;
+  var bannerTimer = null;
+
+  function showNotifBanner() {
+    if (bannerTimer) { clearTimeout(bannerTimer); bannerTimer = null; }
+    notifBanner.innerHTML =
+      '<div class="notif-banner">' +
+        '<span>Notifications enabled. Push button to test.</span>' +
+        '<button id="btnTestNotif">Test</button>' +
+      '</div>';
+    document.getElementById('btnTestNotif').onclick = function() {
+      if ('Notification' in window && Notification.permission === 'granted') {
+        new Notification('Claude Code - Test', { body: 'Notifications are working!' });
+      } else if ('Notification' in window && Notification.permission === 'default') {
+        Notification.requestPermission().then(function(p) {
+          if (p === 'granted') {
+            new Notification('Claude Code - Test', { body: 'Notifications are working!' });
+          }
+        });
+      }
+    };
+    bannerTimer = setTimeout(hideNotifBanner, 10000);
+  }
+
+  function hideNotifBanner() {
+    notifBanner.innerHTML = '';
+    if (bannerTimer) { clearTimeout(bannerTimer); bannerTimer = null; }
+  }
 
   notifToggle.checked = notificationsEnabled;
   notifToggle.addEventListener('change', function() {
     notificationsEnabled = notifToggle.checked;
     localStorage.setItem('notificationsEnabled', notificationsEnabled ? 'true' : 'false');
-    if (notificationsEnabled && 'Notification' in window && Notification.permission === 'default') {
-      Notification.requestPermission();
+    if (notificationsEnabled) {
+      if ('Notification' in window && Notification.permission === 'default') {
+        Notification.requestPermission();
+      }
+      showNotifBanner();
+    } else {
+      hideNotifBanner();
     }
   });
 
@@ -1288,7 +1356,9 @@ data: ${data}
             return;
           }
           store.handleEvent(payload);
-          broadcast();
+          if (payload.hook_event_name !== "Ping") {
+            broadcast();
+          }
           res.writeHead(200, { "Content-Type": "application/json" });
           res.end(JSON.stringify({ ok: true }));
         } catch {
@@ -1364,41 +1434,51 @@ data: ${initData}
 var EVENT_TO_STATUS = {
   SessionStart: "done",
   UserPromptSubmit: "running",
-  Stop: "done",
-  PreToolUse: "waiting"
+  Stop: "done"
 };
+var INTERACTIVE_TOOLS = /* @__PURE__ */ new Set(["ExitPlanMode", "AskUserQuestion"]);
 function createStore() {
   const sessions = /* @__PURE__ */ new Map();
   return {
     handleEvent(payload) {
       const { session_id, hook_event_name, cwd } = payload;
-      if (hook_event_name === "SessionEnd") {
-        sessions.delete(session_id);
+      if (hook_event_name === "Ping") {
         return null;
       }
-      if (hook_event_name === "Ping") {
+      if (hook_event_name === "SessionEnd") {
+        sessions.delete(session_id);
         return null;
       }
-      const status = EVENT_TO_STATUS[hook_event_name];
-      if (!status) {
-        const existing2 = sessions.get(session_id);
-        if (existing2) return existing2;
-        const session2 = {
-          sessionId: session_id,
-          status: "waiting",
-          cwd: cwd ?? "",
-          lastEvent: hook_event_name,
-          updatedAt: Date.now(),
-          startedAt: Date.now()
-        };
-        sessions.set(session_id, session2);
-        return session2;
+      let status;
+      let displayEvent;
+      if (hook_event_name === "PreToolUse") {
+        const toolName = typeof payload.tool_name === "string" ? payload.tool_name : "";
+        displayEvent = toolName || hook_event_name;
+        status = INTERACTIVE_TOOLS.has(toolName) ? "waiting" : "running";
+      } else {
+        const mapped = EVENT_TO_STATUS[hook_event_name];
+        if (!mapped) {
+          const existing2 = sessions.get(session_id);
+          if (existing2) return existing2;
+          const session2 = {
+            sessionId: session_id,
+            status: "waiting",
+            cwd: cwd ?? "",
+            lastEvent: hook_event_name,
+            updatedAt: Date.now(),
+            startedAt: Date.now()
+          };
+          sessions.set(session_id, session2);
+          return session2;
+        }
+        status = mapped;
+        displayEvent = hook_event_name;
       }
       const now = Date.now();
       const existing = sessions.get(session_id);
       if (existing) {
         existing.status = status;
-        existing.lastEvent = hook_event_name;
+        existing.lastEvent = displayEvent;
         existing.updatedAt = now;
         if (cwd) existing.cwd = cwd;
         return existing;
@@ -1407,7 +1487,7 @@ function createStore() {
         sessionId: session_id,
         status,
         cwd: cwd ?? "",
-        lastEvent: hook_event_name,
+        lastEvent: displayEvent,
         updatedAt: now,
         startedAt: now
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kosinal/claude-code-dashboard",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "description": "Real-time browser dashboard for Claude Code session states",
   "bin": {