@delt/claude-alarm 0.8.2 → 0.9.0

package/src/dashboard/index.html

@@ -187,6 +187,7 @@
     outline: none;
     font-family: inherit;
   }
+  .name-edit-input.invalid { border-color: var(--red); }
   .session-name {
     font-size: 14px;
     font-weight: 500;
@@ -400,6 +401,39 @@
   }
   .drag-overlay.active { display: flex; }
 
+  .mention-error {
+    display: none;
+    padding: 6px 20px 0;
+    color: var(--red);
+    font-size: 12px;
+  }
+  .mention-error.show { display: block; }
+  .message-input-area { position: relative; }
+  .mention-popup {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 4px);
+    left: 20px;
+    min-width: 220px;
+    max-height: 200px;
+    overflow-y: auto;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+    z-index: 20;
+  }
+  .mention-popup.open { display: block; }
+  .mention-item {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 6px 10px;
+    font-size: 13px;
+    cursor: pointer;
+  }
+  .mention-item.active, .mention-item:hover { background: var(--border); }
+  .mention-folder { color: var(--text-dim); font-size: 11px; }
   .message-input-area {
     border-top: 1px solid var(--border);
     padding: 12px 20px;
@@ -963,7 +997,9 @@
       <span class="preview-name" id="previewName"></span>
       <button class="preview-cancel" id="previewCancel">&times;</button>
     </div>
+    <div class="mention-error" id="mentionError"></div>
     <div class="message-input-area">
+      <div class="mention-popup" id="mentionPopup"></div>
       <button class="attach-btn" id="attachBtn" disabled title="Attach image">&#128206;</button>
       <input type="file" id="fileInput" accept="image/*" style="display:none">
       <textarea id="msgInput" placeholder="Send a message to session... (Shift+Enter for new line)" disabled rows="1"></textarea>
@@ -1095,6 +1131,146 @@
     return state.sessionMeta.names[s.id] || s.displayName || s.name;
   }
 
+  function normName(s) {
+    return String(s).normalize('NFC').trim().toLowerCase();
+  }
+
+  function folderName(s) {
+    return s.displayName || s.name;
+  }
+
+  function renameError(val, id) {
+    if (/[\[\]@]/.test(val)) return 'Name cannot contain [, ] or @';
+    const key = normName(val);
+    const taken = Object.values(state.sessions).some(o => o.id !== id &&
+      (normName(sessionDisplayName(o)) === key || normName(folderName(o)) === key));
+    return taken ? 'Name already used by another session' : null;
+  }
+
+  function sessionNames(s) {
+    return [state.sessionMeta.names[s.id], folderName(s), s.peerName].filter(Boolean);
+  }
+
+  // Built-in SendMessage only reaches sessions on the hub's own machine.
+  function mentionTargets() {
+    const selected = state.sessions[state.selectedSession];
+    if (!selected || !selected.isLocal) return [];
+    return Object.values(state.sessions).filter(s => s.id !== selected.id && s.isLocal && s.peerName);
+  }
+
+  function resolveMention(name) {
+    const key = normName(name);
+    const matches = mentionTargets().filter(s => sessionNames(s).some(n => normName(n) === key));
+    return matches.length === 1 ? matches[0] : null;
+  }
+
+  function mentionLabel(s) {
+    return [sessionDisplayName(s), folderName(s), s.peerName].find(n => resolveMention(n) === s) || s.peerName;
+  }
+
+  // A token only counts as a mention when it names (or starts with) some
+  // session, so pasted code like @Override or npm @types/x is left alone.
+  function looksLikeSessionMention(name) {
+    const key = normName(name);
+    return Object.values(state.sessions).some(s => sessionNames(s).some(n => key.startsWith(normName(n))));
+  }
+
+  function extractMentions(text) {
+    const prose = text.replace(/```[\s\S]*?(```|$)/g, ' ').replace(/`[^`\n]*`/g, ' ');
+    const re = /(^|\s)@(?:\[([^\]\n]+)\]|([^\s\[\]]+))/g;
+    const found = [];
+    let m;
+    while ((m = re.exec(prose))) {
+      const bracketed = m[2] !== undefined;
+      const name = bracketed ? m[2] : m[3].replace(/[.,!?;:)]+$/, '');
+      found.push({ raw: m[0].trim(), name, bracketed });
+    }
+    return found;
+  }
+
+  // The routing line is the contract with the channel instructions in
+  // src/channel/server.ts (ROUTING) — change both together.
+  function buildRouting(text) {
+    const mentions = extractMentions(text);
+    if (!mentions.length) return { ok: true, content: text };
+    const unknown = [];
+    const lines = [];
+    const seen = new Set();
+    for (const m of mentions) {
+      const s = resolveMention(m.name);
+      if (!s) {
+        if (m.bracketed || looksLikeSessionMention(m.name)) unknown.push(m.raw);
+        continue;
+      }
+      if (seen.has(s.id)) continue;
+      seen.add(s.id);
+      lines.push(`[claude-alarm] @${m.name} = SendMessage to "${s.peerName}"`);
+    }
+    if (unknown.length) return { ok: false, unknown };
+    if (!lines.length) return { ok: true, content: text };
+    return { ok: true, content: `${text}\n\n${lines.join('\n')}` };
+  }
+
+  function showMentionError(msg) {
+    const el = $('#mentionError');
+    el.textContent = msg || '';
+    el.classList.toggle('show', !!msg);
+  }
+
+  let mentionState = { open: false, items: [], index: 0, start: -1 };
+
+  function currentMentionQuery(input) {
+    const upto = input.value.slice(0, input.selectionStart);
+    const m = upto.match(/(^|\s)@(\[[^\]\n]*|[^\s\[\]]*)$/);
+    if (!m) return null;
+    return { start: upto.length - m[2].length - 1, query: m[2].replace(/^\[/, '') };
+  }
+
+  function closeMentionPopup() {
+    mentionState = { open: false, items: [], index: 0, start: -1 };
+    $('#mentionPopup').classList.remove('open');
+  }
+
+  function renderMentionPopup() {
+    $('#mentionPopup').innerHTML = mentionState.items.map((s, i) =>
+      `<div class="mention-item${i === mentionState.index ? ' active' : ''}" data-idx="${i}">` +
+      `<span>${esc(sessionDisplayName(s))}</span><span class="mention-folder">${esc(folderName(s))}</span></div>`
+    ).join('');
+  }
+
+  function updateMentionPopup() {
+    const q = currentMentionQuery($('#msgInput'));
+    if (!q) return closeMentionPopup();
+    const key = normName(q.query);
+    const items = mentionTargets().filter(s =>
+      normName(sessionDisplayName(s)).includes(key) || normName(folderName(s)).includes(key));
+    if (!items.length) return closeMentionPopup();
+    const index = mentionState.open ? Math.min(mentionState.index, items.length - 1) : 0;
+    mentionState = { open: true, items, index, start: q.start };
+    renderMentionPopup();
+    $('#mentionPopup').classList.add('open');
+  }
+
+  function applyMention(s) {
+    const input = $('#msgInput');
+    const label = mentionLabel(s);
+    const token = /\s/.test(label) ? `@[${label}] ` : `@${label} `;
+    const before = input.value.slice(0, mentionState.start);
+    const after = input.value.slice(input.selectionStart);
+    input.value = before + token + after;
+    const pos = before.length + token.length;
+    input.setSelectionRange(pos, pos);
+    closeMentionPopup();
+    input.focus();
+  }
+
+  $('#mentionPopup').addEventListener('mousedown', (e) => {
+    const item = e.target.closest('.mention-item');
+    if (!item) return;
+    e.preventDefault();
+    applyMention(mentionState.items[Number(item.dataset.idx)]);
+  });
+
   // --- Theme ---
   function initTheme() {
     const saved = localStorage.getItem('claude-alarm-theme') || 'dark';
@@ -1307,12 +1483,18 @@
     input.select();
 
     let done = false;
-    const commit = (save) => {
+    const commit = (save, fromBlur) => {
       if (done) return;
+      const val = input.value.trim();
+      const baseName = s.displayName || s.name;
+      const err = save && val && val !== baseName ? renameError(val, id) : null;
+      if (err && !fromBlur) {
+        input.classList.add('invalid');
+        input.title = err;
+        return;
+      }
       done = true;
-      if (save) {
-        const val = input.value.trim();
-        const baseName = s.displayName || s.name;
+      if (save && !err) {
         if (!val || val === baseName) delete state.sessionMeta.names[id];
         else state.sessionMeta.names[id] = val;
         saveSessionMeta();
@@ -1321,10 +1503,11 @@
     };
     input.addEventListener('keydown', (e) => {
       e.stopPropagation();
-      if (e.key === 'Enter') { e.preventDefault(); commit(true); }
-      else if (e.key === 'Escape') { e.preventDefault(); commit(false); }
+      if (e.key === 'Enter') { e.preventDefault(); commit(true, false); }
+      else if (e.key === 'Escape') { e.preventDefault(); commit(false, false); }
     });
-    input.addEventListener('blur', () => commit(true));
+    input.addEventListener('input', () => { input.classList.remove('invalid'); input.title = ''; });
+    input.addEventListener('blur', () => commit(true, true));
     input.addEventListener('click', (e) => e.stopPropagation());
   }
 
@@ -1577,6 +1760,13 @@
     if (!content && !hasImage) return;
     if (!state.selectedSession || !state.ws) return;
 
+    const routing = buildRouting(content);
+    if (!routing.ok) {
+      showMentionError(`Unknown session: ${routing.unknown.join(', ')} — pick from the @ list, or put a space right after the name.`);
+      return;
+    }
+    showMentionError(null);
+
     if (hasImage) {
       // Send image + text together
       state.ws.send(JSON.stringify({
@@ -1585,11 +1775,11 @@
         imageData: state.pendingImage.data,
         mimeType: state.pendingImage.mimeType,
         originalName: state.pendingImage.name,
-        content: content || '',
+        content: routing.content || '',
       }));
     } else if (content) {
       // Text only
-      state.ws.send(JSON.stringify({ type: 'message_to_session', sessionId: state.selectedSession, content }));
+      state.ws.send(JSON.stringify({ type: 'message_to_session', sessionId: state.selectedSession, content: routing.content }));
     }
 
     // Add to local messages
@@ -1604,6 +1794,7 @@
     saveMessages();
 
     input.value = '';
+    closeMentionPopup();
     input.style.height = 'auto';
     clearPendingImage();
     state.waitingReply[state.selectedSession] = true;
@@ -1612,11 +1803,24 @@
 
   $('#sendBtn').addEventListener('click', sendMessage);
   $('#msgInput').addEventListener('keydown', (e) => {
+    if (mentionState.open) {
+      // Enter while an IME (e.g. Korean) is composing only commits the syllable.
+      if (e.isComposing) return;
+      const n = mentionState.items.length;
+      if (e.key === 'ArrowDown') { e.preventDefault(); mentionState.index = (mentionState.index + 1) % n; renderMentionPopup(); return; }
+      if (e.key === 'ArrowUp') { e.preventDefault(); mentionState.index = (mentionState.index - 1 + n) % n; renderMentionPopup(); return; }
+      if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); applyMention(mentionState.items[mentionState.index]); return; }
+      if (e.key === 'Escape') { e.preventDefault(); closeMentionPopup(); return; }
+    }
     if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
   });
+  $('#msgInput').addEventListener('blur', closeMentionPopup);
+  $('#msgInput').addEventListener('click', updateMentionPopup);
   $('#msgInput').addEventListener('input', function() {
+    showMentionError(null);
     this.style.height = 'auto';
     this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+    updateMentionPopup();
   });
 
   function relativeTime(ts) {