@delt/claude-alarm 0.8.2 → 0.9.1

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;
@@ -837,7 +871,7 @@
 <div class="token-overlay hidden" id="tokenOverlay">
   <div class="token-form">
     <h2>Authentication Required</h2>
-    <p>Enter the hub token to connect. Find it by running: <code>claude-alarm token</code></p>
+    <p>Enter the hub token to connect. Run <code>claude-alarm token</code>, or open the login link printed by <code>claude-alarm hub start</code>.</p>
     <input type="text" id="tokenInput" placeholder="Paste token here..." autocomplete="off">
     <button id="tokenSubmit">Connect</button>
     <div class="token-error" id="tokenError">Connection failed. Check your token.</div>
@@ -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>
@@ -990,7 +1026,6 @@
     selectedSession: null,
     messages: {},
     notifications: [],
-    token: null,
     pendingImage: null,
     unread: {},
     waitingReply: {},
@@ -1095,6 +1130,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';
@@ -1115,25 +1290,28 @@
   initTheme();
 
   // --- Token handling ---
-  function getToken() {
-    const params = new URLSearchParams(location.search);
-    const urlToken = params.get('token');
-    if (urlToken) {
-      sessionStorage.setItem('claude-alarm-token', urlToken);
-      return urlToken;
+  async function checkAuth() {
+    try {
+      return (await fetch('/api/status')).status !== 401;
+    } catch {
+      return true;
     }
-    return sessionStorage.getItem('claude-alarm-token');
   }
 
   function showTokenForm() { $('#tokenOverlay').classList.remove('hidden'); }
   function hideTokenForm() { $('#tokenOverlay').classList.add('hidden'); }
 
-  $('#tokenSubmit').addEventListener('click', () => {
+  $('#tokenSubmit').addEventListener('click', async () => {
     const token = $('#tokenInput').value.trim();
     if (!token) return;
-    state.token = token;
-    sessionStorage.setItem('claude-alarm-token', token);
+    const res = await fetch('/api/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ token }),
+    }).catch(() => null);
+    if (!res || !res.ok) { $('#tokenError').style.display = 'block'; return; }
     $('#tokenError').style.display = 'none';
+    $('#tokenInput').value = '';
     hideTokenForm();
     connect();
   });
@@ -1144,25 +1322,23 @@
   // --- WebSocket ---
   function connect() {
     const proto = location.protocol === 'https:' ? 'wss' : 'ws';
-    const tokenQuery = state.token ? `?token=${encodeURIComponent(state.token)}` : '';
-    const ws = new WebSocket(`${proto}://${location.host}/ws/dashboard${tokenQuery}`);
+    const ws = new WebSocket(`${proto}://${location.host}/ws/dashboard`);
+    let opened = false;
 
     ws.onopen = () => {
+      opened = true;
       state.ws = ws;
       hideTokenForm();
       $('#connDot').classList.add('connected');
       $('#connLabel').textContent = 'Connected';
     };
-    ws.onclose = () => {
+    ws.onclose = async () => {
       state.ws = null;
       $('#connDot').classList.remove('connected');
       $('#connLabel').textContent = 'Disconnected';
+      if (!opened && !(await checkAuth())) { showTokenForm(); return; }
       setTimeout(connect, 3000);
     };
-    ws.onerror = () => {
-      if (!state.token) { showTokenForm(); } else { $('#tokenError').style.display = 'block'; showTokenForm(); }
-      ws.close();
-    };
     ws.onmessage = (e) => { try { handleMessage(JSON.parse(e.data)); } catch {} };
   }
 
@@ -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) {
@@ -1924,16 +2128,14 @@
   $('#settingsToggle').addEventListener('click', async () => {
     // Load webhook data
     try {
-      const tokenQuery = state.token ? `?token=${encodeURIComponent(state.token)}` : '';
-      const res = await fetch(`/api/webhooks${tokenQuery}`);
+      const res = await fetch(`/api/webhooks`);
       const data = await res.json();
       webhookData = data.webhooks || [];
     } catch { webhookData = []; }
     renderWebhooks();
     // Load telegram data
     try {
-      const tokenQuery = state.token ? `?token=${encodeURIComponent(state.token)}` : '';
-      const res = await fetch(`/api/telegram${tokenQuery}`);
+      const res = await fetch(`/api/telegram`);
       const data = await res.json();
       const tg = data.telegram || {};
       if (!$('#tgBotToken').value || $('#tgBotToken').value.includes('...')) {
@@ -1968,8 +2170,7 @@
   $('#webhookSave').addEventListener('click', async () => {
     const valid = webhookData.filter(w => w.url.trim());
     try {
-      const tokenQuery = state.token ? `?token=${encodeURIComponent(state.token)}` : '';
-      await fetch(`/api/webhooks${tokenQuery}`, {
+      await fetch(`/api/webhooks`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ webhooks: valid }),
@@ -2044,8 +2245,7 @@
     $('#tgDetectStatus').textContent = 'Detecting...';
     $('#tgChatList').innerHTML = '';
     try {
-      const tokenQuery = state.token ? `?token=${encodeURIComponent(state.token)}` : '';
-      const res = await fetch(`/api/telegram/detect${tokenQuery}`, {
+      const res = await fetch(`/api/telegram/detect`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ botToken }),
@@ -2082,8 +2282,7 @@
     const chatId = $('#tgChatId').value.trim();
     if (!botToken || !chatId) { showTgStatus('Bot Token and Chat ID are required.', false); return; }
     try {
-      const tokenQuery = state.token ? `?token=${encodeURIComponent(state.token)}` : '';
-      const res = await fetch(`/api/telegram/test${tokenQuery}`, {
+      const res = await fetch(`/api/telegram/test`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ botToken, chatId }),
@@ -2102,8 +2301,7 @@
     if (!botToken || !chatId) { showTgStatus('Bot Token and Chat ID are required.', false); return; }
     if (botToken.includes('...')) { showTgStatus('Bot Token is masked. Please enter the full token.', false); return; }
     try {
-      const tokenQuery = state.token ? `?token=${encodeURIComponent(state.token)}` : '';
-      await fetch(`/api/telegram${tokenQuery}`, {
+      await fetch(`/api/telegram`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ telegram: { botToken, chatId, enabled } }),
@@ -2131,8 +2329,7 @@
     document.querySelector('.sessions-panel').classList.add('mobile-active');
   }
 
-  state.token = getToken();
-  connect();
+  checkAuth().then((ok) => (ok ? connect() : showTokenForm()));
 })();
 </script>
 </body>