@delt/claude-alarm 0.7.1 → 0.8.1

package/dist/dashboard/index.html

@@ -150,11 +150,43 @@
     padding: 12px;
     margin-bottom: 8px;
     cursor: pointer;
-    transition: border-color 0.15s;
+    transition: border-color 0.15s, opacity 0.15s;
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
   }
   .session-card:hover, .session-card.active {
     border-color: var(--accent);
   }
+  .session-card.dragging { opacity: 0.4; }
+  .session-card.drag-over { border-color: var(--accent); border-style: dashed; }
+  .session-body { flex: 1; min-width: 0; }
+  .drag-handle {
+    flex-shrink: 0;
+    color: var(--text-dim);
+    font-size: 14px;
+    line-height: 1.4;
+    cursor: grab;
+    opacity: 0.45;
+    user-select: none;
+    padding-top: 1px;
+    transition: opacity 0.15s, color 0.15s;
+  }
+  .session-card:hover .drag-handle { opacity: 0.8; }
+  .drag-handle:hover { opacity: 1 !important; color: var(--accent); }
+  .drag-handle:active { cursor: grabbing; }
+  .name-edit-input {
+    width: 100%;
+    background: var(--bg);
+    border: 1px solid var(--accent);
+    border-radius: 4px;
+    color: var(--text);
+    font-size: 14px;
+    font-weight: 500;
+    padding: 1px 5px;
+    outline: none;
+    font-family: inherit;
+  }
   .session-name {
     font-size: 14px;
     font-weight: 500;
@@ -940,6 +972,7 @@
     unread: {},
     waitingReply: {},
     permissionRequests: {},  // sessionId -> [{ requestId, toolName, description, inputPreview, timestamp, resolved, behavior }]
+    sessionMeta: { names: {}, order: [] },  // custom names + order, keyed by volatile sessionId
   };
 
   const $ = (sel) => document.querySelector(sel);
@@ -978,6 +1011,67 @@
 
   loadMessages();
 
+  // --- Session meta persistence (custom names + order) ---
+  // Keyed by sessionId, which is volatile: same id survives a browser refresh
+  // (terminal stays alive) but changes on reconnect/server restart, so renamed
+  // names and custom order naturally reset when a session truly ends.
+  const META_STORAGE_KEY = 'claude-alarm-session-meta';
+
+  function saveSessionMeta() {
+    try { localStorage.setItem(META_STORAGE_KEY, JSON.stringify(state.sessionMeta)); } catch {}
+  }
+
+  function loadSessionMeta() {
+    try {
+      const raw = localStorage.getItem(META_STORAGE_KEY);
+      if (raw) {
+        const data = JSON.parse(raw);
+        state.sessionMeta = {
+          names: (data && typeof data.names === 'object' && data.names) || {},
+          order: Array.isArray(data && data.order) ? data.order : [],
+        };
+      }
+    } catch {}
+  }
+
+  // Drop meta + messages for sessions that no longer exist. Must run only after
+  // a sessions_list arrives (state.sessions populated), never on initial load.
+  function pruneSessionData() {
+    const live = new Set(Object.keys(state.sessions));
+    let metaChanged = false;
+    for (const id of Object.keys(state.sessionMeta.names)) {
+      if (!live.has(id)) { delete state.sessionMeta.names[id]; metaChanged = true; }
+    }
+    const trimmedOrder = state.sessionMeta.order.filter(id => live.has(id));
+    if (trimmedOrder.length !== state.sessionMeta.order.length) {
+      state.sessionMeta.order = trimmedOrder;
+      metaChanged = true;
+    }
+    if (metaChanged) saveSessionMeta();
+
+    let msgChanged = false;
+    for (const id of Object.keys(state.messages)) {
+      if (!live.has(id)) { delete state.messages[id]; msgChanged = true; }
+    }
+    if (msgChanged) saveMessages();
+  }
+
+  loadSessionMeta();
+
+  // Ordered session ids: explicitly-ordered ones first (in saved order),
+  // then any newly-arrived sessions in registration order.
+  function getOrderedSessionIds() {
+    const liveSet = new Set(Object.keys(state.sessions));
+    const ordered = state.sessionMeta.order.filter(id => liveSet.has(id));
+    const orderedSet = new Set(ordered);
+    const rest = Object.keys(state.sessions).filter(id => !orderedSet.has(id));
+    return [...ordered, ...rest];
+  }
+
+  function sessionDisplayName(s) {
+    return state.sessionMeta.names[s.id] || s.displayName || s.name;
+  }
+
   // --- Theme ---
   function initTheme() {
     const saved = localStorage.getItem('claude-alarm-theme') || 'dark';
@@ -1054,6 +1148,7 @@
       case 'sessions_list':
         state.sessions = {};
         msg.sessions.forEach(s => { state.sessions[s.id] = s; });
+        pruneSessionData();
         renderSessions();
         break;
       case 'session_connected':
@@ -1063,6 +1158,9 @@
         break;
       case 'session_disconnected':
         delete state.sessions[msg.sessionId];
+        delete state.sessionMeta.names[msg.sessionId];
+        state.sessionMeta.order = state.sessionMeta.order.filter(id => id !== msg.sessionId);
+        saveSessionMeta();
         if (state.selectedSession === msg.sessionId) { state.selectedSession = null; renderMessages(); }
         renderSessions();
         break;
@@ -1121,7 +1219,7 @@
   // --- Render ---
   function renderSessions() {
     const el = $('#sessionsList');
-    const ids = Object.keys(state.sessions);
+    const ids = getOrderedSessionIds();
     if (!ids.length) {
       el.innerHTML = '<div class="no-sessions">No active sessions.<br>Click + to see connection commands.</div>';
       return;
@@ -1131,18 +1229,128 @@
       const active = state.selectedSession === id ? ' active' : '';
       const cwdDisplay = s.cwd ? s.cwd.replace(/^.*[/\\]/, '') : '';
       const unread = state.unread[id] || 0;
-      const dispName = s.displayName || s.name;
+      const dispName = sessionDisplayName(s);
       const connTime = new Date(s.connectedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
       return `<div class="session-card${active}" data-id="${id}">
-        <div class="session-name">${esc(dispName)}${unread ? `<span class="unread-badge">${unread}</span>` : ''}</div>
-        ${cwdDisplay ? `<div class="session-cwd" title="${esc(s.cwd)}">${esc(cwdDisplay)} · ${connTime}</div>` : `<div class="session-cwd">${connTime}</div>`}
-        <span class="session-status ${s.status}">${s.status.replace('_', ' ')}</span>
+        <span class="drag-handle" title="Drag to reorder">&#10303;</span>
+        <div class="session-body">
+          <div class="session-name" title="Double-click to rename">${esc(dispName)}${unread ? `<span class="unread-badge">${unread}</span>` : ''}</div>
+          ${cwdDisplay ? `<div class="session-cwd" title="${esc(s.cwd)}">${esc(cwdDisplay)} &middot; ${connTime}</div>` : `<div class="session-cwd">${connTime}</div>`}
+          <span class="session-status ${s.status}">${s.status.replace('_', ' ')}</span>
+        </div>
       </div>`;
     }).join('');
+    bindSessionCards(el);
+    updateImageUI();
+  }
+
+  function bindSessionCards(el) {
     el.querySelectorAll('.session-card').forEach(card => {
-      card.addEventListener('click', () => selectSession(card.dataset.id));
+      const id = card.dataset.id;
+      card.addEventListener('click', (e) => {
+        if (e.target.closest('.drag-handle')) return;
+        if (e.target.classList.contains('name-edit-input')) return;
+        selectSession(id);
+      });
+      const nameEl = card.querySelector('.session-name');
+      nameEl.addEventListener('dblclick', (e) => {
+        e.stopPropagation();
+        startRename(id, nameEl);
+      });
+      // Drag only via handle: enable draggable on handle press, reset on dragend
+      const handle = card.querySelector('.drag-handle');
+      handle.addEventListener('mousedown', () => card.setAttribute('draggable', 'true'));
+      handle.addEventListener('touchstart', () => card.setAttribute('draggable', 'true'), { passive: true });
+      // Reset draggable if the handle was pressed but no drag occurred
+      card.addEventListener('mouseup', () => card.setAttribute('draggable', 'false'));
+      card.addEventListener('dragstart', (e) => onDragStart(e, id, card));
+      card.addEventListener('dragend', () => onDragEnd(card));
+      card.addEventListener('dragover', (e) => onDragOver(e, card));
+      card.addEventListener('drop', (e) => onDrop(e, id, card));
     });
-    updateImageUI();
+  }
+
+  // --- Rename (inline edit) ---
+  function startRename(id, nameEl) {
+    const s = state.sessions[id];
+    if (!s) return;
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.className = 'name-edit-input';
+    input.value = sessionDisplayName(s);
+    nameEl.innerHTML = '';
+    nameEl.appendChild(input);
+    input.focus();
+    input.select();
+
+    let done = false;
+    const commit = (save) => {
+      if (done) return;
+      done = true;
+      if (save) {
+        const val = input.value.trim();
+        const baseName = s.displayName || s.name;
+        if (!val || val === baseName) delete state.sessionMeta.names[id];
+        else state.sessionMeta.names[id] = val;
+        saveSessionMeta();
+      }
+      renderSessions();
+    };
+    input.addEventListener('keydown', (e) => {
+      e.stopPropagation();
+      if (e.key === 'Enter') { e.preventDefault(); commit(true); }
+      else if (e.key === 'Escape') { e.preventDefault(); commit(false); }
+    });
+    input.addEventListener('blur', () => commit(true));
+    input.addEventListener('click', (e) => e.stopPropagation());
+  }
+
+  // --- Reorder (drag & drop) ---
+  let dragSrcId = null;
+
+  function onDragStart(e, id, card) {
+    dragSrcId = id;
+    card.classList.add('dragging');
+    e.dataTransfer.effectAllowed = 'move';
+    try { e.dataTransfer.setData('text/plain', id); } catch {}
+  }
+
+  function onDragEnd(card) {
+    card.classList.remove('dragging');
+    card.setAttribute('draggable', 'false');
+    document.querySelectorAll('.session-card.drag-over').forEach(c => c.classList.remove('drag-over'));
+    dragSrcId = null;
+  }
+
+  function onDragOver(e, card) {
+    if (!dragSrcId || card.dataset.id === dragSrcId) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    document.querySelectorAll('.session-card.drag-over').forEach(c => { if (c !== card) c.classList.remove('drag-over'); });
+    card.classList.add('drag-over');
+  }
+
+  function onDrop(e, targetId, card) {
+    e.preventDefault();
+    card.classList.remove('drag-over');
+    if (!dragSrcId || dragSrcId === targetId) return;
+    const rect = card.getBoundingClientRect();
+    const after = (e.clientY - rect.top) > rect.height / 2;
+    reorderSessions(dragSrcId, targetId, after);
+  }
+
+  function reorderSessions(srcId, targetId, after) {
+    const order = getOrderedSessionIds();
+    const from = order.indexOf(srcId);
+    if (from === -1) return;
+    order.splice(from, 1);
+    let to = order.indexOf(targetId);
+    if (to === -1) return;
+    if (after) to += 1;
+    order.splice(to, 0, srcId);
+    state.sessionMeta.order = order;
+    saveSessionMeta();
+    renderSessions();
   }
 
   function selectSession(id) {
@@ -1152,7 +1360,13 @@
     $('#msgInput').disabled = false;
     $('#sendBtn').disabled = false;
     $('#msgInput').placeholder = 'Send a message to session... (Shift+Enter for new line)';
-    renderSessions();
+    // Update active highlight + clear unread badge in place. A full renderSessions()
+    // here would replace the card DOM mid-click and break the rename double-click.
+    document.querySelectorAll('#sessionsList .session-card').forEach(c => {
+      const isSel = c.dataset.id === id;
+      c.classList.toggle('active', isSel);
+      if (isSel) { const badge = c.querySelector('.unread-badge'); if (badge) badge.remove(); }
+    });
     renderMessages();
     updateImageUI();
     $('#msgInput').focus();
@@ -1177,7 +1391,7 @@
     }
 
     const s = state.sessions[state.selectedSession];
-    header.textContent = s ? (s.displayName || s.name) : state.selectedSession.slice(0, 12);
+    header.textContent = s ? sessionDisplayName(s) : state.selectedSession.slice(0, 12);
 
     const msgs = state.messages[state.selectedSession] || [];
     if (!msgs.length) {
@@ -1224,7 +1438,7 @@
     el.innerHTML = state.notifications.slice(0, 50).map((n, i) => {
       const timeStr = relativeTime(n.time);
       const session = state.sessions[n.sessionId];
-      const sName = session ? session.name : n.sessionId.slice(0, 8);
+      const sName = session ? sessionDisplayName(session) : n.sessionId.slice(0, 8);
       // Check if this is an unresolved permission request
       let permButtons = '';
       if (n.permRequestId) {
@@ -1559,6 +1773,7 @@
   // Keyboard shortcuts: Enter=allow, Esc=deny — works even in textarea when permission is pending
   document.addEventListener('keydown', (e) => {
     if (e.key !== 'Enter' && e.key !== 'Escape') return;
+    if (e.target.classList && e.target.classList.contains('name-edit-input')) return;
     const sid = state.selectedSession;
     if (!sid) return;
     const reqs = state.permissionRequests[sid] || [];

package/dist/hub/server.js

@@ -2,7 +2,7 @@
 
 // src/hub/server.ts
 import http from "http";
-import fs3 from "fs";
+import fs4 from "fs";
 import path4 from "path";
 import { fileURLToPath } from "url";
 import { WebSocketServer, WebSocket } from "ws";
@@ -653,6 +653,54 @@ function saveConfig(config) {
   fs2.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2), { encoding: "utf-8", mode: 384 });
 }
 
+// src/shared/crash-guard.ts
+import fs3 from "fs";
+var BURST_WINDOW_MS = 6e4;
+var BURST_LIMIT = 10;
+function appendToLog(text) {
+  try {
+    fs3.mkdirSync(CONFIG_DIR, { recursive: true });
+    fs3.appendFileSync(LOG_FILE, text, "utf-8");
+  } catch {
+  }
+}
+function describe(err) {
+  if (err instanceof Error) return err.stack ?? `${err.name}: ${err.message}`;
+  try {
+    return JSON.stringify(err);
+  } catch {
+    return String(err);
+  }
+}
+function installCrashGuard(context) {
+  let recent = [];
+  const handle = (kind, err) => {
+    const stack = describe(err);
+    appendToLog(`
+[${(/* @__PURE__ */ new Date()).toISOString()}] ${kind} (${context})
+${stack}
+`);
+    logger.error(`${kind} caught by crash guard: ${stack}`);
+    const now = Date.now();
+    recent = recent.filter((t) => now - t < BURST_WINDOW_MS);
+    recent.push(now);
+    if (recent.length > BURST_LIMIT) {
+      const msg = `${recent.length} unhandled errors within ${BURST_WINDOW_MS / 1e3}s \u2014 exiting`;
+      appendToLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] ${msg}
+`);
+      logger.error(msg);
+      process.exit(1);
+    }
+  };
+  process.on("uncaughtException", (err) => handle("uncaughtException", err));
+  process.on("unhandledRejection", (reason) => handle("unhandledRejection", reason));
+}
+function logStartup(context) {
+  appendToLog(`
+[${(/* @__PURE__ */ new Date()).toISOString()}] ${context} started (pid ${process.pid})
+`);
+}
+
 // src/hub/server.ts
 var __dirname = path4.dirname(fileURLToPath(import.meta.url));
 var HubServer = class {
@@ -696,9 +744,12 @@ var HubServer = class {
     this.httpServer = http.createServer((req, res) => this.handleHttp(req, res));
     this.wssChannel = new WebSocketServer({ noServer: true });
     this.wssChannel.on("connection", (ws, req) => this.handleChannelConnection(ws, req));
+    this.wssChannel.on("error", (err) => logger.warn(`Channel WebSocket server error: ${err.message}`));
     this.wssDashboard = new WebSocketServer({ noServer: true });
     this.wssDashboard.on("connection", (ws) => this.handleDashboardConnection(ws));
+    this.wssDashboard.on("error", (err) => logger.warn(`Dashboard WebSocket server error: ${err.message}`));
     this.httpServer.on("upgrade", (req, socket, head) => {
+      socket.on("error", (err) => logger.debug(`Upgrade socket error: ${err.message}`));
       const url = new URL(req.url, `http://${req.headers.host}`);
       const pathname = url.pathname;
       if (this.token && !this.isLocalRequest(req)) {
@@ -725,8 +776,11 @@ var HubServer = class {
     this.cleanupUploads();
     this.startHeartbeat();
     return new Promise((resolve, reject) => {
-      this.httpServer.on("error", reject);
+      const onStartupError = (err) => reject(err);
+      this.httpServer.once("error", onStartupError);
       this.httpServer.listen(this.port, this.host, () => {
+        this.httpServer.removeListener("error", onStartupError);
+        this.httpServer.on("error", (err) => logger.error(`HTTP server error: ${err.message}`));
         const displayHost = this.host === "0.0.0.0" ? "127.0.0.1" : this.host;
         logger.info(`Hub server listening on http://${displayHost}:${this.port}`);
         resolve();
@@ -847,8 +901,8 @@ var HubServer = class {
     ];
     logger.debug(`Dashboard candidates: ${JSON.stringify(candidates)}`);
     for (const candidate of candidates) {
-      if (fs3.existsSync(candidate)) {
-        const html = fs3.readFileSync(candidate, "utf-8");
+      if (fs4.existsSync(candidate)) {
+        const html = fs4.readFileSync(candidate, "utf-8");
         res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
         res.end(html);
         return;
@@ -895,6 +949,10 @@ var HubServer = class {
   handleChannelConnection(ws, req) {
     const isLocal = this.isLocalRequest(req);
     logger.info(`Channel server connected (local: ${isLocal})`);
+    ws.on("error", (err) => {
+      logger.warn(`Channel WebSocket error: ${err.message}`);
+      ws.terminate();
+    });
     ws.on("pong", () => {
       for (const [sessionId, sock] of this.channelSockets) {
         if (sock === ws) {
@@ -1004,6 +1062,10 @@ var HubServer = class {
   handleDashboardConnection(ws) {
     this.dashboardSockets.add(ws);
     logger.info(`Dashboard connected (total: ${this.dashboardSockets.size})`);
+    ws.on("error", (err) => {
+      logger.warn(`Dashboard WebSocket error: ${err.message}`);
+      ws.terminate();
+    });
     const sessionsMsg = {
       type: "sessions_list",
       sessions: this.sessions.getAll()
@@ -1060,11 +1122,11 @@ var HubServer = class {
       logger.warn("Image upload rejected: exceeds 10MB");
       return;
     }
-    fs3.mkdirSync(UPLOADS_DIR, { recursive: true });
+    fs4.mkdirSync(UPLOADS_DIR, { recursive: true });
     const ext = mimeType.split("/")[1] === "jpeg" ? "jpg" : mimeType.split("/")[1];
     const filename = `${randomUUID3()}.${ext}`;
     const filePath = path4.join(UPLOADS_DIR, filename);
-    fs3.writeFileSync(filePath, buffer);
+    fs4.writeFileSync(filePath, buffer);
     const forwardMsg = {
       type: "image_to_session",
       sessionId,
@@ -1077,7 +1139,7 @@ var HubServer = class {
     logger.info(`Image saved and forwarded: ${filename} (${buffer.length} bytes)`);
     setTimeout(() => {
       try {
-        fs3.unlinkSync(filePath);
+        fs4.unlinkSync(filePath);
       } catch {
       }
     }, 5 * 60 * 1e3);
@@ -1247,11 +1309,11 @@ var HubServer = class {
   }
   cleanupUploads() {
     try {
-      if (!fs3.existsSync(UPLOADS_DIR)) return;
-      const files = fs3.readdirSync(UPLOADS_DIR);
+      if (!fs4.existsSync(UPLOADS_DIR)) return;
+      const files = fs4.readdirSync(UPLOADS_DIR);
       for (const file of files) {
         try {
-          fs3.unlinkSync(path4.join(UPLOADS_DIR, file));
+          fs4.unlinkSync(path4.join(UPLOADS_DIR, file));
         } catch {
         }
       }
@@ -1295,6 +1357,8 @@ var HubServer = class {
   }
 };
 if (process.argv[1] && (process.argv[1].endsWith("hub/server.js") || process.argv[1].endsWith("hub/server.ts"))) {
+  installCrashGuard("hub daemon");
+  logStartup("Hub daemon");
   const config = loadConfig();
   const hub = new HubServer(config);
   hub.start().catch((err) => {